All files / app/codeCharta/ui/ribbonBar/ribbonBarPanel ribbonBarPanel.component.ts

96.87% Statements 31/32
83.87% Branches 26/31
100% Functions 7/7
96.66% Lines 29/30

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