@taiga-ui/kit 3.8.0 → 3.10.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit/components/arrow'), require('@taiga-ui/kit/components/select-option'), require('@taiga-ui/kit/providers'), require('@taiga-ui/kit/tokens'), require('@angular/common'), require('@tinkoff/ng-polymorpheus')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/select', ['exports', '@angular/core', '@angular/forms', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/components/arrow', '@taiga-ui/kit/components/select-option', '@taiga-ui/kit/providers', '@taiga-ui/kit/tokens', '@angular/common', '@tinkoff/ng-polymorpheus'], 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.select = {}), global.ng.core, global.ng.forms, global.i2, global.i1, global["taiga-ui"].kit.components.arrow, global["taiga-ui"].kit.components["select-option"], global["taiga-ui"].kit.providers, global["taiga-ui"].kit.tokens, global.ng.common, global.i4));
-})(this, (function (exports, i0, i5, i2, i1, arrow, selectOption, providers, tokens, i3, i4) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit/components/data-list-wrapper'), require('@angular/common'), require('@angular/forms'), require('@taiga-ui/kit/components/arrow'), require('@taiga-ui/kit/components/select-option'), require('@taiga-ui/kit/providers'), require('@taiga-ui/kit/tokens'), require('@tinkoff/ng-polymorpheus')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/kit/components/select', ['exports', '@angular/core', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit/components/data-list-wrapper', '@angular/common', '@angular/forms', '@taiga-ui/kit/components/arrow', '@taiga-ui/kit/components/select-option', '@taiga-ui/kit/providers', '@taiga-ui/kit/tokens', '@tinkoff/ng-polymorpheus'], 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.select = {}), global.ng.core, global.i1$1, global.i1, global["taiga-ui"].kit.components["data-list-wrapper"], global.ng.common, global.ng.forms, global["taiga-ui"].kit.components.arrow, global["taiga-ui"].kit.components["select-option"], global["taiga-ui"].kit.providers, global["taiga-ui"].kit.tokens, global.i4));
+})(this, (function (exports, i0, i1$1, i1, i1$2, i3, i5, arrow, selectOption, providers, tokens, i4) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,12 +23,53 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1$1);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
 
+    var AbstractTuiNativeSelect = /** @class */ (function () {
+        function AbstractTuiNativeSelect(host, elementRef, idService) {
+            this.host = host;
+            this.elementRef = elementRef;
+            this.idService = idService;
+            this.datalist = null;
+            this.host.process(this.elementRef.nativeElement);
+        }
+        Object.defineProperty(AbstractTuiNativeSelect.prototype, "id", {
+            get: function () {
+                return this.elementRef.nativeElement.id || this.idService.generate();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AbstractTuiNativeSelect;
+    }());
+    AbstractTuiNativeSelect.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AbstractTuiNativeSelect, deps: [{ token: i1.TUI_TEXTFIELD_HOST }, { token: i0.ElementRef }, { token: i1$1.TuiIdService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AbstractTuiNativeSelect.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: AbstractTuiNativeSelect, 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.16", ngImport: i0__namespace, type: AbstractTuiNativeSelect, decorators: [{
+                type: i0.Directive
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.TUI_TEXTFIELD_HOST]
+                        }] }, { type: i0__namespace.ElementRef, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.ElementRef]
+                        }] }, { type: i1__namespace.TuiIdService, decorators: [{
+                            type: i0.Inject,
+                            args: [i1$1.TuiIdService]
+                        }] }];
+        }, propDecorators: { datalist: [{
+                    type: i0.ViewChild,
+                    args: [i1.TuiDataListDirective, { read: i0.TemplateRef, static: true }]
+                }], id: [{
+                    type: i0.HostBinding,
+                    args: ["id"]
+                }] } });
+
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -127,7 +168,7 @@
         function step(op) {
             if (f)
                 throw new TypeError("Generator is already executing.");
-            while (_)
+            while (g && (g = 0, op[0] && (_ = 0)), _)
                 try {
                     if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
                         return t;
@@ -356,6 +397,145 @@
         return typeof state === "function" ? receiver === state : state.has(receiver);
     }
 
+    var TuiNativeSelectComponent = /** @class */ (function (_super) {
+        __extends(TuiNativeSelectComponent, _super);
+        function TuiNativeSelectComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.items = [];
+            return _this;
+        }
+        return TuiNativeSelectComponent;
+    }(AbstractTuiNativeSelect));
+    TuiNativeSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiNativeSelectComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiNativeSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiNativeSelectComponent, selector: "select[tuiSelect]:not([labels])", inputs: { items: "items" }, host: { listeners: { "change": "host.onValueChange($event.target.value)" }, properties: { "attr.aria-invalid": "host.invalid", "disabled": "host.disabled", "tabIndex": "host.focusable ? 0 : -1", "readOnly": "host.readOnly", "value": "host.value" } }, providers: [
+            {
+                provide: i1.TuiDataListDirective,
+                deps: [TuiNativeSelectComponent],
+                useExisting: TuiNativeSelectComponent,
+            },
+            {
+                provide: i0.TemplateRef,
+                deps: [TuiNativeSelectComponent],
+                useFactory: function (_a) {
+                    var datalist = _a.datalist;
+                    return datalist;
+                },
+            },
+            {
+                provide: AbstractTuiNativeSelect,
+                useExisting: TuiNativeSelectComponent,
+            },
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<tui-data-list-wrapper\n    *tuiDataList\n    [items]=\"items\"\n></tui-data-list-wrapper>\n<option\n    *ngFor=\"let option of items\"\n    [value]=\"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: i1__namespace$2.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiNativeSelectComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "select[tuiSelect]:not([labels])",
+                        templateUrl: "./native-select.template.html",
+                        providers: [
+                            {
+                                provide: i1.TuiDataListDirective,
+                                deps: [TuiNativeSelectComponent],
+                                useExisting: TuiNativeSelectComponent,
+                            },
+                            {
+                                provide: i0.TemplateRef,
+                                deps: [TuiNativeSelectComponent],
+                                useFactory: function (_a) {
+                                    var datalist = _a.datalist;
+                                    return datalist;
+                                },
+                            },
+                            {
+                                provide: AbstractTuiNativeSelect,
+                                useExisting: TuiNativeSelectComponent,
+                            },
+                        ],
+                        host: {
+                            '[attr.aria-invalid]': "host.invalid",
+                            '[disabled]': "host.disabled",
+                            '[tabIndex]': "host.focusable ? 0 : -1",
+                            '[readOnly]': "host.readOnly",
+                            '[value]': "host.value",
+                            '(change)': "host.onValueChange($event.target.value)",
+                        },
+                        styleUrls: ["./native-select.style.less"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], propDecorators: { items: [{
+                    type: i0.Input
+                }] } });
+
+    var TuiNativeSelectGroupComponent = /** @class */ (function (_super) {
+        __extends(TuiNativeSelectGroupComponent, _super);
+        function TuiNativeSelectGroupComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.items = [];
+            _this.labels = [];
+            return _this;
+        }
+        return TuiNativeSelectGroupComponent;
+    }(AbstractTuiNativeSelect));
+    TuiNativeSelectGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiNativeSelectGroupComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiNativeSelectGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiNativeSelectGroupComponent, selector: "select[tuiSelect][labels]", inputs: { items: "items", labels: "labels" }, host: { listeners: { "change": "host.onValueChange($event.target.value)" }, properties: { "attr.aria-invalid": "host.invalid", "disabled": "host.disabled", "tabIndex": "host.focusable ? 0 : -1", "readOnly": "host.readOnly", "value": "host.value" } }, providers: [
+            {
+                provide: i1.TuiDataListDirective,
+                deps: [TuiNativeSelectGroupComponent],
+                useExisting: TuiNativeSelectGroupComponent,
+            },
+            {
+                provide: i0.TemplateRef,
+                deps: [TuiNativeSelectGroupComponent],
+                useFactory: function (_a) {
+                    var datalist = _a.datalist;
+                    return datalist;
+                },
+            },
+            {
+                provide: AbstractTuiNativeSelect,
+                useExisting: TuiNativeSelectGroupComponent,
+            },
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<tui-data-list-wrapper\n    *tuiDataList\n    [items]=\"items\"\n    [labels]=\"labels\"\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        [value]=\"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: i1__namespace$2.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiNativeSelectGroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "select[tuiSelect][labels]",
+                        templateUrl: "./native-select-group.template.html",
+                        providers: [
+                            {
+                                provide: i1.TuiDataListDirective,
+                                deps: [TuiNativeSelectGroupComponent],
+                                useExisting: TuiNativeSelectGroupComponent,
+                            },
+                            {
+                                provide: i0.TemplateRef,
+                                deps: [TuiNativeSelectGroupComponent],
+                                useFactory: function (_a) {
+                                    var datalist = _a.datalist;
+                                    return datalist;
+                                },
+                            },
+                            {
+                                provide: AbstractTuiNativeSelect,
+                                useExisting: TuiNativeSelectGroupComponent,
+                            },
+                        ],
+                        host: {
+                            '[attr.aria-invalid]': "host.invalid",
+                            '[disabled]': "host.disabled",
+                            '[tabIndex]': "host.focusable ? 0 : -1",
+                            '[readOnly]': "host.readOnly",
+                            '[value]': "host.value",
+                            '(change)': "host.onValueChange($event.target.value)",
+                        },
+                        styleUrls: ["./native-select.style.less"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], propDecorators: { items: [{
+                    type: i0.Input
+                }], labels: [{
+                    type: i0.Input
+                }] } });
+
     var TUI_SELECT_DEFAULT_OPTIONS = {
         valueContent: "",
     };
