@taiga-ui/core 4.52.0-canary.56739a2 → 4.52.0-canary.58fe47a

package/fesm2022/taiga-ui-core-components-cell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"taiga-ui-core-components-cell.mjs","sources":["../../../projects/core/components/cell/cell.options.ts","../../../projects/core/components/cell/cell.directive.ts","../../../projects/core/components/cell/taiga-ui-core-components-cell.ts"],"sourcesContent":["import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\nimport {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core/types';\n\nexport interface TuiCellOptions {\n    readonly height: 'compact' | 'normal' | 'spacious';\n    readonly size: TuiSizeL | TuiSizeS | '';\n}\n\nexport const [TUI_CELL_OPTIONS, tuiCellOptionsProvider] =\n    tuiCreateOptions<TuiCellOptions>({height: 'normal', size: 'l'});\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    Directive,\n    inject,\n    input,\n    ViewEncapsulation,\n} from '@angular/core';\nimport {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button';\n\nimport {TUI_CELL_OPTIONS} from './cell.options';\n\n@Component({\n    template: '',\n    styleUrl: './cell.styles.less',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {class: 'tui-cell'},\n})\nclass Styles {}\n\n@Directive({\n    selector: '[tuiCell]:not(ng-template)',\n    providers: [tuiButtonOptionsProvider({size: 's'})],\n    host: {\n        tuiCell: '',\n        '[attr.data-size]': 'size() || options.size || \"l\"',\n        '[attr.data-height]': 'height()',\n    },\n})\nexport class TuiCell {\n    protected readonly nothing = tuiWithStyles(Styles);\n    protected readonly options = inject(TUI_CELL_OPTIONS);\n\n    public readonly size = input(this.options.size, {alias: 'tuiCell'});\n    public readonly height = input(this.options.height, {alias: 'tuiCellHeight'});\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,15 +1,13 @@
-import { NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, ContentChild, ViewContainerRef, forwardRef, createComponent, EnvironmentInjector, INJECTOR, Input, signal, Component, ChangeDetectionStrategy, NgZone, DestroyRef, ChangeDetectorRef, isSignal, ViewEncapsulation, ContentChildren } 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, ViewContainerRef, forwardRef, createComponent, INJECTOR, EnvironmentInjector, input, NgZone, DestroyRef, ChangeDetectorRef, contentChildren, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { tuiZonefree, tuiTakeUntilDestroyed } from '@taiga-ui/cdk/observables';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
-import { tuiIsNativeFocused, tuiMoveFocus, tuiIsNativeFocusedIn } from '@taiga-ui/cdk/utils/focus';
-import { tuiProvide, tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiIsFocused, tuiMoveFocus, tuiIsFocusedIn } from '@taiga-ui/cdk/utils/focus';
+import { tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
 import { tuiAsAuxiliary, TUI_NOTHING_FOUND_MESSAGE } 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';
@@ -35,37 +33,27 @@ 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: "16.2.12", ngImport: i0, type: TuiWithOptionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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.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: "local", first: true, predicate: TUI_OPTION_CONTENT, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiWithOptionContent, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                }]
-        }], propDecorators: { localContent: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithOptionContent, decorators: [{
+            type: Directive
+        }], 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 {
+class TuiOption {
     constructor() {
         this.vcr = inject(ViewContainerRef);
         this.isMobile = inject(TUI_IS_MOBILE);
@@ -84,7 +72,7 @@ class TuiOptionNew {
             self: true,
             optional: true,
         })?.ref;
-        this.disabled = false;
+        this.disabled = input(false);
         if (this.ref) {
             this.vcr.insert(this.ref.hostView);
             this.ref.changeDetectorRef.detectChanges();
@@ -96,145 +84,54 @@ class TuiOptionNew {
     }
     onMouseMove() {
         if (!this.isMobile &&
-            !tuiIsNativeFocused(this.el) &&
+            !tuiIsFocused(this.el) &&
             this.dataList &&
             this.el.closest('[tuiDataListDropdownManager]')) {
             this.el.focus({ preventScroll: true });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOptionNew, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", 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 }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOptionNew, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOption, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
-                    selector: 'button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]',
+                    selector: 'button[tuiOption], a[tuiOption], label[tuiOption]',
                     hostDirectives: [TuiWithIcons],
                     host: {
                         type: 'button',
                         role: 'option',
-                        '[attr.disabled]': 'disabled || null',
+                        '[attr.disabled]': 'disabled() || null',
                         '[class._with-dropdown]': 'dropdown?.()',
                         '(mousemove.zoneless)': 'onMouseMove()',
                     },
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
-                type: Input
-            }] } });
-// TODO(v5): remove [new] from selector
+        }], ctorParameters: () => [] });
 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.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: "16.2.12", ngImport: i0, type: TuiOptionWithValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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.15", ngImport: i0, type: TuiOptionWithValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", 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: "16.2.12", ngImport: i0, type: TuiOptionWithValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptionWithValue, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
