@taiga-ui/kit 3.22.0 → 3.23.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/cdk'), require('@taiga-ui/kit/utils'), require('@angular/forms'), require('@taiga-ui/core'), require('@taiga-ui/kit/classes'), require('@taiga-ui/kit/components/arrow'), require('@taiga-ui/kit/components/input-tag'), require('@taiga-ui/kit/providers'), require('@taiga-ui/kit/tokens'), require('@angular/common'), require('@tinkoff/ng-polymorpheus'), require('@taiga-ui/kit/components/data-list-wrapper'), require('@taiga-ui/kit/components/multi-select-option'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/multi-select', ['exports', '@angular/core', '@taiga-ui/cdk', '@taiga-ui/kit/utils', '@angular/forms', '@taiga-ui/core', '@taiga-ui/kit/classes', '@taiga-ui/kit/components/arrow', '@taiga-ui/kit/components/input-tag', '@taiga-ui/kit/providers', '@taiga-ui/kit/tokens', '@angular/common', '@tinkoff/ng-polymorpheus', '@taiga-ui/kit/components/data-list-wrapper', '@taiga-ui/kit/components/multi-select-option', 'rxjs', 'rxjs/operators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"].kit = global["taiga-ui"].kit || {}, global["taiga-ui"].kit.components = global["taiga-ui"].kit.components || {}, global["taiga-ui"].kit.components["multi-select"] = {}), global.ng.core, global.i3, global["taiga-ui"].kit.utils, global.ng.forms, global.i1, global["taiga-ui"].kit.classes, global["taiga-ui"].kit.components.arrow, global["taiga-ui"].kit.components["input-tag"], global["taiga-ui"].kit.providers, global["taiga-ui"].kit.tokens, global.ng.common, global.i6, global["taiga-ui"].kit.components["data-list-wrapper"], global["taiga-ui"].kit.components["multi-select-option"], global.rxjs, global.rxjs.operators));
-})(this, (function (exports, i0, i3, utils, i4, i1, classes, arrow, i2, providers, tokens, i2$1, i6, i1$1, multiSelectOption, rxjs, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/cdk'), require('@taiga-ui/kit/utils'), require('@angular/forms'), require('@taiga-ui/core'), require('@taiga-ui/kit/classes'), require('@taiga-ui/kit/components/arrow'), require('@taiga-ui/kit/components/input-tag'), require('@taiga-ui/kit/providers'), require('@taiga-ui/kit/tokens'), require('@taiga-ui/kit/abstract'), require('@angular/common'), require('@tinkoff/ng-polymorpheus'), require('@taiga-ui/kit/components/data-list-wrapper'), require('@taiga-ui/kit/components/multi-select-option'), require('rxjs'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/multi-select', ['exports', '@angular/core', '@taiga-ui/cdk', '@taiga-ui/kit/utils', '@angular/forms', '@taiga-ui/core', '@taiga-ui/kit/classes', '@taiga-ui/kit/components/arrow', '@taiga-ui/kit/components/input-tag', '@taiga-ui/kit/providers', '@taiga-ui/kit/tokens', '@taiga-ui/kit/abstract', '@angular/common', '@tinkoff/ng-polymorpheus', '@taiga-ui/kit/components/data-list-wrapper', '@taiga-ui/kit/components/multi-select-option', 'rxjs', 'rxjs/operators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"].kit = global["taiga-ui"].kit || {}, global["taiga-ui"].kit.components = global["taiga-ui"].kit.components || {}, global["taiga-ui"].kit.components["multi-select"] = {}), global.ng.core, global.i3, global["taiga-ui"].kit.utils, global.ng.forms, global.i1, global["taiga-ui"].kit.classes, global["taiga-ui"].kit.components.arrow, global["taiga-ui"].kit.components["input-tag"], global["taiga-ui"].kit.providers, global["taiga-ui"].kit.tokens, global["taiga-ui"].kit.abstract, global.ng.common, global.i6, global["taiga-ui"].kit.components["data-list-wrapper"], global["taiga-ui"].kit.components["multi-select-option"], global.rxjs, global.rxjs.operators));
+})(this, (function (exports, i0, i3, utils, i4, i1, classes, arrow, i2, providers, tokens, abstract, i2$1, i6, i1$1, multiSelectOption, rxjs, operators) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -364,89 +364,24 @@
         useValue: Object.assign(Object.assign({}, TUI_MULTI_SELECT_DEFAULT_OPTIONS), options),
     }); };
 
-    var TuiMultiSelectDirective = /** @class */ (function (_super) {
-        __extends(TuiMultiSelectDirective, _super);
-        function TuiMultiSelectDirective() {
+    var AbstractTuiNativeMultiSelect = /** @class */ (function (_super) {
+        __extends(AbstractTuiNativeMultiSelect, _super);
+        function AbstractTuiNativeMultiSelect() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.disableItemHandler = function (item) { return _this.host.disabledItemHandler(item); };
+            _this.selectedMapper = function (option, value) { return value.includes(option); };
             return _this;
         }
-        Object.defineProperty(TuiMultiSelectDirective.prototype, "readOnly", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TuiMultiSelectDirective.prototype.onValueChange = function (_) {
-            //
-        };
-        TuiMultiSelectDirective.prototype.onSelectionChange = function (value) {
-            this.host.onValueChange(value);
-        };
-        return TuiMultiSelectDirective;
-    }(i1.AbstractTuiTextfieldHost));
-    TuiMultiSelectDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMultiSelectDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiMultiSelectDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiMultiSelectDirective, selector: "tui-multi-select", providers: [i1.tuiAsTextfieldHost(TuiMultiSelectDirective)], usesInheritance: true, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMultiSelectDirective, decorators: [{
-                type: i0.Directive,
-                args: [{
-                        selector: 'tui-multi-select',
-                        providers: [i1.tuiAsTextfieldHost(TuiMultiSelectDirective)],
-                    }]
-            }] });
-
-    var AbstractTuiNativeMultiSelect = /** @class */ (function () {
-        function AbstractTuiNativeMultiSelect(host, control, elementRef, idService, cdr) {
-            this.host = host;
-            this.control = control;
-            this.elementRef = elementRef;
-            this.idService = idService;
-            this.cdr = cdr;
-            this.datalist = null;
-            this.selectedMapper = function (option, value) { return value.includes(option); };
-        }
-        Object.defineProperty(AbstractTuiNativeMultiSelect.prototype, "id", {
-            get: function () {
-                return this.elementRef.nativeElement.id || this.idService.generate();
-            },
-            enumerable: false,
-            configurable: true
-        });
         AbstractTuiNativeMultiSelect.prototype.onValueChange = function () {
             var selectedOptions = this.elementRef.nativeElement.selectedOptions;
             this.host.onSelectionChange(Array.from(selectedOptions).map(function (option) { return option.value; }));
         };
         return AbstractTuiNativeMultiSelect;
-    }());
-    AbstractTuiNativeMultiSelect.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AbstractTuiNativeMultiSelect, deps: [{ token: i1.TUI_TEXTFIELD_HOST }, { token: i3.AbstractTuiControl }, { token: i0.ElementRef }, { token: i3.TuiIdService }, { token: i0.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    AbstractTuiNativeMultiSelect.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AbstractTuiNativeMultiSelect, host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "datalist", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace });
+    }(abstract.AbstractTuiNativeSelect));
+    AbstractTuiNativeMultiSelect.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AbstractTuiNativeMultiSelect, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AbstractTuiNativeMultiSelect.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AbstractTuiNativeMultiSelect, usesInheritance: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AbstractTuiNativeMultiSelect, decorators: [{
                 type: i0.Directive
-            }], ctorParameters: function () {
-            return [{ type: TuiMultiSelectDirective, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.TUI_TEXTFIELD_HOST]
-                        }] }, { type: i3__namespace.AbstractTuiControl, decorators: [{
-                            type: i0.Inject,
-                            args: [i3.AbstractTuiControl]
-                        }] }, { type: i0__namespace.ElementRef, decorators: [{
-                            type: i0.Inject,
-                            args: [i0.ElementRef]
-                        }] }, { type: i3__namespace.TuiIdService, decorators: [{
-                            type: i0.Inject,
-                            args: [i3.TuiIdService]
-                        }] }, { type: i0__namespace.ChangeDetectorRef, decorators: [{
-                            type: i0.Inject,
-                            args: [i0.ChangeDetectorRef]
-                        }] }];
-        }, propDecorators: { datalist: [{
-                    type: i0.ViewChild,
-                    args: [i1.TuiDataListDirective, { read: i0.TemplateRef, static: true }]
-                }], id: [{
-                    type: i0.HostBinding,
-                    args: ["id"]
-                }] } });
+            }] });
 
     var TuiMultiSelectComponent = /** @class */ (function (_super) {
         __extends(TuiMultiSelectComponent, _super);
@@ -465,6 +400,7 @@
             _this.editable = true;
             _this.disabledItemHandler = _this.itemsHandlers.disabledItemHandler;
             _this.valueContent = _this.options.valueContent;
+            _this.tagValidator = i3.ALWAYS_TRUE_HANDLER;
             _this.rows = Infinity;
             _this.searchChange = new i0.EventEmitter();
             _this.datalist = '';
@@ -484,7 +420,7 @@
         });
         Object.defineProperty(TuiMultiSelectComponent.prototype, "arrow", {
             get: function () {
-                return !this.interactive ? this.arrowMode.disabled : this.arrowMode.interactive;
+                return this.interactive ? this.arrowMode.interactive : this.arrowMode.disabled;
             },
             enumerable: false,
             configurable: true
@@ -560,7 +496,8 @@
         TuiMultiSelectComponent.prototype.handleOption = function (option) {
             var _c = this, value = _c.value, identityMatcher = _c.identityMatcher;
             var index = value.findIndex(function (item) { return identityMatcher(item, option); });
-            this.updateValue(index === -1 ? __spreadArray(__spreadArray([], __read(value)), [option]) : value.filter(function (_, i) { return i !== index; }));
+            this.value =
+                index === -1 ? __spreadArray(__spreadArray([], __read(value)), [option]) : value.filter(function (_, i) { return i !== index; });
             this.updateSearch(null);
         };
         TuiMultiSelectComponent.prototype.onEnter = function (event) {
@@ -570,7 +507,7 @@
                 return;
             }
             event.preventDefault();
-            this.updateValue(i3.tuiArrayToggle(value, options[0]));
+            this.value = i3.tuiArrayToggle(value, options[0]);
             this.updateSearch(null);
         };
         TuiMultiSelectComponent.prototype.onClick = function (_c) {
@@ -583,13 +520,13 @@
             }
         };
         TuiMultiSelectComponent.prototype.onInput = function (value) {
-            this.updateValue(value.map(function (_c) {
+            this.value = value.map(function (_c) {
                 var item = _c.item;
                 return item;
-            }));
+            });
         };
         TuiMultiSelectComponent.prototype.onValueChange = function (value) {
-            this.updateValue(value);
+            this.value = value;
         };
         TuiMultiSelectComponent.prototype.onSearch = function (search) {
             this.updateSearch(search);
@@ -611,12 +548,12 @@
         return TuiMultiSelectComponent;
     }(i3.AbstractTuiMultipleControl));
     TuiMultiSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMultiSelectComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: arrow.TUI_ARROW_MODE }, { token: tokens.TUI_ITEMS_HANDLERS }, { token: TUI_MULTI_SELECT_OPTIONS }, { token: i1.TUI_TEXTFIELD_WATCHED_CONTROLLER }, { token: i3.TUI_IS_MOBILE }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiMultiSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiMultiSelectComponent, selector: "tui-multi-select", inputs: { stringify: "stringify", identityMatcher: "identityMatcher", expandable: "expandable", search: "search", placeholder: "placeholder", editable: "editable", disabledItemHandler: "disabledItemHandler", valueContent: "valueContent", rows: "rows" }, outputs: { searchChange: "searchChange" }, host: { properties: { "class._editable": "this.editable", "attr.data-size": "this.size" } }, providers: [
+    TuiMultiSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiMultiSelectComponent, selector: "tui-multi-select", inputs: { stringify: "stringify", identityMatcher: "identityMatcher", expandable: "expandable", search: "search", placeholder: "placeholder", editable: "editable", disabledItemHandler: "disabledItemHandler", valueContent: "valueContent", tagValidator: "tagValidator", rows: "rows" }, outputs: { searchChange: "searchChange" }, host: { properties: { "class._editable": "this.editable", "attr.data-size": "this.size" } }, providers: [
             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: "nativeSelect", first: true, predicate: AbstractTuiNativeMultiSelect, descendants: true, static: 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 && !nativeDropdownMode\"\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]=\"icon\"\n        [disabled]=\"disabled\"\n        [disabledItemHandler]=\"disabledItemHandler | tuiMapper : disabledItemHandlerWrapper\"\n        [readOnly]=\"readOnly\"\n        [inputHidden]=\"!editable\"\n        [pseudoHover]=\"pseudoHover\"\n        [placeholder]=\"placeholder\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoInvalid]=\"computedInvalid\"\n        [editable]=\"false\"\n        [expandable]=\"expandable\"\n        [removable]=\"!nativeDropdownMode\"\n        [search]=\"searchOrSpace\"\n        [rows]=\"rows\"\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        <ng-template #select>\n            <ng-content\n                *ngIf=\"isMobile\"\n                select=\"select\"\n            ></ng-content>\n        </ng-template>\n\n        <ng-container\n            *ngTemplateOutlet=\"select\"\n            ngProjectAs=\"select\"\n        ></ng-container>\n    </tui-input-tag>\n\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        <ng-template #icon>\n            <div\n                *ngIf=\"arrow\"\n                tuiWrapper\n                appearance=\"icon\"\n                automation-id=\"tui-multi-select__arrow\"\n                tuiPreventDefault=\"mousedown\"\n                class=\"t-arrow\"\n                [class.t-arrow_native-dropdown]=\"nativeDropdownMode\"\n            >\n                <ng-container *polymorpheusOutlet=\"arrow as text\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        </ng-template>\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 0 .5625rem 1rem;overflow:hidden}.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 0 0 .75rem;font-size:.8125rem}.t-arrow{pointer-events:auto;cursor:pointer}.t-arrow_native-dropdown{pointer-events:none}\n"], components: [{ type: i1__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i2__namespace.TuiInputTagComponent, selector: "tui-input-tag", inputs: ["separator", "search", "editable", "tagValidator", "expandable", "rows", "inputHidden", "uniqueTags", "maxLength", "placeholder", "removable", "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: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i3__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }], pipes: { "tuiMapper": i3__namespace.TuiMapperPipe }, viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "accessor", first: true, predicate: i1.TUI_DATA_LIST_ACCESSOR, descendants: true }, { propertyName: "nativeSelect", first: true, predicate: AbstractTuiNativeMultiSelect, descendants: true, static: 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 && !nativeDropdownMode\"\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]=\"arrow ? icon : ''\"\n        [disabled]=\"disabled\"\n        [disabledItemHandler]=\"disabledItemHandler | tuiMapper : disabledItemHandlerWrapper\"\n        [readOnly]=\"readOnly\"\n        [inputHidden]=\"!editable\"\n        [pseudoHover]=\"pseudoHover\"\n        [placeholder]=\"placeholder\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoInvalid]=\"computedInvalid\"\n        [editable]=\"false\"\n        [expandable]=\"expandable\"\n        [removable]=\"!nativeDropdownMode\"\n        [search]=\"searchOrSpace\"\n        [tagValidator]=\"tagValidator | tuiMapper : disabledItemHandlerWrapper\"\n        [rows]=\"rows\"\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        <ng-template #select>\n            <ng-content\n                *ngIf=\"isMobile\"\n                select=\"select\"\n            ></ng-content>\n        </ng-template>\n\n        <ng-container\n            *ngTemplateOutlet=\"select\"\n            ngProjectAs=\"select\"\n        ></ng-container>\n    </tui-input-tag>\n\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        <ng-template #icon>\n            <div\n                tuiWrapper\n                appearance=\"icon\"\n                automation-id=\"tui-multi-select__arrow\"\n                tuiPreventDefault=\"mousedown\"\n                class=\"t-arrow\"\n                [class.t-arrow_native-dropdown]=\"nativeDropdownMode\"\n            >\n                <ng-container *polymorpheusOutlet=\"arrow as text\">\n                    {{ text }}\n                </ng-container>\n            </div>\n        </ng-template>\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 0 .5625rem 1rem;overflow:hidden}.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 0 0 .75rem;font-size:.8125rem}.t-arrow{pointer-events:auto;cursor:pointer}.t-arrow_native-dropdown{pointer-events:none}\n"], components: [{ type: i1__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i2__namespace.TuiInputTagComponent, selector: "tui-input-tag", inputs: ["separator", "search", "editable", "tagValidator", "expandable", "rows", "inputHidden", "uniqueTags", "maxLength", "placeholder", "removable", "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: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i1__namespace.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i3__namespace.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["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);
@@ -641,6 +578,9 @@
     __decorate([
         i3.tuiDefaultProp()
     ], TuiMultiSelectComponent.prototype, "valueContent", void 0);
+    __decorate([
+        i3.tuiDefaultProp()
+    ], TuiMultiSelectComponent.prototype, "tagValidator", void 0);
     __decorate([
         i3.tuiPure
     ], TuiMultiSelectComponent.prototype, "getStringifier", null);
@@ -717,6 +657,8 @@
                     type: i0.Input
                 }], valueContent: [{
                     type: i0.Input
+                }], tagValidator: [{
+                    type: i0.Input
                 }], rows: [{
                     type: i0.Input
                 }], searchChange: [{
@@ -772,6 +714,36 @@
                         }] }];
         }, propDecorators: { filter2d: [], filter: [] } });
 