@@ -369,12 +549,13 @@
 
     var TuiSelectComponent = /** @class */ (function (_super) {
         __extends(TuiSelectComponent, _super);
-        function TuiSelectComponent(control, changeDetectorRef, textfieldCleaner, arrowMode, itemsHandlers, options) {
+        function TuiSelectComponent(control, changeDetectorRef, textfieldCleaner, arrowMode, itemsHandlers, options, isMobile) {
             var _this = _super.call(this, control, changeDetectorRef) || this;
             _this.textfieldCleaner = textfieldCleaner;
             _this.arrowMode = arrowMode;
             _this.itemsHandlers = itemsHandlers;
             _this.options = options;
+            _this.isMobile = isMobile;
             _this.stringify = _this.itemsHandlers.stringify;
             _this.identityMatcher = _this.itemsHandlers.identityMatcher;
             _this.valueContent = _this.options.valueContent;
@@ -397,12 +578,19 @@
         });
         Object.defineProperty(TuiSelectComponent.prototype, "focused", {
             get: function () {
-                return (i2.tuiIsNativeFocused(this.nativeFocusableElement) ||
+                return (i1$1.tuiIsNativeFocused(this.nativeFocusableElement) ||
                     (!!this.hostedDropdown && this.hostedDropdown.focused));
             },
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(TuiSelectComponent.prototype, "nativeDropdownMode", {
+            get: function () {
+                return !!this.nativeSelect && this.isMobile;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(TuiSelectComponent.prototype, "computedValue", {
             get: function () {
                 return this.value === null ? "" : this.stringify(this.value) || " ";
@@ -421,6 +609,9 @@
             if (!value) {
                 this.updateValue(null);
             }
+            else {
+                this.updateValue(value || null);
+            }
         };
         TuiSelectComponent.prototype.onActiveZone = function (active) {
             this.updateFocused(active);
@@ -443,22 +634,22 @@
             }
         };
         return TuiSelectComponent;
-    }(i2.AbstractTuiNullableControl));
-    TuiSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiSelectComponent, deps: [{ token: i5.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i1.TUI_TEXTFIELD_CLEANER }, { token: arrow.TUI_ARROW_MODE }, { token: tokens.TUI_ITEMS_HANDLERS }, { token: TUI_SELECT_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    }(i1$1.AbstractTuiNullableControl));
+    TuiSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiSelectComponent, deps: [{ token: i5.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i1.TUI_TEXTFIELD_CLEANER }, { token: arrow.TUI_ARROW_MODE }, { token: tokens.TUI_ITEMS_HANDLERS }, { token: TUI_SELECT_OPTIONS }, { token: i1$1.TUI_IS_MOBILE }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiSelectComponent, selector: "tui-select", inputs: { stringify: "stringify", identityMatcher: "identityMatcher", valueContent: "valueContent" }, providers: [
-            i2.tuiAsFocusableItemAccessor(TuiSelectComponent),
-            i2.tuiAsControl(TuiSelectComponent),
+            i1$1.tuiAsFocusableItemAccessor(TuiSelectComponent),
+            i1$1.tuiAsControl(TuiSelectComponent),
             i1.tuiAsDataListHost(TuiSelectComponent),
             i1.tuiAsOptionContent(selectOption.TUI_SELECT_OPTION),
-        ], queries: [{ propertyName: "datalist", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "textfield", first: true, predicate: i1.TuiPrimitiveTextfieldComponent, descendants: true }, { propertyName: "hostedDropdown", first: true, predicate: i1.TuiHostedDropdownComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"interactive\"\n    [content]=\"datalist || ''\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-select__textfield\"\n        class=\"t-textfield\"\n        [tuiTextfieldIcon]=\"arrow\"\n        [editable]=\"false\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoActive]=\"pseudoActive\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n        (keydown.delete.prevent)=\"onKeyDownDelete()\"\n        (keydown.backspace.prevent)=\"onKeyDownDelete()\"\n    >\n        <ng-content></ng-content>\n        <ng-content\n            select=\"input\"\n            ngProjectAs=\"input\"\n        ></ng-content>\n        <div\n            *ngIf=\"value !== null\"\n            ngProjectAs=\"tuiContent\"\n            automation-id=\"tui-select__value\"\n            class=\"t-value\"\n        >\n            <div\n                *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value, active: computedFocused}\"\n                class=\"t-primitive-value\"\n                [textContent]=\"text\"\n            ></div>\n        </div>\n    </tui-primitive-textfield>\n</tui-hosted-dropdown>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:left}:host:not(._readonly) ::ng-deep input:not(:disabled){cursor:pointer}:host._readonly ::ng-deep input{cursor:default}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-value{display:flex;width:100%;align-items:center}.t-primitive-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], components: [{ type: i1__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i1__namespace.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }], directives: [{ type: i2__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1__namespace.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i1__namespace.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "nativeSelect", first: true, predicate: AbstractTuiNativeSelect, descendants: true, static: true }, { propertyName: "datalist", first: true, predicate: i1.TuiDataListDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "textfield", first: true, predicate: i1.TuiPrimitiveTextfieldComponent, descendants: true }, { propertyName: "hostedDropdown", first: true, predicate: i1.TuiHostedDropdownComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"interactive && !nativeDropdownMode\"\n    [content]=\"datalist || ''\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-select__textfield\"\n        class=\"t-textfield\"\n        [tuiTextfieldIcon]=\"arrow\"\n        [editable]=\"false\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoActive]=\"pseudoActive\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [readOnly]=\"readOnly\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($any($event))\"\n        (keydown.delete.prevent)=\"onKeyDownDelete()\"\n        (keydown.backspace.prevent)=\"onKeyDownDelete()\"\n    >\n        <ng-content></ng-content>\n        <ng-content\n            select=\"input\"\n            ngProjectAs=\"input\"\n        ></ng-content>\n\n        <ng-template #select>\n            <ng-container *ngIf=\"isMobile\">\n                <ng-content\n                    select=\"select\"\n                    ngProjectAs=\"select\"\n                ></ng-content>\n            </ng-container>\n        </ng-template>\n\n        <ng-container\n            *ngTemplateOutlet=\"select\"\n            ngProjectAs=\"select\"\n        ></ng-container>\n\n        <div\n            *ngIf=\"value !== null\"\n            ngProjectAs=\"tuiContent\"\n            automation-id=\"tui-select__value\"\n            class=\"t-value\"\n        >\n            <div\n                *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value, active: computedFocused}\"\n                class=\"t-primitive-value\"\n                [textContent]=\"text\"\n            ></div>\n        </div>\n    </tui-primitive-textfield>\n</tui-hosted-dropdown>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:left}:host:not(._readonly) ::ng-deep input:not(:disabled){cursor:pointer}:host._readonly ::ng-deep input{cursor:default}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-value{display:flex;width:100%;align-items:center}.t-primitive-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], components: [{ type: i1__namespace$2.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i1__namespace$2.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }], directives: [{ type: i1__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1__namespace$2.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i1__namespace$2.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], viewProviders: [providers.FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
-        i2.tuiDefaultProp()
+        i1$1.tuiDefaultProp()
     ], TuiSelectComponent.prototype, "stringify", void 0);
     __decorate([
-        i2.tuiDefaultProp()
+        i1$1.tuiDefaultProp()
     ], TuiSelectComponent.prototype, "identityMatcher", void 0);
     __decorate([
-        i2.tuiDefaultProp()
+        i1$1.tuiDefaultProp()
     ], TuiSelectComponent.prototype, "valueContent", void 0);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiSelectComponent, decorators: [{
                 type: i0.Component,
@@ -468,8 +659,8 @@
                         styleUrls: ["./select.style.less"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [
-                            i2.tuiAsFocusableItemAccessor(TuiSelectComponent),
-                            i2.tuiAsControl(TuiSelectComponent),
+                            i1$1.tuiAsFocusableItemAccessor(TuiSelectComponent),
+                            i1$1.tuiAsControl(TuiSelectComponent),
                             i1.tuiAsDataListHost(TuiSelectComponent),
                             i1.tuiAsOptionContent(selectOption.TUI_SELECT_OPTION),
                         ],
@@ -486,7 +677,7 @@
                         }] }, { type: i0__namespace.ChangeDetectorRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ChangeDetectorRef]
-                        }] }, { type: i1__namespace.TuiTextfieldCleanerDirective, decorators: [{
+                        }] }, { type: i1__namespace$2.TuiTextfieldCleanerDirective, decorators: [{
                             type: i0.Inject,
                             args: [i1.TUI_TEXTFIELD_CLEANER]
                         }] }, { type: undefined, decorators: [{
@@ -498,6 +689,9 @@
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TUI_SELECT_OPTIONS]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1$1.TUI_IS_MOBILE]
                         }] }];
         }, propDecorators: { textfield: [{
                     type: i0.ViewChild,
@@ -505,6 +699,9 @@
                 }], hostedDropdown: [{
                     type: i0.ViewChild,
                     args: [i1.TuiHostedDropdownComponent]
+                }], nativeSelect: [{
+                    type: i0.ContentChild,
+                    args: [AbstractTuiNativeSelect, { static: true }]
                 }], stringify: [{
                     type: i0.Input
                 }], identityMatcher: [{
@@ -556,23 +753,34 @@
         return TuiSelectModule;
     }());
     TuiSelectModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiSelectModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiSelectModule, declarations: [TuiSelectComponent, TuiSelectDirective], imports: [i3.CommonModule,
+    TuiSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiSelectModule, declarations: [TuiSelectComponent,
+            TuiSelectDirective,
+            TuiNativeSelectComponent,
+            TuiNativeSelectGroupComponent], imports: [i3.CommonModule,
             i4.PolymorpheusModule,
-            i2.TuiActiveZoneModule,
+            i1$1.TuiActiveZoneModule,
             i1.TuiPrimitiveTextfieldModule,
             i1.TuiHostedDropdownModule,
             selectOption.TuiSelectOptionModule,
             arrow.TuiArrowModule,
-            i1.TuiTextfieldControllerModule], exports: [TuiSelectComponent, TuiSelectDirective, i1.TuiTextfieldComponent] });
+            i1.TuiTextfieldControllerModule,
+            i1$2.TuiDataListWrapperModule,
+            i1.TuiDataListModule], exports: [TuiSelectComponent,
+            TuiSelectDirective,
+            i1.TuiTextfieldComponent,
+            TuiNativeSelectComponent,
+            TuiNativeSelectGroupComponent] });
     TuiSelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiSelectModule, imports: [[
                 i3.CommonModule,
                 i4.PolymorpheusModule,
-                i2.TuiActiveZoneModule,
+                i1$1.TuiActiveZoneModule,
                 i1.TuiPrimitiveTextfieldModule,
                 i1.TuiHostedDropdownModule,
                 selectOption.TuiSelectOptionModule,
                 arrow.TuiArrowModule,
                 i1.TuiTextfieldControllerModule,
+                i1$2.TuiDataListWrapperModule,
+                i1.TuiDataListModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiSelectModule, decorators: [{
                 type: i0.NgModule,
@@ -580,15 +788,28 @@
                         imports: [
                             i3.CommonModule,
                             i4.PolymorpheusModule,
-                            i2.TuiActiveZoneModule,
+                            i1$1.TuiActiveZoneModule,
                             i1.TuiPrimitiveTextfieldModule,
                             i1.TuiHostedDropdownModule,
                             selectOption.TuiSelectOptionModule,
                             arrow.TuiArrowModule,
                             i1.TuiTextfieldControllerModule,
+                            i1$2.TuiDataListWrapperModule,
+                            i1.TuiDataListModule,
+                        ],
+                        declarations: [
+                            TuiSelectComponent,
+                            TuiSelectDirective,
+                            TuiNativeSelectComponent,
+                            TuiNativeSelectGroupComponent,
+                        ],
+                        exports: [
+                            TuiSelectComponent,
+                            TuiSelectDirective,
+                            i1.TuiTextfieldComponent,
+                            TuiNativeSelectComponent,
+                            TuiNativeSelectGroupComponent,
                         ],
-                        declarations: [TuiSelectComponent, TuiSelectDirective],
-                        exports: [TuiSelectComponent, TuiSelectDirective, i1.TuiTextfieldComponent],
                     }]
             }] });
 
@@ -596,8 +817,11 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.AbstractTuiNativeSelect = AbstractTuiNativeSelect;
     exports.TUI_SELECT_DEFAULT_OPTIONS = TUI_SELECT_DEFAULT_OPTIONS;
     exports.TUI_SELECT_OPTIONS = TUI_SELECT_OPTIONS;
+    exports.TuiNativeSelectComponent = TuiNativeSelectComponent;
+    exports.TuiNativeSelectGroupComponent = TuiNativeSelectGroupComponent;
     exports.TuiSelectComponent = TuiSelectComponent;
     exports.TuiSelectDirective = TuiSelectDirective;
     exports.TuiSelectModule = TuiSelectModule;