@taiga-ui/kit
Version:
Taiga UI Angular main components kit
153 lines (145 loc) • 16.9 kB
JavaScript
import * as i0 from '@angular/core';
import { contentChildren, inject, computed, input, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
import { NgControl } from '@angular/forms';
import { tuiIsPresent, tuiIsFlat } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i3 from '@taiga-ui/core/components/data-list';
import { TuiOptionWithValue, tuiAsOptionContent, TuiDataList } from '@taiga-ui/core/components/data-list';
import { TuiLink } from '@taiga-ui/core/components/link';
import * as i2 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldComponent, TUI_TEXTFIELD_OPTIONS, TuiTextfieldMultiComponent, TuiSelectLike, TuiTextfield } 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 { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { TuiCheckbox } from '@taiga-ui/core/components/checkbox';
import { NgTemplateOutlet } from '@angular/common';
import { WA_IS_IOS, WA_IS_ANDROID } from '@ng-web-apis/platform';
import { TuiControl } from '@taiga-ui/cdk/classes';
import { tuiDirectiveBinding } from '@taiga-ui/cdk/utils/di';
import * as i1 from '@taiga-ui/kit/components/input-chip';
import { TuiInputChipDirective } from '@taiga-ui/kit/components/input-chip';
import * as i4 from '@taiga-ui/core/portals/dropdown';
class TuiMultiSelectGroupComponent {
constructor() {
this.options = contentChildren((TuiOptionWithValue));
this.handlers = inject(TUI_ITEMS_HANDLERS);
this.control = inject(TuiTextfieldComponent, { optional: true })?.control() ||
inject(NgControl, { optional: true });
this.values = computed(() => this.options().map(({ value }) => value()));
this.texts = inject(TUI_MULTI_SELECT_TEXTS);
this.value = tuiInjectValue();
this.checked = computed(() => this.values().every((item) => this.value()?.some((v) => tuiIsPresent(item) && this.handlers.identityMatcher()(item, v))));
this.label = input('');
}
toggle() {
const values = this.values().filter(tuiIsPresent);
const matcher = this.handlers.identityMatcher();
const value = this.value() || [];
const others = value.filter((a) => values.every((b) => !matcher(a, b)));
this.control?.control?.setValue(this.checked() ? others : others.concat(values));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiMultiSelectGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiMultiSelectGroupComponent, isStandalone: true, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "options", predicate: (TuiOptionWithValue), isSignal: true }], ngImport: i0, template: "@if (values().length) {\n <span class=\"t-label\">\n {{ label() }}\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}\n<ng-content />\n", styles: [":host:before{display:none}.t-label{display:flex;align-items:flex-start;justify-content:space-between;padding:.5rem}.t-label:last-child{display:none}:host-context(tui-data-list[data-size=\"s\"]) .t-label{padding:.1875rem .375rem}:host-context(tui-sheet-dialog) .t-label.t-label{font:var(--tui-typography-heading-h6);padding:.5rem 0}.t-button{font:var(--tui-typography-body-s)}:host-context(tui-data-list[data-size=\"l\"]) .t-button{margin-block-start:.1875rem}\n"], dependencies: [{ kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiMultiSelectGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'tui-opt-group[tuiMultiSelectGroup]', imports: [TuiLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (values().length) {\n <span class=\"t-label\">\n {{ label() }}\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}\n<ng-content />\n", styles: [":host:before{display:none}.t-label{display:flex;align-items:flex-start;justify-content:space-between;padding:.5rem}.t-label:last-child{display:none}:host-context(tui-data-list[data-size=\"s\"]) .t-label{padding:.1875rem .375rem}:host-context(tui-sheet-dialog) .t-label.t-label{font:var(--tui-typography-heading-h6);padding:.5rem 0}.t-button{font:var(--tui-typography-body-s)}:host-context(tui-data-list[data-size=\"l\"]) .t-button{margin-block-start:.1875rem}\n"] }]
}] });
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: "19.2.21", ngImport: i0, type: TuiMultiSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiMultiSelectOption, isStandalone: true, selector: "ng-component", host: { properties: { "attr.aria-selected": "selected()" } }, ngImport: i0, template: `
@if (option) {
<input
aria-hidden="true"
tuiCheckbox
type="checkbox"
[checked]="selected()"
[size]="size() === 'l' ? 'm' : 's'"
/>
}
`, isInline: true, styles: [":host[data-size=m] input{margin-inline-start:.25rem}:host-context(tui-dropdown-mobile) [tuiCheckbox],:host-context(tui-sheet-dialog) [tuiCheckbox]{order:100;margin-inline-start:auto}\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: TuiMultiSelectOption, decorators: [{
type: Component,
args: [{ imports: [TuiCheckbox], template: `
@if (option) {
<input
aria-hidden="true"
tuiCheckbox
type="checkbox"
[checked]="selected()"
[size]="size() === 'l' ? 'm' : 's'"
/>
}
`, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[attr.aria-selected]': 'selected()' }, styles: [":host[data-size=m] input{margin-inline-start:.25rem}:host-context(tui-dropdown-mobile) [tuiCheckbox],:host-context(tui-sheet-dialog) [tuiCheckbox]{order:100;margin-inline-start:auto}\n"] }]
}] });
class TuiMultiSelectGroupDirective {
constructor() {
tuiInjectElement()
.closest('[role="listbox"]')
?.setAttribute('aria-multiselectable', 'true');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiMultiSelectGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiMultiSelectGroupDirective, isStandalone: true, selector: "[tuiMultiSelectGroup]", providers: [tuiAsOptionContent(TuiMultiSelectOption)], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiMultiSelectGroupDirective, decorators: [{
type: Directive,
args: [{
selector: '[tuiMultiSelectGroup]',
providers: [tuiAsOptionContent(TuiMultiSelectOption)],
}]
}], ctorParameters: () => [] });
class TuiMultiSelectNative {
constructor() {
this.control = inject(TuiControl);
this.textfield = inject(TuiTextfieldMultiComponent);
this.isFlat = tuiIsFlat;
this.handlers = inject(TUI_ITEMS_HANDLERS);
this.el = tuiInjectElement();
this.mobile = inject(WA_IS_IOS) || (inject(WA_IS_ANDROID) && 'showPicker' in this.el);
this.isSelected = computed((value = this.control.value()) => (x) => tuiIsPresent(value) &&
value.some((item) => this.handlers.identityMatcher()(x, item)));
this.items = input([]);
this.labels = input([]);
this.placeholder = input('');
this.binding = tuiDirectiveBinding(TuiTextfieldMultiComponent, 'filler', this.placeholder, {});
}
onInput() {
const items = this.items()?.flat() || [];
const options = Array.from(this.el.selectedOptions).map(({ index }) => index);
this.textfield.cva()?.onChange(items.filter((_, i) => options.includes(i)));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiMultiSelectNative, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiMultiSelectNative, isStandalone: true, selector: "select[tuiMultiSelect]", 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: { attributes: { "multiple": "" }, listeners: { "click.stop.zoneless": "0", "input": "onInput()" }, properties: { "size": "mobile ? 1 : 2" } }, providers: [tuiAsOptionContent(TuiMultiSelectOption)], hostDirectives: [{ directive: i1.TuiInputChipDirective }, { directive: i2.TuiSelectLike }], ngImport: i0, template: "@let list = items();\n@if (list && !isFlat(list)) {\n @for (label of labels(); track $index) {\n <optgroup [label]=\"label\">\n <ng-container *ngTemplateOutlet=\"options; context: {$implicit: list[$index]}\" />\n </optgroup>\n }\n @if (!mobile) {\n <tui-data-list *tuiDropdown>\n @for (group of list; track $index) {\n <tui-opt-group\n tuiMultiSelectGroup\n [label]=\"labels()[$index] || ''\"\n >\n @for (item of group; track $index) {\n <button\n tuiOption\n type=\"button\"\n [disabled]=\"handlers.disabledItemHandler()(item)\"\n [value]=\"item\"\n >\n {{ handlers.stringify()(item) }}\n </button>\n }\n </tui-opt-group>\n }\n </tui-data-list>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"options; context: {$implicit: list}\" />\n @if (!mobile) {\n <tui-data-list *tuiDropdown>\n @for (item of list; track $index) {\n <button\n tuiOption\n type=\"button\"\n [disabled]=\"handlers.disabledItemHandler()(item)\"\n [value]=\"item\"\n >\n {{ handlers.stringify()(item) }}\n </button>\n }\n </tui-data-list>\n }\n}\n\n<ng-template\n #options\n let-items\n>\n @for (option of items; track option) {\n <option\n [disabled]=\"handlers.disabledItemHandler()(option)\"\n [selected]=\"isSelected()(option)\"\n [value]=\"handlers.stringify()(option)\"\n >\n {{ handlers.stringify()(option) }}\n </option>\n }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "component", type: TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: ["label"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiMultiSelectNative, decorators: [{
type: Component,
args: [{ selector: 'select[tuiMultiSelect]', imports: [NgTemplateOutlet, TuiDataList, TuiMultiSelectGroupComponent, TuiTextfield], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsOptionContent(TuiMultiSelectOption)], hostDirectives: [TuiInputChipDirective, TuiSelectLike], host: {
multiple: '',
'[size]': 'mobile ? 1 : 2',
'(click.stop.zoneless)': '0',
'(input)': 'onInput()',
}, template: "@let list = items();\n@if (list && !isFlat(list)) {\n @for (label of labels(); track $index) {\n <optgroup [label]=\"label\">\n <ng-container *ngTemplateOutlet=\"options; context: {$implicit: list[$index]}\" />\n </optgroup>\n }\n @if (!mobile) {\n <tui-data-list *tuiDropdown>\n @for (group of list; track $index) {\n <tui-opt-group\n tuiMultiSelectGroup\n [label]=\"labels()[$index] || ''\"\n >\n @for (item of group; track $index) {\n <button\n tuiOption\n type=\"button\"\n [disabled]=\"handlers.disabledItemHandler()(item)\"\n [value]=\"item\"\n >\n {{ handlers.stringify()(item) }}\n </button>\n }\n </tui-opt-group>\n }\n </tui-data-list>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"options; context: {$implicit: list}\" />\n @if (!mobile) {\n <tui-data-list *tuiDropdown>\n @for (item of list; track $index) {\n <button\n tuiOption\n type=\"button\"\n [disabled]=\"handlers.disabledItemHandler()(item)\"\n [value]=\"item\"\n >\n {{ handlers.stringify()(item) }}\n </button>\n }\n </tui-data-list>\n }\n}\n\n<ng-template\n #options\n let-items\n>\n @for (option of items; track option) {\n <option\n [disabled]=\"handlers.disabledItemHandler()(option)\"\n [selected]=\"isSelected()(option)\"\n [value]=\"handlers.stringify()(option)\"\n >\n {{ handlers.stringify()(option) }}\n </option>\n }\n</ng-template>\n" }]
}] });
const TuiMultiSelect = [
TuiMultiSelectGroupComponent,
TuiMultiSelectGroupDirective,
TuiMultiSelectNative,
];
/**
* Generated bundle index. Do not edit.
*/
export { TuiMultiSelect, TuiMultiSelectGroupComponent, TuiMultiSelectGroupDirective, TuiMultiSelectNative, TuiMultiSelectOption };
//# sourceMappingURL=taiga-ui-kit-components-multi-select.mjs.map