@taiga-ui/kit
Version:
Taiga UI Angular main components kit
162 lines (154 loc) • 14.5 kB
JavaScript
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 * as i2 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldComponent, TUI_TEXTFIELD_OPTIONS, TuiTextfield, TuiSelectLike } 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, tuiIsFlat } from '@taiga-ui/kit/utils';
import { NgIf, NgForOf, NgTemplateOutlet } from '@angular/common';
import { TuiCheckbox } from '@taiga-ui/kit/components/checkbox';
import { TuiControl } from '@taiga-ui/cdk/classes';
import { TUI_IS_IOS, TUI_IS_ANDROID } from '@taiga-ui/cdk/tokens';
import { tuiInjectElement, tuiIsPresent as tuiIsPresent$1 } from '@taiga-ui/cdk/utils';
import * as i3 from '@taiga-ui/kit/components/data-list-wrapper';
import { TuiDataListWrapper } from '@taiga-ui/kit/components/data-list-wrapper';
import * as i1 from '@taiga-ui/kit/components/input-chip';
import { TuiInputChipDirective } from '@taiga-ui/kit/components/input-chip';
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 }); }
}
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]
}] } });
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, styles: [":host-context(tui-dropdown-mobile) input{order:100;margin-inline-start:auto}\n"], 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, styles: [":host-context(tui-dropdown-mobile) input{order:100;margin-inline-start:auto}\n"] }]
}] });
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)],
}]
}] });
class TuiMultiSelectNative {
constructor() {
this.control = inject(TuiControl);
this.textfield = inject(TuiTextfieldComponent);
this.isFlat = tuiIsFlat;
this.handlers = inject(TUI_ITEMS_HANDLERS);
this.el = tuiInjectElement();
this.mobile = inject(TUI_IS_IOS) || (inject(TUI_IS_ANDROID) && 'showPicker' in this.el);
this.isSelected = computed((value = this.control.value()) => (x) => tuiIsPresent$1(value) &&
value.some((item) => this.handlers.identityMatcher()(x, item)));
this.items = [];
this.labels = [];
}
set placeholder(placeholder) {
this.textfield.fillerSetter = placeholder;
}
onInput() {
const items = this.items || [];
const options = Array.from(this.el.selectedOptions).map(({ index }) => index);
this.textfield.cva?.onChange(items.flat().filter((_, i) => options.includes(i)));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMultiSelectNative, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiMultiSelectNative, isStandalone: true, selector: "select[tuiMultiSelect]", inputs: { items: "items", labels: "labels", placeholder: "placeholder" }, host: { attributes: { "multiple": "" }, listeners: { "click.stop.zoneless": "0", "input": "onInput()" } }, providers: [tuiAsOptionContent(TuiMultiSelectOption)], hostDirectives: [{ directive: i1.TuiInputChipDirective }, { directive: i2.TuiSelectLike }], ngImport: i0, template: "<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 *ngIf=\"!mobile\">\n <tui-data-list-wrapper\n *tuiTextfieldDropdown\n new\n [items]=\"items\"\n [labels]=\"labels\"\n />\n </ng-container>\n</ng-container>\n\n<ng-template #flatItems>\n <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items}\" />\n <ng-container *ngIf=\"!mobile\">\n <tui-data-list-wrapper\n *tuiTextfieldDropdown\n new\n [items]=\"$any(items)\"\n />\n </ng-container>\n</ng-template>\n\n<ng-template\n #options\n let-items\n>\n <option\n *ngFor=\"let option of items\"\n [disabled]=\"handlers.disabledItemHandler()(option)\"\n [selected]=\"isSelected()(option)\"\n [value]=\"handlers.stringify()(option)\"\n >\n {{ handlers.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"] }, { kind: "component", type: i3.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: i3.TuiDataListGroupWrapperComponent, selector: "tui-data-list-wrapper[labels]", inputs: ["labels"] }, { kind: "directive", type: i2.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMultiSelectNative, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'select[tuiMultiSelect]', imports: [NgForOf, NgIf, NgTemplateOutlet, TuiDataListWrapper, TuiTextfield], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsOptionContent(TuiMultiSelectOption)], hostDirectives: [TuiInputChipDirective, TuiSelectLike], host: {
multiple: '',
'(click.stop.zoneless)': '0',
'(input)': 'onInput()',
}, template: "<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 *ngIf=\"!mobile\">\n <tui-data-list-wrapper\n *tuiTextfieldDropdown\n new\n [items]=\"items\"\n [labels]=\"labels\"\n />\n </ng-container>\n</ng-container>\n\n<ng-template #flatItems>\n <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items}\" />\n <ng-container *ngIf=\"!mobile\">\n <tui-data-list-wrapper\n *tuiTextfieldDropdown\n new\n [items]=\"$any(items)\"\n />\n </ng-container>\n</ng-template>\n\n<ng-template\n #options\n let-items\n>\n <option\n *ngFor=\"let option of items\"\n [disabled]=\"handlers.disabledItemHandler()(option)\"\n [selected]=\"isSelected()(option)\"\n [value]=\"handlers.stringify()(option)\"\n >\n {{ handlers.stringify()(option) }}\n </option>\n</ng-template>\n" }]
}], propDecorators: { items: [{
type: Input
}], labels: [{
type: Input
}], placeholder: [{
type: Input
}] } });
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