@taiga-ui/kit
Version:
Taiga UI Angular main components kit
51 lines • 11.8 kB
JavaScript
import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, computed, ContentChildren, inject, Input, signal, } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { NgControl } from '@angular/forms';
import { tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiOptionWithValue } from '@taiga-ui/core/components/data-list';
import { TuiLink } from '@taiga-ui/core/components/link';
import { TuiTextfieldComponent } from '@taiga-ui/core/components/textfield';
import { TUI_ITEMS_HANDLERS, } from '@taiga-ui/core/directives/items-handlers';
import { TUI_MULTI_SELECT_TEXTS } from '@taiga-ui/kit/tokens';
import { tuiInjectValue } from '@taiga-ui/kit/utils';
import * as i0 from "@angular/core";
class TuiMultiSelectGroupComponent {
constructor() {
this.handlers = inject(TUI_ITEMS_HANDLERS);
this.control = inject(TuiTextfieldComponent, { optional: true })?.control ||
inject(NgControl, { optional: true });
this.values = signal([]);
this.texts = toSignal(inject(TUI_MULTI_SELECT_TEXTS));
this.value = tuiInjectValue();
this.checked = computed(() => this.values().every((item) => this.value().some((value) => this.handlers.identityMatcher()(item, value))));
this.label = '';
}
set options(options) {
this.values.set(options
.toArray()
.map(({ value }) => value())
.filter(tuiIsPresent));
}
toggle() {
const values = this.values();
const matcher = this.handlers.identityMatcher();
const others = this.value().filter((current) => values.every((item) => !matcher(current, item)));
this.control?.control?.setValue(this.checked() ? others : others.concat(values));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMultiSelectGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiMultiSelectGroupComponent, isStandalone: true, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: "label" }, host: { properties: { "class._label": "label" } }, queries: [{ propertyName: "options", predicate: TuiOptionWithValue }], ngImport: i0, template: "<span\n *ngIf=\"values().length\"\n class=\"t-wrapper\"\n>\n <span class=\"t-label\">{{ label }}</span>\n <button\n tuiLink\n type=\"button\"\n class=\"t-button\"\n (click)=\"toggle()\"\n >\n {{ texts()?.[checked() ? 'none' : 'all'] }}\n </button>\n</span>\n<ng-content />\n", styles: [":host._label:before{display:none}:host:not(:first-of-type) .t-label:not(:empty){padding-block-start:1.25rem}:host:not(:first-of-type) .t-button{margin-block-start:1.25rem}.t-wrapper{display:flex;align-items:flex-start}.t-wrapper:last-child{display:none}.t-label:not(:empty){flex:1;padding:.75rem 1rem .25rem .625rem}.t-button{margin:.75rem 1rem 0 auto;font-weight:400}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiMultiSelectGroupComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMultiSelectGroupComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-opt-group[tuiMultiSelectGroup]', imports: [NgIf, TuiLink], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class._label]': 'label',
}, template: "<span\n *ngIf=\"values().length\"\n class=\"t-wrapper\"\n>\n <span class=\"t-label\">{{ label }}</span>\n <button\n tuiLink\n type=\"button\"\n class=\"t-button\"\n (click)=\"toggle()\"\n >\n {{ texts()?.[checked() ? 'none' : 'all'] }}\n </button>\n</span>\n<ng-content />\n", styles: [":host._label:before{display:none}:host:not(:first-of-type) .t-label:not(:empty){padding-block-start:1.25rem}:host:not(:first-of-type) .t-button{margin-block-start:1.25rem}.t-wrapper{display:flex;align-items:flex-start}.t-wrapper:last-child{display:none}.t-label:not(:empty){flex:1;padding:.75rem 1rem .25rem .625rem}.t-button{margin:.75rem 1rem 0 auto;font-weight:400}\n"] }]
}], propDecorators: { label: [{
type: Input
}], options: [{
type: ContentChildren,
args: [TuiOptionWithValue]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXVsdGktc2VsZWN0LWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL211bHRpLXNlbGVjdC9tdWx0aS1zZWxlY3QtZ3JvdXAvbXVsdGktc2VsZWN0LWdyb3VwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL211bHRpLXNlbGVjdC9tdWx0aS1zZWxlY3QtZ3JvdXAvbXVsdGktc2VsZWN0LWdyb3VwLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3JDLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFFBQVEsRUFDUixlQUFlLEVBQ2YsTUFBTSxFQUNOLEtBQUssRUFFTCxNQUFNLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQ3BELE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUN6QyxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFDL0QsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0scUNBQXFDLENBQUM7QUFDdkUsT0FBTyxFQUFDLE9BQU8sRUFBQyxNQUFNLGdDQUFnQyxDQUFDO0FBQ3ZELE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLHFDQUFxQyxDQUFDO0FBQzFFLE9BQU8sRUFDSCxrQkFBa0IsR0FFckIsTUFBTSwwQ0FBMEMsQ0FBQztBQUNsRCxPQUFPLEVBQUMsc0JBQXNCLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQztBQUM1RCxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0scUJBQXFCLENBQUM7O0FBRW5ELE1BV2EsNEJBQTRCO0lBWHpDO1FBWXFCLGFBQVEsR0FBRyxNQUFNLENBQXNCLGtCQUFrQixDQUFDLENBQUM7UUFDM0QsWUFBTyxHQUNwQixNQUFNLENBQUMscUJBQXFCLEVBQUUsRUFBQyxRQUFRLEVBQUUsSUFBSSxFQUFDLENBQUMsRUFBRSxPQUFPO1lBQ3hELE1BQU0sQ0FBQyxTQUFTLEVBQUUsRUFBQyxRQUFRLEVBQUUsSUFBSSxFQUFDLENBQUMsQ0FBQztRQUVyQixXQUFNLEdBQUcsTUFBTSxDQUFlLEVBQUUsQ0FBQyxDQUFDO1FBQ2xDLFVBQUssR0FBRyxRQUFRLENBQUMsTUFBTSxDQUFDLHNCQUFzQixDQUFDLENBQUMsQ0FBQztRQUNqRCxVQUFLLEdBQUcsY0FBYyxFQUFnQixDQUFDO1FBQ3ZDLFlBQU8sR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQ3ZDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUN6QixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLGVBQWUsRUFBRSxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUM3RSxDQUNKLENBQUM7UUFHSyxVQUFLLEdBQUcsRUFBRSxDQUFDO0tBcUJyQjtJQW5CRyxJQUNjLE9BQU8sQ0FBQyxPQUF5QztRQUMzRCxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FDWCxPQUFPO2FBQ0YsT0FBTyxFQUFFO2FBQ1QsR0FBRyxDQUFDLENBQUMsRUFBQyxLQUFLLEVBQUMsRUFBRSxFQUFFLENBQUMsS0FBSyxFQUFFLENBQUM7YUFDekIsTUFBTSxDQUFDLFlBQVksQ0FBQyxDQUM1QixDQUFDO0lBQ04sQ0FBQztJQUVTLE1BQU07UUFDWixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7UUFDN0IsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUNoRCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FDM0MsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsQ0FBQyxPQUFPLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQ2xELENBQUM7UUFFRixJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sRUFBRSxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztJQUNyRixDQUFDOytHQXBDUSw0QkFBNEI7bUdBQTVCLDRCQUE0QixxTUFrQnBCLGtCQUFrQiw2QkNyRHZDLHlVQWVBLDRhRFljLElBQUksNkZBQUUsT0FBTzs7U0FRZCw0QkFBNEI7NEZBQTVCLDRCQUE0QjtrQkFYeEMsU0FBUztpQ0FDTSxJQUFJLFlBQ04sb0NBQW9DLFdBQ3JDLENBQUMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxtQkFHUCx1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNGLGdCQUFnQixFQUFFLE9BQU87cUJBQzVCOzhCQWtCTSxLQUFLO3NCQURYLEtBQUs7Z0JBSVEsT0FBTztzQkFEcEIsZUFBZTt1QkFBQyxrQkFBa0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge05nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBjb21wdXRlZCxcbiAgICBDb250ZW50Q2hpbGRyZW4sXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIHR5cGUgUXVlcnlMaXN0LFxuICAgIHNpZ25hbCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3RvU2lnbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge05nQ29udHJvbH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHt0dWlJc1ByZXNlbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge1R1aU9wdGlvbldpdGhWYWx1ZX0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9kYXRhLWxpc3QnO1xuaW1wb3J0IHtUdWlMaW5rfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2xpbmsnO1xuaW1wb3J0IHtUdWlUZXh0ZmllbGRDb21wb25lbnR9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvdGV4dGZpZWxkJztcbmltcG9ydCB7XG4gICAgVFVJX0lURU1TX0hBTkRMRVJTLFxuICAgIHR5cGUgVHVpSXRlbXNIYW5kbGVycyxcbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvZGlyZWN0aXZlcy9pdGVtcy1oYW5kbGVycyc7XG5pbXBvcnQge1RVSV9NVUxUSV9TRUxFQ1RfVEVYVFN9IGZyb20gJ0B0YWlnYS11aS9raXQvdG9rZW5zJztcbmltcG9ydCB7dHVpSW5qZWN0VmFsdWV9IGZyb20gJ0B0YWlnYS11aS9raXQvdXRpbHMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLW9wdC1ncm91cFt0dWlNdWx0aVNlbGVjdEdyb3VwXScsXG4gICAgaW1wb3J0czogW05nSWYsIFR1aUxpbmtdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9tdWx0aS1zZWxlY3QtZ3JvdXAudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vbXVsdGktc2VsZWN0LWdyb3VwLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0OiB7XG4gICAgICAgICdbY2xhc3MuX2xhYmVsXSc6ICdsYWJlbCcsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpTXVsdGlTZWxlY3RHcm91cENvbXBvbmVudDxUPiB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBoYW5kbGVycyA9IGluamVjdDxUdWlJdGVtc0hhbmRsZXJzPFQ+PihUVUlfSVRFTVNfSEFORExFUlMpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgY29udHJvbCA9XG4gICAgICAgIGluamVjdChUdWlUZXh0ZmllbGRDb21wb25lbnQsIHtvcHRpb25hbDogdHJ1ZX0pPy5jb250cm9sIHx8XG4gICAgICAgIGluamVjdChOZ0NvbnRyb2wsIHtvcHRpb25hbDogdHJ1ZX0pO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHZhbHVlcyA9IHNpZ25hbDxyZWFkb25seSBUW10+KFtdKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgdGV4dHMgPSB0b1NpZ25hbChpbmplY3QoVFVJX01VTFRJX1NFTEVDVF9URVhUUykpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSB2YWx1ZSA9IHR1aUluamVjdFZhbHVlPHJlYWRvbmx5IFRbXT4oKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgY2hlY2tlZCA9IGNvbXB1dGVkKCgpID0+XG4gICAgICAgIHRoaXMudmFsdWVzKCkuZXZlcnkoKGl0ZW0pID0+XG4gICAgICAgICAgICB0aGlzLnZhbHVlKCkuc29tZSgodmFsdWUpID0+IHRoaXMuaGFuZGxlcnMuaWRlbnRpdHlNYXRjaGVyKCkoaXRlbSwgdmFsdWUpKSxcbiAgICAgICAgKSxcbiAgICApO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgbGFiZWwgPSAnJztcblxuICAgIEBDb250ZW50Q2hpbGRyZW4oVHVpT3B0aW9uV2l0aFZhbHVlKVxuICAgIHByb3RlY3RlZCBzZXQgb3B0aW9ucyhvcHRpb25zOiBRdWVyeUxpc3Q8VHVpT3B0aW9uV2l0aFZhbHVlPFQ+Pikge1xuICAgICAgICB0aGlzLnZhbHVlcy5zZXQoXG4gICAgICAgICAgICBvcHRpb25zXG4gICAgICAgICAgICAgICAgLnRvQXJyYXkoKVxuICAgICAgICAgICAgICAgIC5tYXAoKHt2YWx1ZX0pID0+IHZhbHVlKCkpXG4gICAgICAgICAgICAgICAgLmZpbHRlcih0dWlJc1ByZXNlbnQpLFxuICAgICAgICApO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCB0b2dnbGUoKTogdm9pZCB7XG4gICAgICAgIGNvbnN0IHZhbHVlcyA9IHRoaXMudmFsdWVzKCk7XG4gICAgICAgIGNvbnN0IG1hdGNoZXIgPSB0aGlzLmhhbmRsZXJzLmlkZW50aXR5TWF0Y2hlcigpO1xuICAgICAgICBjb25zdCBvdGhlcnMgPSB0aGlzLnZhbHVlKCkuZmlsdGVyKChjdXJyZW50KSA9PlxuICAgICAgICAgICAgdmFsdWVzLmV2ZXJ5KChpdGVtKSA9PiAhbWF0Y2hlcihjdXJyZW50LCBpdGVtKSksXG4gICAgICAgICk7XG5cbiAgICAgICAgdGhpcy5jb250cm9sPy5jb250cm9sPy5zZXRWYWx1ZSh0aGlzLmNoZWNrZWQoKSA/IG90aGVycyA6IG90aGVycy5jb25jYXQodmFsdWVzKSk7XG4gICAgfVxufVxuIiwiPHNwYW5cbiAgICAqbmdJZj1cInZhbHVlcygpLmxlbmd0aFwiXG4gICAgY2xhc3M9XCJ0LXdyYXBwZXJcIlxuPlxuICAgIDxzcGFuIGNsYXNzPVwidC1sYWJlbFwiPnt7IGxhYmVsIH19PC9zcGFuPlxuICAgIDxidXR0b25cbiAgICAgICAgdHVpTGlua1xuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgY2xhc3M9XCJ0LWJ1dHRvblwiXG4gICAgICAgIChjbGljayk9XCJ0b2dnbGUoKVwiXG4gICAgPlxuICAgICAgICB7eyB0ZXh0cygpPy5bY2hlY2tlZCgpID8gJ25vbmUnIDogJ2FsbCddIH19XG4gICAgPC9idXR0b24+XG48L3NwYW4+XG48bmctY29udGVudCAvPlxuIl19