@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
45 lines • 8.94 kB
JavaScript
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, inject, Input, Output, Renderer2 } from '@angular/core';
import { FocusIndicatorOrigin, FocusIndicatorOriginService } from '../../../directives/accessibility/index';
import { HierarchyBarService } from '../hierarchy-bar.service';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class HierarchyBarPopoverItemComponent {
constructor() {
this.focusOriginService = inject(FocusIndicatorOriginService);
this.elementRef = inject(ElementRef);
this.renderer = inject(Renderer2);
this.hierarchyBar = inject(HierarchyBarService);
/**
* Emit when a click or enter key press occurs.
* Note this is an `async` EventEmitter to ensure that
* the event handlers in the `FocusIndicatorOrigin` set
* the origin before we emit the select event, otherwise
* the item may not get a focus ring when the keyboard is used.
*/
this.selected = new EventEmitter(true);
this._focusOrigin = new FocusIndicatorOrigin(this.focusOriginService, this.elementRef, this.renderer);
}
ngOnDestroy() {
this._focusOrigin.destroy();
}
onSelect() {
this.selected.emit(this.node);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HierarchyBarPopoverItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: HierarchyBarPopoverItemComponent, selector: "ux-hierarchy-bar-popover-item", inputs: { node: "node" }, outputs: { selected: "selected" }, host: { listeners: { "click": "onSelect()", "keydown.enter": "onSelect()" } }, ngImport: i0, template: "<!-- Show an icon if specified -->\n@if (!hierarchyBar.icon && node?.icon) {\n <img class=\"hierarchy-bar-node-icon\" [src]=\"node.icon\" alt=\"Hierarchy Bar Icon\">\n}\n\n<!-- Show a custom icon if specified -->\n@if (hierarchyBar.icon) {\n <div class=\"hierarchy-bar-node-icon\">\n <ng-container\n [ngTemplateOutlet]=\"hierarchyBar.icon\"\n [ngTemplateOutletContext]=\"{ node: node, $implicit: node }\">\n </ng-container>\n </div>\n}\n\n<!-- Show the name of the current node -->\n<span class=\"hierarchy-bar-node-title\">{{ node?.title }}</span>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: HierarchyBarPopoverItemComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-hierarchy-bar-popover-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Show an icon if specified -->\n@if (!hierarchyBar.icon && node?.icon) {\n <img class=\"hierarchy-bar-node-icon\" [src]=\"node.icon\" alt=\"Hierarchy Bar Icon\">\n}\n\n<!-- Show a custom icon if specified -->\n@if (hierarchyBar.icon) {\n <div class=\"hierarchy-bar-node-icon\">\n <ng-container\n [ngTemplateOutlet]=\"hierarchyBar.icon\"\n [ngTemplateOutletContext]=\"{ node: node, $implicit: node }\">\n </ng-container>\n </div>\n}\n\n<!-- Show the name of the current node -->\n<span class=\"hierarchy-bar-node-title\">{{ node?.title }}</span>\n" }]
}], ctorParameters: () => [], propDecorators: { node: [{
type: Input
}], selected: [{
type: Output
}], onSelect: [{
type: HostListener,
args: ['click']
}, {
type: HostListener,
args: ['keydown.enter']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGllcmFyY2h5LWJhci1wb3BvdmVyLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvaGllcmFyY2h5LWJhci9oaWVyYXJjaHktYmFyLXBvcG92ZXItaXRlbS9oaWVyYXJjaHktYmFyLXBvcG92ZXItaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9oaWVyYXJjaHktYmFyL2hpZXJhcmNoeS1iYXItcG9wb3Zlci1pdGVtL2hpZXJhcmNoeS1iYXItcG9wb3Zlci1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3hKLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSwyQkFBMkIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBQzVHLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7QUFRL0QsTUFBTSxPQUFPLGdDQUFnQztJQXdCekM7UUF2QlMsdUJBQWtCLEdBQUcsTUFBTSxDQUFDLDJCQUEyQixDQUFDLENBQUM7UUFFekQsZUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUVoQyxhQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBRTdCLGlCQUFZLEdBQUcsTUFBTSxDQUFDLG1CQUFtQixDQUFDLENBQUM7UUFLcEQ7Ozs7OztXQU1HO1FBQ08sYUFBUSxHQUFHLElBQUksWUFBWSxDQUFtQixJQUFJLENBQUMsQ0FBQztRQU0xRCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksb0JBQW9CLENBQUMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzFHLENBQUM7SUFFRCxXQUFXO1FBQ1AsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBSUQsUUFBUTtRQUNKLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNsQyxDQUFDOytHQXBDUSxnQ0FBZ0M7bUdBQWhDLGdDQUFnQyxpTkNWN0MsMmpCQWlCQTs7NEZEUGEsZ0NBQWdDO2tCQUw1QyxTQUFTOytCQUNJLCtCQUErQixtQkFFeEIsdUJBQXVCLENBQUMsTUFBTTt3REFZdEMsSUFBSTtzQkFBWixLQUFLO2dCQVNJLFFBQVE7c0JBQWpCLE1BQU07Z0JBZVAsUUFBUTtzQkFGUCxZQUFZO3VCQUFDLE9BQU87O3NCQUNwQixZQUFZO3VCQUFDLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIEhvc3RMaXN0ZW5lciwgaW5qZWN0LCBJbnB1dCwgT25EZXN0cm95LCBPdXRwdXQsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9jdXNJbmRpY2F0b3JPcmlnaW4sIEZvY3VzSW5kaWNhdG9yT3JpZ2luU2VydmljZSB9IGZyb20gJy4uLy4uLy4uL2RpcmVjdGl2ZXMvYWNjZXNzaWJpbGl0eS9pbmRleCc7XG5pbXBvcnQgeyBIaWVyYXJjaHlCYXJTZXJ2aWNlIH0gZnJvbSAnLi4vaGllcmFyY2h5LWJhci5zZXJ2aWNlJztcbmltcG9ydCB7IEhpZXJhcmNoeUJhck5vZGUgfSBmcm9tICcuLi9pbnRlcmZhY2VzL2hpZXJhcmNoeS1iYXItbm9kZS5pbnRlcmZhY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3V4LWhpZXJhcmNoeS1iYXItcG9wb3Zlci1pdGVtJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vaGllcmFyY2h5LWJhci1wb3BvdmVyLWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEhpZXJhcmNoeUJhclBvcG92ZXJJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgICByZWFkb25seSBmb2N1c09yaWdpblNlcnZpY2UgPSBpbmplY3QoRm9jdXNJbmRpY2F0b3JPcmlnaW5TZXJ2aWNlKTtcblxuICAgIHJlYWRvbmx5IGVsZW1lbnRSZWYgPSBpbmplY3QoRWxlbWVudFJlZik7XG5cbiAgICByZWFkb25seSByZW5kZXJlciA9IGluamVjdChSZW5kZXJlcjIpO1xuXG4gICAgcmVhZG9ubHkgaGllcmFyY2h5QmFyID0gaW5qZWN0KEhpZXJhcmNoeUJhclNlcnZpY2UpO1xuXG4gICAgLyoqIFNwZWNpZnkgdGhlIG5vZGUgdG8gZGlzcGxheSAqL1xuICAgIEBJbnB1dCgpIG5vZGU6IEhpZXJhcmNoeUJhck5vZGU7XG5cbiAgICAvKipcbiAgICAgKiBFbWl0IHdoZW4gYSBjbGljayBvciBlbnRlciBrZXkgcHJlc3Mgb2NjdXJzLlxuICAgICAqIE5vdGUgdGhpcyBpcyBhbiBgYXN5bmNgIEV2ZW50RW1pdHRlciB0byBlbnN1cmUgdGhhdFxuICAgICAqIHRoZSBldmVudCBoYW5kbGVycyBpbiB0aGUgYEZvY3VzSW5kaWNhdG9yT3JpZ2luYCBzZXRcbiAgICAgKiB0aGUgb3JpZ2luIGJlZm9yZSB3ZSBlbWl0IHRoZSBzZWxlY3QgZXZlbnQsIG90aGVyd2lzZVxuICAgICAqIHRoZSBpdGVtIG1heSBub3QgZ2V0IGEgZm9jdXMgcmluZyB3aGVuIHRoZSBrZXlib2FyZCBpcyB1c2VkLlxuICAgICAqL1xuICAgIEBPdXRwdXQoKSBzZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXI8SGllcmFyY2h5QmFyTm9kZT4odHJ1ZSk7XG5cbiAgICAvKiogQWxsb3cgdGhpcyB0byBjb250cm9sIHRoZSBmb2N1cyBvcmlnaW4gKi9cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9mb2N1c09yaWdpbjogRm9jdXNJbmRpY2F0b3JPcmlnaW47XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgdGhpcy5fZm9jdXNPcmlnaW4gPSBuZXcgRm9jdXNJbmRpY2F0b3JPcmlnaW4odGhpcy5mb2N1c09yaWdpblNlcnZpY2UsIHRoaXMuZWxlbWVudFJlZiwgdGhpcy5yZW5kZXJlcik7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX2ZvY3VzT3JpZ2luLmRlc3Ryb3koKTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdjbGljaycpXG4gICAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5lbnRlcicpXG4gICAgb25TZWxlY3QoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWQuZW1pdCh0aGlzLm5vZGUpO1xuICAgIH1cblxufVxuIiwiPCEtLSBTaG93IGFuIGljb24gaWYgc3BlY2lmaWVkIC0tPlxuQGlmICghaGllcmFyY2h5QmFyLmljb24gJiYgbm9kZT8uaWNvbikge1xuICA8aW1nIGNsYXNzPVwiaGllcmFyY2h5LWJhci1ub2RlLWljb25cIiBbc3JjXT1cIm5vZGUuaWNvblwiIGFsdD1cIkhpZXJhcmNoeSBCYXIgSWNvblwiPlxufVxuXG48IS0tIFNob3cgYSBjdXN0b20gaWNvbiBpZiBzcGVjaWZpZWQgLS0+XG5AaWYgKGhpZXJhcmNoeUJhci5pY29uKSB7XG4gIDxkaXYgY2xhc3M9XCJoaWVyYXJjaHktYmFyLW5vZGUtaWNvblwiPlxuICAgIDxuZy1jb250YWluZXJcbiAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImhpZXJhcmNoeUJhci5pY29uXCJcbiAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7IG5vZGU6IG5vZGUsICRpbXBsaWNpdDogbm9kZSB9XCI+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxufVxuXG48IS0tIFNob3cgdGhlIG5hbWUgb2YgdGhlIGN1cnJlbnQgbm9kZSAtLT5cbjxzcGFuIGNsYXNzPVwiaGllcmFyY2h5LWJhci1ub2RlLXRpdGxlXCI+e3sgbm9kZT8udGl0bGUgfX08L3NwYW4+XG4iXX0=