@taiga-ui/kit 4.52.0-canary.6be767f → 4.52.0-canary.6ee9658

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);
-    }
-    getIndex(element) {
-        return Array.from(this.el.children).findIndex((tab) => tab.contains(element));
+        this.component.update(Array.from(this.el.children).findIndex((tab) => tab.contains(target)));
     }
     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.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.15", 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: [{
             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;
         }
@@ -107,20 +86,14 @@ class TuiSegmented {
         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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", 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-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;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;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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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-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;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;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"] }]
+        }] });
 
 /**
  * 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    styleUrls: ['./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":"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"}

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

@@ -1,15 +1,15 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, signal, computed, effect, Input, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { inject, computed, effect, input, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
-import { TUI_ALLOW_SIGNAL_WRITES } from '@taiga-ui/cdk/constants';
-import { tuiIsPresent, tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiIsPresent } 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 { TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
 import { tuiIsFlat, tuiInjectValue } from '@taiga-ui/kit/utils';
 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';
@@ -19,30 +19,26 @@ class TuiNativeSelect extends TuiControl {
         super(...arguments);
         this.textfield = inject(TuiTextfieldDirective);
         this.isFlat = tuiIsFlat;
-        this.placeholder = signal('');
         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());
-        }, TUI_ALLOW_SIGNAL_WRITES);
-        this.items = [];
-        this.labels = [];
-    }
-    // TODO(v5): use signal inputs
-    set placeholderSetter(x) {
-        this.placeholder.set(x);
+        });
+        this.items = input([]);
+        this.labels = input([]);
+        this.placeholder = input('');
     }
     setValue(value) {
         this.onChange(value);
     }
     selectOption(index) {
-        const items = (this.items?.flat() ?? []);
+        const items = (this.items()?.flat() ?? []);
         this.onChange(items[index - (this.showPlaceholder() ? 1 : 0)] ?? 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: "items", labels: "labels", placeholderSetter: ["placeholder", "placeholderSetter"] }, 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\n@if (items && !isFlat(items)) {\n    @for (group of labels; track group; let index = $index) {\n        <optgroup [label]=\"labels[index]\">\n            <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items[index]}\" />\n        </optgroup>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items}\" />\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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiNativeSelect, decorators: [{
             type: Component,
@@ -50,15 +46,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '[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\n@if (items && !isFlat(items)) {\n    @for (group of labels; track group; let index = $index) {\n        <optgroup [label]=\"labels[index]\">\n            <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items[index]}\" />\n        </optgroup>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items}\" />\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" }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], labels: [{
-                type: Input
-            }], placeholderSetter: [{
-                type: Input,
-                args: ['placeholder']
-            }] } });
+                    }, 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" }]
+        }] });
 
 class TuiSelectOption {
     constructor() {
@@ -74,31 +63,39 @@ class TuiSelectOption {
         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: "14.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: `
-        <input
-            tuiCheckbox
-            type="checkbox"
-            class="t-check"
-            [checked]="selected()"
-            [size]="datalist.size === 'l' ? 'm' : 's'"
-        />
-    `, isInline: true, styles: [":host._value>.t-check{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)}\n"], dependencies: [{ kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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: `
+        @if (selected()) {
+            <input
+                tuiCheckbox
+                type="checkbox"
+                class="t-check"
+                [checked]="selected()"
+                [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: [{
             type: Component,
             args: [{ imports: [TuiCheckbox], template: `
-        <input
-            tuiCheckbox
-            type="checkbox"
-            class="t-check"
-            [checked]="selected()"
-            [size]="datalist.size === 'l' ? 'm' : 's'"
-        />
+        @if (selected()) {
+            <input
+                tuiCheckbox
+                type="checkbox"
+                class="t-check"
+                [checked]="selected()"
+                [size]="datalist.size() === 'l' ? 'm' : 's'"
+            />
+        } @else {
+            <span class="t-dummy"></span>
+        }
     `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiCheckboxOptionsProvider({ appearance: () => 'action' })], hostDirectives: [TuiScrollIntoView], host: {
                         tuiSelectOption: '',
                         '[class._value]': 'option',
                         '[class._selected]': 'selected()',
-                    }, styles: [":host._value>.t-check{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)}\n"] }]
+                    }, 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"] }]
         }] });
 
 class TuiSelectDirective extends TuiControl {
@@ -112,7 +109,7 @@ class TuiSelectDirective extends TuiControl {
             const value = this.value();
             const string = tuiIsPresent(value) ? this.itemsHandlers.stringify()(value) : '';
             this.textfield.value.set(string);
-        }, TUI_ALLOW_SIGNAL_WRITES);
+        });
     }
     setValue(value) {
         this.onChange(value);
@@ -130,7 +127,6 @@ class TuiSelectDirective extends TuiControl {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSelectDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'input[tuiSelect]',
                     providers: [
                         tuiAsOptionContent(TuiSelectOption),

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

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-components-select.mjs","sources":["../../../projects/kit/components/select/native-select/native-select.component.ts","../../../projects/kit/components/select/native-select/native-select.template.html","../../../projects/kit/components/select/select-option/select-option.component.ts","../../../projects/kit/components/select/select.directive.ts","../../../projects/kit/components/select/select.ts","../../../projects/kit/components/select/taiga-ui-kit-components-select.ts"],"sourcesContent":["import {NgTemplateOutlet} from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    effect,\n    inject,\n    Input,\n    signal,\n} from '@angular/core';\nimport {tuiAsControl, TuiControl} from '@taiga-ui/cdk/classes';\nimport {TUI_ALLOW_SIGNAL_WRITES} from '@taiga-ui/cdk/constants';\nimport {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {\n    tuiAsTextfieldAccessor,\n    type TuiTextfieldAccessor,\n    TuiTextfieldDirective,\n    TuiWithTextfield,\n} from '@taiga-ui/core/components/textfield';\nimport {\n    TUI_ITEMS_HANDLERS,\n    type TuiItemsHandlers,\n} from '@taiga-ui/core/directives/items-handlers';\nimport {tuiIsFlat} from '@taiga-ui/kit/utils';\n\n@Component({\n    selector: 'select[tuiSelect]',\n    imports: [NgTemplateOutlet],\n    templateUrl: './native-select.template.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [tuiAsTextfieldAccessor(TuiNativeSelect), tuiAsControl(TuiNativeSelect)],\n    hostDirectives: [TuiWithTextfield],\n    host: {\n        '[attr.aria-invalid]': 'invalid()',\n        '[disabled]': '!interactive()',\n        '(change)': 'selectOption($event.target.options.selectedIndex)',\n    },\n})\nexport class TuiNativeSelect<T>\n    extends TuiControl<T | null>\n    implements TuiTextfieldAccessor<T>\n{\n    private readonly textfield = inject(TuiTextfieldDirective);\n\n    protected readonly isFlat = tuiIsFlat;\n    protected readonly placeholder = signal('');\n    protected readonly itemsHandlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n\n    protected readonly stringified = computed((value = this.value()) =>\n        tuiIsPresent(value) ? this.itemsHandlers.stringify()(value) : '',\n    );\n\n    protected readonly showPlaceholder = computed(\n        () => this.placeholder() && !this.stringified(),\n    );\n\n    protected readonly isSelected = computed(\n        (value = this.value()) =>\n            (x: T) =>\n                tuiIsPresent(value) && this.itemsHandlers.identityMatcher()(x, value),\n    );\n\n    protected readonly valueEffect = effect(() => {\n        this.textfield.value.set(this.stringified());\n    }, TUI_ALLOW_SIGNAL_WRITES);\n\n    @Input()\n    public items: ReadonlyArray<readonly T[]> | readonly T[] | null = [];\n\n    @Input()\n    public labels: readonly string[] = [];\n\n    // TODO(v5): use signal inputs\n    @Input('placeholder')\n    public set placeholderSetter(x: string) {\n        this.placeholder.set(x);\n    }\n\n    public setValue(value: T | null): void {\n        this.onChange(value);\n    }\n\n    protected selectOption(index: number): void {\n        const items = (this.items?.flat() ?? []) as T[];\n\n        this.onChange(items[index - (this.showPlaceholder() ? 1 : 0)] ?? null);\n    }\n}\n","@if (showPlaceholder()) {\n    <option\n        disabled\n        selected\n        value=\"\"\n    >\n        {{ placeholder() }}\n    </option>\n}\n\n@if (items && !isFlat(items)) {\n    @for (group of labels; track group; let index = $index) {\n        <optgroup [label]=\"labels[index]\">\n            <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items[index]}\" />\n        </optgroup>\n    }\n} @else {\n    <ng-container *ngTemplateOutlet=\"options; context: {$implicit: items}\" />\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","import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';\nimport {tuiDirectiveBinding, tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {\n    TuiDataListComponent,\n    TuiOptionWithValue,\n} from '@taiga-ui/core/components/data-list';\nimport {TuiScrollIntoView} from '@taiga-ui/core/components/scrollbar';\nimport {\n    TUI_ITEMS_HANDLERS,\n    type TuiItemsHandlers,\n} from '@taiga-ui/core/directives/items-handlers';\nimport {TuiCheckbox, tuiCheckboxOptionsProvider} from '@taiga-ui/kit/components/checkbox';\nimport {tuiInjectValue} from '@taiga-ui/kit/utils';\n\n@Component({\n    imports: [TuiCheckbox],\n    template: `\n        <input\n            tuiCheckbox\n            type=\"checkbox\"\n            class=\"t-check\"\n            [checked]=\"selected()\"\n            [size]=\"datalist.size === 'l' ? 'm' : 's'\"\n        />\n    `,\n    styleUrls: ['./select-option.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [tuiCheckboxOptionsProvider({appearance: () => 'action'})],\n    hostDirectives: [TuiScrollIntoView],\n    host: {\n        tuiSelectOption: '',\n        '[class._value]': 'option',\n        '[class._selected]': 'selected()',\n    },\n})\nexport class TuiSelectOption<T> {\n    private readonly handlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n    private readonly value = tuiInjectValue<T>();\n\n    protected readonly datalist = inject(TuiDataListComponent);\n    protected readonly option = inject<TuiOptionWithValue<T>>(TuiOptionWithValue, {\n        optional: true,\n    });\n\n    protected readonly selected = computed(\n        (controlValue = this.value(), optionValue = this.option?.value()) =>\n            tuiIsPresent(optionValue) &&\n            tuiIsPresent(controlValue) &&\n            this.handlers.identityMatcher()(controlValue, optionValue),\n    );\n\n    protected readonly scrolled = tuiDirectiveBinding(\n        TuiScrollIntoView,\n        'tuiScrollIntoView',\n        this.selected,\n    );\n}\n","import {Directive, effect, inject} from '@angular/core';\nimport {tuiAsControl, TuiControl} from '@taiga-ui/cdk/classes';\nimport {TUI_ALLOW_SIGNAL_WRITES} from '@taiga-ui/cdk/constants';\nimport {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {tuiAsOptionContent} from '@taiga-ui/core/components/data-list';\nimport {\n    tuiAsTextfieldAccessor,\n    TuiSelectLike,\n    type TuiTextfieldAccessor,\n    TuiTextfieldDirective,\n    TuiWithTextfield,\n} from '@taiga-ui/core/components/textfield';\nimport {tuiDropdownEnabled, tuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';\nimport {\n    TUI_ITEMS_HANDLERS,\n    type TuiItemsHandlers,\n} from '@taiga-ui/core/directives/items-handlers';\n\nimport {TuiSelectOption} from './select-option/select-option.component';\n\n@Directive({\n    standalone: true,\n    selector: 'input[tuiSelect]',\n    providers: [\n        tuiAsOptionContent(TuiSelectOption),\n        tuiAsTextfieldAccessor(TuiSelectDirective),\n        tuiAsControl(TuiSelectDirective),\n    ],\n    hostDirectives: [TuiWithTextfield, TuiSelectLike],\n    host: {\n        '[disabled]': 'disabled()',\n        '(input)': '$event.inputType?.includes(\"delete\") && setValue(null)',\n    },\n})\nexport class TuiSelectDirective<T>\n    extends TuiControl<T | null>\n    implements TuiTextfieldAccessor<T>\n{\n    private readonly textfield = inject(TuiTextfieldDirective);\n    private readonly open = tuiDropdownOpen();\n    private readonly itemsHandlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n\n    protected readonly dropdownEnabled = tuiDropdownEnabled(this.interactive);\n    protected readonly valueEffect = effect(() => {\n        const value = this.value();\n        const string = tuiIsPresent(value) ? this.itemsHandlers.stringify()(value) : '';\n\n        this.textfield.value.set(string);\n    }, TUI_ALLOW_SIGNAL_WRITES);\n\n    public setValue(value: T | null): void {\n        this.onChange(value);\n\n        if (!value) {\n            this.open.set(true);\n        }\n    }\n}\n","import {TuiNativeSelect} from './native-select/native-select.component';\nimport {TuiSelectDirective} from './select.directive';\n\nexport const TuiSelect = [TuiSelectDirective, TuiNativeSelect] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"taiga-ui-kit-components-select.mjs","sources":["../../../projects/kit/components/select/native-select/native-select.component.ts","../../../projects/kit/components/select/native-select/native-select.template.html","../../../projects/kit/components/select/select-option/select-option.component.ts","../../../projects/kit/components/select/select.directive.ts","../../../projects/kit/components/select/select.ts","../../../projects/kit/components/select/taiga-ui-kit-components-select.ts"],"sourcesContent":["import {NgTemplateOutlet} from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    effect,\n    inject,\n    input,\n} from '@angular/core';\nimport {tuiAsControl, TuiControl} from '@taiga-ui/cdk/classes';\nimport {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {\n    tuiAsTextfieldAccessor,\n    type TuiTextfieldAccessor,\n    TuiTextfieldDirective,\n    TuiWithTextfield,\n} from '@taiga-ui/core/components/textfield';\nimport {\n    TUI_ITEMS_HANDLERS,\n    type TuiItemsHandlers,\n} from '@taiga-ui/core/directives/items-handlers';\nimport {tuiIsFlat} from '@taiga-ui/kit/utils';\n\n@Component({\n    selector: 'select[tuiSelect]',\n    imports: [NgTemplateOutlet],\n    templateUrl: './native-select.template.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [tuiAsTextfieldAccessor(TuiNativeSelect), tuiAsControl(TuiNativeSelect)],\n    hostDirectives: [TuiWithTextfield],\n    host: {\n        '[attr.aria-invalid]': 'invalid()',\n        '[disabled]': '!interactive()',\n        '(change)': 'selectOption($event.target.options.selectedIndex)',\n    },\n})\nexport class TuiNativeSelect<T>\n    extends TuiControl<T | null>\n    implements TuiTextfieldAccessor<T>\n{\n    private readonly textfield = inject(TuiTextfieldDirective);\n\n    protected readonly isFlat = tuiIsFlat;\n    protected readonly itemsHandlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n\n    protected readonly stringified = computed((value = this.value()) =>\n        tuiIsPresent(value) ? this.itemsHandlers.stringify()(value) : '',\n    );\n\n    protected readonly showPlaceholder = computed(\n        () => this.placeholder() && !this.stringified(),\n    );\n\n    protected readonly isSelected = computed(\n        (value = this.value()) =>\n            (x: T) =>\n                tuiIsPresent(value) && this.itemsHandlers.identityMatcher()(x, value),\n    );\n\n    protected readonly valueEffect = effect(() => {\n        this.textfield.value.set(this.stringified());\n    });\n\n    public readonly items = input<ReadonlyArray<readonly T[]> | readonly T[] | null>([]);\n\n    public readonly labels = input<readonly string[]>([]);\n\n    public readonly placeholder = input('');\n\n    public setValue(value: T | null): void {\n        this.onChange(value);\n    }\n\n    protected selectOption(index: number): void {\n        const items = (this.items()?.flat() ?? []) as T[];\n\n        this.onChange(items[index - (this.showPlaceholder() ? 1 : 0)] ?? null);\n    }\n}\n","@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","import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';\nimport {tuiDirectiveBinding} from '@taiga-ui/cdk/utils/di';\nimport {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {\n    TuiDataListComponent,\n    TuiOptionWithValue,\n} from '@taiga-ui/core/components/data-list';\nimport {TuiScrollIntoView} from '@taiga-ui/core/components/scrollbar';\nimport {\n    TUI_ITEMS_HANDLERS,\n    type TuiItemsHandlers,\n} from '@taiga-ui/core/directives/items-handlers';\nimport {TuiCheckbox, tuiCheckboxOptionsProvider} from '@taiga-ui/kit/components/checkbox';\nimport {tuiInjectValue} from '@taiga-ui/kit/utils';\n\n@Component({\n    imports: [TuiCheckbox],\n    template: `\n        @if (selected()) {\n            <input\n                tuiCheckbox\n                type=\"checkbox\"\n                class=\"t-check\"\n                [checked]=\"selected()\"\n                [size]=\"datalist.size() === 'l' ? 'm' : 's'\"\n            />\n        } @else {\n            <span class=\"t-dummy\"></span>\n        }\n    `,\n    styleUrl: './select-option.style.less',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [tuiCheckboxOptionsProvider({appearance: () => 'action'})],\n    hostDirectives: [TuiScrollIntoView],\n    host: {\n        tuiSelectOption: '',\n        '[class._value]': 'option',\n        '[class._selected]': 'selected()',\n    },\n})\nexport class TuiSelectOption<T> {\n    private readonly handlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n    private readonly value = tuiInjectValue<T>();\n\n    protected readonly datalist = inject(TuiDataListComponent);\n    protected readonly option = inject<TuiOptionWithValue<T>>(TuiOptionWithValue, {\n        optional: true,\n    });\n\n    protected readonly selected = computed(\n        (controlValue = this.value(), optionValue = this.option?.value()) =>\n            tuiIsPresent(optionValue) &&\n            tuiIsPresent(controlValue) &&\n            this.handlers.identityMatcher()(controlValue, optionValue),\n    );\n\n    protected readonly scrolled = tuiDirectiveBinding(\n        TuiScrollIntoView,\n        'tuiScrollIntoView',\n        this.selected,\n    );\n}\n","import {Directive, effect, inject} from '@angular/core';\nimport {tuiAsControl, TuiControl} from '@taiga-ui/cdk/classes';\nimport {tuiIsPresent} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {tuiAsOptionContent} from '@taiga-ui/core/components/data-list';\nimport {\n    tuiAsTextfieldAccessor,\n    TuiSelectLike,\n    type TuiTextfieldAccessor,\n    TuiTextfieldDirective,\n    TuiWithTextfield,\n} from '@taiga-ui/core/components/textfield';\nimport {tuiDropdownEnabled, tuiDropdownOpen} from '@taiga-ui/core/directives/dropdown';\nimport {\n    TUI_ITEMS_HANDLERS,\n    type TuiItemsHandlers,\n} from '@taiga-ui/core/directives/items-handlers';\n\nimport {TuiSelectOption} from './select-option/select-option.component';\n\n@Directive({\n    selector: 'input[tuiSelect]',\n    providers: [\n        tuiAsOptionContent(TuiSelectOption),\n        tuiAsTextfieldAccessor(TuiSelectDirective),\n        tuiAsControl(TuiSelectDirective),\n    ],\n    hostDirectives: [TuiWithTextfield, TuiSelectLike],\n    host: {\n        '[disabled]': 'disabled()',\n        '(input)': '$event.inputType?.includes(\"delete\") && setValue(null)',\n    },\n})\nexport class TuiSelectDirective<T>\n    extends TuiControl<T | null>\n    implements TuiTextfieldAccessor<T>\n{\n    private readonly textfield = inject(TuiTextfieldDirective);\n    private readonly open = tuiDropdownOpen();\n    private readonly itemsHandlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n\n    protected readonly dropdownEnabled = tuiDropdownEnabled(this.interactive);\n    protected readonly valueEffect = effect(() => {\n        const value = this.value();\n        const string = tuiIsPresent(value) ? this.itemsHandlers.stringify()(value) : '';\n\n        this.textfield.value.set(string);\n    });\n\n    public setValue(value: T | null): void {\n        this.onChange(value);\n\n        if (!value) {\n            this.open.set(true);\n        }\n    }\n}\n","import {TuiNativeSelect} from './native-select/native-select.component';\nimport {TuiSelectDirective} from './select.directive';\n\nexport const TuiSelect = [TuiSelectDirective, TuiNativeSelect] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

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

@@ -1,16 +1,17 @@
 import { tuiRound } from '@taiga-ui/cdk/utils/math';
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, computed, Input, ChangeDetectionStrategy, Component, INJECTOR, input, Directive, ContentChild } from '@angular/core';
+import { inject, signal, computed, Input, ChangeDetectionStrategy, Component, INJECTOR, input, Directive, ContentChild } from '@angular/core';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgControl, NgModel } from '@angular/forms';
 import { TuiControl, TUI_IDENTITY_VALUE_TRANSFORMER } from '@taiga-ui/cdk/classes';
 import { tuiWatch, tuiControlValue, tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
 import { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
-import { tuiProvideOptions, tuiPure } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiPure } from '@taiga-ui/cdk/utils/miscellaneous';
 import { take, timer, switchMap, merge, tap, map, combineLatest, filter } from 'rxjs';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
 import { tuiAsAuxiliary } from '@taiga-ui/core/tokens';
+import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DOCUMENT, AsyncPipe } from '@angular/common';
 import { TUI_TRUE_HANDLER, TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
@@ -53,15 +54,7 @@ const TUI_SLIDER_DEFAULT_OPTIONS = {
     size: 'm',
     trackColor: 'var(--tui-background-neutral-2)',
 };
-/**
- * Default parameters for Slider component
- */
-const TUI_SLIDER_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_SLIDER_OPTIONS' : '', {
-    factory: () => TUI_SLIDER_DEFAULT_OPTIONS,
-});
-function tuiSliderOptionsProvider(options) {
-    return tuiProvideOptions(TUI_SLIDER_OPTIONS, options, TUI_SLIDER_DEFAULT_OPTIONS);
-}
+const [TUI_SLIDER_OPTIONS, tuiSliderOptionsProvider] = tuiCreateOptions(TUI_SLIDER_DEFAULT_OPTIONS);
 
 class TuiSliderComponent {
     constructor() {
@@ -152,7 +145,7 @@ class TuiSliderComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSliderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'input[type=range][tuiSlider]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsAuxiliary(TuiSliderComponent)], host: {
+            args: [{ selector: 'input[type=range][tuiSlider]', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsAuxiliary(TuiSliderComponent)], host: {
                         /**
                          * For change detection.
                          * Webkit does not have built-in method for customization of filling progress (as Firefox).
@@ -227,7 +220,6 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSliderKeyStepsBase, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'input[tuiSlider][keySteps]',
                     host: {
                         '[attr.min]': 'transformer() ? 0 : slider.min',
@@ -260,7 +252,6 @@ class TuiSliderKeySteps extends TuiControl {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSliderKeySteps, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'input[tuiSlider][keySteps][ngModel],input[tuiSlider][keySteps][formControl],input[tuiSlider][keySteps][formControlName]',
                     providers: [tuiFallbackValueProvider(0)],
                     host: {
@@ -328,7 +319,6 @@ class TuiSliderReadonly {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSliderReadonly, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'input[tuiSlider][readonly]',
                     host: {
                         '(keydown)': 'preventKeyboardInteraction($event)',
@@ -357,11 +347,11 @@ class TuiSliderThumbLabel {
         return this.ratio * (this.slider?.el.offsetWidth || 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSliderThumbLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiSliderThumbLabel, isStandalone: true, selector: "[tuiSliderThumbLabel]", providers: [tuiHintOptionsProvider({ direction: 'top', appearance: 'floating' })], queries: [{ propertyName: "slider", first: true, predicate: TuiSliderComponent, descendants: true }, { propertyName: "control", first: true, predicate: NgControl, descendants: true }], ngImport: i0, template: "@if (control?.valueChanges | async) {}\n\n<div\n    class=\"t-ghost\"\n    [attr.data-size]=\"size\"\n    [style.--tui-slider-thumb-ratio]=\"ratio\"\n    [style.inset-inline-start.px]=\"ghostStart\"\n    [style.left.px]=\"ghostStart\"\n>\n    <ng-content />\n</div>\n\n<ng-content select=\"input[type=range]\" />\n", styles: [":host{position:relative}.t-ghost{position:absolute;top:0;bottom:0;margin:auto;border-radius:50%;pointer-events:none}.t-ghost[data-size=s]{inline-size:.5rem;block-size:.5rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.5rem * var(--tui-inline)))}.t-ghost[data-size=m]{inline-size:.75rem;block-size:.75rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.75rem * var(--tui-inline)))}@supports (inset-inline-end: 0){:host-context([dir=\"rtl\"]) .t-ghost{left:unset!important}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiSliderThumbLabel, isStandalone: true, selector: "[tuiSliderThumbLabel]", providers: [tuiHintOptionsProvider({ direction: 'top', appearance: 'floating' })], queries: [{ propertyName: "slider", first: true, predicate: TuiSliderComponent, descendants: true }, { propertyName: "control", first: true, predicate: NgControl, descendants: true }], ngImport: i0, template: "@if (control?.valueChanges | async) {}\n\n<div\n    class=\"t-ghost\"\n    [attr.data-size]=\"size\"\n    [style.--tui-slider-thumb-ratio]=\"ratio\"\n    [style.inset-inline-start.px]=\"ghostStart\"\n>\n    <ng-content />\n</div>\n\n<ng-content select=\"input[type=range]\" />\n", styles: [":host{position:relative}.t-ghost{position:absolute;top:0;bottom:0;margin:auto;border-radius:50%;pointer-events:none}.t-ghost[data-size=s]{inline-size:.5rem;block-size:.5rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.5rem * var(--tui-inline)))}.t-ghost[data-size=m]{inline-size:.75rem;block-size:.75rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.75rem * var(--tui-inline)))}@supports (inset-inline-end: 0){:host-context([dir=\"rtl\"]) .t-ghost{left:unset!important}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiSliderThumbLabel, decorators: [{
             type: Component,
-            args: [{ selector: '[tuiSliderThumbLabel]', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiHintOptionsProvider({ direction: 'top', appearance: 'floating' })], template: "@if (control?.valueChanges | async) {}\n\n<div\n    class=\"t-ghost\"\n    [attr.data-size]=\"size\"\n    [style.--tui-slider-thumb-ratio]=\"ratio\"\n    [style.inset-inline-start.px]=\"ghostStart\"\n    [style.left.px]=\"ghostStart\"\n>\n    <ng-content />\n</div>\n\n<ng-content select=\"input[type=range]\" />\n", styles: [":host{position:relative}.t-ghost{position:absolute;top:0;bottom:0;margin:auto;border-radius:50%;pointer-events:none}.t-ghost[data-size=s]{inline-size:.5rem;block-size:.5rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.5rem * var(--tui-inline)))}.t-ghost[data-size=m]{inline-size:.75rem;block-size:.75rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.75rem * var(--tui-inline)))}@supports (inset-inline-end: 0){:host-context([dir=\"rtl\"]) .t-ghost{left:unset!important}}\n"] }]
+            args: [{ selector: '[tuiSliderThumbLabel]', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiHintOptionsProvider({ direction: 'top', appearance: 'floating' })], template: "@if (control?.valueChanges | async) {}\n\n<div\n    class=\"t-ghost\"\n    [attr.data-size]=\"size\"\n    [style.--tui-slider-thumb-ratio]=\"ratio\"\n    [style.inset-inline-start.px]=\"ghostStart\"\n>\n    <ng-content />\n</div>\n\n<ng-content select=\"input[type=range]\" />\n", styles: [":host{position:relative}.t-ghost{position:absolute;top:0;bottom:0;margin:auto;border-radius:50%;pointer-events:none}.t-ghost[data-size=s]{inline-size:.5rem;block-size:.5rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.5rem * var(--tui-inline)))}.t-ghost[data-size=m]{inline-size:.75rem;block-size:.75rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.75rem * var(--tui-inline)))}@supports (inset-inline-end: 0){:host-context([dir=\"rtl\"]) .t-ghost{left:unset!important}}\n"] }]
         }], propDecorators: { slider: [{
                 type: ContentChild,
                 args: [TuiSliderComponent]