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

Taiga UI Angular main components kit

import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, signal, computed, effect, Component, ChangeDetectionStrategy, Input, Directive } from '@angular/core';
import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
import { TUI_ALLOW_SIGNAL_WRITES } from '@taiga-ui/cdk/constants';
import { tuiIsPresent, tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i1 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldDirective, tuiAsTextfieldAccessor, TuiWithTextfield, TuiSelectLike } from '@taiga-ui/core/components/textfield';
import { TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
import { tuiIsFlat, tuiInjectValue } from '@taiga-ui/kit/utils';
import { TuiDataListComponent, TuiOptionWithValue, tuiAsOptionContent } from '@taiga-ui/core/components/data-list';
import { tuiDropdownOpen, tuiDropdownEnabled } from '@taiga-ui/core/directives/dropdown';
import * as i1$1 from '@taiga-ui/core/components/scrollbar';
import { TuiScrollIntoView } from '@taiga-ui/core/components/scrollbar';
import { tuiCheckboxOptionsProvider, TuiCheckbox } from '@taiga-ui/kit/components/checkbox';

class TuiNativeSelect extends TuiControl {
    constructor() {
        super(...arguments);
        this.textfield = inject(TuiTextfieldDirective);
        this.isFlat = tuiIsFlat;
        this.placeholder = signal('');
        this.itemsHandlers = inject(TUI_ITEMS_HANDLERS);
        this.stringified = computed((value = this.value()) => tuiIsPresent(value) ? this.itemsHandlers.stringify()(value) : '');
        this.showPlaceholder = computed(() => this.placeholder() && !this.stringified());
        this.isSelected = computed((value = this.value()) => (x) => tuiIsPresent(value) && this.itemsHandlers.identityMatcher()(x, value));
        this.valueEffect = effect(() => {
            this.textfield.value.set(this.stringified());
        }, TUI_ALLOW_SIGNAL_WRITES);
        this.items = [];
        this.labels = [];
    }
    // TODO(v5): use signal inputs
    set placeholderSetter(x) {
        this.placeholder.set(x);
    }
    setValue(value) {
        this.onChange(value);
    }
    selectOption(index) {
        const items = (this.items?.flat() ?? []);
        this.onChange(items[index - (this.showPlaceholder() ? 1 : 0)] ?? null);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNativeSelect, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiNativeSelect, isStandalone: true, selector: "select[tuiSelect]", inputs: { items: "items", labels: "labels", placeholderSetter: ["placeholder", "placeholderSetter"] }, host: { listeners: { "change": "selectOption($event.target.options.selectedIndex)" }, properties: { "attr.aria-invalid": "invalid()", "disabled": "!interactive()" } }, providers: [tuiAsTextfieldAccessor(TuiNativeSelect), tuiAsControl(TuiNativeSelect)], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithTextfield }], ngImport: i0, template: "<option\n    *ngIf=\"showPlaceholder()\"\n    disabled\n    selected\n    value=\"\"\n>\n    {{ placeholder() }}\n</option>\n\n<ng-container *ngIf=\"items && !isFlat(items); else flatItems\">\n    <optgroup\n        *ngFor=\"let group of labels; let index = index\"\n        [label]=\"labels[index]\"\n    >\n        <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items[index]}\" />\n    </optgroup>\n</ng-container>\n\n<ng-template #flatItems>\n    <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items}\" />\n</ng-template>\n\n<ng-template\n    #options\n    let-items\n>\n    <option\n        *ngFor=\"let option of items\"\n        [disabled]=\"itemsHandlers.disabledItemHandler()(option)\"\n        [selected]=\"isSelected()(option)\"\n        [value]=\"itemsHandlers.stringify()(option)\"\n    >\n        {{ itemsHandlers.stringify()(option) }}\n    </option>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNativeSelect, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'select[tuiSelect]', imports: [NgForOf, NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsTextfieldAccessor(TuiNativeSelect), tuiAsControl(TuiNativeSelect)], hostDirectives: [TuiWithTextfield], host: {
                        '[attr.aria-invalid]': 'invalid()',
                        '[disabled]': '!interactive()',
                        '(change)': 'selectOption($event.target.options.selectedIndex)',
                    }, template: "<option\n    *ngIf=\"showPlaceholder()\"\n    disabled\n    selected\n    value=\"\"\n>\n    {{ placeholder() }}\n</option>\n\n<ng-container *ngIf=\"items && !isFlat(items); else flatItems\">\n    <optgroup\n        *ngFor=\"let group of labels; let index = index\"\n        [label]=\"labels[index]\"\n    >\n        <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items[index]}\" />\n    </optgroup>\n</ng-container>\n\n<ng-template #flatItems>\n    <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items}\" />\n</ng-template>\n\n<ng-template\n    #options\n    let-items\n>\n    <option\n        *ngFor=\"let option of items\"\n        [disabled]=\"itemsHandlers.disabledItemHandler()(option)\"\n        [selected]=\"isSelected()(option)\"\n        [value]=\"itemsHandlers.stringify()(option)\"\n    >\n        {{ itemsHandlers.stringify()(option) }}\n    </option>\n</ng-template>\n" }]
        }], propDecorators: { items: [{
                type: Input
            }], labels: [{
                type: Input
            }], placeholderSetter: [{
                type: Input,
                args: ['placeholder']
            }] } });

