@taiga-ui/legacy 4.4.1 → 4.5.0

package/classes/abstract-native-select.d.ts

@@ -7,8 +7,8 @@ import * as i0 from "@angular/core";
  * @deprecated: drop in v5.0
  */
 export declare abstract class AbstractTuiNativeSelect<H = TuiTextfieldHost, T = string> {
-    private readonly idService;
     protected readonly datalist: TemplateRef<any> | null;
+    protected readonly autoId: string;
     protected readonly el: HTMLSelectElement;
     protected readonly host: H;
     protected readonly control: AbstractTuiControl<any>;

package/components/color-selector/color-edit/color-edit.component.d.ts

@@ -6,7 +6,7 @@ export declare class TuiColorEditComponent {
     readonly colorChange: EventEmitter<[number, number, number, number]>;
     readonly hexMask: MaskitoOptions;
     readonly modes: string[];
-    mode: string;
+    mode: string | undefined;
     get isHex(): boolean;
     get hex(): string;
     get opacity(): number;

package/components/input-date-range/input-date-range.component.d.ts

@@ -1,4 +1,3 @@
-import type { AfterViewChecked } from '@angular/core';
 import type { MaskitoOptions } from '@maskito/core';
 import type { TuiDateMode, TuiDay, TuiDayLike } from '@taiga-ui/cdk/date-time';
 import { TuiDayRange, TuiMonth } from '@taiga-ui/cdk/date-time';
@@ -11,9 +10,8 @@ import { AbstractTuiNullableControl } from '@taiga-ui/legacy/classes';
 import type { TuiFocusableElementAccessor } from '@taiga-ui/legacy/tokens';
 import type { PolymorpheusContent } from '@taiga-ui/polymorpheus';
 import * as i0 from "@angular/core";
-export declare class TuiInputDateRangeComponent extends AbstractTuiNullableControl<TuiDayRange> implements TuiFocusableElementAccessor, AfterViewChecked {
+export declare class TuiInputDateRangeComponent extends AbstractTuiNullableControl<TuiDayRange> implements TuiFocusableElementAccessor {
     private readonly textfield?;
-    private readonly calendarRange?;
     private readonly isMobile;
     private readonly mobileCalendar;
     private readonly options;
@@ -38,7 +36,6 @@ export declare class TuiInputDateRangeComponent extends AbstractTuiNullableContr
     get computedExampleText(): string;
     get computedValue(): string;
     onClick(): void;
-    ngAfterViewChecked(): void;
     onValueChange(value: string): void;
     onRangeChange(range: TuiDayRange | null): void;
     writeValue(value: TuiDayRange | null): void;

package/components/input-password/input-password.component.d.ts

@@ -6,6 +6,9 @@ import type { TuiFocusableElementAccessor, TuiNativeFocusableElement } from '@ta
 import type { PolymorpheusContent } from '@taiga-ui/polymorpheus';
 import type { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
+/**
+ * @deprecated use {@link TuiInputPassword} instead
+ */
 export declare class TuiInputPasswordComponent extends AbstractTuiControl<string> implements TuiFocusableElementAccessor {
     private readonly textfield?;
     private readonly textfieldSize;
@@ -13,7 +16,7 @@ export declare class TuiInputPasswordComponent extends AbstractTuiControl<string
     protected readonly directive$: Observable<any>;
     protected isPasswordHidden: boolean;
     protected readonly computedAppearance$: Observable<string>;
-    protected readonly passwordTexts$: Observable<[show_password: string, hide_password: string]>;
+    protected readonly passwordTexts$: Observable<readonly [show_password: string, hide_password: string]>;
     protected readonly options: import("./input-password.options").TuiInputPasswordOptions;
     protected readonly type: TuiContext<TuiSizeL | TuiSizeS>;
     get nativeFocusableElement(): TuiNativeFocusableElement | null;

package/components/input-password/input-password.directive.d.ts

@@ -2,6 +2,9 @@ import type { DoCheck } from '@angular/core';
 import { AbstractTuiTextfieldHost } from '@taiga-ui/legacy/classes';
 import type { TuiInputPasswordComponent } from './input-password.component';
 import * as i0 from "@angular/core";
+/**
+ * @deprecated use {@link TuiInputPassword} instead
+ */
 export declare class TuiInputPasswordDirective extends AbstractTuiTextfieldHost<TuiInputPasswordComponent> implements DoCheck {
     protected input?: HTMLInputElement;
     onValueChange(value: string): void;

package/components/input-password/input-password.module.d.ts

@@ -9,6 +9,9 @@ import * as i7 from "@taiga-ui/legacy/components/primitive-textfield";
 import * as i8 from "@taiga-ui/legacy/directives";
 import * as i9 from "@taiga-ui/core/directives/appearance";
 import * as i10 from "@taiga-ui/core/components/icon";
+/**
+ * @deprecated use {@link TuiInputPassword} instead
+ */
 export declare class TuiInputPasswordModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiInputPasswordModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<TuiInputPasswordModule, [typeof i1.TuiInputPasswordComponent, typeof i2.TuiInputPasswordDirective], [typeof i3.TuiHintComponent, typeof i3.TuiHintDirective, typeof i3.TuiHintOptionsDirective, typeof i3.TuiHintUnstyled, typeof i3.TuiHintDriver, typeof i3.TuiHintPosition, typeof i3.TuiHintHover, typeof i3.TuiHintOverflow, typeof i3.TuiHintDescribe, typeof i3.TuiHintHost, typeof i3.TuiHintManual, typeof i3.TuiHintPointer, typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.PolymorpheusOutlet, typeof i6.PolymorpheusTemplate, typeof i7.TuiPrimitiveTextfieldModule, typeof i8.TuiTextfieldControllerModule, typeof i9.TuiAppearance, typeof i10.TuiIcon], [typeof i1.TuiInputPasswordComponent, typeof i2.TuiInputPasswordDirective, typeof i7.TuiTextfieldComponent, typeof i3.TuiHintComponent, typeof i3.TuiHintDirective, typeof i3.TuiHintOptionsDirective, typeof i3.TuiHintUnstyled, typeof i3.TuiHintDriver, typeof i3.TuiHintPosition, typeof i3.TuiHintHover, typeof i3.TuiHintOverflow, typeof i3.TuiHintDescribe, typeof i3.TuiHintHost, typeof i3.TuiHintManual, typeof i3.TuiHintPointer]>;

package/components/input-password/input-password.options.d.ts

@@ -2,12 +2,24 @@ import type { Provider } from '@angular/core';
 import type { TuiContext } from '@taiga-ui/cdk/types';
 import type { TuiSizeL, TuiSizeS } from '@taiga-ui/core/types';
 import type { PolymorpheusContent } from '@taiga-ui/polymorpheus';
+/**
+ * @deprecated use {@link TuiInputPassword} instead
+ */
 export interface TuiInputPasswordOptions {
     readonly icons: Readonly<{
         hide: PolymorpheusContent<TuiContext<TuiSizeL | TuiSizeS>>;
         show: PolymorpheusContent<TuiContext<TuiSizeL | TuiSizeS>>;
     }>;
 }
+/**
+ * @deprecated use {@link TuiInputPassword} instead
+ */
 export declare const TUI_INPUT_PASSWORD_DEFAULT_OPTIONS: TuiInputPasswordOptions;
+/**
+ * @deprecated use {@link TuiInputPassword} instead
+ */
 export declare const TUI_INPUT_PASSWORD_OPTIONS: import("@angular/core").InjectionToken<TuiInputPasswordOptions>;
+/**
+ * @deprecated use {@link TuiInputPassword} instead
+ */
 export declare function tuiInputPasswordOptionsProvider(options: Partial<TuiInputPasswordOptions>): Provider;

package/components/input-tag/input-tag.component.d.ts

@@ -33,6 +33,7 @@ export declare class TuiInputTagComponent extends AbstractTuiMultipleControl<str
     rows: number;
     inputHidden: boolean;
     uniqueTags: boolean;
+    autoColor: boolean;
     maxLength: number | null;
     placeholder: string;
     removable: boolean;
@@ -90,5 +91,5 @@ export declare class TuiInputTagComponent extends AbstractTuiMultipleControl<str
     private focusInput;
     private clippedValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiInputTagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiInputTagComponent, "tui-input-tag", never, { "separator": { "alias": "separator"; "required": false; }; "search": { "alias": "search"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "tagValidator": { "alias": "tagValidator"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "inputHidden": { "alias": "inputHidden"; "required": false; }; "uniqueTags": { "alias": "uniqueTags"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "pseudoOpen": { "alias": "pseudoOpen"; "required": false; }; "disabledItemHandler": { "alias": "disabledItemHandler"; "required": false; }; "pseudoFocusedSetter": { "alias": "pseudoFocused"; "required": false; }; }, { "searchChange": "searchChange"; }, ["datalist"], ["*", "tuiContent", "select"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiInputTagComponent, "tui-input-tag", never, { "separator": { "alias": "separator"; "required": false; }; "search": { "alias": "search"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "tagValidator": { "alias": "tagValidator"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "inputHidden": { "alias": "inputHidden"; "required": false; }; "uniqueTags": { "alias": "uniqueTags"; "required": false; }; "autoColor": { "alias": "autoColor"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "pseudoOpen": { "alias": "pseudoOpen"; "required": false; }; "disabledItemHandler": { "alias": "disabledItemHandler"; "required": false; }; "pseudoFocusedSetter": { "alias": "pseudoFocused"; "required": false; }; }, { "searchChange": "searchChange"; }, ["datalist"], ["*", "tuiContent", "select"], false, never>;
 }

package/components/input-tag/input-tag.options.d.ts

@@ -1,6 +1,7 @@
 import type { Provider } from '@angular/core';
 import type { TuiStatus } from '@taiga-ui/legacy/utils';
 export interface TuiInputTagOptions {
+    readonly autoColor: boolean;
     readonly separator: RegExp | string;
     readonly tagStatus: TuiStatus;
     readonly uniqueTags: boolean;

package/components/input-time/native-time/native-time.component.d.ts

@@ -2,7 +2,7 @@ import type { TuiInputTimeDirective } from '../input-time.directive';
 import * as i0 from "@angular/core";
 export declare class TuiNativeTimeComponent {
     protected readonly host: TuiInputTimeDirective;
-    protected readonly autoIdString: string;
+    protected readonly autoId: string;
     protected get items(): string[];
     protected get value(): string;
     protected get step(): number;

package/components/multi-select/multi-select.component.d.ts

@@ -31,6 +31,7 @@ export declare class TuiMultiSelectComponent<T> extends AbstractTuiMultipleContr
     valueContent: TuiMultiSelectOptions<T>['valueContent'];
     tagValidator: TuiBooleanHandler<T>;
     rows: TuiMultiSelectOptions<T>['rows'];
+    autoColor: boolean;
     readonly searchChange: EventEmitter<string | null>;
     get size(): TuiSizeL | TuiSizeS;
     get nativeFocusableElement(): HTMLInputElement | null;
@@ -61,5 +62,5 @@ export declare class TuiMultiSelectComponent<T> extends AbstractTuiMultipleContr
     protected onActiveZone(active: boolean): void;
     private updateSearch;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiMultiSelectComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiMultiSelectComponent<any>, "tui-multi-select", never, { "stringify": { "alias": "stringify"; "required": false; }; "identityMatcher": { "alias": "identityMatcher"; "required": false; }; "search": { "alias": "search"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "disabledItemHandler": { "alias": "disabledItemHandler"; "required": false; }; "valueContent": { "alias": "valueContent"; "required": false; }; "tagValidator": { "alias": "tagValidator"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, { "searchChange": "searchChange"; }, ["accessor", "nativeSelect", "datalist"], ["*", "select"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiMultiSelectComponent<any>, "tui-multi-select", never, { "stringify": { "alias": "stringify"; "required": false; }; "identityMatcher": { "alias": "identityMatcher"; "required": false; }; "search": { "alias": "search"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "disabledItemHandler": { "alias": "disabledItemHandler"; "required": false; }; "valueContent": { "alias": "valueContent"; "required": false; }; "tagValidator": { "alias": "tagValidator"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "autoColor": { "alias": "autoColor"; "required": false; }; }, { "searchChange": "searchChange"; }, ["accessor", "nativeSelect", "datalist"], ["*", "select"], false, never>;
 }

package/components/primitive-textfield/primitive-textfield.component.d.ts

@@ -61,6 +61,7 @@ export declare class TuiPrimitiveTextfieldComponent extends AbstractTuiInteracti
     protected onFocused(focused: boolean): void;
     protected clear(): void;
     protected onMouseDown(event: MouseEvent): void;
+    protected transitionStartHandler({ propertyName, target }: TransitionEvent): void;
     protected onAutofilled(autofilled: boolean): void;
     protected detectRetargetFromLabel(event: Event): void;
     private get iconPaddingLeft();

package/components/primitive-textfield/textfield/textfield.component.d.ts

@@ -1,8 +1,8 @@
 import type { TuiTextfieldHost } from '@taiga-ui/legacy/tokens';
 import * as i0 from "@angular/core";
 export declare class TuiTextfieldComponent {
+    private readonly autoId;
     private readonly el;
-    private readonly idService;
     protected readonly controller: import("@taiga-ui/legacy/directives").TuiTextfieldController;
     protected readonly host: TuiTextfieldHost;
     constructor();

package/components/sheet/components/sheet-heading/sheet-heading.component.d.ts

@@ -6,7 +6,7 @@ export declare class TuiSheetHeadingComponent implements AfterViewInit {
     private readonly el;
     protected readonly closeWord$: import("rxjs").Observable<string>;
     protected readonly icons: import("@taiga-ui/core/tokens").TuiCommonIcons;
-    protected readonly id: string;
+    protected readonly autoId: string;
     ngAfterViewInit(): void;
     protected onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiSheetHeadingComponent, never>;

package/directives/textfield-controller/textfield-appearance.directive.d.ts

@@ -1,12 +1,6 @@
 import { AbstractTuiController } from '@taiga-ui/legacy/classes';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_APPEARANCE_DIRECTIVE: import("@angular/core").InjectionToken<TuiTextfieldAppearanceDirective>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldAppearanceDirective extends AbstractTuiController {
     appearance: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldAppearanceDirective, never>;

package/directives/textfield-controller/textfield-cleaner.directive.d.ts

@@ -1,12 +1,6 @@
 import { AbstractTuiController } from '@taiga-ui/legacy/classes';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_CLEANER: import("@angular/core").InjectionToken<TuiTextfieldCleanerDirective>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldCleanerDirective extends AbstractTuiController {
     cleaner: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldCleanerDirective, never>;

package/directives/textfield-controller/textfield-controller.module.d.ts

@@ -10,9 +10,6 @@ import * as i8 from "./textfield-prefix.directive";
 import * as i9 from "./textfield-postfix.directive";
 import * as i10 from "./textfield-filler.directive";
 import * as i11 from "@taiga-ui/polymorpheus";
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldControllerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldControllerModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<TuiTextfieldControllerModule, [typeof i1.TuiTextfieldAppearanceDirective, typeof i2.TuiTextfieldCleanerDirective, typeof i3.TuiTextfieldCustomContentDirective, typeof i4.TuiTextfieldLabelOutsideDirective, typeof i5.TuiTextfieldSizeDirective, typeof i6.TuiTextfieldIconDirective, typeof i7.TuiTextfieldIconLeftDirective, typeof i8.TuiTextfieldPrefixDirective, typeof i9.TuiTextfieldPostfixDirective, typeof i10.TuiTextfieldFillerDirective], [typeof i11.PolymorpheusOutlet, typeof i11.PolymorpheusTemplate], [typeof i1.TuiTextfieldAppearanceDirective, typeof i2.TuiTextfieldCleanerDirective, typeof i3.TuiTextfieldCustomContentDirective, typeof i4.TuiTextfieldLabelOutsideDirective, typeof i5.TuiTextfieldSizeDirective, typeof i6.TuiTextfieldIconDirective, typeof i7.TuiTextfieldIconLeftDirective, typeof i8.TuiTextfieldPrefixDirective, typeof i9.TuiTextfieldPostfixDirective, typeof i10.TuiTextfieldFillerDirective, typeof i11.PolymorpheusOutlet, typeof i11.PolymorpheusTemplate]>;

package/directives/textfield-controller/textfield-controller.provider.d.ts

@@ -1,11 +1,5 @@
 import type { Provider } from '@angular/core';
 import { InjectionToken } from '@angular/core';
 import { TuiTextfieldController } from './textfield.controller';
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_WATCHED_CONTROLLER: InjectionToken<TuiTextfieldController>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TEXTFIELD_CONTROLLER_PROVIDER: Provider;

package/directives/textfield-controller/textfield-custom-content.directive.d.ts

@@ -1,13 +1,7 @@
 import { AbstractTuiController } from '@taiga-ui/legacy/classes';
 import type { PolymorpheusContent } from '@taiga-ui/polymorpheus';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_CUSTOM_CONTENT: import("@angular/core").InjectionToken<TuiTextfieldCustomContentDirective>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldCustomContentDirective extends AbstractTuiController {
     customContent: PolymorpheusContent;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldCustomContentDirective, never>;

package/directives/textfield-controller/textfield-filler.directive.d.ts

@@ -1,12 +1,6 @@
 import { AbstractTuiController } from '@taiga-ui/legacy/classes';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_FILLER: import("@angular/core").InjectionToken<TuiTextfieldFillerDirective>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldFillerDirective extends AbstractTuiController {
     filler: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldFillerDirective, never>;

package/directives/textfield-controller/textfield-icon-left.directive.d.ts

@@ -3,13 +3,7 @@ import type { TuiSizeL, TuiSizeS } from '@taiga-ui/core/types';
 import { AbstractTuiController } from '@taiga-ui/legacy/classes';
 import type { PolymorpheusContent } from '@taiga-ui/polymorpheus';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_ICON_LEFT: import("@angular/core").InjectionToken<TuiTextfieldIconLeftDirective>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldIconLeftDirective extends AbstractTuiController {
     iconStart: PolymorpheusContent<TuiContext<TuiSizeL | TuiSizeS>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldIconLeftDirective, never>;

package/directives/textfield-controller/textfield-icon.directive.d.ts

@@ -3,13 +3,7 @@ import type { TuiSizeL, TuiSizeS } from '@taiga-ui/core/types';
 import { AbstractTuiController } from '@taiga-ui/legacy/classes';
 import type { PolymorpheusContent } from '@taiga-ui/polymorpheus';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_ICON: import("@angular/core").InjectionToken<TuiTextfieldIconDirective>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldIconDirective extends AbstractTuiController {
     icon: PolymorpheusContent<TuiContext<TuiSizeL | TuiSizeS>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldIconDirective, never>;

package/directives/textfield-controller/textfield-label-outside.directive.d.ts

@@ -1,12 +1,6 @@
 import { AbstractTuiController } from '@taiga-ui/legacy/classes';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_LABEL_OUTSIDE: import("@angular/core").InjectionToken<TuiTextfieldLabelOutsideDirective>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldLabelOutsideDirective extends AbstractTuiController {
     labelOutside: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldLabelOutsideDirective, never>;

package/directives/textfield-controller/textfield-postfix.directive.d.ts

@@ -1,12 +1,6 @@
 import { AbstractTuiController } from '@taiga-ui/legacy/classes';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_POSTFIX: import("@angular/core").InjectionToken<TuiTextfieldPostfixDirective>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldPostfixDirective extends AbstractTuiController {
     postfix: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldPostfixDirective, never>;

package/directives/textfield-controller/textfield-prefix.directive.d.ts

@@ -1,12 +1,6 @@
 import { AbstractTuiController } from '@taiga-ui/legacy/classes';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_PREFIX: import("@angular/core").InjectionToken<TuiTextfieldPrefixDirective>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldPrefixDirective extends AbstractTuiController {
     prefix: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldPrefixDirective, never>;

package/directives/textfield-controller/textfield-size.directive.d.ts

@@ -1,13 +1,7 @@
 import type { TuiSizeL, TuiSizeS } from '@taiga-ui/core/types';
 import { AbstractTuiController } from '@taiga-ui/legacy/classes';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_TEXTFIELD_SIZE: import("@angular/core").InjectionToken<TuiTextfieldSizeDirective>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiTextfieldSizeDirective extends AbstractTuiController {
     size: TuiSizeL | TuiSizeS;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTextfieldSizeDirective, never>;

package/directives/textfield-controller/textfield.options.d.ts

@@ -2,9 +2,6 @@ import type { Provider } from '@angular/core';
 import type { TuiContext } from '@taiga-ui/cdk/types';
 import type { TuiSizeL, TuiSizeS } from '@taiga-ui/core/types';
 import type { PolymorpheusContent } from '@taiga-ui/polymorpheus';
-/**
- * @deprecated: drop in v5.0
- */
 export interface TuiTextfieldOptions {
     readonly hintOnDisabled: boolean;
     readonly iconCleaner: PolymorpheusContent<TuiContext<TuiSizeL | TuiSizeS>>;
@@ -19,7 +16,4 @@ export declare const TUI_TEXTFIELD_DEFAULT_OPTIONS: TuiTextfieldOptions;
  * Default parameters for textfield
  */
 export declare const TUI_TEXTFIELD_OPTIONS: import("@angular/core").InjectionToken<TuiTextfieldOptions>;
-/**
- * @deprecated: drop in v5.0
- */
 export declare function tuiTextfieldOptionsProvider(options: Partial<TuiTextfieldOptions>): Provider;

package/directives/unfinished-validator/unfinished-validator.directive.d.ts

@@ -1,8 +1,5 @@
 import type { Validator } from '@angular/forms';
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiUnfinishedValidator implements Validator {
     private readonly injector;
     readonly validate: import("@angular/forms").ValidatorFn;

package/directives/unfinished-validator/unfinished.validator.d.ts

@@ -1,7 +1,4 @@
 import type { ValidatorFn } from '@angular/forms';
 import type { TuiFocusableElementAccessor } from '@taiga-ui/legacy/tokens';
 import type { PolymorpheusContent } from '@taiga-ui/polymorpheus';
-/**
- * @deprecated: drop in v5.0
- */
 export declare function tuiCreateUnfinishedValidator(nativeInputGetter: () => TuiFocusableElementAccessor, message: PolymorpheusContent): ValidatorFn;

package/directives/value-accessor/value-accessor.directive.d.ts

@@ -1,7 +1,4 @@
 import * as i0 from "@angular/core";
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiValueAccessorDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiValueAccessorDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TuiValueAccessorDirective, "[tuiValueAccessor]", never, {}, {}, never, never, false, never>;

package/directives/value-accessor/value-accessor.module.d.ts

@@ -1,8 +1,5 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./value-accessor.directive";
-/**
- * @deprecated: drop in v5.0
- */
 export declare class TuiValueAccessorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiValueAccessorModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<TuiValueAccessorModule, [typeof i1.TuiValueAccessorDirective], never, [typeof i1.TuiValueAccessorDirective]>;

package/directives/value-accessor/value-accessor.provider.d.ts

@@ -1,5 +1,2 @@
 import type { FactoryProvider } from '@angular/core';
-/**
- * @deprecated: drop in v5.0
- */
 export declare const TUI_VALUE_ACCESSOR_PROVIDER: FactoryProvider;

package/esm2022/classes/abstract-native-select.mjs

@@ -1,5 +1,5 @@
 import { Directive, inject, Input, TemplateRef, ViewChild } from '@angular/core';
-import { TuiIdService } from '@taiga-ui/cdk/services';
+import { tuiInjectId } from '@taiga-ui/cdk/services';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
 import { TuiDataListDirective } from '@taiga-ui/core/components/data-list';
 import { TUI_ITEMS_HANDLERS } from '@taiga-ui/kit/tokens';
@@ -11,8 +11,8 @@ import * as i0 from "@angular/core";
  */
 class AbstractTuiNativeSelect {
     constructor() {
-        this.idService = inject(TuiIdService);
         this.datalist = null;
+        this.autoId = tuiInjectId();
         this.el = tuiInjectElement();
         this.host = inject(TUI_TEXTFIELD_HOST);
         this.control = inject(AbstractTuiControl);
@@ -21,7 +21,7 @@ class AbstractTuiNativeSelect {
         this.placeholder = '';
     }
     get id() {
-        return this.el.id || this.idService.generate();
+        return this.el.id || this.autoId;
     }
     get emptyOption() {
         return !!this.placeholder && !this.control.value;
@@ -45,4 +45,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], placeholder: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWJzdHJhY3QtbmF0aXZlLXNlbGVjdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2xlZ2FjeS9jbGFzc2VzL2Fic3RyYWN0LW5hdGl2ZS1zZWxlY3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBRXBELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBQyxvQkFBb0IsRUFBQyxNQUFNLHFDQUFxQyxDQUFDO0FBQ3pFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBRXhELE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBRTNELE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLFdBQVcsQ0FBQzs7QUFFN0M7O0dBRUc7QUFDSCxNQUtzQix1QkFBdUI7SUFMN0M7UUFNcUIsY0FBUyxHQUFHLE1BQU0sQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUcvQixhQUFRLEdBQTRCLElBQUksQ0FBQztRQUV6QyxPQUFFLEdBQUcsZ0JBQWdCLEVBQXFCLENBQUM7UUFDM0MsU0FBSSxHQUFHLE1BQU0sQ0FBSSxrQkFBa0IsQ0FBQyxDQUFDO1FBQ3JDLFlBQU8sR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUNyQyxrQkFBYSxHQUFHLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBR3ZELHdCQUFtQixHQUFnQyxJQUFJLENBQUM7UUFHeEQsZ0JBQVcsR0FBRyxFQUFFLENBQUM7S0FTM0I7SUFQRyxJQUFjLEVBQUU7UUFDWixPQUFPLElBQUksQ0FBQyxFQUFFLENBQUMsRUFBRSxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDbkQsQ0FBQztJQUVELElBQWMsV0FBVztRQUNyQixPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUM7SUFDckQsQ0FBQzsrR0F2QmlCLHVCQUF1QjttR0FBdkIsdUJBQXVCLDhMQUc5QixvQkFBb0IsMkJBQVMsV0FBVzs7U0FIakMsdUJBQXVCOzRGQUF2Qix1QkFBdUI7a0JBTDVDLFNBQVM7bUJBQUM7b0JBQ1AsSUFBSSxFQUFFO3dCQUNGLE1BQU0sRUFBRSxJQUFJO3FCQUNmO2lCQUNKOzhCQUtzQixRQUFRO3NCQUQxQixTQUFTO3VCQUFDLG9CQUFvQixFQUFFLEVBQUMsSUFBSSxFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQVMzRCxtQkFBbUI7c0JBRHpCLEtBQUs7Z0JBSUMsV0FBVztzQkFEakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7RGlyZWN0aXZlLCBpbmplY3QsIElucHV0LCBUZW1wbGF0ZVJlZiwgVmlld0NoaWxkfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7VHVpSWRTZXJ2aWNlfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3NlcnZpY2VzJztcbmltcG9ydCB0eXBlIHtUdWlCb29sZWFuSGFuZGxlcn0gZnJvbSAnQHRhaWdhLXVpL2Nkay90eXBlcyc7XG5pbXBvcnQge3R1aUluamVjdEVsZW1lbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvZG9tJztcbmltcG9ydCB7VHVpRGF0YUxpc3REaXJlY3RpdmV9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvZGF0YS1saXN0JztcbmltcG9ydCB7VFVJX0lURU1TX0hBTkRMRVJTfSBmcm9tICdAdGFpZ2EtdWkva2l0L3Rva2Vucyc7XG5pbXBvcnQgdHlwZSB7VHVpVGV4dGZpZWxkSG9zdH0gZnJvbSAnQHRhaWdhLXVpL2xlZ2FjeS90b2tlbnMnO1xuaW1wb3J0IHtUVUlfVEVYVEZJRUxEX0hPU1R9IGZyb20gJ0B0YWlnYS11aS9sZWdhY3kvdG9rZW5zJztcblxuaW1wb3J0IHtBYnN0cmFjdFR1aUNvbnRyb2x9IGZyb20gJy4vY29udHJvbCc7XG5cbi8qKlxuICogQGRlcHJlY2F0ZWQ6IGRyb3AgaW4gdjUuMFxuICovXG5ARGlyZWN0aXZlKHtcbiAgICBob3N0OiB7XG4gICAgICAgICdbaWRdJzogJ2lkJyxcbiAgICB9LFxufSlcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBBYnN0cmFjdFR1aU5hdGl2ZVNlbGVjdDxIID0gVHVpVGV4dGZpZWxkSG9zdCwgVCA9IHN0cmluZz4ge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgaWRTZXJ2aWNlID0gaW5qZWN0KFR1aUlkU2VydmljZSk7XG5cbiAgICBAVmlld0NoaWxkKFR1aURhdGFMaXN0RGlyZWN0aXZlLCB7cmVhZDogVGVtcGxhdGVSZWYsIHN0YXRpYzogdHJ1ZX0pXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGRhdGFsaXN0OiBUZW1wbGF0ZVJlZjxhbnk+IHwgbnVsbCA9IG51bGw7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgZWwgPSB0dWlJbmplY3RFbGVtZW50PEhUTUxTZWxlY3RFbGVtZW50PigpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBob3N0ID0gaW5qZWN0PEg+KFRVSV9URVhURklFTERfSE9TVCk7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGNvbnRyb2wgPSBpbmplY3QoQWJzdHJhY3RUdWlDb250cm9sKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaXRlbXNIYW5kbGVycyA9IGluamVjdChUVUlfSVRFTVNfSEFORExFUlMpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgZGlzYWJsZWRJdGVtSGFuZGxlcjogVHVpQm9vbGVhbkhhbmRsZXI8VD4gfCBudWxsID0gbnVsbDtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHBsYWNlaG9sZGVyID0gJyc7XG5cbiAgICBwcm90ZWN0ZWQgZ2V0IGlkKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB0aGlzLmVsLmlkIHx8IHRoaXMuaWRTZXJ2aWNlLmdlbmVyYXRlKCk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBlbXB0eU9wdGlvbigpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuICEhdGhpcy5wbGFjZWhvbGRlciAmJiAhdGhpcy5jb250cm9sLnZhbHVlO1xuICAgIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWJzdHJhY3QtbmF0aXZlLXNlbGVjdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2xlZ2FjeS9jbGFzc2VzL2Fic3RyYWN0LW5hdGl2ZS1zZWxlY3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBRW5ELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBQyxvQkFBb0IsRUFBQyxNQUFNLHFDQUFxQyxDQUFDO0FBQ3pFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBRXhELE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBRTNELE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLFdBQVcsQ0FBQzs7QUFFN0M7O0dBRUc7QUFDSCxNQUtzQix1QkFBdUI7SUFMN0M7UUFPdUIsYUFBUSxHQUE0QixJQUFJLENBQUM7UUFFekMsV0FBTSxHQUFHLFdBQVcsRUFBRSxDQUFDO1FBQ3ZCLE9BQUUsR0FBRyxnQkFBZ0IsRUFBcUIsQ0FBQztRQUMzQyxTQUFJLEdBQUcsTUFBTSxDQUFJLGtCQUFrQixDQUFDLENBQUM7UUFDckMsWUFBTyxHQUFHLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBQ3JDLGtCQUFhLEdBQUcsTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUM7UUFHdkQsd0JBQW1CLEdBQWdDLElBQUksQ0FBQztRQUd4RCxnQkFBVyxHQUFHLEVBQUUsQ0FBQztLQVMzQjtJQVBHLElBQWMsRUFBRTtRQUNaLE9BQU8sSUFBSSxDQUFDLEVBQUUsQ0FBQyxFQUFFLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQyxDQUFDO0lBRUQsSUFBYyxXQUFXO1FBQ3JCLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQztJQUNyRCxDQUFDOytHQXRCaUIsdUJBQXVCO21HQUF2Qix1QkFBdUIsOExBQzlCLG9CQUFvQiwyQkFBUyxXQUFXOztTQURqQyx1QkFBdUI7NEZBQXZCLHVCQUF1QjtrQkFMNUMsU0FBUzttQkFBQztvQkFDUCxJQUFJLEVBQUU7d0JBQ0YsTUFBTSxFQUFFLElBQUk7cUJBQ2Y7aUJBQ0o7OEJBR3NCLFFBQVE7c0JBRDFCLFNBQVM7dUJBQUMsb0JBQW9CLEVBQUUsRUFBQyxJQUFJLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUM7Z0JBVTNELG1CQUFtQjtzQkFEekIsS0FBSztnQkFJQyxXQUFXO3NCQURqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtEaXJlY3RpdmUsIGluamVjdCwgSW5wdXQsIFRlbXBsYXRlUmVmLCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0dWlJbmplY3RJZH0gZnJvbSAnQHRhaWdhLXVpL2Nkay9zZXJ2aWNlcyc7XG5pbXBvcnQgdHlwZSB7VHVpQm9vbGVhbkhhbmRsZXJ9IGZyb20gJ0B0YWlnYS11aS9jZGsvdHlwZXMnO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge1R1aURhdGFMaXN0RGlyZWN0aXZlfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2RhdGEtbGlzdCc7XG5pbXBvcnQge1RVSV9JVEVNU19IQU5ETEVSU30gZnJvbSAnQHRhaWdhLXVpL2tpdC90b2tlbnMnO1xuaW1wb3J0IHR5cGUge1R1aVRleHRmaWVsZEhvc3R9IGZyb20gJ0B0YWlnYS11aS9sZWdhY3kvdG9rZW5zJztcbmltcG9ydCB7VFVJX1RFWFRGSUVMRF9IT1NUfSBmcm9tICdAdGFpZ2EtdWkvbGVnYWN5L3Rva2Vucyc7XG5cbmltcG9ydCB7QWJzdHJhY3RUdWlDb250cm9sfSBmcm9tICcuL2NvbnRyb2wnO1xuXG4vKipcbiAqIEBkZXByZWNhdGVkOiBkcm9wIGluIHY1LjBcbiAqL1xuQERpcmVjdGl2ZSh7XG4gICAgaG9zdDoge1xuICAgICAgICAnW2lkXSc6ICdpZCcsXG4gICAgfSxcbn0pXG5leHBvcnQgYWJzdHJhY3QgY2xhc3MgQWJzdHJhY3RUdWlOYXRpdmVTZWxlY3Q8SCA9IFR1aVRleHRmaWVsZEhvc3QsIFQgPSBzdHJpbmc+IHtcbiAgICBAVmlld0NoaWxkKFR1aURhdGFMaXN0RGlyZWN0aXZlLCB7cmVhZDogVGVtcGxhdGVSZWYsIHN0YXRpYzogdHJ1ZX0pXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGRhdGFsaXN0OiBUZW1wbGF0ZVJlZjxhbnk+IHwgbnVsbCA9IG51bGw7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgYXV0b0lkID0gdHVpSW5qZWN0SWQoKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgZWwgPSB0dWlJbmplY3RFbGVtZW50PEhUTUxTZWxlY3RFbGVtZW50PigpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBob3N0ID0gaW5qZWN0PEg+KFRVSV9URVhURklFTERfSE9TVCk7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGNvbnRyb2wgPSBpbmplY3QoQWJzdHJhY3RUdWlDb250cm9sKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaXRlbXNIYW5kbGVycyA9IGluamVjdChUVUlfSVRFTVNfSEFORExFUlMpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgZGlzYWJsZWRJdGVtSGFuZGxlcjogVHVpQm9vbGVhbkhhbmRsZXI8VD4gfCBudWxsID0gbnVsbDtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHBsYWNlaG9sZGVyID0gJyc7XG5cbiAgICBwcm90ZWN0ZWQgZ2V0IGlkKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB0aGlzLmVsLmlkIHx8IHRoaXMuYXV0b0lkO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgZW1wdHlPcHRpb24oKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiAhIXRoaXMucGxhY2Vob2xkZXIgJiYgIXRoaXMuY29udHJvbC52YWx1ZTtcbiAgICB9XG59XG4iXX0=

package/esm2022/components/color-selector/color-edit/color-edit.component.mjs

@@ -45,12 +45,12 @@ class TuiColorEditComponent {
         this.colorChange.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiColorEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiColorEditComponent, selector: "tui-color-edit", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<tui-select\n    tuiDropdownAlign=\"left\"\n    tuiDropdownLimitWidth=\"min\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-select\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [(ngModel)]=\"mode\"\n>\n    <tui-data-list\n        *tuiDataList\n        size=\"s\"\n    >\n        <button\n            *ngFor=\"let item of modes\"\n            tuiOption\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</tui-select>\n<tui-primitive-textfield\n    *ngIf=\"isHex; else rgb\"\n    tuiTextfieldSize=\"m\"\n    [maskito]=\"hexMask\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [value]=\"hex\"\n    (valueChange)=\"onHexChange($event)\"\n/>\n<ng-template #rgb>\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange($event, color[1], color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[1]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], $event, color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[2]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], color[1], $event, color[3])\"\n    />\n</ng-template>\n<tui-input-number\n    tuiTextfieldPostfix=\"%\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-opacity\"\n    [max]=\"100\"\n    [min]=\"0\"\n    [ngModel]=\"opacity\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    (ngModelChange)=\"onRgbChange(color[0], color[1], color[2], $event / 100)\"\n/>\n", styles: [":host{display:flex}.t-select{width:5.875rem}.t-opacity{width:4.275rem}.t-rgb,.t-opacity{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i4.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i4.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: i5.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "component", type: i6.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i6.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "component", type: i7.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i7.TuiSelectDirective, selector: "tui-select" }, { kind: "directive", type: i8.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "component", type: i9.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i9.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i9.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiColorEditComponent, selector: "tui-color-edit", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<tui-select\n    tuiDropdownAlign=\"left\"\n    tuiDropdownLimitWidth=\"min\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-select\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [(ngModel)]=\"mode\"\n>\n    <tui-data-list\n        *tuiDataList\n        size=\"s\"\n    >\n        <button\n            *ngFor=\"let item of modes\"\n            tuiOption\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</tui-select>\n<tui-primitive-textfield\n    *ngIf=\"isHex; else rgb\"\n    tuiTextfieldSize=\"m\"\n    [maskito]=\"hexMask\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [value]=\"hex\"\n    (valueChange)=\"onHexChange($event)\"\n/>\n<ng-template #rgb>\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange($event, color[1], color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[1]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], $event, color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[2]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], color[1], $event, color[3])\"\n    />\n</ng-template>\n<tui-input-number\n    tuiTextfieldPostfix=\"%\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-opacity\"\n    [max]=\"100\"\n    [min]=\"0\"\n    [ngModel]=\"opacity\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    (ngModelChange)=\"onRgbChange(color[0], color[1], color[2], $event / 100)\"\n/>\n", styles: [":host{display:flex}.t-select{inline-size:5.875rem}.t-opacity{inline-size:4.275rem}.t-rgb,.t-opacity{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i4.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i4.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: i5.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "component", type: i6.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i6.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "component", type: i7.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i7.TuiSelectDirective, selector: "tui-select" }, { kind: "directive", type: i8.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "component", type: i9.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i9.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i9.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 export { TuiColorEditComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiColorEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-color-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-select\n    tuiDropdownAlign=\"left\"\n    tuiDropdownLimitWidth=\"min\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-select\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [(ngModel)]=\"mode\"\n>\n    <tui-data-list\n        *tuiDataList\n        size=\"s\"\n    >\n        <button\n            *ngFor=\"let item of modes\"\n            tuiOption\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</tui-select>\n<tui-primitive-textfield\n    *ngIf=\"isHex; else rgb\"\n    tuiTextfieldSize=\"m\"\n    [maskito]=\"hexMask\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [value]=\"hex\"\n    (valueChange)=\"onHexChange($event)\"\n/>\n<ng-template #rgb>\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange($event, color[1], color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[1]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], $event, color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[2]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], color[1], $event, color[3])\"\n    />\n</ng-template>\n<tui-input-number\n    tuiTextfieldPostfix=\"%\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-opacity\"\n    [max]=\"100\"\n    [min]=\"0\"\n    [ngModel]=\"opacity\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    (ngModelChange)=\"onRgbChange(color[0], color[1], color[2], $event / 100)\"\n/>\n", styles: [":host{display:flex}.t-select{width:5.875rem}.t-opacity{width:4.275rem}.t-rgb,.t-opacity{text-align:center}\n"] }]
+            args: [{ selector: 'tui-color-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-select\n    tuiDropdownAlign=\"left\"\n    tuiDropdownLimitWidth=\"min\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-select\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [(ngModel)]=\"mode\"\n>\n    <tui-data-list\n        *tuiDataList\n        size=\"s\"\n    >\n        <button\n            *ngFor=\"let item of modes\"\n            tuiOption\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</tui-select>\n<tui-primitive-textfield\n    *ngIf=\"isHex; else rgb\"\n    tuiTextfieldSize=\"m\"\n    [maskito]=\"hexMask\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [value]=\"hex\"\n    (valueChange)=\"onHexChange($event)\"\n/>\n<ng-template #rgb>\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange($event, color[1], color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[1]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], $event, color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[2]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], color[1], $event, color[3])\"\n    />\n</ng-template>\n<tui-input-number\n    tuiTextfieldPostfix=\"%\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-opacity\"\n    [max]=\"100\"\n    [min]=\"0\"\n    [ngModel]=\"opacity\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    (ngModelChange)=\"onRgbChange(color[0], color[1], color[2], $event / 100)\"\n/>\n", styles: [":host{display:flex}.t-select{inline-size:5.875rem}.t-opacity{inline-size:4.275rem}.t-rgb,.t-opacity{text-align:center}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], colorChange: [{

package/esm2022/components/color-selector/color-picker/color-picker.component.mjs

@@ -53,7 +53,7 @@ class TuiColorPickerComponent {
         this.colorChange.emit([...this.currentColor, this.opacity]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiColorPickerComponent, selector: "tui-color-picker", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<tui-flat-picker\n    class=\"t-flat\"\n    [style.backgroundColor]=\"base\"\n    [value]=\"point\"\n    (valueChange)=\"onPointChange($event)\"\n/>\n<div class=\"t-wrapper t-wrapper_hue\">\n    <tui-linear-picker\n        class=\"t-hue\"\n        [value]=\"hue\"\n        (valueChange)=\"onHueChange($event)\"\n    />\n</div>\n<div\n    class=\"t-wrapper t-wrapper_opacity\"\n    [style.background]=\"gradient\"\n>\n    <tui-linear-picker\n        class=\"t-opacity\"\n        [value]=\"opacity\"\n        (valueChange)=\"onOpacityChange($event)\"\n    />\n</div>\n", styles: [":host{position:relative;display:block;isolation:isolate}.t-flat{height:14rem;background:linear-gradient(#0000,#000),linear-gradient(to right,#fff,#fff0);margin-bottom:.25rem;overflow:hidden}.t-wrapper{position:relative;margin:1rem 1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper_hue{background:red}.t-wrapper_opacity:before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:inherit;margin:0 .5rem}.t-opacity{border-radius:inherit;margin:0 .5rem}\n"], dependencies: [{ kind: "component", type: i1.TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: ["value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiColorPickerComponent, selector: "tui-color-picker", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<tui-flat-picker\n    class=\"t-flat\"\n    [style.backgroundColor]=\"base\"\n    [value]=\"point\"\n    (valueChange)=\"onPointChange($event)\"\n/>\n<div class=\"t-wrapper t-wrapper_hue\">\n    <tui-linear-picker\n        class=\"t-hue\"\n        [value]=\"hue\"\n        (valueChange)=\"onHueChange($event)\"\n    />\n</div>\n<div\n    class=\"t-wrapper t-wrapper_opacity\"\n    [style.background]=\"gradient\"\n>\n    <tui-linear-picker\n        class=\"t-opacity\"\n        [value]=\"opacity\"\n        (valueChange)=\"onOpacityChange($event)\"\n    />\n</div>\n", styles: [":host{position:relative;display:block;isolation:isolate}.t-flat{block-size:14rem;background:linear-gradient(#0000,#000),linear-gradient(to right,#fff,#fff0);margin-bottom:.25rem;overflow:hidden}.t-wrapper{position:relative;margin:1rem 1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper_hue{background:red}.t-wrapper_opacity:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:inherit;margin:0 .5rem}.t-opacity{border-radius:inherit;margin:0 .5rem}\n"], dependencies: [{ kind: "component", type: i1.TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: ["value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -61,7 +61,7 @@ __decorate([
 export { TuiColorPickerComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-flat-picker\n    class=\"t-flat\"\n    [style.backgroundColor]=\"base\"\n    [value]=\"point\"\n    (valueChange)=\"onPointChange($event)\"\n/>\n<div class=\"t-wrapper t-wrapper_hue\">\n    <tui-linear-picker\n        class=\"t-hue\"\n        [value]=\"hue\"\n        (valueChange)=\"onHueChange($event)\"\n    />\n</div>\n<div\n    class=\"t-wrapper t-wrapper_opacity\"\n    [style.background]=\"gradient\"\n>\n    <tui-linear-picker\n        class=\"t-opacity\"\n        [value]=\"opacity\"\n        (valueChange)=\"onOpacityChange($event)\"\n    />\n</div>\n", styles: [":host{position:relative;display:block;isolation:isolate}.t-flat{height:14rem;background:linear-gradient(#0000,#000),linear-gradient(to right,#fff,#fff0);margin-bottom:.25rem;overflow:hidden}.t-wrapper{position:relative;margin:1rem 1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper_hue{background:red}.t-wrapper_opacity:before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:inherit;margin:0 .5rem}.t-opacity{border-radius:inherit;margin:0 .5rem}\n"] }]
+            args: [{ selector: 'tui-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-flat-picker\n    class=\"t-flat\"\n    [style.backgroundColor]=\"base\"\n    [value]=\"point\"\n    (valueChange)=\"onPointChange($event)\"\n/>\n<div class=\"t-wrapper t-wrapper_hue\">\n    <tui-linear-picker\n        class=\"t-hue\"\n        [value]=\"hue\"\n        (valueChange)=\"onHueChange($event)\"\n    />\n</div>\n<div\n    class=\"t-wrapper t-wrapper_opacity\"\n    [style.background]=\"gradient\"\n>\n    <tui-linear-picker\n        class=\"t-opacity\"\n        [value]=\"opacity\"\n        (valueChange)=\"onOpacityChange($event)\"\n    />\n</div>\n", styles: [":host{position:relative;display:block;isolation:isolate}.t-flat{block-size:14rem;background:linear-gradient(#0000,#000),linear-gradient(to right,#fff,#fff0);margin-bottom:.25rem;overflow:hidden}.t-wrapper{position:relative;margin:1rem 1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper_hue{background:red}.t-wrapper_opacity:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:inherit;margin:0 .5rem}.t-opacity{border-radius:inherit;margin:0 .5rem}\n"] }]
         }], propDecorators: { colorChange: [{
                 type: Output
             }], color: [{