@taiga-ui/kit 3.21.0 → 3.22.0

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

@@ -1,23 +1,25 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, ChangeDetectorRef, TemplateRef, Component, ChangeDetectionStrategy, Optional, Self, Inject, ContentChild, ViewChild, Input, HostBinding, Output, Pipe, ContentChildren, forwardRef, Directive, NgModule } from '@angular/core';
+import { InjectionToken, Directive, ElementRef, ChangeDetectorRef, TemplateRef, Inject, ViewChild, HostBinding, EventEmitter, Component, ChangeDetectionStrategy, Optional, Self, ContentChild, Input, Output, Pipe, ContentChildren, forwardRef, NgModule } from '@angular/core';
 import * as i3 from '@taiga-ui/cdk';
-import { AbstractTuiMultipleControl, EMPTY_ARRAY, tuiIsString, tuiArrayToggle, tuiIsNativeFocused, tuiAsFocusableItemAccessor, tuiAsControl, tuiDefaultProp, tuiPure, EMPTY_QUERY, tuiQueryListChanges, tuiGetOriginalArrayFromQueryList, TUI_DEFAULT_IDENTITY_MATCHER, tuiIsPresent, tuiControlValue, EMPTY_FUNCTION, TuiPreventDefaultModule, TuiActiveZoneModule, TuiLetModule, TuiMapperPipeModule } from '@taiga-ui/cdk';
+import { AbstractTuiControl, TuiIdService, AbstractTuiMultipleControl, EMPTY_ARRAY, tuiIsString, tuiArrayToggle, tuiIsNativeFocused, TUI_IS_MOBILE, tuiAsFocusableItemAccessor, tuiAsControl, tuiDefaultProp, tuiPure, EMPTY_QUERY, tuiQueryListChanges, tuiGetOriginalArrayFromQueryList, TUI_DEFAULT_IDENTITY_MATCHER, tuiIsPresent, tuiControlValue, EMPTY_FUNCTION, TuiPreventDefaultModule, TuiActiveZoneModule, TuiLetModule, TuiMapperPipeModule } from '@taiga-ui/cdk';
 import { tuiIsFlat } from '@taiga-ui/kit/utils';
 import * as i4 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from '@taiga-ui/core';
