@taiga-ui/kit/fesm2022/taiga-ui-kit-components-multi-select.mjs

Taiga UI Angular main components kit

import * as i0 from '@angular/core';
import { signal, inject, computed, Component, ChangeDetectionStrategy, Input, ContentChildren, Directive } 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, tuiAsOptionContent } from '@taiga-ui/core/components/data-list';
import { TuiLink } from '@taiga-ui/core/components/link';
import { TuiTextfieldComponent, TUI_TEXTFIELD_OPTIONS } 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 { NgIf } from '@angular/common';
import { TuiCheckbox } from '@taiga-ui/kit/components/checkbox';

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-top:1.25rem}:host:not(:first-of-type) .t-button{margin-top: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 }); }
}
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-top:1.25rem}:host:not(:first-of-type) .t-button{margin-top: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]
            }] } });

class TuiMultiSelectOption {
    constructor() {
        this.option = inject(TuiOptionWithValue, {
            optional: true,
        });
        this.handlers = inject(TUI_ITEMS_HANDLERS);
        this.value = tuiInjectValue();
        this.size = inject(TUI_TEXTFIELD_OPTIONS).size;
        this.selected = computed((controlValue = this.value(), optionValue = this.option?.value()) => tuiIsPresent(optionValue) &&
            tuiIsPresent(controlValue) &&
            controlValue.some((item) => this.handlers?.identityMatcher()(item, optionValue) ??
                item === optionValue));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMultiSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiMultiSelectOption, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
        <input
            *ngIf="option"
            tuiCheckbox
            type="checkbox"
            [checked]="selected()"
            [size]="size() === 'l' ? 'm' : 's'"
        />
    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMultiSelectOption, decorators: [{
            type: Component,
            args: [{
                    standalone: true,
                    imports: [NgIf, TuiCheckbox],
                    template: `
        <input
            *ngIf="option"
            tuiCheckbox
            type="checkbox"
            [checked]="selected()"
            [size]="size() === 'l' ? 'm' : 's'"
        />
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

class TuiMultiSelectGroupDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMultiSelectGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiMultiSelectGroupDirective, isStandalone: true, selector: "[tuiMultiSelectGroup]", providers: [tuiAsOptionContent(TuiMultiSelectOption)], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMultiSelectGroupDirective, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[tuiMultiSelectGroup]',
                    providers: [tuiAsOptionContent(TuiMultiSelectOption)],
                }]
        }] });

const TuiMultiSelect = [
    TuiMultiSelectGroupComponent,
    TuiMultiSelectGroupDirective,
];

/**
 * Generated bundle index. Do not edit.
 */

export { TuiMultiSelect, TuiMultiSelectGroupComponent, TuiMultiSelectGroupDirective, TuiMultiSelectOption };
//# sourceMappingURL=taiga-ui-kit-components-multi-select.mjs.map