@weeehaoooz/talos-ui 0.1.0

package/fesm2022/weeehaoooz-talos-ui-form-color-picker.mjs

@@ -0,0 +1,761 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, computed, signal, effect, forwardRef, ViewChild, Component, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { hsvToRgb, rgbToHsl, rgbToHex, isLightColor, formatColor, parseColor, rgbToHsv, clamp, round, hexToRgb, hslToRgb } from '@weeehaoooz/talos-ui/core';
+
+const DEFAULT_COLOR_PRESETS = [
+    {
+        label: 'Talos Brand',
+        colors: [
+            '#3b82f6', // Blue
+            '#6366f1', // Indigo
+            '#8b5cf6', // Violet
+            '#ec4899', // Pink
+            '#f43f5e', // Rose
+            '#ef4444', // Red
+            '#f97316', // Orange
+            '#eab308', // Yellow
+            '#10b981', // Emerald
+            '#06b6d4', // Cyan
+            '#64748b', // Slate
+            '#0f172a' // Dark
+        ]
+    },
+    {
+        label: 'Pastel & Muted',
+        colors: [
+            '#93c5fd', // Light Blue
+            '#a5b4fc', // Light Indigo
+            '#c4b5fd', // Light Violet
+            '#f9a8d4', // Light Pink
+            '#fda4af', // Light Rose
+            '#fca5a5', // Light Red
+            '#fdba74', // Light Orange
+            '#fde047', // Light Yellow
+            '#6ee7b7', // Light Emerald
+            '#67e8f9', // Light Cyan
+            '#cbd5e1', // Light Slate
+            '#ffffff' // Pure White
+        ]
+    }
+];
+
+let uniqueColorPickerIdCounter = 0;
+class TalosColorPickerComponent {
+    elementRef = inject((ElementRef));
+    // Signal Inputs
+    value = input('#3b82f6', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    format = input('hex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    showAlpha = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAlpha" }] : /* istanbul ignore next */ []));
+    presets = input(DEFAULT_COLOR_PRESETS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    showPresets = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPresets" }] : /* istanbul ignore next */ []));
+    showRecent = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showRecent" }] : /* istanbul ignore next */ []));
+    showEyeDropper = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEyeDropper" }] : /* istanbul ignore next */ []));
+    showInputs = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showInputs" }] : /* istanbul ignore next */ []));
+    showFormatSwitcher = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFormatSwitcher" }] : /* istanbul ignore next */ []));
+    inline = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select color', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    clearable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    id = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    // Signal Outputs
+    colorChange = output();
+    colorDetailsChange = output();
+    formatChange = output();
+    opened = output();
+    closed = output();
+    cleared = output();
+    // View Children
+    satValCanvas;
+    hueTrack;
+    alphaTrack;
+    triggerBtn;
+    triggerInput;
+    // Component IDs
+    autoId = `talos-color-picker-${uniqueColorPickerIdCounter++}`;
+    componentId = computed(() => this.id() || this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
+    inputId = computed(() => `${this.componentId()}-input`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor internal state
+    formControlDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formControlDisabled" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.formControlDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    // Reactive State
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    isInputFocused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInputFocused" }] : /* istanbul ignore next */ []));
+    manualInputValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "manualInputValue" }] : /* istanbul ignore next */ []));
+    currentHsva = signal({ h: 217, s: 76, v: 96, a: 1 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentHsva" }] : /* istanbul ignore next */ []));
+    currentFormat = signal('hex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentFormat" }] : /* istanbul ignore next */ []));
+    recentColors = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "recentColors" }] : /* istanbul ignore next */ []));
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    // Input editing temporary state
+    inputHex = signal('#3b82f6', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputHex" }] : /* istanbul ignore next */ []));
+    inputR = signal(59, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputR" }] : /* istanbul ignore next */ []));
+    inputG = signal(130, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputG" }] : /* istanbul ignore next */ []));
+    inputB = signal(246, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputB" }] : /* istanbul ignore next */ []));
+    inputA = signal(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputA" }] : /* istanbul ignore next */ []));
+    inputH = signal(217, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputH" }] : /* istanbul ignore next */ []));
+    inputS = signal(91, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputS" }] : /* istanbul ignore next */ []));
+    inputL = signal(60, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputL" }] : /* istanbul ignore next */ []));
+    // Dragging interaction state
+    isDraggingSatVal = false;
+    isDraggingHue = false;
+    isDraggingAlpha = false;
+    // Overlay positions
+    overlayPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 6
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -6
+        },
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: 6
+        },
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -6
+        }
+    ];
+    // Derived Color representations
+    currentRgba = computed(() => hsvToRgb(this.currentHsva()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentRgba" }] : /* istanbul ignore next */ []));
+    currentHsla = computed(() => rgbToHsl(this.currentRgba()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentHsla" }] : /* istanbul ignore next */ []));
+    currentHex = computed(() => rgbToHex(this.currentRgba(), this.showAlpha()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentHex" }] : /* istanbul ignore next */ []));
+    pureHueHex = computed(() => rgbToHex(hsvToRgb({ h: this.currentHsva().h, s: 100, v: 100, a: 1 }), false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pureHueHex" }] : /* istanbul ignore next */ []));
+    isLight = computed(() => isLightColor(this.currentRgba()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLight" }] : /* istanbul ignore next */ []));
+    isFloated = computed(() => !!this.formattedColor() || this.isOpen() || this.isInputFocused(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
+    formattedColor = computed(() => {
+        return formatColor(this.currentRgba(), this.currentFormat(), this.showAlpha());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedColor" }] : /* istanbul ignore next */ []));
+    rgbaString = computed(() => {
+        const rgba = this.currentRgba();
+        return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rgbaString" }] : /* istanbul ignore next */ []));
+    hasEyeDropper = computed(() => {
+        return typeof window !== 'undefined' && 'EyeDropper' in window;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasEyeDropper" }] : /* istanbul ignore next */ []));
+    // Normalized preset palettes
+    normalizedPresets = computed(() => {
+        const raw = this.presets();
+        if (!raw || raw.length === 0)
+            return [];
+        const groups = [];
+        let standardGroup = [];
+        for (const item of raw) {
+            if (typeof item === 'string') {
+                standardGroup.push(item);
+            }
+            else if (item && typeof item === 'object' && Array.isArray(item.colors)) {
+                if (standardGroup.length > 0) {
+                    groups.push({ label: 'Palette', colors: standardGroup });
+                    standardGroup = [];
+                }
+                groups.push(item);
+            }
+        }
+        if (standardGroup.length > 0) {
+            groups.push({ label: 'Palette', colors: standardGroup });
+        }
+        return groups;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedPresets" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor Callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Sync initial format
+        effect(() => {
+            this.currentFormat.set(this.format());
+        });
+        // Sync input value if provided
+        effect(() => {
+            const val = this.value();
+            if (val) {
+                this.setColorFromExternal(val, false);
+            }
+        });
+        // Keep editing input fields in sync with current color
+        effect(() => {
+            const rgba = this.currentRgba();
+            const hsla = this.currentHsla();
+            const hex = this.currentHex();
+            this.inputHex.set(hex);
+            this.inputR.set(rgba.r);
+            this.inputG.set(rgba.g);
+            this.inputB.set(rgba.b);
+            this.inputA.set(Math.round(rgba.a * 100));
+            this.inputH.set(Math.round(hsla.h));
+            this.inputS.set(Math.round(hsla.s));
+            this.inputL.set(Math.round(hsla.l));
+        });
+    }
+    // --- ControlValueAccessor Methods ---
+    writeValue(value) {
+        if (value) {
+            this.setColorFromExternal(value, false);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formControlDisabled.set(isDisabled);
+    }
+    // --- External and Internal Color Updates ---
+    setColorFromExternal(colorStr, emit = true) {
+        const parsed = parseColor(colorStr);
+        if (!parsed)
+            return;
+        const hsva = rgbToHsv(parsed);
+        this.currentHsva.set(hsva);
+        if (emit) {
+            this.notifyColorChange();
+        }
+    }
+    updateHsva(newHsva, emit = true) {
+        this.currentHsva.update(current => {
+            const updated = {
+                h: newHsva.h !== undefined ? (newHsva.h % 360 + 360) % 360 : current.h,
+                s: newHsva.s !== undefined ? clamp(newHsva.s, 0, 100) : current.s,
+                v: newHsva.v !== undefined ? clamp(newHsva.v, 0, 100) : current.v,
+                a: newHsva.a !== undefined ? clamp(newHsva.a, 0, 1) : current.a
+            };
+            return updated;
+        });
+        if (emit) {
+            this.notifyColorChange();
+        }
+    }
+    notifyColorChange() {
+        const formatted = this.formattedColor();
+        const hex = this.currentHex();
+        const rgba = this.currentRgba();
+        const hsla = this.currentHsla();
+        const hsva = this.currentHsva();
+        this.onChange(formatted);
+        this.colorChange.emit(formatted);
+        this.colorDetailsChange.emit({
+            value: formatted,
+            hex,
+            rgba,
+            hsla,
+            hsva
+        });
+    }
+    // --- Dropdown Management ---
+    toggleDropdown(event) {
+        if (event)
+            event.stopPropagation();
+        if (this.effectiveDisabled() || this.readonly() || this.inline())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.effectiveDisabled() || this.readonly() || this.isOpen() || this.inline())
+            return;
+        this.isOpen.set(true);
+        this.opened.emit();
+    }
+    close() {
+        if (!this.isOpen() || this.inline())
+            return;
+        this.isOpen.set(false);
+        this.onTouched();
+        this.recordRecentColor(this.formattedColor());
+        this.closed.emit();
+    }
+    onDocumentClick(event) {
+        if (this.inline() || !this.isOpen())
+            return;
+        const target = event.target;
+        if (!this.elementRef.nativeElement.contains(target)) {
+            this.close();
+        }
+    }
+    clear(event) {
+        if (event)
+            event.stopPropagation();
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        this.manualInputValue.set('');
+        this.currentHsva.set({ h: 217, s: 76, v: 96, a: 1 });
+        this.onChange('');
+        this.cleared.emit();
+        this.colorChange.emit('');
+    }
+    // --- Trigger Input Handlers ---
+    onTriggerFocus() {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        this.isInputFocused.set(true);
+        this.manualInputValue.set(this.formattedColor());
+    }
+    onTriggerBlur(event) {
+        this.isInputFocused.set(false);
+        const target = event.target;
+        const val = target.value.trim();
+        if (val) {
+            const parsed = parseColor(val);
+            if (parsed) {
+                const hsva = rgbToHsv(parsed);
+                this.currentHsva.set(hsva);
+                this.notifyColorChange();
+            }
+            else {
+                target.value = this.formattedColor();
+            }
+        }
+        else if (this.clearable()) {
+            this.clear();
+        }
+        else {
+            target.value = this.formattedColor();
+        }
+        this.onTouched();
+    }
+    onTriggerInput(event) {
+        const target = event.target;
+        const val = target.value;
+        this.manualInputValue.set(val);
+        const trimmed = val.trim();
+        if (trimmed) {
+            const parsed = parseColor(trimmed);
+            if (parsed) {
+                const hsva = rgbToHsv(parsed);
+                this.currentHsva.set(hsva);
+                this.notifyColorChange();
+            }
+        }
+    }
+    onTriggerEnter(event) {
+        const target = event.target;
+        target.blur();
+    }
+    // --- Saturation & Value 2D Canvas Handlers ---
+    onSatValMouseDown(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        event.preventDefault();
+        this.isDraggingSatVal = true;
+        this.updateSatValFromCoord(event.clientX, event.clientY);
+        const onMouseMove = (moveEvent) => {
+            if (this.isDraggingSatVal) {
+                this.updateSatValFromCoord(moveEvent.clientX, moveEvent.clientY);
+            }
+        };
+        const onMouseUp = () => {
+            this.isDraggingSatVal = false;
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }
+    onSatValTouchStart(event) {
+        if (this.effectiveDisabled() || this.readonly() || !event.touches[0])
+            return;
+        this.isDraggingSatVal = true;
+        this.updateSatValFromCoord(event.touches[0].clientX, event.touches[0].clientY);
+        const onTouchMove = (moveEvent) => {
+            if (this.isDraggingSatVal && moveEvent.touches[0]) {
+                this.updateSatValFromCoord(moveEvent.touches[0].clientX, moveEvent.touches[0].clientY);
+            }
+        };
+        const onTouchEnd = () => {
+            this.isDraggingSatVal = false;
+            window.removeEventListener('touchmove', onTouchMove);
+            window.removeEventListener('touchend', onTouchEnd);
+        };
+        window.addEventListener('touchmove', onTouchMove, { passive: true });
+        window.addEventListener('touchend', onTouchEnd);
+    }
+    updateSatValFromCoord(clientX, clientY) {
+        const el = this.satValCanvas?.nativeElement;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const x = clamp(clientX - rect.left, 0, rect.width);
+        const y = clamp(clientY - rect.top, 0, rect.height);
+        const s = round((x / rect.width) * 100, 1);
+        const v = round((1 - y / rect.height) * 100, 1);
+        this.updateHsva({ s, v });
+    }
+    onSatValKeyDown(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        const step = event.shiftKey ? 10 : 1;
+        let s = this.currentHsva().s;
+        let v = this.currentHsva().v;
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowLeft':
+                s = clamp(s - step, 0, 100);
+                handled = true;
+                break;
+            case 'ArrowRight':
+                s = clamp(s + step, 0, 100);
+                handled = true;
+                break;
+            case 'ArrowUp':
+                v = clamp(v + step, 0, 100);
+                handled = true;
+                break;
+            case 'ArrowDown':
+                v = clamp(v - step, 0, 100);
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            this.updateHsva({ s, v });
+        }
+    }
+    // --- Hue Slider Handlers ---
+    onHueMouseDown(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        event.preventDefault();
+        this.isDraggingHue = true;
+        this.updateHueFromCoord(event.clientX);
+        const onMouseMove = (moveEvent) => {
+            if (this.isDraggingHue) {
+                this.updateHueFromCoord(moveEvent.clientX);
+            }
+        };
+        const onMouseUp = () => {
+            this.isDraggingHue = false;
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }
+    onHueTouchStart(event) {
+        if (this.effectiveDisabled() || this.readonly() || !event.touches[0])
+            return;
+        this.isDraggingHue = true;
+        this.updateHueFromCoord(event.touches[0].clientX);
+        const onTouchMove = (moveEvent) => {
+            if (this.isDraggingHue && moveEvent.touches[0]) {
+                this.updateHueFromCoord(moveEvent.touches[0].clientX);
+            }
+        };
+        const onTouchEnd = () => {
+            this.isDraggingHue = false;
+            window.removeEventListener('touchmove', onTouchMove);
+            window.removeEventListener('touchend', onTouchEnd);
+        };
+        window.addEventListener('touchmove', onTouchMove, { passive: true });
+        window.addEventListener('touchend', onTouchEnd);
+    }
+    updateHueFromCoord(clientX) {
+        const el = this.hueTrack?.nativeElement;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const x = clamp(clientX - rect.left, 0, rect.width);
+        const h = round((x / rect.width) * 360, 1);
+        this.updateHsva({ h });
+    }
+    onHueKeyDown(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        const step = event.shiftKey ? 10 : 1;
+        let h = this.currentHsva().h;
+        let handled = false;
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            h = (h - step % 360 + 360) % 360;
+            handled = true;
+        }
+        else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            h = (h + step) % 360;
+            handled = true;
+        }
+        if (handled) {
+            event.preventDefault();
+            this.updateHsva({ h });
+        }
+    }
+    // --- Alpha Slider Handlers ---
+    onAlphaMouseDown(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        event.preventDefault();
+        this.isDraggingAlpha = true;
+        this.updateAlphaFromCoord(event.clientX);
+        const onMouseMove = (moveEvent) => {
+            if (this.isDraggingAlpha) {
+                this.updateAlphaFromCoord(moveEvent.clientX);
+            }
+        };
+        const onMouseUp = () => {
+            this.isDraggingAlpha = false;
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }
+    onAlphaTouchStart(event) {
+        if (this.effectiveDisabled() || this.readonly() || !event.touches[0])
+            return;
+        this.isDraggingAlpha = true;
+        this.updateAlphaFromCoord(event.touches[0].clientX);
+        const onTouchMove = (moveEvent) => {
+            if (this.isDraggingAlpha && moveEvent.touches[0]) {
+                this.updateAlphaFromCoord(moveEvent.touches[0].clientX);
+            }
+        };
+        const onTouchEnd = () => {
+            this.isDraggingAlpha = false;
+            window.removeEventListener('touchmove', onTouchMove);
+            window.removeEventListener('touchend', onTouchEnd);
+        };
+        window.addEventListener('touchmove', onTouchMove, { passive: true });
+        window.addEventListener('touchend', onTouchEnd);
+    }
+    updateAlphaFromCoord(clientX) {
+        const el = this.alphaTrack?.nativeElement;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const x = clamp(clientX - rect.left, 0, rect.width);
+        const a = round(x / rect.width, 2);
+        this.updateHsva({ a });
+    }
+    onAlphaKeyDown(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        const step = event.shiftKey ? 0.1 : 0.01;
+        let a = this.currentHsva().a;
+        let handled = false;
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            a = clamp(a - step, 0, 1);
+            handled = true;
+        }
+        else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            a = clamp(a + step, 0, 1);
+            handled = true;
+        }
+        if (handled) {
+            event.preventDefault();
+            this.updateHsva({ a });
+        }
+    }
+    // --- EyeDropper Integration ---
+    async pickWithEyeDropper() {
+        if (this.effectiveDisabled() || this.readonly() || !this.hasEyeDropper())
+            return;
+        try {
+            // @ts-expect-error EyeDropper is a modern browser API
+            const eyeDropper = new window.EyeDropper();
+            const result = await eyeDropper.open();
+            if (result && result.sRGBHex) {
+                this.setColorFromExternal(result.sRGBHex);
+            }
+        }
+        catch {
+            // EyeDropper cancelled or dismissed
+        }
+    }
+    // --- Copy to Clipboard ---
+    async copyColor() {
+        if (typeof navigator === 'undefined' || !navigator.clipboard)
+            return;
+        try {
+            await navigator.clipboard.writeText(this.formattedColor());
+            this.copied.set(true);
+            setTimeout(() => {
+                this.copied.set(false);
+            }, 1800);
+        }
+        catch {
+            // Copy failed
+        }
+    }
+    // --- Format Switcher ---
+    switchFormat(format) {
+        this.currentFormat.set(format);
+        this.formatChange.emit(format);
+        this.notifyColorChange();
+    }
+    // --- Direct Inputs ---
+    onHexInputChange(val) {
+        const trimmed = val.trim();
+        if (hexToRgb(trimmed)) {
+            this.setColorFromExternal(trimmed);
+        }
+    }
+    onRgbaInputChange() {
+        const r = clamp(this.inputR() || 0, 0, 255);
+        const g = clamp(this.inputG() || 0, 0, 255);
+        const b = clamp(this.inputB() || 0, 0, 255);
+        const a = clamp((this.inputA() ?? 100) / 100, 0, 1);
+        const hsva = rgbToHsv({ r, g, b, a });
+        this.currentHsva.set(hsva);
+        this.notifyColorChange();
+    }
+    onHslaInputChange() {
+        const h = (this.inputH() || 0) % 360;
+        const s = clamp(this.inputS() || 0, 0, 100);
+        const l = clamp(this.inputL() || 0, 0, 100);
+        const a = clamp((this.inputA() ?? 100) / 100, 0, 1);
+        const rgba = hslToRgb({ h, s, l, a });
+        const hsva = rgbToHsv(rgba);
+        this.currentHsva.set(hsva);
+        this.notifyColorChange();
+    }
+    // --- Swatch Preset Click & Recent Storage ---
+    selectPreset(color) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        this.setColorFromExternal(color);
+    }
+    recordRecentColor(color) {
+        if (!this.showRecent() || !color)
+            return;
+        const currentList = this.recentColors();
+        const filtered = currentList.filter(c => c.toLowerCase() !== color.toLowerCase());
+        this.recentColors.set([color, ...filtered].slice(0, 8));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosColorPickerComponent, isStandalone: true, selector: "talos-color-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showAlpha: { classPropertyName: "showAlpha", publicName: "showAlpha", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, showRecent: { classPropertyName: "showRecent", publicName: "showRecent", isSignal: true, isRequired: false, transformFunction: null }, showEyeDropper: { classPropertyName: "showEyeDropper", publicName: "showEyeDropper", isSignal: true, isRequired: false, transformFunction: null }, showInputs: { classPropertyName: "showInputs", publicName: "showInputs", isSignal: true, isRequired: false, transformFunction: null }, showFormatSwitcher: { classPropertyName: "showFormatSwitcher", publicName: "showFormatSwitcher", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", colorDetailsChange: "colorDetailsChange", formatChange: "formatChange", opened: "opened", closed: "closed", cleared: "cleared" }, host: { properties: { "class.is-open": "isOpen()", "class.is-inline": "inline()", "class.is-disabled": "effectiveDisabled()", "class.is-readonly": "readonly()", "class.has-label": "!!label()", "class.is-floating": "floatingLabel()", "class.is-floated": "isFloated()", "class.color-picker-sm": "size() === \"sm\"", "class.color-picker-md": "size() === \"md\"", "class.color-picker-lg": "size() === \"lg\"" }, classAttribute: "talos-color-picker-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TalosColorPickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "satValCanvas", first: true, predicate: ["satValCanvas"], descendants: true }, { propertyName: "hueTrack", first: true, predicate: ["hueTrack"], descendants: true }, { propertyName: "alphaTrack", first: true, predicate: ["alphaTrack"], descendants: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true }], ngImport: i0, template: "@if (!inline()) {\n<!-- Standard Trigger Button / Popover Mode -->\n<div class=\"talos-color-picker-wrapper\" [class.is-floating]=\"floatingLabel()\">\n  @if (label() && !floatingLabel()) {\n  <label [for]=\"inputId()\" class=\"talos-field-label\">{{ label() }}</label>\n  }\n\n  <div #triggerBtn cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"talos-color-picker-trigger\"\n    [class.is-focused]=\"isOpen()\" [class.is-disabled]=\"effectiveDisabled()\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [attr.role]=\"'button'\" [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"isOpen()\" [attr.aria-label]=\"label() || placeholder()\" (click)=\"toggleDropdown()\"\n    (keydown.enter)=\"toggleDropdown()\" (keydown.space)=\"toggleDropdown()\">\n\n    <!-- Swatch Pill Preview -->\n    <div class=\"swatch-preview-box\" role=\"button\" tabindex=\"-1\" aria-label=\"Open color palette\" (click)=\"toggleDropdown($event)\">\n      <div class=\"swatch-checkerboard\"></div>\n      <div class=\"swatch-fill\" [style.background-color]=\"rgbaString()\"></div>\n    </div>\n\n    <!-- Color Value Input Field -->\n    <input\n      #triggerInput\n      [id]=\"inputId()\"\n      type=\"text\"\n      class=\"color-picker-input\"\n      [value]=\"isInputFocused() ? manualInputValue() : formattedColor()\"\n      [placeholder]=\"floatingLabel() && !isFloated() ? '' : placeholder()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onTriggerInput($event)\"\n      (focus)=\"onTriggerFocus()\"\n      (blur)=\"onTriggerBlur($event)\"\n      (keydown.enter)=\"onTriggerEnter($event)\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    />\n\n    <!-- Clear Button -->\n    @if (clearable() && formattedColor() && !effectiveDisabled() && !readonly()) {\n    <button type=\"button\" class=\"clear-button\" aria-label=\"Clear color\" (click)=\"clear($event)\">\n      <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n      </svg>\n    </button>\n    }\n\n    <!-- Dropdown Chevron Indicator -->\n    <button type=\"button\" class=\"dropdown-chevron-icon\" [class.is-rotated]=\"isOpen()\"\n      aria-label=\"Toggle color palette\" tabindex=\"-1\" (click)=\"toggleDropdown($event)\">\n      <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </button>\n\n    @if (label() && floatingLabel()) {\n    <label [for]=\"inputId()\" class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\">{{ label() }}</label>\n    }\n  </div>\n\n  <!-- CDK Connected Popover Overlay -->\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\" (overlayOutsideClick)=\"close()\" (detach)=\"close()\">\n    <div class=\"talos-color-picker-panel talos-popover-panel\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngTemplateOutlet=\"pickerContentTpl\"></ng-container>\n    </div>\n  </ng-template>\n</div>\n} @else {\n<!-- Inline / Embedded Mode -->\n<div class=\"talos-color-picker-panel talos-inline-panel\">\n  @if (label()) {\n  <div class=\"panel-header-title\">{{ label() }}</div>\n  }\n  <ng-container *ngTemplateOutlet=\"pickerContentTpl\"></ng-container>\n</div>\n}\n\n<!-- Main Color Picker Content Template -->\n<ng-template #pickerContentTpl>\n  <div class=\"picker-inner-container\">\n\n    <!-- 1. Saturation & Value 2D Canvas -->\n    <div #satValCanvas class=\"sat-val-canvas\" [style.background-color]=\"pureHueHex()\" tabindex=\"0\" role=\"slider\"\n      aria-label=\"Color saturation and brightness\"\n      [attr.aria-valuetext]=\"'Saturation ' + currentHsva().s + '%, Brightness ' + currentHsva().v + '%'\"\n      (mousedown)=\"onSatValMouseDown($event)\" (touchstart)=\"onSatValTouchStart($event)\"\n      (keydown)=\"onSatValKeyDown($event)\">\n      <div class=\"sat-gradient-white\"></div>\n      <div class=\"val-gradient-black\"></div>\n\n      <!-- Handle Pin -->\n      <div class=\"sat-val-handle\" [class.is-light-handle]=\"!isLight()\" [style.left.%]=\"currentHsva().s\"\n        [style.top.%]=\"100 - currentHsva().v\" [style.background-color]=\"rgbaString()\">\n      </div>\n    </div>\n\n    <!-- 2. Sliders & Action Bar -->\n    <div class=\"sliders-action-bar\">\n      <!-- Sliders Column -->\n      <div class=\"sliders-column\">\n        <!-- Hue Rainbow Slider Track -->\n        <div #hueTrack class=\"hue-slider-track\" tabindex=\"0\" role=\"slider\" aria-label=\"Hue spectrum\" aria-valuemin=\"0\"\n          aria-valuemax=\"360\" [attr.aria-valuenow]=\"currentHsva().h\" (mousedown)=\"onHueMouseDown($event)\"\n          (touchstart)=\"onHueTouchStart($event)\" (keydown)=\"onHueKeyDown($event)\">\n          <div class=\"slider-thumb\" [style.left.%]=\"(currentHsva().h / 360) * 100\"\n            [style.background-color]=\"pureHueHex()\">\n          </div>\n        </div>\n\n        <!-- Alpha Opacity Slider Track -->\n        @if (showAlpha()) {\n        <div #alphaTrack class=\"alpha-slider-track\" tabindex=\"0\" role=\"slider\" aria-label=\"Color opacity\"\n          aria-valuemin=\"0\" aria-valuemax=\"1\" [attr.aria-valuenow]=\"currentHsva().a\"\n          (mousedown)=\"onAlphaMouseDown($event)\" (touchstart)=\"onAlphaTouchStart($event)\"\n          (keydown)=\"onAlphaKeyDown($event)\">\n          <div class=\"alpha-checkerboard-bg\"></div>\n          <div class=\"alpha-gradient-overlay\"\n            [style.background]=\"'linear-gradient(to right, transparent, ' + pureHueHex() + ')'\">\n          </div>\n          <div class=\"slider-thumb\" [style.left.%]=\"currentHsva().a * 100\" [style.background-color]=\"rgbaString()\">\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Action & Preview Column -->\n      <div class=\"action-preview-column\">\n        <!-- Color Preview Circle -->\n        <div class=\"swatch-circle-preview\" [title]=\"formattedColor()\">\n          <div class=\"swatch-checkerboard\"></div>\n          <div class=\"swatch-fill\" [style.background-color]=\"rgbaString()\"></div>\n        </div>\n\n        <!-- Quick Action Buttons -->\n        <div class=\"quick-actions-row\">\n          @if (showEyeDropper() && hasEyeDropper()) {\n          <button type=\"button\" class=\"icon-action-button\" title=\"Pick color from screen\"\n            aria-label=\"Pick color from screen\" (click)=\"pickWithEyeDropper()\">\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path\n                d=\"m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12\" />\n              <path d=\"m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z\" />\n              <path d=\"m2 22 .414-.414\" />\n            </svg>\n          </button>\n          }\n\n          <button type=\"button\" class=\"icon-action-button\" [class.is-copied]=\"copied()\"\n            [title]=\"copied() ? 'Copied to clipboard!' : 'Copy color string'\" aria-label=\"Copy color string\"\n            (click)=\"copyColor()\">\n            @if (copied()) {\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"copy-success-icon\">\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect>\n              <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path>\n            </svg>\n            }\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- 3. Format Switcher & Channel Inputs -->\n    @if (showInputs()) {\n    <div class=\"inputs-section\">\n      @if (showFormatSwitcher()) {\n      <div class=\"format-tabs-bar\">\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'hex'\"\n          (click)=\"switchFormat('hex')\">\n          HEX\n        </button>\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'rgb'\"\n          (click)=\"switchFormat('rgb')\">\n          RGB\n        </button>\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'hsl'\"\n          (click)=\"switchFormat('hsl')\">\n          HSL\n        </button>\n      </div>\n      }\n\n      <!-- Channel Inputs Grid -->\n      <div class=\"channel-inputs-grid\">\n        @if (currentFormat() === 'hex') {\n        <!-- HEX Input -->\n        <div class=\"input-field-group hex-field\">\n          <input type=\"text\" class=\"channel-input hex-input\" [ngModel]=\"inputHex()\"\n            (ngModelChange)=\"onHexInputChange($event)\" placeholder=\"#3B82F6\" aria-label=\"Hex color value\" />\n          <span class=\"field-caption\">HEX</span>\n        </div>\n        } @else if (currentFormat() === 'rgb') {\n        <!-- RGB Inputs -->\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputR\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Red\" />\n          <span class=\"field-caption\">R</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputG\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Green\" />\n          <span class=\"field-caption\">G</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputB\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Blue\" />\n          <span class=\"field-caption\">B</span>\n        </div>\n        } @else if (currentFormat() === 'hsl') {\n        <!-- HSL Inputs -->\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"360\" class=\"channel-input\" [(ngModel)]=\"inputH\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Hue\" />\n          <span class=\"field-caption\">H</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputS\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Saturation\" />\n          <span class=\"field-caption\">S%</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputL\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Lightness\" />\n          <span class=\"field-caption\">L%</span>\n        </div>\n        }\n\n        <!-- Alpha Input (Common for all non-hex or with alpha) -->\n        @if (showAlpha()) {\n        <div class=\"input-field-group alpha-field\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputA\"\n            (ngModelChange)=\"currentFormat() === 'hsl' ? onHslaInputChange() : onRgbaInputChange()\"\n            aria-label=\"Opacity Percentage\" />\n          <span class=\"field-caption\">A%</span>\n        </div>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- 4. Preset Color Swatches -->\n    @if (showPresets() && normalizedPresets().length > 0) {\n    <div class=\"presets-section\">\n      @for (group of normalizedPresets(); track group.label) {\n      @if (normalizedPresets().length > 1) {\n      <div class=\"preset-group-title\">{{ group.label }}</div>\n      }\n      <div class=\"swatches-grid\">\n        @for (color of group.colors; track color) {\n        <button type=\"button\" class=\"swatch-btn\"\n          [class.is-selected]=\"currentHex().toLowerCase() === color.toLowerCase()\" [style.background-color]=\"color\"\n          [title]=\"color\" [attr.aria-label]=\"'Select preset color ' + color\" (click)=\"selectPreset(color)\">\n          @if (currentHex().toLowerCase() === color.toLowerCase()) {\n          <svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" stroke=\"currentColor\" stroke-width=\"3\" fill=\"none\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"swatch-check-icon\">\n            <polyline points=\"20 6 9 17 4 12\"></polyline>\n          </svg>\n          }\n        </button>\n        }\n      </div>\n      }\n    </div>\n    }\n\n    <!-- 5. Recent Colors -->\n    @if (showRecent() && recentColors().length > 0) {\n    <div class=\"recent-section\">\n      <div class=\"recent-group-title\">Recent Colors</div>\n      <div class=\"swatches-grid recent-grid\">\n        @for (color of recentColors(); track color) {\n        <button type=\"button\" class=\"swatch-btn\"\n          [class.is-selected]=\"currentHex().toLowerCase() === color.toLowerCase()\" [style.background-color]=\"color\"\n          [title]=\"color\" [attr.aria-label]=\"'Select recent color ' + color\" (click)=\"selectPreset(color)\">\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n  </div>\n</ng-template>", styles: [":host{display:inline-block;position:relative;width:100%;max-width:100%;font-family:inherit;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host.color-picker-sm{--talos-control-height: var(--talos-height-sm, 2rem);--tcp-width: 250px;--tcp-canvas-height: 130px;--tcp-font-size: var(--talos-font-size-xs, .75rem)}:host.color-picker-md{--talos-control-height: var(--talos-height-md, 2.25rem);--tcp-width: 280px;--tcp-canvas-height: 150px;--tcp-font-size: var(--talos-font-size-sm, .8125rem)}:host.color-picker-lg{--talos-control-height: var(--talos-height-lg, 2.625rem);--tcp-width: 310px;--tcp-canvas-height: 170px;--tcp-font-size: var(--talos-font-size-md, .875rem)}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--talos-transition, .18s ease)}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-color-picker-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-color-picker-trigger{position:relative;display:flex;align-items:center;gap:.625rem;width:100%;height:var(--talos-control-height, 2.25rem);min-height:var(--talos-control-height, 2.25rem);padding:0 var(--talos-control-padding-x, .625rem);background-color:var(--talos-input-bg, var(--talos-bg-surface, #ffffff));border:1px solid var(--talos-input-border, var(--talos-border-default, #cbd5e1));border-radius:var(--talos-border-radius, var(--talos-radius-md, .375rem));color:var(--talos-input-color, var(--talos-text-primary, #0f172a));font-size:var(--talos-control-font-size, .8125rem);cursor:text;outline:none;-webkit-user-select:none;user-select:none;transition:border-color var(--talos-transition, .18s ease),box-shadow var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.talos-color-picker-trigger:hover:not(.is-disabled){border-color:var(--talos-input-border-hover, var(--talos-border-hover, #94a3b8))}.talos-color-picker-trigger:focus-within,.talos-color-picker-trigger.is-focused,.talos-color-picker-trigger:focus-visible{border-color:var(--talos-input-border-focus, var(--talos-primary, #2563eb));box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .18))}.talos-color-picker-trigger.is-disabled{background-color:var(--talos-input-disabled-bg, var(--talos-bg-subtle, #f1f5f9));border-color:var(--talos-input-disabled-border, var(--talos-border-subtle, #e2e8f0));color:var(--talos-input-disabled-color, var(--talos-text-muted, #94a3b8));cursor:not-allowed;opacity:.65}.swatch-preview-box{position:relative;width:1.1rem;height:1.1rem;min-width:1.1rem;border-radius:var(--talos-radius-xs, .25rem);overflow:hidden;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .15));box-shadow:inset 0 0 2px #0000001a;cursor:pointer;flex-shrink:0;transition:transform .12s ease}.swatch-preview-box:hover{transform:scale(1.08)}.swatch-checkerboard,.alpha-checkerboard-bg{position:absolute;inset:0;background-image:linear-gradient(45deg,var(--talos-border-default, #cbd5e1) 25%,transparent 25%),linear-gradient(-45deg,var(--talos-border-default, #cbd5e1) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--talos-border-default, #cbd5e1) 75%),linear-gradient(-45deg,transparent 75%,var(--talos-border-default, #cbd5e1) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:var(--talos-bg-surface, #ffffff)}.swatch-fill{position:absolute;inset:0;transition:background-color .1s ease}.color-picker-input{flex:1;min-width:0;width:100%;height:100%;background:transparent;border:none;outline:none;padding:0;margin:0;font-family:inherit;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-medium, 500);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--talos-input-color, var(--talos-text-primary, #0f172a));line-height:normal}.color-picker-input::placeholder{color:var(--talos-input-placeholder-color, var(--talos-text-muted, #94a3b8));opacity:1;font-weight:var(--talos-font-weight-normal, 400)}.color-picker-input:disabled{cursor:not-allowed}.clear-button{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;color:var(--talos-text-muted, #94a3b8);border-radius:var(--talos-radius-full, 9999px);cursor:pointer;transition:color var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.clear-button:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.dropdown-chevron-icon{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:transform var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .18s ease)}.dropdown-chevron-icon.is-rotated{transform:rotate(180deg);color:var(--talos-primary, #2563eb)}.dropdown-chevron-icon:hover{color:var(--talos-text-primary, #0f172a)}.talos-floating-label{position:absolute;left:calc(var(--talos-control-padding-x, .625rem) + 1.375rem + .625rem);top:50%;transform:translateY(-50%);font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-medium, 500);color:var(--talos-input-placeholder-color, var(--talos-text-muted, #94a3b8));pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--talos-input-bg, var(--talos-bg-surface, #ffffff));padding:0 .25rem;border-radius:var(--talos-radius-xs, .25rem);line-height:1;z-index:2;transition:transform var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),font-size var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),top var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),left var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1))}.talos-floating-label.is-floated{top:0;left:var(--talos-control-padding-x, .625rem);transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-floated) .talos-floating-label.is-floated,.talos-color-picker-trigger:focus-within .talos-floating-label.is-floated,.talos-color-picker-trigger.is-focused .talos-floating-label.is-floated{color:var(--talos-primary, #2563eb)}.talos-color-picker-panel{width:var(--tcp-width, 280px);max-width:calc(100vw - 2rem);background-color:var(--talos-dropdown-bg, var(--talos-bg-surface, #ffffff));border:1px solid var(--talos-dropdown-border, var(--talos-border-default, #cbd5e1));border-radius:var(--talos-border-radius, var(--talos-radius-lg, .5rem));overflow:hidden;box-sizing:border-box}.talos-color-picker-panel.talos-popover-panel{box-shadow:var(--talos-dropdown-shadow, var(--talos-shadow-dropdown, 0 16px 32px -4px rgba(0, 0, 0, .25)));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:tcp-slide-in var(--talos-transition, .18s cubic-bezier(.16, 1, .3, 1));z-index:1050}.talos-color-picker-panel.talos-inline-panel{box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05))}.talos-color-picker-panel .panel-header-title{padding:.75rem .875rem 0;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a)}.picker-inner-container{display:flex;flex-direction:column;padding:.75rem;gap:.75rem}.sat-val-canvas{position:relative;width:100%;height:var(--tcp-canvas-height, 150px);border-radius:calc(var(--talos-border-radius, var(--talos-radius-md, .375rem)) - 1px);overflow:hidden;cursor:crosshair;outline:none;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:inset 0 0 1px #0000004d}.sat-val-canvas:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb),inset 0 0 1px #0000004d}.sat-gradient-white{position:absolute;inset:0;background:linear-gradient(to right,#ffffff,transparent)}.val-gradient-black{position:absolute;inset:0;background:linear-gradient(to top,#000000,transparent)}.sat-val-handle{position:absolute;width:14px;height:14px;border-radius:var(--talos-radius-full, 9999px);border:2px solid #ffffff;box-shadow:0 0 2px #0009,inset 0 0 1px #0006;transform:translate(-50%,-50%);pointer-events:none;transition:transform .05s ease}.sat-val-handle.is-light-handle{border-color:#0f172a}.sliders-action-bar{display:flex;align-items:center;gap:.625rem}.sliders-column{flex:1;display:flex;flex-direction:column;gap:.5rem}.hue-slider-track,.alpha-slider-track{position:relative;width:100%;height:.75rem;border-radius:var(--talos-radius-full, 9999px);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;touch-action:none}.hue-slider-track:focus-visible,.alpha-slider-track:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb)}.hue-slider-track{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.alpha-slider-track{overflow:hidden}.alpha-slider-track .alpha-gradient-overlay{position:absolute;inset:0;border-radius:var(--talos-radius-full, 9999px)}.slider-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:var(--talos-radius-full, 9999px);border:2px solid #ffffff;box-shadow:0 1px 3px #0006;transform:translate(-50%,-50%);pointer-events:none}.action-preview-column{display:flex;flex-direction:column;align-items:center;gap:.375rem}.swatch-circle-preview{position:relative;width:1.75rem;height:1.75rem;border-radius:var(--talos-radius-full, 9999px);overflow:hidden;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .15));box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05))}.quick-actions-row{display:flex;align-items:center;gap:.25rem}.icon-action-button{display:inline-flex;align-items:center;justify-content:center;width:1.625rem;height:1.625rem;padding:0;background-color:transparent;border:1px solid transparent;border-radius:var(--talos-radius-sm, .25rem);color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:all var(--talos-transition, .18s ease)}.icon-action-button:hover{color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, #f1f5f9);border-color:var(--talos-border-subtle, #e2e8f0)}.icon-action-button.is-copied{color:var(--talos-success, #16a34a)}.icon-action-button .copy-success-icon{animation:tcp-scale-up .2s ease}.inputs-section{display:flex;flex-direction:column;gap:.5rem}.format-tabs-bar{display:flex;align-items:center;background-color:var(--talos-bg-subtle, #f1f5f9);padding:2px;border-radius:var(--talos-radius-md, .375rem);gap:2px;border:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .04))}.format-tab-btn{flex:1;padding:.25rem 0;font-size:var(--talos-font-size-2xs, .6875rem);font-weight:var(--talos-font-weight-semibold, 600);letter-spacing:.03em;background:transparent;border:none;border-radius:var(--talos-radius-xs, .25rem);color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:all var(--talos-transition, .18s ease)}.format-tab-btn.is-active{background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-primary, #0f172a);box-shadow:0 1px 2px #0000001a}.format-tab-btn:hover:not(.is-active){color:var(--talos-text-primary, #0f172a)}.channel-inputs-grid{display:flex;align-items:center;gap:.375rem}.input-field-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:.125rem}.input-field-group.hex-field{flex:2.5}.input-field-group .channel-input{width:100%;height:1.75rem;padding:0 .25rem;font-size:var(--talos-font-size-xs, .75rem);font-weight:var(--talos-font-weight-medium, 500);font-family:inherit;text-align:center;color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, #f1f5f9);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-xs, .25rem);outline:none;transition:border-color var(--talos-transition, .18s ease),box-shadow var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.input-field-group .channel-input::-webkit-inner-spin-button,.input-field-group .channel-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field-group .channel-input{-moz-appearance:textfield}.input-field-group .channel-input:focus{border-color:var(--talos-primary, #2563eb);box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .18));background-color:var(--talos-bg-surface, #ffffff)}.input-field-group .field-caption{font-size:.625rem;font-weight:var(--talos-font-weight-bold, 700);color:var(--talos-text-muted, #94a3b8);text-transform:uppercase}.presets-section,.recent-section{display:flex;flex-direction:column;gap:.375rem;border-top:1px solid var(--talos-border-subtle, #e2e8f0);padding-top:.5rem}.preset-group-title,.recent-group-title{font-size:var(--talos-font-size-2xs, .6875rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-muted, #64748b)}.swatches-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.375rem}.swatch-btn{position:relative;aspect-ratio:1;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .12));border-radius:var(--talos-radius-xs, .25rem);cursor:pointer;outline:none;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .12s ease}.swatch-btn:hover{transform:scale(1.12);z-index:2;box-shadow:0 2px 6px #00000040}.swatch-btn:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb)}.swatch-btn.is-selected{box-shadow:0 0 0 2px var(--talos-bg-surface, #ffffff),0 0 0 4px var(--talos-primary, #3b82f6);z-index:1}.swatch-btn .swatch-check-icon{color:#fff;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.8))}@keyframes tcp-slide-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes tcp-scale-up{0%{transform:scale(.7)}50%{transform:scale(1.2)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-color-picker', imports: [OverlayModule, CdkConnectedOverlay, CdkOverlayOrigin, FormsModule, NgTemplateOutlet], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TalosColorPickerComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        'class': 'talos-color-picker-host',
+                        '[class.is-open]': 'isOpen()',
+                        '[class.is-inline]': 'inline()',
+                        '[class.is-disabled]': 'effectiveDisabled()',
+                        '[class.is-readonly]': 'readonly()',
+                        '[class.has-label]': '!!label()',
+                        '[class.is-floating]': 'floatingLabel()',
+                        '[class.is-floated]': 'isFloated()',
+                        '[class.color-picker-sm]': 'size() === "sm"',
+                        '[class.color-picker-md]': 'size() === "md"',
+                        '[class.color-picker-lg]': 'size() === "lg"'
+                    }, template: "@if (!inline()) {\n<!-- Standard Trigger Button / Popover Mode -->\n<div class=\"talos-color-picker-wrapper\" [class.is-floating]=\"floatingLabel()\">\n  @if (label() && !floatingLabel()) {\n  <label [for]=\"inputId()\" class=\"talos-field-label\">{{ label() }}</label>\n  }\n\n  <div #triggerBtn cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"talos-color-picker-trigger\"\n    [class.is-focused]=\"isOpen()\" [class.is-disabled]=\"effectiveDisabled()\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [attr.role]=\"'button'\" [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-expanded]=\"isOpen()\" [attr.aria-label]=\"label() || placeholder()\" (click)=\"toggleDropdown()\"\n    (keydown.enter)=\"toggleDropdown()\" (keydown.space)=\"toggleDropdown()\">\n\n    <!-- Swatch Pill Preview -->\n    <div class=\"swatch-preview-box\" role=\"button\" tabindex=\"-1\" aria-label=\"Open color palette\" (click)=\"toggleDropdown($event)\">\n      <div class=\"swatch-checkerboard\"></div>\n      <div class=\"swatch-fill\" [style.background-color]=\"rgbaString()\"></div>\n    </div>\n\n    <!-- Color Value Input Field -->\n    <input\n      #triggerInput\n      [id]=\"inputId()\"\n      type=\"text\"\n      class=\"color-picker-input\"\n      [value]=\"isInputFocused() ? manualInputValue() : formattedColor()\"\n      [placeholder]=\"floatingLabel() && !isFloated() ? '' : placeholder()\"\n      [disabled]=\"effectiveDisabled()\"\n      [readonly]=\"readonly()\"\n      (input)=\"onTriggerInput($event)\"\n      (focus)=\"onTriggerFocus()\"\n      (blur)=\"onTriggerBlur($event)\"\n      (keydown.enter)=\"onTriggerEnter($event)\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    />\n\n    <!-- Clear Button -->\n    @if (clearable() && formattedColor() && !effectiveDisabled() && !readonly()) {\n    <button type=\"button\" class=\"clear-button\" aria-label=\"Clear color\" (click)=\"clear($event)\">\n      <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n      </svg>\n    </button>\n    }\n\n    <!-- Dropdown Chevron Indicator -->\n    <button type=\"button\" class=\"dropdown-chevron-icon\" [class.is-rotated]=\"isOpen()\"\n      aria-label=\"Toggle color palette\" tabindex=\"-1\" (click)=\"toggleDropdown($event)\">\n      <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n        stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </button>\n\n    @if (label() && floatingLabel()) {\n    <label [for]=\"inputId()\" class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\">{{ label() }}</label>\n    }\n  </div>\n\n  <!-- CDK Connected Popover Overlay -->\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"origin\" [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\" (overlayOutsideClick)=\"close()\" (detach)=\"close()\">\n    <div class=\"talos-color-picker-panel talos-popover-panel\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngTemplateOutlet=\"pickerContentTpl\"></ng-container>\n    </div>\n  </ng-template>\n</div>\n} @else {\n<!-- Inline / Embedded Mode -->\n<div class=\"talos-color-picker-panel talos-inline-panel\">\n  @if (label()) {\n  <div class=\"panel-header-title\">{{ label() }}</div>\n  }\n  <ng-container *ngTemplateOutlet=\"pickerContentTpl\"></ng-container>\n</div>\n}\n\n<!-- Main Color Picker Content Template -->\n<ng-template #pickerContentTpl>\n  <div class=\"picker-inner-container\">\n\n    <!-- 1. Saturation & Value 2D Canvas -->\n    <div #satValCanvas class=\"sat-val-canvas\" [style.background-color]=\"pureHueHex()\" tabindex=\"0\" role=\"slider\"\n      aria-label=\"Color saturation and brightness\"\n      [attr.aria-valuetext]=\"'Saturation ' + currentHsva().s + '%, Brightness ' + currentHsva().v + '%'\"\n      (mousedown)=\"onSatValMouseDown($event)\" (touchstart)=\"onSatValTouchStart($event)\"\n      (keydown)=\"onSatValKeyDown($event)\">\n      <div class=\"sat-gradient-white\"></div>\n      <div class=\"val-gradient-black\"></div>\n\n      <!-- Handle Pin -->\n      <div class=\"sat-val-handle\" [class.is-light-handle]=\"!isLight()\" [style.left.%]=\"currentHsva().s\"\n        [style.top.%]=\"100 - currentHsva().v\" [style.background-color]=\"rgbaString()\">\n      </div>\n    </div>\n\n    <!-- 2. Sliders & Action Bar -->\n    <div class=\"sliders-action-bar\">\n      <!-- Sliders Column -->\n      <div class=\"sliders-column\">\n        <!-- Hue Rainbow Slider Track -->\n        <div #hueTrack class=\"hue-slider-track\" tabindex=\"0\" role=\"slider\" aria-label=\"Hue spectrum\" aria-valuemin=\"0\"\n          aria-valuemax=\"360\" [attr.aria-valuenow]=\"currentHsva().h\" (mousedown)=\"onHueMouseDown($event)\"\n          (touchstart)=\"onHueTouchStart($event)\" (keydown)=\"onHueKeyDown($event)\">\n          <div class=\"slider-thumb\" [style.left.%]=\"(currentHsva().h / 360) * 100\"\n            [style.background-color]=\"pureHueHex()\">\n          </div>\n        </div>\n\n        <!-- Alpha Opacity Slider Track -->\n        @if (showAlpha()) {\n        <div #alphaTrack class=\"alpha-slider-track\" tabindex=\"0\" role=\"slider\" aria-label=\"Color opacity\"\n          aria-valuemin=\"0\" aria-valuemax=\"1\" [attr.aria-valuenow]=\"currentHsva().a\"\n          (mousedown)=\"onAlphaMouseDown($event)\" (touchstart)=\"onAlphaTouchStart($event)\"\n          (keydown)=\"onAlphaKeyDown($event)\">\n          <div class=\"alpha-checkerboard-bg\"></div>\n          <div class=\"alpha-gradient-overlay\"\n            [style.background]=\"'linear-gradient(to right, transparent, ' + pureHueHex() + ')'\">\n          </div>\n          <div class=\"slider-thumb\" [style.left.%]=\"currentHsva().a * 100\" [style.background-color]=\"rgbaString()\">\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Action & Preview Column -->\n      <div class=\"action-preview-column\">\n        <!-- Color Preview Circle -->\n        <div class=\"swatch-circle-preview\" [title]=\"formattedColor()\">\n          <div class=\"swatch-checkerboard\"></div>\n          <div class=\"swatch-fill\" [style.background-color]=\"rgbaString()\"></div>\n        </div>\n\n        <!-- Quick Action Buttons -->\n        <div class=\"quick-actions-row\">\n          @if (showEyeDropper() && hasEyeDropper()) {\n          <button type=\"button\" class=\"icon-action-button\" title=\"Pick color from screen\"\n            aria-label=\"Pick color from screen\" (click)=\"pickWithEyeDropper()\">\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path\n                d=\"m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12\" />\n              <path d=\"m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z\" />\n              <path d=\"m2 22 .414-.414\" />\n            </svg>\n          </button>\n          }\n\n          <button type=\"button\" class=\"icon-action-button\" [class.is-copied]=\"copied()\"\n            [title]=\"copied() ? 'Copied to clipboard!' : 'Copy color string'\" aria-label=\"Copy color string\"\n            (click)=\"copyColor()\">\n            @if (copied()) {\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"copy-success-icon\">\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect>\n              <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path>\n            </svg>\n            }\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- 3. Format Switcher & Channel Inputs -->\n    @if (showInputs()) {\n    <div class=\"inputs-section\">\n      @if (showFormatSwitcher()) {\n      <div class=\"format-tabs-bar\">\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'hex'\"\n          (click)=\"switchFormat('hex')\">\n          HEX\n        </button>\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'rgb'\"\n          (click)=\"switchFormat('rgb')\">\n          RGB\n        </button>\n        <button type=\"button\" class=\"format-tab-btn\" [class.is-active]=\"currentFormat() === 'hsl'\"\n          (click)=\"switchFormat('hsl')\">\n          HSL\n        </button>\n      </div>\n      }\n\n      <!-- Channel Inputs Grid -->\n      <div class=\"channel-inputs-grid\">\n        @if (currentFormat() === 'hex') {\n        <!-- HEX Input -->\n        <div class=\"input-field-group hex-field\">\n          <input type=\"text\" class=\"channel-input hex-input\" [ngModel]=\"inputHex()\"\n            (ngModelChange)=\"onHexInputChange($event)\" placeholder=\"#3B82F6\" aria-label=\"Hex color value\" />\n          <span class=\"field-caption\">HEX</span>\n        </div>\n        } @else if (currentFormat() === 'rgb') {\n        <!-- RGB Inputs -->\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputR\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Red\" />\n          <span class=\"field-caption\">R</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputG\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Green\" />\n          <span class=\"field-caption\">G</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"255\" class=\"channel-input\" [(ngModel)]=\"inputB\"\n            (ngModelChange)=\"onRgbaInputChange()\" aria-label=\"Blue\" />\n          <span class=\"field-caption\">B</span>\n        </div>\n        } @else if (currentFormat() === 'hsl') {\n        <!-- HSL Inputs -->\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"360\" class=\"channel-input\" [(ngModel)]=\"inputH\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Hue\" />\n          <span class=\"field-caption\">H</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputS\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Saturation\" />\n          <span class=\"field-caption\">S%</span>\n        </div>\n        <div class=\"input-field-group\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputL\"\n            (ngModelChange)=\"onHslaInputChange()\" aria-label=\"Lightness\" />\n          <span class=\"field-caption\">L%</span>\n        </div>\n        }\n\n        <!-- Alpha Input (Common for all non-hex or with alpha) -->\n        @if (showAlpha()) {\n        <div class=\"input-field-group alpha-field\">\n          <input type=\"number\" min=\"0\" max=\"100\" class=\"channel-input\" [(ngModel)]=\"inputA\"\n            (ngModelChange)=\"currentFormat() === 'hsl' ? onHslaInputChange() : onRgbaInputChange()\"\n            aria-label=\"Opacity Percentage\" />\n          <span class=\"field-caption\">A%</span>\n        </div>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- 4. Preset Color Swatches -->\n    @if (showPresets() && normalizedPresets().length > 0) {\n    <div class=\"presets-section\">\n      @for (group of normalizedPresets(); track group.label) {\n      @if (normalizedPresets().length > 1) {\n      <div class=\"preset-group-title\">{{ group.label }}</div>\n      }\n      <div class=\"swatches-grid\">\n        @for (color of group.colors; track color) {\n        <button type=\"button\" class=\"swatch-btn\"\n          [class.is-selected]=\"currentHex().toLowerCase() === color.toLowerCase()\" [style.background-color]=\"color\"\n          [title]=\"color\" [attr.aria-label]=\"'Select preset color ' + color\" (click)=\"selectPreset(color)\">\n          @if (currentHex().toLowerCase() === color.toLowerCase()) {\n          <svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" stroke=\"currentColor\" stroke-width=\"3\" fill=\"none\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"swatch-check-icon\">\n            <polyline points=\"20 6 9 17 4 12\"></polyline>\n          </svg>\n          }\n        </button>\n        }\n      </div>\n      }\n    </div>\n    }\n\n    <!-- 5. Recent Colors -->\n    @if (showRecent() && recentColors().length > 0) {\n    <div class=\"recent-section\">\n      <div class=\"recent-group-title\">Recent Colors</div>\n      <div class=\"swatches-grid recent-grid\">\n        @for (color of recentColors(); track color) {\n        <button type=\"button\" class=\"swatch-btn\"\n          [class.is-selected]=\"currentHex().toLowerCase() === color.toLowerCase()\" [style.background-color]=\"color\"\n          [title]=\"color\" [attr.aria-label]=\"'Select recent color ' + color\" (click)=\"selectPreset(color)\">\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n  </div>\n</ng-template>", styles: [":host{display:inline-block;position:relative;width:100%;max-width:100%;font-family:inherit;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host.color-picker-sm{--talos-control-height: var(--talos-height-sm, 2rem);--tcp-width: 250px;--tcp-canvas-height: 130px;--tcp-font-size: var(--talos-font-size-xs, .75rem)}:host.color-picker-md{--talos-control-height: var(--talos-height-md, 2.25rem);--tcp-width: 280px;--tcp-canvas-height: 150px;--tcp-font-size: var(--talos-font-size-sm, .8125rem)}:host.color-picker-lg{--talos-control-height: var(--talos-height-lg, 2.625rem);--tcp-width: 310px;--tcp-canvas-height: 170px;--tcp-font-size: var(--talos-font-size-md, .875rem)}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--talos-transition, .18s ease)}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-color-picker-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-color-picker-trigger{position:relative;display:flex;align-items:center;gap:.625rem;width:100%;height:var(--talos-control-height, 2.25rem);min-height:var(--talos-control-height, 2.25rem);padding:0 var(--talos-control-padding-x, .625rem);background-color:var(--talos-input-bg, var(--talos-bg-surface, #ffffff));border:1px solid var(--talos-input-border, var(--talos-border-default, #cbd5e1));border-radius:var(--talos-border-radius, var(--talos-radius-md, .375rem));color:var(--talos-input-color, var(--talos-text-primary, #0f172a));font-size:var(--talos-control-font-size, .8125rem);cursor:text;outline:none;-webkit-user-select:none;user-select:none;transition:border-color var(--talos-transition, .18s ease),box-shadow var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.talos-color-picker-trigger:hover:not(.is-disabled){border-color:var(--talos-input-border-hover, var(--talos-border-hover, #94a3b8))}.talos-color-picker-trigger:focus-within,.talos-color-picker-trigger.is-focused,.talos-color-picker-trigger:focus-visible{border-color:var(--talos-input-border-focus, var(--talos-primary, #2563eb));box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .18))}.talos-color-picker-trigger.is-disabled{background-color:var(--talos-input-disabled-bg, var(--talos-bg-subtle, #f1f5f9));border-color:var(--talos-input-disabled-border, var(--talos-border-subtle, #e2e8f0));color:var(--talos-input-disabled-color, var(--talos-text-muted, #94a3b8));cursor:not-allowed;opacity:.65}.swatch-preview-box{position:relative;width:1.1rem;height:1.1rem;min-width:1.1rem;border-radius:var(--talos-radius-xs, .25rem);overflow:hidden;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .15));box-shadow:inset 0 0 2px #0000001a;cursor:pointer;flex-shrink:0;transition:transform .12s ease}.swatch-preview-box:hover{transform:scale(1.08)}.swatch-checkerboard,.alpha-checkerboard-bg{position:absolute;inset:0;background-image:linear-gradient(45deg,var(--talos-border-default, #cbd5e1) 25%,transparent 25%),linear-gradient(-45deg,var(--talos-border-default, #cbd5e1) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--talos-border-default, #cbd5e1) 75%),linear-gradient(-45deg,transparent 75%,var(--talos-border-default, #cbd5e1) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:var(--talos-bg-surface, #ffffff)}.swatch-fill{position:absolute;inset:0;transition:background-color .1s ease}.color-picker-input{flex:1;min-width:0;width:100%;height:100%;background:transparent;border:none;outline:none;padding:0;margin:0;font-family:inherit;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-medium, 500);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--talos-input-color, var(--talos-text-primary, #0f172a));line-height:normal}.color-picker-input::placeholder{color:var(--talos-input-placeholder-color, var(--talos-text-muted, #94a3b8));opacity:1;font-weight:var(--talos-font-weight-normal, 400)}.color-picker-input:disabled{cursor:not-allowed}.clear-button{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:.25rem;color:var(--talos-text-muted, #94a3b8);border-radius:var(--talos-radius-full, 9999px);cursor:pointer;transition:color var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.clear-button:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.dropdown-chevron-icon{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:transform var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .18s ease)}.dropdown-chevron-icon.is-rotated{transform:rotate(180deg);color:var(--talos-primary, #2563eb)}.dropdown-chevron-icon:hover{color:var(--talos-text-primary, #0f172a)}.talos-floating-label{position:absolute;left:calc(var(--talos-control-padding-x, .625rem) + 1.375rem + .625rem);top:50%;transform:translateY(-50%);font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-medium, 500);color:var(--talos-input-placeholder-color, var(--talos-text-muted, #94a3b8));pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--talos-input-bg, var(--talos-bg-surface, #ffffff));padding:0 .25rem;border-radius:var(--talos-radius-xs, .25rem);line-height:1;z-index:2;transition:transform var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),font-size var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),color var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),top var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1)),left var(--talos-transition, .18s cubic-bezier(.4, 0, .2, 1))}.talos-floating-label.is-floated{top:0;left:var(--talos-control-padding-x, .625rem);transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-floated) .talos-floating-label.is-floated,.talos-color-picker-trigger:focus-within .talos-floating-label.is-floated,.talos-color-picker-trigger.is-focused .talos-floating-label.is-floated{color:var(--talos-primary, #2563eb)}.talos-color-picker-panel{width:var(--tcp-width, 280px);max-width:calc(100vw - 2rem);background-color:var(--talos-dropdown-bg, var(--talos-bg-surface, #ffffff));border:1px solid var(--talos-dropdown-border, var(--talos-border-default, #cbd5e1));border-radius:var(--talos-border-radius, var(--talos-radius-lg, .5rem));overflow:hidden;box-sizing:border-box}.talos-color-picker-panel.talos-popover-panel{box-shadow:var(--talos-dropdown-shadow, var(--talos-shadow-dropdown, 0 16px 32px -4px rgba(0, 0, 0, .25)));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:tcp-slide-in var(--talos-transition, .18s cubic-bezier(.16, 1, .3, 1));z-index:1050}.talos-color-picker-panel.talos-inline-panel{box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05))}.talos-color-picker-panel .panel-header-title{padding:.75rem .875rem 0;font-size:var(--talos-control-font-size, .8125rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a)}.picker-inner-container{display:flex;flex-direction:column;padding:.75rem;gap:.75rem}.sat-val-canvas{position:relative;width:100%;height:var(--tcp-canvas-height, 150px);border-radius:calc(var(--talos-border-radius, var(--talos-radius-md, .375rem)) - 1px);overflow:hidden;cursor:crosshair;outline:none;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:inset 0 0 1px #0000004d}.sat-val-canvas:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb),inset 0 0 1px #0000004d}.sat-gradient-white{position:absolute;inset:0;background:linear-gradient(to right,#ffffff,transparent)}.val-gradient-black{position:absolute;inset:0;background:linear-gradient(to top,#000000,transparent)}.sat-val-handle{position:absolute;width:14px;height:14px;border-radius:var(--talos-radius-full, 9999px);border:2px solid #ffffff;box-shadow:0 0 2px #0009,inset 0 0 1px #0006;transform:translate(-50%,-50%);pointer-events:none;transition:transform .05s ease}.sat-val-handle.is-light-handle{border-color:#0f172a}.sliders-action-bar{display:flex;align-items:center;gap:.625rem}.sliders-column{flex:1;display:flex;flex-direction:column;gap:.5rem}.hue-slider-track,.alpha-slider-track{position:relative;width:100%;height:.75rem;border-radius:var(--talos-radius-full, 9999px);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;touch-action:none}.hue-slider-track:focus-visible,.alpha-slider-track:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb)}.hue-slider-track{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.alpha-slider-track{overflow:hidden}.alpha-slider-track .alpha-gradient-overlay{position:absolute;inset:0;border-radius:var(--talos-radius-full, 9999px)}.slider-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:var(--talos-radius-full, 9999px);border:2px solid #ffffff;box-shadow:0 1px 3px #0006;transform:translate(-50%,-50%);pointer-events:none}.action-preview-column{display:flex;flex-direction:column;align-items:center;gap:.375rem}.swatch-circle-preview{position:relative;width:1.75rem;height:1.75rem;border-radius:var(--talos-radius-full, 9999px);overflow:hidden;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .15));box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .05))}.quick-actions-row{display:flex;align-items:center;gap:.25rem}.icon-action-button{display:inline-flex;align-items:center;justify-content:center;width:1.625rem;height:1.625rem;padding:0;background-color:transparent;border:1px solid transparent;border-radius:var(--talos-radius-sm, .25rem);color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:all var(--talos-transition, .18s ease)}.icon-action-button:hover{color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, #f1f5f9);border-color:var(--talos-border-subtle, #e2e8f0)}.icon-action-button.is-copied{color:var(--talos-success, #16a34a)}.icon-action-button .copy-success-icon{animation:tcp-scale-up .2s ease}.inputs-section{display:flex;flex-direction:column;gap:.5rem}.format-tabs-bar{display:flex;align-items:center;background-color:var(--talos-bg-subtle, #f1f5f9);padding:2px;border-radius:var(--talos-radius-md, .375rem);gap:2px;border:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .04))}.format-tab-btn{flex:1;padding:.25rem 0;font-size:var(--talos-font-size-2xs, .6875rem);font-weight:var(--talos-font-weight-semibold, 600);letter-spacing:.03em;background:transparent;border:none;border-radius:var(--talos-radius-xs, .25rem);color:var(--talos-text-muted, #94a3b8);cursor:pointer;transition:all var(--talos-transition, .18s ease)}.format-tab-btn.is-active{background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-primary, #0f172a);box-shadow:0 1px 2px #0000001a}.format-tab-btn:hover:not(.is-active){color:var(--talos-text-primary, #0f172a)}.channel-inputs-grid{display:flex;align-items:center;gap:.375rem}.input-field-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:.125rem}.input-field-group.hex-field{flex:2.5}.input-field-group .channel-input{width:100%;height:1.75rem;padding:0 .25rem;font-size:var(--talos-font-size-xs, .75rem);font-weight:var(--talos-font-weight-medium, 500);font-family:inherit;text-align:center;color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, #f1f5f9);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-xs, .25rem);outline:none;transition:border-color var(--talos-transition, .18s ease),box-shadow var(--talos-transition, .18s ease),background-color var(--talos-transition, .18s ease)}.input-field-group .channel-input::-webkit-inner-spin-button,.input-field-group .channel-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field-group .channel-input{-moz-appearance:textfield}.input-field-group .channel-input:focus{border-color:var(--talos-primary, #2563eb);box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .18));background-color:var(--talos-bg-surface, #ffffff)}.input-field-group .field-caption{font-size:.625rem;font-weight:var(--talos-font-weight-bold, 700);color:var(--talos-text-muted, #94a3b8);text-transform:uppercase}.presets-section,.recent-section{display:flex;flex-direction:column;gap:.375rem;border-top:1px solid var(--talos-border-subtle, #e2e8f0);padding-top:.5rem}.preset-group-title,.recent-group-title{font-size:var(--talos-font-size-2xs, .6875rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-muted, #64748b)}.swatches-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.375rem}.swatch-btn{position:relative;aspect-ratio:1;border:1px solid var(--talos-border-default, rgba(0, 0, 0, .12));border-radius:var(--talos-radius-xs, .25rem);cursor:pointer;outline:none;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .12s ease}.swatch-btn:hover{transform:scale(1.12);z-index:2;box-shadow:0 2px 6px #00000040}.swatch-btn:focus-visible{box-shadow:0 0 0 2px var(--talos-primary, #2563eb)}.swatch-btn.is-selected{box-shadow:0 0 0 2px var(--talos-bg-surface, #ffffff),0 0 0 4px var(--talos-primary, #3b82f6);z-index:1}.swatch-btn .swatch-check-icon{color:#fff;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.8))}@keyframes tcp-slide-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes tcp-scale-up{0%{transform:scale(.7)}50%{transform:scale(1.2)}to{transform:scale(1)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlpha", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], showRecent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRecent", required: false }] }], showEyeDropper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEyeDropper", required: false }] }], showInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInputs", required: false }] }], showFormatSwitcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFormatSwitcher", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], colorDetailsChange: [{ type: i0.Output, args: ["colorDetailsChange"] }], formatChange: [{ type: i0.Output, args: ["formatChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], satValCanvas: [{
+                type: ViewChild,
+                args: ['satValCanvas']
+            }], hueTrack: [{
+                type: ViewChild,
+                args: ['hueTrack']
+            }], alphaTrack: [{
+                type: ViewChild,
+                args: ['alphaTrack']
+            }], triggerBtn: [{
+                type: ViewChild,
+                args: ['triggerBtn']
+            }], triggerInput: [{
+                type: ViewChild,
+                args: ['triggerInput']
+            }] } });
+
+class TalosColorPickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosColorPickerModule, imports: [TalosColorPickerComponent], exports: [TalosColorPickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosColorPickerModule, imports: [TalosColorPickerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosColorPickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosColorPickerComponent],
+                    exports: [TalosColorPickerComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_COLOR_PRESETS, TalosColorPickerComponent, TalosColorPickerModule };
+//# sourceMappingURL=weeehaoooz-talos-ui-form-color-picker.mjs.map