@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
75 lines • 11.3 kB
JavaScript
import { Component, ElementRef, HostBinding, HostListener, inject, Input } from '@angular/core';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { tick } from '../../../common/index';
import { FocusIndicatorService } from '../../../directives/accessibility/index';
import { SelectionService } from '../../../directives/selection/selection.service';
import * as i0 from "@angular/core";
export class SelectListItemComponent {
set selected(isSelected) {
isSelected ? this._selection.select(this.data) : this._selection.deselect(this.data);
}
get selected() {
return this._selection.isSelected(this.data);
}
constructor() {
this._selection = inject(SelectionService);
this.elementRef = inject(ElementRef);
this.focusIndicatorService = inject(FocusIndicatorService);
this.tabindex = -1;
/** Unsubscribe from all subscriptions on destroy */
this._onDestroy = new Subject();
// create the focus indicator
this._focusIndicator = this.focusIndicatorService.monitor(this.elementRef.nativeElement);
this._selection.active$.pipe(takeUntil(this._onDestroy), filter(data => data === this.data)).subscribe(active => {
this._selection.focus$.next(active);
this.elementRef.nativeElement.focus();
});
// make this item tabbable or not based on the focused element
this._selection.focus$.pipe(takeUntil(this._onDestroy), tick())
.subscribe(focused => this.tabindex = focused === this.data ? 0 : -1);
}
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
this._focusIndicator.destroy();
}
onMouseDown(event) {
this._selection.strategy.mousedown(event, this.data);
}
onClick(event) {
this._selection.strategy.click(event, this.data);
}
onKeydown(event) {
this._selection.strategy.keydown(event, this.data);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SelectListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: SelectListItemComponent, selector: "ux-select-list-item", inputs: { data: "data" }, host: { attributes: { "role": "listitem" }, listeners: { "mousedown": "onMouseDown($event)", "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "tabindex": "this.tabindex", "class.selected": "this.selected", "attr.aria-selected": "this.selected" } }, ngImport: i0, template: "<ng-content></ng-content>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SelectListItemComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-select-list-item', host: {
role: 'listitem'
}, template: "<ng-content></ng-content>" }]
}], ctorParameters: () => [], propDecorators: { data: [{
type: Input
}], tabindex: [{
type: HostBinding,
args: ['tabindex']
}], selected: [{
type: HostBinding,
args: ['class.selected']
}, {
type: HostBinding,
args: ['attr.aria-selected']
}], onMouseDown: [{
type: HostListener,
args: ['mousedown', ['$event']]
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], onKeydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LWxpc3QtaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zZWxlY3QtbGlzdC9zZWxlY3QtbGlzdC1pdGVtL3NlbGVjdC1saXN0LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc2VsZWN0LWxpc3Qvc2VsZWN0LWxpc3QtaXRlbS9zZWxlY3QtbGlzdC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUMzRyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzdDLE9BQU8sRUFBa0IscUJBQXFCLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUNoRyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpREFBaUQsQ0FBQzs7QUFTbkYsTUFBTSxPQUFPLHVCQUF1QjtJQVloQyxJQUVJLFFBQVEsQ0FBQyxVQUFtQjtRQUM1QixVQUFVLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3pGLENBQUM7SUFFRCxJQUFJLFFBQVE7UUFDUixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJ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dCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgSG9zdEJpbmRpbmcsIEhvc3RMaXN0ZW5lciwgaW5qZWN0LCBJbnB1dCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBmaWx0ZXIsIHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IHRpY2sgfSBmcm9tICcuLi8uLi8uLi9jb21tb24vaW5kZXgnO1xuaW1wb3J0IHsgRm9jdXNJbmRpY2F0b3IsIEZvY3VzSW5kaWNhdG9yU2VydmljZSB9IGZyb20gJy4uLy4uLy4uL2RpcmVjdGl2ZXMvYWNjZXNzaWJpbGl0eS9pbmRleCc7XG5pbXBvcnQgeyBTZWxlY3Rpb25TZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vZGlyZWN0aXZlcy9zZWxlY3Rpb24vc2VsZWN0aW9uLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3V4LXNlbGVjdC1saXN0LWl0ZW0nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zZWxlY3QtbGlzdC1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBob3N0OiB7XG4gICAgICAgIHJvbGU6ICdsaXN0aXRlbSdcbiAgICB9XG59KVxuZXhwb3J0IGNsYXNzIFNlbGVjdExpc3RJdGVtQ29tcG9uZW50PFQ+IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9zZWxlY3Rpb24gPSBpbmplY3Q8U2VsZWN0aW9uU2VydmljZTxUPj4oU2VsZWN0aW9uU2VydmljZSk7XG5cbiAgICByZWFkb25seSBlbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gICAgcmVhZG9ubHkgZm9jdXNJbmRpY2F0b3JTZXJ2aWNlID0gaW5qZWN0KEZvY3VzSW5kaWNhdG9yU2VydmljZSk7XG5cbiAgICAvKiogVGhpcyBzaG91bGQgZGVmaW5lIHRoZSBkYXRhIHRoaXMgaXRlbSByZXByZXNlbnRzLiBUaGlzIHZhbHVlIHdpbGwgYXBwZWFyIGluIHRoZSBzZWxlY3RlZCBhcnJheSB3aGVuZXZlciB0aGlzIGl0ZW0gaXMgc2VsZWN0ZWQuICovXG4gICAgQElucHV0KCkgZGF0YTogVDtcblxuICAgIEBIb3N0QmluZGluZygndGFiaW5kZXgnKSB0YWJpbmRleDogbnVtYmVyID0gLTE7XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLnNlbGVjdGVkJylcbiAgICBASG9zdEJpbmRpbmcoJ2F0dHIuYXJpYS1zZWxlY3RlZCcpXG4gICAgc2V0IHNlbGVjdGVkKGlzU2VsZWN0ZWQ6IGJvb2xlYW4pIHtcbiAgICAgICAgaXNTZWxlY3RlZCA/IHRoaXMuX3NlbGVjdGlvbi5zZWxlY3QodGhpcy5kYXRhKSA6IHRoaXMuX3NlbGVjdGlvbi5kZXNlbGVjdCh0aGlzLmRhdGEpO1xuICAgIH1cblxuICAgIGdldCBzZWxlY3RlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3NlbGVjdGlvbi5pc1NlbGVjdGVkKHRoaXMuZGF0YSk7XG4gICAgfVxuXG4gICAgLyoqIFN0b3JlIGEgcmVmZXJlbmNlIHRvIHRoZSBmb2N1cyBpbmRpY2F0b3IgaW5zdGFuY2UgKi9cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9mb2N1c0luZGljYXRvcjogRm9jdXNJbmRpY2F0b3I7XG5cbiAgICAvKiogVW5zdWJzY3JpYmUgZnJvbSBhbGwgc3Vic2NyaXB0aW9ucyBvbiBkZXN0cm95ICovXG4gICAgcHJpdmF0ZSByZWFkb25seSBfb25EZXN0cm95ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuXG4gICAgICAgIC8vIGNyZWF0ZSB0aGUgZm9jdXMgaW5kaWNhdG9yXG4gICAgICAgIHRoaXMuX2ZvY3VzSW5kaWNhdG9yID0gdGhpcy5mb2N1c0luZGljYXRvclNlcnZpY2UubW9uaXRvcih0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XG5cbiAgICAgICAgdGhpcy5fc2VsZWN0aW9uLmFjdGl2ZSQucGlwZSh0YWtlVW50aWwodGhpcy5fb25EZXN0cm95KSwgZmlsdGVyKGRhdGEgPT4gZGF0YSA9PT0gdGhpcy5kYXRhKSkuc3Vic2NyaWJlKGFjdGl2ZSA9PiB7XG4gICAgICAgICAgICB0aGlzLl9zZWxlY3Rpb24uZm9jdXMkLm5leHQoYWN0aXZlKTtcbiAgICAgICAgICAgIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmZvY3VzKCk7XG4gICAgICAgIH0pO1xuXG4gICAgICAgIC8vIG1ha2UgdGhpcyBpdGVtIHRhYmJhYmxlIG9yIG5vdCBiYXNlZCBvbiB0aGUgZm9jdXNlZCBlbGVtZW50XG4gICAgICAgIHRoaXMuX3NlbGVjdGlvbi5mb2N1cyQucGlwZSh0YWtlVW50aWwodGhpcy5fb25EZXN0cm95KSwgdGljaygpKVxuICAgICAgICAgICAgLnN1YnNjcmliZShmb2N1c2VkID0+IHRoaXMudGFiaW5kZXggPSBmb2N1c2VkID09PSB0aGlzLmRhdGEgPyAwIDogLTEpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kubmV4dCgpO1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kuY29tcGxldGUoKTtcbiAgICAgICAgdGhpcy5fZm9jdXNJbmRpY2F0b3IuZGVzdHJveSgpO1xuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ21vdXNlZG93bicsIFsnJGV2ZW50J10pXG4gICAgb25Nb3VzZURvd24oZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fc2VsZWN0aW9uLnN0cmF0ZWd5Lm1vdXNlZG93bihldmVudCwgdGhpcy5kYXRhKTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdjbGljaycsIFsnJGV2ZW50J10pXG4gICAgb25DbGljayhldmVudDogTW91c2VFdmVudCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9zZWxlY3Rpb24uc3RyYXRlZ3kuY2xpY2soZXZlbnQsIHRoaXMuZGF0YSk7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bicsIFsnJGV2ZW50J10pXG4gICAgb25LZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgICAgIHRoaXMuX3NlbGVjdGlvbi5zdHJhdGVneS5rZXlkb3duKGV2ZW50LCB0aGlzLmRhdGEpO1xuICAgIH1cbn0iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+Il19