@taiga-ui/kit 3.21.0 → 3.22.0-dev.main-a08b721

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/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/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["multi-select-option"], global.rxjs, global.rxjs.operators));
-})(this, (function (exports, i0, i3, utils, i4, i1, classes, arrow, i2, providers, tokens, i3$1, i6, 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('@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';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -27,8 +27,9 @@
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -363,14 +364,99 @@
         useValue: Object.assign(Object.assign({}, TUI_MULTI_SELECT_DEFAULT_OPTIONS), options),
     }); };
 
+    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 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 });
+    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);
-        function TuiMultiSelectComponent(control, changeDetectorRef, arrowMode, itemsHandlers, options, controller) {
+        function TuiMultiSelectComponent(control, changeDetectorRef, arrowMode, itemsHandlers, options, controller, isMobile) {
             var _this = _super.call(this, control, changeDetectorRef) || this;
             _this.arrowMode = arrowMode;
             _this.itemsHandlers = itemsHandlers;
             _this.options = options;
             _this.controller = controller;
+            _this.isMobile = isMobile;
             _this.stringify = _this.itemsHandlers.stringify;
             _this.identityMatcher = _this.itemsHandlers.identityMatcher;
             _this.expandable = _this.options.expandable;
@@ -419,6 +505,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TuiMultiSelectComponent.prototype, "nativeDropdownMode", {
+            get: function () {
+                return !!this.nativeSelect && this.isMobile;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(TuiMultiSelectComponent.prototype, "computedValue", {
             get: function () {
                 return this.computedGroup ? i3.EMPTY_ARRAY : this.value;
@@ -495,8 +588,10 @@
                 return item;
             }));
         };
+        TuiMultiSelectComponent.prototype.onValueChange = function (value) {
+            this.updateValue(value);
+        };
         TuiMultiSelectComponent.prototype.onSearch = function (search) {
-            this.open = true;
             this.updateSearch(search);
         };
         TuiMultiSelectComponent.prototype.onActiveZone = function (active) {
@@ -515,13 +610,13 @@
         };
         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 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    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: [
             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        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        [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    </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        <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            >\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}\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", "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: 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]=\"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 });
     __decorate([
         i3.tuiDefaultProp()
     ], TuiMultiSelectComponent.prototype, "stringify", void 0);
@@ -587,10 +682,16 @@
                         }] }, { type: i1__namespace.TuiTextfieldController, decorators: [{
                             type: i0.Inject,
                             args: [i1.TUI_TEXTFIELD_WATCHED_CONTROLLER]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i3.TUI_IS_MOBILE]
                         }] }];
         }, propDecorators: { accessor: [{
                     type: i0.ContentChild,
                     args: [i1.TUI_DATA_LIST_ACCESSOR]
+                }], nativeSelect: [{
+                    type: i0.ContentChild,
+                    args: [AbstractTuiNativeMultiSelect, { static: true }]
                 }], hostedDropdown: [{
                     type: i0.ViewChild,
                     args: [i1.TuiHostedDropdownComponent]
@@ -781,7 +882,7 @@
         return TuiMultiSelectGroupComponent;
     }());
     TuiMultiSelectGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMultiSelectGroupComponent, deps: [{ token: tokens.TUI_MULTI_SELECT_TEXTS }, { 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.17", type: TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: "label" }, queries: [{ propertyName: "options", predicate: i1.TuiOptionComponent }], ngImport: i0__namespace, template: "<span\n    *tuiLet=\"value$ | async as value\"\n    class=\"t-wrapper\"\n>\n    <span class=\"t-label\">{{ label }}</span>\n    <button\n        *ngIf=\"label && !(empty$ | async)\"\n        tuiLink\n        type=\"button\"\n        class=\"t-button\"\n        [disabled]=\"!!(disabled$ | async)\"\n        (click)=\"onClick(value)\"\n    >\n        {{ (multiSelectTexts$ | async)?.[value ? 'none' : 'all'] }}\n    </button>\n</span>\n<ng-content></ng-content>\n", styles: [":host:before{display:none}.t-wrapper{display:flex;align-items:flex-start}.t-label:not(:empty){flex:1;padding:.75rem 1rem .25rem}.t-button{margin:.75rem 1rem 0 auto;line-height:1rem}\n"], components: [{ type: i1__namespace.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], 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 }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiMultiSelectGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: "label" }, queries: [{ propertyName: "options", predicate: i1.TuiOptionComponent }], ngImport: i0__namespace, template: "<span\n    *tuiLet=\"value$ | async as value\"\n    class=\"t-wrapper\"\n>\n    <span class=\"t-label\">{{ label }}</span>\n    <button\n        *ngIf=\"label && !(empty$ | async)\"\n        tuiLink\n        type=\"button\"\n        class=\"t-button\"\n        [disabled]=\"!!(disabled$ | async)\"\n        (click)=\"onClick(value)\"\n    >\n        {{ (multiSelectTexts$ | async)?.[value ? 'none' : 'all'] }}\n    </button>\n</span>\n<ng-content></ng-content>\n", styles: [":host:before{display:none}.t-wrapper{display:flex;align-items:flex-start}.t-label:not(:empty){flex:1;padding:.75rem 1rem .25rem}.t-button{margin:.75rem 1rem 0 auto}\n"], components: [{ type: i1__namespace.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i3__namespace.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i3.tuiDefaultProp()
     ], TuiMultiSelectGroupComponent.prototype, "label", void 0);
@@ -893,6 +994,129 @@
                     }]
             }] });
 
