@taiga-ui/kit
Version:
Taiga UI Angular main components kit
173 lines (166 loc) • 12.7 kB
JavaScript
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, viewChildren, computed, effect, untracked, input, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
import { tuiIsFlat, tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i1 from '@taiga-ui/core/components/input';
import { TuiInputDirective, TuiWithInput } from '@taiga-ui/core/components/input';
import * as i2 from '@taiga-ui/core/components/textfield';
import { tuiAsTextfieldAccessor, TuiSelectLike, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import { TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
import { TuiLabel } from '@taiga-ui/core/components/label';
import { TuiDropdownOpen, tuiDropdownEnabled, TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
import { TuiDataListComponent, TuiOptionWithValue, tuiAsOptionContent } from '@taiga-ui/core/components/data-list';
import { tuiDirectiveBinding } from '@taiga-ui/cdk/utils/di';
import { TuiCheckbox, tuiCheckboxOptionsProvider } from '@taiga-ui/core/components/checkbox';
import * as i1$1 from '@taiga-ui/core/components/scrollbar';
import { TuiScrollIntoView } from '@taiga-ui/core/components/scrollbar';
import { tuiInjectValue } from '@taiga-ui/kit/utils';
class TuiNativeSelect extends TuiControl {
constructor() {
super(...arguments);
this.input = inject(TuiInputDirective);
this.options = viewChildren('option');
this.isFlat = tuiIsFlat;
this.itemsHandlers = inject(TUI_ITEMS_HANDLERS);
this.stringified = computed((value = this.value()) => tuiIsPresent(value) ? this.itemsHandlers.stringify()(value) : '');
this.isSelected = computed((value = this.value()) => (x) => tuiIsPresent(value) && this.itemsHandlers.identityMatcher()(x, value));
this.valueEffect = effect(() => {
/**
* Wait until all `<option>`-s are inside DOM.
* Otherwise
* ```
* document.querySelector('select').value = 'even upcoming valid value';
* // same as
* document.querySelector('select').value = '';
* ```
* (it breaks `tuiValue` utility logic)
*/
if (this.options().length) {
this.input.value.set(untracked(this.stringified));
}
});
this.items = input([]);
this.labels = input([]);
this.placeholder = input('');
}
setValue(value) {
this.onChange(value);
}
selectOption(index) {
const items = (this.items()?.flat() ?? []);
const placeholderOffset = this.stringified() ? 0 : 1;
this.onChange(items[index - placeholderOffset] ?? null);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNativeSelect, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiNativeSelect, isStandalone: true, selector: "select[tuiSelect]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "selectOption($event.target.options.selectedIndex)" }, properties: { "disabled": "!interactive()" } }, providers: [tuiAsTextfieldAccessor(TuiNativeSelect), tuiAsControl(TuiNativeSelect)], viewQueries: [{ propertyName: "options", predicate: ["option"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithInput }], ngImport: i0, template: "@if (!stringified()) {\n <option\n disabled\n selected\n value=\"\"\n >\n {{ placeholder() }}\n </option>\n}\n\n@let elements = items();\n\n@if (elements && !isFlat(elements)) {\n @for (group of labels(); track group) {\n <optgroup [label]=\"labels()[$index]\">\n <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements[$index]}\" />\n </optgroup>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements}\" />\n}\n\n<ng-template\n #options\n let-items\n>\n @for (option of items; track option) {\n <option\n #option\n [disabled]=\"itemsHandlers.disabledItemHandler()(option)\"\n [selected]=\"isSelected()(option)\"\n [value]=\"itemsHandlers.stringify()(option)\"\n >\n {{ itemsHandlers.stringify()(option) }}\n </option>\n }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNativeSelect, decorators: [{
type: Component,
args: [{ selector: 'select[tuiSelect]', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsTextfieldAccessor(TuiNativeSelect), tuiAsControl(TuiNativeSelect)], hostDirectives: [TuiWithInput], host: {
'[disabled]': '!interactive()',
'(change)': 'selectOption($event.target.options.selectedIndex)',
}, template: "@if (!stringified()) {\n <option\n disabled\n selected\n value=\"\"\n >\n {{ placeholder() }}\n </option>\n}\n\n@let elements = items();\n\n@if (elements && !isFlat(elements)) {\n @for (group of labels(); track group) {\n <optgroup [label]=\"labels()[$index]\">\n <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements[$index]}\" />\n </optgroup>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements}\" />\n}\n\n<ng-template\n #options\n let-items\n>\n @for (option of items; track option) {\n <option\n #option\n [disabled]=\"itemsHandlers.disabledItemHandler()(option)\"\n [selected]=\"isSelected()(option)\"\n [value]=\"itemsHandlers.stringify()(option)\"\n >\n {{ itemsHandlers.stringify()(option) }}\n </option>\n }\n</ng-template>\n" }]
}] });
class TuiSelectOption {
constructor() {
this.handlers = inject(TUI_ITEMS_HANDLERS);
this.value = tuiInjectValue();
this.datalist = inject(TuiDataListComponent);
this.option = inject(TuiOptionWithValue);
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: "19.2.21", ngImport: i0, type: TuiSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiSelectOption, isStandalone: true, selector: "ng-component", host: { attributes: { "tuiSelectOption": "" }, properties: { "attr.aria-selected": "selected()" } }, providers: [tuiCheckboxOptionsProvider({ appearance: () => 'action' })], hostDirectives: [{ directive: i1$1.TuiScrollIntoView }], ngImport: i0, template: `
(selected()) {
<input
aria-hidden="true"
checked
tuiCheckbox
type="checkbox"
class="t-check"
[size]="datalist.size() === 'l' ? 'm' : 's'"
/>
} {
<span class="t-dummy"></span>
}
`, isInline: true, styles: [":host>.t-check,:host>.t-dummy{order:100;margin-inline-start:auto;pointer-events:none}:host[data-size=m]>.t-check,:host[data-size=m]>.t-dummy{margin-inline-end:.25rem}:host-context(tui-dropdown-mobile)>.t-check{display:none}.t-check:before{font-size:var(--t-size)}.t-dummy{inline-size:1rem}:host[data-size=l] .t-dummy{inline-size:1.5rem}\n"], dependencies: [{ kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiSelectOption, decorators: [{
type: Component,
args: [{ imports: [TuiCheckbox], template: `
(selected()) {
<input
aria-hidden="true"
checked
tuiCheckbox
type="checkbox"
class="t-check"
[size]="datalist.size() === 'l' ? 'm' : 's'"
/>
} {
<span class="t-dummy"></span>
}
`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiCheckboxOptionsProvider({ appearance: () => 'action' })], hostDirectives: [TuiScrollIntoView], host: {
tuiSelectOption: '',
'[attr.aria-selected]': 'selected()',
}, styles: [":host>.t-check,:host>.t-dummy{order:100;margin-inline-start:auto;pointer-events:none}:host[data-size=m]>.t-check,:host[data-size=m]>.t-dummy{margin-inline-end:.25rem}:host-context(tui-dropdown-mobile)>.t-check{display:none}.t-check:before{font-size:var(--t-size)}.t-dummy{inline-size:1rem}:host[data-size=l] .t-dummy{inline-size:1.5rem}\n"] }]
}] });
class TuiSelectDirective extends TuiControl {
constructor() {
super(...arguments);
this.input = inject(TuiInputDirective);
this.open = inject(TuiDropdownOpen).open;
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.input.value.set(string);
});
}
setValue(value) {
this.onChange(value);
if (!value) {
this.open.set(true);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", 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.TuiWithInput }, { directive: i2.TuiSelectLike }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiSelectDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[tuiSelect]',
providers: [
tuiAsOptionContent(TuiSelectOption),
tuiAsTextfieldAccessor(TuiSelectDirective),
tuiAsControl(TuiSelectDirective),
],
hostDirectives: [TuiWithInput, TuiSelectLike],
host: {
'[disabled]': 'disabled()',
'(input)': '$event.inputType?.includes("delete") && setValue(null)',
},
}]
}] });
const TuiSelect = [
TuiSelectDirective,
TuiNativeSelect,
TuiLabel,
TuiTextfieldComponent,
TuiTextfieldOptionsDirective,
TuiDropdownContent,
];
/**
* Generated bundle index. Do not edit.
*/
export { TuiNativeSelect, TuiSelect, TuiSelectDirective, TuiSelectOption };
//# sourceMappingURL=taiga-ui-kit-components-select.mjs.map