-import { TUI_TEXTFIELD_WATCHED_CONTROLLER, tuiAsDataListHost, TEXTFIELD_CONTROLLER_PROVIDER, TUI_DATA_LIST_ACCESSOR, TuiDataListDirective, TuiHostedDropdownComponent, TUI_DATA_LIST_HOST, TuiOptionComponent, tuiAsOptionContent, TuiWrapperModule, TuiSvgModule, TuiHostedDropdownModule, TuiLinkModule, TuiDataListModule, TuiTextfieldControllerModule } from '@taiga-ui/core';
+import { AbstractTuiTextfieldHost, tuiAsTextfieldHost, TUI_TEXTFIELD_HOST, TuiDataListDirective, TUI_TEXTFIELD_WATCHED_CONTROLLER, tuiAsDataListHost, TEXTFIELD_CONTROLLER_PROVIDER, TUI_DATA_LIST_ACCESSOR, TuiHostedDropdownComponent, TUI_DATA_LIST_HOST, TuiOptionComponent, tuiAsOptionContent, tuiAsDataList, TuiWrapperModule, TuiSvgModule, TuiHostedDropdownModule, TuiLinkModule, TuiDataListModule, TuiTextfieldControllerModule } from '@taiga-ui/core';
 import { TuiStringifiableItem } from '@taiga-ui/kit/classes';
 import { TUI_ARROW_MODE, TuiArrowModule } from '@taiga-ui/kit/components/arrow';
 import * as i2 from '@taiga-ui/kit/components/input-tag';
 import { TuiInputTagComponent, TuiInputTagModule } from '@taiga-ui/kit/components/input-tag';
 import { FIXED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
 import { TUI_ITEMS_HANDLERS, TUI_MULTI_SELECT_TEXTS } from '@taiga-ui/kit/tokens';
-import * as i3$1 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i6 from '@tinkoff/ng-polymorpheus';
 import { PolymorpheusComponent, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import * as i1$1 from '@taiga-ui/kit/components/data-list-wrapper';
+import { TuiDataListWrapperModule } from '@taiga-ui/kit/components/data-list-wrapper';
 import { TuiMultiSelectOptionComponent, TuiMultiSelectOptionModule } from '@taiga-ui/kit/components/multi-select-option';
 import { combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -37,13 +39,84 @@ const tuiMultiSelectOptionsProvider = (options) => ({
     useValue: Object.assign(Object.assign({}, TUI_MULTI_SELECT_DEFAULT_OPTIONS), options),
 });
 
+class TuiMultiSelectDirective extends AbstractTuiTextfieldHost {
+    constructor() {
+        super(...arguments);
+        this.disableItemHandler = item => this.host.disabledItemHandler(item);
+    }
+    get readOnly() {
+        return true;
+    }
+    onValueChange(_) {
+        //
+    }
+    onSelectionChange(value) {
+        this.host.onValueChange(value);
+    }
+}
+TuiMultiSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiMultiSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TuiMultiSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiMultiSelectDirective, selector: "tui-multi-select", providers: [tuiAsTextfieldHost(TuiMultiSelectDirective)], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiMultiSelectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tui-multi-select',
+                    providers: [tuiAsTextfieldHost(TuiMultiSelectDirective)],
+                }]
+        }] });
+
+class AbstractTuiNativeMultiSelect {
+    constructor(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 = (option, value) => value.includes(option);
+    }
+    get id() {
+        return this.elementRef.nativeElement.id || this.idService.generate();
+    }
+    onValueChange() {
+        const { selectedOptions } = this.elementRef.nativeElement;
+        this.host.onSelectionChange(Array.from(selectedOptions).map(option => option.value));
+    }
+}
+AbstractTuiNativeMultiSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AbstractTuiNativeMultiSelect, deps: [{ token: TUI_TEXTFIELD_HOST }, { token: AbstractTuiControl }, { token: ElementRef }, { token: TuiIdService }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractTuiNativeMultiSelect.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: AbstractTuiNativeMultiSelect, host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "datalist", first: true, predicate: TuiDataListDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AbstractTuiNativeMultiSelect, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: TuiMultiSelectDirective, decorators: [{
+                    type: Inject,
+                    args: [TUI_TEXTFIELD_HOST]
+                }] }, { type: i3.AbstractTuiControl, decorators: [{
+                    type: Inject,
+                    args: [AbstractTuiControl]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i3.TuiIdService, decorators: [{
+                    type: Inject,
+                    args: [TuiIdService]
+                }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }]; }, propDecorators: { datalist: [{
+                type: ViewChild,
+                args: [TuiDataListDirective, { read: TemplateRef, static: true }]
+            }], id: [{
+                type: HostBinding,
+                args: [`id`]
+            }] } });
+
 class TuiMultiSelectComponent extends AbstractTuiMultipleControl {
-    constructor(control, changeDetectorRef, arrowMode, itemsHandlers, options, controller) {
+    constructor(control, changeDetectorRef, arrowMode, itemsHandlers, options, controller, isMobile) {
         super(control, changeDetectorRef);
         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;
@@ -75,6 +148,9 @@ class TuiMultiSelectComponent extends AbstractTuiMultipleControl {
         var _a, _b;
         return !!((_a = this.input) === null || _a === void 0 ? void 0 : _a.focused) || !!((_b = this.hostedDropdown) === null || _b === void 0 ? void 0 : _b.focused);
     }
+    get nativeDropdownMode() {
+        return !!this.nativeSelect && this.isMobile;
+    }
     get computedValue() {
         return this.computedGroup ? EMPTY_ARRAY : this.value;
     }
@@ -128,8 +204,10 @@ class TuiMultiSelectComponent extends AbstractTuiMultipleControl {
     onInput(value) {
         this.updateValue(value.map(({ item }) => item));
     }
+    onValueChange(value) {
+        this.updateValue(value);
+    }
     onSearch(search) {
-        this.open = true;
         this.updateSearch(search);
     }
     onActiveZone(active) {
@@ -147,13 +225,13 @@ class TuiMultiSelectComponent extends AbstractTuiMultipleControl {
         this.searchChange.emit(search);
     }
 }
-TuiMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiMultiSelectComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: TUI_ARROW_MODE }, { token: TUI_ITEMS_HANDLERS }, { token: TUI_MULTI_SELECT_OPTIONS }, { token: TUI_TEXTFIELD_WATCHED_CONTROLLER }], target: i0.ɵɵFactoryTarget.Component });
+TuiMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiMultiSelectComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: TUI_ARROW_MODE }, { token: TUI_ITEMS_HANDLERS }, { token: TUI_MULTI_SELECT_OPTIONS }, { token: TUI_TEXTFIELD_WATCHED_CONTROLLER }, { token: TUI_IS_MOBILE }], target: i0.ɵɵFactoryTarget.Component });
 TuiMultiSelectComponent.ɵcmp = i0.ɵɵ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: [
         tuiAsFocusableItemAccessor(TuiMultiSelectComponent),
         tuiAsControl(TuiMultiSelectComponent),
         tuiAsDataListHost(TuiMultiSelectComponent),
         TEXTFIELD_CONTROLLER_PROVIDER,
-    ], queries: [{ propertyName: "accessor", first: true, predicate: TUI_DATA_LIST_ACCESSOR, descendants: true }, { propertyName: "datalist", first: true, predicate: TuiDataListDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "hostedDropdown", first: true, predicate: TuiHostedDropdownComponent, descendants: true }, { propertyName: "input", first: true, predicate: TuiInputTagComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"interactive\"\n    [content]=\"datalist || ''\"\n    [(open)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-input-tag\n        #inputTag\n        automation-id=\"tui-multi-select__input\"\n        class=\"t-input\"\n        [nativeId]=\"nativeId\"\n        [tuiTextfieldIcon]=\"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.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i2.TuiInputTagComponent, selector: "tui-input-tag", inputs: ["separator", "search", "editable", "tagValidator", "expandable", "rows", "inputHidden", "uniqueTags", "maxLength", "placeholder", "disabledItemHandler", "pseudoFocused"], outputs: ["searchChange"] }], directives: [{ type: i3.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i1.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i3.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }], pipes: { "tuiMapper": i3.TuiMapperPipe }, viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "accessor", first: true, predicate: TUI_DATA_LIST_ACCESSOR, descendants: true }, { propertyName: "nativeSelect", first: true, predicate: AbstractTuiNativeMultiSelect, descendants: true, static: true }, { propertyName: "datalist", first: true, predicate: TuiDataListDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "hostedDropdown", first: true, predicate: TuiHostedDropdownComponent, descendants: true }, { propertyName: "input", first: true, predicate: TuiInputTagComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"interactive && !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.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i2.TuiInputTagComponent, selector: "tui-input-tag", inputs: ["separator", "search", "editable", "tagValidator", "expandable", "rows", "inputHidden", "uniqueTags", "maxLength", "placeholder", "removable", "disabledItemHandler", "pseudoFocused"], outputs: ["searchChange"] }], directives: [{ type: i3.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i1.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i3.TuiPreventDefaultDirective, selector: "[tuiPreventDefault]", inputs: ["tuiPreventDefault"] }], pipes: { "tuiMapper": i3.TuiMapperPipe }, viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiDefaultProp()
 ], TuiMultiSelectComponent.prototype, "stringify", void 0);
