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
}
}
}
|