@taiga-ui/kit 4.52.0-canary.ece97e9 → 4.52.0-canary.efbd0d4

package/fesm2022/taiga-ui-kit-components-rating.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-components-rating.mjs","sources":["../../../projects/kit/components/rating/rating.options.ts","../../../projects/kit/components/rating/rating.component.ts","../../../projects/kit/components/rating/rating.template.html","../../../projects/kit/components/rating/taiga-ui-kit-components-rating.ts"],"sourcesContent":["import {InjectionToken, type Provider} from '@angular/core';\nimport {type TuiContext} from '@taiga-ui/cdk/types';\nimport {tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {type PolymorpheusContent} from '@taiga-ui/polymorpheus';\n\nexport interface TuiRatingContext extends TuiContext<number> {\n    readonly value: number;\n    readonly filled: boolean;\n}\n\nexport interface TuiRatingOptions {\n    readonly icon: PolymorpheusContent<TuiRatingContext>;\n    readonly max: number;\n}\n\nexport const TUI_RATING_DEFAULT_OPTIONS: TuiRatingOptions = {\n    icon: '@tui.star',\n    max: 5,\n};\n\nexport const TUI_RATING_OPTIONS = new InjectionToken(\n    ngDevMode ? 'TUI_RATING_OPTIONS' : '',\n    {\n        factory: () => TUI_RATING_DEFAULT_OPTIONS,\n    },\n);\n\nexport function tuiRatingOptionsProvider(options: Partial<TuiRatingOptions>): Provider {\n    return tuiProvideOptions(TUI_RATING_OPTIONS, options, TUI_RATING_DEFAULT_OPTIONS);\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    inject,\n    input,\n    signal,\n} from '@angular/core';\nimport {FormsModule} from '@angular/forms';\nimport {TuiControl} from '@taiga-ui/cdk/classes';\nimport {tuiFallbackValueProvider} from '@taiga-ui/cdk/tokens';\nimport {tuiClamp} from '@taiga-ui/cdk/utils/math';\nimport {TuiIcon} from '@taiga-ui/core/components/icon';\nimport {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';\n\nimport {TUI_RATING_OPTIONS} from './rating.options';\n\n@Component({\n    selector: 'tui-rating',\n    imports: [FormsModule, PolymorpheusOutlet, TuiIcon],\n    templateUrl: './rating.template.html',\n    styleUrl: './rating.style.less',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [tuiFallbackValueProvider(0)],\n    host: {\n        '[class._disabled]': 'disabled()',\n        '[class._readonly]': 'readOnly()',\n        '[class._active]': 'active()',\n        '(keydown.capture)': 'onKeyDown($event)',\n        '(pointerdown)': 'onPointer(1)',\n        '(pointercancel)': 'onPointer(-1)',\n        '(document:pointerup)': 'onPointer(-1)',\n    },\n})\nexport class TuiRating extends TuiControl<number> {\n    private readonly options = inject(TUI_RATING_OPTIONS);\n\n    protected readonly active = signal(0);\n    protected readonly array = computed(() => new Array(this.max()));\n\n    public readonly icon = input(this.options.icon);\n    public readonly max = input(this.options.max);\n\n    protected onKeyDown(event: KeyboardEvent): void {\n        if (this.readOnly()) {\n            event.preventDefault();\n        }\n    }\n\n    protected onPointer(delta: number): void {\n        this.active.update((active) => tuiClamp(active + delta, 0, 1));\n    }\n\n    protected onClick(value: number): void {\n        if (this.active()) {\n            this.onChange(value);\n        }\n    }\n\n    protected isActive(index: number): boolean {\n        return Math.ceil(this.value()) >= this.max() - index;\n    }\n\n    protected isFraction(index: number): boolean {\n        return this.value() > this.max() - index - 1 && this.value() < this.max() - index;\n    }\n\n    protected getCut(index: number): number {\n        return this.isFraction(index)\n            ? 100 * Math.max(this.max() - index - this.value(), 0)\n            : 0;\n    }\n}\n","<input\n    min=\"1\"\n    type=\"range\"\n    class=\"t-range\"\n    [attr.aria-disabled]=\"readOnly()\"\n    [disabled]=\"disabled()\"\n    [max]=\"max()\"\n    [ngModel]=\"value()\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (blur)=\"onTouched()\"\n    (ngModelChange)=\"onChange($event)\"\n/>\n<div class=\"t-items\">\n    @for (_ of array(); track $index) {\n        @let $implicit = max() - $index;\n        @let filled = $implicit - value() < 1;\n\n        <div\n            class=\"t-item\"\n            [class.t-item_active]=\"isActive($index)\"\n            (pointerup)=\"onClick($implicit)\"\n        >\n            @if (isFraction($index)) {\n                <tui-icon\n                    *polymorpheusOutlet=\"icon() as src; context: {$implicit, filled: false, value: value()}\"\n                    class=\"t-icon t-icon_blank\"\n                    [background]=\"src.toString()\"\n                    [style.--t-cut.%]=\"100 - getCut($index)\"\n                />\n            }\n            <tui-icon\n                *polymorpheusOutlet=\"icon() as src; context: {$implicit, filled, value: value()}\"\n                class=\"t-icon\"\n                [background]=\"src.toString()\"\n                [style.--t-cut.%]=\"getCut($index)\"\n            />\n        </div>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"taiga-ui-kit-components-rating.mjs","sources":["../../../projects/kit/components/rating/rating.options.ts","../../../projects/kit/components/rating/rating.component.ts","../../../projects/kit/components/rating/rating.template.html","../../../projects/kit/components/rating/taiga-ui-kit-components-rating.ts"],"sourcesContent":["import {type TuiContext} from '@taiga-ui/cdk/types';\nimport {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\nimport {type PolymorpheusContent} from '@taiga-ui/polymorpheus';\n\nexport interface TuiRatingContext extends TuiContext<number> {\n    readonly value: number;\n    readonly filled: boolean;\n}\n\nexport interface TuiRatingOptions {\n    readonly icon: PolymorpheusContent<TuiRatingContext>;\n    readonly max: number;\n}\n\nexport const TUI_RATING_DEFAULT_OPTIONS: TuiRatingOptions = {\n    icon: '@tui.star',\n    max: 5,\n};\n\nexport const [TUI_RATING_OPTIONS, tuiRatingOptionsProvider] = tuiCreateOptions(\n    TUI_RATING_DEFAULT_OPTIONS,\n);\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    inject,\n    input,\n    signal,\n} from '@angular/core';\nimport {FormsModule} from '@angular/forms';\nimport {TuiControl} from '@taiga-ui/cdk/classes';\nimport {tuiFallbackValueProvider} from '@taiga-ui/cdk/tokens';\nimport {tuiClamp} from '@taiga-ui/cdk/utils/math';\nimport {TuiIcon} from '@taiga-ui/core/components/icon';\nimport {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';\n\nimport {TUI_RATING_OPTIONS} from './rating.options';\n\n@Component({\n    selector: 'tui-rating',\n    imports: [FormsModule, PolymorpheusOutlet, TuiIcon],\n    templateUrl: './rating.template.html',\n    styleUrl: './rating.style.less',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [tuiFallbackValueProvider(0)],\n    host: {\n        '[class._disabled]': 'disabled()',\n        '[class._readonly]': 'readOnly()',\n        '[class._active]': 'active()',\n        '(keydown.capture)': 'onKeyDown($event)',\n        '(pointerdown)': 'onPointer(1)',\n        '(pointercancel)': 'onPointer(-1)',\n        '(document:pointerup)': 'onPointer(-1)',\n    },\n})\nexport class TuiRating extends TuiControl<number> {\n    private readonly options = inject(TUI_RATING_OPTIONS);\n\n    protected readonly active = signal(0);\n    protected readonly array = computed(() => Array.from({length: this.max()}));\n\n    public readonly icon = input(this.options.icon);\n    public readonly max = input(this.options.max);\n\n    protected onKeyDown(event: KeyboardEvent): void {\n        if (this.readOnly()) {\n            event.preventDefault();\n        }\n    }\n\n    protected onPointer(delta: number): void {\n        this.active.update((active) => tuiClamp(active + delta, 0, 1));\n    }\n\n    protected onClick(value: number): void {\n        if (this.active()) {\n            this.onChange(value);\n        }\n    }\n\n    protected isActive(index: number): boolean {\n        return Math.ceil(this.value()) >= this.max() - index;\n    }\n\n    protected isFraction(index: number): boolean {\n        return this.value() > this.max() - index - 1 && this.value() < this.max() - index;\n    }\n\n    protected getCut(index: number): number {\n        return this.isFraction(index)\n            ? 100 * Math.max(this.max() - index - this.value(), 0)\n            : 0;\n    }\n}\n","<input\n    min=\"1\"\n    type=\"range\"\n    class=\"t-range\"\n    [attr.aria-disabled]=\"readOnly()\"\n    [disabled]=\"disabled()\"\n    [max]=\"max()\"\n    [ngModel]=\"value()\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (blur)=\"onTouched()\"\n    (ngModelChange)=\"onChange($event)\"\n/>\n<div class=\"t-items\">\n    @for (_ of array(); track $index) {\n        @let $implicit = max() - $index;\n        @let filled = $implicit - value() < 1;\n\n        <div\n            class=\"t-item\"\n            [class.t-item_active]=\"isActive($index)\"\n            (pointerup)=\"onClick($implicit)\"\n        >\n            @if (isFraction($index)) {\n                <tui-icon\n                    *polymorpheusOutlet=\"icon() as src; context: {$implicit, filled: false, value: value()}\"\n                    class=\"t-icon t-icon_blank\"\n                    [background]=\"src.toString()\"\n                    [style.--t-cut.%]=\"100 - getCut($index)\"\n                />\n            }\n            <tui-icon\n                *polymorpheusOutlet=\"icon() as src; context: {$implicit, filled, value: value()}\"\n                class=\"t-icon\"\n                [background]=\"src.toString()\"\n                [style.--t-cut.%]=\"getCut($index)\"\n            />\n        </div>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAca,MAAA,0BAA0B,GAAqB;AACxD,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,GAAG,EAAE,CAAC;;AAGH,MAAM,CAAC,kBAAkB,EAAE,wBAAwB,CAAC,GAAG,gBAAgB,CAC1E,0BAA0B;;ACcxB,MAAO,SAAU,SAAQ,UAAkB,CAAA;AAjBjD,IAAA,WAAA,GAAA;;AAkBqB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,kBAAkB,CAAC;AAElC,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;QAClB,IAAK,CAAA,KAAA,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,EAAC,CAAC,CAAC;QAE3D,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;QAC/B,IAAG,CAAA,GAAA,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;AA+BhD;AA7Ba,IAAA,SAAS,CAAC,KAAoB,EAAA;AACpC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE;;;AAIpB,IAAA,SAAS,CAAC,KAAa,EAAA;QAC7B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;;AAGxD,IAAA,OAAO,CAAC,KAAa,EAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACf,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;;AAIlB,IAAA,QAAQ,CAAC,KAAa,EAAA;AAC5B,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK;;AAG9C,IAAA,UAAU,CAAC,KAAa,EAAA;QAC9B,OAAO,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK;;AAG3E,IAAA,MAAM,CAAC,KAAa,EAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK;cACtB,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;cACnD,CAAC;;+GApCF,SAAS,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,SAAS,EAXP,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,aAAA,EAAA,cAAA,EAAA,eAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,eAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,eAAA,EAAA,UAAA,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,ECvB5C,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,kyCAuCA,EDpBc,MAAA,EAAA,CAAA,0zEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,8FAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,kBAAkB,8HAAE,OAAO,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAezC,SAAS,EAAA,UAAA,EAAA,CAAA;kBAjBrB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,WACb,CAAC,WAAW,EAAE,kBAAkB,EAAE,OAAO,CAAC,EAAA,eAAA,EAGlC,uBAAuB,CAAC,MAAM,aACpC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,EAClC,IAAA,EAAA;AACF,wBAAA,mBAAmB,EAAE,YAAY;AACjC,wBAAA,mBAAmB,EAAE,YAAY;AACjC,wBAAA,iBAAiB,EAAE,UAAU;AAC7B,wBAAA,mBAAmB,EAAE,mBAAmB;AACxC,wBAAA,eAAe,EAAE,cAAc;AAC/B,wBAAA,iBAAiB,EAAE,eAAe;AAClC,wBAAA,sBAAsB,EAAE,eAAe;AAC1C,qBAAA,EAAA,QAAA,EAAA,kyCAAA,EAAA,MAAA,EAAA,CAAA,0zEAAA,CAAA,EAAA;;;AEhCL;;AAEG;;;;"}

package/fesm2022/taiga-ui-kit-components-routable-dialog.mjs

@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
 import { inject, INJECTOR, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
-import { TuiDialogService } from '@taiga-ui/core/components/dialog';
+import { TuiDialogService } from '@taiga-ui/core/portals/dialog';
 import { PolymorpheusComponent } from '@taiga-ui/polymorpheus';
-import { from, of, switchMap } from 'rxjs';
+import { from, of, delay, switchMap } from 'rxjs';
 
 function tuiGenerateDialogableRoute(component, { path = '', outlet = '', ...dialogOptions } = {}) {
     return {
@@ -32,7 +32,12 @@ class TuiRoutableDialog {
         this.dialog = inject(TuiDialogService);
         const { dialog } = this.route.snapshot.data;
         from(isClass(dialog) ? of(dialog) : dialog().then((m) => m.default ?? m))
-            .pipe(switchMap((dialog) => this.dialog.open(new PolymorpheusComponent(dialog, this.injector), this.route.snapshot.data['dialogOptions'])), takeUntilDestroyed())
+            .pipe(
+        /**
+         * All portal hosts are created only after the first render
+         * See `@if (top()) {...}` condition in `tui-root`
+         */
+        delay(0), switchMap((dialog) => this.dialog.open(new PolymorpheusComponent(dialog, this.injector), this.route.snapshot.data['dialogOptions'])), takeUntilDestroyed())
             .subscribe({ complete: () => this.onDialogClosing() });
     }
     get lazyLoadedBackUrl() {
@@ -51,13 +56,12 @@ class TuiRoutableDialog {
             relativeTo: this.route,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiRoutableDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiRoutableDialog, isStandalone: true, selector: "tui-routable-dialog", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiRoutableDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TuiRoutableDialog, isStandalone: true, selector: "tui-routable-dialog", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiRoutableDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiRoutableDialog, decorators: [{
             type: Component,
             args: [{
-                    standalone: true,
                     selector: 'tui-routable-dialog',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,

package/fesm2022/taiga-ui-kit-components-routable-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-components-routable-dialog.mjs","sources":["../../../projects/kit/components/routable-dialog/generate-dialogable-route.ts","../../../projects/kit/components/routable-dialog/routable-dialog.component.ts","../../../projects/kit/components/routable-dialog/taiga-ui-kit-components-routable-dialog.ts"],"sourcesContent":["import {type Type} from '@angular/core';\nimport {type DefaultExport, type Route} from '@angular/router';\nimport {type TuiDialogOptions} from '@taiga-ui/core/components/dialog';\n\nexport function tuiGenerateDialogableRoute<I>(\n    component: Type<any> | (() => Promise<DefaultExport<Type<any>> | Type<any>>),\n    {\n        path = '',\n        outlet = '',\n        ...dialogOptions\n    }: Partial<TuiDialogOptions<I>> & {path?: string; outlet?: string} = {},\n): Route {\n    return {\n        path,\n        outlet,\n        loadComponent: async () => import('./routable-dialog.component'),\n        data: {\n            dialog: component,\n            backUrl: path\n                .split('/')\n                .map(() => '..')\n                .join('/'),\n            isLazy: path === '',\n            dialogOptions,\n        },\n    };\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    inject,\n    INJECTOR,\n    type Type,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {ActivatedRoute, Router} from '@angular/router';\nimport {TuiDialogService} from '@taiga-ui/core/components/dialog';\nimport {PolymorpheusComponent} from '@taiga-ui/polymorpheus';\nimport {from, of, switchMap} from 'rxjs';\n\n@Component({\n    standalone: true,\n    selector: 'tui-routable-dialog',\n    template: '',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class TuiRoutableDialog {\n    private readonly route = inject(ActivatedRoute);\n    private readonly router = inject(Router);\n    private readonly injector = inject(INJECTOR);\n    private readonly initialUrl = this.router.url;\n    private readonly dialog = inject(TuiDialogService);\n\n    constructor() {\n        const {dialog} = this.route.snapshot.data;\n\n        from(isClass(dialog) ? of(dialog) : dialog().then((m: any) => m.default ?? m))\n            .pipe(\n                switchMap((dialog: any) =>\n                    this.dialog.open(\n                        new PolymorpheusComponent<Type<any>>(dialog, this.injector),\n                        this.route.snapshot.data['dialogOptions'],\n                    ),\n                ),\n                takeUntilDestroyed(),\n            )\n            .subscribe({complete: () => this.onDialogClosing()});\n    }\n\n    private get lazyLoadedBackUrl(): string {\n        return (this.route.parent?.snapshot.url || []).map(() => '..').join('/');\n    }\n\n    private onDialogClosing(): void {\n        if (this.initialUrl === this.router.url) {\n            this.navigateToParent();\n        }\n    }\n\n    private navigateToParent(): void {\n        const backUrl = this.route.snapshot.data['isLazy']\n            ? this.lazyLoadedBackUrl\n            : this.route.snapshot.data['backUrl'];\n\n        void this.router.navigate([backUrl], {\n            relativeTo: this.route,\n        });\n    }\n}\n\nfunction isClass(fn: unknown): boolean {\n    return (\n        typeof fn === 'function' &&\n        Object.getOwnPropertyDescriptor(fn, 'prototype')?.writable === false\n    );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"taiga-ui-kit-components-routable-dialog.mjs","sources":["../../../projects/kit/components/routable-dialog/generate-dialogable-route.ts","../../../projects/kit/components/routable-dialog/routable-dialog.component.ts","../../../projects/kit/components/routable-dialog/taiga-ui-kit-components-routable-dialog.ts"],"sourcesContent":["import {type Type} from '@angular/core';\nimport {type DefaultExport, type Route} from '@angular/router';\nimport {type TuiDialogOptions} from '@taiga-ui/core/portals/dialog';\n\nexport function tuiGenerateDialogableRoute<I>(\n    component: Type<any> | (() => Promise<DefaultExport<Type<any>> | Type<any>>),\n    {\n        path = '',\n        outlet = '',\n        ...dialogOptions\n    }: Partial<TuiDialogOptions<I>> & {path?: string; outlet?: string} = {},\n): Route {\n    return {\n        path,\n        outlet,\n        loadComponent: async () => import('./routable-dialog.component'),\n        data: {\n            dialog: component,\n            backUrl: path\n                .split('/')\n                .map(() => '..')\n                .join('/'),\n            isLazy: path === '',\n            dialogOptions,\n        },\n    };\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    inject,\n    INJECTOR,\n    type Type,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {ActivatedRoute, Router} from '@angular/router';\nimport {TuiDialogService} from '@taiga-ui/core/portals/dialog';\nimport {PolymorpheusComponent} from '@taiga-ui/polymorpheus';\nimport {delay, from, of, switchMap} from 'rxjs';\n\n@Component({\n    selector: 'tui-routable-dialog',\n    template: '',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport default class TuiRoutableDialog {\n    private readonly route = inject(ActivatedRoute);\n    private readonly router = inject(Router);\n    private readonly injector = inject(INJECTOR);\n    private readonly initialUrl = this.router.url;\n    private readonly dialog = inject(TuiDialogService);\n\n    constructor() {\n        const {dialog} = this.route.snapshot.data;\n\n        from(isClass(dialog) ? of(dialog) : dialog().then((m: any) => m.default ?? m))\n            .pipe(\n                /**\n                 * All portal hosts are created only after the first render\n                 * See `@if (top()) {...}` condition in `tui-root`\n                 */\n                delay(0),\n                switchMap((dialog: any) =>\n                    this.dialog.open(\n                        new PolymorpheusComponent<Type<any>>(dialog, this.injector),\n                        this.route.snapshot.data['dialogOptions'],\n                    ),\n                ),\n                takeUntilDestroyed(),\n            )\n            .subscribe({complete: () => this.onDialogClosing()});\n    }\n\n    private get lazyLoadedBackUrl(): string {\n        return (this.route.parent?.snapshot.url || []).map(() => '..').join('/');\n    }\n\n    private onDialogClosing(): void {\n        if (this.initialUrl === this.router.url) {\n            this.navigateToParent();\n        }\n    }\n\n    private navigateToParent(): void {\n        const backUrl = this.route.snapshot.data['isLazy']\n            ? this.lazyLoadedBackUrl\n            : this.route.snapshot.data['backUrl'];\n\n        void this.router.navigate([backUrl], {\n            relativeTo: this.route,\n        });\n    }\n}\n\nfunction isClass(fn: unknown): boolean {\n    return (\n        typeof fn === 'function' &&\n        Object.getOwnPropertyDescriptor(fn, 'prototype')?.writable === false\n    );\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-kit-components-segmented.mjs

@@ -1,71 +1,55 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, ContentChildren, Directive, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { inject, contentChildren, ElementRef, Directive, input, model, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ResizeObserverService } from '@ng-web-apis/resize-observer';
-import { tuiQueryListChanges, tuiControlValue, tuiZonefree } from '@taiga-ui/cdk/observables';
+import { tuiControlValue, tuiZonefree } from '@taiga-ui/cdk/observables';
 import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 import { tuiInjectElement, tuiIsHTMLElement } from '@taiga-ui/cdk/utils/dom';
 import { tuiPx } from '@taiga-ui/cdk/utils/miscellaneous';
 import { tuiBadgeNotificationOptionsProvider } from '@taiga-ui/kit/components/badge-notification';
 import { NgControl, RadioControlValueAccessor } from '@angular/forms';
 import { RouterLinkActive } from '@angular/router';
-import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
 import { switchMap, map } from 'rxjs';
 
 class TuiSegmentedDirective {
     constructor() {
-        this.controls = EMPTY_QUERY;
-        this.radios = EMPTY_QUERY;
-        this.links = EMPTY_QUERY;
-        this.elements = EMPTY_QUERY;
         this.component = inject(TuiSegmented);
         this.el = tuiInjectElement();
+        this.links = contentChildren(RouterLinkActive);
+        this.elements = contentChildren(RouterLinkActive, { read: ElementRef });
+        this.controls = contentChildren(NgControl, { descendants: true });
+        this.controls$ = toObservable(this.controls);
+        this.radios = contentChildren(RadioControlValueAccessor, {
+            descendants: true,
+        });
     }
     ngAfterContentInit() {
-        tuiQueryListChanges(this.controls)
-            .pipe(switchMap(() => tuiControlValue(this.controls.first)), map((value) => this.radios.toArray().findIndex((c) => c.value === value)))
+        this.controls$
+            .pipe(switchMap(([control]) => tuiControlValue(control)), map((value) => this.radios().findIndex((c) => c.value === value)))
             .subscribe((index) => {
             this.component.update(index);
         });
     }
     ngAfterContentChecked() {
-        if (this.links.length) {
-            this.update(this.elements.get(this.linkIndex)?.nativeElement || null);
+        const index = this.links().findIndex(({ isActive }) => isActive);
+        if (index !== -1) {
+            this.update(this.elements()[index]?.nativeElement || null);
         }
     }
     update(target) {
-        this.component.update(this.getIndex(target));
-    }
-    get linkIndex() {
-        return this.links.toArray().findIndex((link) => link.isActive);
+        this.component.update(Array.from(this.el.children).findIndex((tab) => tab.contains(target)));
     }
-    getIndex(element) {
-        return Array.from(this.el.children).findIndex((tab) => tab.contains(element));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSegmentedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiSegmentedDirective, isStandalone: true, host: { listeners: { "click": "update($event.target)" } }, queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }, { propertyName: "radios", predicate: RadioControlValueAccessor, descendants: true }, { propertyName: "links", predicate: RouterLinkActive }, { propertyName: "elements", predicate: RouterLinkActive, read: ElementRef }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSegmentedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.17", type: TuiSegmentedDirective, isStandalone: true, host: { listeners: { "click": "update($event.target)" } }, queries: [{ propertyName: "links", predicate: RouterLinkActive, isSignal: true }, { propertyName: "elements", predicate: RouterLinkActive, read: ElementRef, isSignal: true }, { propertyName: "controls", predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "radios", predicate: RadioControlValueAccessor, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSegmentedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSegmentedDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     host: {
                         '(click)': 'update($event.target)',
                     },
                 }]
-        }], propDecorators: { controls: [{
-                type: ContentChildren,
-                args: [NgControl, { descendants: true }]
-            }], radios: [{
-                type: ContentChildren,
-                args: [RadioControlValueAccessor, { descendants: true }]
-            }], links: [{
-                type: ContentChildren,
-                args: [RouterLinkActive]
-            }], elements: [{
-                type: ContentChildren,
-                args: [RouterLinkActive, { read: ElementRef }]
-            }] } });
+        }] });
 
 const [TUI_SEGMENTED_OPTIONS, tuiSegmentedOptionsProvider] = tuiCreateOptions({
     size: 's',
@@ -76,26 +60,21 @@ class TuiSegmented {
         this.sub = inject(ResizeObserverService, { self: true })
             .pipe(tuiZonefree(), takeUntilDestroyed())
             .subscribe(() => this.refresh());
-        this.size = inject(TUI_SEGMENTED_OPTIONS).size;
-        this.activeItemIndex = 0;
-        this.activeItemIndexChange = new EventEmitter();
+        this.size = input(inject(TUI_SEGMENTED_OPTIONS).size);
+        this.activeItemIndex = model(0);
     }
     ngOnChanges() {
         this.refresh();
     }
     update(activeItemIndex) {
-        if (activeItemIndex === this.activeItemIndex || activeItemIndex < 0) {
+        if (activeItemIndex === this.activeItemIndex() || activeItemIndex < 0) {
             return;
         }
-        this.activeItemIndex = activeItemIndex;
-        this.activeItemIndexChange.emit(activeItemIndex);
+        this.activeItemIndex.set(activeItemIndex);
         this.refresh();
     }
-    get activeElement() {
-        return this.el.children.item(this.activeItemIndex);
-    }
     refresh() {
-        const el = this.activeElement;
+        const el = this.el.children.item(this.activeItemIndex());
         if (!tuiIsHTMLElement(el)) {
             return;
         }
@@ -106,21 +85,15 @@ class TuiSegmented {
         this.el.style.setProperty('--t-left', tuiPx(offsetLeft));
         this.el.style.setProperty('--t-width', tuiPx(offsetWidth));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiSegmented, isStandalone: true, selector: "tui-segmented", inputs: { size: "size", activeItemIndex: "activeItemIndex" }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { properties: { "attr.data-size": "size" } }, providers: [ResizeObserverService, tuiBadgeNotificationOptionsProvider({ size: 's' })], usesOnChanges: true, hostDirectives: [{ directive: TuiSegmentedDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["tui-segmented{position:relative;display:flex;color:var(--tui-background-base);background:var(--tui-background-neutral-1);overflow:hidden;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}tui-segmented[data-size=s]{--t-padding: .5rem;--t-gap: .5rem;--t-margin: -.125rem;--t-height: var(--tui-height-s);font:var(--tui-font-text-s);border-radius:var(--tui-radius-m)}tui-segmented[data-size=s] tui-icon{font-size:1rem}tui-segmented[data-size=m]{--t-padding: .875rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-m);font:var(--tui-font-text-m);border-radius:var(--tui-radius-m)}tui-segmented[data-size=l]{--t-padding: 1.25rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-l);font:var(--tui-font-text-l);border-radius:var(--tui-radius-l)}tui-segmented[data-size=l]>*:before{block-size:1.25rem}tui-segmented>a,tui-segmented>button,tui-segmented>label,tui-segmented>label>input:not([tuiRadio]){transition-property:color,background,opacity,border-image;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;justify-content:center;block-size:var(--t-height);white-space:nowrap;gap:var(--t-gap);margin:0;padding:0 var(--t-padding);color:var(--tui-text-primary);overflow:hidden;cursor:pointer;font:inherit;border-radius:inherit;border:.125rem solid transparent;background-clip:padding-box;box-sizing:border-box;border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 0 0 100 .5;clip-path:polygon(-1rem calc(50% - .5rem),1px calc(50% - .5rem),1px 0,100% 0,100% 100%,1px 100%,1px calc(50% + .5rem),-1rem calc(50% + .5rem))}tui-segmented>a>*,tui-segmented>button>*,tui-segmented>label>*,tui-segmented>label>input:not([tuiRadio])>*{margin:0 var(--t-margin)}tui-segmented>a:focus-visible,tui-segmented>button:focus-visible,tui-segmented>label:focus-visible,tui-segmented>label>input:not([tuiRadio]):focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.25rem}@media (hover: hover) and (pointer: fine){tui-segmented>a:not(.tui-segmented_active):not(:active):hover,tui-segmented>button:not(.tui-segmented_active):not(:active):hover,tui-segmented>label:not(.tui-segmented_active):not(:active):hover,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover{background-color:var(--tui-background-neutral-1-hover)}tui-segmented>a:not(.tui-segmented_active):not(:active):hover,tui-segmented>button:not(.tui-segmented_active):not(:active):hover,tui-segmented>label:not(.tui-segmented_active):not(:active):hover,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover,tui-segmented>a:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>button:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>label:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}}tui-segmented>a:active,tui-segmented>button:active,tui-segmented>label:active,tui-segmented>label>input:not([tuiRadio]):active,tui-segmented>a:active+*,tui-segmented>button:active+*,tui-segmented>label:active+*,tui-segmented>label>input:not([tuiRadio]):active+*,tui-segmented>a.tui-segmented_active,tui-segmented>button.tui-segmented_active,tui-segmented>label.tui-segmented_active,tui-segmented>label>input:not([tuiRadio]).tui-segmented_active,tui-segmented>a.tui-segmented_active+*,tui-segmented>button.tui-segmented_active+*,tui-segmented>label.tui-segmented_active+*,tui-segmented>label>input:not([tuiRadio]).tui-segmented_active+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}tui-segmented>label>input:not([tuiRadio]){position:absolute;top:-.125rem;left:-.125rem;right:-.125rem;bottom:-.125rem;background:transparent!important}tui-segmented:before{transition-property:top,left,width;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;left:var(--t-left);top:var(--t-top);block-size:var(--t-height);inline-size:var(--t-width);border-radius:inherit;background:currentColor;background-clip:padding-box;border:.125rem solid transparent;box-sizing:border-box;filter:drop-shadow(0 .25rem 1.25rem rgba(0,0,0,.1))}[tuiTheme=dark] tui-segmented,tui-segmented[tuiTheme=dark]{--tui-background-base: var(--tui-background-neutral-1-hover)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: TuiSegmented, isStandalone: true, selector: "tui-segmented", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, host: { properties: { "attr.data-size": "size()" } }, providers: [ResizeObserverService, tuiBadgeNotificationOptionsProvider({ size: 's' })], usesOnChanges: true, hostDirectives: [{ directive: TuiSegmentedDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["tui-segmented{position:relative;display:flex;color:var(--tui-background-base);background:var(--tui-background-neutral-1);overflow:hidden;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}tui-segmented[data-size=s]{--t-padding: .5rem;--t-gap: .5rem;--t-margin: -.125rem;--t-height: var(--tui-height-s);font:var(--tui-font-body-s);border-radius:var(--tui-radius-m)}tui-segmented[data-size=s] tui-icon{font-size:1rem}tui-segmented[data-size=m]{--t-padding: .875rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-m);font:var(--tui-font-body-m);border-radius:var(--tui-radius-m)}tui-segmented[data-size=l]{--t-padding: 1.25rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-l);font:var(--tui-font-body-l);border-radius:var(--tui-radius-l)}tui-segmented[data-size=l]>*:before{block-size:1.25rem}tui-segmented>a,tui-segmented>button,tui-segmented>label,tui-segmented>label>input:not([tuiRadio]){transition-property:color,background,opacity,border-image;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;justify-content:center;block-size:var(--t-height);white-space:nowrap;gap:var(--t-gap);margin:0;padding:0 var(--t-padding);color:var(--tui-text-primary);overflow:hidden;cursor:pointer;font:inherit;border-radius:inherit;border:.125rem solid transparent;background-clip:padding-box;box-sizing:border-box;border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 0 0 100 .5;clip-path:polygon(-1rem calc(50% - .5rem),1px calc(50% - .5rem),1px 0,100% 0,100% 100%,1px 100%,1px calc(50% + .5rem),-1rem calc(50% + .5rem))}tui-segmented>a>*,tui-segmented>button>*,tui-segmented>label>*,tui-segmented>label>input:not([tuiRadio])>*{margin:0 var(--t-margin)}tui-segmented>a:focus-visible,tui-segmented>button:focus-visible,tui-segmented>label:focus-visible,tui-segmented>label>input:not([tuiRadio]):focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.25rem}@media (hover: hover) and (pointer: fine){tui-segmented>a:not(.tui-segmented_active):not(:active):hover,tui-segmented>button:not(.tui-segmented_active):not(:active):hover,tui-segmented>label:not(.tui-segmented_active):not(:active):hover,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover{background-color:var(--tui-background-neutral-1-hover)}tui-segmented>a:not(.tui-segmented_active):not(:active):hover,tui-segmented>button:not(.tui-segmented_active):not(:active):hover,tui-segmented>label:not(.tui-segmented_active):not(:active):hover,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover,tui-segmented>a:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>button:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>label:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}}tui-segmented>a:active,tui-segmented>button:active,tui-segmented>label:active,tui-segmented>label>input:not([tuiRadio]):active,tui-segmented>a:active+*,tui-segmented>button:active+*,tui-segmented>label:active+*,tui-segmented>label>input:not([tuiRadio]):active+*,tui-segmented>a.tui-segmented_active,tui-segmented>button.tui-segmented_active,tui-segmented>label.tui-segmented_active,tui-segmented>label>input:not([tuiRadio]).tui-segmented_active,tui-segmented>a.tui-segmented_active+*,tui-segmented>button.tui-segmented_active+*,tui-segmented>label.tui-segmented_active+*,tui-segmented>label>input:not([tuiRadio]).tui-segmented_active+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}tui-segmented>label>input:not([tuiRadio]){position:absolute;inset:-.125rem;background:transparent!important}tui-segmented:before{transition-property:top,left,width;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inset:var(--t-top) auto auto var(--t-left);block-size:var(--t-height);inline-size:var(--t-width);border-radius:inherit;background:currentColor;background-clip:padding-box;border:.125rem solid transparent;box-sizing:border-box;filter:drop-shadow(0 .25rem 1.25rem rgba(0,0,0,.1))}[dir=rtl] tui-segmented:before{inset-inline:auto var(--t-left)}[tuiTheme=dark] tui-segmented,tui-segmented[tuiTheme=dark]{--tui-background-base: var(--tui-background-neutral-1-hover)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSegmented, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSegmented, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-segmented', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [ResizeObserverService, tuiBadgeNotificationOptionsProvider({ size: 's' })], hostDirectives: [TuiSegmentedDirective], host: {
-                        '[attr.data-size]': 'size',
-                    }, styles: ["tui-segmented{position:relative;display:flex;color:var(--tui-background-base);background:var(--tui-background-neutral-1);overflow:hidden;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}tui-segmented[data-size=s]{--t-padding: .5rem;--t-gap: .5rem;--t-margin: -.125rem;--t-height: var(--tui-height-s);font:var(--tui-font-text-s);border-radius:var(--tui-radius-m)}tui-segmented[data-size=s] tui-icon{font-size:1rem}tui-segmented[data-size=m]{--t-padding: .875rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-m);font:var(--tui-font-text-m);border-radius:var(--tui-radius-m)}tui-segmented[data-size=l]{--t-padding: 1.25rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-l);font:var(--tui-font-text-l);border-radius:var(--tui-radius-l)}tui-segmented[data-size=l]>*:before{block-size:1.25rem}tui-segmented>a,tui-segmented>button,tui-segmented>label,tui-segmented>label>input:not([tuiRadio]){transition-property:color,background,opacity,border-image;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;justify-content:center;block-size:var(--t-height);white-space:nowrap;gap:var(--t-gap);margin:0;padding:0 var(--t-padding);color:var(--tui-text-primary);overflow:hidden;cursor:pointer;font:inherit;border-radius:inherit;border:.125rem solid transparent;background-clip:padding-box;box-sizing:border-box;border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 0 0 100 .5;clip-path:polygon(-1rem calc(50% - .5rem),1px calc(50% - .5rem),1px 0,100% 0,100% 100%,1px 100%,1px calc(50% + .5rem),-1rem calc(50% + .5rem))}tui-segmented>a>*,tui-segmented>button>*,tui-segmented>label>*,tui-segmented>label>input:not([tuiRadio])>*{margin:0 var(--t-margin)}tui-segmented>a:focus-visible,tui-segmented>button:focus-visible,tui-segmented>label:focus-visible,tui-segmented>label>input:not([tuiRadio]):focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.25rem}@media (hover: hover) and (pointer: fine){tui-segmented>a:not(.tui-segmented_active):not(:active):hover,tui-segmented>button:not(.tui-segmented_active):not(:active):hover,tui-segmented>label:not(.tui-segmented_active):not(:active):hover,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover{background-color:var(--tui-background-neutral-1-hover)}tui-segmented>a:not(.tui-segmented_active):not(:active):hover,tui-segmented>button:not(.tui-segmented_active):not(:active):hover,tui-segmented>label:not(.tui-segmented_active):not(:active):hover,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover,tui-segmented>a:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>button:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>label:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}}tui-segmented>a:active,tui-segmented>button:active,tui-segmented>label:active,tui-segmented>label>input:not([tuiRadio]):active,tui-segmented>a:active+*,tui-segmented>button:active+*,tui-segmented>label:active+*,tui-segmented>label>input:not([tuiRadio]):active+*,tui-segmented>a.tui-segmented_active,tui-segmented>button.tui-segmented_active,tui-segmented>label.tui-segmented_active,tui-segmented>label>input:not([tuiRadio]).tui-segmented_active,tui-segmented>a.tui-segmented_active+*,tui-segmented>button.tui-segmented_active+*,tui-segmented>label.tui-segmented_active+*,tui-segmented>label>input:not([tuiRadio]).tui-segmented_active+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}tui-segmented>label>input:not([tuiRadio]){position:absolute;top:-.125rem;left:-.125rem;right:-.125rem;bottom:-.125rem;background:transparent!important}tui-segmented:before{transition-property:top,left,width;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;left:var(--t-left);top:var(--t-top);block-size:var(--t-height);inline-size:var(--t-width);border-radius:inherit;background:currentColor;background-clip:padding-box;border:.125rem solid transparent;box-sizing:border-box;filter:drop-shadow(0 .25rem 1.25rem rgba(0,0,0,.1))}[tuiTheme=dark] tui-segmented,tui-segmented[tuiTheme=dark]{--tui-background-base: var(--tui-background-neutral-1-hover)}\n"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], activeItemIndex: [{
-                type: Input
-            }], activeItemIndexChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'tui-segmented', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [ResizeObserverService, tuiBadgeNotificationOptionsProvider({ size: 's' })], hostDirectives: [TuiSegmentedDirective], host: {
+                        '[attr.data-size]': 'size()',
+                    }, styles: ["tui-segmented{position:relative;display:flex;color:var(--tui-background-base);background:var(--tui-background-neutral-1);overflow:hidden;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}tui-segmented[data-size=s]{--t-padding: .5rem;--t-gap: .5rem;--t-margin: -.125rem;--t-height: var(--tui-height-s);font:var(--tui-font-body-s);border-radius:var(--tui-radius-m)}tui-segmented[data-size=s] tui-icon{font-size:1rem}tui-segmented[data-size=m]{--t-padding: .875rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-m);font:var(--tui-font-body-m);border-radius:var(--tui-radius-m)}tui-segmented[data-size=l]{--t-padding: 1.25rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-l);font:var(--tui-font-body-l);border-radius:var(--tui-radius-l)}tui-segmented[data-size=l]>*:before{block-size:1.25rem}tui-segmented>a,tui-segmented>button,tui-segmented>label,tui-segmented>label>input:not([tuiRadio]){transition-property:color,background,opacity,border-image;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;justify-content:center;block-size:var(--t-height);white-space:nowrap;gap:var(--t-gap);margin:0;padding:0 var(--t-padding);color:var(--tui-text-primary);overflow:hidden;cursor:pointer;font:inherit;border-radius:inherit;border:.125rem solid transparent;background-clip:padding-box;box-sizing:border-box;border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 0 0 100 .5;clip-path:polygon(-1rem calc(50% - .5rem),1px calc(50% - .5rem),1px 0,100% 0,100% 100%,1px 100%,1px calc(50% + .5rem),-1rem calc(50% + .5rem))}tui-segmented>a>*,tui-segmented>button>*,tui-segmented>label>*,tui-segmented>label>input:not([tuiRadio])>*{margin:0 var(--t-margin)}tui-segmented>a:focus-visible,tui-segmented>button:focus-visible,tui-segmented>label:focus-visible,tui-segmented>label>input:not([tuiRadio]):focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.25rem}@media (hover: hover) and (pointer: fine){tui-segmented>a:not(.tui-segmented_active):not(:active):hover,tui-segmented>button:not(.tui-segmented_active):not(:active):hover,tui-segmented>label:not(.tui-segmented_active):not(:active):hover,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover{background-color:var(--tui-background-neutral-1-hover)}tui-segmented>a:not(.tui-segmented_active):not(:active):hover,tui-segmented>button:not(.tui-segmented_active):not(:active):hover,tui-segmented>label:not(.tui-segmented_active):not(:active):hover,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover,tui-segmented>a:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>button:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>label:not(.tui-segmented_active):not(:active):hover+*,tui-segmented>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}}tui-segmented>a:active,tui-segmented>button:active,tui-segmented>label:active,tui-segmented>label>input:not([tuiRadio]):active,tui-segmented>a:active+*,tui-segmented>button:active+*,tui-segmented>label:active+*,tui-segmented>label>input:not([tuiRadio]):active+*,tui-segmented>a.tui-segmented_active,tui-segmented>button.tui-segmented_active,tui-segmented>label.tui-segmented_active,tui-segmented>label>input:not([tuiRadio]).tui-segmented_active,tui-segmented>a.tui-segmented_active+*,tui-segmented>button.tui-segmented_active+*,tui-segmented>label.tui-segmented_active+*,tui-segmented>label>input:not([tuiRadio]).tui-segmented_active+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}tui-segmented>label>input:not([tuiRadio]){position:absolute;inset:-.125rem;background:transparent!important}tui-segmented:before{transition-property:top,left,width;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inset:var(--t-top) auto auto var(--t-left);block-size:var(--t-height);inline-size:var(--t-width);border-radius:inherit;background:currentColor;background-clip:padding-box;border:.125rem solid transparent;box-sizing:border-box;filter:drop-shadow(0 .25rem 1.25rem rgba(0,0,0,.1))}[dir=rtl] tui-segmented:before{inset-inline:auto var(--t-left)}[tuiTheme=dark] tui-segmented,tui-segmented[tuiTheme=dark]{--tui-background-base: var(--tui-background-neutral-1-hover)}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/taiga-ui-kit-components-segmented.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-components-segmented.mjs","sources":["../../../projects/kit/components/segmented/segmented.directive.ts","../../../projects/kit/components/segmented/segmented.component.ts","../../../projects/kit/components/segmented/taiga-ui-kit-components-segmented.ts"],"sourcesContent":["import {\n    type AfterContentChecked,\n    type AfterContentInit,\n    ContentChildren,\n    Directive,\n    ElementRef,\n    inject,\n    type QueryList,\n} from '@angular/core';\nimport {NgControl, RadioControlValueAccessor} from '@angular/forms';\nimport {RouterLinkActive} from '@angular/router';\nimport {EMPTY_QUERY} from '@taiga-ui/cdk/constants';\nimport {tuiControlValue, tuiQueryListChanges} from '@taiga-ui/cdk/observables';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {map, switchMap} from 'rxjs';\n\nimport {TuiSegmented} from './segmented.component';\n\n@Directive({\n    standalone: true,\n    host: {\n        '(click)': 'update($event.target)',\n    },\n})\nexport class TuiSegmentedDirective implements AfterContentChecked, AfterContentInit {\n    @ContentChildren(NgControl, {descendants: true})\n    private readonly controls: QueryList<NgControl> = EMPTY_QUERY;\n\n    @ContentChildren(RadioControlValueAccessor, {descendants: true})\n    private readonly radios: QueryList<RadioControlValueAccessor> = EMPTY_QUERY;\n\n    @ContentChildren(RouterLinkActive)\n    private readonly links: QueryList<RouterLinkActive> = EMPTY_QUERY;\n\n    @ContentChildren(RouterLinkActive, {read: ElementRef})\n    private readonly elements: QueryList<ElementRef<HTMLElement>> = EMPTY_QUERY;\n\n    private readonly component = inject(TuiSegmented);\n    private readonly el = tuiInjectElement();\n\n    public ngAfterContentInit(): void {\n        tuiQueryListChanges(this.controls)\n            .pipe(\n                switchMap(() => tuiControlValue(this.controls.first)),\n                map((value) => this.radios.toArray().findIndex((c) => c.value === value)),\n            )\n            .subscribe((index) => {\n                this.component.update(index);\n            });\n    }\n\n    public ngAfterContentChecked(): void {\n        if (this.links.length) {\n            this.update(this.elements.get(this.linkIndex)?.nativeElement || null);\n        }\n    }\n\n    protected update(target: Element | null): void {\n        this.component.update(this.getIndex(target));\n    }\n\n    private get linkIndex(): number {\n        return this.links.toArray().findIndex((link) => link.isActive);\n    }\n\n    private getIndex(element: Element | null): number {\n        return Array.from(this.el.children).findIndex((tab) => tab.contains(element));\n    }\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    inject,\n    Input,\n    type OnChanges,\n    Output,\n    ViewEncapsulation,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {ResizeObserverService} from '@ng-web-apis/resize-observer';\nimport {tuiZonefree} from '@taiga-ui/cdk/observables';\nimport {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\nimport {tuiInjectElement, tuiIsHTMLElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiPx} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core/types';\nimport {tuiBadgeNotificationOptionsProvider} from '@taiga-ui/kit/components/badge-notification';\n\nimport {TuiSegmentedDirective} from './segmented.directive';\n\nexport const [TUI_SEGMENTED_OPTIONS, tuiSegmentedOptionsProvider] = tuiCreateOptions({\n    size: 's' as TuiSizeL | TuiSizeS,\n});\n\n@Component({\n    standalone: true,\n    selector: 'tui-segmented',\n    template: '<ng-content />',\n    styleUrl: './segmented.style.less',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [ResizeObserverService, tuiBadgeNotificationOptionsProvider({size: 's'})],\n    hostDirectives: [TuiSegmentedDirective],\n    host: {\n        '[attr.data-size]': 'size',\n    },\n})\nexport class TuiSegmented implements OnChanges {\n    private readonly el = tuiInjectElement();\n\n    protected readonly sub = inject(ResizeObserverService, {self: true})\n        .pipe(tuiZonefree(), takeUntilDestroyed())\n        .subscribe(() => this.refresh());\n\n    @Input()\n    public size: TuiSizeL | TuiSizeS = inject(TUI_SEGMENTED_OPTIONS).size;\n\n    @Input()\n    public activeItemIndex = 0;\n\n    @Output()\n    public readonly activeItemIndexChange = new EventEmitter<number>();\n\n    public ngOnChanges(): void {\n        this.refresh();\n    }\n\n    public update(activeItemIndex: number): void {\n        if (activeItemIndex === this.activeItemIndex || activeItemIndex < 0) {\n            return;\n        }\n\n        this.activeItemIndex = activeItemIndex;\n        this.activeItemIndexChange.emit(activeItemIndex);\n        this.refresh();\n    }\n\n    private get activeElement(): Element | null {\n        return this.el.children.item(this.activeItemIndex);\n    }\n\n    private refresh(): void {\n        const el = this.activeElement;\n\n        if (!tuiIsHTMLElement(el)) {\n            return;\n        }\n\n        Array.from(this.el.children).forEach((e) =>\n            e.classList.remove('tui-segmented_active'),\n        );\n\n        el.classList.add('tui-segmented_active');\n\n        const {offsetWidth = 0, offsetLeft = 0, offsetTop = 0} = el;\n\n        this.el.style.setProperty('--t-top', tuiPx(offsetTop));\n        this.el.style.setProperty('--t-left', tuiPx(offsetLeft));\n        this.el.style.setProperty('--t-width', tuiPx(offsetWidth));\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"taiga-ui-kit-components-segmented.mjs","sources":["../../../projects/kit/components/segmented/segmented.directive.ts","../../../projects/kit/components/segmented/segmented.component.ts","../../../projects/kit/components/segmented/taiga-ui-kit-components-segmented.ts"],"sourcesContent":["import {\n    type AfterContentChecked,\n    type AfterContentInit,\n    contentChildren,\n    Directive,\n    ElementRef,\n    inject,\n} from '@angular/core';\nimport {toObservable} from '@angular/core/rxjs-interop';\nimport {NgControl, RadioControlValueAccessor} from '@angular/forms';\nimport {RouterLinkActive} from '@angular/router';\nimport {tuiControlValue} from '@taiga-ui/cdk/observables';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {map, switchMap} from 'rxjs';\n\nimport {TuiSegmented} from './segmented.component';\n\n@Directive({\n    host: {\n        '(click)': 'update($event.target)',\n    },\n})\nexport class TuiSegmentedDirective implements AfterContentChecked, AfterContentInit {\n    private readonly component = inject(TuiSegmented);\n    private readonly el = tuiInjectElement();\n    private readonly links = contentChildren(RouterLinkActive);\n    private readonly elements = contentChildren(RouterLinkActive, {read: ElementRef});\n    private readonly controls = contentChildren(NgControl, {descendants: true});\n    private readonly controls$ = toObservable(this.controls);\n    private readonly radios = contentChildren(RadioControlValueAccessor, {\n        descendants: true,\n    });\n\n    public ngAfterContentInit(): void {\n        this.controls$\n            .pipe(\n                switchMap(([control]) => tuiControlValue(control)),\n                map((value) => this.radios().findIndex((c) => c.value === value)),\n            )\n            .subscribe((index) => {\n                this.component.update(index);\n            });\n    }\n\n    public ngAfterContentChecked(): void {\n        const index = this.links().findIndex(({isActive}) => isActive);\n\n        if (index !== -1) {\n            this.update(this.elements()[index]?.nativeElement || null);\n        }\n    }\n\n    protected update(target: Element | null): void {\n        this.component.update(\n            Array.from(this.el.children).findIndex((tab) => tab.contains(target)),\n        );\n    }\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    inject,\n    input,\n    model,\n    type OnChanges,\n    ViewEncapsulation,\n} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {ResizeObserverService} from '@ng-web-apis/resize-observer';\nimport {tuiZonefree} from '@taiga-ui/cdk/observables';\nimport {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\nimport {tuiInjectElement, tuiIsHTMLElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiPx} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core/types';\nimport {tuiBadgeNotificationOptionsProvider} from '@taiga-ui/kit/components/badge-notification';\n\nimport {TuiSegmentedDirective} from './segmented.directive';\n\nexport const [TUI_SEGMENTED_OPTIONS, tuiSegmentedOptionsProvider] = tuiCreateOptions({\n    size: 's' as TuiSizeL | TuiSizeS,\n});\n\n@Component({\n    selector: 'tui-segmented',\n    template: '<ng-content />',\n    styleUrl: './segmented.style.less',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [ResizeObserverService, tuiBadgeNotificationOptionsProvider({size: 's'})],\n    hostDirectives: [TuiSegmentedDirective],\n    host: {\n        '[attr.data-size]': 'size()',\n    },\n})\nexport class TuiSegmented implements OnChanges {\n    private readonly el = tuiInjectElement();\n\n    protected readonly sub = inject(ResizeObserverService, {self: true})\n        .pipe(tuiZonefree(), takeUntilDestroyed())\n        .subscribe(() => this.refresh());\n\n    public readonly size = input(inject(TUI_SEGMENTED_OPTIONS).size);\n    public readonly activeItemIndex = model(0);\n\n    public ngOnChanges(): void {\n        this.refresh();\n    }\n\n    public update(activeItemIndex: number): void {\n        if (activeItemIndex === this.activeItemIndex() || activeItemIndex < 0) {\n            return;\n        }\n\n        this.activeItemIndex.set(activeItemIndex);\n        this.refresh();\n    }\n\n    private refresh(): void {\n        const el = this.el.children.item(this.activeItemIndex());\n\n        if (!tuiIsHTMLElement(el)) {\n            return;\n        }\n\n        Array.from(this.el.children).forEach((e) =>\n            e.classList.remove('tui-segmented_active'),\n        );\n\n        el.classList.add('tui-segmented_active');\n\n        const {offsetWidth = 0, offsetLeft = 0, offsetTop = 0} = el;\n\n        this.el.style.setProperty('--t-top', tuiPx(offsetTop));\n        this.el.style.setProperty('--t-left', tuiPx(offsetLeft));\n        this.el.style.setProperty('--t-width', tuiPx(offsetWidth));\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;MAsBa,qBAAqB,CAAA;AALlC,IAAA,WAAA,GAAA;AAMqB,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC;QAChC,IAAE,CAAA,EAAA,GAAG,gBAAgB,EAAE;AACvB,QAAA,IAAA,CAAA,KAAK,GAAG,eAAe,CAAC,gBAAgB,CAAC;QACzC,IAAQ,CAAA,QAAA,GAAG,eAAe,CAAC,gBAAgB,EAAE,EAAC,IAAI,EAAE,UAAU,EAAC,CAAC;QAChE,IAAQ,CAAA,QAAA,GAAG,eAAe,CAAC,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,CAAC;AAC1D,QAAA,IAAA,CAAA,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;AACvC,QAAA,IAAA,CAAA,MAAM,GAAG,eAAe,CAAC,yBAAyB,EAAE;AACjE,YAAA,WAAW,EAAE,IAAI;AACpB,SAAA,CAAC;AA0BL;IAxBU,kBAAkB,GAAA;AACrB,QAAA,IAAI,CAAC;AACA,aAAA,IAAI,CACD,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,eAAe,CAAC,OAAO,CAAC,CAAC,EAClD,GAAG,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;AAEpE,aAAA,SAAS,CAAC,CAAC,KAAK,KAAI;AACjB,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC;AAChC,SAAC,CAAC;;IAGH,qBAAqB,GAAA;AACxB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,EAAC,QAAQ,EAAC,KAAK,QAAQ,CAAC;AAE9D,QAAA,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;AACd,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa,IAAI,IAAI,CAAC;;;AAIxD,IAAA,MAAM,CAAC,MAAsB,EAAA;AACnC,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CACjB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CACxE;;+GAjCI,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAGW,gBAAgB,EACb,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAgB,QAAS,UAAU,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EACnC,SAAS,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,QAAA,EAAA,SAAA,EAEX,yBAAyB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAP1D,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBALjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,IAAI,EAAE;AACF,wBAAA,SAAS,EAAE,uBAAuB;AACrC,qBAAA;AACJ,iBAAA;;;MCDY,CAAC,qBAAqB,EAAE,2BAA2B,CAAC,GAAG,gBAAgB,CAAC;AACjF,IAAA,IAAI,EAAE,GAA0B;AACnC,CAAA;MAcY,YAAY,CAAA;AAZzB,IAAA,WAAA,GAAA;QAaqB,IAAE,CAAA,EAAA,GAAG,gBAAgB,EAAE;QAErB,IAAG,CAAA,GAAA,GAAG,MAAM,CAAC,qBAAqB,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC;AAC9D,aAAA,IAAI,CAAC,WAAW,EAAE,EAAE,kBAAkB,EAAE;aACxC,SAAS,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;QAEpB,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,IAAI,CAAC;AAChD,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAC,CAAC,CAAC;AAkC7C;IAhCU,WAAW,GAAA;QACd,IAAI,CAAC,OAAO,EAAE;;AAGX,IAAA,MAAM,CAAC,eAAuB,EAAA;QACjC,IAAI,eAAe,KAAK,IAAI,CAAC,eAAe,EAAE,IAAI,eAAe,GAAG,CAAC,EAAE;YACnE;;AAGJ,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,CAAC;QACzC,IAAI,CAAC,OAAO,EAAE;;IAGV,OAAO,GAAA;AACX,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;AAExD,QAAA,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE;YACvB;;QAGJ,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KACnC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAC7C;AAED,QAAA,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC;AAExC,QAAA,MAAM,EAAC,WAAW,GAAG,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,SAAS,GAAG,CAAC,EAAC,GAAG,EAAE;AAE3D,QAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;AACtD,QAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;AACxD,QAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;;+GAxCrD,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAZ,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,YAAY,EANV,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,uBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,qBAAqB,EAAE,mCAAmC,CAAC,EAAC,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC,uGAJ1E,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4kJAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAUjB,YAAY,EAAA,UAAA,EAAA,CAAA;kBAZxB,SAAS;+BACI,eAAe,EAAA,QAAA,EACf,gBAAgB,EAAA,aAAA,EAEX,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC,CAAC,qBAAqB,EAAE,mCAAmC,CAAC,EAAC,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC,EACpE,cAAA,EAAA,CAAC,qBAAqB,CAAC,EACjC,IAAA,EAAA;AACF,wBAAA,kBAAkB,EAAE,QAAQ;AAC/B,qBAAA,EAAA,MAAA,EAAA,CAAA,4kJAAA,CAAA,EAAA;;;AClCL;;AAEG;;;;"}

package/fesm2022/taiga-ui-kit-components-select.mjs

@@ -1,14 +1,18 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, computed, effect, input, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { inject, viewChildren, computed, effect, input, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
-import { tuiIsPresent, tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous';
-import * as i1 from '@taiga-ui/core/components/textfield';
-import { TuiTextfieldDirective, tuiAsTextfieldAccessor, TuiWithTextfield, TuiSelectLike } from '@taiga-ui/core/components/textfield';
+import { tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
+import * as i1 from '@taiga-ui/core/components/input';
+import { TuiInputDirective, TuiWithInput } from '@taiga-ui/core/components/input';
+import * as i2 from '@taiga-ui/core/components/textfield';
+import { tuiAsTextfieldAccessor, TuiSelectLike, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
 import { TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
 import { tuiIsFlat, tuiInjectValue } from '@taiga-ui/kit/utils';
+import { TuiLabel } from '@taiga-ui/core/components/label';
+import { TuiDropdownOpen, tuiDropdownEnabled, TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
 import { TuiDataListComponent, TuiOptionWithValue, tuiAsOptionContent } from '@taiga-ui/core/components/data-list';
-import { tuiDropdownOpen, tuiDropdownEnabled } from '@taiga-ui/core/directives/dropdown';
+import { tuiDirectiveBinding } from '@taiga-ui/cdk/utils/di';
 import * as i1$1 from '@taiga-ui/core/components/scrollbar';
 import { TuiScrollIntoView } from '@taiga-ui/core/components/scrollbar';
 import { TuiCheckbox, tuiCheckboxOptionsProvider } from '@taiga-ui/kit/components/checkbox';
@@ -16,14 +20,26 @@ import { TuiCheckbox, tuiCheckboxOptionsProvider } from '@taiga-ui/kit/component
 class TuiNativeSelect extends TuiControl {
     constructor() {
         super(...arguments);
-        this.textfield = inject(TuiTextfieldDirective);
+        this.input = inject(TuiInputDirective);
+        this.options = viewChildren('option');
         this.isFlat = tuiIsFlat;
         this.itemsHandlers = inject(TUI_ITEMS_HANDLERS);
         this.stringified = computed((value = this.value()) => tuiIsPresent(value) ? this.itemsHandlers.stringify()(value) : '');
-        this.showPlaceholder = computed(() => this.placeholder() && !this.stringified());
         this.isSelected = computed((value = this.value()) => (x) => tuiIsPresent(value) && this.itemsHandlers.identityMatcher()(x, value));
         this.valueEffect = effect(() => {
-            this.textfield.value.set(this.stringified());
+            /**
+             * Wait until all `<option>`-s are inside DOM.
+             * Otherwise
+             * ```
+             * document.querySelector('select').value = 'even upcoming valid value';
+             * // same as
+             * document.querySelector('select').value = '';
+             * ```
+             * (it breaks `tuiValue` utility logic)
+             */
+            if (this.options().length) {
+                this.input.value.set(this.stringified());
+            }
         });
         this.items = input([]);
         this.labels = input([]);
@@ -34,18 +50,19 @@ class TuiNativeSelect extends TuiControl {
     }
     selectOption(index) {
         const items = (this.items()?.flat() ?? []);
-        this.onChange(items[index - (this.showPlaceholder() ? 1 : 0)] ?? null);
+        const placeholderOffset = this.stringified() ? 0 : 1;
+        this.onChange(items[index - placeholderOffset] ?? null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNativeSelect, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiNativeSelect, isStandalone: true, selector: "select[tuiSelect]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "selectOption($event.target.options.selectedIndex)" }, properties: { "attr.aria-invalid": "invalid()", "disabled": "!interactive()" } }, providers: [tuiAsTextfieldAccessor(TuiNativeSelect), tuiAsControl(TuiNativeSelect)], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithTextfield }], ngImport: i0, template: "@if (showPlaceholder()) {\n    <option\n        disabled\n        selected\n        value=\"\"\n    >\n        {{ placeholder() }}\n    </option>\n}\n@let elements = items();\n\n@if (elements && !isFlat(elements)) {\n    @for (group of labels(); track group) {\n        <optgroup [label]=\"labels()[$index]\">\n            <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements[$index]}\" />\n        </optgroup>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements}\" />\n}\n\n<ng-template\n    #options\n    let-items\n>\n    @for (option of items; track option) {\n        <option\n            [disabled]=\"itemsHandlers.disabledItemHandler()(option)\"\n            [selected]=\"isSelected()(option)\"\n            [value]=\"itemsHandlers.stringify()(option)\"\n        >\n            {{ itemsHandlers.stringify()(option) }}\n        </option>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiNativeSelect, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiNativeSelect, isStandalone: true, selector: "select[tuiSelect]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "selectOption($event.target.options.selectedIndex)" }, properties: { "attr.aria-invalid": "invalid()", "disabled": "!interactive()" } }, providers: [tuiAsTextfieldAccessor(TuiNativeSelect), tuiAsControl(TuiNativeSelect)], viewQueries: [{ propertyName: "options", predicate: ["option"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithInput }], ngImport: i0, template: "@if (!stringified()) {\n    <option\n        disabled\n        selected\n        value=\"\"\n    >\n        {{ placeholder() }}\n    </option>\n}\n\n@let elements = items();\n\n@if (elements && !isFlat(elements)) {\n    @for (group of labels(); track group) {\n        <optgroup [label]=\"labels()[$index]\">\n            <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements[$index]}\" />\n        </optgroup>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements}\" />\n}\n\n<ng-template\n    #options\n    let-items\n>\n    @for (option of items; track option) {\n        <option\n            #option\n            [disabled]=\"itemsHandlers.disabledItemHandler()(option)\"\n            [selected]=\"isSelected()(option)\"\n            [value]=\"itemsHandlers.stringify()(option)\"\n        >\n            {{ itemsHandlers.stringify()(option) }}\n        </option>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNativeSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiNativeSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'select[tuiSelect]', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsTextfieldAccessor(TuiNativeSelect), tuiAsControl(TuiNativeSelect)], hostDirectives: [TuiWithTextfield], host: {
+            args: [{ selector: 'select[tuiSelect]', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsTextfieldAccessor(TuiNativeSelect), tuiAsControl(TuiNativeSelect)], hostDirectives: [TuiWithInput], host: {
                         '[attr.aria-invalid]': 'invalid()',
                         '[disabled]': '!interactive()',
                         '(change)': 'selectOption($event.target.options.selectedIndex)',
-                    }, template: "@if (showPlaceholder()) {\n    <option\n        disabled\n        selected\n        value=\"\"\n    >\n        {{ placeholder() }}\n    </option>\n}\n@let elements = items();\n\n@if (elements && !isFlat(elements)) {\n    @for (group of labels(); track group) {\n        <optgroup [label]=\"labels()[$index]\">\n            <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements[$index]}\" />\n        </optgroup>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements}\" />\n}\n\n<ng-template\n    #options\n    let-items\n>\n    @for (option of items; track option) {\n        <option\n            [disabled]=\"itemsHandlers.disabledItemHandler()(option)\"\n            [selected]=\"isSelected()(option)\"\n            [value]=\"itemsHandlers.stringify()(option)\"\n        >\n            {{ itemsHandlers.stringify()(option) }}\n        </option>\n    }\n</ng-template>\n" }]
+                    }, template: "@if (!stringified()) {\n    <option\n        disabled\n        selected\n        value=\"\"\n    >\n        {{ placeholder() }}\n    </option>\n}\n\n@let elements = items();\n\n@if (elements && !isFlat(elements)) {\n    @for (group of labels(); track group) {\n        <optgroup [label]=\"labels()[$index]\">\n            <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements[$index]}\" />\n        </optgroup>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"options; context: {$implicit: elements}\" />\n}\n\n<ng-template\n    #options\n    let-items\n>\n    @for (option of items; track option) {\n        <option\n            #option\n            [disabled]=\"itemsHandlers.disabledItemHandler()(option)\"\n            [selected]=\"isSelected()(option)\"\n            [value]=\"itemsHandlers.stringify()(option)\"\n        >\n            {{ itemsHandlers.stringify()(option) }}\n        </option>\n    }\n</ng-template>\n" }]
         }] });
 
 class TuiSelectOption {
@@ -61,22 +78,22 @@ class TuiSelectOption {
             this.handlers.identityMatcher()(controlValue, optionValue));
         this.scrolled = tuiDirectiveBinding(TuiScrollIntoView, 'tuiScrollIntoView', this.selected);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiSelectOption, isStandalone: true, selector: "ng-component", host: { attributes: { "tuiSelectOption": "" }, properties: { "class._value": "option", "class._selected": "selected()" } }, providers: [tuiCheckboxOptionsProvider({ appearance: () => 'action' })], hostDirectives: [{ directive: i1$1.TuiScrollIntoView }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiSelectOption, isStandalone: true, selector: "ng-component", host: { attributes: { "tuiSelectOption": "" }, properties: { "class._value": "option", "class._selected": "selected()" } }, providers: [tuiCheckboxOptionsProvider({ appearance: () => 'action' })], hostDirectives: [{ directive: i1$1.TuiScrollIntoView }], ngImport: i0, template: `
         @if (selected()) {
             <input
                 tuiCheckbox
                 type="checkbox"
                 class="t-check"
                 [checked]="selected()"
-                [size]="datalist.size === 'l' ? 'm' : 's'"
+                [size]="datalist.size() === 'l' ? 'm' : 's'"
             />
         } @else {
             <span class="t-dummy"></span>
         }
     `, isInline: true, styles: [":host._value>.t-check,:host._value>.t-dummy{order:100;margin-inline-start:auto;pointer-events:none}:host._value._selected~::ng-deep [tuiSelectOption]>.t-check:before{opacity:0}:host:not(._value)>.t-check,:host-context(tui-dropdown-mobile)>.t-check{display:none}.t-check:before{font-size:var(--t-size)}.t-dummy{inline-size:1.5rem}\n"], dependencies: [{ kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSelectOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSelectOption, decorators: [{
             type: Component,
             args: [{ imports: [TuiCheckbox], template: `
         @if (selected()) {
@@ -85,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type="checkbox"
                 class="t-check"
                 [checked]="selected()"
-                [size]="datalist.size === 'l' ? 'm' : 's'"
+                [size]="datalist.size() === 'l' ? 'm' : 's'"
             />
         } @else {
             <span class="t-dummy"></span>
@@ -100,14 +117,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class TuiSelectDirective extends TuiControl {
     constructor() {
         super(...arguments);
-        this.textfield = inject(TuiTextfieldDirective);
-        this.open = tuiDropdownOpen();
+        this.input = inject(TuiInputDirective);
+        this.open = inject(TuiDropdownOpen).open;
         this.itemsHandlers = inject(TUI_ITEMS_HANDLERS);
         this.dropdownEnabled = tuiDropdownEnabled(this.interactive);
         this.valueEffect = effect(() => {
             const value = this.value();
             const string = tuiIsPresent(value) ? this.itemsHandlers.stringify()(value) : '';
-            this.textfield.value.set(string);
+            this.input.value.set(string);
         });
     }
     setValue(value) {
@@ -116,24 +133,23 @@ class TuiSelectDirective extends TuiControl {
             this.open.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiSelectDirective, isStandalone: true, selector: "input[tuiSelect]", host: { listeners: { "input": "$event.inputType?.includes(\"delete\") && setValue(null)" }, properties: { "disabled": "disabled()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiSelectDirective, isStandalone: true, selector: "input[tuiSelect]", host: { listeners: { "input": "$event.inputType?.includes(\"delete\") && setValue(null)" }, properties: { "disabled": "disabled()" } }, providers: [
             tuiAsOptionContent(TuiSelectOption),
             tuiAsTextfieldAccessor(TuiSelectDirective),
             tuiAsControl(TuiSelectDirective),
-        ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithTextfield }, { directive: i1.TuiSelectLike }], ngImport: i0 }); }
+        ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithInput }, { directive: i2.TuiSelectLike }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiSelectDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'input[tuiSelect]',
                     providers: [
                         tuiAsOptionContent(TuiSelectOption),
                         tuiAsTextfieldAccessor(TuiSelectDirective),
                         tuiAsControl(TuiSelectDirective),
                     ],
-                    hostDirectives: [TuiWithTextfield, TuiSelectLike],
+                    hostDirectives: [TuiWithInput, TuiSelectLike],
                     host: {
                         '[disabled]': 'disabled()',
                         '(input)': '$event.inputType?.includes("delete") && setValue(null)',
@@ -141,7 +157,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
-const TuiSelect = [TuiSelectDirective, TuiNativeSelect];
+const TuiSelect = [
+    TuiSelectDirective,
+    TuiNativeSelect,
+    TuiLabel,
+    TuiTextfieldComponent,
+    TuiTextfieldOptionsDirective,
+    TuiDropdownContent,
+];
 
 /**
  * Generated bundle index. Do not edit.