@taiga-ui/legacy 4.52.0-canary.38dfc57 → 4.52.0-canary.3915ce7

package/fesm2022/taiga-ui-legacy-components-color-selector.mjs

@@ -1,726 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgModule, inject, Injectable, InjectionToken } from '@angular/core';
-import { tuiRgbToHex, tuiHexToRgb, tuiRgbToHsv, tuiHsvToRgb, tuiParseGradient, tuiGetGradientData, tuiParseColor } from '@taiga-ui/cdk/utils/color';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i2 from '@maskito/angular';
-import { MaskitoDirective } from '@maskito/angular';
-import * as i3 from '@taiga-ui/legacy/components/primitive-textfield';
-import { TuiPrimitiveTextfieldModule } from '@taiga-ui/legacy/components/primitive-textfield';
-import * as i4 from '@taiga-ui/legacy/directives/textfield-controller';
-import { TuiTextfieldControllerModule } from '@taiga-ui/legacy/directives/textfield-controller';
-import * as i5 from '@taiga-ui/legacy/components/input-number';
-import { TuiInputNumberModule } from '@taiga-ui/legacy/components/input-number';
-import * as i6 from '@taiga-ui/legacy/components/select';
-import { TuiSelectModule } from '@taiga-ui/legacy/components/select';
-import * as i1$1 from '@taiga-ui/core/directives/dropdown';
-import { TuiDropdown } from '@taiga-ui/core/directives/dropdown';
-import * as i2$1 from '@taiga-ui/core/components/data-list';
-import { TuiDataList } from '@taiga-ui/core/components/data-list';
-import * as i2$2 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
-import * as i1$3 from '@taiga-ui/core/components/button';
-import { TuiButton } from '@taiga-ui/core/components/button';
-import { __decorate } from 'tslib';
-import { DomSanitizer } from '@angular/platform-browser';
-import { tuiRound } from '@taiga-ui/cdk/utils/math';
-import { tuiPure, tuiProvideOptions, tuiDefaultSort } from '@taiga-ui/cdk/utils/miscellaneous';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { tuiTypedFromEvent, tuiPreventDefault } from '@taiga-ui/cdk/observables';
-import { tuiInjectElement, tuiGetElementPoint } from '@taiga-ui/cdk/utils/dom';
-import { Observable, switchMap, map, takeUntil, startWith } from 'rxjs';
-import { TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
-import * as i7 from '@taiga-ui/core/directives/group';
-import { TuiGroup } from '@taiga-ui/core/directives/group';
-import * as i1$2 from '@taiga-ui/core/directives/hint';
-import { TuiHint } from '@taiga-ui/core/directives/hint';
-import * as i10 from '@taiga-ui/kit/directives/chevron';
-import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
-import * as i11 from '@taiga-ui/core/components/icon';
-import { TuiIcon } from '@taiga-ui/core/components/icon';
-import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
-
-const HEX_MODE_LENGTH = 6;
-class TuiColorEditComponent {
-    constructor() {
-        this.color = [0, 0, 0, 1];
-        this.colorChange = new EventEmitter();
-        this.hexMask = {
-            mask: new RegExp(`^[A-F\\d]{0,${HEX_MODE_LENGTH}}$`, 'gi'),
-        };
-        this.modes = ['HEX', 'RGB'];
-        this.mode = this.modes[0];
-    }
-    get isHex() {
-        return this.mode === this.modes[0];
-    }
-    get hex() {
-        return tuiRgbToHex(this.color[0], this.color[1], this.color[2]).replace('#', '');
-    }
-    get opacity() {
-        return Math.round(this.color[3] * 100);
-    }
-    onHexChange(hex) {
-        if (hex.length !== HEX_MODE_LENGTH) {
-            return;
-        }
-        const rgb = tuiHexToRgb(hex);
-        this.updateColor([rgb[0], rgb[1], rgb[2], this.color[3]]);
-    }
-    onRgbChange(...rgba) {
-        this.updateColor(rgba);
-    }
-    updateColor(color) {
-        this.color = color;
-        this.colorChange.emit(color);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiColorEditComponent, isStandalone: false, 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        @for (item of modes; track item) {\n            <button\n                tuiOption\n                type=\"button\"\n                [value]=\"item\"\n            >\n                {{ item }}\n            </button>\n        }\n    </tui-data-list>\n</tui-select>\n@if (isHex) {\n    <tui-primitive-textfield\n        tuiTextfieldSize=\"m\"\n        [maskito]=\"hexMask\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        [value]=\"hex\"\n        (valueChange)=\"onHexChange($event)\"\n    />\n} @else {\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}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i3.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i3.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i4.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i4.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: i4.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "component", type: i5.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i5.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "component", type: i6.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i6.TuiSelectDirective, selector: "tui-select" }, { kind: "directive", type: i1$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "component", type: i2$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i2$1.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorEditComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, 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        @for (item of modes; track item) {\n            <button\n                tuiOption\n                type=\"button\"\n                [value]=\"item\"\n            >\n                {{ item }}\n            </button>\n        }\n    </tui-data-list>\n</tui-select>\n@if (isHex) {\n    <tui-primitive-textfield\n        tuiTextfieldSize=\"m\"\n        [maskito]=\"hexMask\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        [value]=\"hex\"\n        (valueChange)=\"onHexChange($event)\"\n    />\n} @else {\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}\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: [{
-                type: Output
-            }] } });
-
-/**
- * TODO(v5): delete it
- * @deprecated use new version of {@link https://taiga-ui.dev/components/input-color TuiInputColor} (from @taiga-ui/kit) instead
- */
-class TuiColorEditModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorEditModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiColorEditModule, declarations: [TuiColorEditComponent], imports: [CommonModule,
-            FormsModule,
-            MaskitoDirective,
-            TuiPrimitiveTextfieldModule,
-            TuiTextfieldControllerModule,
-            TuiInputNumberModule,
-            TuiSelectModule, i1$1.TuiDropdownOptionsDirective, i1$1.TuiDropdownDriverDirective, i1$1.TuiDropdownDirective, i1$1.TuiDropdownComponent, i1$1.TuiDropdownOpen, i1$1.TuiDropdownOpenLegacy, i1$1.TuiDropdownPortal, i1$1.TuiDropdownManual, i1$1.TuiDropdownHover, i1$1.TuiDropdownContext, i1$1.TuiDropdownPosition, i1$1.TuiDropdownPositionSided, i1$1.TuiDropdownSelection, i2$1.TuiDataListComponent, i2$1.TuiDataListDirective, i2$1.TuiOption, i2$1.TuiOptionNew, i2$1.TuiOptionWithValue, i2$1.TuiOptGroup, TuiButton], exports: [TuiColorEditComponent, i1$1.TuiDropdownOptionsDirective, i1$1.TuiDropdownDriverDirective, i1$1.TuiDropdownDirective, i1$1.TuiDropdownComponent, i1$1.TuiDropdownOpen, i1$1.TuiDropdownOpenLegacy, i1$1.TuiDropdownPortal, i1$1.TuiDropdownManual, i1$1.TuiDropdownHover, i1$1.TuiDropdownContext, i1$1.TuiDropdownPosition, i1$1.TuiDropdownPositionSided, i1$1.TuiDropdownSelection, i2$1.TuiDataListComponent, i2$1.TuiDataListDirective, i2$1.TuiOption, i2$1.TuiOptionNew, i2$1.TuiOptionWithValue, i2$1.TuiOptGroup] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorEditModule, imports: [CommonModule,
-            FormsModule,
-            TuiPrimitiveTextfieldModule,
-            TuiTextfieldControllerModule,
-            TuiInputNumberModule,
-            TuiSelectModule, i1$1.TuiDropdownComponent, i2$1.TuiDataListComponent, i2$1.TuiOption] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorEditModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MaskitoDirective,
-                        TuiPrimitiveTextfieldModule,
-                        TuiTextfieldControllerModule,
-                        TuiInputNumberModule,
-                        TuiSelectModule,
-                        ...TuiDropdown,
-                        ...TuiDataList,
-                        TuiButton,
-                    ],
-                    declarations: [TuiColorEditComponent],
-                    exports: [TuiColorEditComponent, ...TuiDropdown, ...TuiDataList],
-                }]
-        }] });
-
-/**
- * TODO(v5): delete it
- * @deprecated use new version of {@link https://taiga-ui.dev/components/input-color TuiInputColor} (from @taiga-ui/kit) instead
- */
-class TuiPickerService extends Observable {
-    constructor() {
-        super((subscriber) => this.point$.subscribe(subscriber));
-        this.el = tuiInjectElement();
-        this.doc = inject(DOCUMENT);
-        this.point$ = tuiTypedFromEvent(this.el, 'mousedown').pipe(tuiPreventDefault(), switchMap((event) => {
-            const mouseMove$ = tuiTypedFromEvent(this.doc, 'mousemove').pipe(map(({ clientX, clientY }) => tuiGetElementPoint(clientX, clientY, this.el)), takeUntil(tuiTypedFromEvent(this.doc, 'mouseup')));
-            return event.target === this.el
-                ? mouseMove$.pipe(startWith(tuiGetElementPoint(event.clientX, event.clientY, this.el)))
-                : mouseMove$;
-        }), takeUntilDestroyed());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPickerService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPickerService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class TuiFlatPickerComponent {
-    constructor() {
-        this.$ = inject(TuiPickerService)
-            .pipe(takeUntilDestroyed())
-            .subscribe((point) => {
-            this.value = point;
-            this.valueChange.emit([point[0], point[1]]);
-        });
-        this.value = [0, 0];
-        this.valueChange = new EventEmitter();
-    }
-    get left() {
-        return this.value[0] * 100;
-    }
-    get top() {
-        return this.value[1] * 100;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFlatPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiFlatPickerComponent, isStandalone: false, selector: "tui-flat-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n    [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFlatPickerComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'tui-flat-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n    [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class TuiLinearPickerComponent {
-    constructor() {
-        this.$ = inject(TuiPickerService)
-            .pipe(takeUntilDestroyed())
-            .subscribe(([x]) => {
-            this.value = x;
-            this.valueChange.emit(x);
-        });
-        this.value = 0;
-        this.valueChange = new EventEmitter();
-    }
-    get left() {
-        return this.value * 100;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiLinearPickerComponent, isStandalone: false, selector: "tui-linear-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearPickerComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'tui-linear-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-class TuiColorPickerComponent {
-    constructor() {
-        this.sanitizer = inject(DomSanitizer);
-        this.point = [0, 1];
-        this.hue = 0;
-        this.opacity = 1;
-        this.colorChange = new EventEmitter();
-    }
-    set color(color) {
-        if (this.currentColor.every((item, index) => item === color[index]) &&
-            color[3] === this.opacity) {
-            return;
-        }
-        const [h, s, v] = tuiRgbToHsv(color[0], color[1], color[2]);
-        this.opacity = color[3];
-        this.hue = h / 360;
-        this.point = [s, 1 - v / 255];
-    }
-    get currentColor() {
-        return this.getCurrentColor(this.hue, this.point);
-    }
-    get base() {
-        return `rgb(${tuiHsvToRgb(this.hue * 360, 1, 255)})`;
-    }
-    get gradient() {
-        return this.sanitizer.bypassSecurityTrustStyle(`linear-gradient(to right, rgba(${this.currentColor.join(',')}, 0), rgb(${this.currentColor.join(',')}))`);
-    }
-    onPointChange(point) {
-        this.point = point;
-        this.updateColor();
-    }
-    onHueChange(hue) {
-        this.hue = hue;
-        this.updateColor();
-    }
-    onOpacityChange(opacity) {
-        this.opacity = tuiRound(opacity, 2);
-        this.updateColor();
-    }
-    getCurrentColor(hue, point) {
-        return tuiHsvToRgb(hue * 360, point[0], (1 - point[1]) * 255);
-    }
-    updateColor() {
-        this.colorChange.emit([...this.currentColor, this.opacity]);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiColorPickerComponent, isStandalone: false, 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-block-end:.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: TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: ["value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-__decorate([
-    tuiPure
-], TuiColorPickerComponent.prototype, "getCurrentColor", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorPickerComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, 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-block-end:.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: [{
-                type: Input
-            }], getCurrentColor: [] } });
-
-/**
- * TODO(v5): delete it
- * @deprecated use new version of {@link https://taiga-ui.dev/components/input-color TuiInputColor} (from @taiga-ui/kit) instead
- */
-class TuiFlatPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFlatPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiFlatPickerModule, declarations: [TuiFlatPickerComponent], imports: [CommonModule], exports: [TuiFlatPickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFlatPickerModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiFlatPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [TuiFlatPickerComponent],
-                    exports: [TuiFlatPickerComponent],
-                }]
-        }] });
-
-/**
- * TODO(v5): delete it
- * @deprecated use new version of {@link https://taiga-ui.dev/components/input-color TuiInputColor} (from @taiga-ui/kit) instead
- */
-class TuiLinearPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearPickerModule, declarations: [TuiLinearPickerComponent], imports: [CommonModule], exports: [TuiLinearPickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearPickerModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [TuiLinearPickerComponent],
-                    exports: [TuiLinearPickerComponent],
-                }]
-        }] });
-
-/**
- * TODO(v5): delete it
- * @deprecated use new version of {@link https://taiga-ui.dev/components/input-color TuiInputColor} (from @taiga-ui/kit) instead
- */
-class TuiColorPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiColorPickerModule, declarations: [TuiColorPickerComponent], imports: [CommonModule, TuiFlatPickerModule, TuiLinearPickerModule], exports: [TuiColorPickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorPickerModule, imports: [CommonModule, TuiFlatPickerModule, TuiLinearPickerModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TuiFlatPickerModule, TuiLinearPickerModule],
-                    declarations: [TuiColorPickerComponent],
-                    exports: [TuiColorPickerComponent],
-                }]
-        }] });
-
-const TUI_COLOR_SELECTOR_MODE_NAMES = new InjectionToken(ngDevMode ? 'TUI_COLOR_SELECTOR_MODE_NAMES' : '', {
-    factory: () => ['Solid color', 'Gradient'],
-});
-const TUI_DEFAULT_INPUT_COLORS = new Map([
-    ['color-black-100', '#909090'],
-    ['color-black-200', '#666666'],
-    ['color-black-300', '#333333'],
-    ['color-blue-100', '#1771e6'],
-    ['color-blue-200', '#1464cc'],
-    ['color-blue-300', '#0953b3'],
-    ['color-gray-100', '#f5f5f6'],
-    ['color-gray-200', '#e7e8ea'],
-    ['color-gray-300', '#cbcfd3'],
-    ['color-gray-400', '#959ba4'],
-    ['color-gray-500', '#79818c'],
-    ['color-gray-600', '#616871'],
-    ['color-green-100', '#39b54a'],
-    ['color-green-200', '#2ca53a'],
-    ['color-green-300', '#168a21'],
-    ['color-light-blue-100', '#ecf1f7'],
-    ['color-light-blue-200', '#e4ebf3'],
-    ['color-light-blue-300', '#dde4ed'],
-    ['color-red-100', '#e01f19'],
-    ['color-red-200', '#d3120e'],
-    ['color-red-300', '#c40b08'],
-    ['color-yellow-100', '#FFDD2C'],
-    ['color-yellow-200', '#FCC521'],
-    ['color-yellow-300', '#FAB618'],
-    ['transparent', 'transparent'],
-]);
-const TuiColorSelectorMode = {
-    SolidColor: 0,
-    Gradient: 1,
-};
-const TUI_COLOR_SELECTOR_DEFAULT_OPTIONS = {
-    selectorMode: true,
-    mode: TuiColorSelectorMode.SolidColor,
-    color: [0, 0, 0, 1],
-    colors: new Map(),
-    gradient: {
-        icons: {
-            'to top right': '@tui.move-up-right',
-            'to right': '@tui.move-right',
-            'to bottom right': '@tui.move-down-right',
-            'to bottom': '@tui.move-down',
-            'to bottom left': '@tui.move-down-left',
-            'to left': '@tui.move-left',
-            'to top left': '@tui.move-up-left',
-            'to top': '@tui.move-up',
-        },
-        steps: [
-            [0, [0, 0, 0, 1]],
-            [1, [255, 255, 255, 1]],
-        ],
-        stop: 0,
-        direction: 'to bottom',
-        emptyStop: [0, 0, 0, 0],
-        buttons: [
-            'to top right',
-            'to right',
-            'to bottom right',
-            'to bottom',
-            'to bottom left',
-            'to left',
-            'to top left',
-            'to top',
-        ],
-    },
-};
-const TUI_COLOR_SELECTOR_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_COLOR_SELECTOR_OPTIONS' : '', {
-    factory: () => TUI_COLOR_SELECTOR_DEFAULT_OPTIONS,
-});
-function tuiColorSelectorOptionsProvider(options) {
-    return tuiProvideOptions(TUI_COLOR_SELECTOR_OPTIONS, options, TUI_COLOR_SELECTOR_DEFAULT_OPTIONS);
-}
-
-class TuiLinearMultiPickerComponent {
-    constructor() {
-        this.$ = inject(TuiPickerService)
-            .pipe(takeUntilDestroyed())
-            .subscribe(([x]) => this.onPicker(x));
-        this.value = [0, 1];
-        this.valueChange = new EventEmitter();
-        this.indexChange = new EventEmitter();
-        this.index = NaN;
-    }
-    onMouseUp() {
-        this.index = NaN;
-    }
-    onMouseDown(index) {
-        this.updateIndex(index);
-    }
-    onClick(index) {
-        if (this.value.length > 2) {
-            this.updateValue(this.value.filter((_, i) => i !== index));
-        }
-    }
-    onPicker(x) {
-        if (Number.isNaN(this.index)) {
-            this.updateIndex(this.value.length);
-            this.value = [...this.value, 0];
-        }
-        if (this.value.some((item, index) => item === x && index !== this.index)) {
-            return;
-        }
-        this.updateValue(this.value.map((item, index) => (index === this.index ? x : item)));
-    }
-    updateIndex(index) {
-        this.index = index;
-        this.indexChange.emit(index);
-    }
-    updateValue(value) {
-        this.value = value;
-        this.valueChange.emit(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearMultiPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiLinearMultiPickerComponent, isStandalone: false, selector: "tui-linear-multi-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange", indexChange: "indexChange" }, host: { listeners: { "document:mouseup": "onMouseUp()" } }, providers: [TuiPickerService], ngImport: i0, template: "@for (item of value; track item; let index = $index) {\n    <div\n        class=\"t-circle\"\n        [style.left.%]=\"item * 100\"\n        (dblclick)=\"onClick(index)\"\n        (mousedown)=\"onMouseDown(index)\"\n    ></div>\n}\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearMultiPickerComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'tui-linear-multi-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], host: {
-                        '(document:mouseup)': 'onMouseUp()',
-                    }, template: "@for (item of value; track item; let index = $index) {\n    <div\n        class=\"t-circle\"\n        [style.left.%]=\"item * 100\"\n        (dblclick)=\"onClick(index)\"\n        (mousedown)=\"onMouseDown(index)\"\n    ></div>\n}\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;outline:1px solid var(--tui-background-base);margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], indexChange: [{
-                type: Output
-            }] } });
-
-class TuiPaletteComponent {
-    constructor() {
-        this.colors = new Map();
-        this.selectedColor = new EventEmitter();
-        this.originalOrder = (_a, _b) => 0;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiPaletteComponent, isStandalone: false, selector: "tui-palette", inputs: { colors: "colors" }, outputs: { selectedColor: "selectedColor" }, ngImport: i0, template: "@for (color of colors | keyvalue: originalOrder; track color) {\n    <button\n        type=\"button\"\n        class=\"t-button\"\n        [id]=\"color.key\"\n        [style.background]=\"color.value\"\n        [tuiHint]=\"color.key\"\n        [tuiHintDescribe]=\"color.key\"\n        (click)=\"selectedColor.emit(color.value)\"\n    ></button>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;padding:.875rem}.t-button{-webkit-appearance:none;appearance:none;padding:0;background:none;font-size:inherit;line-height:inherit;inline-size:1.5625rem;block-size:1.5625rem;box-sizing:border-box;margin:.375rem;border-radius:var(--tui-radius-m);border:1px solid rgba(0,0,0,.08)}\n"], dependencies: [{ kind: "directive", type: i1$2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: i1$2.TuiHintDescribe, selector: "[tuiHintDescribe]", inputs: ["tuiHintDescribe"] }, { kind: "pipe", type: i2$2.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPaletteComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'tui-palette', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (color of colors | keyvalue: originalOrder; track color) {\n    <button\n        type=\"button\"\n        class=\"t-button\"\n        [id]=\"color.key\"\n        [style.background]=\"color.value\"\n        [tuiHint]=\"color.key\"\n        [tuiHintDescribe]=\"color.key\"\n        (click)=\"selectedColor.emit(color.value)\"\n    ></button>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;padding:.875rem}.t-button{-webkit-appearance:none;appearance:none;padding:0;background:none;font-size:inherit;line-height:inherit;inline-size:1.5625rem;block-size:1.5625rem;box-sizing:border-box;margin:.375rem;border-radius:var(--tui-radius-m);border:1px solid rgba(0,0,0,.08)}\n"] }]
-        }], propDecorators: { colors: [{
-                type: Input
-            }], selectedColor: [{
-                type: Output
-            }] } });
-
-class TuiColorSelectorComponent {
-    constructor() {
-        this.selectorOptions = inject(TUI_COLOR_SELECTOR_OPTIONS);
-        this.stops = new Map(this.selectorOptions.gradient.steps);
-        this.currentStop = this.selectorOptions.gradient.stop;
-        this.direction = this.selectorOptions.gradient.direction;
-        this.sanitizer = inject(DomSanitizer);
-        this.icons = inject(TUI_COMMON_ICONS);
-        this.open = false;
-        this.colors = this.selectorOptions.colors;
-        this.colorChange = new EventEmitter();
-        this.color = this.selectorOptions.color;
-        this.modes = inject(TUI_COLOR_SELECTOR_MODE_NAMES);
-        this.currentMode = this.modes[this.selectorOptions.mode];
-        this.buttons = this.selectorOptions.gradient.buttons;
-    }
-    set colorSetter(color) {
-        if (color.startsWith('linear-gradient')) {
-            this.parseGradient(color);
-        }
-        else {
-            this.parseColor(color);
-        }
-    }
-    get selectorMode() {
-        return this.selectorOptions.selectorMode;
-    }
-    get palette() {
-        return this.filterPalette(this.colors, this.isGradient);
-    }
-    get stopsKeys() {
-        return this.getStopsKeys(this.stops);
-    }
-    get currentColor() {
-        return this.isGradient ? this.getStop(this.currentStop) : this.color;
-    }
-    get gradient() {
-        return this.sanitizer.bypassSecurityTrustStyle(this.getGradient('to right'));
-    }
-    get isGradient() {
-        return this.currentMode === this.modes[TuiColorSelectorMode.Gradient];
-    }
-    getIcon(direction) {
-        return this.selectorOptions.gradient.icons[direction];
-    }
-    isModeActive(mode) {
-        return this.currentMode === mode;
-    }
-    isDirectionActive(direction) {
-        return this.direction === direction;
-    }
-    onPalettePick(color) {
-        this.updateColor(color);
-    }
-    onDirectionChange(direction) {
-        this.direction = direction;
-        this.updateColor(this.getGradient(direction));
-    }
-    onModeSelect(mode) {
-        this.currentMode = mode;
-        this.open = false;
-        this.updateColor(mode === this.modes[TuiColorSelectorMode.SolidColor]
-            ? `rgba(${this.color.join(', ')})`
-            : this.getGradient(this.direction));
-    }
-    onIndexChange(index) {
-        this.currentStop = this.stopsKeys[index] ?? 0;
-    }
-    onColorChange(color) {
-        if (!this.isGradient) {
-            this.updateColor(`rgba(${color.join(', ')})`);
-            return;
-        }
-        this.stops.set(this.currentStop, color);
-        this.updateColor(this.getGradient(this.direction));
-    }
-    onStopsChange(stopsKeys) {
-        const removed = this.stopsKeys.find((item) => !stopsKeys.includes(item));
-        const added = stopsKeys.find((item) => !this.stopsKeys.includes(item));
-        if (removed === undefined && added !== undefined) {
-            this.addStop(added);
-        }
-        if (removed !== undefined && added === undefined) {
-            this.removeStop(removed);
-        }
-        if (removed !== undefined && added !== undefined) {
-            this.replaceStop(removed, added);
-        }
-        this.updateColor(this.getGradient(this.direction));
-    }
-    getStopsKeys(stops) {
-        return Array.from(stops.keys());
-    }
-    filterPalette(colors, isGradient) {
-        const map = new Map(colors);
-        map.forEach((value, key) => {
-            if ((value.startsWith('linear-gradient') && !isGradient) ||
-                (!value.startsWith('linear-gradient') && isGradient)) {
-                map.delete(key);
-            }
-        });
-        return map;
-    }
-    updateColor(color) {
-        this.colorChange.emit(color);
-    }
-    getGradient(direction) {
-        return `linear-gradient(${direction}, ${[...this.stopsKeys]
-            .sort(tuiDefaultSort)
-            .map((key) => `rgba(${this.getStop(key).join(', ')}) ${key * 100}%`)
-            .join(', ')})`;
-    }
-    getStop(stop) {
-        return this.stops.get(stop) || this.selectorOptions.gradient.emptyStop;
-    }
-    addStop(stop) {
-        const closest = this.stopsKeys.reduce((prev, curr) => (Math.abs(curr - stop) < Math.abs(prev - stop) ? curr : prev), this.stopsKeys[0] ?? 0);
-        this.stops.set(stop, this.getStop(closest));
-        this.stops = new Map(this.stops);
-        this.currentStop = stop;
-    }
-    removeStop(stop) {
-        this.stops.delete(stop);
-        this.stops = new Map(this.stops);
-        this.currentStop = this.stopsKeys[0] ?? 0;
-    }
-    replaceStop(removed, added) {
-        const value = this.getStop(removed);
-        this.currentStop = added;
-        this.stops = new Map(this.stopsKeys.map((key) => key === removed ? [added, value] : [key, this.getStop(key)]));
-    }
-    parseGradient(color) {
-        if (color === this.getGradient(this.direction)) {
-            return;
-        }
-        const gradient = tuiParseGradient(tuiGetGradientData(color));
-        this.direction = gradient.side;
-        this.currentStop = this.selectorOptions.gradient.stop;
-        this.stops = new Map(gradient.stops.length
-            ? gradient.stops.map(({ color, position }) => [
-                parseFloat(position) / 100,
-                tuiParseColor(color),
-            ])
-            : this.selectorOptions.gradient.steps);
-    }
-    parseColor(color) {
-        this.currentStop = this.selectorOptions.gradient.stop;
-        this.color = tuiParseColor(color);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiColorSelectorComponent, isStandalone: false, selector: "tui-color-selector", inputs: { colors: "colors", colorSetter: ["color", "colorSetter"] }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "@if (selectorMode) {\n    <div\n        class=\"t-select\"\n        [tuiDropdown]=\"menu\"\n        [(tuiDropdownOpen)]=\"open\"\n    >\n        <button\n            appearance=\"\"\n            size=\"s\"\n            tuiButton\n            tuiChevron\n            type=\"button\"\n        >\n            {{ currentMode }}\n        </button>\n        <ng-template #menu>\n            <tui-data-list\n                role=\"menu\"\n                size=\"s\"\n                class=\"t-menu\"\n            >\n                @for (mode of modes; track mode) {\n                    <button\n                        role=\"menuitemradio\"\n                        tuiOption\n                        type=\"button\"\n                        [attr.aria-checked]=\"isModeActive(mode)\"\n                        (click)=\"onModeSelect(mode)\"\n                        (keydown.enter.prevent)=\"onModeSelect(mode)\"\n                        (keydown.space.prevent)=\"onModeSelect(mode)\"\n                    >\n                        {{ mode }}\n                        @if (isModeActive(mode)) {\n                            <tui-icon\n                                class=\"t-checkmark\"\n                                [icon]=\"icons.check\"\n                            />\n                        }\n                    </button>\n                }\n            </tui-data-list>\n        </ng-template>\n    </div>\n    <hr class=\"t-hr\" />\n}\n\n@if (isGradient) {\n    <div\n        class=\"t-wrapper\"\n        [style.background]=\"gradient\"\n    >\n        <tui-linear-multi-picker\n            class=\"t-gradient\"\n            [value]=\"stopsKeys\"\n            (indexChange)=\"onIndexChange($event)\"\n            (valueChange)=\"onStopsChange($event)\"\n        />\n    </div>\n    <div class=\"t-buttons\">\n        <!-- TODO: Change to `tuiHintDescribe` when figure tuiDriver order issue -->\n        @for (button of buttons; track button) {\n            <button\n                appearance=\"\"\n                size=\"xs\"\n                tuiHintDescribe\n                tuiIconButton\n                type=\"button\"\n                class=\"t-direction\"\n                [class.t-direction_active]=\"isDirectionActive(button)\"\n                [iconStart]=\"getIcon(button)\"\n                [tuiHint]=\"button\"\n                (click)=\"onDirectionChange(button)\"\n            ></button>\n        }\n    </div>\n}\n<tui-color-picker\n    [color]=\"currentColor\"\n    (colorChange)=\"onColorChange($event)\"\n/>\n@if (!isGradient) {\n    <tui-color-edit\n        orientation=\"horizontal\"\n        tuiGroup\n        class=\"t-edit\"\n        [color]=\"color\"\n        (colorChange)=\"onColorChange($event)\"\n    />\n}\n@if (palette.size) {\n    <tui-palette\n        class=\"t-palette\"\n        [colors]=\"palette\"\n        (selectedColor)=\"onPalettePick($event)\"\n    />\n}\n", styles: [":host{position:relative;display:block;isolation:isolate;inline-size:22.6rem}:host :host-context(*:disabled){pointer-events:none}.t-wrapper{position:relative;margin: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: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-hr{block-size:1px;margin:0 0 0 -1px;border:none;background:var(--tui-base-03)}.t-gradient{margin:0 .5rem;border-radius:inherit}.t-select{margin:.75rem .5rem 0}.t-arrow{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-arrow_rotated{transform:rotate(180deg)}.t-menu{inline-size:11.25rem}.t-checkmark{margin-inline-start:auto;inline-size:1rem;block-size:1rem}.t-buttons{display:flex;padding:0 .75rem 1.25rem;justify-content:space-between}.t-direction{color:var(--tui-text-02);margin:0 .375rem}.t-direction:hover,.t-direction_active{color:var(--tui-text-01);background:var(--tui-secondary-hover)}.t-edit{margin:1.25rem}.t-palette{box-sizing:border-box;box-shadow:inset 0 1px var(--tui-base-03)}\n"], dependencies: [{ kind: "directive", type: i1$3.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiColorPickerComponent, selector: "tui-color-picker", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: ["value"], outputs: ["valueChange", "indexChange"] }, { kind: "component", type: TuiColorEditComponent, selector: "tui-color-edit", inputs: ["color"], outputs: ["colorChange"] }, { kind: "directive", type: i1$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: i2$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i2$1.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "directive", type: i7.TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "component", type: TuiPaletteComponent, selector: "tui-palette", inputs: ["colors"], outputs: ["selectedColor"] }, { kind: "directive", type: i1$2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: i1$2.TuiHintDescribe, selector: "[tuiHintDescribe]", inputs: ["tuiHintDescribe"] }, { kind: "directive", type: i10.TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i11.TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-__decorate([
-    tuiPure
-], TuiColorSelectorComponent.prototype, "getStopsKeys", null);
-__decorate([
-    tuiPure
-], TuiColorSelectorComponent.prototype, "filterPalette", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'tui-color-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (selectorMode) {\n    <div\n        class=\"t-select\"\n        [tuiDropdown]=\"menu\"\n        [(tuiDropdownOpen)]=\"open\"\n    >\n        <button\n            appearance=\"\"\n            size=\"s\"\n            tuiButton\n            tuiChevron\n            type=\"button\"\n        >\n            {{ currentMode }}\n        </button>\n        <ng-template #menu>\n            <tui-data-list\n                role=\"menu\"\n                size=\"s\"\n                class=\"t-menu\"\n            >\n                @for (mode of modes; track mode) {\n                    <button\n                        role=\"menuitemradio\"\n                        tuiOption\n                        type=\"button\"\n                        [attr.aria-checked]=\"isModeActive(mode)\"\n                        (click)=\"onModeSelect(mode)\"\n                        (keydown.enter.prevent)=\"onModeSelect(mode)\"\n                        (keydown.space.prevent)=\"onModeSelect(mode)\"\n                    >\n                        {{ mode }}\n                        @if (isModeActive(mode)) {\n                            <tui-icon\n                                class=\"t-checkmark\"\n                                [icon]=\"icons.check\"\n                            />\n                        }\n                    </button>\n                }\n            </tui-data-list>\n        </ng-template>\n    </div>\n    <hr class=\"t-hr\" />\n}\n\n@if (isGradient) {\n    <div\n        class=\"t-wrapper\"\n        [style.background]=\"gradient\"\n    >\n        <tui-linear-multi-picker\n            class=\"t-gradient\"\n            [value]=\"stopsKeys\"\n            (indexChange)=\"onIndexChange($event)\"\n            (valueChange)=\"onStopsChange($event)\"\n        />\n    </div>\n    <div class=\"t-buttons\">\n        <!-- TODO: Change to `tuiHintDescribe` when figure tuiDriver order issue -->\n        @for (button of buttons; track button) {\n            <button\n                appearance=\"\"\n                size=\"xs\"\n                tuiHintDescribe\n                tuiIconButton\n                type=\"button\"\n                class=\"t-direction\"\n                [class.t-direction_active]=\"isDirectionActive(button)\"\n                [iconStart]=\"getIcon(button)\"\n                [tuiHint]=\"button\"\n                (click)=\"onDirectionChange(button)\"\n            ></button>\n        }\n    </div>\n}\n<tui-color-picker\n    [color]=\"currentColor\"\n    (colorChange)=\"onColorChange($event)\"\n/>\n@if (!isGradient) {\n    <tui-color-edit\n        orientation=\"horizontal\"\n        tuiGroup\n        class=\"t-edit\"\n        [color]=\"color\"\n        (colorChange)=\"onColorChange($event)\"\n    />\n}\n@if (palette.size) {\n    <tui-palette\n        class=\"t-palette\"\n        [colors]=\"palette\"\n        (selectedColor)=\"onPalettePick($event)\"\n    />\n}\n", styles: [":host{position:relative;display:block;isolation:isolate;inline-size:22.6rem}:host :host-context(*:disabled){pointer-events:none}.t-wrapper{position:relative;margin: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: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-hr{block-size:1px;margin:0 0 0 -1px;border:none;background:var(--tui-base-03)}.t-gradient{margin:0 .5rem;border-radius:inherit}.t-select{margin:.75rem .5rem 0}.t-arrow{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-arrow_rotated{transform:rotate(180deg)}.t-menu{inline-size:11.25rem}.t-checkmark{margin-inline-start:auto;inline-size:1rem;block-size:1rem}.t-buttons{display:flex;padding:0 .75rem 1.25rem;justify-content:space-between}.t-direction{color:var(--tui-text-02);margin:0 .375rem}.t-direction:hover,.t-direction_active{color:var(--tui-text-01);background:var(--tui-secondary-hover)}.t-edit{margin:1.25rem}.t-palette{box-sizing:border-box;box-shadow:inset 0 1px var(--tui-base-03)}\n"] }]
-        }], propDecorators: { colors: [{
-                type: Input
-            }], colorChange: [{
-                type: Output
-            }], colorSetter: [{
-                type: Input,
-                args: ['color']
-            }], getStopsKeys: [], filterPalette: [] } });
-
-/**
- * TODO(v5): delete it
- * @deprecated use new version of {@link https://taiga-ui.dev/components/input-color TuiInputColor} (from @taiga-ui/kit) instead
- */
-class TuiLinearMultiPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearMultiPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearMultiPickerModule, declarations: [TuiLinearMultiPickerComponent], imports: [CommonModule], exports: [TuiLinearMultiPickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearMultiPickerModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiLinearMultiPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [TuiLinearMultiPickerComponent],
-                    exports: [TuiLinearMultiPickerComponent],
-                }]
-        }] });
-
-/**
- * TODO(v5): delete it
- * @deprecated use new version of {@link https://taiga-ui.dev/components/input-color TuiInputColor} (from @taiga-ui/kit) instead
- */
-class TuiPaletteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiPaletteModule, declarations: [TuiPaletteComponent], imports: [CommonModule, i1$2.TuiHintComponent, i1$2.TuiHintDirective, i1$2.TuiHintOptionsDirective, i1$2.TuiHintUnstyled, i1$2.TuiHintDriver, i1$2.TuiHintPosition, i1$2.TuiHintHover, i1$2.TuiHintOverflow, i1$2.TuiHintDescribe, i1$2.TuiHintHost, i1$2.TuiHintManual, i1$2.TuiHintPointer], exports: [TuiPaletteComponent, i1$2.TuiHintComponent, i1$2.TuiHintDirective, i1$2.TuiHintOptionsDirective, i1$2.TuiHintUnstyled, i1$2.TuiHintDriver, i1$2.TuiHintPosition, i1$2.TuiHintHover, i1$2.TuiHintOverflow, i1$2.TuiHintDescribe, i1$2.TuiHintHost, i1$2.TuiHintManual, i1$2.TuiHintPointer] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPaletteModule, imports: [CommonModule, i1$2.TuiHintComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPaletteModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, ...TuiHint],
-                    declarations: [TuiPaletteComponent],
-                    exports: [TuiPaletteComponent, ...TuiHint],
-                }]
-        }] });
-
-/**
- * TODO(v5): delete it
- * @deprecated use new version of {@link https://taiga-ui.dev/components/input-color TuiInputColor} (from @taiga-ui/kit) instead
- */
-class TuiColorSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TuiColorSelectorModule, declarations: [TuiColorSelectorComponent], imports: [CommonModule,
-            TuiButton,
-            TuiColorPickerModule,
-            TuiLinearMultiPickerModule,
-            TuiActiveZone,
-            TuiColorEditModule,
-            TuiGroup,
-            TuiPaletteModule,
-            TuiChevron,
-            TuiIcon, i1$2.TuiHintComponent, i1$2.TuiHintDirective, i1$2.TuiHintOptionsDirective, i1$2.TuiHintUnstyled, i1$2.TuiHintDriver, i1$2.TuiHintPosition, i1$2.TuiHintHover, i1$2.TuiHintOverflow, i1$2.TuiHintDescribe, i1$2.TuiHintHost, i1$2.TuiHintManual, i1$2.TuiHintPointer, i2$1.TuiDataListComponent, i2$1.TuiDataListDirective, i2$1.TuiOption, i2$1.TuiOptionNew, i2$1.TuiOptionWithValue, i2$1.TuiOptGroup], exports: [TuiColorSelectorComponent, i1$2.TuiHintComponent, i1$2.TuiHintDirective, i1$2.TuiHintOptionsDirective, i1$2.TuiHintUnstyled, i1$2.TuiHintDriver, i1$2.TuiHintPosition, i1$2.TuiHintHover, i1$2.TuiHintOverflow, i1$2.TuiHintDescribe, i1$2.TuiHintHost, i1$2.TuiHintManual, i1$2.TuiHintPointer, i2$1.TuiDataListComponent, i2$1.TuiDataListDirective, i2$1.TuiOption, i2$1.TuiOptionNew, i2$1.TuiOptionWithValue, i2$1.TuiOptGroup] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorSelectorModule, imports: [CommonModule,
-            TuiColorPickerModule,
-            TuiLinearMultiPickerModule,
-            TuiColorEditModule,
-            TuiPaletteModule,
-            TuiIcon, i1$2.TuiHintComponent, i2$1.TuiDataListComponent, i2$1.TuiOption] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiColorSelectorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        TuiButton,
-                        TuiColorPickerModule,
-                        TuiLinearMultiPickerModule,
-                        TuiActiveZone,
-                        TuiColorEditModule,
-                        TuiGroup,
-                        TuiPaletteModule,
-                        TuiChevron,
-                        TuiIcon,
-                        ...TuiHint,
-                        ...TuiDataList,
-                    ],
-                    declarations: [TuiColorSelectorComponent],
-                    exports: [TuiColorSelectorComponent, ...TuiHint, ...TuiDataList],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { TUI_COLOR_SELECTOR_DEFAULT_OPTIONS, TUI_COLOR_SELECTOR_MODE_NAMES, TUI_COLOR_SELECTOR_OPTIONS, TUI_DEFAULT_INPUT_COLORS, TuiColorEditComponent, TuiColorEditModule, TuiColorPickerComponent, TuiColorPickerModule, TuiColorSelectorComponent, TuiColorSelectorMode, TuiColorSelectorModule, TuiFlatPickerComponent, TuiFlatPickerModule, TuiLinearMultiPickerComponent, TuiLinearMultiPickerModule, TuiLinearPickerComponent, TuiLinearPickerModule, TuiPaletteComponent, TuiPaletteModule, TuiPickerService, tuiColorSelectorOptionsProvider };
-//# sourceMappingURL=taiga-ui-legacy-components-color-selector.mjs.map