-                    selector: 'button[tuiOption][value][new], a[tuiOption][value][new], label[tuiOption][value][new]',
+                    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 &&
-            !tuiIsNativeFocused(this.el) &&
-            this.dataList &&
-            this.el.closest('[tuiDataListDropdownManager]')) {
-            this.el.focus({ preventScroll: true });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: TuiOption, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    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'];
@@ -244,38 +141,28 @@ 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.fallback = toSignal(inject(TUI_NOTHING_FOUND_MESSAGE));
+        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;
         tuiMoveFocus(elements.indexOf(current), elements, step);
     }
     handleFocusLossIfNecessary(element = this.el) {
-        if (tuiIsNativeFocusedIn(element)) {
+        if (tuiIsFocusedIn(element)) {
             this.origin?.focus({ preventScroll: true });
         }
     }
-    ngAfterContentInit() {
-        this.contentReady$.next(true);
-    }
     // TODO: Refactor to :has after Safari support bumped to 15
     ngAfterContentChecked() {
         timer(0)
@@ -285,16 +172,6 @@ class TuiDataListComponent {
             this.cdr.detectChanges();
         });
     }
-    // TODO(v5): delete
-    getOptions(includeDisabled = false) {
-        return [
-            ...this.legacyOptionsQuery,
-            ...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;
@@ -303,40 +180,28 @@ class TuiDataListComponent {
     get elements() {
         return Array.from(this.el.querySelectorAll('[tuiOption]'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [
+    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: { 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: [
             tuiAsDataListAccessor(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(function () { return TuiOption; }), descendants: true }, { propertyName: "optionsQuery", predicate: i0.forwardRef(function () { return TuiOptionWithValue; }), descendants: true }], ngImport: i0, template: "<ng-content />\n<div\n    *ngIf=\"empty()\"\n    class=\"t-empty\"\n>\n    <ng-container *polymorpheusOutlet=\"emptyContent || fallback() as text\">\n        {{ text }}\n    </ng-container>\n</div>\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;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-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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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    <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]: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]: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]: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]{-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]: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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDataListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDataListComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-data-list', imports: [NgIf, PolymorpheusOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'tui-data-list', imports: [PolymorpheusOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         tuiAsDataListAccessor(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()',
@@ -345,57 +210,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '(keydown.shift.tab)': 'handleFocusLossIfNecessary()',
                         '(keydown.arrowDown.prevent)': 'onKeyDownArrow($event.target, 1)',
                         '(keydown.arrowUp.prevent)': 'onKeyDownArrow($event.target, -1)',
-                    }, template: "<ng-content />\n<div\n    *ngIf=\"empty()\"\n    class=\"t-empty\"\n>\n    <ng-container *polymorpheusOutlet=\"emptyContent || fallback() as text\">\n        {{ text }}\n    </ng-container>\n</div>\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;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-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
-            }] } });
-
-class TuiDataListDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDataListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDataListDirective, isStandalone: true, selector: "ng-template[tuiDataList]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDataListDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[tuiDataList]',
-                }]
+                    }, 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]: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]: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]: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]{-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]: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"] }]
         }] });
-function tuiAsDataList(list) {
-    return tuiProvide(TuiDataListDirective, list);
-}
 
 class TuiOptGroup {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiOptGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiOptGroup, isStandalone: true, selector: "tui-opt-group", inputs: { label: "label" }, host: { attributes: { "role": "group" }, properties: { "attr.data-label": "label" } }, ngImport: i0 }); }
+    constructor() {
+        this.label = input();
+    }
+    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: "17.1.0", version: "19.2.15", 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: "16.2.12", ngImport: i0, type: TuiOptGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiOptGroup, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'tui-opt-group',
                     host: {
                         role: 'group',
-                        '[attr.data-label]': 'label',
+                        '[attr.data-label]': 'label()',
                     },
                 }]
-        }], propDecorators: { label: [{
-                type: Input
-            }] } });
+        }] });
 
 const TuiDataList = [
     TuiDataListComponent,
-    TuiDataListDirective,
     TuiOption,
-    TuiOptionNew,
     TuiOptionWithValue,
     TuiOptGroup,
 ];
@@ -404,5 +242,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_ACCESSOR, TUI_DATA_LIST_HOST, TUI_OPTION_CONTENT, TuiDataList, TuiDataListComponent, TuiOptGroup, TuiOption, TuiOptionWithValue, TuiWithOptionContent, tuiAsDataListAccessor, tuiAsDataListHost, tuiAsOptionContent, tuiInjectDataListSize };
 //# sourceMappingURL=taiga-ui-core-components-data-list.mjs.map