@@ -218,9 +296,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }] }, { type: i1.TuiTextfieldController, decorators: [{
                     type: Inject,
                     args: [TUI_TEXTFIELD_WATCHED_CONTROLLER]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_IS_MOBILE]
                 }] }]; }, propDecorators: { accessor: [{
                 type: ContentChild,
                 args: [TUI_DATA_LIST_ACCESSOR]
+            }], nativeSelect: [{
+                type: ContentChild,
+                args: [AbstractTuiNativeMultiSelect, { static: true }]
             }], hostedDropdown: [{
                 type: ViewChild,
                 args: [TuiHostedDropdownComponent]
@@ -354,7 +438,7 @@ class TuiMultiSelectGroupComponent {
     }
 }
 TuiMultiSelectGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiMultiSelectGroupComponent, deps: [{ token: TUI_MULTI_SELECT_TEXTS }, { token: TUI_DATA_LIST_HOST }, { token: NgControl }], target: i0.ɵɵFactoryTarget.Component });
-TuiMultiSelectGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: "label" }, queries: [{ propertyName: "options", predicate: TuiOptionComponent }], ngImport: i0, 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.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i3.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TuiMultiSelectGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: { label: "label" }, queries: [{ propertyName: "options", predicate: TuiOptionComponent }], ngImport: i0, 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.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i3.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiDefaultProp()
 ], TuiMultiSelectGroupComponent.prototype, "label", void 0);