+    var TuiMultiSelectDirective = /** @class */ (function (_super) {
+        __extends(TuiMultiSelectDirective, _super);
+        function TuiMultiSelectDirective() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.disableItemHandler = function (item) { return _this.host.disabledItemHandler(item); };
+            return _this;
+        }
+        Object.defineProperty(TuiMultiSelectDirective.prototype, "readOnly", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TuiMultiSelectDirective.prototype.onValueChange = function () { };
+        TuiMultiSelectDirective.prototype.onSelectionChange = function (value) {
+            this.host.onValueChange(value);
+        };
+        return TuiMultiSelectDirective;
+    }(i1.AbstractTuiTextfieldHost));
+    TuiMultiSelectDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMultiSelectDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiMultiSelectDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiMultiSelectDirective, selector: "tui-multi-select", providers: [i1.tuiAsTextfieldHost(TuiMultiSelectDirective)], usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMultiSelectDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: 'tui-multi-select',
+                        providers: [i1.tuiAsTextfieldHost(TuiMultiSelectDirective)],
+                    }]
+            }] });
+
     var TuiMultiSelectGroupComponent = /** @class */ (function () {
         function TuiMultiSelectGroupComponent(multiSelectTexts$, host, control) {
             this.multiSelectTexts$ = multiSelectTexts$;
@@ -1018,7 +990,7 @@
                 provide: AbstractTuiNativeMultiSelect,
                 useExisting: TuiNativeMultiSelectComponent,
             },
-        ], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"control.control?.valueChanges | async\"></ng-container>\n\n<tui-data-list-wrapper\n    *tuiDataList\n    [items]=\"items\"\n    [disabledItemHandler]=\"host.disableItemHandler\"\n></tui-data-list-wrapper>\n<option\n    *ngFor=\"let option of items\"\n    [selected]=\"option | tuiMapper : selectedMapper : host.value\"\n    [value]=\"option\"\n    [disabled]=\"host.disableItemHandler(option)\"\n>\n    {{ option }}\n</option>\n", styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}\n"], components: [{ type: i1__namespace$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "async": i2__namespace$1.AsyncPipe, "tuiMapper": i3__namespace.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"control.control?.valueChanges | async\"></ng-container>\n\n<tui-data-list-wrapper\n    *tuiDataList\n    tuiMultiSelectGroup\n    [items]=\"items\"\n    [disabledItemHandler]=\"disabledItemHandler || host.disableItemHandler\"\n></tui-data-list-wrapper>\n<option\n    *ngFor=\"let option of items\"\n    [selected]=\"option | tuiMapper : selectedMapper : host.value\"\n    [value]=\"option\"\n    [disabled]=\"disabledItemHandler ? disabledItemHandler(option) : host.disableItemHandler(option)\"\n>\n    {{ option }}\n</option>\n", styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}\n"], components: [{ type: i1__namespace$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "async": i2__namespace$1.AsyncPipe, "tuiMapper": i3__namespace.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeMultiSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1079,7 +1051,7 @@
                 provide: AbstractTuiNativeMultiSelect,
                 useExisting: TuiNativeMultiSelectGroupComponent,
             },
