@taiga-ui/core 4.52.0-canary.2c75afa → 4.52.0-canary.2d877cf

package/fesm2022/taiga-ui-core-components-data-list.mjs

@@ -1,29 +1,20 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ContentChild, Directive, ViewContainerRef, forwardRef, createComponent, INJECTOR, EnvironmentInjector, Input, signal, ChangeDetectionStrategy, Component, NgZone, DestroyRef, ChangeDetectorRef, isSignal, ContentChildren, ViewEncapsulation } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
-import { tuiQueryListChanges, tuiZonefree, tuiTakeUntilDestroyed } from '@taiga-ui/cdk/observables';
+import { InjectionToken, inject, ContentChild, Directive, input, NgZone, DestroyRef, ChangeDetectorRef, contentChildren, forwardRef, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewContainerRef, createComponent, INJECTOR, EnvironmentInjector } from '@angular/core';
+import { tuiZonefree, tuiTakeUntilDestroyed } from '@taiga-ui/cdk/observables';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
-import { tuiIsFocused, tuiMoveFocus, tuiIsFocusedIn } from '@taiga-ui/cdk/utils/focus';
-import { tuiProvide, tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
-import { tuiAsAuxiliary, TUI_NOTHING_FOUND_MESSAGE } from '@taiga-ui/core/tokens';
+import { tuiMoveFocus, tuiIsFocusedIn, tuiIsFocused } from '@taiga-ui/cdk/utils/focus';
+import { tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
+import * as i2 from '@taiga-ui/core/components/cell';
+import { TuiCell, tuiCellOptionsProvider } from '@taiga-ui/core/components/cell';
+import { TUI_NOTHING_FOUND_MESSAGE, tuiAsAuxiliary } from '@taiga-ui/core/tokens';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { ReplaySubject, switchMap, combineLatest, map, startWith, timer } from 'rxjs';
+import { timer } from 'rxjs';
+import { tuiProvide } from '@taiga-ui/cdk/utils/di';
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
-import { TuiDropdownDirective } from '@taiga-ui/core/directives/dropdown';
 import * as i1 from '@taiga-ui/core/directives/icons';
 import { TuiWithIcons } from '@taiga-ui/core/directives/icons';
+import { TuiDropdownDirective } from '@taiga-ui/core/portals/dropdown';
 
-/**
- * Accessor for data-list options
- */
-const TUI_DATA_LIST_ACCESSOR = new InjectionToken(ngDevMode ? 'TUI_DATA_LIST_ACCESSOR' : '');
-function tuiAsDataListAccessor(accessor) {
-    return [tuiProvide(TUI_DATA_LIST_ACCESSOR, accessor), tuiAsAuxiliary(accessor)];
-}
-/**
- * DataList controller
- */
 const TUI_DATA_LIST_HOST = new InjectionToken(ngDevMode ? 'TUI_DATA_LIST_HOST' : '');
 function tuiAsDataListHost(host) {
     return tuiProvide(TUI_DATA_LIST_HOST, host);
@@ -34,200 +25,47 @@ function tuiAsDataListHost(host) {
  */
 const TUI_OPTION_CONTENT = new InjectionToken(ngDevMode ? 'TUI_OPTION_CONTENT' : '');
 function tuiAsOptionContent(useValue) {
-    return {
-        provide: TUI_OPTION_CONTENT,
-        useValue,
-    };
+    return { provide: TUI_OPTION_CONTENT, useValue };
 }
 class TuiWithOptionContent {
     constructor() {
-        this.localContent = null;
-        this.globalContent = inject(TUI_OPTION_CONTENT, {
-            optional: true,
-        });
+        this.local = null;
+        this.global = inject(TUI_OPTION_CONTENT, { optional: true });
     }
     get content() {
-        return this.globalContent ?? this.localContent;
+        return this.global ?? this.local;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithOptionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiWithOptionContent, isStandalone: true, queries: [{ propertyName: "localContent", first: true, predicate: TUI_OPTION_CONTENT, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiWithOptionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiWithOptionContent, isStandalone: true, queries: [{ propertyName: "local", first: true, predicate: TUI_OPTION_CONTENT, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithOptionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiWithOptionContent, decorators: [{
             type: Directive
-        }], propDecorators: { localContent: [{
+        }], propDecorators: { local: [{
                 type: ContentChild,
                 args: [TUI_OPTION_CONTENT, { descendants: true }]
             }] } });
 
-// TODO(v5): rename `TuiOptionNew` => `TuiOption` & remove [new] from selector
-// TODO: Consider all use cases for aria roles
-class TuiOptionNew {
-    constructor() {
-        this.vcr = inject(ViewContainerRef);
-        this.isMobile = inject(TUI_IS_MOBILE);
-        this.el = tuiInjectElement();
-        this.dataList = inject(forwardRef(() => TuiDataListComponent), { optional: true });
-        this.content = inject(TUI_OPTION_CONTENT, {
-            optional: true,
-        });
-        this.ref = this.content &&
-            createComponent(this.content, {
-                environmentInjector: inject(EnvironmentInjector),
-                elementInjector: inject(INJECTOR),
-                hostElement: tuiInjectElement(),
-            });
-        this.dropdown = inject(TuiDropdownDirective, {
-            self: true,
-            optional: true,
-        })?.ref;
-        this.disabled = false;
-        if (this.ref) {
-            this.vcr.insert(this.ref.hostView);
-            this.ref.changeDetectorRef.detectChanges();
-        }
-    }
-    // Preventing focus loss upon focused option removal
-    ngOnDestroy() {
-        this.dataList?.handleFocusLossIfNecessary(this.el);
-    }
-    onMouseMove() {
-        if (!this.isMobile &&
-            !tuiIsFocused(this.el) &&
-            this.dataList &&
-            this.el.closest('[tuiDataListDropdownManager]')) {
-            this.el.focus({ preventScroll: true });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptionNew, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiOptionNew, isStandalone: true, selector: "button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]", inputs: { disabled: "disabled" }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "mousemove.zoneless": "onMouseMove()" }, properties: { "attr.disabled": "disabled || null", "class._with-dropdown": "dropdown?.()" } }, hostDirectives: [{ directive: i1.TuiWithIcons }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptionNew, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]',
-                    hostDirectives: [TuiWithIcons],
-                    host: {
-                        type: 'button',
-                        role: 'option',
-                        '[attr.disabled]': 'disabled || null',
-                        '[class._with-dropdown]': 'dropdown?.()',
-                        '(mousemove.zoneless)': 'onMouseMove()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{
-                type: Input
-            }] } });
-// TODO(v5): remove [new] from selector
 class TuiOptionWithValue {
     constructor() {
-        this.host = inject(TUI_DATA_LIST_HOST, {
-            optional: true,
-        });
-        this.disabled = false;
-        this.value = signal(undefined);
-    }
-    // TODO(v5): use `input.required<T>()` to remove `undefined` from `this.value()`
-    set valueSetter(x) {
-        this.value.set(x);
+        this.host = inject(TUI_DATA_LIST_HOST, { optional: true });
+        this.disabled = input(false);
+        this.value = input();
     }
     onClick(value = this.value()) {
-        if (this.host?.handleOption && value !== undefined) {
-            this.host.handleOption(value);
+        if (value !== undefined) {
+            this.host?.handleOption?.(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptionWithValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiOptionWithValue, isStandalone: true, selector: "button[tuiOption][value][new], a[tuiOption][value][new], label[tuiOption][value][new]", inputs: { disabled: "disabled", valueSetter: ["value", "valueSetter"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiOptionWithValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiOptionWithValue, isStandalone: true, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptionWithValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiOptionWithValue, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'button[tuiOption][value][new], a[tuiOption][value][new], label[tuiOption][value][new]',
-                    host: {
-                        '(click)': 'onClick()',
-                    },
+                    selector: 'button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]',
+                    host: { '(click)': 'onClick()' },
                 }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], valueSetter: [{
-                type: Input,
-                args: [{ alias: 'value', required: true }]
-            }] } });
-
-/**
- * TODO(v5): delete
- * @deprecated use `<button tuiOption new />` / `<a tuiOption new /> / `<label tuiOption new /> instead
- */
-class TuiOption {
-    constructor() {
-        this.isMobile = inject(TUI_IS_MOBILE);
-        this.el = tuiInjectElement();
-        this.dataList = inject(forwardRef(() => TuiDataListComponent), { optional: true });
-        this.host = inject(TUI_DATA_LIST_HOST, {
-            optional: true,
-        });
-        this.content = inject(TUI_OPTION_CONTENT, { optional: true });
-        this.dropdown = inject(TuiDropdownDirective, {
-            self: true,
-            optional: true,
-        })?.ref;
-        this.disabled = false;
-    }
-    // Preventing focus loss upon focused option removal
-    ngOnDestroy() {
-        this.dataList?.handleFocusLossIfNecessary(this.el);
-    }
-    onClick() {
-        if (this.host?.handleOption && this.value !== undefined) {
-            this.host.handleOption(this.value);
-        }
-    }
-    onMouseMove() {
-        if (!this.isMobile &&
-            !tuiIsFocused(this.el) &&
-            this.dataList &&
-            this.el.closest('[tuiDataListDropdownManager]')) {
-            this.el.focus({ preventScroll: true });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiOption, isStandalone: true, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: { disabled: "disabled", value: "value" }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "click": "onClick()", "mousemove.zoneless": "onMouseMove()" }, properties: { "attr.disabled": "disabled || null", "class._with-dropdown": "dropdown?.()" } }, hostDirectives: [{ directive: i1.TuiWithIcons }], ngImport: i0, template: `
-        <ng-container *polymorpheusOutlet="content || t as text; context: {$implicit: t}">
-            {{ text }}
-        </ng-container>
-        <ng-template #t>
-            <ng-content />
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOption, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])',
-                    imports: [PolymorpheusOutlet],
-                    template: `
-        <ng-container *polymorpheusOutlet="content || t as text; context: {$implicit: t}">
-            {{ text }}
-        </ng-container>
-        <ng-template #t>
-            <ng-content />
-        </ng-template>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    hostDirectives: [TuiWithIcons],
-                    host: {
-                        type: 'button',
-                        role: 'option',
-                        '[attr.disabled]': 'disabled || null',
-                        '[class._with-dropdown]': 'dropdown?.()',
-                        '(click)': 'onClick()',
-                        '(mousemove.zoneless)': 'onMouseMove()',
-                    },
-                }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
+        }] });
 
 function tuiInjectDataListSize() {
     const sizes = ['s', 'm', 'l'];
@@ -237,25 +75,18 @@ function tuiInjectDataListSize() {
 // TODO: Consider aria-activedescendant for proper accessibility implementation
 class TuiDataListComponent {
     constructor() {
-        // TODO(v5): delete
-        this.legacyOptionsQuery = EMPTY_QUERY;
-        this.optionsQuery = EMPTY_QUERY;
         this.ngZone = inject(NgZone);
         this.destroyRef = inject(DestroyRef);
         this.el = tuiInjectElement();
         this.cdr = inject(ChangeDetectorRef);
-        this.contentReady$ = new ReplaySubject(1);
+        this.optionsQuery = contentChildren(forwardRef(() => TuiOptionWithValue), { descendants: true });
         this.fallback = inject(TUI_NOTHING_FOUND_MESSAGE);
         this.empty = signal(false);
-        this.size = tuiInjectDataListSize();
-        // TODO(v5): use signal `contentChildren`
-        this.options = toSignal(this.contentReady$.pipe(switchMap(() => combineLatest([
-            tuiQueryListChanges(this.legacyOptionsQuery),
-            tuiQueryListChanges(this.optionsQuery),
-        ])), map(([legacyOptions, options]) => [
-            ...legacyOptions.map(({ value }) => value),
-            ...options.map(({ value }) => value()),
-        ].filter(tuiIsPresent)), startWith([])), { requireSync: true });
+        this.emptyContent = input();
+        this.size = input(tuiInjectDataListSize());
+        this.options = computed(() => this.optionsQuery()
+            .map(({ value }) => value())
+            .filter(tuiIsPresent));
     }
     onKeyDownArrow(current, step) {
         const { elements } = this;
@@ -266,9 +97,6 @@ class TuiDataListComponent {
             this.origin?.focus({ preventScroll: true });
         }
     }
-    ngAfterContentInit() {
-        this.contentReady$.next(true);
-    }
     // TODO: Refactor to :has after Safari support bumped to 15
     ngAfterContentChecked() {
         timer(0)
@@ -278,58 +106,38 @@ class TuiDataListComponent {
             this.cdr.detectChanges();
         });
     }
-    // TODO(v5): delete
-    getOptions(includeDisabled = false) {
-        return [
-            ...this.legacyOptionsQuery, // TODO(v5): delete
-            ...this.optionsQuery,
-        ]
-            .filter(({ disabled }) => includeDisabled || !disabled)
-            .map(({ value }) => (isSignal(value) ? value() : value))
-            .filter(tuiIsPresent);
-    }
     onFocusIn(relatedTarget, currentTarget) {
         if (!currentTarget.contains(relatedTarget) && !this.origin) {
             this.origin = relatedTarget;
         }
     }
     get elements() {
-        return Array.from(this.el.querySelectorAll('[tuiOption]'));
+        return Array.from(this.el.querySelectorAll('[tuiOption]:not(.t-empty)'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDataListComponent, isStandalone: true, selector: "tui-data-list", inputs: { emptyContent: "emptyContent", size: "size" }, host: { attributes: { "role": "listbox" }, listeners: { "focusin": "onFocusIn($event.relatedTarget, $event.currentTarget)", "mousedown.prevent": "(0)", "wheel.zoneless.passive": "handleFocusLossIfNecessary()", "mouseleave": "handleFocusLossIfNecessary($event.target)", "keydown.tab": "handleFocusLossIfNecessary()", "keydown.shift.tab": "handleFocusLossIfNecessary()", "keydown.arrowDown.prevent": "onKeyDownArrow($event.target, 1)", "keydown.arrowUp.prevent": "onKeyDownArrow($event.target, -1)" }, properties: { "attr.data-size": "size" } }, providers: [
-            tuiAsDataListAccessor(TuiDataListComponent),
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiDataListComponent, isStandalone: true, selector: "tui-data-list", inputs: { emptyContent: { classPropertyName: "emptyContent", publicName: "emptyContent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, listeners: { "focusin": "onFocusIn($event.relatedTarget, $event.currentTarget)", "mousedown.prevent": "(0)", "wheel.zoneless.passive": "handleFocusLossIfNecessary()", "mouseleave": "handleFocusLossIfNecessary($event.target)", "keydown.tab": "handleFocusLossIfNecessary()", "keydown.shift.tab": "handleFocusLossIfNecessary()", "keydown.arrowDown.prevent": "onKeyDownArrow($event.target, 1)", "keydown.arrowUp.prevent": "onKeyDownArrow($event.target, -1)" }, properties: { "attr.data-size": "size()" } }, providers: [
+            tuiCellOptionsProvider(() => ({ size: inject(TuiDataListComponent).size() })),
+            tuiAsAuxiliary(TuiDataListComponent),
             {
                 provide: TUI_OPTION_CONTENT,
                 useFactory: () => inject(TuiWithOptionContent, { optional: true })?.content ??
-                    // TODO(v5): remove when all legacy controls are deleted
-                    inject(TUI_OPTION_CONTENT, {
-                        host: true,
-                        skipSelf: true,
-                        optional: true,
-                    }) ??
                     inject(TUI_OPTION_CONTENT, { skipSelf: true, optional: true }),
             },
-        ], queries: [{ propertyName: "legacyOptionsQuery", predicate: i0.forwardRef(() => TuiOption), descendants: true }, { propertyName: "optionsQuery", predicate: i0.forwardRef(() => TuiOptionWithValue), descendants: true }], ngImport: i0, template: "<ng-content />\n@if (empty()) {\n    <div class=\"t-empty\">\n        <ng-container *polymorpheusOutlet=\"emptyContent || fallback() as text\">\n            {{ text }}\n        </ng-container>\n    </div>\n}\n", styles: ["tui-data-list{--tui-data-list-padding: .25rem;--tui-data-list-margin: .0625rem;display:flex;font:var(--tui-font-text-m);flex-direction:column;padding:calc(var(--tui-data-list-padding) - var(--tui-data-list-margin)) var(--tui-data-list-padding);color:var(--tui-text-tertiary)}tui-data-list:focus-within .t-trap{display:none}tui-data-list:focus-within [tuiOption]._with-dropdown:not(:focus){background-color:transparent}tui-data-list[data-size=s]{--tui-data-list-margin: 0rem}tui-data-list[data-size=s] [tuiOption][new]:not([tuiCell]){gap:.5rem}tui-data-list[data-size=s]>.t-empty,tui-data-list[data-size=s] [tuiOption]{--t-option-padding-inline: .375rem;font:var(--tui-font-text-s);min-block-size:2rem;padding-block-start:.3125rem;padding-block-end:.3125rem}tui-data-list[data-size=s]>.t-empty:before,tui-data-list[data-size=s] [tuiOption]:before{font-size:1rem}tui-data-list[data-size=m] [tuiOption][new]:not([tuiCell]){gap:.75rem}tui-data-list[data-size=m]>.t-empty,tui-data-list[data-size=m] [tuiOption]{--t-option-padding-inline: .5rem;font:var(--tui-font-text-s);min-block-size:2.5rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list[data-size=l]{--tui-data-list-padding: .375rem;--tui-data-list-margin: .125rem}tui-data-list[data-size=l] [tuiOption][new]:not([tuiCell]){gap:1rem}tui-data-list[data-size=l]>.t-empty,tui-data-list[data-size=l] [tuiOption]{--t-option-padding-inline: .625rem;font:var(--tui-font-text-m);min-block-size:2.75rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list>.t-empty{display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0}tui-data-list [tuiOption]:not([new]){justify-content:space-between}tui-data-list [tuiOption]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0;text-align:start;color:var(--tui-text-primary);border-radius:var(--tui-radius-s);outline:none;cursor:pointer;word-break:break-word;background-clip:padding-box}tui-data-list [tuiOption]:disabled{opacity:var(--tui-disabled-opacity);cursor:default}@media (hover: hover) and (pointer: fine){tui-data-list [tuiOption]:hover:not(:disabled){background-color:var(--tui-background-neutral-1)}}tui-data-list [tuiOption]:active:not(:disabled),tui-data-list [tuiOption]:focus-within,tui-data-list [tuiOption]._with-dropdown{background-color:var(--tui-background-neutral-1)}tui-data-list [tuiOption]:not([new]):before{margin-inline-end:.5rem}tui-data-list [tuiOption]:after{font-size:1rem;margin:0 -.625rem 0 auto;border-inline-start:.5rem solid;border-inline-end:.5rem solid}tui-data-list>.t-empty,tui-data-list [tuiOption]{padding-inline-start:var(--t-option-padding-inline);padding-inline-end:var(--t-option-padding-inline)}tui-opt-group{position:relative;display:flex;font:var(--tui-font-text-xs);font-weight:700;color:var(--tui-text-primary);flex-direction:column;line-height:1rem}tui-data-list[data-size=l] tui-opt-group{font:var(--tui-font-text-m);font-weight:700;line-height:1.25rem}tui-data-list[data-size=l] tui-opt-group:before{padding-inline-start:.625rem;padding-inline-end:.625rem}tui-data-list[data-size=l] tui-opt-group:after{left:.625rem;right:.625rem}tui-opt-group:empty:before,tui-opt-group:empty:after{display:none}tui-opt-group:before{content:attr(data-label);padding:var(--tui-data-list-padding) .5rem var(--tui-data-list-padding);margin:var(--tui-data-list-margin) 0;white-space:normal;word-break:break-word}tui-sheet-dialog tui-opt-group:before{font:var(--tui-font-heading-6);padding:.5rem 0!important;margin:0}tui-opt-group:after{position:absolute;left:.5rem;right:.5rem;top:var(--tui-data-list-padding);block-size:1px;background:var(--tui-border-normal)}tui-opt-group:not(:empty)~tui-opt-group:before{padding-block-start:calc(.75rem + var(--tui-data-list-padding))}tui-opt-group:not(:empty)~tui-opt-group[data-label=\"\"]:before,tui-opt-group:not(:empty)~tui-opt-group:not([data-label]):before{padding:var(--tui-data-list-padding) 0}tui-opt-group:not(:empty)~tui-opt-group:after{content:\"\"}tui-opt-group[data-label=\"\"]:before,tui-opt-group:not([data-label]):before{content:\"\";padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionsQuery", predicate: i0.forwardRef(() => TuiOptionWithValue), descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n@if (empty()) {\n    <!-- tuiOption selector purely for cosmetics, do not import -->\n    <span\n        tuiCell\n        tuiOption\n        class=\"t-empty\"\n    >\n        <ng-container *polymorpheusOutlet=\"emptyContent() || fallback() as text\">\n            {{ text }}\n        </ng-container>\n    </span>\n}\n", styles: ["tui-data-list{display:flex;flex-direction:column;padding:calc(var(--tui-data-list-padding) - var(--tui-data-list-margin)) var(--tui-data-list-padding)}tui-data-list:focus-within [tuiOption]._with-dropdown:not(:focus){background:transparent}tui-data-list[data-size=s]{--tui-data-list-margin: 0rem;--tui-data-list-padding: .25rem}tui-data-list[data-size=s] [tuiOption]{font:var(--tui-font-text-s);min-block-size:2rem;padding:.3125rem .375rem}tui-data-list[data-size=s] [tuiOption]:before{font-size:1rem}tui-data-list[data-size=m]{--tui-data-list-margin: .0625rem;--tui-data-list-padding: .25rem}tui-data-list[data-size=m] [tuiOption]{font:var(--tui-font-text-s);min-block-size:2.5rem;padding:.375rem .5rem}tui-data-list[data-size=l]{--tui-data-list-margin: .125rem;--tui-data-list-padding: .375rem}tui-data-list[data-size=l] [tuiOption]{font:var(--tui-font-text-m);min-block-size:2.75rem;padding:.375rem .625rem}tui-data-list [tuiOption]{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;box-sizing:border-box;margin:var(--tui-data-list-margin) 0;border-radius:var(--tui-radius-s);outline:none!important;cursor:pointer;word-break:break-word}tui-data-list [tuiOption]:disabled{opacity:var(--tui-disabled-opacity);cursor:default}@media (hover: hover) and (pointer: fine){tui-data-list [tuiOption]:hover:not(:disabled){background:var(--tui-background-neutral-1)}}tui-data-list [tuiOption]:active:not(:disabled),tui-data-list [tuiOption]:focus-within,tui-data-list [tuiOption]._with-dropdown{background:var(--tui-background-neutral-1)}tui-data-list [tuiOption]:after{font-size:1rem;margin-inline:auto -.625rem;border-inline:.5rem solid}tui-data-list>.t-empty{pointer-events:none;color:var(--tui-text-tertiary)}tui-opt-group{position:relative;display:flex;font:var(--tui-font-text-xs);font-weight:700;color:var(--tui-text-primary);flex-direction:column;line-height:1rem}tui-data-list[data-size=s] tui-opt-group:before{padding-inline:.375rem}tui-data-list[data-size=l] tui-opt-group{font:var(--tui-font-text-m);font-weight:700;line-height:1.25rem}tui-data-list[data-size=l] tui-opt-group:before{padding-inline:.625rem}tui-data-list[data-size=l] tui-opt-group:after{inset-inline:.625rem}tui-opt-group:empty:before,tui-opt-group:empty:after{display:none}tui-opt-group:before{content:attr(data-label);padding:var(--tui-data-list-padding) .5rem;margin:var(--tui-data-list-margin) 0;white-space:normal;word-break:break-word}tui-sheet-dialog tui-opt-group:before{font:var(--tui-font-heading-6);padding:.5rem 0!important;margin:0}tui-opt-group:after{position:absolute;top:var(--tui-data-list-padding);inset-inline:.5rem;block-size:1px;background:var(--tui-border-normal)}tui-opt-group:not(:empty)~tui-opt-group:before{padding-block-start:calc(.75rem + var(--tui-data-list-padding))}tui-opt-group:not(:empty)~tui-opt-group[data-label=\"\"]:before{padding:var(--tui-data-list-padding) 0}tui-opt-group:not(:empty)~tui-opt-group:after{content:\"\"}tui-opt-group[data-label=\"\"]:before{content:\"\";padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiCell, selector: "[tuiCell]:not(ng-template)", inputs: ["tuiCell", "tuiCellHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDataListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiDataListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-data-list', imports: [PolymorpheusOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        tuiAsDataListAccessor(TuiDataListComponent),
+            args: [{ selector: 'tui-data-list', imports: [PolymorpheusOutlet, TuiCell], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        tuiCellOptionsProvider(() => ({ size: inject(TuiDataListComponent).size() })),
+                        tuiAsAuxiliary(TuiDataListComponent),
                         {
                             provide: TUI_OPTION_CONTENT,
                             useFactory: () => inject(TuiWithOptionContent, { optional: true })?.content ??
-                                // TODO(v5): remove when all legacy controls are deleted
-                                inject(TUI_OPTION_CONTENT, {
-                                    host: true,
-                                    skipSelf: true,
-                                    optional: true,
-                                }) ??
                                 inject(TUI_OPTION_CONTENT, { skipSelf: true, optional: true }),
                         },
                     ], host: {
                         role: 'listbox',
-                        '[attr.data-size]': 'size',
+                        '[attr.data-size]': 'size()',
                         '(focusin)': 'onFocusIn($event.relatedTarget, $event.currentTarget)',
                         '(mousedown.prevent)': '(0)',
                         '(wheel.zoneless.passive)': 'handleFocusLossIfNecessary()',
@@ -338,55 +146,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '(keydown.shift.tab)': 'handleFocusLossIfNecessary()',
                         '(keydown.arrowDown.prevent)': 'onKeyDownArrow($event.target, 1)',
                         '(keydown.arrowUp.prevent)': 'onKeyDownArrow($event.target, -1)',
-                    }, template: "<ng-content />\n@if (empty()) {\n    <div class=\"t-empty\">\n        <ng-container *polymorpheusOutlet=\"emptyContent || fallback() as text\">\n            {{ text }}\n        </ng-container>\n    </div>\n}\n", styles: ["tui-data-list{--tui-data-list-padding: .25rem;--tui-data-list-margin: .0625rem;display:flex;font:var(--tui-font-text-m);flex-direction:column;padding:calc(var(--tui-data-list-padding) - var(--tui-data-list-margin)) var(--tui-data-list-padding);color:var(--tui-text-tertiary)}tui-data-list:focus-within .t-trap{display:none}tui-data-list:focus-within [tuiOption]._with-dropdown:not(:focus){background-color:transparent}tui-data-list[data-size=s]{--tui-data-list-margin: 0rem}tui-data-list[data-size=s] [tuiOption][new]:not([tuiCell]){gap:.5rem}tui-data-list[data-size=s]>.t-empty,tui-data-list[data-size=s] [tuiOption]{--t-option-padding-inline: .375rem;font:var(--tui-font-text-s);min-block-size:2rem;padding-block-start:.3125rem;padding-block-end:.3125rem}tui-data-list[data-size=s]>.t-empty:before,tui-data-list[data-size=s] [tuiOption]:before{font-size:1rem}tui-data-list[data-size=m] [tuiOption][new]:not([tuiCell]){gap:.75rem}tui-data-list[data-size=m]>.t-empty,tui-data-list[data-size=m] [tuiOption]{--t-option-padding-inline: .5rem;font:var(--tui-font-text-s);min-block-size:2.5rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list[data-size=l]{--tui-data-list-padding: .375rem;--tui-data-list-margin: .125rem}tui-data-list[data-size=l] [tuiOption][new]:not([tuiCell]){gap:1rem}tui-data-list[data-size=l]>.t-empty,tui-data-list[data-size=l] [tuiOption]{--t-option-padding-inline: .625rem;font:var(--tui-font-text-m);min-block-size:2.75rem;padding-block-start:.375rem;padding-block-end:.375rem}tui-data-list>.t-empty{display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0}tui-data-list [tuiOption]:not([new]){justify-content:space-between}tui-data-list [tuiOption]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;align-items:center;box-sizing:border-box;margin:var(--tui-data-list-margin) 0;text-align:start;color:var(--tui-text-primary);border-radius:var(--tui-radius-s);outline:none;cursor:pointer;word-break:break-word;background-clip:padding-box}tui-data-list [tuiOption]:disabled{opacity:var(--tui-disabled-opacity);cursor:default}@media (hover: hover) and (pointer: fine){tui-data-list [tuiOption]:hover:not(:disabled){background-color:var(--tui-background-neutral-1)}}tui-data-list [tuiOption]:active:not(:disabled),tui-data-list [tuiOption]:focus-within,tui-data-list [tuiOption]._with-dropdown{background-color:var(--tui-background-neutral-1)}tui-data-list [tuiOption]:not([new]):before{margin-inline-end:.5rem}tui-data-list [tuiOption]:after{font-size:1rem;margin:0 -.625rem 0 auto;border-inline-start:.5rem solid;border-inline-end:.5rem solid}tui-data-list>.t-empty,tui-data-list [tuiOption]{padding-inline-start:var(--t-option-padding-inline);padding-inline-end:var(--t-option-padding-inline)}tui-opt-group{position:relative;display:flex;font:var(--tui-font-text-xs);font-weight:700;color:var(--tui-text-primary);flex-direction:column;line-height:1rem}tui-data-list[data-size=l] tui-opt-group{font:var(--tui-font-text-m);font-weight:700;line-height:1.25rem}tui-data-list[data-size=l] tui-opt-group:before{padding-inline-start:.625rem;padding-inline-end:.625rem}tui-data-list[data-size=l] tui-opt-group:after{left:.625rem;right:.625rem}tui-opt-group:empty:before,tui-opt-group:empty:after{display:none}tui-opt-group:before{content:attr(data-label);padding:var(--tui-data-list-padding) .5rem var(--tui-data-list-padding);margin:var(--tui-data-list-margin) 0;white-space:normal;word-break:break-word}tui-sheet-dialog tui-opt-group:before{font:var(--tui-font-heading-6);padding:.5rem 0!important;margin:0}tui-opt-group:after{position:absolute;left:.5rem;right:.5rem;top:var(--tui-data-list-padding);block-size:1px;background:var(--tui-border-normal)}tui-opt-group:not(:empty)~tui-opt-group:before{padding-block-start:calc(.75rem + var(--tui-data-list-padding))}tui-opt-group:not(:empty)~tui-opt-group[data-label=\"\"]:before,tui-opt-group:not(:empty)~tui-opt-group:not([data-label]):before{padding:var(--tui-data-list-padding) 0}tui-opt-group:not(:empty)~tui-opt-group:after{content:\"\"}tui-opt-group[data-label=\"\"]:before,tui-opt-group:not([data-label]):before{content:\"\";padding:0;margin:0}\n"] }]
-        }], propDecorators: { legacyOptionsQuery: [{
-                type: ContentChildren,
-                args: [forwardRef(() => TuiOption), { descendants: true }]
-            }], optionsQuery: [{
-                type: ContentChildren,
-                args: [forwardRef(() => TuiOptionWithValue), { descendants: true }]
-            }], emptyContent: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }] } });
+                    }, template: "<ng-content />\n@if (empty()) {\n    <!-- tuiOption selector purely for cosmetics, do not import -->\n    <span\n        tuiCell\n        tuiOption\n        class=\"t-empty\"\n    >\n        <ng-container *polymorpheusOutlet=\"emptyContent() || fallback() as text\">\n            {{ text }}\n        </ng-container>\n    </span>\n}\n", styles: ["tui-data-list{display:flex;flex-direction:column;padding:calc(var(--tui-data-list-padding) - var(--tui-data-list-margin)) var(--tui-data-list-padding)}tui-data-list:focus-within [tuiOption]._with-dropdown:not(:focus){background:transparent}tui-data-list[data-size=s]{--tui-data-list-margin: 0rem;--tui-data-list-padding: .25rem}tui-data-list[data-size=s] [tuiOption]{font:var(--tui-font-text-s);min-block-size:2rem;padding:.3125rem .375rem}tui-data-list[data-size=s] [tuiOption]:before{font-size:1rem}tui-data-list[data-size=m]{--tui-data-list-margin: .0625rem;--tui-data-list-padding: .25rem}tui-data-list[data-size=m] [tuiOption]{font:var(--tui-font-text-s);min-block-size:2.5rem;padding:.375rem .5rem}tui-data-list[data-size=l]{--tui-data-list-margin: .125rem;--tui-data-list-padding: .375rem}tui-data-list[data-size=l] [tuiOption]{font:var(--tui-font-text-m);min-block-size:2.75rem;padding:.375rem .625rem}tui-data-list [tuiOption]{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;box-sizing:border-box;margin:var(--tui-data-list-margin) 0;border-radius:var(--tui-radius-s);outline:none!important;cursor:pointer;word-break:break-word}tui-data-list [tuiOption]:disabled{opacity:var(--tui-disabled-opacity);cursor:default}@media (hover: hover) and (pointer: fine){tui-data-list [tuiOption]:hover:not(:disabled){background:var(--tui-background-neutral-1)}}tui-data-list [tuiOption]:active:not(:disabled),tui-data-list [tuiOption]:focus-within,tui-data-list [tuiOption]._with-dropdown{background:var(--tui-background-neutral-1)}tui-data-list [tuiOption]:after{font-size:1rem;margin-inline:auto -.625rem;border-inline:.5rem solid}tui-data-list>.t-empty{pointer-events:none;color:var(--tui-text-tertiary)}tui-opt-group{position:relative;display:flex;font:var(--tui-font-text-xs);font-weight:700;color:var(--tui-text-primary);flex-direction:column;line-height:1rem}tui-data-list[data-size=s] tui-opt-group:before{padding-inline:.375rem}tui-data-list[data-size=l] tui-opt-group{font:var(--tui-font-text-m);font-weight:700;line-height:1.25rem}tui-data-list[data-size=l] tui-opt-group:before{padding-inline:.625rem}tui-data-list[data-size=l] tui-opt-group:after{inset-inline:.625rem}tui-opt-group:empty:before,tui-opt-group:empty:after{display:none}tui-opt-group:before{content:attr(data-label);padding:var(--tui-data-list-padding) .5rem;margin:var(--tui-data-list-margin) 0;white-space:normal;word-break:break-word}tui-sheet-dialog tui-opt-group:before{font:var(--tui-font-heading-6);padding:.5rem 0!important;margin:0}tui-opt-group:after{position:absolute;top:var(--tui-data-list-padding);inset-inline:.5rem;block-size:1px;background:var(--tui-border-normal)}tui-opt-group:not(:empty)~tui-opt-group:before{padding-block-start:calc(.75rem + var(--tui-data-list-padding))}tui-opt-group:not(:empty)~tui-opt-group[data-label=\"\"]:before{padding:var(--tui-data-list-padding) 0}tui-opt-group:not(:empty)~tui-opt-group:after{content:\"\"}tui-opt-group[data-label=\"\"]:before{content:\"\";padding:0;margin:0}\n"] }]
+        }] });
 
