@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
52 lines • 9.93 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../../../directives/accessibility/focus-indicator/focus-indicator.directive";
import * as i2 from "../../../checkbox/checkbox.component";
export class FacetCheckListItemComponent {
constructor() {
this.facet = null;
this.selected = false;
this.tabbable = false;
this.simplified = false;
this.selectedChange = new EventEmitter();
this.itemFocus = new EventEmitter();
this.itemBlur = new EventEmitter();
}
get disabled() {
return this.facet && this.facet.disabled;
}
getLabel() {
return this.facet ? this.facet.title : '';
}
focus() {
this.option.nativeElement.focus();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FacetCheckListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: FacetCheckListItemComponent, selector: "ux-facet-check-list-item", inputs: { id: "id", facet: "facet", selected: "selected", tabbable: "tabbable", simplified: "simplified" }, outputs: { selectedChange: "selectedChange", itemFocus: "itemFocus", itemBlur: "itemBlur" }, host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true, static: true }], ngImport: i0, template: "<div #option\n uxFocusIndicator\n class=\"facet-check-list-item\"\n [class.facet-active]=\"selected\"\n [attr.aria-checked]=\"selected\"\n role=\"option\"\n [tabindex]=\"tabbable ? 0 : -1\"\n (focus)=\"itemFocus.emit()\"\n (blur)=\"itemBlur.emit()\"\n (click)=\"selectedChange.emit(facet)\"\n (keydown.enter)=\"selectedChange.emit(facet)\"\n (keydown.space)=\"selectedChange.emit(facet); $event.preventDefault()\"\n (keydown.spacebar)=\"selectedChange.emit(facet); $event.preventDefault()\"\n [class.disabled]=\"facet?.disabled\">\n\n <!-- Show check icon to indicate the state -->\n <ux-checkbox [clickable]=\"false\" [value]=\"selected\" [simplified]=\"simplified\" [tabindex]=\"-1\" [disabled]=\"disabled\" [id]=\"id + '-checkbox'\">\n <span class=\"facet-check-list-item-title\">{{ facet?.title }}</span>\n @if (facet?.count !== undefined) {\n <span class=\"facet-check-list-item-count\">({{ facet?.count }})</span>\n }\n </ux-checkbox>\n</div>", dependencies: [{ kind: "directive", type: i1.FocusIndicatorDirective, selector: "[uxFocusIndicator]", inputs: ["checkChildren", "mouseFocusIndicator", "touchFocusIndicator", "keyboardFocusIndicator", "programmaticFocusIndicator"], outputs: ["indicator"], exportAs: ["ux-focus-indicator"] }, { kind: "component", type: i2.CheckboxComponent, selector: "ux-checkbox", inputs: ["id", "name", "value", "required", "tabindex", "clickable", "simplified", "indeterminateValue", "disabled", "aria-label", "aria-labelledby"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FacetCheckListItemComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-facet-check-list-item', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<div #option\n uxFocusIndicator\n class=\"facet-check-list-item\"\n [class.facet-active]=\"selected\"\n [attr.aria-checked]=\"selected\"\n role=\"option\"\n [tabindex]=\"tabbable ? 0 : -1\"\n (focus)=\"itemFocus.emit()\"\n (blur)=\"itemBlur.emit()\"\n (click)=\"selectedChange.emit(facet)\"\n (keydown.enter)=\"selectedChange.emit(facet)\"\n (keydown.space)=\"selectedChange.emit(facet); $event.preventDefault()\"\n (keydown.spacebar)=\"selectedChange.emit(facet); $event.preventDefault()\"\n [class.disabled]=\"facet?.disabled\">\n\n <!-- Show check icon to indicate the state -->\n <ux-checkbox [clickable]=\"false\" [value]=\"selected\" [simplified]=\"simplified\" [tabindex]=\"-1\" [disabled]=\"disabled\" [id]=\"id + '-checkbox'\">\n <span class=\"facet-check-list-item-title\">{{ facet?.title }}</span>\n @if (facet?.count !== undefined) {\n <span class=\"facet-check-list-item-count\">({{ facet?.count }})</span>\n }\n </ux-checkbox>\n</div>" }]
}], propDecorators: { id: [{
type: Input
}, {
type: HostBinding
}], facet: [{
type: Input
}], selected: [{
type: Input
}], tabbable: [{
type: Input
}], simplified: [{
type: Input
}], selectedChange: [{
type: Output
}], itemFocus: [{
type: Output
}], itemBlur: [{
type: Output
}], option: [{
type: ViewChild,
args: ['option', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFjZXQtY2hlY2stbGlzdC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2ZhY2V0cy9mYWNldC1jaGVjay1saXN0L2NoZWNrLWxpc3QtaXRlbS9mYWNldC1jaGVjay1saXN0LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvZmFjZXRzL2ZhY2V0LWNoZWNrLWxpc3QvY2hlY2stbGlzdC1pdGVtL2ZhY2V0LWNoZWNrLWxpc3QtaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFTcEksTUFBTSxPQUFPLDJCQUEyQjtJQU54QztRQVdhLFVBQUssR0FBVSxJQUFJLENBQUM7UUFDcEIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixhQUFRLEdBQVksS0FBSyxDQUFDO1FBQzFCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFDM0IsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO1FBQzNDLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3JDLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBY2pEO0lBWEcsSUFBSSxRQUFRO1FBQ1IsT0FBTyxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDO0lBQzdDLENBQUM7SUFFRCxRQUFRO1FBQ0osT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQzlDLENBQUM7SUFFRCxLQUFLO1FBQ0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDdEMsQ0FBQzsrR0F4QlEsMkJBQTJCO21HQUEzQiwyQkFBMkIsb2FDVnhDLG85QkFzQk07OzRGRFpPLDJCQUEyQjtrQkFOdkMsU0FBUzsrQkFDSSwwQkFBMEIsbUJBRW5CLHVCQUF1QixDQUFDLE1BQU0sdUJBQzFCLEtBQUs7OEJBSzFCLEVBQUU7c0JBREQsS0FBSzs7c0JBQUksV0FBVztnQkFHWixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0ksY0FBYztzQkFBdkIsTUFBTTtnQkFDRyxTQUFTO3NCQUFsQixNQUFNO2dCQUNHLFFBQVE7c0JBQWpCLE1BQU07Z0JBQ2dDLE1BQU07c0JBQTVDLFNBQVM7dUJBQUMsUUFBUSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZvY3VzYWJsZU9wdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9hMTF5JztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPdXRwdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmFjZXQgfSBmcm9tICcuLi8uLi9tb2RlbHMvZmFjZXQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3V4LWZhY2V0LWNoZWNrLWxpc3QtaXRlbScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2ZhY2V0LWNoZWNrLWxpc3QtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2Vcbn0pXG5leHBvcnQgY2xhc3MgRmFjZXRDaGVja0xpc3RJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgRm9jdXNhYmxlT3B0aW9uIHtcblxuICAgIEBJbnB1dCgpIEBIb3N0QmluZGluZygpXG4gICAgaWQ6IHN0cmluZztcblxuICAgIEBJbnB1dCgpIGZhY2V0OiBGYWNldCA9IG51bGw7XG4gICAgQElucHV0KCkgc2VsZWN0ZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBASW5wdXQoKSB0YWJiYWJsZTogYm9vbGVhbiA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIHNpbXBsaWZpZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBAT3V0cHV0KCkgc2VsZWN0ZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPEZhY2V0PigpO1xuICAgIEBPdXRwdXQoKSBpdGVtRm9jdXMgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gICAgQE91dHB1dCgpIGl0ZW1CbHVyID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICAgIEBWaWV3Q2hpbGQoJ29wdGlvbicsIHsgc3RhdGljOiB0cnVlIH0pIG9wdGlvbjogRWxlbWVudFJlZjtcblxuICAgIGdldCBkaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuZmFjZXQgJiYgdGhpcy5mYWNldC5kaXNhYmxlZDtcbiAgICB9XG5cbiAgICBnZXRMYWJlbCgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5mYWNldCA/IHRoaXMuZmFjZXQudGl0bGUgOiAnJztcbiAgICB9XG5cbiAgICBmb2N1cygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5vcHRpb24ubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICAgIH1cbn1cbiIsIjxkaXYgI29wdGlvblxuICB1eEZvY3VzSW5kaWNhdG9yXG4gIGNsYXNzPVwiZmFjZXQtY2hlY2stbGlzdC1pdGVtXCJcbiAgW2NsYXNzLmZhY2V0LWFjdGl2ZV09XCJzZWxlY3RlZFwiXG4gIFthdHRyLmFyaWEtY2hlY2tlZF09XCJzZWxlY3RlZFwiXG4gIHJvbGU9XCJvcHRpb25cIlxuICBbdGFiaW5kZXhdPVwidGFiYmFibGUgPyAwIDogLTFcIlxuICAoZm9jdXMpPVwiaXRlbUZvY3VzLmVtaXQoKVwiXG4gIChibHVyKT1cIml0ZW1CbHVyLmVtaXQoKVwiXG4gIChjbGljayk9XCJzZWxlY3RlZENoYW5nZS5lbWl0KGZhY2V0KVwiXG4gIChrZXlkb3duLmVudGVyKT1cInNlbGVjdGVkQ2hhbmdlLmVtaXQoZmFjZXQpXCJcbiAgKGtleWRvd24uc3BhY2UpPVwic2VsZWN0ZWRDaGFuZ2UuZW1pdChmYWNldCk7ICRldmVudC5wcmV2ZW50RGVmYXVsdCgpXCJcbiAgKGtleWRvd24uc3BhY2ViYXIpPVwic2VsZWN0ZWRDaGFuZ2UuZW1pdChmYWNldCk7ICRldmVudC5wcmV2ZW50RGVmYXVsdCgpXCJcbiAgW2NsYXNzLmRpc2FibGVkXT1cImZhY2V0Py5kaXNhYmxlZFwiPlxuXG4gIDwhLS0gU2hvdyBjaGVjayBpY29uIHRvIGluZGljYXRlIHRoZSBzdGF0ZSAtLT5cbiAgPHV4LWNoZWNrYm94IFtjbGlja2FibGVdPVwiZmFsc2VcIiBbdmFsdWVdPVwic2VsZWN0ZWRcIiBbc2ltcGxpZmllZF09XCJzaW1wbGlmaWVkXCIgW3RhYmluZGV4XT1cIi0xXCIgW2Rpc2FibGVkXT1cImRpc2FibGVkXCIgW2lkXT1cImlkICsgJy1jaGVja2JveCdcIj5cbiAgICA8c3BhbiBjbGFzcz1cImZhY2V0LWNoZWNrLWxpc3QtaXRlbS10aXRsZVwiPnt7IGZhY2V0Py50aXRsZSB9fTwvc3Bhbj5cbiAgICBAaWYgKGZhY2V0Py5jb3VudCAhPT0gdW5kZWZpbmVkKSB7XG4gICAgICA8c3BhbiBjbGFzcz1cImZhY2V0LWNoZWNrLWxpc3QtaXRlbS1jb3VudFwiPih7eyBmYWNldD8uY291bnQgfX0pPC9zcGFuPlxuICAgIH1cbiAgPC91eC1jaGVja2JveD5cbjwvZGl2PiJdfQ==