@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
52 lines • 8.16 kB
JavaScript
import { Component, ElementRef, EventEmitter, HostBinding, inject, Input, Output } from '@angular/core';
import { FocusIndicatorService } from '../../../../directives/accessibility/index';
import * as i0 from "@angular/core";
import * as i1 from "../../../icon/icon.component";
export class FacetHeaderComponent {
constructor() {
this.focusIndicatorService = inject(FocusIndicatorService);
this.elementRef = inject(ElementRef);
/** Defines whether or not clicking on the header will toggle the expanded state. */
this.canExpand = true;
/** Can be used to set the initial expanded state. */
this.expanded = true;
/** If two-way binding is used it will be updated when the expanded state changes. */
this.expandedChange = new EventEmitter();
this._focusIndicator = this.focusIndicatorService.monitor(this.elementRef.nativeElement);
}
ngOnDestroy() {
this._focusIndicator.destroy();
}
toggleExpand() {
// if not expandable then do nothing
if (this.canExpand) {
this.expanded = !this.expanded;
this.expandedChange.emit(this.expanded);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FacetHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: FacetHeaderComponent, selector: "ux-facet-header", inputs: { header: "header", canExpand: "canExpand", expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, host: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "click": "toggleExpand()", "keyup.enter": "toggleExpand()" }, properties: { "attr.aria-expanded": "expanded", "attr.aria-label": "header + ' Facet: Activate to ' + (expanded ? 'collapse' : 'expand')", "class.expanded": "this.expanded" } }, ngImport: i0, template: "<span class=\"facet-header-title\">{{ header }}</span>\n@if (canExpand) {\n <ux-icon [name]=\"expanded ? 'down' : 'previous'\" class=\"facet-header-icon\"></ux-icon>\n}\n", dependencies: [{ kind: "component", type: i1.IconComponent, selector: "ux-icon", inputs: ["name", "size", "rotate", "flipHorizontal", "flipVertical"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FacetHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-facet-header', host: {
'role': 'button',
'tabindex': '0',
'(click)': 'toggleExpand()',
'(keyup.enter)': 'toggleExpand()',
'[attr.aria-expanded]': 'expanded',
'[attr.aria-label]': 'header + \' Facet: Activate to \' + (expanded ? \'collapse\' : \'expand\')'
}, template: "<span class=\"facet-header-title\">{{ header }}</span>\n@if (canExpand) {\n <ux-icon [name]=\"expanded ? 'down' : 'previous'\" class=\"facet-header-icon\"></ux-icon>\n}\n" }]
}], ctorParameters: () => [], propDecorators: { header: [{
type: Input
}], canExpand: [{
type: Input
}], expanded: [{
type: Input
}, {
type: HostBinding,
args: ['class.expanded']
}], expandedChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFjZXQtaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2ZhY2V0cy9iYXNlL2ZhY2V0LWhlYWRlci9mYWNldC1oZWFkZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvZmFjZXRzL2Jhc2UvZmFjZXQtaGVhZGVyL2ZhY2V0LWhlYWRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ25ILE9BQU8sRUFBa0IscUJBQXFCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQzs7O0FBY25HLE1BQU0sT0FBTyxvQkFBb0I7SUFtQjdCO1FBbEJTLDBCQUFxQixHQUFHLE1BQU0sQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO1FBQ3RELGVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFLekMsb0ZBQW9GO1FBQzNFLGNBQVMsR0FBWSxJQUFJLENBQUM7UUFFbkMscURBQXFEO1FBQ2IsYUFBUSxHQUFZLElBQUksQ0FBQztRQUVqRSxxRkFBcUY7UUFDM0UsbUJBQWMsR0FBMEIsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQU0xRSxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUM3RixDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELFlBQVk7UUFFUixvQ0FBb0M7UUFDcEMsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDakIsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7WUFDL0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzVDLENBQUM7SUFDTCxDQUFDOytHQWxDUSxvQkFBb0I7bUdBQXBCLG9CQUFvQiwwZUNmakMsNktBSUE7OzRGRFdhLG9CQUFvQjtrQkFaaEMsU0FBUzsrQkFDSSxpQkFBaUIsUUFFckI7d0JBQ0YsTUFBTSxFQUFFLFFBQVE7d0JBQ2hCLFVBQVUsRUFBRSxHQUFHO3dCQUNmLFNBQVMsRUFBRSxnQkFBZ0I7d0JBQzNCLGVBQWUsRUFBRSxnQkFBZ0I7d0JBQ2pDLHNCQUFzQixFQUFFLFVBQVU7d0JBQ2xDLG1CQUFtQixFQUFFLDRFQUE0RTtxQkFDcEc7d0RBT1EsTUFBTTtzQkFBZCxLQUFLO2dCQUdHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBR2tDLFFBQVE7c0JBQS9DLEtBQUs7O3NCQUFJLFdBQVc7dUJBQUMsZ0JBQWdCO2dCQUc1QixjQUFjO3NCQUF2QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBpbmplY3QsIElucHV0LCBPbkRlc3Ryb3ksIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9jdXNJbmRpY2F0b3IsIEZvY3VzSW5kaWNhdG9yU2VydmljZSB9IGZyb20gJy4uLy4uLy4uLy4uL2RpcmVjdGl2ZXMvYWNjZXNzaWJpbGl0eS9pbmRleCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndXgtZmFjZXQtaGVhZGVyJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZmFjZXQtaGVhZGVyLmNvbXBvbmVudC5odG1sJyxcbiAgICBob3N0OiB7XG4gICAgICAgICdyb2xlJzogJ2J1dHRvbicsXG4gICAgICAgICd0YWJpbmRleCc6ICcwJyxcbiAgICAgICAgJyhjbGljayknOiAndG9nZ2xlRXhwYW5kKCknLFxuICAgICAgICAnKGtleXVwLmVudGVyKSc6ICd0b2dnbGVFeHBhbmQoKScsXG4gICAgICAgICdbYXR0ci5hcmlhLWV4cGFuZGVkXSc6ICdleHBhbmRlZCcsXG4gICAgICAgICdbYXR0ci5hcmlhLWxhYmVsXSc6ICdoZWFkZXIgKyBcXCcgRmFjZXQ6IEFjdGl2YXRlIHRvIFxcJyArIChleHBhbmRlZCA/IFxcJ2NvbGxhcHNlXFwnIDogXFwnZXhwYW5kXFwnKSdcbiAgICB9XG59KVxuZXhwb3J0IGNsYXNzIEZhY2V0SGVhZGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgICByZWFkb25seSBmb2N1c0luZGljYXRvclNlcnZpY2UgPSBpbmplY3QoRm9jdXNJbmRpY2F0b3JTZXJ2aWNlKTtcbiAgICByZWFkb25seSBlbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gICAgLyoqIERlZmluZXMgdGhlIHRleHQgdG8gZGlzcGxheSBpbiB0aGUgaGVhZGVyLiAqL1xuICAgIEBJbnB1dCgpIGhlYWRlcjogc3RyaW5nO1xuXG4gICAgLyoqIERlZmluZXMgd2hldGhlciBvciBub3QgY2xpY2tpbmcgb24gdGhlIGhlYWRlciB3aWxsIHRvZ2dsZSB0aGUgZXhwYW5kZWQgc3RhdGUuICovXG4gICAgQElucHV0KCkgY2FuRXhwYW5kOiBib29sZWFuID0gdHJ1ZTtcblxuICAgIC8qKiBDYW4gYmUgdXNlZCB0byBzZXQgdGhlIGluaXRpYWwgZXhwYW5kZWQgc3RhdGUuICovXG4gICAgQElucHV0KCkgQEhvc3RCaW5kaW5nKCdjbGFzcy5leHBhbmRlZCcpIGV4cGFuZGVkOiBib29sZWFuID0gdHJ1ZTtcblxuICAgIC8qKiBJZiB0d28td2F5IGJpbmRpbmcgaXMgdXNlZCBpdCB3aWxsIGJlIHVwZGF0ZWQgd2hlbiB0aGUgZXhwYW5kZWQgc3RhdGUgY2hhbmdlcy4gKi9cbiAgICBAT3V0cHV0KCkgZXhwYW5kZWRDaGFuZ2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICAgIC8qKiBTdG9yZSBGb2N1cyBJbmRpY2F0b3IgaW5zdGFuY2UgKi9cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9mb2N1c0luZGljYXRvcjogRm9jdXNJbmRpY2F0b3I7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgdGhpcy5fZm9jdXNJbmRpY2F0b3IgPSB0aGlzLmZvY3VzSW5kaWNhdG9yU2VydmljZS5tb25pdG9yKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fZm9jdXNJbmRpY2F0b3IuZGVzdHJveSgpO1xuICAgIH1cblxuICAgIHRvZ2dsZUV4cGFuZCgpOiB2b2lkIHtcblxuICAgICAgICAvLyBpZiBub3QgZXhwYW5kYWJsZSB0aGVuIGRvIG5vdGhpbmdcbiAgICAgICAgaWYgKHRoaXMuY2FuRXhwYW5kKSB7XG4gICAgICAgICAgICB0aGlzLmV4cGFuZGVkID0gIXRoaXMuZXhwYW5kZWQ7XG4gICAgICAgICAgICB0aGlzLmV4cGFuZGVkQ2hhbmdlLmVtaXQodGhpcy5leHBhbmRlZCk7XG4gICAgICAgIH1cbiAgICB9XG59IiwiPHNwYW4gY2xhc3M9XCJmYWNldC1oZWFkZXItdGl0bGVcIj57eyBoZWFkZXIgfX08L3NwYW4+XG5AaWYgKGNhbkV4cGFuZCkge1xuICA8dXgtaWNvbiBbbmFtZV09XCJleHBhbmRlZCA/ICdkb3duJyA6ICdwcmV2aW91cydcIiBjbGFzcz1cImZhY2V0LWhlYWRlci1pY29uXCI+PC91eC1pY29uPlxufVxuIl19