@taiga-ui/kit 3.0.0-rc.0 → 3.0.0-rc.1

package/bundles/taiga-ui-kit-components-multi-select.umd.js

@@ -498,17 +498,14 @@
             if (options.length !== 1) {
                 return;
             }
-            var index = value.indexOf(options[0]);
             event.preventDefault();
-            this.updateValue(index === -1
-                ? __spreadArray(__spreadArray([], __read(value)), [options[0]]) : __spreadArray(__spreadArray([], __read(value.slice(0, index))), __read(value.slice(index + 1))));
+            this.updateValue(i3.tuiArrayToggle(value, options[0]));
             this.updateSearch(null);
         };
         TuiMultiSelectComponent.prototype.onClick = function (_b) {
             var nativeFocusableElement = _b.nativeFocusableElement;
             var _a;
-            if (this.editable &&
-                this.interactive &&
+            if (this.interactive &&
                 nativeFocusableElement &&
                 i3.tuiIsNativeFocused(nativeFocusableElement)) {
                 (_a = this.hostedDropdown) === null || _a === void 0 ? void 0 : _a.updateOpen(!this.open);
@@ -546,24 +543,18 @@
         TuiMultiSelectComponent.prototype.focusInput = function (preventScroll) {
             if (preventScroll === void 0) { preventScroll = false; }
             if (this.nativeFocusableElement) {
-                i3.setNativeFocused(this.nativeFocusableElement, true, preventScroll);
+                this.nativeFocusableElement.focus({ preventScroll: preventScroll });
             }
         };
         return TuiMultiSelectComponent;
     }(i3.AbstractTuiMultipleControl));
     TuiMultiSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiMultiSelectComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i1.TuiSvgService }, { token: arrow.TUI_ARROW_MODE }, { token: tokens.TUI_ITEMS_HANDLERS }, { token: TUI_MULTI_SELECT_OPTIONS }, { token: i1.TUI_TEXTFIELD_WATCHED_CONTROLLER }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiMultiSelectComponent.ɵcmp = i0__namespace.ɵɵ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: [
-            {
-                provide: i3.TUI_FOCUSABLE_ITEM_ACCESSOR,
-                useExisting: i0.forwardRef(function () { return TuiMultiSelectComponent; }),
-            },
-            {
-                provide: i1.TUI_DATA_LIST_HOST,
-                useExisting: i0.forwardRef(function () { return TuiMultiSelectComponent; }),
-            },
-            providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER,
+            i3.tuiAsFocusableItemAccessor(TuiMultiSelectComponent),
+            i3.tuiAsControl(TuiMultiSelectComponent),
+            i1.tuiAsDataListHost(TuiMultiSelectComponent),
             i1.TEXTFIELD_CONTROLLER_PROVIDER,
-        ], queries: [{ propertyName: "accessor", first: true, predicate: i1.TUI_DATA_LIST_ACCESSOR, descendants: true }, { propertyName: "datalist", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "hostedDropdown", first: true, predicate: i1.TuiHostedDropdownComponent, descendants: true }, { propertyName: "input", first: true, predicate: i2.TuiInputTagComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, 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        tuiHostedDropdownHost\n        automation-id=\"tui-multi-select__input\"\n        class=\"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}.input{border-radius:inherit}:host:not(._editable):not(._readonly) .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__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i2__namespace.TuiInputTagComponent, selector: "tui-input-tag", inputs: ["allowSpaces", "separator", "search", "editable", "tagValidator", "expandable", "inputHidden", "uniqueTags", "disabledItemHandler", "pseudoFocused"], outputs: ["searchChange"] }], directives: [{ type: i3__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1__namespace.TuiHostedDropdownConnectorDirective, selector: "[tuiHostedDropdownHost]" }, { type: i1__namespace.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i3__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]" }], pipes: { "tuiMapper": i3__namespace.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "accessor", first: true, predicate: i1.TUI_DATA_LIST_ACCESSOR, descendants: true }, { propertyName: "datalist", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "hostedDropdown", first: true, predicate: i1.TuiHostedDropdownComponent, descendants: true }, { propertyName: "input", first: true, predicate: i2.TuiInputTagComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i2__namespace.TuiInputTagComponent, selector: "tui-input-tag", inputs: ["separator", "search", "editable", "tagValidator", "expandable", "inputHidden", "uniqueTags", "disabledItemHandler", "pseudoFocused"], outputs: ["searchChange"] }], directives: [{ type: i3__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1__namespace.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i3__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]" }], pipes: { "tuiMapper": i3__namespace.TuiMapperPipe }, viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i3.tuiDefaultProp()
     ], TuiMultiSelectComponent.prototype, "stringify", void 0);
