@taiga-ui/kit
Version:
Taiga UI Angular main components kit
50 lines • 11.5 kB
JavaScript
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.values = signal([]);
this.handlers = inject(TUI_ITEMS_HANDLERS);
this.control = inject(TuiTextfieldComponent, { optional: true })?.control ||
inject(NgControl, { optional: true });
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 class=\"t-wrapper\">\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: 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: [TuiLink], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class._label]': 'label',
}, template: "<span class=\"t-wrapper\">\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXVsdGktc2VsZWN0LWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL211bHRpLXNlbGVjdC9tdWx0aS1zZWxlY3QtZ3JvdXAvbXVsdGktc2VsZWN0LWdyb3VwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL211bHRpLXNlbGVjdC9tdWx0aS1zZWxlY3QtZ3JvdXAvbXVsdGktc2VsZWN0LWdyb3VwLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsUUFBUSxFQUNSLGVBQWUsRUFDZixNQUFNLEVBQ04sS0FBSyxFQUNMLE1BQU0sR0FDVCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDcEQsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQ3pDLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUMvRCxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxxQ0FBcUMsQ0FBQztBQUN2RSxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sZ0NBQWdDLENBQUM7QUFDdkQsT0FBTyxFQUFDLHFCQUFxQixFQUFDLE1BQU0scUNBQXFDLENBQUM7QUFFMUUsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sMENBQTBDLENBQUM7QUFDNUUsT0FBTyxFQUFDLHNCQUFzQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFDNUQsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLHFCQUFxQixDQUFDOztBQUVuRCxNQVdhLDRCQUE0QjtJQVh6QztRQVlxQixXQUFNLEdBQUcsTUFBTSxDQUFlLEVBQUUsQ0FBQyxDQUFDO1FBQ2xDLGFBQVEsR0FBRyxNQUFNLENBQXNCLGtCQUFrQixDQUFDLENBQUM7UUFDM0QsWUFBTyxHQUNwQixNQUFNLENBQUMscUJBQXFCLEVBQUUsRUFBQyxRQUFRLEVBQUUsSUFBSSxFQUFDLENBQUMsRUFBRSxPQUFPO1lBQ3hELE1BQU0sQ0FBQyxTQUFTLEVBQUUsRUFBQyxRQUFRLEVBQUUsSUFBSSxFQUFDLENBQUMsQ0FBQztRQUVyQixVQUFLLEdBQUcsUUFBUSxDQUFDLE1BQU0sQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDLENBQUM7UUFDakQsVUFBSyxHQUFHLGNBQWMsRUFBZ0IsQ0FBQztRQUN2QyxZQUFPLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUN2QyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FDekIsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxlQUFlLEVBQUUsQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FDN0UsQ0FDSixDQUFDO1FBR0ssVUFBSyxHQUFHLEVBQUUsQ0FBQztLQXFCckI7SUFuQkcsSUFDYyxPQUFPLENBQUMsT0FBeUM7UUFDM0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQ1gsT0FBTzthQUNGLE9BQU8sRUFBRTthQUNULEdBQUcsQ0FBQyxDQUFDLEVBQUMsS0FBSyxFQUFDLEVBQUUsRUFBRSxDQUFDLEtBQUssRUFBRSxDQUFDO2FBQ3pCLE1BQU0sQ0FBQyxZQUFZLENBQUMsQ0FDNUIsQ0FBQztJQUNOLENBQUM7SUFFUyxNQUFNO1FBQ1osTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQzdCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDaEQsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQzNDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUMsT0FBTyxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUNsRCxDQUFDO1FBRUYsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7SUFDckYsQ0FBQzsrR0FwQ1EsNEJBQTRCO21HQUE1Qiw0QkFBNEIscU1Ba0JwQixrQkFBa0IsNkJDbER2QyxtU0FZQSw0YURZYyxPQUFPOztTQVFSLDRCQUE0Qjs0RkFBNUIsNEJBQTRCO2tCQVh4QyxTQUFTO2lDQUNNLElBQUksWUFDTixvQ0FBb0MsV0FDckMsQ0FBQyxPQUFPLENBQUMsbUJBR0QsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDRixnQkFBZ0IsRUFBRSxPQUFPO3FCQUM1Qjs4QkFrQk0sS0FBSztzQkFEWCxLQUFLO2dCQUlRLE9BQU87c0JBRHBCLGVBQWU7dUJBQUMsa0JBQWtCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUge1F1ZXJ5TGlzdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBjb21wdXRlZCxcbiAgICBDb250ZW50Q2hpbGRyZW4sXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIHNpZ25hbCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3RvU2lnbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge05nQ29udHJvbH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHt0dWlJc1ByZXNlbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge1R1aU9wdGlvbldpdGhWYWx1ZX0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9kYXRhLWxpc3QnO1xuaW1wb3J0IHtUdWlMaW5rfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2xpbmsnO1xuaW1wb3J0IHtUdWlUZXh0ZmllbGRDb21wb25lbnR9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvdGV4dGZpZWxkJztcbmltcG9ydCB0eXBlIHtUdWlJdGVtc0hhbmRsZXJzfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9kaXJlY3RpdmVzL2l0ZW1zLWhhbmRsZXJzJztcbmltcG9ydCB7VFVJX0lURU1TX0hBTkRMRVJTfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9kaXJlY3RpdmVzL2l0ZW1zLWhhbmRsZXJzJztcbmltcG9ydCB7VFVJX01VTFRJX1NFTEVDVF9URVhUU30gZnJvbSAnQHRhaWdhLXVpL2tpdC90b2tlbnMnO1xuaW1wb3J0IHt0dWlJbmplY3RWYWx1ZX0gZnJvbSAnQHRhaWdhLXVpL2tpdC91dGlscyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktb3B0LWdyb3VwW3R1aU11bHRpU2VsZWN0R3JvdXBdJyxcbiAgICBpbXBvcnRzOiBbVHVpTGlua10sXG4gICAgdGVtcGxhdGVVcmw6ICcuL211bHRpLXNlbGVjdC1ncm91cC50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9tdWx0aS1zZWxlY3QtZ3JvdXAuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tjbGFzcy5fbGFiZWxdJzogJ2xhYmVsJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlNdWx0aVNlbGVjdEdyb3VwQ29tcG9uZW50PFQ+IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IHZhbHVlcyA9IHNpZ25hbDxyZWFkb25seSBUW10+KFtdKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGhhbmRsZXJzID0gaW5qZWN0PFR1aUl0ZW1zSGFuZGxlcnM8VD4+KFRVSV9JVEVNU19IQU5ETEVSUyk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBjb250cm9sID1cbiAgICAgICAgaW5qZWN0KFR1aVRleHRmaWVsZENvbXBvbmVudCwge29wdGlvbmFsOiB0cnVlfSk/LmNvbnRyb2wgfHxcbiAgICAgICAgaW5qZWN0KE5nQ29udHJvbCwge29wdGlvbmFsOiB0cnVlfSk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgdGV4dHMgPSB0b1NpZ25hbChpbmplY3QoVFVJX01VTFRJX1NFTEVDVF9URVhUUykpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSB2YWx1ZSA9IHR1aUluamVjdFZhbHVlPHJlYWRvbmx5IFRbXT4oKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgY2hlY2tlZCA9IGNvbXB1dGVkKCgpID0+XG4gICAgICAgIHRoaXMudmFsdWVzKCkuZXZlcnkoKGl0ZW0pID0+XG4gICAgICAgICAgICB0aGlzLnZhbHVlKCkuc29tZSgodmFsdWUpID0+IHRoaXMuaGFuZGxlcnMuaWRlbnRpdHlNYXRjaGVyKCkoaXRlbSwgdmFsdWUpKSxcbiAgICAgICAgKSxcbiAgICApO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgbGFiZWwgPSAnJztcblxuICAgIEBDb250ZW50Q2hpbGRyZW4oVHVpT3B0aW9uV2l0aFZhbHVlKVxuICAgIHByb3RlY3RlZCBzZXQgb3B0aW9ucyhvcHRpb25zOiBRdWVyeUxpc3Q8VHVpT3B0aW9uV2l0aFZhbHVlPFQ+Pikge1xuICAgICAgICB0aGlzLnZhbHVlcy5zZXQoXG4gICAgICAgICAgICBvcHRpb25zXG4gICAgICAgICAgICAgICAgLnRvQXJyYXkoKVxuICAgICAgICAgICAgICAgIC5tYXAoKHt2YWx1ZX0pID0+IHZhbHVlKCkpXG4gICAgICAgICAgICAgICAgLmZpbHRlcih0dWlJc1ByZXNlbnQpLFxuICAgICAgICApO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCB0b2dnbGUoKTogdm9pZCB7XG4gICAgICAgIGNvbnN0IHZhbHVlcyA9IHRoaXMudmFsdWVzKCk7XG4gICAgICAgIGNvbnN0IG1hdGNoZXIgPSB0aGlzLmhhbmRsZXJzLmlkZW50aXR5TWF0Y2hlcigpO1xuICAgICAgICBjb25zdCBvdGhlcnMgPSB0aGlzLnZhbHVlKCkuZmlsdGVyKChjdXJyZW50KSA9PlxuICAgICAgICAgICAgdmFsdWVzLmV2ZXJ5KChpdGVtKSA9PiAhbWF0Y2hlcihjdXJyZW50LCBpdGVtKSksXG4gICAgICAgICk7XG5cbiAgICAgICAgdGhpcy5jb250cm9sPy5jb250cm9sPy5zZXRWYWx1ZSh0aGlzLmNoZWNrZWQoKSA/IG90aGVycyA6IG90aGVycy5jb25jYXQodmFsdWVzKSk7XG4gICAgfVxufVxuIiwiPHNwYW4gY2xhc3M9XCJ0LXdyYXBwZXJcIj5cbiAgICA8c3BhbiBjbGFzcz1cInQtbGFiZWxcIj57eyBsYWJlbCB9fTwvc3Bhbj5cbiAgICA8YnV0dG9uXG4gICAgICAgIHR1aUxpbmtcbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIGNsYXNzPVwidC1idXR0b25cIlxuICAgICAgICAoY2xpY2spPVwidG9nZ2xlKClcIlxuICAgID5cbiAgICAgICAge3sgdGV4dHMoKT8uW2NoZWNrZWQoKSA/ICdub25lJyA6ICdhbGwnXSB9fVxuICAgIDwvYnV0dG9uPlxuPC9zcGFuPlxuPG5nLWNvbnRlbnQgLz5cbiJdfQ==