@taiga-ui/kit 2.61.0 → 3.0.0-rc.2

package/fesm2015/taiga-ui-kit-components-multi-select.js

@@ -1,18 +1,25 @@
-import { __decorate, __param } from 'tslib';
-import { InjectionToken, EventEmitter, Optional, Self, Inject, ChangeDetectorRef, ContentChild, ViewChild, Input, HostBinding, Output, TemplateRef, Component, ChangeDetectionStrategy, forwardRef, Pipe, ContentChildren, Directive, NgModule } from '@angular/core';
-import { AbstractTuiMultipleControl, EMPTY_ARRAY, isNativeFocused, setNativeFocused, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR, EMPTY_QUERY, itemsQueryListObservable, getOriginalArrayFromQueryList, TUI_DEFAULT_IDENTITY_MATCHER, isPresent, tuiReplayedValueChangesFrom, EMPTY_FUNCTION, TuiPreventDefaultModule, TuiActiveZoneModule, TuiLetModule, TuiMapperPipeModule, TuiHoveredModule } from '@taiga-ui/cdk';
-import { isFlat } from '@taiga-ui/kit/utils';
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, ChangeDetectorRef, TemplateRef, Component, ChangeDetectionStrategy, Optional, Self, Inject, ContentChild, ViewChild, Input, HostBinding, Output, Pipe, ContentChildren, forwardRef, Directive, NgModule } from '@angular/core';
+import * as i3 from '@taiga-ui/cdk';
+import { AbstractTuiMultipleControl, EMPTY_ARRAY, tuiIsString, tuiArrayToggle, tuiIsNativeFocused, tuiAsFocusableItemAccessor, tuiAsControl, tuiDefaultProp, tuiPure, EMPTY_QUERY, tuiItemsQueryListObservable, tuiGetOriginalArrayFromQueryList, TUI_DEFAULT_IDENTITY_MATCHER, tuiIsPresent, tuiControlValue, EMPTY_FUNCTION, TuiPreventDefaultModule, TuiActiveZoneModule, TuiLetModule, TuiMapperPipeModule } from '@taiga-ui/cdk';
+import { tuiIsFlat } from '@taiga-ui/kit/utils';
+import * as i4 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { TuiSvgService, TuiTextfieldController, TUI_TEXTFIELD_WATCHED_CONTROLLER, TUI_DATA_LIST_ACCESSOR, TuiHostedDropdownComponent, TuiDataListDirective, TUI_DATA_LIST_HOST, TEXTFIELD_CONTROLLER_PROVIDER, sizeBigger, TuiOptionComponent, TUI_OPTION_CONTENT, TuiSvgModule, TuiHostedDropdownModule, TuiPrimitiveCheckboxModule, TuiDataListModule } from '@taiga-ui/core';
+import * as i1 from '@taiga-ui/core';
+import { TuiSvgService, TUI_TEXTFIELD_WATCHED_CONTROLLER, tuiAsDataListHost, TEXTFIELD_CONTROLLER_PROVIDER, TUI_DATA_LIST_ACCESSOR, TuiDataListDirective, TuiHostedDropdownComponent, tuiSizeBigger, TUI_DATA_LIST_HOST, TuiOptionComponent, tuiAsOptionContent, TuiSvgModule, TuiHostedDropdownModule, TuiPrimitiveCheckboxModule, TuiDataListModule, TuiTextfieldControllerModule } from '@taiga-ui/core';
 import { TuiStringifiableItem } from '@taiga-ui/kit/classes';
 import { TUI_ARROW_MODE, TuiArrowModule } from '@taiga-ui/kit/components/arrow';
