@tekus/design-system 5.31.0 → 5.32.0

package/fesm2022/tekus-design-system-components-color-picker.mjs

@@ -0,0 +1,1028 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, inject, ElementRef, DestroyRef, ChangeDetectionStrategy, Component, model, viewChild, signal, effect, untracked } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl, FormControl } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import * as i1 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i2 from 'primeng/message';
+import { MessageModule } from 'primeng/message';
+import * as i3 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
+import { Subject, debounceTime } from 'rxjs';
+import { ButtonComponent } from '@tekus/design-system/components/button';
+import { IconComponent } from '@tekus/design-system/components/icon';
+import { InputTextComponent } from '@tekus/design-system/components/input-text';
+import { getContrastTextColor, getContrastResult } from '@tekus/design-system/utils/wcag-contrast';
+
+/**
+ * @component ColorPickerSpectrumComponent
+ * @description
+ * Internal saturation/brightness canvas of `tk-color-picker` (NOT public API).
+ * A hue-colored area with white→transparent (saturation) and
+ * transparent→black (brightness) CSS overlays. Supports pointer dragging
+ * (tracked on `document` so the drag can leave the area) and full keyboard
+ * operation via a 2D slider pattern (arrow keys, Shift for 10% steps).
+ */
+class ColorPickerSpectrumComponent {
+    constructor() {
+        /** Current hue (0–360) painting the base background. */
+        this.hue = input(0, ...(ngDevMode ? [{ debugName: "hue" }] : /* istanbul ignore next */ []));
+        /** Current saturation (0–1) → horizontal cursor position. */
+        this.saturation = input(1, ...(ngDevMode ? [{ debugName: "saturation" }] : /* istanbul ignore next */ []));
+        /** Current brightness/value (0–1) → vertical cursor position (inverted). */
+        this.brightness = input(1, ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
+        /** Current color painted inside the cursor. */
+        this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Accessible label of the 2D slider. */
+        this.ariaLabel = input('Saturation and brightness', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Emits on every pointer/keyboard change with the new saturation/brightness pair. */
+        this.changed = output();
+        this.Math = Math;
+        this.hueBackground = computed(() => `hsl(${this.hue()}, 100%, 50%)`, ...(ngDevMode ? [{ debugName: "hueBackground" }] : /* istanbul ignore next */ []));
+        this.valueText = computed(() => `${this.ariaLabel()}: ${Math.round(this.saturation() * 100)}%, ${Math.round(this.brightness() * 100)}%`, ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+        this.elementRef = inject((ElementRef));
+        this.destroyRef = inject(DestroyRef);
+        this.onDragMove = (e) => this.applyPointer(e);
+        this.onDragEnd = () => this.removeDragListeners();
+        this.destroyRef.onDestroy(() => this.removeDragListeners());
+    }
+    onPointerDown(event) {
+        event.preventDefault();
+        event.currentTarget.focus();
+        this.applyPointer(event);
+        document.addEventListener('pointermove', this.onDragMove);
+        document.addEventListener('pointerup', this.onDragEnd);
+    }
+    onKeydown(event) {
+        const step = event.shiftKey ? 0.1 : 0.01;
+        let saturation = this.saturation();
+        let brightness = this.brightness();
+        switch (event.key) {
+            case 'ArrowRight':
+                saturation += step;
+                break;
+            case 'ArrowLeft':
+                saturation -= step;
+                break;
+            case 'ArrowUp':
+                brightness += step;
+                break;
+            case 'ArrowDown':
+                brightness -= step;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.emitClamped(saturation, brightness);
+    }
+    applyPointer(event) {
+        const area = this.elementRef.nativeElement.querySelector('.tk-color-picker-spectrum__area');
+        if (!area) {
+            return;
+        }
+        const rect = area.getBoundingClientRect();
+        this.emitClamped((event.clientX - rect.left) / rect.width, 1 - (event.clientY - rect.top) / rect.height);
+    }
+    emitClamped(saturation, brightness) {
+        this.changed.emit({
+            saturation: Math.max(0, Math.min(1, saturation)),
+            brightness: Math.max(0, Math.min(1, brightness)),
+        });
+    }
+    removeDragListeners() {
+        document.removeEventListener('pointermove', this.onDragMove);
+        document.removeEventListener('pointerup', this.onDragEnd);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerSpectrumComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: ColorPickerSpectrumComponent, isStandalone: true, selector: "tk-color-picker-spectrum", inputs: { hue: { classPropertyName: "hue", publicName: "hue", isSignal: true, isRequired: false, transformFunction: null }, saturation: { classPropertyName: "saturation", publicName: "saturation", isSignal: true, isRequired: false, transformFunction: null }, brightness: { classPropertyName: "brightness", publicName: "brightness", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: `
+    <div
+      class="tk-color-picker-spectrum__area"
+      role="slider"
+      tabindex="0"
+      [style.background]="hueBackground()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-valuetext]="valueText()"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      [attr.aria-valuenow]="Math.round(saturation() * 100)"
+      (pointerdown)="onPointerDown($event)"
+      (keydown)="onKeydown($event)"
+    >
+      <div
+        class="tk-color-picker-spectrum__cursor"
+        [style.left.%]="saturation() * 100"
+        [style.top.%]="(1 - brightness()) * 100"
+        [style.background]="color()"
+      ></div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.tk-color-picker-spectrum__area{width:100%;height:6.5rem;border-radius:var(--tk-borderRadius-s, .25rem);position:relative;overflow:hidden;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.tk-color-picker-spectrum__area:before{content:\"\";position:absolute;inset:0;background:linear-gradient(to right,#fff,transparent)}.tk-color-picker-spectrum__area:after{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000)}.tk-color-picker-spectrum__area:focus-visible{box-shadow:inset 0 0 0 2px var(--tk-color-border-focus, #16006f)}.tk-color-picker-spectrum__cursor{position:absolute;width:.875rem;height:.875rem;border-radius:var(--tk-borderRadius-full, 50%);border:2px solid var(--tk-color-background-default, #ffffff);box-shadow:0 0 0 1px var(--tk-color-border-strong, #424243);transform:translate(-50%,-50%);pointer-events:none;z-index:2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerSpectrumComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-color-picker-spectrum', template: `
+    <div
+      class="tk-color-picker-spectrum__area"
+      role="slider"
+      tabindex="0"
+      [style.background]="hueBackground()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-valuetext]="valueText()"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      [attr.aria-valuenow]="Math.round(saturation() * 100)"
+      (pointerdown)="onPointerDown($event)"
+      (keydown)="onKeydown($event)"
+    >
+      <div
+        class="tk-color-picker-spectrum__cursor"
+        [style.left.%]="saturation() * 100"
+        [style.top.%]="(1 - brightness()) * 100"
+        [style.background]="color()"
+      ></div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.tk-color-picker-spectrum__area{width:100%;height:6.5rem;border-radius:var(--tk-borderRadius-s, .25rem);position:relative;overflow:hidden;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.tk-color-picker-spectrum__area:before{content:\"\";position:absolute;inset:0;background:linear-gradient(to right,#fff,transparent)}.tk-color-picker-spectrum__area:after{content:\"\";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000)}.tk-color-picker-spectrum__area:focus-visible{box-shadow:inset 0 0 0 2px var(--tk-color-border-focus, #16006f)}.tk-color-picker-spectrum__cursor{position:absolute;width:.875rem;height:.875rem;border-radius:var(--tk-borderRadius-full, 50%);border:2px solid var(--tk-color-background-default, #ffffff);box-shadow:0 0 0 1px var(--tk-color-border-strong, #424243);transform:translate(-50%,-50%);pointer-events:none;z-index:2}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hue", required: false }] }], saturation: [{ type: i0.Input, args: [{ isSignal: true, alias: "saturation", required: false }] }], brightness: [{ type: i0.Input, args: [{ isSignal: true, alias: "brightness", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+/**
+ * @component ColorPickerSwatchGridComponent
+ * @description
+ * Internal grid of color swatches of `tk-color-picker` (NOT public API).
+ * Used by both the predefined palette and the custom colors sections.
+ * Each swatch is a real button labelled with its hex value;
+ * the currently selected color is marked with `aria-pressed`.
+ */
+class ColorPickerSwatchGridComponent {
+    constructor() {
+        /** Hex colors to render as swatches. */
+        this.colors = input([], ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+        /** Currently selected hex (normalized lowercase) to highlight. */
+        this.selected = input('', ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /** Accessible label of the swatch group. */
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Emits the picked hex color. */
+        this.picked = output();
+    }
+    isSelected(color) {
+        return color.toLowerCase() === this.selected().toLowerCase();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerSwatchGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ColorPickerSwatchGridComponent, isStandalone: true, selector: "tk-color-picker-swatch-grid", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked" }, ngImport: i0, template: `
+    <div class="tk-color-picker-swatch-grid__grid" role="group" [attr.aria-label]="ariaLabel()">
+      @for (color of colors(); track color) {
+        <button
+          type="button"
+          class="tk-color-picker-swatch-grid__swatch"
+          [class.tk-color-picker-swatch-grid__swatch--selected]="isSelected(color)"
+          [style.background-color]="color"
+          [attr.aria-label]="color"
+          [attr.aria-pressed]="isSelected(color)"
+          (mousedown)="$event.preventDefault()"
+          (click)="picked.emit(color)"
+        ></button>
+      }
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.tk-color-picker-swatch-grid__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(1.25rem,1fr));gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker-swatch-grid__swatch{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-xs, .125rem);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.tk-color-picker-swatch-grid__swatch:hover{transform:scale(1.12)}.tk-color-picker-swatch-grid__swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker-swatch-grid__swatch--selected{box-shadow:0 0 0 2px var(--tk-color-background-default, #ffffff),0 0 0 4px var(--tk-color-accent-default, #6ad0bc)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerSwatchGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-color-picker-swatch-grid', template: `
+    <div class="tk-color-picker-swatch-grid__grid" role="group" [attr.aria-label]="ariaLabel()">
+      @for (color of colors(); track color) {
+        <button
+          type="button"
+          class="tk-color-picker-swatch-grid__swatch"
+          [class.tk-color-picker-swatch-grid__swatch--selected]="isSelected(color)"
+          [style.background-color]="color"
+          [attr.aria-label]="color"
+          [attr.aria-pressed]="isSelected(color)"
+          (mousedown)="$event.preventDefault()"
+          (click)="picked.emit(color)"
+        ></button>
+      }
+      <ng-content></ng-content>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.tk-color-picker-swatch-grid__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(1.25rem,1fr));gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker-swatch-grid__swatch{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-xs, .125rem);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.tk-color-picker-swatch-grid__swatch:hover{transform:scale(1.12)}.tk-color-picker-swatch-grid__swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker-swatch-grid__swatch--selected{box-shadow:0 0 0 2px var(--tk-color-background-default, #ffffff),0 0 0 4px var(--tk-color-accent-default, #6ad0bc)}\n"] }]
+        }], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }] } });
+
+const HEX_REGEX = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+const DEFAULT_PRESET_COLORS = [
+    '#ffffff', // white
+    '#000000', // black
+    '#929292', // gray
+    '#ffea00', // yellow
+    '#fff9ab', // light yellow
+    '#0c5dbc', // blue
+    '#6aa7f0', // light blue
+    '#ff0000', // red
+    '#ff95a2', // pink
+    '#ff9f00', // orange
+    '#417505', // dark green
+    '#7ed321', // light green
+    '#7300d9', // purple
+    '#d4a4ff', // lilac
+    '#50e3c2', // turquoise
+];
+const DEFAULT_TEXTS = {
+    swatchesLabel: 'Colores',
+    customColorsLabel: 'Colores personalizados',
+    hexLabel: 'HEX',
+    contrastLabel: 'Contraste',
+    contrastSampleText: 'Aa',
+    contrastSampleLabel: 'Texto sobre fondo',
+    contrastLowLabel: 'Bajo',
+    invalidHexError: 'Hexadecimal inválido',
+    requiredError: 'Este color es requerido',
+    eyedropperLabel: 'Selecciona un color de la pantalla',
+    addCustomColorLabel: 'Agregar color actual a colores personalizados',
+    removeCustomColorLabel: 'Remover color de colores personalizados',
+    openPickerLabel: 'Abrir selector de color',
+    spectrumLabel: 'Saturación y brillo',
+    hueLabel: 'Matiz',
+    dialogLabel: 'Selector de color',
+};
+const DEFAULT_SECTIONS = {
+    swatches: true,
+    customColors: true,
+    spectrum: true,
+    hue: true,
+    hex: true,
+    eyedropper: true,
+    contrast: true,
+};
+/**
+ * @component ColorPickerComponent
+ * @description
+ * Configurable color picker of the Tekus Design System. Renders a trigger
+ * (`input` variant with editable HEX, or compact `swatch` variant) that opens
+ * a PrimeNG `p-popover` composed of independently toggleable sections:
+ * predefined swatches, custom colors, saturation/brightness spectrum, hue bar,
+ * HEX field with EyeDropper support, WCAG contrast preview and a
+ * Cancel/Accept action bar with temporary selection state.
+ * Implements `ControlValueAccessor` for Reactive Forms integration.
+ *
+ * @usage
+ * ```html
+ * <tk-color-picker
+ *   label="Color"
+ *   [(value)]="color"
+ *   [contrastColor]="'#ffffff'"
+ *   (colorChange)="onColor($event)">
+ * </tk-color-picker>
+ * ```
+ */
+class ColorPickerComponent {
+    static { this.instanceCount = 0; }
+    constructor() {
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.el = inject(ElementRef);
+        this.init = (() => {
+            if (this.ngControl) {
+                this.ngControl.valueAccessor = this;
+            }
+        })();
+        /**
+         * @property {ColorPickerVariant} variant
+         * @description
+         * Trigger appearance: `input` shows swatch + editable HEX + chevron,
+         * `swatch` shows only swatch + chevron.
+         * @default `'input'`
+         */
+        this.variant = input('input', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {string} label
+         * @description
+         * Label displayed above the trigger.
+         * @default `''`
+         */
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {string} hint
+         * @description
+         * Hint text displayed below the trigger (hidden while an error is shown).
+         * @default `''`
+         */
+        this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {boolean} disabled
+         * @description
+         * Disables the trigger and the popover. Also controlled by Reactive Forms
+         * via `setDisabledState`.
+         * @default `false`
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {boolean} required
+         * @description
+         * When `true`, an empty HEX field shows the required error on blur.
+         * @default `false`
+         */
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {ColorPickerSections} sections
+         * @description
+         * Enables/disables each popover section. Missing flags default to `true`.
+         * Disabling `actionBar` switches the picker to live mode (every valid
+         * change is emitted immediately).
+         * @default `{}` (all sections enabled)
+         */
+        this.sections = input({}, ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {string[]} presetColors
+         * @description
+         * Colors of the predefined palette section.
+         * @default Design System base palette
+         */
+        this.presetColors = input(DEFAULT_PRESET_COLORS, ...(ngDevMode ? [{ debugName: "presetColors" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {string | null} contrastColor
+         * @description
+         * Optional override of the text color used for the WCAG contrast pair.
+         * When `null` (default) the text color is resolved automatically from the
+         * picked background luminance (ITU-R BT.601): black over light colors,
+         * white over dark ones.
+         * @default `null`
+         */
+        this.contrastColor = input(null, ...(ngDevMode ? [{ debugName: "contrastColor" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {number} maxCustomColors
+         * @description
+         * Maximum number of custom color slots. Once the list is at capacity, the
+         * oldest slot is replaced using a circular buffer — the "+" button stays
+         * visible at all times.
+         * @default `18`
+         */
+        this.maxCustomColors = input(18, ...(ngDevMode ? [{ debugName: "maxCustomColors" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {'top' | 'bottom'} placement
+         * @description
+         * Preferred position of the popover relative to the trigger.
+         * @default `'bottom'`
+         */
+        this.placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {string} errorMessage
+         * @description
+         * External error message that overrides the internal validation messages.
+         * @default `''`
+         */
+        this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {ColorPickerTexts} texts
+         * @description
+         * UI texts (section labels, buttons, errors). Defaults are in English so
+         * consumers can localize with their own i18n solution.
+         * @default `{}` (English defaults)
+         */
+        this.texts = input({}, ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {ModelSignal<string>} value
+         * @description
+         * Confirmed color as a normalized lowercase 6-digit hex with `#`.
+         * Two-way bindable.
+         * @default `''`
+         */
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * @property {ModelSignal<string[]>} customColors
+         * @description
+         * User-saved custom colors. Two-way bindable so the consumer decides
+         * where to persist them.
+         * @default `[]`
+         */
+        this.customColors = model([], ...(ngDevMode ? [{ debugName: "customColors" }] : /* istanbul ignore next */ []));
+        /**
+         * @event colorChange
+         * @description
+         * Emits the confirmed background hex color: on Accept (action bar mode) or
+         * on every valid change (live mode / trigger HEX edit while closed). Never
+         * emits invalid values, on hydration, or while disabled.
+         */
+        this.colorChange = output();
+        /**
+         * @event textColorChange
+         * @description
+         * Emits together with `colorChange`: the ideal text color over the
+         * confirmed background (`#000000` on light colors, `#ffffff` on dark ones,
+         * or the `contrastColor` override when provided).
+         */
+        this.textColorChange = output();
+        /**
+         * @event validChange
+         * @description
+         * Emits only when the validity of the HEX value changes.
+         */
+        this.validChange = output();
+        /**
+         * @event opened
+         * @description
+         * Emits when the picker popover opens.
+         */
+        this.opened = output();
+        /**
+         * @event closed
+         * @description
+         * Emits when the popover closes, with the close reason
+         * (`accept` confirmed, `cancel` discarded/restored).
+         */
+        this.closed = output();
+        this.popover = viewChild('op', ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+        this.swatchBtnRef = viewChild('swatchBtn', { ...(ngDevMode ? { debugName: "swatchBtnRef" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.inputTriggerRef = viewChild('inputTrigger', { ...(ngDevMode ? { debugName: "inputTriggerRef" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.panelHexInput = viewChild('panelHexInput', { ...(ngDevMode ? { debugName: "panelHexInput" } : /* istanbul ignore next */ {}), read: ElementRef });
+        /**
+         * Internal FormControl handed to the `tk-input-text` trigger so the
+         * disabled state propagates through the Design System input.
+         */
+        this.triggerControl = new FormControl('');
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.hue = signal(0, ...(ngDevMode ? [{ debugName: "hue" }] : /* istanbul ignore next */ []));
+        this.saturation = signal(1, ...(ngDevMode ? [{ debugName: "saturation" }] : /* istanbul ignore next */ []));
+        this.brightness = signal(1, ...(ngDevMode ? [{ debugName: "brightness" }] : /* istanbul ignore next */ []));
+        this.draftHex = signal('', ...(ngDevMode ? [{ debugName: "draftHex" }] : /* istanbul ignore next */ []));
+        this.displayHexNoHash = signal('', ...(ngDevMode ? [{ debugName: "displayHexNoHash" }] : /* istanbul ignore next */ []));
+        this.isValid = signal(true, ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
+        this.errorType = signal('invalid', ...(ngDevMode ? [{ debugName: "errorType" }] : /* istanbul ignore next */ []));
+        this.cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.resolvedSections = computed(() => ({
+            ...DEFAULT_SECTIONS,
+            ...this.sections(),
+        }), ...(ngDevMode ? [{ debugName: "resolvedSections" }] : /* istanbul ignore next */ []));
+        this.t = computed(() => ({
+            ...DEFAULT_TEXTS,
+            ...this.texts(),
+        }), ...(ngDevMode ? [{ debugName: "t" }] : /* istanbul ignore next */ []));
+        /** Valid draft hex to paint swatches, or null → neutral fallback via CSS. */
+        this.swatchColor = computed(() => {
+            const color = this.isOpen() ? this.draftHex() : this.value();
+            return this.isValidHex(color) ? color : null;
+        }, ...(ngDevMode ? [{ debugName: "swatchColor" }] : /* istanbul ignore next */ []));
+        /**
+         * Text color of the contrast pair: the `contrastColor` override when valid,
+         * otherwise resolved automatically from the draft background luminance.
+         */
+        this.contrastTextColor = computed(() => {
+            const override = this.contrastColor();
+            if (override) {
+                const norm = this.normalizeHex(override);
+                if (this.isValidHex(norm)) {
+                    return norm;
+                }
+            }
+            const bg = this.draftHex();
+            return getContrastTextColor(this.isValidHex(bg) ? bg : '#ffffff');
+        }, ...(ngDevMode ? [{ debugName: "contrastTextColor" }] : /* istanbul ignore next */ []));
+        this.contrastResult = computed(() => {
+            const bg = this.draftHex();
+            if (!this.isValidHex(bg)) {
+                return null;
+            }
+            return getContrastResult(bg, this.contrastTextColor());
+        }, ...(ngDevMode ? [{ debugName: "contrastResult" }] : /* istanbul ignore next */ []));
+        this.showContrast = computed(() => this.resolvedSections().contrast && this.contrastResult() !== null, ...(ngDevMode ? [{ debugName: "showContrast" }] : /* istanbul ignore next */ []));
+        this.eyeDropperSupported = typeof globalThis !== 'undefined' && 'EyeDropper' in globalThis;
+        this.showEyedropper = computed(() => this.resolvedSections().hex &&
+            this.resolvedSections().eyedropper &&
+            this.eyeDropperSupported, ...(ngDevMode ? [{ debugName: "showEyedropper" }] : /* istanbul ignore next */ []));
+        this.canAddCustom = computed(() => this.isValidHex(this.draftHex()), ...(ngDevMode ? [{ debugName: "canAddCustom" }] : /* istanbul ignore next */ []));
+        this.errorText = computed(() => {
+            if (this.errorMessage()) {
+                return this.errorMessage();
+            }
+            return this.errorType() === 'required'
+                ? this.t().requiredError
+                : this.t().invalidHexError;
+        }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+        this.originalValue = '';
+        // Circular buffer pointer: tracks the oldest slot index to replace when customColors is at capacity.
+        // Starts at 0 (correct for both empty lists and backend-loaded full arrays, assuming oldest-first order).
+        // Limitation: not reset when customColors is rebound externally at runtime without destroying the component.
+        this.customColorWritePtr = signal(0, ...(ngDevMode ? [{ debugName: "customColorWritePtr" }] : /* istanbul ignore next */ []));
+        this.hexInput$ = new Subject();
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        ColorPickerComponent.instanceCount++;
+        this.fieldId = `tk-color-picker-${ColorPickerComponent.instanceCount}`;
+        this.panelFieldId = `${this.fieldId}-panel`;
+        this.errorId = `${this.fieldId}-error`;
+        effect(() => {
+            const incoming = this.value();
+            untracked(() => this.syncFromValue(incoming));
+        });
+        effect(() => {
+            if (this.isDisabled() && this.isOpen()) {
+                this.popover()?.hide();
+            }
+        });
+        effect(() => {
+            if (this.isDisabled()) {
+                this.triggerControl.disable({ emitEvent: false });
+            }
+            else {
+                this.triggerControl.enable({ emitEvent: false });
+            }
+        });
+        // Sync triggerControl validity so tk-input-text shows errors natively.
+        effect(() => {
+            const valid = this.isValid();
+            untracked(() => {
+                if (valid) {
+                    this.triggerControl.setErrors(null);
+                }
+                else {
+                    this.triggerControl.setErrors({ hex: true });
+                }
+            });
+        });
+        this.hexInput$
+            .pipe(debounceTime(200), takeUntilDestroyed(this.destroyRef))
+            .subscribe((v) => this.processHexInput(v, false));
+    }
+    // ── ControlValueAccessor ────────────────────────────────────────────────
+    /**
+     * @method writeValue
+     * @description Hydrates the picker from the form model without emitting.
+     */
+    writeValue(value) {
+        this.value.set(value || '');
+    }
+    /**
+     * @method registerOnChange
+     * @description Registers the Reactive Forms change callback.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * @method registerOnTouched
+     * @description Registers the Reactive Forms touched callback.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * @method setDisabledState
+     * @description Syncs the disabled state from Reactive Forms.
+     */
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ── Popover lifecycle ───────────────────────────────────────────────────
+    onTriggerClick(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.popover()?.toggle(event, this.getAnchorEl() ?? this.el.nativeElement);
+    }
+    /** Returns the precise anchor element for popover positioning.
+     * For the input variant we target the `p-floatlabel` child instead of the
+     * full `tk-input-text` host. The host includes a bottom section with
+     * `min-height: 1.25rem + margin-top: 0.25rem` that is invisible when empty
+     * but would push the panel ~1.5rem below the visible input field.
+     *
+     * Coupling note: `p-floatlabel` is PrimeNG's float-label host element selector.
+     * If PrimeNG renames it in a future major, the `?? host` fallback keeps
+     * positioning functional (panel opens ~1.5rem lower than ideal). */
+    getAnchorEl() {
+        if (this.variant() === 'swatch') {
+            return this.swatchBtnRef()?.nativeElement;
+        }
+        const host = this.inputTriggerRef()?.nativeElement;
+        return host?.querySelector('p-floatlabel') ?? host;
+    }
+    onPopoverShow() {
+        this.isOpen.set(true);
+        this.originalValue = this.value();
+        // Sync draft from current value
+        this.syncFromValue(this.value());
+        this.opened.emit();
+        // PrimeNG's absolutePosition flips the panel to "above" when it doesn't fit
+        // below, but clamps to scrollTop when there's no space above either — panel
+        // ends up covering the trigger. We override the position after PrimeNG runs.
+        setTimeout(() => this.fixPanelPosition(), 0);
+    }
+    fixPanelPosition() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const container = this.popover()?.container;
+        if (!container)
+            return;
+        const anchor = this.getAnchorEl();
+        if (!anchor)
+            return;
+        const anchorRect = anchor.getBoundingClientRect();
+        const panelH = container.offsetHeight;
+        const panelW = container.offsetWidth;
+        const vH = window.innerHeight;
+        const vW = window.innerWidth;
+        const scrollY = window.scrollY;
+        const scrollX = window.scrollX;
+        const spaceBelow = vH - anchorRect.bottom;
+        const spaceAbove = anchorRect.top;
+        let top;
+        if (spaceBelow >= panelH) {
+            // Preferred: open below trigger
+            top = anchorRect.bottom + scrollY;
+        }
+        else if (spaceAbove >= panelH) {
+            // Fallback: open above trigger
+            top = anchorRect.top + scrollY - panelH;
+        }
+        else {
+            // Neither side fits: prefer below (scroll context), clamp to viewport edges.
+            // Anchor to trigger bottom and push up only as much as needed so the panel
+            // stays close to the trigger rather than jumping to the top of the page.
+            const idealBelow = anchorRect.bottom + scrollY;
+            const maxTop = scrollY + vH - panelH - 8;
+            const minTop = scrollY + 8;
+            top = Math.max(minTop, Math.min(idealBelow, maxTop));
+        }
+        let left = anchorRect.left + scrollX;
+        if (left + panelW > scrollX + vW - 8) {
+            left = scrollX + vW - panelW - 8;
+        }
+        left = Math.max(scrollX + 8, left);
+        // Zero out PrimeNG's arrow margin so the panel sits flush with the trigger.
+        container.style.margin = '0';
+        container.style.top = `${top}px`;
+        container.style.insetInlineStart = `${left}px`;
+    }
+    onPopoverHide() {
+        this.isOpen.set(false);
+        this.onTouched();
+        this.triggerControl.markAsTouched();
+        this.closed.emit('accept');
+    }
+    onPanelEnter(event) {
+        this.confirmAndClose();
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    confirmAndClose() {
+        if (!this.isValidHex(this.draftHex())) {
+            return;
+        }
+        this.commitDraft();
+        this.popover()?.hide();
+    }
+    // ── Draft state updates ─────────────────────────────────────────────────
+    onSpectrumChange(change) {
+        this.saturation.set(change.saturation);
+        this.brightness.set(change.brightness);
+        this.applyHsv();
+    }
+    onHueChange(event) {
+        this.hue.set(Number(event.target.value));
+        this.applyHsv();
+    }
+    onSwatchPick(color) {
+        const hex = this.normalizeHex(color);
+        if (this.isValidHex(hex)) {
+            this.setFromHex(hex, true);
+        }
+    }
+    addCustomColor() {
+        const hex = this.draftHex();
+        if (!this.isValidHex(hex))
+            return;
+        const list = this.customColors();
+        if (list.some((c) => c.toLowerCase() === hex))
+            return;
+        if (list.length >= this.maxCustomColors()) {
+            // Circular buffer: replace the oldest slot (writePtr) and advance the
+            // pointer. Only one cell changes per add — no grid shift.
+            // Both signal mutations are kept outside update() to avoid side effects
+            // inside a state-transition callback.
+            const ptr = this.customColorWritePtr();
+            const next = [...list];
+            next[ptr] = hex;
+            this.customColors.set(next);
+            this.customColorWritePtr.set((ptr + 1) % this.maxCustomColors());
+        }
+        else {
+            this.customColors.update((l) => [...l, hex]);
+        }
+    }
+    isCustomColorSelected() {
+        const selected = this.draftHex().toLowerCase();
+        return this.customColors().some((c) => c.toLowerCase() === selected);
+    }
+    removeCustomColor() {
+        const hex = this.draftHex().toLowerCase();
+        this.customColors.update((list) => list.filter((c) => c.toLowerCase() !== hex));
+    }
+    openEyeDropper() {
+        const ctor = globalThis
+            .EyeDropper;
+        if (!ctor) {
+            return;
+        }
+        new ctor()
+            .open()
+            .then((result) => {
+            const hex = this.normalizeHex(result.sRGBHex);
+            if (this.isValidHex(hex)) {
+                this.setFromHex(hex, true);
+                // Focus HEX input so Enter closes modal without opening eyedropper again
+                setTimeout(() => {
+                    const inputEl = this.panelHexInput();
+                    if (inputEl) {
+                        const hexInput = inputEl.nativeElement.querySelector('input');
+                        if (hexInput) {
+                            hexInput.focus();
+                        }
+                    }
+                }, 0);
+            }
+        })
+            .catch(() => {
+            // The user dismissed the eyedropper — nothing to do.
+        });
+    }
+    // ── HEX input pipeline ──────────────────────────────────────────────────
+    onHexInput(clean) {
+        this.displayHexNoHash.set(clean);
+        this.hexInput$.next('#' + clean);
+    }
+    /**
+     * Sanitizes typing inside a `tk-input-text` hex field (trigger or popover):
+     * strips non-hex characters at the DOM level (keeping the caret behavior of
+     * the native input) and feeds the shared validation pipeline.
+     */
+    onHexNativeInput(event) {
+        const target = event.target;
+        if (!target || target.tagName !== 'INPUT') {
+            return;
+        }
+        const clean = target.value.replace(/[^A-Fa-f0-9]/g, '').toUpperCase().slice(0, 6);
+        if (clean !== target.value) {
+            target.value = clean;
+        }
+        this.onHexInput(clean);
+    }
+    /** Blocks non-hex keypresses and enforces 6-char max before char enters the DOM. Enter confirms selection. */
+    onHexKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            const hex = this.draftHex();
+            if (this.isValidHex(hex)) {
+                this.commitDraft();
+            }
+            // Close popover
+            const pop = this.popover();
+            if (pop) {
+                pop.hide();
+            }
+            return;
+        }
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        const navigationKeys = [
+            'Backspace', 'Delete', 'Tab',
+            'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+            'Home', 'End',
+        ];
+        if (navigationKeys.includes(event.key)) {
+            return;
+        }
+        if (!/^[A-Fa-f0-9]$/.test(event.key)) {
+            event.preventDefault();
+            return;
+        }
+        // Enforce 6-char max: block if no selection to replace and already full
+        const target = event.target;
+        if (target && target.tagName === 'INPUT') {
+            const selectionLength = (target.selectionEnd ?? 0) - (target.selectionStart ?? 0);
+            if (target.value.length >= 6 && selectionLength === 0) {
+                event.preventDefault();
+            }
+        }
+    }
+    /** Strips non-hex chars from pasted text before it reaches the input model. */
+    onHexPaste(event) {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        const clean = text.replace(/[^A-Fa-f0-9]/g, '').toUpperCase();
+        const target = event.target;
+        if (!target || target.tagName !== 'INPUT') {
+            return;
+        }
+        const start = target.selectionStart ?? 0;
+        const end = target.selectionEnd ?? 0;
+        const merged = (target.value.slice(0, start) + clean + target.value.slice(end)).slice(0, 6);
+        target.value = merged;
+        this.onHexInput(merged);
+    }
+    onHexBlur() {
+        this.processHexInput('#' + this.displayHexNoHash(), true);
+        this.onTouched();
+    }
+    processHexInput(raw, forceNormalize) {
+        const hex = this.parseHex(raw);
+        if (hex === null) {
+            return;
+        }
+        if (this.isValidHex(hex)) {
+            this.applyValidHex(hex, forceNormalize);
+        }
+        else {
+            this.applyInvalidHex(hex.slice(1), forceNormalize);
+        }
+    }
+    parseHex(raw) {
+        const text = raw?.trim() ?? '';
+        const body = (text.startsWith('#') ? text.slice(1) : text).trim();
+        if (body.length === 0) {
+            if (this.required()) {
+                this.errorType.set('required');
+                this.setValid(false);
+            }
+            else {
+                this.setValid(true);
+            }
+            return null;
+        }
+        return ('#' + body).toLowerCase();
+    }
+    applyValidHex(hex, forceNormalize) {
+        if (hex.length === 4 && !forceNormalize) {
+            this.setValid(true);
+            return;
+        }
+        const norm = this.normalizeHex(hex);
+        this.setValid(true);
+        if (norm !== this.draftHex()) {
+            this.setFromHex(norm, true);
+        }
+        else {
+            this.displayHexNoHash.set(norm.slice(1).toUpperCase());
+        }
+    }
+    applyInvalidHex(rawText, forceNormalize) {
+        this.errorType.set('invalid');
+        const partial = !forceNormalize && /^[A-Fa-f0-9]*$/.test(rawText) && rawText.length <= 6;
+        this.setValid(partial);
+    }
+    setValid(value) {
+        if (this.isValid() === value) {
+            return;
+        }
+        this.isValid.set(value);
+        this.validChange.emit(value);
+    }
+    // ── Internal state helpers ──────────────────────────────────────────────
+    syncFromValue(incoming, restoring = false) {
+        if (!incoming) {
+            if (restoring) {
+                this.draftHex.set('');
+                this.displayHexNoHash.set('');
+            }
+            // Validate empty color (fails if required)
+            this.parseHex('');
+            return;
+        }
+        const hex = this.normalizeHex(incoming);
+        if (this.isValidHex(hex) && hex !== this.draftHex()) {
+            this.setFromHex(hex, false);
+        }
+    }
+    setFromHex(hex, interactive) {
+        this.draftHex.set(hex);
+        this.displayHexNoHash.set(hex.slice(1).toUpperCase());
+        this.setValid(true);
+        const hsv = this.hexToHsv(hex);
+        this.hue.set(hsv.h);
+        this.saturation.set(hsv.s);
+        this.brightness.set(hsv.v);
+        if (interactive) {
+            this.maybeCommit();
+        }
+    }
+    applyHsv() {
+        const hex = this.hsvToHex(this.hue(), this.saturation(), this.brightness());
+        this.draftHex.set(hex);
+        this.displayHexNoHash.set(hex.slice(1).toUpperCase());
+        this.setValid(true);
+        this.maybeCommit();
+    }
+    /**
+     * Commits the draft color immediately (live mode).
+     */
+    maybeCommit() {
+        this.commitDraft();
+    }
+    commitDraft() {
+        const hex = this.draftHex();
+        if (!this.isValidHex(hex) || this.isDisabled()) {
+            return;
+        }
+        this.value.set(hex);
+        this.onChange(hex);
+        this.colorChange.emit(hex);
+        this.textColorChange.emit(this.contrastTextColor());
+    }
+    // ── Color math ──────────────────────────────────────────────────────────
+    normalizeHex(value) {
+        if (!value?.trim()) {
+            return '';
+        }
+        let v = value.trim();
+        v = v.startsWith('#') ? v : '#' + v;
+        if (/^#[A-Fa-f0-9]{3}$/.test(v)) {
+            v = '#' + v[1] + v[1] + v[2] + v[2] + v[3] + v[3];
+        }
+        return v.toLowerCase();
+    }
+    isValidHex(value) {
+        return HEX_REGEX.test(value);
+    }
+    hexToHsv(hex) {
+        const r = Number.parseInt(hex.slice(1, 3), 16) / 255;
+        const g = Number.parseInt(hex.slice(3, 5), 16) / 255;
+        const b = Number.parseInt(hex.slice(5, 7), 16) / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const delta = max - min;
+        let h = 0;
+        if (delta !== 0) {
+            if (max === r) {
+                h = ((g - b) / delta) % 6;
+            }
+            else if (max === g) {
+                h = (b - r) / delta + 2;
+            }
+            else {
+                h = (r - g) / delta + 4;
+            }
+            h = Math.round(h * 60);
+            if (h < 0) {
+                h += 360;
+            }
+        }
+        return { h, s: max === 0 ? 0 : delta / max, v: max };
+    }
+    hsvToHex(h, s, v) {
+        const c = v * s;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = v - c;
+        let r = 0;
+        let g = 0;
+        let b = 0;
+        if (h < 60) {
+            r = c;
+            g = x;
+        }
+        else if (h < 120) {
+            r = x;
+            g = c;
+        }
+        else if (h < 180) {
+            g = c;
+            b = x;
+        }
+        else if (h < 240) {
+            g = x;
+            b = c;
+        }
+        else if (h < 300) {
+            r = x;
+            b = c;
+        }
+        else {
+            r = c;
+            b = x;
+        }
+        const toHex = (n) => Math.round((n + m) * 255)
+            .toString(16)
+            .padStart(2, '0');
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: ColorPickerComponent, isStandalone: true, selector: "tk-color-picker", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, contrastColor: { classPropertyName: "contrastColor", publicName: "contrastColor", isSignal: true, isRequired: false, transformFunction: null }, maxCustomColors: { classPropertyName: "maxCustomColors", publicName: "maxCustomColors", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, customColors: { classPropertyName: "customColors", publicName: "customColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", customColors: "customColorsChange", colorChange: "colorChange", textColorChange: "textColorChange", validChange: "validChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["op"], descendants: true, isSignal: true }, { propertyName: "swatchBtnRef", first: true, predicate: ["swatchBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputTriggerRef", first: true, predicate: ["inputTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "panelHexInput", first: true, predicate: ["panelHexInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tk-color-picker\"\n  [class.tk-color-picker--disabled]=\"isDisabled()\"\n  [class.tk-color-picker--open]=\"isOpen()\"\n  [class.tk-color-picker--invalid]=\"!isValid()\">\n  @if (variant() === 'swatch') {\n    @if (label()) {\n      <span class=\"tk-color-picker__label\">{{ label() }}</span>\n    }\n    <button\n      #swatchBtn\n      type=\"button\"\n      class=\"tk-color-picker__trigger tk-color-picker__trigger--swatch\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"t().openPickerLabel + (label() ? ': ' + label() : '')\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onTriggerClick($event)\">\n      <span\n        class=\"tk-color-picker__swatch\"\n        [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n        [style.background-color]=\"swatchColor()\"\n        aria-hidden=\"true\"></span>\n      <tk-icon\n        class=\"tk-color-picker__chevron\"\n        [class.tk-color-picker__chevron--open]=\"isOpen()\"\n        icon=\"chevron-down\"\n        styleIcon=\"regular\"\n        size=\"xs\"></tk-icon>\n    </button>\n  } @else {\n    <div\n      #inputTrigger\n      class=\"tk-color-picker__trigger-input\"\n      [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\">\n      @if (label()) {\n        <label\n          class=\"tk-color-picker__input-label\"\n          [for]=\"fieldId\"\n          [title]=\"label()\"\n          >{{ label() }}</label\n        >\n      }\n      <div class=\"tk-color-picker__input-wrap\">\n        <button\n          type=\"button\"\n          class=\"tk-color-picker__input-swatch\"\n          [class.tk-color-picker__input-swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor() ?? null\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"t().openPickerLabel\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onTriggerClick($event)\"></button>\n        <span class=\"tk-color-picker__input-prefix\" aria-hidden=\"true\">#</span>\n        <input\n          pInputText\n          [id]=\"fieldId\"\n          [value]=\"displayHexNoHash()\"\n          [disabled]=\"isDisabled()\"\n          [class.ng-invalid]=\"triggerControl.invalid\"\n          [class.ng-dirty]=\"triggerControl.dirty\"\n          [class.ng-touched]=\"triggerControl.touched\"\n          [attr.aria-describedby]=\"!isValid() ? errorId : null\"\n          [attr.aria-invalid]=\"!isValid()\"\n          autocomplete=\"off\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (blur)=\"onHexBlur()\" />\n      </div>\n      <div class=\"tk-color-picker__input-bottom\">\n        @if (!isValid()) {\n          <p-message\n            severity=\"error\"\n            size=\"small\"\n            variant=\"simple\"\n            [id]=\"errorId\"\n            >{{ errorText() }}</p-message\n          >\n        } @else if (hint()) {\n          <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n            hint()\n          }}</p-message>\n        }\n      </div>\n    </div>\n  }\n\n  @if (variant() === 'swatch') {\n    @if (!isValid()) {\n      <span\n        [id]=\"errorId\"\n        class=\"tk-color-picker__error\"\n        role=\"alert\"\n        aria-live=\"polite\">\n        {{ errorText() }}\n      </span>\n    } @else if (hint()) {\n      <span class=\"tk-color-picker__hint\">{{ hint() }}</span>\n    }\n  }\n</div>\n\n<p-popover\n  #op\n  [styleClass]=\"\n    'tk-color-picker-popover' +\n    (variant() === 'input' ? ' tk-color-picker-popover--input' : '')\n  \"\n  position=\"bottom\"\n  appendTo=\"body\"\n  (onShow)=\"onPopoverShow()\"\n  (onHide)=\"onPopoverHide()\">\n  <div\n    class=\"tk-color-picker__panel\"\n    role=\"group\"\n    [attr.aria-label]=\"t().dialogLabel\"\n    tabindex=\"-1\"\n    autofocus\n    (keydown.enter)=\"onPanelEnter($event)\">\n    @if (resolvedSections().swatches && presetColors().length) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().swatchesLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"presetColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().swatchesLabel\"\n          (picked)=\"onSwatchPick($event)\" />\n      </section>\n    }\n\n    @if (resolvedSections().customColors) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().customColorsLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"customColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().customColorsLabel\"\n          (picked)=\"onSwatchPick($event)\">\n          @if (canAddCustom()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__add-custom\"\n              [attr.aria-label]=\"t().addCustomColorLabel\"\n              (click)=\"addCustomColor()\">\n              <tk-icon icon=\"plus\" styleIcon=\"regular\" size=\"xs\"></tk-icon>\n            </button>\n          }\n          @if (isCustomColorSelected()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__remove-custom\"\n              [attr.aria-label]=\"t().removeCustomColorLabel\"\n              (click)=\"removeCustomColor()\">\n              \u2212\n            </button>\n          }\n        </tk-color-picker-swatch-grid>\n      </section>\n    }\n\n    @if (\n      resolvedSections().customColors &&\n      (resolvedSections().spectrum ||\n        resolvedSections().hue ||\n        resolvedSections().hex)\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().spectrum) {\n      <tk-color-picker-spectrum\n        [hue]=\"hue()\"\n        [saturation]=\"saturation()\"\n        [brightness]=\"brightness()\"\n        [color]=\"swatchColor() ?? ''\"\n        [ariaLabel]=\"t().spectrumLabel\"\n        (changed)=\"onSpectrumChange($event)\" />\n    }\n\n    @if (resolvedSections().hue) {\n      <input\n        class=\"tk-color-picker__hue\"\n        type=\"range\"\n        min=\"0\"\n        max=\"360\"\n        [value]=\"hue()\"\n        [attr.aria-label]=\"t().hueLabel\"\n        (input)=\"onHueChange($event)\" />\n    }\n\n    @if (\n      (resolvedSections().spectrum || resolvedSections().hue) &&\n      resolvedSections().hex\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().hex) {\n      <section class=\"tk-color-picker__section tk-color-picker__hex-row\">\n        <span\n          class=\"tk-color-picker__swatch tk-color-picker__swatch--large\"\n          [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor()\"\n          aria-hidden=\"true\"></span>\n        <tk-input-text\n          #panelHexInput\n          class=\"tk-color-picker__panel-hex\"\n          [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\"\n          [label]=\"t().hexLabel\"\n          [id]=\"panelFieldId\"\n          [value]=\"displayHexNoHash()\"\n          prefixText=\"#\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (focusout)=\"onHexBlur()\" />\n        @if (showEyedropper()) {\n          <tk-button\n            class=\"tk-color-picker__eyedropper\"\n            tabindex=\"-1\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            icon=\"eye-dropper\"\n            styleIcon=\"regular\"\n            [attr.aria-label]=\"t().eyedropperLabel\"\n            (clicked)=\"openEyeDropper()\">\n          </tk-button>\n        }\n      </section>\n    }\n\n    @if (resolvedSections().hex && showContrast()) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (showContrast()) {\n      <section class=\"tk-color-picker__section tk-color-picker__contrast\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().contrastLabel\n        }}</span>\n        <div class=\"tk-color-picker__contrast-row\">\n          <span\n            class=\"tk-color-picker__contrast-pill\"\n            [style.background-color]=\"draftHex()\"\n            [attr.aria-label]=\"t().contrastSampleLabel\">\n            <span\n              class=\"tk-color-picker__contrast-sample\"\n              [style.color]=\"contrastTextColor()\">\n              {{ t().contrastSampleText }}\n            </span>\n          </span>\n          <div class=\"tk-color-picker__contrast-info\">\n            <span class=\"tk-color-picker__contrast-label\">{{\n              t().contrastSampleLabel\n            }}</span>\n            <span class=\"tk-color-picker__contrast-ratio\"\n              >{{ contrastResult()!.ratio }}:1</span\n            >\n          </div>\n          @switch (contrastResult()!.level) {\n            @case ('AAA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aaa\"\n                >AAA</span\n              >\n            }\n            @case ('AA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aa\"\n                >AA</span\n              >\n            }\n            @case ('fail') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--fail\">\n                {{ t().contrastLowLabel }}\n              </span>\n            }\n          }\n        </div>\n      </section>\n    }\n  </div>\n</p-popover>\n", styles: [":host{display:inline-block;font-family:var(--tk-font-family, sans-serif)}.tk-color-picker{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__label{font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-950, #191a1b);margin-bottom:.25rem}.tk-color-picker__trigger{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-s, .25rem);background:var(--tk-color-background-default, #ffffff);cursor:pointer;transition:border-color .14s ease,background .14s ease}.tk-color-picker__trigger:hover{border-color:var(--tk-color-border-default, #cecdcd)}.tk-color-picker__trigger:focus-within{border-color:var(--tk-color-border-focus, #16006f)}.tk-color-picker__trigger--swatch{appearance:none;width:fit-content;font:inherit;-webkit-user-select:none;user-select:none}.tk-color-picker__trigger--swatch>*{pointer-events:none}.tk-color-picker__trigger--swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__trigger--swatch:disabled{cursor:not-allowed}.tk-color-picker__trigger-input{display:flex;flex-direction:column;position:relative}.tk-color-picker__input-label{position:absolute;left:var(--tk-spacing-base-300, 3rem);top:.75rem;font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-500, #8a8a8b);background:var(--tk-color-background-default, #ffffff);padding:0 .25rem;transition:top .2s ease,left .2s ease,color .2s ease;pointer-events:none;z-index:1;max-width:calc(100% - 4rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-color-picker--disabled .tk-color-picker__input-label{display:none}.tk-color-picker--invalid .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap{position:relative;display:flex;align-items:center;width:100%}.tk-color-picker__input-wrap input.p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-base-300, 3rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent;outline:none}.tk-color-picker__input-wrap input.p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-dirty,.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap input.p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}.tk-color-picker__input-swatch{appearance:none;padding:0;position:absolute;left:var(--tk-spacing-base-25, .25rem);top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0;cursor:pointer;z-index:1;-webkit-user-select:none;user-select:none;background:transparent}.tk-color-picker__input-swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__input-swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__input-swatch:disabled{cursor:not-allowed;opacity:.5}.tk-color-picker__input-prefix{position:absolute;left:calc(var(--tk-spacing-base-25, .25rem) + 1.25rem + .25rem);top:50%;transform:translateY(-50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1;pointer-events:none;z-index:1}.tk-color-picker__input-bottom{display:flex;margin-top:.25rem;min-height:1.25rem}.tk-color-picker--open .tk-color-picker__trigger{border-color:var(--tk-color-border-strong, #424243)}.tk-color-picker--invalid .tk-color-picker__trigger{border-color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker--disabled .tk-color-picker__trigger{opacity:.55;cursor:not-allowed;pointer-events:none;background:var(--tk-color-background-soft, #f2f1f1)}.tk-color-picker__swatch{flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4)}.tk-color-picker__swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__swatch--large{width:2rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem)}.tk-color-picker__chevron{transition:transform .2s ease}.tk-color-picker__chevron--open{transform:rotate(180deg)}.tk-color-picker__error{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker__hint{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__panel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-m, .75rem);width:16rem;padding:var(--tk-spacing-padding-m, 1rem);box-sizing:border-box}.tk-color-picker__panel:focus,.tk-color-picker__panel:focus-visible{outline:none}.tk-color-picker__section{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__section-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-subtle, #5d5d5e)}.tk-color-picker__add-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__add-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__add-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__remove-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__remove-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__remove-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__hue{appearance:none;width:100%;height:.625rem;border-radius:var(--tk-borderRadius-full, 9999px);outline:none;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tk-color-picker__hue::-webkit-slider-thumb{appearance:none;width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:2px}.tk-color-picker__divider{width:100%;height:1px;background:var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-color-picker__hex-row{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);margin-top:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__hex-row>span{flex-shrink:0}.tk-color-picker__hex-row tk-button{flex-shrink:0;min-width:2.5rem;min-height:2.5rem}.tk-color-picker__eyedropper{margin-top:-12px}.tk-color-picker__eyedropper:focus,.tk-color-picker__eyedropper:focus-visible{outline:none;box-shadow:none}.tk-color-picker__panel-hex{flex:1;min-width:0}.tk-color-picker__contrast-row{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__contrast-pill{flex-shrink:0;width:2.5rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);display:inline-flex;align-items:center;justify-content:center}.tk-color-picker__contrast-sample{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);line-height:1}.tk-color-picker__contrast-info{flex:1;min-width:0;display:flex;flex-direction:column}.tk-color-picker__contrast-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #222324)}.tk-color-picker__contrast-ratio{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__contrast-badge{flex-shrink:0;font-size:var(--tk-font-size-legal-s, .625rem);font-weight:var(--tk-font-weight-600, 600);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border-radius:var(--tk-borderRadius-full, 9999px)}.tk-color-picker__contrast-badge--aaa,.tk-color-picker__contrast-badge--aa{background:var(--tk-color-feedback-success-muted, #d1fadf);color:var(--tk-color-feedback-success-strong, #114a3f)}.tk-color-picker__contrast-badge--fail{background:var(--tk-color-feedback-danger-muted, #feede8);color:var(--tk-color-feedback-danger-strong, #7f1d1d)}::ng-deep .tk-color-picker-popover{margin:0!important}::ng-deep .tk-color-picker-popover:before,::ng-deep .tk-color-picker-popover:after{display:none!important}::ng-deep .tk-color-picker-popover--input{margin-top:-22px!important}:host ::ng-deep .tk-color-picker__trigger-input--invalid input.p-inputtext{border-color:var(--tk-color-feedback-danger-default, #ff6640)}:host ::ng-deep .tk-color-picker__trigger-input:has(input:focus) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-primary-600, #140065);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.p-filled) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-surface-950, #191a1b);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-dirty) .tk-color-picker__input-label,:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-touched) .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "size"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: ColorPickerSpectrumComponent, selector: "tk-color-picker-spectrum", inputs: ["hue", "saturation", "brightness", "color", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: ColorPickerSwatchGridComponent, selector: "tk-color-picker-swatch-grid", inputs: ["colors", "selected", "ariaLabel"], outputs: ["picked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-color-picker', imports: [
+                        ButtonModule,
+                        InputTextModule,
+                        MessageModule,
+                        PopoverModule,
+                        ButtonComponent,
+                        IconComponent,
+                        InputTextComponent,
+                        ColorPickerSpectrumComponent,
+                        ColorPickerSwatchGridComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"tk-color-picker\"\n  [class.tk-color-picker--disabled]=\"isDisabled()\"\n  [class.tk-color-picker--open]=\"isOpen()\"\n  [class.tk-color-picker--invalid]=\"!isValid()\">\n  @if (variant() === 'swatch') {\n    @if (label()) {\n      <span class=\"tk-color-picker__label\">{{ label() }}</span>\n    }\n    <button\n      #swatchBtn\n      type=\"button\"\n      class=\"tk-color-picker__trigger tk-color-picker__trigger--swatch\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"t().openPickerLabel + (label() ? ': ' + label() : '')\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onTriggerClick($event)\">\n      <span\n        class=\"tk-color-picker__swatch\"\n        [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n        [style.background-color]=\"swatchColor()\"\n        aria-hidden=\"true\"></span>\n      <tk-icon\n        class=\"tk-color-picker__chevron\"\n        [class.tk-color-picker__chevron--open]=\"isOpen()\"\n        icon=\"chevron-down\"\n        styleIcon=\"regular\"\n        size=\"xs\"></tk-icon>\n    </button>\n  } @else {\n    <div\n      #inputTrigger\n      class=\"tk-color-picker__trigger-input\"\n      [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\">\n      @if (label()) {\n        <label\n          class=\"tk-color-picker__input-label\"\n          [for]=\"fieldId\"\n          [title]=\"label()\"\n          >{{ label() }}</label\n        >\n      }\n      <div class=\"tk-color-picker__input-wrap\">\n        <button\n          type=\"button\"\n          class=\"tk-color-picker__input-swatch\"\n          [class.tk-color-picker__input-swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor() ?? null\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"t().openPickerLabel\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onTriggerClick($event)\"></button>\n        <span class=\"tk-color-picker__input-prefix\" aria-hidden=\"true\">#</span>\n        <input\n          pInputText\n          [id]=\"fieldId\"\n          [value]=\"displayHexNoHash()\"\n          [disabled]=\"isDisabled()\"\n          [class.ng-invalid]=\"triggerControl.invalid\"\n          [class.ng-dirty]=\"triggerControl.dirty\"\n          [class.ng-touched]=\"triggerControl.touched\"\n          [attr.aria-describedby]=\"!isValid() ? errorId : null\"\n          [attr.aria-invalid]=\"!isValid()\"\n          autocomplete=\"off\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (blur)=\"onHexBlur()\" />\n      </div>\n      <div class=\"tk-color-picker__input-bottom\">\n        @if (!isValid()) {\n          <p-message\n            severity=\"error\"\n            size=\"small\"\n            variant=\"simple\"\n            [id]=\"errorId\"\n            >{{ errorText() }}</p-message\n          >\n        } @else if (hint()) {\n          <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n            hint()\n          }}</p-message>\n        }\n      </div>\n    </div>\n  }\n\n  @if (variant() === 'swatch') {\n    @if (!isValid()) {\n      <span\n        [id]=\"errorId\"\n        class=\"tk-color-picker__error\"\n        role=\"alert\"\n        aria-live=\"polite\">\n        {{ errorText() }}\n      </span>\n    } @else if (hint()) {\n      <span class=\"tk-color-picker__hint\">{{ hint() }}</span>\n    }\n  }\n</div>\n\n<p-popover\n  #op\n  [styleClass]=\"\n    'tk-color-picker-popover' +\n    (variant() === 'input' ? ' tk-color-picker-popover--input' : '')\n  \"\n  position=\"bottom\"\n  appendTo=\"body\"\n  (onShow)=\"onPopoverShow()\"\n  (onHide)=\"onPopoverHide()\">\n  <div\n    class=\"tk-color-picker__panel\"\n    role=\"group\"\n    [attr.aria-label]=\"t().dialogLabel\"\n    tabindex=\"-1\"\n    autofocus\n    (keydown.enter)=\"onPanelEnter($event)\">\n    @if (resolvedSections().swatches && presetColors().length) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().swatchesLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"presetColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().swatchesLabel\"\n          (picked)=\"onSwatchPick($event)\" />\n      </section>\n    }\n\n    @if (resolvedSections().customColors) {\n      <section class=\"tk-color-picker__section\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().customColorsLabel\n        }}</span>\n        <tk-color-picker-swatch-grid\n          [colors]=\"customColors()\"\n          [selected]=\"draftHex()\"\n          [ariaLabel]=\"t().customColorsLabel\"\n          (picked)=\"onSwatchPick($event)\">\n          @if (canAddCustom()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__add-custom\"\n              [attr.aria-label]=\"t().addCustomColorLabel\"\n              (click)=\"addCustomColor()\">\n              <tk-icon icon=\"plus\" styleIcon=\"regular\" size=\"xs\"></tk-icon>\n            </button>\n          }\n          @if (isCustomColorSelected()) {\n            <button\n              type=\"button\"\n              class=\"tk-color-picker__remove-custom\"\n              [attr.aria-label]=\"t().removeCustomColorLabel\"\n              (click)=\"removeCustomColor()\">\n              \u2212\n            </button>\n          }\n        </tk-color-picker-swatch-grid>\n      </section>\n    }\n\n    @if (\n      resolvedSections().customColors &&\n      (resolvedSections().spectrum ||\n        resolvedSections().hue ||\n        resolvedSections().hex)\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().spectrum) {\n      <tk-color-picker-spectrum\n        [hue]=\"hue()\"\n        [saturation]=\"saturation()\"\n        [brightness]=\"brightness()\"\n        [color]=\"swatchColor() ?? ''\"\n        [ariaLabel]=\"t().spectrumLabel\"\n        (changed)=\"onSpectrumChange($event)\" />\n    }\n\n    @if (resolvedSections().hue) {\n      <input\n        class=\"tk-color-picker__hue\"\n        type=\"range\"\n        min=\"0\"\n        max=\"360\"\n        [value]=\"hue()\"\n        [attr.aria-label]=\"t().hueLabel\"\n        (input)=\"onHueChange($event)\" />\n    }\n\n    @if (\n      (resolvedSections().spectrum || resolvedSections().hue) &&\n      resolvedSections().hex\n    ) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (resolvedSections().hex) {\n      <section class=\"tk-color-picker__section tk-color-picker__hex-row\">\n        <span\n          class=\"tk-color-picker__swatch tk-color-picker__swatch--large\"\n          [class.tk-color-picker__swatch--fallback]=\"!swatchColor()\"\n          [style.background-color]=\"swatchColor()\"\n          aria-hidden=\"true\"></span>\n        <tk-input-text\n          #panelHexInput\n          class=\"tk-color-picker__panel-hex\"\n          [class.tk-color-picker__trigger-input--invalid]=\"!isValid()\"\n          [label]=\"t().hexLabel\"\n          [id]=\"panelFieldId\"\n          [value]=\"displayHexNoHash()\"\n          prefixText=\"#\"\n          (input)=\"onHexNativeInput($event)\"\n          (keydown)=\"onHexKeydown($event)\"\n          (paste)=\"onHexPaste($event)\"\n          (focusout)=\"onHexBlur()\" />\n        @if (showEyedropper()) {\n          <tk-button\n            class=\"tk-color-picker__eyedropper\"\n            tabindex=\"-1\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            icon=\"eye-dropper\"\n            styleIcon=\"regular\"\n            [attr.aria-label]=\"t().eyedropperLabel\"\n            (clicked)=\"openEyeDropper()\">\n          </tk-button>\n        }\n      </section>\n    }\n\n    @if (resolvedSections().hex && showContrast()) {\n      <div class=\"tk-color-picker__divider\" role=\"separator\"></div>\n    }\n\n    @if (showContrast()) {\n      <section class=\"tk-color-picker__section tk-color-picker__contrast\">\n        <span class=\"tk-color-picker__section-label\">{{\n          t().contrastLabel\n        }}</span>\n        <div class=\"tk-color-picker__contrast-row\">\n          <span\n            class=\"tk-color-picker__contrast-pill\"\n            [style.background-color]=\"draftHex()\"\n            [attr.aria-label]=\"t().contrastSampleLabel\">\n            <span\n              class=\"tk-color-picker__contrast-sample\"\n              [style.color]=\"contrastTextColor()\">\n              {{ t().contrastSampleText }}\n            </span>\n          </span>\n          <div class=\"tk-color-picker__contrast-info\">\n            <span class=\"tk-color-picker__contrast-label\">{{\n              t().contrastSampleLabel\n            }}</span>\n            <span class=\"tk-color-picker__contrast-ratio\"\n              >{{ contrastResult()!.ratio }}:1</span\n            >\n          </div>\n          @switch (contrastResult()!.level) {\n            @case ('AAA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aaa\"\n                >AAA</span\n              >\n            }\n            @case ('AA') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--aa\"\n                >AA</span\n              >\n            }\n            @case ('fail') {\n              <span\n                class=\"tk-color-picker__contrast-badge tk-color-picker__contrast-badge--fail\">\n                {{ t().contrastLowLabel }}\n              </span>\n            }\n          }\n        </div>\n      </section>\n    }\n  </div>\n</p-popover>\n", styles: [":host{display:inline-block;font-family:var(--tk-font-family, sans-serif)}.tk-color-picker{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__label{font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-950, #191a1b);margin-bottom:.25rem}.tk-color-picker__trigger{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);border-radius:var(--tk-borderRadius-s, .25rem);background:var(--tk-color-background-default, #ffffff);cursor:pointer;transition:border-color .14s ease,background .14s ease}.tk-color-picker__trigger:hover{border-color:var(--tk-color-border-default, #cecdcd)}.tk-color-picker__trigger:focus-within{border-color:var(--tk-color-border-focus, #16006f)}.tk-color-picker__trigger--swatch{appearance:none;width:fit-content;font:inherit;-webkit-user-select:none;user-select:none}.tk-color-picker__trigger--swatch>*{pointer-events:none}.tk-color-picker__trigger--swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__trigger--swatch:disabled{cursor:not-allowed}.tk-color-picker__trigger-input{display:flex;flex-direction:column;position:relative}.tk-color-picker__input-label{position:absolute;left:var(--tk-spacing-base-300, 3rem);top:.75rem;font-size:var(--tk-font-size-paragraph-m, 1rem);font-weight:var(--tk-font-weight-400, 400);color:var(--tk-color-base-surface-500, #8a8a8b);background:var(--tk-color-background-default, #ffffff);padding:0 .25rem;transition:top .2s ease,left .2s ease,color .2s ease;pointer-events:none;z-index:1;max-width:calc(100% - 4rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tk-color-picker--disabled .tk-color-picker__input-label{display:none}.tk-color-picker--invalid .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap{position:relative;display:flex;align-items:center;width:100%}.tk-color-picker__input-wrap input.p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-base-300, 3rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent;outline:none}.tk-color-picker__input-wrap input.p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-dirty,.tk-color-picker__input-wrap input.p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}.tk-color-picker__input-wrap input.p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}.tk-color-picker__input-swatch{appearance:none;padding:0;position:absolute;left:var(--tk-spacing-base-25, .25rem);top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0;cursor:pointer;z-index:1;-webkit-user-select:none;user-select:none;background:transparent}.tk-color-picker__input-swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__input-swatch:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__input-swatch:disabled{cursor:not-allowed;opacity:.5}.tk-color-picker__input-prefix{position:absolute;left:calc(var(--tk-spacing-base-25, .25rem) + 1.25rem + .25rem);top:50%;transform:translateY(-50%);color:var(--tk-color-text-muted, #8a8a8b);font-size:var(--tk-font-size-paragraph-s, .875rem);line-height:1;pointer-events:none;z-index:1}.tk-color-picker__input-bottom{display:flex;margin-top:.25rem;min-height:1.25rem}.tk-color-picker--open .tk-color-picker__trigger{border-color:var(--tk-color-border-strong, #424243)}.tk-color-picker--invalid .tk-color-picker__trigger{border-color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker--disabled .tk-color-picker__trigger{opacity:.55;cursor:not-allowed;pointer-events:none;background:var(--tk-color-background-soft, #f2f1f1)}.tk-color-picker__swatch{flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:var(--tk-borderRadius-xs, .125rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4)}.tk-color-picker__swatch--fallback{background:var(--tk-color-base-surface-400, #cecdcd)}.tk-color-picker__swatch--large{width:2rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem)}.tk-color-picker__chevron{transition:transform .2s ease}.tk-color-picker__chevron--open{transform:rotate(180deg)}.tk-color-picker__error{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-feedback-danger-default, #ff6640)}.tk-color-picker__hint{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__panel{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-m, .75rem);width:16rem;padding:var(--tk-spacing-padding-m, 1rem);box-sizing:border-box}.tk-color-picker__panel:focus,.tk-color-picker__panel:focus-visible{outline:none}.tk-color-picker__section{display:flex;flex-direction:column;gap:var(--tk-spacing-gap-xs, .25rem)}.tk-color-picker__section-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-subtle, #5d5d5e)}.tk-color-picker__add-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__add-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__add-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__remove-custom{appearance:none;padding:0;width:100%;aspect-ratio:1;border:1px dashed var(--tk-color-border-default, #cecdcd);border-radius:var(--tk-borderRadius-xs, .125rem);background:var(--tk-color-background-default, #ffffff);color:var(--tk-color-text-muted, #8a8a8b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .12s ease,color .12s ease}.tk-color-picker__remove-custom:hover{border-color:var(--tk-color-accent-default, #6ad0bc);color:var(--tk-color-accent-default, #6ad0bc)}.tk-color-picker__remove-custom:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:1px}.tk-color-picker__hue{appearance:none;width:100%;height:.625rem;border-radius:var(--tk-borderRadius-full, 9999px);outline:none;cursor:pointer;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tk-color-picker__hue::-webkit-slider-thumb{appearance:none;width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:var(--tk-borderRadius-full, 50%);background:var(--tk-color-background-default, #ffffff);border:1px solid var(--tk-color-border-default, #cecdcd);cursor:grab}.tk-color-picker__hue:focus-visible{outline:2px solid var(--tk-color-border-focus, #16006f);outline-offset:2px}.tk-color-picker__divider{width:100%;height:1px;background:var(--tk-color-border-subtle, #e4e4e4);flex-shrink:0}.tk-color-picker__hex-row{display:flex;flex-direction:row;align-items:center;gap:var(--tk-spacing-gap-s, .5rem);margin-top:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__hex-row>span{flex-shrink:0}.tk-color-picker__hex-row tk-button{flex-shrink:0;min-width:2.5rem;min-height:2.5rem}.tk-color-picker__eyedropper{margin-top:-12px}.tk-color-picker__eyedropper:focus,.tk-color-picker__eyedropper:focus-visible{outline:none;box-shadow:none}.tk-color-picker__panel-hex{flex:1;min-width:0}.tk-color-picker__contrast-row{display:flex;align-items:center;gap:var(--tk-spacing-gap-s, .5rem)}.tk-color-picker__contrast-pill{flex-shrink:0;width:2.5rem;height:2rem;border-radius:var(--tk-borderRadius-s, .25rem);border:1px solid var(--tk-color-border-subtle, #e4e4e4);display:inline-flex;align-items:center;justify-content:center}.tk-color-picker__contrast-sample{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-600, 600);line-height:1}.tk-color-picker__contrast-info{flex:1;min-width:0;display:flex;flex-direction:column}.tk-color-picker__contrast-label{font-size:var(--tk-font-size-legal-m, .75rem);font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-text-default, #222324)}.tk-color-picker__contrast-ratio{font-size:var(--tk-font-size-legal-s, .625rem);color:var(--tk-color-text-muted, #8a8a8b)}.tk-color-picker__contrast-badge{flex-shrink:0;font-size:var(--tk-font-size-legal-s, .625rem);font-weight:var(--tk-font-weight-600, 600);padding:var(--tk-spacing-padding-xs, .25rem) var(--tk-spacing-padding-s, .5rem);border-radius:var(--tk-borderRadius-full, 9999px)}.tk-color-picker__contrast-badge--aaa,.tk-color-picker__contrast-badge--aa{background:var(--tk-color-feedback-success-muted, #d1fadf);color:var(--tk-color-feedback-success-strong, #114a3f)}.tk-color-picker__contrast-badge--fail{background:var(--tk-color-feedback-danger-muted, #feede8);color:var(--tk-color-feedback-danger-strong, #7f1d1d)}::ng-deep .tk-color-picker-popover{margin:0!important}::ng-deep .tk-color-picker-popover:before,::ng-deep .tk-color-picker-popover:after{display:none!important}::ng-deep .tk-color-picker-popover--input{margin-top:-22px!important}:host ::ng-deep .tk-color-picker__trigger-input--invalid input.p-inputtext{border-color:var(--tk-color-feedback-danger-default, #ff6640)}:host ::ng-deep .tk-color-picker__trigger-input:has(input:focus) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-primary-600, #140065);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.p-filled) .tk-color-picker__input-label{top:-.75rem;left:0;font-size:var(--tk-font-size-legal-m, .75rem);color:var(--tk-color-base-surface-950, #191a1b);max-width:none;overflow:visible;text-overflow:clip}:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-dirty) .tk-color-picker__input-label,:host ::ng-deep .tk-color-picker__trigger-input:has(input.ng-invalid.ng-touched) .tk-color-picker__input-label{color:var(--tk-color-base-red-700, #cf2604)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], presetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColors", required: false }] }], contrastColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contrastColor", required: false }] }], maxCustomColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCustomColors", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], customColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColors", required: false }] }, { type: i0.Output, args: ["customColorsChange"] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], textColorChange: [{ type: i0.Output, args: ["textColorChange"] }], validChange: [{ type: i0.Output, args: ["validChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], popover: [{ type: i0.ViewChild, args: ['op', { isSignal: true }] }], swatchBtnRef: [{ type: i0.ViewChild, args: ['swatchBtn', { ...{ read: ElementRef }, isSignal: true }] }], inputTriggerRef: [{ type: i0.ViewChild, args: ['inputTrigger', { ...{ read: ElementRef }, isSignal: true }] }], panelHexInput: [{ type: i0.ViewChild, args: ['panelHexInput', { ...{ read: ElementRef }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorPickerComponent };
+//# sourceMappingURL=tekus-design-system-components-color-picker.mjs.map