@@ -596,17 +587,12 @@
                         styleUrls: ["./multi-select.style.less"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [
-                            {
-                                provide: i3.TUI_FOCUSABLE_ITEM_ACCESSOR,
-                                useExisting: i0.forwardRef(function () { return TuiMultiSelectComponent; }),
-                            },
-                            {
-                                provide: i1.TUI_DATA_LIST_HOST,
-                                useExisting: i0.forwardRef(function () { return TuiMultiSelectComponent; }),
-                            },
-                            providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER,
+                            i3.tuiAsFocusableItemAccessor(TuiMultiSelectComponent),
+                            i3.tuiAsControl(TuiMultiSelectComponent),
+                            i1.tuiAsDataListHost(TuiMultiSelectComponent),
                             i1.TEXTFIELD_CONTROLLER_PROVIDER,
                         ],
+                        viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER],
                     }]
             }], ctorParameters: function () {
             return [{ type: i4__namespace.NgControl, decorators: [{
@@ -731,14 +717,14 @@
         });
         Object.defineProperty(TuiMultiSelectGroupComponent.prototype, "checkboxSize", {
             get: function () {
-                return this.options.first && i1.sizeBigger(this.options.first.size) ? "l" : "m";
+                return this.options.first && i1.tuiSizeBigger(this.options.first.size) ? "l" : "m";
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(TuiMultiSelectGroupComponent.prototype, "empty$", {
             get: function () {
-                return i3.itemsQueryListObservable(this.options).pipe(operators.map(function (_b) {
+                return i3.tuiItemsQueryListObservable(this.options).pipe(operators.map(function (_b) {
                     var length = _b.length;
                     return !length;
                 }));
@@ -748,7 +734,7 @@
         });
         Object.defineProperty(TuiMultiSelectGroupComponent.prototype, "disabled$", {
             get: function () {
-                return i3.itemsQueryListObservable(this.options).pipe(operators.map(function (items) { return items.every(function (_b) {
+                return i3.tuiItemsQueryListObservable(this.options).pipe(operators.map(function (items) { return items.every(function (_b) {
                     var disabled = _b.disabled;
                     return disabled;
                 }); }));
@@ -792,7 +778,7 @@
         };
         Object.defineProperty(TuiMultiSelectGroupComponent.prototype, "values", {
             get: function () {
-                return this.filter(i3.getOriginalArrayFromQueryList(this.options));
+                return this.filter(i3.tuiGetOriginalArrayFromQueryList(this.options));
             },
             enumerable: false,
             configurable: true
@@ -806,10 +792,10 @@
         });
         Object.defineProperty(TuiMultiSelectGroupComponent.prototype, "items$", {
             get: function () {
-                return i3.itemsQueryListObservable(this.options).pipe(operators.map(function (options) { return options.map(function (_b) {
+                return i3.tuiItemsQueryListObservable(this.options).pipe(operators.map(function (options) { return options.map(function (_b) {
                     var value = _b.value;
                     return value;
-                }).filter(i3.isPresent); }));
+                }).filter(i3.tuiIsPresent); }));
             },
             enumerable: false,
             configurable: true
@@ -825,17 +811,12 @@
             return items.map(function (_b) {
                 var value = _b.value;
                 return value;
-            }).filter(i3.isPresent);
+            }).filter(i3.tuiIsPresent);
         };
         return TuiMultiSelectGroupComponent;
     }());
     TuiMultiSelectGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiMultiSelectGroupComponent, deps: [{ token: i1.TUI_DATA_LIST_HOST }, { token: i4.NgControl }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiMultiSelectGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: "label" }, queries: [{ propertyName: "options", predicate: i1.TuiOptionComponent }], ngImport: i0__namespace, 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__namespace.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i1__namespace.TuiPrimitiveCheckboxComponent, selector: "tui-primitive-checkbox", inputs: ["size", "disabled", "focused", "hovered", "pressed", "invalid", "value"] }], directives: [{ type: i3__namespace.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, viewProviders: [
-            {
-                provide: i1.TUI_OPTION_CONTENT,
-                useValue: null,
-            },
-        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiMultiSelectGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: "label" }, queries: [{ propertyName: "options", predicate: i1.TuiOptionComponent }], ngImport: i0__namespace, 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__namespace.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i1__namespace.TuiPrimitiveCheckboxComponent, selector: "tui-primitive-checkbox", inputs: ["size", "disabled", "focused", "hovered", "pressed", "invalid", "value"] }], directives: [{ type: i3__namespace.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, viewProviders: [i1.tuiAsOptionContent(null)], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i3.tuiDefaultProp()
     ], TuiMultiSelectGroupComponent.prototype, "label", void 0);
@@ -864,12 +845,7 @@
                         templateUrl: "./multi-select-group.template.html",
                         styleUrls: ["./multi-select-group.style.less"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        viewProviders: [
-                            {
-                                provide: i1.TUI_OPTION_CONTENT,
-                                useValue: null,
-                            },
-                        ],
+                        viewProviders: [i1.tuiAsOptionContent(null)],
                     }]
             }], ctorParameters: function () {
             return [{ type: undefined, decorators: [{
@@ -886,20 +862,6 @@
                     type: i0.Input
                 }], empty$: [], disabled$: [], value$: [], items$: [], valueChanges$: [], filter: [] } });
 
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    function hostFallbackFactory(control, host) {
-        return (host || {
-            handleOption: function (option) {
-                if (!control.control) {
-                    return;
-                }
-                var value = control.value || [];
-                var index = value.indexOf(option);
-                control.control.setValue(index === -1
-                    ? __spreadArray(__spreadArray([], __read(value)), [option]) : __spreadArray(__spreadArray([], __read(value.slice(0, index))), __read(value.slice(index + 1))));
-            },
-        });
-    }
     var TUI_MULTI_SELECT_OPTION = new i6.PolymorpheusComponent(multiSelectOption.TuiMultiSelectOptionComponent);
     var TuiMultiSelectGroupDirective = /** @class */ (function () {
         function TuiMultiSelectGroupDirective() {
@@ -908,17 +870,19 @@
     }());
     TuiMultiSelectGroupDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiMultiSelectGroupDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiMultiSelectGroupDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]", providers: [
-            {
-                provide: i1.TUI_OPTION_CONTENT,
-                useValue: TUI_MULTI_SELECT_OPTION,
-            },
+            i1.tuiAsOptionContent(TUI_MULTI_SELECT_OPTION),
             {
                 provide: i1.TUI_DATA_LIST_HOST,
                 deps: [
                     i4.NgControl,
                     [new i0.Optional(), i0.forwardRef(function () { return TuiMultiSelectComponent; })],
                 ],
-                useFactory: hostFallbackFactory,
+                useFactory: function (control, host) { return host || {
+                    handleOption: function (option) {
+                        var _a;
+                        return (_a = control.control) === null || _a === void 0 ? void 0 : _a.setValue(i3.tuiArrayToggle(control.value || [], option));
+                    },
+                }; },
             },
             {
                 provide: i4.NG_VALUE_ACCESSOR,
@@ -935,17 +899,19 @@
                 args: [{
                         selector: "[tuiMultiSelectGroup]",
                         providers: [
-                            {
-                                provide: i1.TUI_OPTION_CONTENT,
-                                useValue: TUI_MULTI_SELECT_OPTION,
-                            },
+                            i1.tuiAsOptionContent(TUI_MULTI_SELECT_OPTION),
                             {
                                 provide: i1.TUI_DATA_LIST_HOST,
                                 deps: [
                                     i4.NgControl,
                                     [new i0.Optional(), i0.forwardRef(function () { return TuiMultiSelectComponent; })],
                                 ],
-                                useFactory: hostFallbackFactory,
+                                useFactory: function (control, host) { return host || {
+                                    handleOption: function (option) {
+                                        var _a;
+                                        return (_a = control.control) === null || _a === void 0 ? void 0 : _a.setValue(i3.tuiArrayToggle(control.value || [], option));
+                                    },
+                                }; },
                             },
                             {
                                 provide: i4.NG_VALUE_ACCESSOR,
@@ -1051,7 +1017,6 @@
     exports.TuiMultiSelectGroupComponent = TuiMultiSelectGroupComponent;
     exports.TuiMultiSelectGroupDirective = TuiMultiSelectGroupDirective;
     exports.TuiMultiSelectModule = TuiMultiSelectModule;
-    exports.hostFallbackFactory = hostFallbackFactory;
     exports.tuiMultiSelectOptionsProvider = tuiMultiSelectOptionsProvider;
 
     Object.defineProperty(exports, '__esModule', { value: true });