+import * as i2 from '@taiga-ui/kit/components/input-tag';
 import { TuiInputTagComponent, TuiInputTagModule } from '@taiga-ui/kit/components/input-tag';
 import { iconBlank } from '@taiga-ui/kit/constants';
 import { FIXED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
 import { TUI_ITEMS_HANDLERS } from '@taiga-ui/kit/tokens';
+import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { TuiMultiSelectOptionComponent, TuiMultiSelectOptionModule } from '@taiga-ui/kit/components/multi-select-option';
+import * as i6 from '@tinkoff/ng-polymorpheus';
 import { PolymorpheusComponent, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import { TuiMultiSelectOptionComponent, TuiMultiSelectOptionModule } from '@taiga-ui/kit/components/multi-select-option';
 import { combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -28,8 +35,7 @@ const tuiMultiSelectOptionsProvider = (options) => ({
     useValue: Object.assign(Object.assign({}, TUI_MULTI_SELECT_DEFAULT_OPTIONS), options),
 });
 
-var TuiMultiSelectComponent_1;
-let TuiMultiSelectComponent = TuiMultiSelectComponent_1 = class TuiMultiSelectComponent extends AbstractTuiMultipleControl {
+class TuiMultiSelectComponent extends AbstractTuiMultipleControl {
     constructor(control, changeDetectorRef, svgService, arrowMode, itemsHandlers, options, controller) {
         super(control, changeDetectorRef);
         this.arrowMode = arrowMode;
@@ -49,7 +55,7 @@ let TuiMultiSelectComponent = TuiMultiSelectComponent_1 = class TuiMultiSelectCo
         this.valueMapper = (value, stringify, group) => group
             ? EMPTY_ARRAY
             : value.map(item => new TuiStringifiableItem(item, stringify));
-        this.disabledItemHandlerWrapper = handler => stringifiable => typeof stringifiable === `string` || handler(stringifiable.item);
+        this.disabledItemHandlerWrapper = handler => stringifiable => tuiIsString(stringifiable) || handler(stringifiable.item);
         svgService.define({ iconBlank });
     }
     get size() {
@@ -90,15 +96,9 @@ let TuiMultiSelectComponent = TuiMultiSelectComponent_1 = class TuiMultiSelectCo
             this.value.length > 0 &&
             (!this.focused || !this.editable));
     }
-    get context() {
-        return this.getContext(this.value);
-    }
     getStringifier(stringify) {
         return ({ $implicit }) => stringify($implicit);
     }
-    onHoveredChange(hovered) {
-        this.updateHovered(hovered);
-    }
     onSpace(event) {
         if (!this.editable) {
             event.preventDefault();
@@ -119,19 +119,15 @@ let TuiMultiSelectComponent = TuiMultiSelectComponent_1 = class TuiMultiSelectCo
         if (options.length !== 1) {
             return;
         }
-        const index = value.indexOf(options[0]);
         event.preventDefault();
-        this.updateValue(index === -1
-            ? [...value, options[0]]
-            : [...value.slice(0, index), ...value.slice(index + 1)]);
+        this.updateValue(tuiArrayToggle(value, options[0]));
         this.updateSearch(null);
     }
     onClick({ nativeFocusableElement }) {
         var _a;
-        if (this.editable &&
-            this.interactive &&
+        if (this.interactive &&
             nativeFocusableElement &&
-            isNativeFocused(nativeFocusableElement)) {
+            tuiIsNativeFocused(nativeFocusableElement)) {
             (_a = this.hostedDropdown) === null || _a === void 0 ? void 0 : _a.updateOpen(!this.open);
         }
     }
@@ -154,9 +150,6 @@ let TuiMultiSelectComponent = TuiMultiSelectComponent_1 = class TuiMultiSelectCo
         super.setDisabledState();
         this.open = false;
     }
-    getContext($implicit) {
-        return { $implicit };
-    }
     updateSearch(search) {
         if (this.search === search) {
             return;
@@ -166,112 +159,127 @@ let TuiMultiSelectComponent = TuiMultiSelectComponent_1 = class TuiMultiSelectCo
     }
     focusInput(preventScroll = false) {
         if (this.nativeFocusableElement) {
-            setNativeFocused(this.nativeFocusableElement, true, preventScroll);
+            this.nativeFocusableElement.focus({ preventScroll });
         }
     }
-};
-TuiMultiSelectComponent.ctorParameters = () => [
-    { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: TuiSvgService, decorators: [{ type: Inject, args: [TuiSvgService,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_ARROW_MODE,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_ITEMS_HANDLERS,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_MULTI_SELECT_OPTIONS,] }] },
-    { type: TuiTextfieldController, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_WATCHED_CONTROLLER,] }] }
-];
-__decorate([
-    ContentChild(TUI_DATA_LIST_ACCESSOR)
-], TuiMultiSelectComponent.prototype, "accessor", void 0);
-__decorate([
-    ViewChild(TuiHostedDropdownComponent)
-], TuiMultiSelectComponent.prototype, "hostedDropdown", void 0);
-__decorate([
-    ViewChild(TuiInputTagComponent)
-], TuiMultiSelectComponent.prototype, "input", void 0);
+}
+TuiMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiMultiSelectComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: TuiSvgService }, { token: TUI_ARROW_MODE }, { token: TUI_ITEMS_HANDLERS }, { token: TUI_MULTI_SELECT_OPTIONS }, { token: TUI_TEXTFIELD_WATCHED_CONTROLLER }], target: i0.ɵɵFactoryTarget.Component });
+TuiMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiMultiSelectComponent, selector: "tui-multi-select", inputs: { stringify: "stringify", identityMatcher: "identityMatcher", expandable: "expandable", search: "search", editable: "editable", disabledItemHandler: "disabledItemHandler", valueContent: "valueContent" }, outputs: { searchChange: "searchChange" }, host: { properties: { "class._editable": "this.editable", "attr.data-size": "this.size" } }, providers: [
+        tuiAsFocusableItemAccessor(TuiMultiSelectComponent),
+        tuiAsControl(TuiMultiSelectComponent),
+        tuiAsDataListHost(TuiMultiSelectComponent),
+        TEXTFIELD_CONTROLLER_PROVIDER,
+    ], queries: [{ propertyName: "accessor", first: true, predicate: TUI_DATA_LIST_ACCESSOR, descendants: true }, { propertyName: "datalist", first: true, predicate: TuiDataListDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "hostedDropdown", first: true, predicate: TuiHostedDropdownComponent, descendants: true }, { propertyName: "input", first: true, predicate: TuiInputTagComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"interactive\"\n    [content]=\"datalist || ''\"\n    [(open)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-input-tag\n        #inputTag\n        automation-id=\"tui-multi-select__input\"\n        class=\"t-input\"\n        [nativeId]=\"nativeId\"\n        [tuiTextfieldIcon]=\"tagIcon\"\n        [disabled]=\"disabled\"\n        [disabledItemHandler]=\"disabledItemHandler | tuiMapper: disabledItemHandlerWrapper\"\n        [readOnly]=\"readOnly\"\n        [inputHidden]=\"!editable\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoInvalid]=\"computedInvalid\"\n        [editable]=\"false\"\n        [expandable]=\"expandable\"\n        [search]=\"searchOrSpace\"\n        [ngModel]=\"computedValue | tuiMapper: valueMapper:stringify\"\n        (ngModelChange)=\"onInput($event)\"\n        (searchChange)=\"onSearch($event)\"\n        (keydown.space)=\"onSpace($event)\"\n        (keydown.enter)=\"onEnter($event)\"\n        (click.prevent)=\"onClick(inputTag)\"\n    >\n        <ng-content></ng-content>\n    </tui-input-tag>\n    <div\n        class=\"t-wrapper\"\n        [class.t-wrapper_disabled]=\"disabled\"\n    >\n        <div\n            *ngIf=\"computedGroup\"\n            class=\"t-group\"\n            [class.t-group_fullsize]=\"inputTag.labelOutside\"\n        >\n            <ng-container *polymorpheusOutlet=\"valueContent as text; context: {$implicit: value}\">\n                {{ text }}\n            </ng-container>\n        </div>\n\n        <div\n            *ngIf=\"arrow\"\n            automation-id=\"tui-multi-select__arrow\"\n            tuiPreventDefault=\"mousedown\"\n            class=\"t-arrow\"\n            (click.prevent)=\"onArrowClick()\"\n        >\n            <ng-container *polymorpheusOutlet=\"arrow as text\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </div>\n</tui-hosted-dropdown>\n", styles: [":host{position:relative;display:block;border-radius:var(--tui-radius-m)}:host._disabled{pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-input{border-radius:inherit}:host:not(._editable):not(._readonly) .t-input{cursor:pointer}.t-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;pointer-events:none;justify-content:flex-end}.t-wrapper_disabled{opacity:var(--tui-disabled-opacity)}:host[data-size=s] .t-wrapper{height:var(--tui-height-s)}:host[data-size=m] .t-wrapper{height:var(--tui-height-m)}:host[data-size=l] .t-wrapper{height:var(--tui-height-l)}.t-group{display:flex;flex:1;align-items:center;padding:1.6875rem 1rem .5625rem}.t-group_fullsize{padding-top:.0625rem;padding-bottom:0}:host[data-size=m] .t-group_fullsize.t-group_fullsize{padding-top:0}:host[data-size=m] .t-group{padding:1.1875rem .75rem 0;font-size:.8125rem}.t-arrow{transition-property:transform;transition-property:all;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03);position:relative;box-sizing:border-box;transition-property:color,transform;width:1.5rem;height:auto;margin:0 .75rem;pointer-events:auto;cursor:pointer}.t-arrow:hover{color:var(--tui-text-02)}:host._readonly .t-arrow,:host._disabled .t-arrow{pointer-events:none}:host[data-mode=onDark] .t-arrow{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-arrow:hover{color:var(--tui-text-01-night)}\n"], components: [{ type: i1.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i2.TuiInputTagComponent, selector: "tui-input-tag", inputs: ["separator", "search", "editable", "tagValidator", "expandable", "inputHidden", "uniqueTags", "disabledItemHandler", "pseudoFocused"], outputs: ["searchChange"] }], directives: [{ type: i3.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i3.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]" }], pipes: { "tuiMapper": i3.TuiMapperPipe }, viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiMultiSelectComponent.prototype, "stringify", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiMultiSelectComponent.prototype, "identityMatcher", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiMultiSelectComponent.prototype, "expandable", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiMultiSelectComponent.prototype, "search", void 0);
 __decorate([
-    Input(),
-    HostBinding(`class._editable`),
     tuiDefaultProp()
 ], TuiMultiSelectComponent.prototype, "editable", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiMultiSelectComponent.prototype, "disabledItemHandler", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiMultiSelectComponent.prototype, "valueContent", void 0);
-__decorate([
-    Output()
-], TuiMultiSelectComponent.prototype, "searchChange", void 0);
-__decorate([
-    ContentChild(TuiDataListDirective, { read: TemplateRef })
-], TuiMultiSelectComponent.prototype, "datalist", void 0);
-__decorate([
-    HostBinding(`attr.data-size`)
-], TuiMultiSelectComponent.prototype, "size", null);
 __decorate([
     tuiPure
 ], TuiMultiSelectComponent.prototype, "getStringifier", null);
-__decorate([
-    tuiPure
-], TuiMultiSelectComponent.prototype, "getContext", null);
-TuiMultiSelectComponent = TuiMultiSelectComponent_1 = __decorate([
-    Component({
-        selector: `tui-multi-select`,
-        template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"interactive\"\n    [content]=\"datalist || ''\"\n    [(open)]=\"open\"\n    (tuiHoveredChange)=\"onHoveredChange($event)\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-input-tag\n        #inputTag\n        tuiHostedDropdownHost\n        automation-id=\"tui-multi-select__input\"\n        class=\"t-input\"\n        [nativeId]=\"nativeId\"\n        [icon]=\"tagIcon\"\n        [disabled]=\"disabled\"\n        [disabledItemHandler]=\"disabledItemHandler | tuiMapper: disabledItemHandlerWrapper\"\n        [readOnly]=\"readOnly\"\n        [inputHidden]=\"!editable\"\n        [pseudoHovered]=\"computedHovered\"\n        [pseudoFocused]=\"computedFocused\"\n        [pseudoInvalid]=\"computedInvalid\"\n        [editable]=\"false\"\n        [expandable]=\"expandable\"\n        [search]=\"searchOrSpace\"\n        [ngModel]=\"computedValue | tuiMapper: valueMapper:stringify\"\n        (ngModelChange)=\"onInput($event)\"\n        (searchChange)=\"onSearch($event)\"\n        (keydown.space)=\"onSpace($event)\"\n        (keydown.enter)=\"onEnter($event)\"\n        (click.prevent)=\"onClick(inputTag)\"\n    >\n        <ng-content></ng-content>\n    </tui-input-tag>\n    <div\n        class=\"t-wrapper\"\n        [class.t-wrapper_disabled]=\"disabled\"\n    >\n        <div\n            *ngIf=\"computedGroup\"\n            polymorpheus-outlet\n            class=\"t-group\"\n            [class.t-group_fullsize]=\"inputTag.labelOutside\"\n            [context]=\"context\"\n            [content]=\"valueContent\"\n        ></div>\n\n        <div\n            *ngIf=\"arrow\"\n            polymorpheus-outlet\n            automation-id=\"tui-multi-select__arrow\"\n            tuiPreventDefault=\"mousedown\"\n            class=\"t-arrow\"\n            [content]=\"arrow\"\n            (click.prevent)=\"onArrowClick()\"\n        ></div>\n    </div>\n</tui-hosted-dropdown>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        providers: [
-            {
-                provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
-                useExisting: forwardRef(() => TuiMultiSelectComponent_1),
-            },
-            {
-                provide: TUI_DATA_LIST_HOST,
-                useExisting: forwardRef(() => TuiMultiSelectComponent_1),
-            },
-            FIXED_DROPDOWN_CONTROLLER_PROVIDER,
-            TEXTFIELD_CONTROLLER_PROVIDER,
-        ],
-        styles: [":host{position:relative;display:block;border-radius:var(--tui-radius-m)}:host._disabled{pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-input{border-radius:inherit}:host:not(._editable):not(._readonly) .t-input{cursor:pointer}.t-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;pointer-events:none;justify-content:flex-end}.t-wrapper_disabled{opacity:var(--tui-disabled-opacity)}:host[data-size='s'] .t-wrapper{height:var(--tui-height-s)}:host[data-size='m'] .t-wrapper{height:var(--tui-height-m)}:host[data-size='l'] .t-wrapper{height:var(--tui-height-l)}.t-group{display:flex;flex:1;align-items:center;padding:1.6875rem 1rem .5625rem}.t-group_fullsize{padding-top:.0625rem;padding-bottom:0}:host[data-size='m'] .t-group_fullsize.t-group_fullsize{padding-top:0}:host[data-size='m'] .t-group{padding:1.1875rem .75rem 0;font-size:.8125rem}.t-arrow{transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;display:flex;align-items:center;justify-content:center;color:var(--tui-text-03);position:relative;box-sizing:border-box;transition-property:color,transform;width:1.5rem;height:auto;margin:0 .75rem;pointer-events:auto;cursor:pointer}.t-arrow:hover{color:var(--tui-text-02)}:host._disabled .t-arrow,:host._readonly .t-arrow{pointer-events:none}:host[data-mode=onDark] .t-arrow{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-arrow:hover{color:var(--tui-text-01-night)}"]
-    }),
-    __param(0, Optional()),
-    __param(0, Self()),
-    __param(0, Inject(NgControl)),
-    __param(1, Inject(ChangeDetectorRef)),
-    __param(2, Inject(TuiSvgService)),
-    __param(3, Inject(TUI_ARROW_MODE)),
-    __param(4, Inject(TUI_ITEMS_HANDLERS)),
-    __param(5, Inject(TUI_MULTI_SELECT_OPTIONS)),
-    __param(6, Inject(TUI_TEXTFIELD_WATCHED_CONTROLLER))
-], TuiMultiSelectComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `tui-multi-select`,
+                    templateUrl: `./multi-select.template.html`,
+                    styleUrls: [`./multi-select.style.less`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        tuiAsFocusableItemAccessor(TuiMultiSelectComponent),
+                        tuiAsControl(TuiMultiSelectComponent),
+                        tuiAsDataListHost(TuiMultiSelectComponent),
+                        TEXTFIELD_CONTROLLER_PROVIDER,
+                    ],
+                    viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
+                }]
+        }], ctorParameters: function () { return [{ type: i4.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NgControl]
+                }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: i1.TuiSvgService, decorators: [{
+                    type: Inject,
+                    args: [TuiSvgService]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_ARROW_MODE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_ITEMS_HANDLERS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_MULTI_SELECT_OPTIONS]
+                }] }, { type: i1.TuiTextfieldController, decorators: [{
+                    type: Inject,
+                    args: [TUI_TEXTFIELD_WATCHED_CONTROLLER]
+                }] }]; }, propDecorators: { accessor: [{
+                type: ContentChild,
+                args: [TUI_DATA_LIST_ACCESSOR]
+            }], hostedDropdown: [{
+                type: ViewChild,
+                args: [TuiHostedDropdownComponent]
+            }], input: [{
+                type: ViewChild,
+                args: [TuiInputTagComponent]
+            }], stringify: [{
+                type: Input
+            }], identityMatcher: [{
+                type: Input
+            }], expandable: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: [`class._editable`]
+            }], disabledItemHandler: [{
+                type: Input
+            }], valueContent: [{
+                type: Input
+            }], searchChange: [{
+                type: Output
+            }], datalist: [{
+                type: ContentChild,
+                args: [TuiDataListDirective, { read: TemplateRef }]
+            }], size: [{
+                type: HostBinding,
+                args: [`attr.data-size`]
+            }], getStringifier: [] } });
 
