@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
73 lines • 11.7 kB
JavaScript
import { Component, ContentChildren, EventEmitter, inject, Input, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { SelectionService } from '../../directives/selection/selection.service';
import { SelectListItemComponent } from './select-list-item/select-list-item.component';
import { MultipleSelectListStrategy } from './strategies/multiple-select-list.strategy';
import { SingleSelectListStrategy } from './strategies/single-select-list.strategy';
import * as i0 from "@angular/core";
export class SelectListComponent {
/** Determine if we allow multiple items to be selected */
set multiple(multiple) {
this._selection.strategy.deselectAll();
this._selection.setStrategy(multiple ? new MultipleSelectListStrategy() : new SingleSelectListStrategy());
}
/** Set the selected items */
set selected(selected) {
// if the selection entered is the same as the current selection then do nothing
if (this._selection.selection$.value === selected) {
return;
}
// if selected is an array and has not items and there are no items currently selected also do nothing
if (Array.isArray(selected) && selected.length === 0 && this._selection.selection$.value.length === 0) {
return;
}
// select only the specified items
if (Array.isArray(selected)) {
this._selection.selectOnly(...selected);
}
else {
this._selection.selectOnly(selected);
}
}
constructor() {
this._selection = inject(SelectionService);
/** Emit when the selection changes */
this.selectedChange = new EventEmitter();
/** Automatically unsubscribe all observables */
this._onDestroy = new Subject();
// set the selection strategy to single by default
this._selection.setStrategy(new SingleSelectListStrategy());
// emit the selection changes when they occur
this._selection.selection$.pipe(takeUntil(this._onDestroy))
.subscribe(selection => this.selectedChange.emit(selection));
}
ngAfterContentInit() {
// supply the initial item set
this._selection.dataset = this.items.map(item => item.data);
// if the item set changes update the list
this.items.changes.pipe(takeUntil(this._onDestroy)).subscribe(() => this._selection.dataset = this.items.map(item => item.data));
}
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SelectListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: SelectListComponent, selector: "ux-select-list", inputs: { multiple: "multiple", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { attributes: { "role": "list" } }, providers: [SelectionService], queries: [{ propertyName: "items", predicate: SelectListItemComponent }], ngImport: i0, template: "<ng-content></ng-content>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SelectListComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-select-list', providers: [SelectionService], host: {
role: 'list'
}, template: "<ng-content></ng-content>" }]
}], ctorParameters: () => [], propDecorators: { multiple: [{
type: Input
}], selected: [{
type: Input
}], selectedChange: [{
type: Output
}], items: [{
type: ContentChildren,
args: [SelectListItemComponent]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc2VsZWN0LWxpc3Qvc2VsZWN0LWxpc3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc2VsZWN0LWxpc3Qvc2VsZWN0LWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFvQixTQUFTLEVBQUUsZUFBZSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUN4SSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUNoRixPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSwrQ0FBK0MsQ0FBQztBQUN4RixPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUN4RixPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQzs7QUFVcEYsTUFBTSxPQUFPLG1CQUFtQjtJQUc1QiwwREFBMEQ7SUFDMUQsSUFBYSxRQUFRLENBQUMsUUFBaUI7UUFDbkMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDdkMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLDBCQUEwQixFQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksd0JBQXdCLEVBQUssQ0FBQyxDQUFDO0lBQ3BILENBQUM7SUFFRCw2QkFBNkI7SUFDN0IsSUFBYSxRQUFRLENBQUMsUUFBOEI7UUFFaEQsZ0ZBQWdGO1FBQ2hGLElBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxVQUFVLENBQUMsS0FBSyxLQUFLLFFBQVEsRUFBRSxDQUFDO1lBQ2hELE9BQU87UUFDWCxDQUFDO1FBRUQsc0dBQXNHO1FBQ3RHLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsSUFBSSxRQUFRLENBQUMsTUFBTSxLQUFLLENBQUMsSUFBSSxJQUFJLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ3BHLE9BQU87UUFDWCxDQUFDO1FBRUQsa0NBQWtDO1FBQ2xDLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDO1lBQzFCLElBQUksQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUFDLEdBQUcsUUFBUSxDQUFDLENBQUM7UUFDNUMsQ0FBQzthQUFNLENBQUM7WUFDSixJQUFJLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxRQUFhLENBQUMsQ0FBQztRQUM5QyxDQUFDO0lBQ0wsQ0FBQztJQVdEO1FBdENpQixlQUFVLEdBQUcsTUFBTSxDQUFzQixnQkFBZ0IsQ0FBQyxDQUFDO1FBNkI1RSxzQ0FBc0M7UUFDNUIsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBb0IsQ0FBQztRQUtoRSxnREFBZ0Q7UUFDL0IsZUFBVSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFHOUMsa0RBQWtEO1FBQ2xELElBQUksQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLElBQUksd0JBQXdCLEVBQUssQ0FBQyxDQUFDO1FBRS9ELDZDQUE2QztRQUM3QyxJQUFJLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUN0RCxTQUFTLENBQUMsU0FBUyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDO0lBQ3JFLENBQUM7SUFFRCxrQkFBa0I7UUFFZCw4QkFBOEI7UUFDOUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFNUQsMENBQTBDO1FBQzFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDckksQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDL0IsQ0FBQzsrR0E1RFEsbUJBQW1CO21HQUFuQixtQkFBbUIsMExBTGpCLENBQUMsZ0JBQWdCLENBQUMsZ0RBdUNaLHVCQUF1Qiw2QkNsRDVDLDJCQUF5Qjs7NEZEZ0JaLG1CQUFtQjtrQkFSL0IsU0FBUzsrQkFDSSxnQkFBZ0IsYUFFZixDQUFDLGdCQUFnQixDQUFDLFFBQ3ZCO3dCQUNGLElBQUksRUFBRSxNQUFNO3FCQUNmO3dEQU1ZLFFBQVE7c0JBQXBCLEtBQUs7Z0JBTU8sUUFBUTtzQkFBcEIsS0FBSztnQkFxQkksY0FBYztzQkFBdkIsTUFBTTtnQkFHbUMsS0FBSztzQkFBOUMsZUFBZTt1QkFBQyx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlckNvbnRlbnRJbml0LCBDb21wb25lbnQsIENvbnRlbnRDaGlsZHJlbiwgRXZlbnRFbWl0dGVyLCBpbmplY3QsIElucHV0LCBPbkRlc3Ryb3ksIE91dHB1dCwgUXVlcnlMaXN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBTZWxlY3Rpb25TZXJ2aWNlIH0gZnJvbSAnLi4vLi4vZGlyZWN0aXZlcy9zZWxlY3Rpb24vc2VsZWN0aW9uLnNlcnZpY2UnO1xuaW1wb3J0IHsgU2VsZWN0TGlzdEl0ZW1Db21wb25lbnQgfSBmcm9tICcuL3NlbGVjdC1saXN0LWl0ZW0vc2VsZWN0LWxpc3QtaXRlbS5jb21wb25lbnQnO1xuaW1wb3J0IHsgTXVsdGlwbGVTZWxlY3RMaXN0U3RyYXRlZ3kgfSBmcm9tICcuL3N0cmF0ZWdpZXMvbXVsdGlwbGUtc2VsZWN0LWxpc3Quc3RyYXRlZ3knO1xuaW1wb3J0IHsgU2luZ2xlU2VsZWN0TGlzdFN0cmF0ZWd5IH0gZnJvbSAnLi9zdHJhdGVnaWVzL3NpbmdsZS1zZWxlY3QtbGlzdC5zdHJhdGVneSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndXgtc2VsZWN0LWxpc3QnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zZWxlY3QtbGlzdC5jb21wb25lbnQuaHRtbCcsXG4gICAgcHJvdmlkZXJzOiBbU2VsZWN0aW9uU2VydmljZV0sXG4gICAgaG9zdDoge1xuICAgICAgICByb2xlOiAnbGlzdCdcbiAgICB9XG59KVxuZXhwb3J0IGNsYXNzIFNlbGVjdExpc3RDb21wb25lbnQ8VD4gaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0LCBPbkRlc3Ryb3kge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgX3NlbGVjdGlvbiA9IGluamVjdDxTZWxlY3Rpb25TZXJ2aWNlPFQ+PihTZWxlY3Rpb25TZXJ2aWNlKTtcblxuICAgIC8qKiBEZXRlcm1pbmUgaWYgd2UgYWxsb3cgbXVsdGlwbGUgaXRlbXMgdG8gYmUgc2VsZWN0ZWQgKi9cbiAgICBASW5wdXQoKSBzZXQgbXVsdGlwbGUobXVsdGlwbGU6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy5fc2VsZWN0aW9uLnN0cmF0ZWd5LmRlc2VsZWN0QWxsKCk7XG4gICAgICAgIHRoaXMuX3NlbGVjdGlvbi5zZXRTdHJhdGVneShtdWx0aXBsZSA/IG5ldyBNdWx0aXBsZVNlbGVjdExpc3RTdHJhdGVneTxUPigpIDogbmV3IFNpbmdsZVNlbGVjdExpc3RTdHJhdGVneTxUPigpKTtcbiAgICB9XG5cbiAgICAvKiogU2V0IHRoZSBzZWxlY3RlZCBpdGVtcyAqL1xuICAgIEBJbnB1dCgpIHNldCBzZWxlY3RlZChzZWxlY3RlZDogVCB8IFJlYWRvbmx5QXJyYXk8VD4pIHtcblxuICAgICAgICAvLyBpZiB0aGUgc2VsZWN0aW9uIGVudGVyZWQgaXMgdGhlIHNhbWUgYXMgdGhlIGN1cnJlbnQgc2VsZWN0aW9uIHRoZW4gZG8gbm90aGluZ1xuICAgICAgICBpZiAodGhpcy5fc2VsZWN0aW9uLnNlbGVjdGlvbiQudmFsdWUgPT09IHNlbGVjdGVkKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICAvLyBpZiBzZWxlY3RlZCBpcyBhbiBhcnJheSBhbmQgaGFzIG5vdCBpdGVtcyBhbmQgdGhlcmUgYXJlIG5vIGl0ZW1zIGN1cnJlbnRseSBzZWxlY3RlZCBhbHNvIGRvIG5vdGhpbmdcbiAgICAgICAgaWYgKEFycmF5LmlzQXJyYXkoc2VsZWN0ZWQpICYmIHNlbGVjdGVkLmxlbmd0aCA9PT0gMCAmJiB0aGlzLl9zZWxlY3Rpb24uc2VsZWN0aW9uJC52YWx1ZS5sZW5ndGggPT09IDApIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIHNlbGVjdCBvbmx5IHRoZSBzcGVjaWZpZWQgaXRlbXNcbiAgICAgICAgaWYgKEFycmF5LmlzQXJyYXkoc2VsZWN0ZWQpKSB7XG4gICAgICAgICAgICB0aGlzLl9zZWxlY3Rpb24uc2VsZWN0T25seSguLi5zZWxlY3RlZCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLl9zZWxlY3Rpb24uc2VsZWN0T25seShzZWxlY3RlZCBhcyBUKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIC8qKiBFbWl0IHdoZW4gdGhlIHNlbGVjdGlvbiBjaGFuZ2VzICovXG4gICAgQE91dHB1dCgpIHNlbGVjdGVkQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxSZWFkb25seUFycmF5PFQ+PigpO1xuXG4gICAgLyoqIEZpbmQgYWxsIHNlbGVjdCBsaXN0IGl0ZW1zICovXG4gICAgQENvbnRlbnRDaGlsZHJlbihTZWxlY3RMaXN0SXRlbUNvbXBvbmVudCkgaXRlbXM6IFF1ZXJ5TGlzdDxTZWxlY3RMaXN0SXRlbUNvbXBvbmVudDxUPj47XG5cbiAgICAvKiogQXV0b21hdGljYWxseSB1bnN1YnNjcmliZSBhbGwgb2JzZXJ2YWJsZXMgKi9cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9vbkRlc3Ryb3kgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgICAgIC8vIHNldCB0aGUgc2VsZWN0aW9uIHN0cmF0ZWd5IHRvIHNpbmdsZSBieSBkZWZhdWx0XG4gICAgICAgIHRoaXMuX3NlbGVjdGlvbi5zZXRTdHJhdGVneShuZXcgU2luZ2xlU2VsZWN0TGlzdFN0cmF0ZWd5PFQ+KCkpO1xuXG4gICAgICAgIC8vIGVtaXQgdGhlIHNlbGVjdGlvbiBjaGFuZ2VzIHdoZW4gdGhleSBvY2N1clxuICAgICAgICB0aGlzLl9zZWxlY3Rpb24uc2VsZWN0aW9uJC5waXBlKHRha2VVbnRpbCh0aGlzLl9vbkRlc3Ryb3kpKVxuICAgICAgICAgICAgLnN1YnNjcmliZShzZWxlY3Rpb24gPT4gdGhpcy5zZWxlY3RlZENoYW5nZS5lbWl0KHNlbGVjdGlvbikpO1xuICAgIH1cblxuICAgIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcblxuICAgICAgICAvLyBzdXBwbHkgdGhlIGluaXRpYWwgaXRlbSBzZXRcbiAgICAgICAgdGhpcy5fc2VsZWN0aW9uLmRhdGFzZXQgPSB0aGlzLml0ZW1zLm1hcChpdGVtID0+IGl0ZW0uZGF0YSk7XG5cbiAgICAgICAgLy8gaWYgdGhlIGl0ZW0gc2V0IGNoYW5nZXMgdXBkYXRlIHRoZSBsaXN0XG4gICAgICAgIHRoaXMuaXRlbXMuY2hhbmdlcy5waXBlKHRha2VVbnRpbCh0aGlzLl9vbkRlc3Ryb3kpKS5zdWJzY3JpYmUoKCkgPT4gdGhpcy5fc2VsZWN0aW9uLmRhdGFzZXQgPSB0aGlzLml0ZW1zLm1hcChpdGVtID0+IGl0ZW0uZGF0YSkpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kubmV4dCgpO1xuICAgICAgICB0aGlzLl9vbkRlc3Ryb3kuY29tcGxldGUoKTtcbiAgICB9XG59XG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+Il19