-class TuiDataListDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDataListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDataListDirective, isStandalone: true, selector: "ng-template[tuiDataList]", ngImport: i0 }); }
+class TuiOptGroup {
+    constructor() {
+        this.label = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiOptGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiOptGroup, isStandalone: true, selector: "tui-opt-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.data-label": "label() || \"\"" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDataListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiOptGroup, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ng-template[tuiDataList]',
+                    selector: 'tui-opt-group',
+                    host: {
+                        role: 'group',
+                        '[attr.data-label]': 'label() || ""',
+                    },
                 }]
         }] });
-function tuiAsDataList(list) {
-    return tuiProvide(TuiDataListDirective, list);
-}
 
-class TuiOptGroup {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiOptGroup, isStandalone: true, selector: "tui-opt-group", inputs: { label: "label" }, host: { attributes: { "role": "group" }, properties: { "attr.data-label": "label" } }, ngImport: i0 }); }
+class TuiOption {
+    constructor() {
+        this.vcr = inject(ViewContainerRef);
+        this.isMobile = inject(TUI_IS_MOBILE);
+        this.el = tuiInjectElement();
+        this.datalist = inject(forwardRef(() => TuiDataListComponent), { optional: true });
+        this.content = inject(TUI_OPTION_CONTENT, {
+            optional: true,
+        });
+        this.ref = this.content &&
+            createComponent(this.content, {
+                environmentInjector: inject(EnvironmentInjector),
+                elementInjector: inject(INJECTOR),
+                hostElement: tuiInjectElement(),
+            });
+        this.dropdown = inject(TuiDropdownDirective, {
+            self: true,
+            optional: true,
+        })?.ref;
+        this.disabled = input(false);
+        if (this.ref) {
+            this.vcr.insert(this.ref.hostView);
+            this.ref.changeDetectorRef.detectChanges();
+        }
+    }
+    // Preventing focus loss upon focused option removal
+    ngOnDestroy() {
+        this.datalist?.handleFocusLossIfNecessary(this.el);
+    }
+    onMouseMove() {
+        if (!this.isMobile &&
+            !tuiIsFocused(this.el) &&
+            this.datalist &&
+            this.el.closest('[tuiDataListDropdownManager]')) {
+            this.el.focus({ preventScroll: true });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiOption, isStandalone: true, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "mousemove.zoneless": "onMouseMove()" }, properties: { "attr.disabled": "disabled() || null", "class._with-dropdown": "dropdown?.()" } }, hostDirectives: [{ directive: i1.TuiWithIcons }, { directive: i2.TuiCell }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiOption, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'tui-opt-group',
+                    selector: 'button[tuiOption], a[tuiOption], label[tuiOption]',
+                    hostDirectives: [TuiWithIcons, TuiCell],
                     host: {
-                        role: 'group',
-                        '[attr.data-label]': 'label',
+                        type: 'button',
+                        role: 'option',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[class._with-dropdown]': 'dropdown?.()',
+                        '(mousemove.zoneless)': 'onMouseMove()',
                     },
                 }]
-        }], propDecorators: { label: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 const TuiDataList = [
     TuiDataListComponent,
-    TuiDataListDirective,
     TuiOption,
-    TuiOptionNew,
     TuiOptionWithValue,
     TuiOptGroup,
 ];
@@ -395,5 +233,5 @@ const TuiDataList = [
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DATA_LIST_ACCESSOR, TUI_DATA_LIST_HOST, TUI_OPTION_CONTENT, TuiDataList, TuiDataListComponent, TuiDataListDirective, TuiOptGroup, TuiOption, TuiOptionNew, TuiOptionWithValue, TuiWithOptionContent, tuiAsDataList, tuiAsDataListAccessor, tuiAsDataListHost, tuiAsOptionContent, tuiInjectDataListSize };
+export { TUI_DATA_LIST_HOST, TUI_OPTION_CONTENT, TuiDataList, TuiDataListComponent, TuiOptGroup, TuiOption, TuiOptionWithValue, TuiWithOptionContent, tuiAsDataListHost, tuiAsOptionContent, tuiInjectDataListSize };
 //# sourceMappingURL=taiga-ui-core-components-data-list.mjs.map