-let TuiHideSelectedPipe = class TuiHideSelectedPipe {
+class TuiHideSelectedPipe {
     constructor(component) {
         this.component = component;
     }
-    transform(items, component) {
-        const { value, identityMatcher } = component !== null && component !== void 0 ? component : this.component;
+    transform(items) {
+        const { value, identityMatcher } = this.component;
         if (!items) {
             return null;
         }
-        return isFlat(items)
+        return tuiIsFlat(items)
             ? this.filter(items, value, identityMatcher)
             : this.filter2d(items, value, identityMatcher);
     }
@@ -281,25 +289,27 @@ let TuiHideSelectedPipe = class TuiHideSelectedPipe {
     filter(items, value, matcher) {
         return items.filter(item => value.every(selected => !matcher(selected, item)));
     }
-};
-TuiHideSelectedPipe.ctorParameters = () => [
-    { type: TuiMultiSelectComponent, decorators: [{ type: Inject, args: [TuiMultiSelectComponent,] }] }
-];
+}
+TuiHideSelectedPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHideSelectedPipe, deps: [{ token: TuiMultiSelectComponent }], target: i0.ɵɵFactoryTarget.Pipe });
+TuiHideSelectedPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHideSelectedPipe, name: "tuiHideSelected", pure: false });
 __decorate([
     tuiPure
 ], TuiHideSelectedPipe.prototype, "filter2d", null);
 __decorate([
     tuiPure
 ], TuiHideSelectedPipe.prototype, "filter", null);