class TuiSelectOption {
    constructor() {
        this.handlers = inject(TUI_ITEMS_HANDLERS);
        this.value = tuiInjectValue();
        this.datalist = inject(TuiDataListComponent);
        this.option = inject(TuiOptionWithValue, {
            optional: true,
        });
        this.selected = computed((controlValue = this.value(), optionValue = this.option?.value()) => tuiIsPresent(optionValue) &&
            tuiIsPresent(controlValue) &&
            this.handlers.identityMatcher()(controlValue, optionValue));
        this.scrolled = tuiDirectiveBinding(TuiScrollIntoView, 'tuiScrollIntoView', this.selected);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSelectOption, isStandalone: true, selector: "ng-component", host: { attributes: { "tuiSelectOption": "" }, properties: { "class._value": "option", "class._selected": "selected()" } }, providers: [tuiCheckboxOptionsProvider({ appearance: () => 'action' })], hostDirectives: [{ directive: i1$1.TuiScrollIntoView }], ngImport: i0, template: `
        <input
            tuiCheckbox
            type="checkbox"
            class="t-check"
            [checked]="selected()"
            [size]="datalist.size === 'l' ? 'm' : 's'"
        />
    `, isInline: true, styles: [":host._value>.t-check{order:100;margin-inline-start:auto;pointer-events:none}:host._value._selected~::ng-deep [tuiSelectOption]>.t-check:before{opacity:0}:host:not(._value)>.t-check,:host-context(tui-dropdown-mobile:not(._sheet))>.t-check{display:none}.t-check:before{inline-size:100%;block-size:100%}\n"], dependencies: [{ 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: TuiSelectOption, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [TuiCheckbox], template: `
        <input
            tuiCheckbox
            type="checkbox"
            class="t-check"
            [checked]="selected()"
            [size]="datalist.size === 'l' ? 'm' : 's'"
        />
    `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiCheckboxOptionsProvider({ appearance: () => 'action' })], hostDirectives: [TuiScrollIntoView], host: {
                        tuiSelectOption: '',
                        '[class._value]': 'option',
                        '[class._selected]': 'selected()',
                    }, styles: [":host._value>.t-check{order:100;margin-inline-start:auto;pointer-events:none}:host._value._selected~::ng-deep [tuiSelectOption]>.t-check:before{opacity:0}:host:not(._value)>.t-check,:host-context(tui-dropdown-mobile:not(._sheet))>.t-check{display:none}.t-check:before{inline-size:100%;block-size:100%}\n"] }]
        }] });

class TuiSelectDirective extends TuiControl {
    constructor() {
        super(...arguments);
        this.textfield = inject(TuiTextfieldDirective);
        this.open = tuiDropdownOpen();
        this.itemsHandlers = inject(TUI_ITEMS_HANDLERS);
        this.dropdownEnabled = tuiDropdownEnabled(this.interactive);
        this.valueEffect = effect(() => {
            const value = this.value();
            const string = tuiIsPresent(value) ? this.itemsHandlers.stringify()(value) : '';
            this.textfield.value.set(string);
        }, TUI_ALLOW_SIGNAL_WRITES);
    }
    setValue(value) {
        this.onChange(value);
        if (!value) {
            this.open.set(true);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiSelectDirective, isStandalone: true, selector: "input[tuiSelect]", host: { listeners: { "input": "$event.inputType?.includes(\"delete\") && setValue(null)" }, properties: { "disabled": "disabled()" } }, providers: [
            tuiAsOptionContent(TuiSelectOption),
            tuiAsTextfieldAccessor(TuiSelectDirective),
            tuiAsControl(TuiSelectDirective),
        ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithTextfield }, { directive: i1.TuiSelectLike }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSelectDirective, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: 'input[tuiSelect]',
                    providers: [
                        tuiAsOptionContent(TuiSelectOption),
                        tuiAsTextfieldAccessor(TuiSelectDirective),
                        tuiAsControl(TuiSelectDirective),
                    ],
                    hostDirectives: [TuiWithTextfield, TuiSelectLike],
                    host: {
                        '[disabled]': 'disabled()',
                        '(input)': '$event.inputType?.includes("delete") && setValue(null)',
                    },
                }]
        }] });

const TuiSelect = [TuiSelectDirective, TuiNativeSelect];

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

export { TuiNativeSelect, TuiSelect, TuiSelectDirective, TuiSelectOption };
//# sourceMappingURL=taiga-ui-kit-components-select.mjs.map