@@ -461,13 +545,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class TuiNativeMultiSelectComponent extends AbstractTuiNativeMultiSelect {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+    }
+}
+TuiNativeMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiNativeMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TuiNativeMultiSelectComponent.ɵcmp = i0.ɵɵ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: [
+        tuiAsDataList(TuiNativeMultiSelectComponent),
+        {
+            provide: TemplateRef,
+            deps: [TuiNativeMultiSelectComponent],
+            useFactory: ({ datalist }) => datalist,
+        },
+        {
+            provide: AbstractTuiNativeMultiSelect,
+            useExisting: TuiNativeMultiSelectComponent,
+        },
+    ], usesInheritance: true, ngImport: i0, 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$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "async": i2$1.AsyncPipe, "tuiMapper": i3.TuiMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiNativeMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'select[multiple][tuiSelect]:not([labels])',
+                    templateUrl: './native-multi-select.template.html',
+                    providers: [
+                        tuiAsDataList(TuiNativeMultiSelectComponent),
+                        {
+                            provide: TemplateRef,
+                            deps: [TuiNativeMultiSelectComponent],
+                            useFactory: ({ datalist }) => 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: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+class TuiNativeMultiSelectGroupComponent extends AbstractTuiNativeMultiSelect {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.labels = [];
+    }
+}
+TuiNativeMultiSelectGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiNativeMultiSelectGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TuiNativeMultiSelectGroupComponent.ɵcmp = i0.ɵɵ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: [
+        tuiAsDataList(TuiNativeMultiSelectGroupComponent),
+        {
+            provide: TemplateRef,
+            deps: [TuiNativeMultiSelectGroupComponent],
+            useFactory: ({ datalist }) => datalist,
+        },
+        {
+            provide: AbstractTuiNativeMultiSelect,
+            useExisting: TuiNativeMultiSelectGroupComponent,
+        },
+    ], usesInheritance: true, ngImport: i0, 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$1.TuiDataListGroupWrapperComponent, selector: "tui-data-list-wrapper[labels]", inputs: ["items", "labels"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "async": i2$1.AsyncPipe, "tuiMapper": i3.TuiMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiNativeMultiSelectGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'select[multiple][tuiSelect][labels]',
+                    templateUrl: './native-multi-select-group.template.html',
+                    providers: [
+                        tuiAsDataList(TuiNativeMultiSelectGroupComponent),
+                        {
+                            provide: TemplateRef,
+                            deps: [TuiNativeMultiSelectGroupComponent],
+                            useFactory: ({ datalist }) => 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: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }] } });
+
 class TuiMultiSelectModule {
 }
 TuiMultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 TuiMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiMultiSelectModule, declarations: [TuiMultiSelectComponent,
         TuiMultiSelectGroupComponent,
         TuiMultiSelectGroupDirective,
-        TuiHideSelectedPipe], imports: [CommonModule,
+        TuiHideSelectedPipe,
+        TuiNativeMultiSelectComponent,
+        TuiNativeMultiSelectGroupComponent,
+        TuiMultiSelectDirective], imports: [CommonModule,
         FormsModule,
         PolymorpheusModule,
         TuiWrapperModule,
@@ -480,12 +672,17 @@ TuiMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         TuiHostedDropdownModule,
         TuiInputTagModule,
         TuiMultiSelectOptionModule,
+        TuiDataListWrapperModule,
+        TuiMapperPipeModule,
         TuiLinkModule,
         TuiDataListModule,
         TuiTextfieldControllerModule], exports: [TuiMultiSelectComponent,
         TuiMultiSelectGroupComponent,
         TuiMultiSelectGroupDirective,
-        TuiHideSelectedPipe] });
+        TuiHideSelectedPipe,
+        TuiMultiSelectDirective,
+        TuiNativeMultiSelectComponent,
+        TuiNativeMultiSelectGroupComponent] });
 TuiMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiMultiSelectModule, imports: [[
             CommonModule,
             FormsModule,
@@ -500,6 +697,8 @@ TuiMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             TuiHostedDropdownModule,
             TuiInputTagModule,
             TuiMultiSelectOptionModule,
+            TuiDataListWrapperModule,
+            TuiMapperPipeModule,
             TuiLinkModule,
             TuiDataListModule,
             TuiTextfieldControllerModule,
@@ -521,6 +720,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         TuiHostedDropdownModule,
                         TuiInputTagModule,
                         TuiMultiSelectOptionModule,
+                        TuiDataListWrapperModule,
+                        TuiMapperPipeModule,
                         TuiLinkModule,
                         TuiDataListModule,
                         TuiTextfieldControllerModule,
@@ -530,12 +731,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         TuiMultiSelectGroupComponent,
                         TuiMultiSelectGroupDirective,
                         TuiHideSelectedPipe,
+                        TuiNativeMultiSelectComponent,
+                        TuiNativeMultiSelectGroupComponent,
+                        TuiMultiSelectDirective,
                     ],
                     exports: [
                         TuiMultiSelectComponent,
                         TuiMultiSelectGroupComponent,
                         TuiMultiSelectGroupDirective,
                         TuiHideSelectedPipe,
+                        TuiMultiSelectDirective,
+                        TuiNativeMultiSelectComponent,
+                        TuiNativeMultiSelectGroupComponent,
                     ],
                 }]
         }] });
@@ -544,5 +751,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_MULTI_SELECT_DEFAULT_OPTIONS, TUI_MULTI_SELECT_OPTION, TUI_MULTI_SELECT_OPTIONS, TuiHideSelectedPipe, TuiMultiSelectComponent, TuiMultiSelectGroupComponent, TuiMultiSelectGroupDirective, TuiMultiSelectModule, tuiMultiSelectOptionsProvider };
+export { AbstractTuiNativeMultiSelect, TUI_MULTI_SELECT_DEFAULT_OPTIONS, TUI_MULTI_SELECT_OPTION, TUI_MULTI_SELECT_OPTIONS, TuiHideSelectedPipe, TuiMultiSelectComponent, TuiMultiSelectDirective, TuiMultiSelectGroupComponent, TuiMultiSelectGroupDirective, TuiMultiSelectModule, TuiNativeMultiSelectComponent, TuiNativeMultiSelectGroupComponent, tuiMultiSelectOptionsProvider };
 //# sourceMappingURL=taiga-ui-kit-components-multi-select.js.map