-TuiHideSelectedPipe = __decorate([
-    Pipe({
-        name: `tuiHideSelected`,
-        pure: false,
-    }),
-    __param(0, Inject(TuiMultiSelectComponent))
-], TuiHideSelectedPipe);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHideSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: `tuiHideSelected`,
+                    pure: false,
+                }]
+        }], ctorParameters: function () { return [{ type: TuiMultiSelectComponent, decorators: [{
+                    type: Inject,
+                    args: [TuiMultiSelectComponent]
+                }] }]; }, propDecorators: { filter2d: [], filter: [] } });
 
-let TuiMultiSelectGroupComponent = class TuiMultiSelectGroupComponent {
+class TuiMultiSelectGroupComponent {
     constructor(host, control) {
         this.host = host;
         this.control = control;
@@ -311,13 +321,13 @@ let TuiMultiSelectGroupComponent = class TuiMultiSelectGroupComponent {
         return ((_a = this.options.first) === null || _a === void 0 ? void 0 : _a.size) || `m`;
     }
     get checkboxSize() {
-        return this.options.first && sizeBigger(this.options.first.size) ? `l` : `m`;
+        return this.options.first && tuiSizeBigger(this.options.first.size) ? `l` : `m`;
     }
     get empty$() {
-        return itemsQueryListObservable(this.options).pipe(map(({ length }) => !length));
+        return tuiItemsQueryListObservable(this.options).pipe(map(({ length }) => !length));
     }
     get disabled$() {
-        return itemsQueryListObservable(this.options).pipe(map(items => items.every(({ disabled }) => disabled)));
+        return tuiItemsQueryListObservable(this.options).pipe(map(items => items.every(({ disabled }) => disabled)));
     }
     get value$() {
         return combineLatest(this.items$, this.valueChanges$).pipe(map(([items, current]) => {
@@ -342,30 +352,24 @@ let TuiMultiSelectGroupComponent = class TuiMultiSelectGroupComponent {
         this.control.control.setValue(checked ? filtered : [...filtered, ...values]);
     }
     get values() {
-        return this.filter(getOriginalArrayFromQueryList(this.options));
+        return this.filter(tuiGetOriginalArrayFromQueryList(this.options));
     }
     get matcher() {
         return this.host.identityMatcher || TUI_DEFAULT_IDENTITY_MATCHER;
     }
     get items$() {
-        return itemsQueryListObservable(this.options).pipe(map(options => options.map(({ value }) => value).filter(isPresent)));
+        return tuiItemsQueryListObservable(this.options).pipe(map(options => options.map(({ value }) => value).filter(tuiIsPresent)));
     }
     get valueChanges$() {
-        return tuiReplayedValueChangesFrom(this.control).pipe(map(value => value || []));
+        return tuiControlValue(this.control).pipe(map(value => value || []));
     }
     filter(items) {
-        return items.map(({ value }) => value).filter(isPresent);
+        return items.map(({ value }) => value).filter(tuiIsPresent);
     }
-};
-TuiMultiSelectGroupComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_DATA_LIST_HOST,] }] },
-    { type: NgControl, decorators: [{ type: Inject, args: [NgControl,] }] }
-];
-__decorate([
-    ContentChildren(TuiOptionComponent)
-], TuiMultiSelectGroupComponent.prototype, "options", void 0);
+}
+TuiMultiSelectGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiMultiSelectGroupComponent, deps: [{ token: TUI_DATA_LIST_HOST }, { token: NgControl }], target: i0.ɵɵFactoryTarget.Component });
+TuiMultiSelectGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: "label" }, queries: [{ propertyName: "options", predicate: TuiOptionComponent }], ngImport: i0, template: "<ng-container *tuiLet=\"value$ | async as value\">\n    <button\n        *ngIf=\"label && !(empty$ | async)\"\n        tuiOption\n        [size]=\"size\"\n        [disabled]=\"!!(disabled$ | async)\"\n        (click)=\"onClick(value)\"\n    >\n        <tui-primitive-checkbox\n            class=\"t-checkbox\"\n            [size]=\"checkboxSize\"\n            [value]=\"value\"\n        ></tui-primitive-checkbox>\n        <span class=\"t-label\">{{ label }}</span>\n    </button>\n</ng-container>\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column}:host:before{content:\"\"}.t-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-xs);flex:1;color:var(--tui-text-02)}.t-checkbox{margin-right:.75rem}\n"], components: [{ type: i1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i1.TuiPrimitiveCheckboxComponent, selector: "tui-primitive-checkbox", inputs: ["size", "disabled", "focused", "hovered", "pressed", "invalid", "value"] }], directives: [{ type: i3.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe }, viewProviders: [tuiAsOptionContent(null)], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiMultiSelectGroupComponent.prototype, "label", void 0);
 __decorate([
@@ -386,77 +390,114 @@ __decorate([
 __decorate([
     tuiPure
 ], TuiMultiSelectGroupComponent.prototype, "filter", null);
-TuiMultiSelectGroupComponent = __decorate([
-    Component({
-        selector: `tui-opt-group[tuiMultiSelectGroup]`,
-        template: "<ng-container *tuiLet=\"value$ | async as value\">\n    <button\n        *ngIf=\"label && !(empty$ | async)\"\n        tuiOption\n        [size]=\"size\"\n        [disabled]=\"!!(disabled$ | async)\"\n        (click)=\"onClick(value)\"\n    >\n        <tui-primitive-checkbox\n            class=\"t-checkbox\"\n            [size]=\"checkboxSize\"\n            [value]=\"value\"\n        ></tui-primitive-checkbox>\n        <span class=\"t-label\">{{ label }}</span>\n    </button>\n</ng-container>\n<ng-content></ng-content>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        viewProviders: [
-            {
-                provide: TUI_OPTION_CONTENT,
-                useValue: null,
-            },
-        ],
-        styles: [":host{display:flex;flex-direction:column}:host:before{content:''}.t-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--tui-font-text-xs);flex:1;color:var(--tui-text-02)}.t-checkbox{margin-right:.75rem}"]
-    }),
-    __param(0, Inject(TUI_DATA_LIST_HOST)),
-    __param(1, Inject(NgControl))
-], TuiMultiSelectGroupComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiMultiSelectGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `tui-opt-group[tuiMultiSelectGroup]`,
+                    templateUrl: `./multi-select-group.template.html`,
+                    styleUrls: [`./multi-select-group.style.less`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    viewProviders: [tuiAsOptionContent(null)],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DATA_LIST_HOST]
+                }] }, { type: i4.NgControl, decorators: [{
+                    type: Inject,
+                    args: [NgControl]
+                }] }]; }, propDecorators: { options: [{
+                type: ContentChildren,
+                args: [TuiOptionComponent]
+            }], label: [{
+                type: Input
+            }], empty$: [], disabled$: [], value$: [], items$: [], valueChanges$: [], filter: [] } });
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function hostFallbackFactory(control, host) {
-    return (host || {
-        handleOption: option => {
-            if (!control.control) {
-                return;
-            }
-            const value = control.value || [];
-            const index = value.indexOf(option);
-            control.control.setValue(index === -1
-                ? [...value, option]
-                : [...value.slice(0, index), ...value.slice(index + 1)]);
-        },
-    });
-}
 const TUI_MULTI_SELECT_OPTION = new PolymorpheusComponent(TuiMultiSelectOptionComponent);