+    var TuiNativeMultiSelectComponent = /** @class */ (function (_super) {
+        __extends(TuiNativeMultiSelectComponent, _super);
+        function TuiNativeMultiSelectComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.items = [];
+            return _this;
+        }
+        return TuiNativeMultiSelectComponent;
+    }(AbstractTuiNativeMultiSelect));
+    TuiNativeMultiSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeMultiSelectComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiNativeMultiSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiNativeMultiSelectComponent, selector: "select[multiple][tuiSelect]:not([labels])", inputs: { items: "items" }, host: { listeners: { "change": "onValueChange()", "click.stop.silent": "0", "mousedown.stop.silent": "0" }, properties: { "attr.aria-invalid": "host.invalid", "disabled": "host.disabled || control.readOnly", "tabIndex": "host.focusable ? 0 : -1" } }, providers: [
+            i1.tuiAsDataList(TuiNativeMultiSelectComponent),
+            {
+                provide: i0.TemplateRef,
+                deps: [TuiNativeMultiSelectComponent],
+                useFactory: function (_a) {
+                    var datalist = _a.datalist;
+                    return datalist;
+                },
+            },
+            {
+                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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeMultiSelectComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'select[multiple][tuiSelect]:not([labels])',
+                        templateUrl: './native-multi-select.template.html',
+                        providers: [
+                            i1.tuiAsDataList(TuiNativeMultiSelectComponent),
+                            {
+                                provide: i0.TemplateRef,
+                                deps: [TuiNativeMultiSelectComponent],
+                                useFactory: function (_a) {
+                                    var datalist = _a.datalist;
+                                    return datalist;
+                                },
+                            },
+                            {
+                                provide: AbstractTuiNativeMultiSelect,
+                                useExisting: TuiNativeMultiSelectComponent,
+                            },
+                        ],
+                        host: {
+                            '[attr.aria-invalid]': 'host.invalid',
+                            '[disabled]': 'host.disabled || control.readOnly',
+                            '[tabIndex]': 'host.focusable ? 0 : -1',
+                            '(change)': 'onValueChange()',
+                            '(click.stop.silent)': '0',
+                            '(mousedown.stop.silent)': '0',
+                        },
+                        styleUrls: ['./native-multi-select.style.less'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], propDecorators: { items: [{
+                    type: i0.Input
+                }] } });
+
+    var TuiNativeMultiSelectGroupComponent = /** @class */ (function (_super) {
+        __extends(TuiNativeMultiSelectGroupComponent, _super);
+        function TuiNativeMultiSelectGroupComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.items = [];
+            _this.labels = [];
+            return _this;
+        }
+        return TuiNativeMultiSelectGroupComponent;
+    }(AbstractTuiNativeMultiSelect));
+    TuiNativeMultiSelectGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeMultiSelectGroupComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiNativeMultiSelectGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiNativeMultiSelectGroupComponent, selector: "select[multiple][tuiSelect][labels]", inputs: { items: "items", labels: "labels" }, host: { listeners: { "change": "onValueChange()", "click.stop.silent": "0", "mousedown.stop.silent": "0" }, properties: { "attr.aria-invalid": "host.invalid", "disabled": "host.disabled || control.readOnly", "tabIndex": "host.focusable ? 0 : -1" } }, providers: [
+            i1.tuiAsDataList(TuiNativeMultiSelectGroupComponent),
+            {
+                provide: i0.TemplateRef,
+                deps: [TuiNativeMultiSelectGroupComponent],
+                useFactory: function (_a) {
+                    var datalist = _a.datalist;
+                    return datalist;
+                },
+            },
+            {
+                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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiNativeMultiSelectGroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'select[multiple][tuiSelect][labels]',
+                        templateUrl: './native-multi-select-group.template.html',
+                        providers: [
+                            i1.tuiAsDataList(TuiNativeMultiSelectGroupComponent),
+                            {
+                                provide: i0.TemplateRef,
+                                deps: [TuiNativeMultiSelectGroupComponent],
+                                useFactory: function (_a) {
+                                    var datalist = _a.datalist;
+                                    return datalist;
+                                },
+                            },
+                            {
+                                provide: AbstractTuiNativeMultiSelect,
+                                useExisting: TuiNativeMultiSelectGroupComponent,
+                            },
+                        ],
+                        host: {
+                            '[attr.aria-invalid]': 'host.invalid',
+                            '[disabled]': 'host.disabled || control.readOnly',
+                            '[tabIndex]': 'host.focusable ? 0 : -1',
+                            '(change)': 'onValueChange()',
+                            '(click.stop.silent)': '0',
+                            '(mousedown.stop.silent)': '0',
+                        },
+                        styleUrls: ['./native-multi-select.style.less'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], propDecorators: { items: [{
+                    type: i0.Input
+                }], labels: [{
+                    type: i0.Input
+                }] } });
+
     var TuiMultiSelectModule = /** @class */ (function () {
         function TuiMultiSelectModule() {
         }
@@ -902,7 +1126,10 @@
     TuiMultiSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMultiSelectModule, declarations: [TuiMultiSelectComponent,
             TuiMultiSelectGroupComponent,
             TuiMultiSelectGroupDirective,
-            TuiHideSelectedPipe], imports: [i3$1.CommonModule,
+            TuiHideSelectedPipe,
+            TuiNativeMultiSelectComponent,
+            TuiNativeMultiSelectGroupComponent,
+            TuiMultiSelectDirective], imports: [i2$1.CommonModule,
             i4.FormsModule,
             i6.PolymorpheusModule,
             i1.TuiWrapperModule,
@@ -915,14 +1142,19 @@
             i1.TuiHostedDropdownModule,
             i2.TuiInputTagModule,
             multiSelectOption.TuiMultiSelectOptionModule,
+            i1$1.TuiDataListWrapperModule,
+            i3.TuiMapperPipeModule,
             i1.TuiLinkModule,
             i1.TuiDataListModule,
             i1.TuiTextfieldControllerModule], exports: [TuiMultiSelectComponent,
             TuiMultiSelectGroupComponent,
             TuiMultiSelectGroupDirective,
-            TuiHideSelectedPipe] });
+            TuiHideSelectedPipe,
+            TuiMultiSelectDirective,
+            TuiNativeMultiSelectComponent,
+            TuiNativeMultiSelectGroupComponent] });
     TuiMultiSelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiMultiSelectModule, imports: [[
-                i3$1.CommonModule,
+                i2$1.CommonModule,
                 i4.FormsModule,
                 i6.PolymorpheusModule,
                 i1.TuiWrapperModule,
@@ -935,6 +1167,8 @@
                 i1.TuiHostedDropdownModule,
                 i2.TuiInputTagModule,
                 multiSelectOption.TuiMultiSelectOptionModule,
+                i1$1.TuiDataListWrapperModule,
+                i3.TuiMapperPipeModule,
                 i1.TuiLinkModule,
                 i1.TuiDataListModule,
                 i1.TuiTextfieldControllerModule,
@@ -943,7 +1177,7 @@
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i3$1.CommonModule,
+                            i2$1.CommonModule,
                             i4.FormsModule,
                             i6.PolymorpheusModule,
                             i1.TuiWrapperModule,
@@ -956,6 +1190,8 @@
                             i1.TuiHostedDropdownModule,
                             i2.TuiInputTagModule,
                             multiSelectOption.TuiMultiSelectOptionModule,
+                            i1$1.TuiDataListWrapperModule,
+                            i3.TuiMapperPipeModule,
                             i1.TuiLinkModule,
                             i1.TuiDataListModule,
                             i1.TuiTextfieldControllerModule,
@@ -965,12 +1201,18 @@
                             TuiMultiSelectGroupComponent,
                             TuiMultiSelectGroupDirective,
                             TuiHideSelectedPipe,
+                            TuiNativeMultiSelectComponent,
+                            TuiNativeMultiSelectGroupComponent,
+                            TuiMultiSelectDirective,
                         ],
                         exports: [
                             TuiMultiSelectComponent,
                             TuiMultiSelectGroupComponent,
                             TuiMultiSelectGroupDirective,
                             TuiHideSelectedPipe,
+                            TuiMultiSelectDirective,
+                            TuiNativeMultiSelectComponent,
+                            TuiNativeMultiSelectGroupComponent,
                         ],
                     }]
             }] });
