Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 4x 4x 4x 4x 53x 53x 53x 53x 53x 324x 53x 53x 53x 53x 54x 54x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 2x | import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output, ViewChild, ViewContainerRef } from "@angular/core" import { RibbonBarPanelSettingsComponent } from "./ribbonBarPanelSettings.component" import { MatCard } from "@angular/material/card" @Component({ selector: "cc-ribbon-bar-panel", templateUrl: "./ribbonBarPanel.component.html", styleUrl: "./ribbonBarPanel.component.scss", standalone: true, imports: [MatCard] }) export class RibbonBarPanelComponent implements OnInit, OnDestroy { @Input() title?: string @Input() collapseOnPanelClick = true @HostBinding("class.separator") @Input() separator = false @ContentChild(RibbonBarPanelSettingsComponent, { read: ElementRef<HTMLElement> }) private settingsRef?: ElementRef<HTMLElement> @ViewChild("toggle") private toggleSettingsRef!: ElementRef<HTMLElement> @ViewChild("toggleHeader") private toggleHeaderRef!: ElementRef<HTMLElement> @HostBinding("class.expanded") isExpanded = false @Input() isHeaderExpandable = false @Input() isPinned = false @HostBinding("class.expandable") get hasSettings() { return Boolean(this.settingsRef) } @Output() onToggleSettings = new EventEmitter<boolean>() private mouseDownListener?: (event: MouseEvent) => void constructor(private readonly viewReference: ViewContainerRef) {} ngOnInit(): void { this.mouseDownListener = (event: MouseEvent) => this.collapseOnOutsideClick(event) document.addEventListener("mousedown", this.mouseDownListener) } ngOnDestroy(): void { if (this.mouseDownListener) { document.removeEventListener("mousedown", this.mouseDownListener) } } toggleSettings() { this.isExpanded = !this.isExpanded this.onToggleSettings.emit(this.isExpanded) } private collapseOnOutsideClick(event: MouseEvent) { Iif (this.isPinned) { return } const target = event.target as Node const overlayPaneElement = document.querySelector(".cdk-overlay-container") const clickedPanel = this.viewReference.element.nativeElement.contains(target) const clickedWithinOverlayPane = overlayPaneElement ? overlayPaneElement.contains(target) : false const clickedSettingsElement = this.settingsRef?.nativeElement?.contains(target) ?? false const clickedSettingsToggleElement = this.toggleSettingsRef.nativeElement.contains(target) const clickedHeaderToggleElement = this.toggleHeaderRef?.nativeElement.contains(target) ?? false const shouldCollapse = !clickedWithinOverlayPane && !clickedSettingsElement && !clickedSettingsToggleElement && !clickedHeaderToggleElement && (!clickedPanel || this.collapseOnPanelClick) if (shouldCollapse) { this.isExpanded = false } } } |