@weeehaoooz/talos-ui 0.1.1 → 0.1.2

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

@@ -1,761 +0,0 @@
-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