@@ -979,14 +1221,18 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.AbstractTuiNativeMultiSelect = AbstractTuiNativeMultiSelect;
     exports.TUI_MULTI_SELECT_DEFAULT_OPTIONS = TUI_MULTI_SELECT_DEFAULT_OPTIONS;
     exports.TUI_MULTI_SELECT_OPTION = TUI_MULTI_SELECT_OPTION;
     exports.TUI_MULTI_SELECT_OPTIONS = TUI_MULTI_SELECT_OPTIONS;
     exports.TuiHideSelectedPipe = TuiHideSelectedPipe;
     exports.TuiMultiSelectComponent = TuiMultiSelectComponent;
+    exports.TuiMultiSelectDirective = TuiMultiSelectDirective;
     exports.TuiMultiSelectGroupComponent = TuiMultiSelectGroupComponent;
     exports.TuiMultiSelectGroupDirective = TuiMultiSelectGroupDirective;
     exports.TuiMultiSelectModule = TuiMultiSelectModule;
+    exports.TuiNativeMultiSelectComponent = TuiNativeMultiSelectComponent;
+    exports.TuiNativeMultiSelectGroupComponent = TuiNativeMultiSelectGroupComponent;
     exports.tuiMultiSelectOptionsProvider = tuiMultiSelectOptionsProvider;
 
     Object.defineProperty(exports, '__esModule', { value: true });