-// TODO: 3.0 remove in ivy compilation
-const MULTI_SELECT_ACCESSOR = {
-    writeValue: EMPTY_FUNCTION,
-    registerOnChange: EMPTY_FUNCTION,
-    registerOnTouched: EMPTY_FUNCTION,
-};
-let TuiMultiSelectGroupDirective = class TuiMultiSelectGroupDirective {
-};
-TuiMultiSelectGroupDirective = __decorate([
-    Directive({
-        selector: `[tuiMultiSelectGroup]`,
-        providers: [
-            {
-                provide: TUI_OPTION_CONTENT,
-                useValue: TUI_MULTI_SELECT_OPTION,
-            },
-            {
-                provide: TUI_DATA_LIST_HOST,
-                deps: [
-                    NgControl,
-                    [new Optional(), forwardRef(() => TuiMultiSelectComponent)],
-                ],
-                useFactory: hostFallbackFactory,
+class TuiMultiSelectGroupDirective {
+}
+TuiMultiSelectGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiMultiSelectGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TuiMultiSelectGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]", providers: [
+        tuiAsOptionContent(TUI_MULTI_SELECT_OPTION),
+        {
+            provide: TUI_DATA_LIST_HOST,
+            deps: [
+                NgControl,
+                [new Optional(), forwardRef(() => TuiMultiSelectComponent)],
+            ],
+            useFactory: (control, host) => host || {
+                handleOption: option => {
+                    var _a;
+                    return (_a = control.control) === null || _a === void 0 ? void 0 : _a.setValue(tuiArrayToggle(control.value || [], option));
+                },
             },
-            {
-                provide: NG_VALUE_ACCESSOR,
-                multi: true,
-                useValue: MULTI_SELECT_ACCESSOR,
+        },
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useValue: {
+                writeValue: EMPTY_FUNCTION,
+                registerOnChange: EMPTY_FUNCTION,
+                registerOnTouched: EMPTY_FUNCTION,
             },
-        ],
-    })
-], TuiMultiSelectGroupDirective);
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiMultiSelectGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[tuiMultiSelectGroup]`,
+                    providers: [
+                        tuiAsOptionContent(TUI_MULTI_SELECT_OPTION),
+                        {
+                            provide: TUI_DATA_LIST_HOST,
+                            deps: [
+                                NgControl,
+                                [new Optional(), forwardRef(() => TuiMultiSelectComponent)],
+                            ],
+                            useFactory: (control, host) => host || {
+                                handleOption: option => {
+                                    var _a;
+                                    return (_a = control.control) === null || _a === void 0 ? void 0 : _a.setValue(tuiArrayToggle(control.value || [], option));
+                                },
+                            },
+                        },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useValue: {
+                                writeValue: EMPTY_FUNCTION,
+                                registerOnChange: EMPTY_FUNCTION,
+                                registerOnTouched: EMPTY_FUNCTION,
+                            },
+                        },
+                    ],
+                }]
+        }] });
 
-let TuiMultiSelectModule = class TuiMultiSelectModule {
-};
-TuiMultiSelectModule = __decorate([
-    NgModule({
-        imports: [
+class TuiMultiSelectModule {
+}
+TuiMultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiMultiSelectModule, declarations: [TuiMultiSelectComponent,
+        TuiMultiSelectGroupComponent,
+        TuiMultiSelectGroupDirective,
+        TuiHideSelectedPipe], imports: [CommonModule,
+        FormsModule,
+        PolymorpheusModule,
+        TuiPreventDefaultModule,
+        TuiActiveZoneModule,
+        TuiArrowModule,
+        TuiLetModule,
+        TuiMapperPipeModule,
+        TuiSvgModule,
+        TuiHostedDropdownModule,
+        TuiInputTagModule,
+        TuiMultiSelectOptionModule,
+        TuiPrimitiveCheckboxModule,
+        TuiDataListModule,
+        TuiTextfieldControllerModule], exports: [TuiMultiSelectComponent,
+        TuiMultiSelectGroupComponent,
+        TuiMultiSelectGroupDirective,
+        TuiHideSelectedPipe] });
+TuiMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiMultiSelectModule, imports: [[
             CommonModule,
             FormsModule,
             PolymorpheusModule,
@@ -465,32 +506,52 @@ TuiMultiSelectModule = __decorate([
             TuiArrowModule,
             TuiLetModule,
             TuiMapperPipeModule,
-            TuiHoveredModule,
             TuiSvgModule,
             TuiHostedDropdownModule,
             TuiInputTagModule,
             TuiMultiSelectOptionModule,
             TuiPrimitiveCheckboxModule,
             TuiDataListModule,
-        ],
-        declarations: [
-            TuiMultiSelectComponent,
-            TuiMultiSelectGroupComponent,
-            TuiMultiSelectGroupDirective,
-            TuiHideSelectedPipe,
-        ],
-        exports: [
-            TuiMultiSelectComponent,
-            TuiMultiSelectGroupComponent,
-            TuiMultiSelectGroupDirective,
-            TuiHideSelectedPipe,
-        ],
-    })
-], TuiMultiSelectModule);
+            TuiTextfieldControllerModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiMultiSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        PolymorpheusModule,
+                        TuiPreventDefaultModule,
+                        TuiActiveZoneModule,
+                        TuiArrowModule,
+                        TuiLetModule,
+                        TuiMapperPipeModule,
+                        TuiSvgModule,
+                        TuiHostedDropdownModule,
+                        TuiInputTagModule,
+                        TuiMultiSelectOptionModule,
+                        TuiPrimitiveCheckboxModule,
+                        TuiDataListModule,
+                        TuiTextfieldControllerModule,
+                    ],
+                    declarations: [
+                        TuiMultiSelectComponent,
+                        TuiMultiSelectGroupComponent,
+                        TuiMultiSelectGroupDirective,
+                        TuiHideSelectedPipe,
+                    ],
+                    exports: [
+                        TuiMultiSelectComponent,
+                        TuiMultiSelectGroupComponent,
+                        TuiMultiSelectGroupDirective,
+                        TuiHideSelectedPipe,
+                    ],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MULTI_SELECT_ACCESSOR, TUI_MULTI_SELECT_DEFAULT_OPTIONS, TUI_MULTI_SELECT_OPTION, TUI_MULTI_SELECT_OPTIONS, TuiHideSelectedPipe, TuiMultiSelectComponent, TuiMultiSelectGroupComponent, TuiMultiSelectGroupDirective, TuiMultiSelectModule, hostFallbackFactory, tuiMultiSelectOptionsProvider };
+export { TUI_MULTI_SELECT_DEFAULT_OPTIONS, TUI_MULTI_SELECT_OPTION, TUI_MULTI_SELECT_OPTIONS, TuiHideSelectedPipe, TuiMultiSelectComponent, TuiMultiSelectGroupComponent, TuiMultiSelectGroupDirective, TuiMultiSelectModule, tuiMultiSelectOptionsProvider };
 //# sourceMappingURL=taiga-ui-kit-components-multi-select.js.map