@ux-aspects/ux-aspects/esm2022/components/hierarchy-bar/hierarchy-bar-popover/hierarchy-bar-popover.component.mjs

Open source user interface framework for building modern, responsive, mobile big data applications

import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { HierarchyBarService } from '../hierarchy-bar.service';
import * as i0 from "@angular/core";
import * as i1 from "../../../directives/accessibility/focus-indicator/focus-indicator.directive";
import * as i2 from "../../../directives/accessibility/tabbable-list/tabbable-list.directive";
import * as i3 from "../../../directives/accessibility/tabbable-list/tabbable-list-item.directive";
import * as i4 from "@angular/common";
import * as i5 from "../../../directives/focus-if/focus-if.directive";
import * as i6 from "../hierarchy-bar-popover-item/hierarchy-bar-popover-item.component";
export class HierarchyBarPopoverComponent {
    constructor() {
        this.hierarchyBar = inject(HierarchyBarService);
        /** Define the nodes to display */
        this.nodes = [];
        /** Defines if dropdown items should have separators between them to distinguish if nodes are siblings or ancestors */
        this.separator = false;
        /** Emit a select event when an item ahs been clicked or enter key pressed */
        this.selected = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HierarchyBarPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: HierarchyBarPopoverComponent, selector: "ux-hierarchy-bar-popover", inputs: { nodes: "nodes", loading: "loading", separator: "separator" }, outputs: { selected: "selected" }, ngImport: i0, template: "<!-- Loading Indicator -->\n@if (loading) {\n  <ul class=\"hierarchy-bar-node-list\">\n    <li class=\"hierarchy-bar-loading-indicator\">\n      <ng-container [ngTemplateOutlet]=\"hierarchyBar.loadingIndicator || defaultLoadingIndicator\"></ng-container>\n    </li>\n  </ul>\n}\n\n<!-- List of children -->\n@if (!loading) {\n  <div class=\"hierarchy-bar-node-list\"\n    [class.hierarchy-bar-node-list-separator]=\"separator\"\n    uxTabbableList\n    [returnFocus]=\"true\">\n    @for (node of nodes; track node; let first = $first) {\n      <ux-hierarchy-bar-popover-item\n        uxFocusIndicator\n        [node]=\"node\"\n        [focusIf]=\"first\"\n        uxTabbableListItem\n        (selected)=\"selected.emit($event)\">\n      </ux-hierarchy-bar-popover-item>\n    }\n  </div>\n}\n\n<!-- Loading Indicator Template -->\n<ng-template #defaultLoadingIndicator>\n  <div class=\"hierarchy-bar-loading-icon\" alt=\"Hierarchy Bar Loading Indicator\">\n    <div class=\"spinner spinner-accent spinner-bounce-middle\"></div>\n  </div>\n\n  <!-- Show the name of the current node -->\n  <span class=\"hierarchy-bar-loading-title\">Loading...</span>\n</ng-template>", dependencies: [{ kind: "directive", type: i1.FocusIndicatorDirective, selector: "[uxFocusIndicator]", inputs: ["checkChildren", "mouseFocusIndicator", "touchFocusIndicator", "keyboardFocusIndicator", "programmaticFocusIndicator"], outputs: ["indicator"], exportAs: ["ux-focus-indicator"] }, { kind: "directive", type: i2.TabbableListDirective, selector: "[uxTabbableList]", inputs: ["direction", "wrap", "focusOnShow", "returnFocus", "hierarchy", "allowAltModifier", "allowCtrlModifier", "allowBoundaryKeys"], exportAs: ["ux-tabbable-list"] }, { kind: "directive", type: i3.TabbableListItemDirective, selector: "[uxTabbableListItem]", inputs: ["parent", "rank", "disabled", "expanded", "key"], outputs: ["expandedChange", "activated"], exportAs: ["ux-tabbable-list-item"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.FocusIfDirective, selector: "[focusIf]", inputs: ["focusIfDelay", "focusIfScroll", "focusIf"] }, { kind: "component", type: i6.HierarchyBarPopoverItemComponent, selector: "ux-hierarchy-bar-popover-item", inputs: ["node"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HierarchyBarPopoverComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ux-hierarchy-bar-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Loading Indicator -->\n@if (loading) {\n  <ul class=\"hierarchy-bar-node-list\">\n    <li class=\"hierarchy-bar-loading-indicator\">\n      <ng-container [ngTemplateOutlet]=\"hierarchyBar.loadingIndicator || defaultLoadingIndicator\"></ng-container>\n    </li>\n  </ul>\n}\n\n<!-- List of children -->\n@if (!loading) {\n  <div class=\"hierarchy-bar-node-list\"\n    [class.hierarchy-bar-node-list-separator]=\"separator\"\n    uxTabbableList\n    [returnFocus]=\"true\">\n    @for (node of nodes; track node; let first = $first) {\n      <ux-hierarchy-bar-popover-item\n        uxFocusIndicator\n        [node]=\"node\"\n        [focusIf]=\"first\"\n        uxTabbableListItem\n        (selected)=\"selected.emit($event)\">\n      </ux-hierarchy-bar-popover-item>\n    }\n  </div>\n}\n\n<!-- Loading Indicator Template -->\n<ng-template #defaultLoadingIndicator>\n  <div class=\"hierarchy-bar-loading-icon\" alt=\"Hierarchy Bar Loading Indicator\">\n    <div class=\"spinner spinner-accent spinner-bounce-middle\"></div>\n  </div>\n\n  <!-- Show the name of the current node -->\n  <span class=\"hierarchy-bar-loading-title\">Loading...</span>\n</ng-template>" }]
        }], propDecorators: { nodes: [{
                type: Input
            }], loading: [{
                type: Input
            }], separator: [{
                type: Input
            }], selected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGllcmFyY2h5LWJhci1wb3BvdmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2hpZXJhcmNoeS1iYXIvaGllcmFyY2h5LWJhci1wb3BvdmVyL2hpZXJhcmNoeS1iYXItcG9wb3Zlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9oaWVyYXJjaHktYmFyL2hpZXJhcmNoeS1iYXItcG9wb3Zlci9oaWVyYXJjaHktYmFyLXBvcG92ZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDeEcsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7Ozs7Ozs7O0FBUS9ELE1BQU0sT0FBTyw0QkFBNEI7SUFMekM7UUFNYSxpQkFBWSxHQUFHLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO1FBRXBELGtDQUFrQztRQUN6QixVQUFLLEdBQXVCLEVBQUUsQ0FBQztRQUt4QyxzSEFBc0g7UUFDN0csY0FBUyxHQUFZLEtBQUssQ0FBQztRQUVwQyw2RUFBNkU7UUFDbkUsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFvQixDQUFDO0tBRTdEOytHQWZZLDRCQUE0QjttR0FBNUIsNEJBQTRCLDJLQ1R6Qywrb0NBbUNjOzs0RkQxQkQsNEJBQTRCO2tCQUx4QyxTQUFTOytCQUNJLDBCQUEwQixtQkFFbkIsdUJBQXVCLENBQUMsTUFBTTs4QkFNdEMsS0FBSztzQkFBYixLQUFLO2dCQUdHLE9BQU87c0JBQWYsS0FBSztnQkFHRyxTQUFTO3NCQUFqQixLQUFLO2dCQUdJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIGluamVjdCwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSGllcmFyY2h5QmFyU2VydmljZSB9IGZyb20gJy4uL2hpZXJhcmNoeS1iYXIuc2VydmljZSc7XG5pbXBvcnQgeyBIaWVyYXJjaHlCYXJOb2RlIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9oaWVyYXJjaHktYmFyLW5vZGUuaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd1eC1oaWVyYXJjaHktYmFyLXBvcG92ZXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9oaWVyYXJjaHktYmFyLXBvcG92ZXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEhpZXJhcmNoeUJhclBvcG92ZXJDb21wb25lbnQge1xuICAgIHJlYWRvbmx5IGhpZXJhcmNoeUJhciA9IGluamVjdChIaWVyYXJjaHlCYXJTZXJ2aWNlKTtcblxuICAgIC8qKiBEZWZpbmUgdGhlIG5vZGVzIHRvIGRpc3BsYXkgKi9cbiAgICBASW5wdXQoKSBub2RlczogSGllcmFyY2h5QmFyTm9kZVtdID0gW107XG5cbiAgICAvKiogRGVmaW5lIHRoZSBsb2FkaW5nIHN0YXRlICovXG4gICAgQElucHV0KCkgbG9hZGluZzogYm9vbGVhbjtcblxuICAgIC8qKiBEZWZpbmVzIGlmIGRyb3Bkb3duIGl0ZW1zIHNob3VsZCBoYXZlIHNlcGFyYXRvcnMgYmV0d2VlbiB0aGVtIHRvIGRpc3Rpbmd1aXNoIGlmIG5vZGVzIGFyZSBzaWJsaW5ncyBvciBhbmNlc3RvcnMgKi9cbiAgICBASW5wdXQoKSBzZXBhcmF0b3I6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIC8qKiBFbWl0IGEgc2VsZWN0IGV2ZW50IHdoZW4gYW4gaXRlbSBhaHMgYmVlbiBjbGlja2VkIG9yIGVudGVyIGtleSBwcmVzc2VkICovXG4gICAgQE91dHB1dCgpIHNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxIaWVyYXJjaHlCYXJOb2RlPigpO1xuXG59XG4iLCI8IS0tIExvYWRpbmcgSW5kaWNhdG9yIC0tPlxuQGlmIChsb2FkaW5nKSB7XG4gIDx1bCBjbGFzcz1cImhpZXJhcmNoeS1iYXItbm9kZS1saXN0XCI+XG4gICAgPGxpIGNsYXNzPVwiaGllcmFyY2h5LWJhci1sb2FkaW5nLWluZGljYXRvclwiPlxuICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJoaWVyYXJjaHlCYXIubG9hZGluZ0luZGljYXRvciB8fCBkZWZhdWx0TG9hZGluZ0luZGljYXRvclwiPjwvbmctY29udGFpbmVyPlxuICAgIDwvbGk+XG4gIDwvdWw+XG59XG5cbjwhLS0gTGlzdCBvZiBjaGlsZHJlbiAtLT5cbkBpZiAoIWxvYWRpbmcpIHtcbiAgPGRpdiBjbGFzcz1cImhpZXJhcmNoeS1iYXItbm9kZS1saXN0XCJcbiAgICBbY2xhc3MuaGllcmFyY2h5LWJhci1ub2RlLWxpc3Qtc2VwYXJhdG9yXT1cInNlcGFyYXRvclwiXG4gICAgdXhUYWJiYWJsZUxpc3RcbiAgICBbcmV0dXJuRm9jdXNdPVwidHJ1ZVwiPlxuICAgIEBmb3IgKG5vZGUgb2Ygbm9kZXM7IHRyYWNrIG5vZGU7IGxldCBmaXJzdCA9ICRmaXJzdCkge1xuICAgICAgPHV4LWhpZXJhcmNoeS1iYXItcG9wb3Zlci1pdGVtXG4gICAgICAgIHV4Rm9jdXNJbmRpY2F0b3JcbiAgICAgICAgW25vZGVdPVwibm9kZVwiXG4gICAgICAgIFtmb2N1c0lmXT1cImZpcnN0XCJcbiAgICAgICAgdXhUYWJiYWJsZUxpc3RJdGVtXG4gICAgICAgIChzZWxlY3RlZCk9XCJzZWxlY3RlZC5lbWl0KCRldmVudClcIj5cbiAgICAgIDwvdXgtaGllcmFyY2h5LWJhci1wb3BvdmVyLWl0ZW0+XG4gICAgfVxuICA8L2Rpdj5cbn1cblxuPCEtLSBMb2FkaW5nIEluZGljYXRvciBUZW1wbGF0ZSAtLT5cbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdExvYWRpbmdJbmRpY2F0b3I+XG4gIDxkaXYgY2xhc3M9XCJoaWVyYXJjaHktYmFyLWxvYWRpbmctaWNvblwiIGFsdD1cIkhpZXJhcmNoeSBCYXIgTG9hZGluZyBJbmRpY2F0b3JcIj5cbiAgICA8ZGl2IGNsYXNzPVwic3Bpbm5lciBzcGlubmVyLWFjY2VudCBzcGlubmVyLWJvdW5jZS1taWRkbGVcIj48L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPCEtLSBTaG93IHRoZSBuYW1lIG9mIHRoZSBjdXJyZW50IG5vZGUgLS0+XG4gIDxzcGFuIGNsYXNzPVwiaGllcmFyY2h5LWJhci1sb2FkaW5nLXRpdGxlXCI+TG9hZGluZy4uLjwvc3Bhbj5cbjwvbmctdGVtcGxhdGU+Il19