-        ], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"control.control?.valueChanges | async\"></ng-container>\n\n<tui-data-list-wrapper\n    *tuiDataList\n    [items]=\"items\"\n    [labels]=\"labels\"\n    [disabledItemHandler]=\"host.disableItemHandler\"\n></tui-data-list-wrapper>\n<optgroup\n    *ngFor=\"let group of items; let index = index\"\n    [label]=\"labels[index]\"\n>\n    <option\n        *ngFor=\"let option of group\"\n        [selected]=\"option | tuiMapper : selectedMapper : host.value\"\n        [value]=\"option\"\n        [disabled]=\"host.disableItemHandler(option)\"\n    >\n        {{ option }}\n    </option>\n</optgroup>\n", styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}\n"], components: [{ type: i1__namespace$1.TuiDataListGroupWrapperComponent, selector: "tui-data-list-wrapper[labels]", inputs: ["items", "labels"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "async": i2__namespace$1.AsyncPipe, "tuiMapper": i3__namespace.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"control.control?.valueChanges | async\"></ng-container>\n\n<tui-data-list-wrapper\n    *tuiDataList\n    tuiMultiSelectGroup\n    [items]=\"items\"\n    [labels]=\"labels\"\n    [disabledItemHandler]=\"disabledItemHandler || host.disableItemHandler\"\n></tui-data-list-wrapper>\n<optgroup\n    *ngFor=\"let group of items; let index = index\"\n    [label]=\"labels[index]\"\n>\n    <option\n        *ngFor=\"let option of group\"\n        [selected]=\"option | tuiMapper : selectedMapper : host.value\"\n        [value]=\"option\"\n        [disabled]=\"disabledItemHandler ? disabledItemHandler(option) : host.disableItemHandler(option)\"\n    >\n        {{ option }}\n    </option>\n</optgroup>\n", styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}\n"], components: [{ type: i1__namespace$1.TuiDataListGroupWrapperComponent, selector: "tui-data-list-wrapper[labels]", inputs: ["items", "labels"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "async": i2__namespace$1.AsyncPipe, "tuiMapper": i3__namespace.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeMultiSelectGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{