@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-color-picker.mjs

@@ -0,0 +1,1204 @@
+import * as i0 from '@angular/core';
+import { model, inject, input, output, signal, computed, viewChild, DestroyRef, effect, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, ElementRef, untracked } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { MlvTab, MlvTabContentDef, MlvTabDef, MlvTabGroup } from '@malva-ui/core/tabs';
+import { MlvInput } from '@malva-ui/core/input';
+import { MlvSignalFormControlBase, MLV_FORM_CONTROL, MlvFormControlWrapper, MlvFormControlWrapperControl, MlvHint, MlvDescription, MlvLabel, MlvMessage } from '@malva-ui/core/form-utils';
+import { MLV_COLOR_PICKER_I18N, MLV_FORM_UTILS_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent } from 'rxjs';
+import { takeUntil, take } from 'rxjs/operators';
+import { MlvButton, MlvButtonIcon } from '@malva-ui/core/button';
+import { MlvTooltip } from '@malva-ui/core/tooltip';
+import { MlvPopup, MlvPopupContainer, MlvPopupContent } from '@malva-ui/core/popup';
+import { MlvTabbableElementService } from '@malva-ui/cdk/accessibility';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+
+/**
+ * Clamps a number to the range [min, max].
+ */
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+/**
+ * Rounds a number to a given number of decimal places.
+ */
+function round(value, decimals = 0) {
+    const factor = Math.pow(10, decimals);
+    return Math.round(value * factor) / factor;
+}
+/**
+ * Converts HSL (0-360, 0-100, 0-100) to RGB (0-255 each).
+ */
+function hslToRgb(h, s, l) {
+    const sNorm = s / 100;
+    const lNorm = l / 100;
+    const a = sNorm * Math.min(lNorm, 1 - lNorm);
+    const f = (n) => {
+        const k = (n + h / 30) % 12;
+        return lNorm - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    };
+    return {
+        r: Math.round(f(0) * 255),
+        g: Math.round(f(8) * 255),
+        b: Math.round(f(4) * 255),
+    };
+}
+/**
+ * Converts RGB (0-255) to HSL (0-360, 0-100, 0-100).
+ */
+function rgbToHsl(r, g, b) {
+    const rNorm = r / 255;
+    const gNorm = g / 255;
+    const bNorm = b / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    const delta = max - min;
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (delta !== 0) {
+        s = delta / (1 - Math.abs(2 * l - 1));
+        if (max === rNorm) {
+            h = ((gNorm - bNorm) / delta) % 6;
+        }
+        else if (max === gNorm) {
+            h = (bNorm - rNorm) / delta + 2;
+        }
+        else {
+            h = (rNorm - gNorm) / delta + 4;
+        }
+        h = h * 60;
+        if (h < 0)
+            h += 360;
+    }
+    return {
+        h: round(h, 1),
+        s: round(s * 100, 1),
+        l: round(l * 100, 1),
+    };
+}
+/**
+ * Converts a hex string (#RRGGBB or #RRGGBBAA) to RGBA.
+ * Returns null if the hex string is invalid.
+ */
+function hexToRgba(hex) {
+    const cleaned = hex.replace('#', '');
+    if (cleaned.length !== 6 && cleaned.length !== 8)
+        return null;
+    const r = parseInt(cleaned.substring(0, 2), 16);
+    const g = parseInt(cleaned.substring(2, 4), 16);
+    const b = parseInt(cleaned.substring(4, 6), 16);
+    const a = cleaned.length === 8 ? parseInt(cleaned.substring(6, 8), 16) / 255 : 1;
+    if (isNaN(r) || isNaN(g) || isNaN(b))
+        return null;
+    return { r, g, b, a };
+}
+/**
+ * Converts RGBA to a hex string.
+ * Includes alpha channel as #RRGGBBAA if alpha < 1.
+ */
+function rgbaToHex(r, g, b, a) {
+    const toHex = (n) => Math.round(clamp(n, 0, 255))
+        .toString(16)
+        .padStart(2, '0');
+    const hex = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    if (a < 1) {
+        return hex + toHex(a * 255);
+    }
+    return hex;
+}
+/**
+ * Converts an HSLa object to a CSS color string.
+ * Produces hsla() when alpha < 1, otherwise hsl().
+ */
+function hslaToString(color) {
+    const { h, s, l, a } = color;
+    if (a < 1) {
+        return `hsla(${round(h, 1)}, ${round(s, 1)}%, ${round(l, 1)}%, ${round(a, 2)})`;
+    }
+    return `hsl(${round(h, 1)}, ${round(s, 1)}%, ${round(l, 1)}%)`;
+}
+/**
+ * Converts an HSLa object to an RGBA object.
+ */
+function hslaToRgba(color) {
+    const { r, g, b } = hslToRgb(color.h, color.s, color.l);
+    return { r, g, b, a: color.a };
+}
+/**
+ * Converts an HSLa object to a hex string (#RRGGBB or #RRGGBBAA).
+ */
+function hslaToHex(color) {
+    const { r, g, b } = hslToRgb(color.h, color.s, color.l);
+    return rgbaToHex(r, g, b, color.a);
+}
+/**
+ * Strictly parses a supported concrete CSS color string into an HSLa object.
+ * Supports: #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(), rgba(), hsl(), hsla().
+ * Returns `null` when parsing fails.
+ *
+ * CSS custom-property references are intentionally not resolved here because
+ * their value depends on an element's computed cascade. Use
+ * {@link isCssColorValue} when validating editable color text.
+ */
+function tryParseCssColor(css) {
+    const str = css.trim().toLowerCase();
+    // Handle hex
+    if (str.startsWith('#')) {
+        let hex = str.slice(1);
+        // Expand shorthand #RGB → #RRGGBB
+        if (hex.length === 3) {
+            hex = hex
+                .split('')
+                .map((c) => c + c)
+                .join('');
+        }
+        if (hex.length === 4) {
+            hex = hex
+                .split('')
+                .map((c) => c + c)
+                .join('');
+        }
+        const rgba = hexToRgba('#' + hex);
+        if (rgba) {
+            const hsl = rgbToHsl(rgba.r, rgba.g, rgba.b);
+            return { ...hsl, a: round(rgba.a, 2) };
+        }
+    }
+    // Handle rgb() / rgba()
+    const rgbMatch = str.match(/^rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*(?:,\s*(\d+(?:\.\d+)?))?\s*\)$/);
+    if (rgbMatch) {
+        const r = parseFloat(rgbMatch[1]);
+        const g = parseFloat(rgbMatch[2]);
+        const b = parseFloat(rgbMatch[3]);
+        if ([r, g, b].some((channel) => channel < 0 || channel > 255)) {
+            return null;
+        }
+        const a = rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : 1;
+        const hsl = rgbToHsl(r, g, b);
+        return { ...hsl, a: clamp(a, 0, 1) };
+    }
+    // Handle hsl() / hsla()
+    const hslMatch = str.match(/^hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*(\d+(?:\.\d+)?))?\s*\)$/);
+    if (hslMatch) {
+        return {
+            h: clamp(parseFloat(hslMatch[1]), 0, 360),
+            s: clamp(parseFloat(hslMatch[2]), 0, 100),
+            l: clamp(parseFloat(hslMatch[3]), 0, 100),
+            a: hslMatch[4] !== undefined ? clamp(parseFloat(hslMatch[4]), 0, 1) : 1,
+        };
+    }
+    return null;
+}
+/**
+ * Returns whether a string is a supported concrete color or a syntactically
+ * valid CSS custom-property color reference.
+ *
+ * An unresolved `var(--name)` is valid editable input: the browser resolves it
+ * later against the element's computed cascade. Optional fallbacks are
+ * validated recursively, including nested `var(...)` references.
+ */
+function isCssColorValue(css) {
+    const value = css.trim();
+    return tryParseCssColor(value) !== null || isCssVariableColor(value);
+}
+/**
+ * Parses the grammar needed for color-valued CSS custom-property references
+ * without requiring DOM/CSSOM globals, keeping the utility SSR- and test-safe.
+ */
+function isCssVariableColor(value) {
+    if (!value.toLowerCase().startsWith('var(') || !value.endsWith(')')) {
+        return false;
+    }
+    const content = value.slice(4, -1);
+    let depth = 0;
+    let separator = -1;
+    for (let index = 0; index < content.length; index += 1) {
+        const character = content[index];
+        if (character === '(') {
+            depth += 1;
+        }
+        else if (character === ')') {
+            depth -= 1;
+            if (depth < 0)
+                return false;
+        }
+        else if (character === ',' && depth === 0 && separator === -1) {
+            separator = index;
+        }
+    }
+    if (depth !== 0)
+        return false;
+    const customProperty = (separator === -1 ? content : content.slice(0, separator)).trim();
+    if (!/^--[a-z0-9_-]+$/i.test(customProperty))
+        return false;
+    if (separator === -1)
+        return true;
+    const fallback = content.slice(separator + 1).trim();
+    return fallback.length > 0 && isCssColorValue(fallback);
+}
+/**
+ * Parses any supported concrete CSS color string into an HSLa object.
+ * Returns a default black color if parsing fails.
+ */
+function parseCssColor(css) {
+    return tryParseCssColor(css) ?? { h: 0, s: 0, l: 0, a: 1 };
+}
+/**
+ * Converts an HSLa object to a CSS color string in the specified mode.
+ */
+function hslaToModeString(color, mode) {
+    if (mode === 'hsl') {
+        return hslaToString(color);
+    }
+    const { r, g, b } = hslToRgb(color.h, color.s, color.l);
+    if (mode === 'hex') {
+        return rgbaToHex(r, g, b, color.a);
+    }
+    // rgb
+    if (color.a < 1) {
+        return `rgba(${r}, ${g}, ${b}, ${round(color.a, 2)})`;
+    }
+    return `rgb(${r}, ${g}, ${b})`;
+}
+/**
+ * Converts an HSLa color to a CSS rgba() string (used internally for canvas rendering).
+ */
+function hslaToRgbaString(color) {
+    const { r, g, b } = hslToRgb(color.h, color.s, color.l);
+    return `rgba(${r}, ${g}, ${b}, ${color.a})`;
+}
+
+/**
+ * The MlvColorPicker provides an HSL/HEX/RGB color picker with:
+ * - A 2D saturation-lightness canvas (pointer-draggable)
+ * - A hue slider
+ * - An opacity slider
+ * - Input mode tabs for HEX, RGB, and HSL
+ * - Signal, reactive, and template-driven forms integration producing a CSS color string
+ */
+class MlvColorPicker extends MlvSignalFormControlBase {
+    static _ALL_FORMATS = [
+        'hex',
+        'rgb',
+        'hsl',
+    ];
+    /** The CSS color string used by all Angular forms APIs. */
+    value = model('#ff0000', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** @protected Injected i18n translations for the color picker. */
+    _i18n = inject(MLV_COLOR_PICKER_I18N);
+    /** Whether to show the opacity slider. Defaults to true. */
+    showOpacity = input(true, { ...(ngDevMode ? { debugName: "showOpacity" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** The default input mode displayed when the picker opens. */
+    defaultMode = input('hex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultMode" }] : /* istanbul ignore next */ []));
+    /** Available color formats, in display order. */
+    supportedFormats = input(MlvColorPicker._ALL_FORMATS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "supportedFormats" }] : /* istanbul ignore next */ []));
+    /** Emits the CSS color string whenever the color changes. */
+    colorChange = output();
+    /** @private Current color in HSLA space. */
+    _hsla = signal({ h: 0, s: 100, l: 50, a: 1 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hsla" }] : /* istanbul ignore next */ []));
+    /** @private Current input mode for the text inputs. */
+    _inputMode = signal('hex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_inputMode" }] : /* istanbul ignore next */ []));
+    /** Formats normalized to supported unique values, preserving caller order. */
+    _supportedFormats = computed(() => {
+        const formats = this.supportedFormats().filter((format, index, values) => MlvColorPicker._ALL_FORMATS.includes(format) &&
+            values.indexOf(format) === index);
+        return formats.length > 0 ? formats : MlvColorPicker._ALL_FORMATS;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_supportedFormats" }] : /* istanbul ignore next */ []));
+    /** @private The current raw hex input string (kept separate to avoid cursor-jump on typing). */
+    _hexInput = signal('#ff0000', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hexInput" }] : /* istanbul ignore next */ []));
+    /** @private The current raw red channel input. */
+    _rgbRInput = signal('255', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rgbRInput" }] : /* istanbul ignore next */ []));
+    /** @private The current raw green channel input. */
+    _rgbGInput = signal('0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rgbGInput" }] : /* istanbul ignore next */ []));
+    /** @private The current raw blue channel input. */
+    _rgbBInput = signal('0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rgbBInput" }] : /* istanbul ignore next */ []));
+    /** @private The current raw alpha input for RGB mode. */
+    _rgbAInput = signal('1', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rgbAInput" }] : /* istanbul ignore next */ []));
+    /** @private The current raw hue input for HSL mode. */
+    _hslHInput = signal('0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hslHInput" }] : /* istanbul ignore next */ []));
+    /** @private The current raw saturation input for HSL mode. */
+    _hslSInput = signal('100', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hslSInput" }] : /* istanbul ignore next */ []));
+    /** @private The current raw lightness input for HSL mode. */
+    _hslLInput = signal('50', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hslLInput" }] : /* istanbul ignore next */ []));
+    /** @private The current raw alpha input for HSL mode. */
+    _hslAInput = signal('1', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hslAInput" }] : /* istanbul ignore next */ []));
+    /** @private Whether the canvas pointer is currently being dragged. */
+    _canvasDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canvasDragging" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Computed CSS string for the hue thumb gradient stop.
+     * Used to show the pure hue color on the canvas gradient background.
+     */
+    _hueColor = computed(() => {
+        const { r, g, b } = hslToRgb(this._hsla().h, 100, 50);
+        return `rgb(${r},${g},${b})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hueColor" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Computed CSS color for the opacity slider checkerboard preview.
+     */
+    _rgbaString = computed(() => {
+        const c = this._hsla();
+        const { r, g, b } = hslToRgb(c.h, c.s, c.l);
+        return `rgba(${r},${g},${b},${c.a})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_rgbaString" }] : /* istanbul ignore next */ []));
+    /** @private Reference to the canvas element. */
+    _canvasRef = viewChild('slCanvas', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canvasRef" }] : /* istanbul ignore next */ []));
+    /** @private Reference to the canvas container for size calculation. */
+    _canvasContainerRef = viewChild('slContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canvasContainerRef" }] : /* istanbul ignore next */ []));
+    /** @private DestroyRef for cleanup. */
+    _destroyRef = inject(DestroyRef);
+    /**
+     * @private The canvas bounding rect captured once at pointerdown and reused
+     * for every pointermove of that drag, avoiding a forced layout read
+     * (`getBoundingClientRect`) on every move. Cleared on pointerup.
+     */
+    _dragRect = null;
+    constructor() {
+        super();
+        effect(() => this._applyValue(this.value()));
+        effect(() => {
+            const formats = this._supportedFormats();
+            if (!formats.includes(this._inputMode())) {
+                this._inputMode.set(formats.includes(this.defaultMode())
+                    ? this.defaultMode()
+                    : formats[0]);
+            }
+        });
+    }
+    ngOnInit() {
+        const formats = this._supportedFormats();
+        this._inputMode.set(formats.includes(this.defaultMode()) ? this.defaultMode() : formats[0]);
+        this._syncFromHsla();
+    }
+    ngAfterViewInit() {
+        this._drawCanvas();
+    }
+    // ---------------------------------------------------------------------------
+    // Forms value
+    // ---------------------------------------------------------------------------
+    /** Whether the control holds a clearable value — The picker always holds a colour, so a clearable X (if enabled) is always actionable. */
+    hasValue = computed(() => true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** @private Synchronizes the color editor from an external value. */
+    _applyValue(value) {
+        if (!value)
+            return;
+        const parsed = parseCssColor(value);
+        this._hsla.set(parsed);
+        this._syncFromHsla();
+        // Draw after change detection settles
+        setTimeout(() => this._drawCanvas(), 0);
+    }
+    // ---------------------------------------------------------------------------
+    // Canvas drawing
+    // ---------------------------------------------------------------------------
+    /**
+     * @private Draws the 2D saturation-lightness canvas for the current hue.
+     * The canvas shows a gradient from white (top-left) to the pure hue (top-right)
+     * to black (bottom).
+     */
+    _drawCanvas() {
+        const canvasEl = this._canvasRef()?.nativeElement;
+        if (!canvasEl)
+            return;
+        const ctx = canvasEl.getContext('2d');
+        if (!ctx)
+            return;
+        const w = canvasEl.offsetWidth || canvasEl.width;
+        const h = canvasEl.offsetHeight || canvasEl.height;
+        // Set canvas resolution to match displayed size
+        if (canvasEl.width !== w || canvasEl.height !== h) {
+            canvasEl.width = w;
+            canvasEl.height = h;
+        }
+        const hue = this._hsla().h;
+        const { r, g, b } = hslToRgb(hue, 100, 50);
+        const pureHue = `rgb(${r},${g},${b})`;
+        // White → pure hue (horizontal)
+        const hGrad = ctx.createLinearGradient(0, 0, w, 0);
+        hGrad.addColorStop(0, '#ffffff');
+        hGrad.addColorStop(1, pureHue);
+        ctx.fillStyle = hGrad;
+        ctx.fillRect(0, 0, w, h);
+        // Transparent → black (vertical, overlaid)
+        const vGrad = ctx.createLinearGradient(0, 0, 0, h);
+        vGrad.addColorStop(0, 'rgba(0,0,0,0)');
+        vGrad.addColorStop(1, 'rgba(0,0,0,1)');
+        ctx.fillStyle = vGrad;
+        ctx.fillRect(0, 0, w, h);
+    }
+    // ---------------------------------------------------------------------------
+    // Canvas pointer interaction
+    // ---------------------------------------------------------------------------
+    /**
+     * @private Handles pointer down on the SL canvas.
+     * Begins drag and updates color immediately.
+     */
+    _onCanvasPointerDown(event) {
+        if (this.computedDisabled())
+            return;
+        event.preventDefault();
+        // Capture the canvas rect once, up front, and reuse it for the whole drag
+        // so pointermove never forces a layout read. It is fresh here, so the
+        // initial pointerdown update below also uses an up-to-date rect.
+        this._dragRect =
+            this._canvasRef()?.nativeElement.getBoundingClientRect() ?? null;
+        this._canvasDragging.set(true);
+        this._updateColorFromCanvas(event);
+        const target = event.currentTarget;
+        target.setPointerCapture(event.pointerId);
+        // Per-drag rxjs streams: the move stream completes on the first pointerup
+        // (takeUntil) and both streams complete on destroy (takeUntilDestroyed),
+        // so no window listener can leak or accumulate across drags — this
+        // replaces an earlier bug where each drag's pointermove listener stayed
+        // attached to `window`.
+        const pointerUp$ = fromEvent(window, 'pointerup');
+        fromEvent(window, 'pointermove')
+            .pipe(takeUntil(pointerUp$), takeUntilDestroyed(this._destroyRef))
+            .subscribe((e) => {
+            if (this._canvasDragging()) {
+                this._updateColorFromCanvas(e);
+            }
+        });
+        pointerUp$
+            .pipe(take(1), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._canvasDragging.set(false);
+            this._dragRect = null;
+            this._markTouched();
+        });
+    }
+    /**
+     * @private Converts a pointer position on the canvas to saturation/lightness values.
+     */
+    _updateColorFromCanvas(event) {
+        const canvasEl = this._canvasRef()?.nativeElement;
+        if (!canvasEl)
+            return;
+        // Reuse the rect captured at pointerdown during a drag; fall back to a live
+        // read for any standalone call.
+        const rect = this._dragRect ?? canvasEl.getBoundingClientRect();
+        const x = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+        const y = clamp((event.clientY - rect.top) / rect.height, 0, 1);
+        // Convert canvas (x,y) → HSL via HSV intermediate:
+        //   x  = HSV saturation (Sv),  y = 1 − HSV value (V = 1−y)
+        //   L_hsl  = V · (1 − Sv/2)
+        //   S_hsl  = ΔC / (1 − |2L−1|)  where ΔC = V · Sv  (NOT just Sv alone)
+        const sv = x;
+        const v = 1 - y;
+        const lightness = v * (1 - sv / 2);
+        const saturation = lightness === 0 || lightness === 1
+            ? 0
+            : (sv * v) / (1 - Math.abs(2 * lightness - 1));
+        this._hsla.update((c) => ({
+            ...c,
+            s: round(clamp(saturation * 100, 0, 100), 1),
+            l: round(clamp(lightness * 100, 0, 100), 1),
+        }));
+        this._syncFromHsla();
+        this._emitChange();
+    }
+    // ---------------------------------------------------------------------------
+    // Hue slider
+    // ---------------------------------------------------------------------------
+    /**
+     * @private Handles hue slider input change.
+     */
+    _onHueChange(event) {
+        if (this.computedDisabled())
+            return;
+        const value = parseFloat(event.target.value);
+        this._hsla.update((c) => ({ ...c, h: clamp(value, 0, 360) }));
+        this._syncFromHsla();
+        this._drawCanvas();
+        this._emitChange();
+    }
+    // ---------------------------------------------------------------------------
+    // Opacity slider
+    // ---------------------------------------------------------------------------
+    /**
+     * @private Handles opacity slider input change.
+     */
+    _onOpacityChange(event) {
+        if (this.computedDisabled())
+            return;
+        const value = parseFloat(event.target.value);
+        this._hsla.update((c) => ({ ...c, a: clamp(value / 100, 0, 1) }));
+        this._syncFromHsla();
+        this._emitChange();
+    }
+    // ---------------------------------------------------------------------------
+    // Input mode tabs
+    // ---------------------------------------------------------------------------
+    /**
+     * @private Switches the active input mode tab.
+     */
+    _setInputMode(mode) {
+        if (!this._supportedFormats().includes(mode))
+            return;
+        const nextMode = mode;
+        if (nextMode === this._inputMode())
+            return;
+        this._inputMode.set(nextMode);
+        this._emitChange();
+    }
+    // ---------------------------------------------------------------------------
+    // HEX input
+    // ---------------------------------------------------------------------------
+    /**
+     * @private Handles hex input changes.
+     */
+    _onHexInput(event) {
+        if (this.computedDisabled())
+            return;
+        const raw = event.target.value;
+        this._hexInput.set(raw);
+        const hex = raw.startsWith('#') ? raw : '#' + raw;
+        const parsed = parseCssColor(hex);
+        if (hex.replace('#', '').length >= 6) {
+            this._hsla.set({ ...parsed, a: this._hsla().a });
+            this._syncFromHsla('rgb', 'hsl');
+            this._drawCanvas();
+            this._emitChange();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // RGB inputs
+    // ---------------------------------------------------------------------------
+    /** @private Updates red channel from input. */
+    _onRgbRInput(event) {
+        this._rgbRInput.set(event.target.value);
+        this._applyRgbInputs();
+    }
+    /** @private Updates green channel from input. */
+    _onRgbGInput(event) {
+        this._rgbGInput.set(event.target.value);
+        this._applyRgbInputs();
+    }
+    /** @private Updates blue channel from input. */
+    _onRgbBInput(event) {
+        this._rgbBInput.set(event.target.value);
+        this._applyRgbInputs();
+    }
+    /** @private Updates alpha channel from RGB mode input. */
+    _onRgbAInput(event) {
+        this._rgbAInput.set(event.target.value);
+        this._applyRgbInputs();
+    }
+    /**
+     * @private Parses all RGB inputs and updates the internal HSLA state.
+     */
+    _applyRgbInputs() {
+        if (this.computedDisabled())
+            return;
+        const r = clamp(parseInt(this._rgbRInput(), 10), 0, 255);
+        const g = clamp(parseInt(this._rgbGInput(), 10), 0, 255);
+        const b = clamp(parseInt(this._rgbBInput(), 10), 0, 255);
+        const a = clamp(parseFloat(this._rgbAInput()), 0, 1);
+        if (!isNaN(r) && !isNaN(g) && !isNaN(b) && !isNaN(a)) {
+            const { h, s, l } = rgbToHsl(r, g, b);
+            this._hsla.set({ h, s, l, a });
+            this._syncFromHsla('hex', 'hsl');
+            this._drawCanvas();
+            this._emitChange();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // HSL inputs
+    // ---------------------------------------------------------------------------
+    /** @private Updates hue from HSL input. */
+    _onHslHInput(event) {
+        this._hslHInput.set(event.target.value);
+        this._applyHslInputs();
+    }
+    /** @private Updates saturation from HSL input. */
+    _onHslSInput(event) {
+        this._hslSInput.set(event.target.value);
+        this._applyHslInputs();
+    }
+    /** @private Updates lightness from HSL input. */
+    _onHslLInput(event) {
+        this._hslLInput.set(event.target.value);
+        this._applyHslInputs();
+    }
+    /** @private Updates alpha from HSL mode input. */
+    _onHslAInput(event) {
+        this._hslAInput.set(event.target.value);
+        this._applyHslInputs();
+    }
+    /**
+     * @private Parses all HSL inputs and updates internal state.
+     */
+    _applyHslInputs() {
+        if (this.computedDisabled())
+            return;
+        const h = clamp(parseFloat(this._hslHInput()), 0, 360);
+        const s = clamp(parseFloat(this._hslSInput()), 0, 100);
+        const l = clamp(parseFloat(this._hslLInput()), 0, 100);
+        const a = clamp(parseFloat(this._hslAInput()), 0, 1);
+        if (!isNaN(h) && !isNaN(s) && !isNaN(l) && !isNaN(a)) {
+            this._hsla.set({ h, s, l, a });
+            this._syncFromHsla('hex', 'rgb');
+            this._drawCanvas();
+            this._emitChange();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Input sync helper (single, channel-targeted)
+    // ---------------------------------------------------------------------------
+    /**
+     * @private Refreshes the in-progress text-mirror signals for the requested
+     * channels from the canonical `_hsla()` state. Called after every external
+     * mutation (canvas drag, hue slider, opacity slider, external value write) to
+     * keep the unfocused channels in sync without clobbering the channel the
+     * user is currently typing into.
+     */
+    _syncFromHsla(...channels) {
+        const c = this._hsla();
+        if (channels.length === 0 || channels.includes('hex')) {
+            this._hexInput.set(hslaToHex(c));
+        }
+        if (channels.length === 0 || channels.includes('rgb')) {
+            const { r, g, b } = hslToRgb(c.h, c.s, c.l);
+            this._rgbRInput.set(String(r));
+            this._rgbGInput.set(String(g));
+            this._rgbBInput.set(String(b));
+            this._rgbAInput.set(String(round(c.a, 2)));
+        }
+        if (channels.length === 0 || channels.includes('hsl')) {
+            this._hslHInput.set(String(round(c.h, 1)));
+            this._hslSInput.set(String(round(c.s, 1)));
+            this._hslLInput.set(String(round(c.l, 1)));
+            this._hslAInput.set(String(round(c.a, 2)));
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Change emission
+    // ---------------------------------------------------------------------------
+    /**
+     * @private Emits the current color through the forms model and colorChange output.
+     */
+    _emitChange() {
+        const cssColor = hslaToModeString(this._hsla(), this._inputMode());
+        this.value.set(cssColor);
+        this.colorChange.emit(cssColor);
+    }
+    /**
+     * @private Returns the current CSS color string for a given mode.
+     * Used by the template to display the color in the active mode.
+     */
+    _getColorString(mode) {
+        return hslaToModeString(this._hsla(), mode);
+    }
+    /**
+     * @private Returns opacity value as 0-100 integer for the opacity slider.
+     */
+    _getOpacityPercent() {
+        return Math.round(this._hsla().a * 100);
+    }
+    /**
+     * @private Returns the hue value for the hue slider.
+     */
+    _getHue() {
+        return this._hsla().h;
+    }
+    /**
+     * @private Canvas thumb left position.
+     * The canvas uses HSV space (x = HSV saturation, y = 1 − HSV value).
+     * Converts the stored HSL to HSV to get the correct x coordinate.
+     */
+    _getThumbLeft() {
+        const { sv } = this._hslToHsv();
+        return `${clamp(sv * 100, 0, 100)}%`;
+    }
+    /**
+     * @private Canvas thumb top position.
+     * y = 1 − HSV value (top = bright/white, bottom = black).
+     */
+    _getThumbTop() {
+        const { v } = this._hslToHsv();
+        return `${clamp((1 - v) * 100, 0, 100)}%`;
+    }
+    /**
+     * @private Converts the current HSLA state to HSV (saturation + value),
+     * matching the coordinate system used by the SL canvas gradient.
+     *
+     * The canvas draws:
+     *   - Horizontal: white (left) → pure hue (right)  → x = HSV saturation
+     *   - Vertical:   full brightness (top) → black (bottom) → y = 1 − HSV value
+     *
+     * HSL → HSV:
+     *   V  = L + S · min(L, 1−L)
+     *   Sv = V > 0 ? 2·(1 − L/V) : 0
+     */
+    _hslToHsv() {
+        const s = this._hsla().s / 100;
+        const l = this._hsla().l / 100;
+        const v = l + s * Math.min(l, 1 - l);
+        const sv = v > 0 ? 2 * (1 - l / v) : 0;
+        return { sv, v };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvColorPicker, isStandalone: true, selector: "mlv-color-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showOpacity: { classPropertyName: "showOpacity", publicName: "showOpacity", isSignal: true, isRequired: false, transformFunction: null }, defaultMode: { classPropertyName: "defaultMode", publicName: "defaultMode", isSignal: true, isRequired: false, transformFunction: null }, supportedFormats: { classPropertyName: "supportedFormats", publicName: "supportedFormats", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", colorChange: "colorChange" }, host: { listeners: { "focusout": "_markTouched()" }, properties: { "class.mlv-color-picker--disabled": "computedDisabled()" }, classAttribute: "mlv-color-picker" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvColorPicker),
+            },
+        ], viewQueries: [{ propertyName: "_canvasRef", first: true, predicate: ["slCanvas"], descendants: true, isSignal: true }, { propertyName: "_canvasContainerRef", first: true, predicate: ["slContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mlv-color-picker__canvas-container\" #slContainer>\n  <canvas\n    #slCanvas\n    class=\"mlv-color-picker__canvas\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    (pointerdown)=\"_onCanvasPointerDown($event)\"\n  ></canvas>\n  <div\n    class=\"mlv-color-picker__canvas-thumb\"\n    [style.left]=\"_getThumbLeft()\"\n    [style.top]=\"_getThumbTop()\"\n    aria-hidden=\"true\"\n  ></div>\n</div>\n\n<div class=\"mlv-color-picker__sliders\">\n  <!-- Hue slider -->\n  <div class=\"mlv-color-picker__slider-row\">\n    <div\n      class=\"mlv-color-picker__preview\"\n      [style.background-color]=\"_rgbaString()\"\n      aria-hidden=\"true\"\n    ></div>\n    <div\n      class=\"mlv-color-picker__slider-track mlv-color-picker__slider-track--hue\"\n    >\n      <input\n        type=\"range\"\n        class=\"mlv-color-picker__range-input\"\n        min=\"0\"\n        max=\"360\"\n        step=\"1\"\n        [value]=\"_getHue()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHueChange($event)\"\n        [attr.aria-label]=\"_i18n().hue\"\n      />\n    </div>\n  </div>\n\n  <!-- Opacity slider -->\n  @if (showOpacity()) {\n  <div class=\"mlv-color-picker__slider-row\">\n    <div\n      class=\"mlv-color-picker__slider-track mlv-color-picker__slider-track--opacity\"\n    >\n      <div\n        class=\"mlv-color-picker__opacity-gradient\"\n        [style.background]=\"'linear-gradient(to right, transparent, ' + _hueColor() + ')'\"\n        aria-hidden=\"true\"\n      ></div>\n      <input\n        type=\"range\"\n        class=\"mlv-color-picker__range-input\"\n        min=\"0\"\n        max=\"100\"\n        step=\"1\"\n        [value]=\"_getOpacityPercent()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onOpacityChange($event)\"\n        [attr.aria-label]=\"_i18n().opacity\"\n      />\n    </div>\n  </div>\n  }\n</div>\n\n@if (_supportedFormats().length === 1) {\n<ng-container\n  [ngTemplateOutlet]=\"modeInputs\"\n  [ngTemplateOutletContext]=\"{ $implicit: _supportedFormats()[0] }\"\n/>\n} @else {\n<mlv-tab-group\n  class=\"mlv-color-picker__format-tabs\"\n  mlvDensity=\"tight\"\n  [activeTab]=\"_inputMode()\"\n  (activeTabChange)=\"_setInputMode($event)\"\n>\n  @for (format of _supportedFormats(); track format) {\n  <mlv-tab [value]=\"format\">\n    <ng-template mlvTabDef>{{ format.toUpperCase() }}</ng-template>\n    <ng-template mlvTabContent>\n      <ng-container\n        [ngTemplateOutlet]=\"modeInputs\"\n        [ngTemplateOutletContext]=\"{ $implicit: format }\"\n      />\n    </ng-template>\n  </mlv-tab>\n  }\n</mlv-tab-group>\n}\n\n<ng-template #modeInputs let-mode>\n  <div class=\"mlv-color-picker__inputs\">\n    @switch (mode) { @case ('hex') {\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"text\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_hexInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHexInput($event)\"\n        [ariaLabel]=\"_i18n().hexColorValue\"\n        autocomplete=\"off\"\n        [maxLength]=\"9\"\n      />\n      <span class=\"mlv-color-picker__input-label\">HEX</span>\n    </div>\n    } @case ('rgb') {\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_rgbRInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onRgbRInput($event)\"\n        [min]=\"0\"\n        [max]=\"255\"\n        [ariaLabel]=\"_i18n().redChannel\"\n      />\n      <span class=\"mlv-color-picker__input-label\">R</span>\n    </div>\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_rgbGInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onRgbGInput($event)\"\n        [min]=\"0\"\n        [max]=\"255\"\n        [ariaLabel]=\"_i18n().greenChannel\"\n      />\n      <span class=\"mlv-color-picker__input-label\">G</span>\n    </div>\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_rgbBInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onRgbBInput($event)\"\n        [min]=\"0\"\n        [max]=\"255\"\n        [ariaLabel]=\"_i18n().blueChannel\"\n      />\n      <span class=\"mlv-color-picker__input-label\">B</span>\n    </div>\n    @if (showOpacity()) {\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_rgbAInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onRgbAInput($event)\"\n        [min]=\"0\"\n        [max]=\"1\"\n        [step]=\"0.01\"\n        [ariaLabel]=\"_i18n().alphaChannel\"\n      />\n      <span class=\"mlv-color-picker__input-label\">A</span>\n    </div>\n    } } @case ('hsl') {\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_hslHInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHslHInput($event)\"\n        [min]=\"0\"\n        [max]=\"360\"\n        [ariaLabel]=\"_i18n().hslHue\"\n      />\n      <span class=\"mlv-color-picker__input-label\">H</span>\n    </div>\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_hslSInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHslSInput($event)\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [ariaLabel]=\"_i18n().hslSaturation\"\n      />\n      <span class=\"mlv-color-picker__input-label\">S</span>\n    </div>\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_hslLInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHslLInput($event)\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [ariaLabel]=\"_i18n().hslLightness\"\n      />\n      <span class=\"mlv-color-picker__input-label\">L</span>\n    </div>\n    @if (showOpacity()) {\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_hslAInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHslAInput($event)\"\n        [min]=\"0\"\n        [max]=\"1\"\n        [step]=\"0.01\"\n        [ariaLabel]=\"_i18n().hslAlpha\"\n      />\n      <span class=\"mlv-color-picker__input-label\">A</span>\n    </div>\n    } } }\n  </div>\n</ng-template>\n", styles: ["@layer mlv.components{.mlv-color-picker{display:flex;flex-direction:column;gap:.75rem;width:16rem;padding:.75rem;background-color:var(--mlv-elevation-bg-2);border:.0625rem solid var(--mlv-border-subtle);border-radius:var(--mlv-radius-2xl);box-shadow:var(--mlv-shadow-raised);box-sizing:border-box;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-ui-s-size);-webkit-user-select:none;user-select:none}.mlv-color-picker__canvas-container{position:relative;width:100%;height:9rem;border-radius:var(--mlv-radius-m);overflow:hidden;cursor:crosshair;flex-shrink:0}.mlv-color-picker__canvas{display:block;width:100%;height:100%}.mlv-color-picker__canvas-thumb{position:absolute;width:.875rem;height:.875rem;border-radius:var(--mlv-radius-full);border:.125rem solid #fff;box-shadow:0 0 0 .0625rem #0006;transform:translate(-50%,-50%);pointer-events:none;box-sizing:border-box}.mlv-color-picker__sliders{display:flex;flex-direction:column;gap:.5rem}.mlv-color-picker__slider-row{display:flex;align-items:center;gap:.5rem}.mlv-color-picker__preview{width:1.5rem;height:1.5rem;border-radius:var(--mlv-radius-full);border:var(--mlv-stroke-width) solid var(--mlv-border-normal);flex-shrink:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:.5rem .5rem;background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0}.mlv-color-picker__slider-track{position:relative;flex:1;height:.75rem;border-radius:var(--mlv-radius-m)}.mlv-color-picker__slider-track--hue{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.mlv-color-picker__slider-track--opacity{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:.5rem .5rem;background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0}.mlv-color-picker__opacity-gradient{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.mlv-color-picker__range-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:transparent;cursor:pointer;appearance:none;z-index:1}.mlv-color-picker__range-input::-webkit-slider-runnable-track{height:.75rem;background:transparent;border-radius:var(--mlv-radius-m)}.mlv-color-picker__range-input::-moz-range-track{height:.75rem;background:transparent;border-radius:var(--mlv-radius-m)}.mlv-color-picker__range-input::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;border-radius:var(--mlv-radius-full);background:#fff;border:.125rem solid rgba(0,0,0,.15);box-shadow:0 .0625rem .25rem #00000059;cursor:grab;margin-top:-.125rem}.mlv-color-picker__range-input::-moz-range-thumb{width:1rem;height:1rem;border-radius:var(--mlv-radius-full);background:#fff;border:.125rem solid rgba(0,0,0,.15);box-shadow:0 .0625rem .25rem #00000059;cursor:grab}.mlv-color-picker__range-input:active::-webkit-slider-thumb,.mlv-color-picker__range-input:active::-moz-range-thumb{cursor:grabbing;box-shadow:0 .0625rem .375rem #00000073}.mlv-color-picker__range-input:focus-visible{outline:none}.mlv-color-picker__range-input:focus-visible::-webkit-slider-thumb{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-color-picker__range-input:focus-visible::-moz-range-thumb{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-color-picker__range-input:disabled{cursor:not-allowed}.mlv-color-picker__range-input:disabled::-webkit-slider-thumb,.mlv-color-picker__range-input:disabled::-moz-range-thumb{cursor:not-allowed}.mlv-color-picker__format-tabs{min-width:0}.mlv-color-picker__format-tabs>.mlv-tab-group__header>.mlv-tab-item{flex:1;justify-content:center;font-weight:600}.mlv-color-picker__format-tabs>.mlv-tab-group__body{padding-top:var(--mlv-spacing-2)}.mlv-color-picker__inputs{display:flex;gap:.375rem}.mlv-color-picker__input-group{display:flex;flex-direction:column;gap:.125rem;flex:1;min-width:0}.mlv-color-picker__input-label{font-size:var(--mlv-typography-caption-size);color:var(--mlv-text-secondary);text-align:center;display:block;font-weight:500}.mlv-color-picker--disabled{opacity:var(--mlv-disabled-opacity);pointer-events:none}.mlv-color-picker--disabled .mlv-color-picker__canvas-container{cursor:not-allowed}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvTab, selector: "mlv-tab", inputs: ["value", "disabled", "linkActiveOptions"] }, { kind: "directive", type: MlvTabContentDef, selector: "[mlvTabContent]" }, { kind: "directive", type: MlvTabDef, selector: "[mlvTabDef]" }, { kind: "component", type: MlvTabGroup, selector: "mlv-tab-group", inputs: ["orientation", "activeTab", "appearance"], outputs: ["orientationChange", "activeTabChange"] }, { kind: "component", type: MlvInput, selector: "mlv-input", inputs: ["type", "placeholder", "autocomplete", "inputMode", "maxLength", "minLength", "pattern", "name", "autofocus", "min", "max", "step", "bare", "projectControl", "role", "ariaExpanded", "ariaHasPopup", "ariaAutocomplete", "ariaControls", "ariaActiveDescendant", "ariaDescribedBy", "value"], outputs: ["valueChange", "inputFocus", "inputBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-color-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        MlvTab,
+                        MlvTabContentDef,
+                        MlvTabDef,
+                        MlvTabGroup,
+                        MlvInput,
+                    ], providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvColorPicker),
+                        },
+                    ], host: {
+                        class: 'mlv-color-picker',
+                        '[class.mlv-color-picker--disabled]': 'computedDisabled()',
+                        '(focusout)': '_markTouched()',
+                    }, template: "<div class=\"mlv-color-picker__canvas-container\" #slContainer>\n  <canvas\n    #slCanvas\n    class=\"mlv-color-picker__canvas\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    (pointerdown)=\"_onCanvasPointerDown($event)\"\n  ></canvas>\n  <div\n    class=\"mlv-color-picker__canvas-thumb\"\n    [style.left]=\"_getThumbLeft()\"\n    [style.top]=\"_getThumbTop()\"\n    aria-hidden=\"true\"\n  ></div>\n</div>\n\n<div class=\"mlv-color-picker__sliders\">\n  <!-- Hue slider -->\n  <div class=\"mlv-color-picker__slider-row\">\n    <div\n      class=\"mlv-color-picker__preview\"\n      [style.background-color]=\"_rgbaString()\"\n      aria-hidden=\"true\"\n    ></div>\n    <div\n      class=\"mlv-color-picker__slider-track mlv-color-picker__slider-track--hue\"\n    >\n      <input\n        type=\"range\"\n        class=\"mlv-color-picker__range-input\"\n        min=\"0\"\n        max=\"360\"\n        step=\"1\"\n        [value]=\"_getHue()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHueChange($event)\"\n        [attr.aria-label]=\"_i18n().hue\"\n      />\n    </div>\n  </div>\n\n  <!-- Opacity slider -->\n  @if (showOpacity()) {\n  <div class=\"mlv-color-picker__slider-row\">\n    <div\n      class=\"mlv-color-picker__slider-track mlv-color-picker__slider-track--opacity\"\n    >\n      <div\n        class=\"mlv-color-picker__opacity-gradient\"\n        [style.background]=\"'linear-gradient(to right, transparent, ' + _hueColor() + ')'\"\n        aria-hidden=\"true\"\n      ></div>\n      <input\n        type=\"range\"\n        class=\"mlv-color-picker__range-input\"\n        min=\"0\"\n        max=\"100\"\n        step=\"1\"\n        [value]=\"_getOpacityPercent()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onOpacityChange($event)\"\n        [attr.aria-label]=\"_i18n().opacity\"\n      />\n    </div>\n  </div>\n  }\n</div>\n\n@if (_supportedFormats().length === 1) {\n<ng-container\n  [ngTemplateOutlet]=\"modeInputs\"\n  [ngTemplateOutletContext]=\"{ $implicit: _supportedFormats()[0] }\"\n/>\n} @else {\n<mlv-tab-group\n  class=\"mlv-color-picker__format-tabs\"\n  mlvDensity=\"tight\"\n  [activeTab]=\"_inputMode()\"\n  (activeTabChange)=\"_setInputMode($event)\"\n>\n  @for (format of _supportedFormats(); track format) {\n  <mlv-tab [value]=\"format\">\n    <ng-template mlvTabDef>{{ format.toUpperCase() }}</ng-template>\n    <ng-template mlvTabContent>\n      <ng-container\n        [ngTemplateOutlet]=\"modeInputs\"\n        [ngTemplateOutletContext]=\"{ $implicit: format }\"\n      />\n    </ng-template>\n  </mlv-tab>\n  }\n</mlv-tab-group>\n}\n\n<ng-template #modeInputs let-mode>\n  <div class=\"mlv-color-picker__inputs\">\n    @switch (mode) { @case ('hex') {\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"text\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_hexInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHexInput($event)\"\n        [ariaLabel]=\"_i18n().hexColorValue\"\n        autocomplete=\"off\"\n        [maxLength]=\"9\"\n      />\n      <span class=\"mlv-color-picker__input-label\">HEX</span>\n    </div>\n    } @case ('rgb') {\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_rgbRInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onRgbRInput($event)\"\n        [min]=\"0\"\n        [max]=\"255\"\n        [ariaLabel]=\"_i18n().redChannel\"\n      />\n      <span class=\"mlv-color-picker__input-label\">R</span>\n    </div>\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_rgbGInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onRgbGInput($event)\"\n        [min]=\"0\"\n        [max]=\"255\"\n        [ariaLabel]=\"_i18n().greenChannel\"\n      />\n      <span class=\"mlv-color-picker__input-label\">G</span>\n    </div>\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_rgbBInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onRgbBInput($event)\"\n        [min]=\"0\"\n        [max]=\"255\"\n        [ariaLabel]=\"_i18n().blueChannel\"\n      />\n      <span class=\"mlv-color-picker__input-label\">B</span>\n    </div>\n    @if (showOpacity()) {\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_rgbAInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onRgbAInput($event)\"\n        [min]=\"0\"\n        [max]=\"1\"\n        [step]=\"0.01\"\n        [ariaLabel]=\"_i18n().alphaChannel\"\n      />\n      <span class=\"mlv-color-picker__input-label\">A</span>\n    </div>\n    } } @case ('hsl') {\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_hslHInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHslHInput($event)\"\n        [min]=\"0\"\n        [max]=\"360\"\n        [ariaLabel]=\"_i18n().hslHue\"\n      />\n      <span class=\"mlv-color-picker__input-label\">H</span>\n    </div>\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_hslSInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHslSInput($event)\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [ariaLabel]=\"_i18n().hslSaturation\"\n      />\n      <span class=\"mlv-color-picker__input-label\">S</span>\n    </div>\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_hslLInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHslLInput($event)\"\n        [min]=\"0\"\n        [max]=\"100\"\n        [ariaLabel]=\"_i18n().hslLightness\"\n      />\n      <span class=\"mlv-color-picker__input-label\">L</span>\n    </div>\n    @if (showOpacity()) {\n    <div class=\"mlv-color-picker__input-group\">\n      <mlv-input\n        type=\"number\"\n        class=\"mlv-color-picker__text-input\"\n        [value]=\"_hslAInput()\"\n        [disabled]=\"computedDisabled()\"\n        (input)=\"_onHslAInput($event)\"\n        [min]=\"0\"\n        [max]=\"1\"\n        [step]=\"0.01\"\n        [ariaLabel]=\"_i18n().hslAlpha\"\n      />\n      <span class=\"mlv-color-picker__input-label\">A</span>\n    </div>\n    } } }\n  </div>\n</ng-template>\n", styles: ["@layer mlv.components{.mlv-color-picker{display:flex;flex-direction:column;gap:.75rem;width:16rem;padding:.75rem;background-color:var(--mlv-elevation-bg-2);border:.0625rem solid var(--mlv-border-subtle);border-radius:var(--mlv-radius-2xl);box-shadow:var(--mlv-shadow-raised);box-sizing:border-box;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-ui-s-size);-webkit-user-select:none;user-select:none}.mlv-color-picker__canvas-container{position:relative;width:100%;height:9rem;border-radius:var(--mlv-radius-m);overflow:hidden;cursor:crosshair;flex-shrink:0}.mlv-color-picker__canvas{display:block;width:100%;height:100%}.mlv-color-picker__canvas-thumb{position:absolute;width:.875rem;height:.875rem;border-radius:var(--mlv-radius-full);border:.125rem solid #fff;box-shadow:0 0 0 .0625rem #0006;transform:translate(-50%,-50%);pointer-events:none;box-sizing:border-box}.mlv-color-picker__sliders{display:flex;flex-direction:column;gap:.5rem}.mlv-color-picker__slider-row{display:flex;align-items:center;gap:.5rem}.mlv-color-picker__preview{width:1.5rem;height:1.5rem;border-radius:var(--mlv-radius-full);border:var(--mlv-stroke-width) solid var(--mlv-border-normal);flex-shrink:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:.5rem .5rem;background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0}.mlv-color-picker__slider-track{position:relative;flex:1;height:.75rem;border-radius:var(--mlv-radius-m)}.mlv-color-picker__slider-track--hue{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.mlv-color-picker__slider-track--opacity{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:.5rem .5rem;background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0}.mlv-color-picker__opacity-gradient{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.mlv-color-picker__range-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:transparent;cursor:pointer;appearance:none;z-index:1}.mlv-color-picker__range-input::-webkit-slider-runnable-track{height:.75rem;background:transparent;border-radius:var(--mlv-radius-m)}.mlv-color-picker__range-input::-moz-range-track{height:.75rem;background:transparent;border-radius:var(--mlv-radius-m)}.mlv-color-picker__range-input::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;border-radius:var(--mlv-radius-full);background:#fff;border:.125rem solid rgba(0,0,0,.15);box-shadow:0 .0625rem .25rem #00000059;cursor:grab;margin-top:-.125rem}.mlv-color-picker__range-input::-moz-range-thumb{width:1rem;height:1rem;border-radius:var(--mlv-radius-full);background:#fff;border:.125rem solid rgba(0,0,0,.15);box-shadow:0 .0625rem .25rem #00000059;cursor:grab}.mlv-color-picker__range-input:active::-webkit-slider-thumb,.mlv-color-picker__range-input:active::-moz-range-thumb{cursor:grabbing;box-shadow:0 .0625rem .375rem #00000073}.mlv-color-picker__range-input:focus-visible{outline:none}.mlv-color-picker__range-input:focus-visible::-webkit-slider-thumb{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-color-picker__range-input:focus-visible::-moz-range-thumb{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-color-picker__range-input:disabled{cursor:not-allowed}.mlv-color-picker__range-input:disabled::-webkit-slider-thumb,.mlv-color-picker__range-input:disabled::-moz-range-thumb{cursor:not-allowed}.mlv-color-picker__format-tabs{min-width:0}.mlv-color-picker__format-tabs>.mlv-tab-group__header>.mlv-tab-item{flex:1;justify-content:center;font-weight:600}.mlv-color-picker__format-tabs>.mlv-tab-group__body{padding-top:var(--mlv-spacing-2)}.mlv-color-picker__inputs{display:flex;gap:.375rem}.mlv-color-picker__input-group{display:flex;flex-direction:column;gap:.125rem;flex:1;min-width:0}.mlv-color-picker__input-label{font-size:var(--mlv-typography-caption-size);color:var(--mlv-text-secondary);text-align:center;display:block;font-weight:500}.mlv-color-picker--disabled{opacity:var(--mlv-disabled-opacity);pointer-events:none}.mlv-color-picker--disabled .mlv-color-picker__canvas-container{cursor:not-allowed}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], showOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOpacity", required: false }] }], defaultMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMode", required: false }] }], supportedFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedFormats", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], _canvasRef: [{ type: i0.ViewChild, args: ['slCanvas', { isSignal: true }] }], _canvasContainerRef: [{ type: i0.ViewChild, args: ['slContainer', { isSignal: true }] }] } });
+
+/**
+ * Input-like CSS color control that opens the full `mlv-color-picker` in a
+ * connected popup with a light-dismiss backdrop.
+ *
+ * The editable draft stays separate from the committed forms value. Valid
+ * concrete colors and `var(--custom-property)` references commit on blur or
+ * popup close by default; `live` publishes every valid draft immediately.
+ * Invalid drafts roll back to the most recent valid draft.
+ */
+class MlvColorPickerPopup extends MlvSignalFormControlBase {
+    /** The committed CSS color string used by all Angular forms APIs. */
+    value = model('#ff0000', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Visual trigger presentation. Field mode preserves the input-like control. */
+    presentation = input('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable connected-overlay state. */
+    opened = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    /** Emits after the detached picker panel has opened. */
+    afterOpened = output();
+    /** Emits after the detached picker panel has closed and torn down. */
+    afterClosed = output();
+    /** Whether to show the opacity slider inside the picker. */
+    showOpacity = input(true, { ...(ngDevMode ? { debugName: "showOpacity" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** The default input mode for the picker's text tabs. */
+    defaultMode = input('hex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultMode" }] : /* istanbul ignore next */ []));
+    /** Available picker formats, in display order. */
+    supportedFormats = input([
+        'hex',
+        'rgb',
+        'hsl',
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "supportedFormats" }] : /* istanbul ignore next */ []));
+    /** Whether every valid draft is published immediately. */
+    live = input(false, { ...(ngDevMode ? { debugName: "live" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Emits when user interaction commits a new CSS color string. */
+    colorChange = output();
+    /** Whether the committed value is non-empty and can be cleared. */
+    hasValue = computed(() => this.value().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Suppresses the wrapper-owned clear affordance while readonly. Disabled
+     * wrappers already suppress pointer interaction through their shared state.
+     */
+    ownsClearButton = computed(() => this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownsClearButton" }] : /* istanbul ignore next */ []));
+    /** @protected Injected i18n translations for the color picker. */
+    _i18n = inject(MLV_COLOR_PICKER_I18N);
+    /** @protected Localized copy used by the swatch-mode clear action. */
+    _formI18n = inject(MLV_FORM_UTILS_I18N);
+    /** @private Resolver for ICU parameterized i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /** @protected Whether the connected popup is open. */
+    /** Keep the wrapper focus treatment active while its popup is visible. */
+    focused = computed(() => this._focused() || this.opened(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** @protected Editable text that has not necessarily been committed. */
+    _draftValue = signal(this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_draftValue" }] : /* istanbul ignore next */ []));
+    /** @private Most recent valid draft used for invalid-input rollback. */
+    _lastValidDraft = signal(this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lastValidDraft" }] : /* istanbul ignore next */ []));
+    /** @protected Concrete color used to initialize the visual picker. */
+    _pickerValue = signal('#ff0000', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pickerValue" }] : /* istanbul ignore next */ []));
+    /** @protected Stable id linked from the input's `aria-controls`. */
+    _panelId = mlvNextId('mlv-color-picker-popup-panel');
+    /** @protected Stable id used by the input's `aria-describedby`. */
+    /**
+     * @protected Resolved accessible name for the swatch button, e.g.
+     * "Pick color: #ff0000".
+     */
+    _pickColorLabel = computed(() => this._resolver.resolve(this._i18n(), 'pickColor', { color: this._draftValue() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pickColorLabel" }] : /* istanbul ignore next */ []));
+    /** @private Native input used for synchronous rollback of invalid drafts. */
+    _inputRef = viewChild('nativeInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_inputRef" }] : /* istanbul ignore next */ []));
+    /** @private Rounded color square used for computed CSS-variable resolution. */
+    _fieldSwatchColorRef = viewChild('fieldSwatchColor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fieldSwatchColorRef" }] : /* istanbul ignore next */ []));
+    /** @private Swatch-only presentation color layer. */
+    _swatchTriggerColorRef = viewChild('swatchTriggerColor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_swatchTriggerColorRef" }] : /* istanbul ignore next */ []));
+    /** @private Field-mode swatch button used for keyboard focus restoration. */
+    _fieldSwatchButtonRef = viewChild('fieldSwatchButton', {
+        read: ElementRef,
+    });
+    /** @private Swatch-mode Malva trigger used by detached composition. */
+    _swatchTriggerRef = viewChild('swatchTrigger', {
+        read: ElementRef,
+    });
+    /** @private Field-mode detached picker surface. */
+    _fieldPanelRef = viewChild('fieldPickerPanel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fieldPanelRef" }] : /* istanbul ignore next */ []));
+    /** @private Swatch-mode detached picker surface. */
+    _swatchPanelRef = viewChild('swatchPickerPanel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_swatchPanelRef" }] : /* istanbul ignore next */ []));
+    /** Public trigger element for toolbar/composite registration. */
+    triggerElement = computed(() => (this.presentation() !== 'field'
+        ? this._swatchTriggerRef()
+        : this._fieldSwatchButtonRef())?.nativeElement ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerElement" }] : /* istanbul ignore next */ []));
+    /** Public detached panel element for overlay ownership registration. */
+    panelElement = computed(() => (this.presentation() !== 'field'
+        ? this._swatchPanelRef()
+        : this._fieldPanelRef())?.nativeElement ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelElement" }] : /* istanbul ignore next */ []));
+    /** @private Locates the first tabbable picker control for keyboard opening. */
+    _tabbable = inject(MlvTabbableElementService);
+    /** @private Whether the next completed close should restore swatch focus. */
+    _restoreSwatchFocus = false;
+    /** @private Whether `afterOpened` should transfer focus into the picker. */
+    _focusPickerAfterOpen = false;
+    /** @private Whether the shared overlay is attached or playing its leave animation. */
+    _popupAttached = false;
+    /** @private Previous open state used to detect every close request once. */
+    _wasOpen = false;
+    /** @private Reopens after a click/focus that occurs during the leave animation. */
+    _reopenAfterClose = false;
+    constructor() {
+        super();
+        // External form/model writes replace all local draft state.
+        effect(() => {
+            const committed = this.value();
+            this._draftValue.set(committed);
+            this._lastValidDraft.set(committed);
+            if (untracked(() => this.opened())) {
+                const swatch = this._swatchColorElement();
+                if (swatch) {
+                    swatch.style.backgroundColor = committed || 'transparent';
+                }
+                this._syncPickerValue(committed);
+            }
+        });
+        // State changes can make an already-open picker inert. Close it
+        // immediately and discard any uncommitted draft in that case.
+        effect(() => {
+            if (!this._isInert() || !this.opened())
+                return;
+            this._restoreCommittedValue();
+            this._focusPickerAfterOpen = false;
+            this._restoreSwatchFocus = false;
+            this.opened.set(false);
+        });
+        // Commit at close intent rather than after the leave animation. This covers
+        // backdrop, Escape, programmatic, and reduced-motion close paths uniformly.
+        effect(() => {
+            const isOpen = this.opened();
+            const inert = this._isInert();
+            if (this._wasOpen && !isOpen && !inert) {
+                untracked(() => this._commitDraft());
+            }
+            this._wasOpen = isOpen;
+        });
+    }
+    /** @protected Stores text input without publishing a partial forms value. */
+    _onInput(event) {
+        if (this._isInert())
+            return;
+        const draft = event.target.value;
+        this._setDraftValue(draft);
+        if (draft === '' || isCssColorValue(draft)) {
+            this._lastValidDraft.set(draft);
+            if (this.live())
+                this._commitValue(draft);
+        }
+    }
+    /** @protected Opens the popup when the editable field receives focus. */
+    _onInputFocus() {
+        this.setFocused(true);
+        if (this._isInert())
+            return;
+        this._restoreSwatchFocus = false;
+        this._open(false);
+    }
+    /**
+     * @protected Reopens after Escape when the input retained focus (and thus
+     * cannot emit another native focus event).
+     */
+    _onInputClick() {
+        if (this._isInert())
+            return;
+        this._restoreSwatchFocus = false;
+        this._open(false);
+    }
+    /** @protected Commits or rolls back the draft when focus leaves the input. */
+    _onInputBlur() {
+        this.setFocused(false);
+        if (this._isInert())
+            return;
+        this._commitDraft();
+        this._markTouched();
+    }
+    /** @protected Closes the popup from the input on Escape. */
+    _onInputKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this._restoreSwatchFocus = false;
+            this.opened.set(false);
+            this._markTouched();
+        }
+    }
+    /**
+     * @protected Opens from the rounded square. Keyboard activation opts into
+     * focus transfer; pointer activation leaves focus on the trigger.
+     */
+    _openFromSwatch(focusPicker = false) {
+        if (this._isInert())
+            return;
+        if (this.presentation() !== 'field')
+            this._restoreSwatchFocus = true;
+        if (focusPicker) {
+            this._focusPickerAfterOpen = true;
+            this._restoreSwatchFocus = true;
+        }
+        this._open(focusPicker);
+    }
+    /** @private Opens the connected popup and refreshes the picker's color. */
+    _open(focusPicker) {
+        if (this._isInert())
+            return;
+        this._syncPickerValue(this._draftValue());
+        // PopupContainer keeps the overlay attached while its leave animation
+        // runs. Queue a fresh attach instead of toggling the model back to true:
+        // the closing handle would otherwise finish and overwrite it with false.
+        if (!this.opened() && this._popupAttached) {
+            this._reopenAfterClose = true;
+            return;
+        }
+        if (this.opened()) {
+            if (focusPicker)
+                queueMicrotask(() => this._focusPicker());
+            return;
+        }
+        this.opened.set(true);
+    }
+    /** @protected Performs post-attach focus work requested by keyboard opening. */
+    _onPopupOpened() {
+        this._popupAttached = true;
+        this.afterOpened.emit();
+        if (!this._focusPickerAfterOpen)
+            return;
+        this._focusPickerAfterOpen = false;
+        queueMicrotask(() => this._focusPicker());
+    }
+    /** @protected Restores swatch focus only for keyboard/panel close flows. */
+    _onPopupClosed() {
+        this._popupAttached = false;
+        if (this._reopenAfterClose) {
+            this._reopenAfterClose = false;
+            this._open(this._focusPickerAfterOpen);
+            return;
+        }
+        if (this._restoreSwatchFocus) {
+            this._restoreSwatchFocus = false;
+            this.triggerElement()?.focus();
+        }
+        this.afterClosed.emit();
+    }
+    /** @protected Closes from the panel and commits the current draft. */
+    _onPanelEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._restoreSwatchFocus = true;
+        this.opened.set(false);
+        this._markTouched();
+    }
+    /** @protected Clears the committed forms value through the shared X button. */
+    _clearValue() {
+        if (this._isInert())
+            return;
+        this._lastValidDraft.set('');
+        this._commitValue('');
+    }
+    /** @protected Updates the picker draft and optionally publishes it live. */
+    _onColorChange(cssColor) {
+        if (this._isInert())
+            return;
+        this._lastValidDraft.set(cssColor);
+        this._setDraftValue(cssColor);
+        if (this.live())
+            this._commitValue(cssColor);
+    }
+    /** @private Commits valid/empty input or the most recent valid draft. */
+    _commitDraft() {
+        const draft = this._draftValue().trim();
+        if (draft === '' || isCssColorValue(draft)) {
+            this._lastValidDraft.set(draft);
+            this._commitValue(draft);
+            return;
+        }
+        const lastValid = this._lastValidDraft();
+        this._setDraftValue(lastValid);
+        const input = this._inputRef()?.nativeElement;
+        if (input)
+            input.value = lastValid;
+        this._commitValue(lastValid);
+    }
+    /**
+     * @private Restores local state from the committed value without publishing.
+     */
+    _restoreCommittedValue() {
+        const committed = this.value();
+        this._lastValidDraft.set(committed);
+        this._setDraftValue(committed);
+        const input = this._inputRef()?.nativeElement;
+        if (input)
+            input.value = committed;
+    }
+    /** @private Synchronizes all visual draft consumers without committing. */
+    _setDraftValue(value) {
+        this._draftValue.set(value);
+        const swatch = this._swatchColorElement();
+        if (swatch)
+            swatch.style.backgroundColor = value || 'transparent';
+        this._syncPickerValue(value);
+    }
+    /** @private Publishes one committed user change across forms and output. */
+    _commitValue(value) {
+        this._setDraftValue(value);
+        this._lastValidDraft.set(value);
+        if (value === this.value())
+            return;
+        this.value.set(value);
+        this.colorChange.emit(value);
+    }
+    /**
+     * @private Initializes the visual picker without replacing the committed
+     * source string. Concrete formats pass through. CSS variables are resolved
+     * from the swatch's computed background in the trigger's cascade.
+     */
+    _syncPickerValue(source = this._draftValue()) {
+        if (tryParseCssColor(source)) {
+            this._pickerValue.set(source);
+            return;
+        }
+        const swatch = this._swatchColorElement();
+        const resolved = swatch ? getComputedStyle(swatch).backgroundColor : '';
+        this._pickerValue.set(tryParseCssColor(resolved) ? resolved : '#ff0000');
+    }
+    /** @private Moves focus into the picker after a keyboard swatch activation. */
+    _focusPicker() {
+        const panel = document.getElementById(this._panelId);
+        if (!panel)
+            return;
+        const first = this._tabbable.getTabbableElement(panel, false, true);
+        (first ?? panel).focus();
+    }
+    /** @private Current presentation's rendered colour layer. */
+    _swatchColorElement() {
+        const ref = this.presentation() === 'swatch'
+            ? this._swatchTriggerColorRef()
+            : this.presentation() === 'field'
+                ? this._fieldSwatchColorRef()
+                : undefined;
+        return ref?.nativeElement;
+    }
+    /** @private Whether disabled/readonly state blocks all user mutation. */
+    _isInert() {
+        return this.computedDisabled() || this.readonly();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvColorPickerPopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvColorPickerPopup, isStandalone: true, selector: "mlv-color-picker-popup", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, showOpacity: { classPropertyName: "showOpacity", publicName: "showOpacity", isSignal: true, isRequired: false, transformFunction: null }, defaultMode: { classPropertyName: "defaultMode", publicName: "defaultMode", isSignal: true, isRequired: false, transformFunction: null }, supportedFormats: { classPropertyName: "supportedFormats", publicName: "supportedFormats", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "openedChange", afterOpened: "afterOpened", afterClosed: "afterClosed", colorChange: "colorChange" }, host: { properties: { "class": "\"mlv-color-picker-popup--state-\" + resolvedState()", "class.mlv-color-picker-popup--disabled": "computedDisabled()", "class.mlv-color-picker-popup--readonly": "readonly()", "class.mlv-color-picker-popup--open": "opened()", "class.mlv-color-picker-popup--swatch": "presentation() !== \"field\"" }, classAttribute: "mlv-color-picker-popup" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvColorPickerPopup),
+            },
+        ], viewQueries: [{ propertyName: "_inputRef", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }, { propertyName: "_fieldSwatchColorRef", first: true, predicate: ["fieldSwatchColor"], descendants: true, isSignal: true }, { propertyName: "_swatchTriggerColorRef", first: true, predicate: ["swatchTriggerColor"], descendants: true, isSignal: true }, { propertyName: "_fieldSwatchButtonRef", first: true, predicate: ["fieldSwatchButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_swatchTriggerRef", first: true, predicate: ["swatchTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_fieldPanelRef", first: true, predicate: ["fieldPickerPanel"], descendants: true, isSignal: true }, { propertyName: "_swatchPanelRef", first: true, predicate: ["swatchPickerPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (presentation() === 'field') {\n<mlv-form-control-wrapper (clear)=\"_clearValue()\">\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    <mlv-popup-container class=\"mlv-color-picker-popup__popup-container\">\n      <div class=\"mlv-color-picker-popup__control\">\n        <input\n          #nativeInput\n          class=\"mlv-color-picker-popup__input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [id]=\"id()\"\n          [value]=\"_draftValue()\"\n          [disabled]=\"computedDisabled()\"\n          [readOnly]=\"readonly()\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"opened()\"\n          [attr.aria-controls]=\"opened() ? _panelId : null\"\n          [attr.aria-invalid]=\"resolvedState() === 'error'\"\n          [attr.aria-required]=\"required() || null\"\n          [attr.aria-describedby]=\"_describedBy()\"\n          [attr.aria-label]=\"label() ? null : (ariaLabel() ?? _i18n().colorPicker)\"\n          (input)=\"_onInput($event)\"\n          (focus)=\"_onInputFocus()\"\n          (click)=\"_onInputClick()\"\n          (blur)=\"_onInputBlur()\"\n          (keydown)=\"_onInputKeydown($event)\"\n        />\n\n        <button\n          #fieldSwatchButton\n          class=\"mlv-color-picker-popup__swatch-button\"\n          type=\"button\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"opened()\"\n          [attr.aria-controls]=\"opened() ? _panelId : null\"\n          [attr.aria-label]=\"_pickColorLabel()\"\n          (click)=\"_openFromSwatch()\"\n          (keydown.enter)=\"_openFromSwatch(true); $event.preventDefault()\"\n          (keydown.space)=\"_openFromSwatch(true); $event.preventDefault()\"\n        >\n          <span class=\"mlv-color-picker-popup__swatch\" aria-hidden=\"true\">\n            <span\n              #fieldSwatchColor\n              class=\"mlv-color-picker-popup__swatch-color\"\n              [style.background-color]=\"_draftValue() || 'transparent'\"\n            ></span>\n          </span>\n        </button>\n      </div>\n\n      <mlv-popup\n        [(opened)]=\"opened\"\n        [position]=\"['bottom-start', 'top-start']\"\n        [restrictPosition]=\"false\"\n        [hasBackdrop]=\"true\"\n        [hasShadow]=\"true\"\n        panelRole=\"dialog\"\n        [ariaLabel]=\"_i18n().colorPicker\"\n        class=\"mlv-color-picker-popup__overlay\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div\n            #fieldPickerPanel\n            class=\"mlv-color-picker-popup__panel\"\n            [id]=\"_panelId\"\n            tabindex=\"-1\"\n            (keydown.escape)=\"_onPanelEscape($event)\"\n          >\n            <mlv-color-picker\n              [value]=\"_pickerValue()\"\n              [showOpacity]=\"!!showOpacity()\"\n              [defaultMode]=\"defaultMode()\"\n              [supportedFormats]=\"supportedFormats()\"\n              [disabled]=\"computedDisabled() || readonly()\"\n              (colorChange)=\"_onColorChange($event)\"\n            />\n          </div>\n        </ng-template>\n      </mlv-popup>\n    </mlv-popup-container>\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [attr.id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n} @else {\n<mlv-popup-container class=\"mlv-color-picker-popup__popup-container\">\n  <button\n    #swatchTrigger\n    mlvButton\n    class=\"mlv-color-picker-popup__swatch-trigger\"\n    type=\"button\"\n    shape=\"square\"\n    mlvDensity=\"tight\"\n    variant=\"transparent\"\n    [disabled]=\"computedDisabled() || readonly()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"opened()\"\n    [attr.aria-controls]=\"opened() ? _panelId : null\"\n    [attr.aria-label]=\"ariaLabel() ?? _pickColorLabel()\"\n    [mlvTooltip]=\"ariaLabel() ?? _pickColorLabel()\"\n    (click)=\"_openFromSwatch()\"\n    (keydown.enter)=\"_openFromSwatch(true); $event.preventDefault()\"\n    (keydown.space)=\"_openFromSwatch(true); $event.preventDefault()\"\n  >\n    @if (presentation() === 'icon') {\n    <span mlvButtonIcon>\n      <ng-content />\n    </span>\n    } @else {\n    <span class=\"mlv-color-picker-popup__swatch\" aria-hidden=\"true\">\n      <span\n        #swatchTriggerColor\n        class=\"mlv-color-picker-popup__swatch-color\"\n        [style.background-color]=\"_draftValue() || 'transparent'\"\n      ></span>\n    </span>\n    }\n  </button>\n\n  <mlv-popup\n    [(opened)]=\"opened\"\n    [position]=\"['bottom-start', 'top-start']\"\n    [restrictPosition]=\"false\"\n    [hasBackdrop]=\"true\"\n    [hasShadow]=\"true\"\n    panelRole=\"dialog\"\n    [ariaLabel]=\"ariaLabel() ?? _i18n().colorPicker\"\n    class=\"mlv-color-picker-popup__overlay\"\n    (afterOpened)=\"_onPopupOpened()\"\n    (afterClosed)=\"_onPopupClosed()\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        #swatchPickerPanel\n        class=\"mlv-color-picker-popup__panel\"\n        [id]=\"_panelId\"\n        tabindex=\"-1\"\n        (keydown.escape)=\"_onPanelEscape($event)\"\n      >\n        <mlv-color-picker\n          [value]=\"_pickerValue()\"\n          [showOpacity]=\"!!showOpacity()\"\n          [defaultMode]=\"defaultMode()\"\n          [supportedFormats]=\"supportedFormats()\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          (colorChange)=\"_onColorChange($event)\"\n        />\n        @if (clearable() && hasValue()) {\n        <button\n          mlvButton\n          class=\"mlv-color-picker-popup__clear\"\n          type=\"button\"\n          variant=\"secondary\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          (click)=\"_clearValue()\"\n        >\n          {{ _formI18n().clear }}\n        </button>\n        }\n      </div>\n    </ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n}\n", styles: ["@layer mlv.components{.mlv-color-picker-popup{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-color-picker-popup *{box-sizing:border-box}.mlv-color-picker-popup,.mlv-color-picker-popup__popup-container,.mlv-color-picker-popup__control{display:block;width:100%}.mlv-color-picker-popup__control{display:flex;align-items:center;min-width:0}.mlv-color-picker-popup__input{position:relative;display:block;flex:1 1 auto;width:100%;min-width:0;height:100%;padding:var(--mlv-spacing-1);border:0;outline:0;appearance:none;background:transparent;color:var(--mlv-text-primary);font:inherit}.mlv-color-picker-popup__input::placeholder{color:var(--mlv-text-tertiary)}.mlv-color-picker-popup__input:read-only{cursor:default}.mlv-color-picker-popup__swatch-button{display:inline-grid;flex:0 0 auto;width:1.75rem;height:1.75rem;margin-inline-start:var(--mlv-spacing-1);padding:.1875rem;place-items:center;border:0;border-radius:var(--mlv-radius-s);outline:0;background:transparent;cursor:pointer}.mlv-color-picker-popup__swatch-button:hover:not(:disabled){background-color:var(--mlv-background-neutral-1-hover)}.mlv-color-picker-popup__swatch-button:focus-visible{box-shadow:var(--mlv-focus-ring)}.mlv-color-picker-popup__swatch-button:disabled{cursor:not-allowed}.mlv-color-picker-popup__swatch-trigger{padding:var(--mlv-padding-xs)}.mlv-color-picker-popup__swatch{position:relative;display:block;width:1.375rem;height:1.375rem;overflow:hidden;border:var(--mlv-stroke-width) solid var(--mlv-border-normal);border-radius:var(--mlv-radius-xs, var(--mlv-radius-s));background-color:var(--mlv-background-base);background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0;background-size:.5rem .5rem}.mlv-color-picker-popup__swatch-color{position:absolute;inset:0}.mlv-color-picker-popup__panel{width:min(16rem,100vw - 3.5rem);padding:var(--mlv-popover-inset)}.mlv-color-picker-popup__panel .mlv-color-picker{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.mlv-color-picker-popup__clear{width:100%;margin-block-start:var(--mlv-spacing-2)}.mlv-color-picker-popup--swatch{display:inline-flex;width:auto}.mlv-color-picker-popup--disabled{opacity:var(--mlv-disabled-opacity)}}\n"], dependencies: [{ kind: "component", type: MlvColorPicker, selector: "mlv-color-picker", inputs: ["value", "showOpacity", "defaultMode", "supportedFormats"], outputs: ["valueChange", "colorChange"] }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "directive", type: MlvTooltip, selector: "[mlvTooltip]", inputs: ["mlvTooltip", "tooltipPlacement", "tooltipTone", "tooltipDelay", "tooltipDisabled", "tooltipArrow"] }, { kind: "component", type: MlvFormControlWrapper, selector: "mlv-form-control-wrapper", outputs: ["clear"] }, { kind: "directive", type: MlvFormControlWrapperControl, selector: "[mlvFormControlWrapperControl]" }, { kind: "component", type: MlvHint, selector: "mlv-hint" }, { kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "component", type: MlvPopupContainer, selector: "mlv-popup-container" }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "directive", type: MlvButtonIcon, selector: "[mlvButtonIcon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvColorPickerPopup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-color-picker-popup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MlvColorPicker,
+                        MlvButton,
+                        MlvTooltip,
+                        MlvFormControlWrapper,
+                        MlvFormControlWrapperControl,
+                        MlvHint,
+                        MlvDescription,
+                        MlvLabel,
+                        MlvMessage,
+                        MlvPopup,
+                        MlvPopupContainer,
+                        MlvPopupContent,
+                        MlvButtonIcon,
+                    ], providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvColorPickerPopup),
+                        },
+                    ], host: {
+                        class: 'mlv-color-picker-popup',
+                        '[class]': '"mlv-color-picker-popup--state-" + resolvedState()',
+                        '[class.mlv-color-picker-popup--disabled]': 'computedDisabled()',
+                        '[class.mlv-color-picker-popup--readonly]': 'readonly()',
+                        '[class.mlv-color-picker-popup--open]': 'opened()',
+                        '[class.mlv-color-picker-popup--swatch]': 'presentation() !== "field"',
+                    }, template: "@if (presentation() === 'field') {\n<mlv-form-control-wrapper (clear)=\"_clearValue()\">\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    <mlv-popup-container class=\"mlv-color-picker-popup__popup-container\">\n      <div class=\"mlv-color-picker-popup__control\">\n        <input\n          #nativeInput\n          class=\"mlv-color-picker-popup__input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [id]=\"id()\"\n          [value]=\"_draftValue()\"\n          [disabled]=\"computedDisabled()\"\n          [readOnly]=\"readonly()\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"opened()\"\n          [attr.aria-controls]=\"opened() ? _panelId : null\"\n          [attr.aria-invalid]=\"resolvedState() === 'error'\"\n          [attr.aria-required]=\"required() || null\"\n          [attr.aria-describedby]=\"_describedBy()\"\n          [attr.aria-label]=\"label() ? null : (ariaLabel() ?? _i18n().colorPicker)\"\n          (input)=\"_onInput($event)\"\n          (focus)=\"_onInputFocus()\"\n          (click)=\"_onInputClick()\"\n          (blur)=\"_onInputBlur()\"\n          (keydown)=\"_onInputKeydown($event)\"\n        />\n\n        <button\n          #fieldSwatchButton\n          class=\"mlv-color-picker-popup__swatch-button\"\n          type=\"button\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"opened()\"\n          [attr.aria-controls]=\"opened() ? _panelId : null\"\n          [attr.aria-label]=\"_pickColorLabel()\"\n          (click)=\"_openFromSwatch()\"\n          (keydown.enter)=\"_openFromSwatch(true); $event.preventDefault()\"\n          (keydown.space)=\"_openFromSwatch(true); $event.preventDefault()\"\n        >\n          <span class=\"mlv-color-picker-popup__swatch\" aria-hidden=\"true\">\n            <span\n              #fieldSwatchColor\n              class=\"mlv-color-picker-popup__swatch-color\"\n              [style.background-color]=\"_draftValue() || 'transparent'\"\n            ></span>\n          </span>\n        </button>\n      </div>\n\n      <mlv-popup\n        [(opened)]=\"opened\"\n        [position]=\"['bottom-start', 'top-start']\"\n        [restrictPosition]=\"false\"\n        [hasBackdrop]=\"true\"\n        [hasShadow]=\"true\"\n        panelRole=\"dialog\"\n        [ariaLabel]=\"_i18n().colorPicker\"\n        class=\"mlv-color-picker-popup__overlay\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div\n            #fieldPickerPanel\n            class=\"mlv-color-picker-popup__panel\"\n            [id]=\"_panelId\"\n            tabindex=\"-1\"\n            (keydown.escape)=\"_onPanelEscape($event)\"\n          >\n            <mlv-color-picker\n              [value]=\"_pickerValue()\"\n              [showOpacity]=\"!!showOpacity()\"\n              [defaultMode]=\"defaultMode()\"\n              [supportedFormats]=\"supportedFormats()\"\n              [disabled]=\"computedDisabled() || readonly()\"\n              (colorChange)=\"_onColorChange($event)\"\n            />\n          </div>\n        </ng-template>\n      </mlv-popup>\n    </mlv-popup-container>\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [attr.id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n} @else {\n<mlv-popup-container class=\"mlv-color-picker-popup__popup-container\">\n  <button\n    #swatchTrigger\n    mlvButton\n    class=\"mlv-color-picker-popup__swatch-trigger\"\n    type=\"button\"\n    shape=\"square\"\n    mlvDensity=\"tight\"\n    variant=\"transparent\"\n    [disabled]=\"computedDisabled() || readonly()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"opened()\"\n    [attr.aria-controls]=\"opened() ? _panelId : null\"\n    [attr.aria-label]=\"ariaLabel() ?? _pickColorLabel()\"\n    [mlvTooltip]=\"ariaLabel() ?? _pickColorLabel()\"\n    (click)=\"_openFromSwatch()\"\n    (keydown.enter)=\"_openFromSwatch(true); $event.preventDefault()\"\n    (keydown.space)=\"_openFromSwatch(true); $event.preventDefault()\"\n  >\n    @if (presentation() === 'icon') {\n    <span mlvButtonIcon>\n      <ng-content />\n    </span>\n    } @else {\n    <span class=\"mlv-color-picker-popup__swatch\" aria-hidden=\"true\">\n      <span\n        #swatchTriggerColor\n        class=\"mlv-color-picker-popup__swatch-color\"\n        [style.background-color]=\"_draftValue() || 'transparent'\"\n      ></span>\n    </span>\n    }\n  </button>\n\n  <mlv-popup\n    [(opened)]=\"opened\"\n    [position]=\"['bottom-start', 'top-start']\"\n    [restrictPosition]=\"false\"\n    [hasBackdrop]=\"true\"\n    [hasShadow]=\"true\"\n    panelRole=\"dialog\"\n    [ariaLabel]=\"ariaLabel() ?? _i18n().colorPicker\"\n    class=\"mlv-color-picker-popup__overlay\"\n    (afterOpened)=\"_onPopupOpened()\"\n    (afterClosed)=\"_onPopupClosed()\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        #swatchPickerPanel\n        class=\"mlv-color-picker-popup__panel\"\n        [id]=\"_panelId\"\n        tabindex=\"-1\"\n        (keydown.escape)=\"_onPanelEscape($event)\"\n      >\n        <mlv-color-picker\n          [value]=\"_pickerValue()\"\n          [showOpacity]=\"!!showOpacity()\"\n          [defaultMode]=\"defaultMode()\"\n          [supportedFormats]=\"supportedFormats()\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          (colorChange)=\"_onColorChange($event)\"\n        />\n        @if (clearable() && hasValue()) {\n        <button\n          mlvButton\n          class=\"mlv-color-picker-popup__clear\"\n          type=\"button\"\n          variant=\"secondary\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          (click)=\"_clearValue()\"\n        >\n          {{ _formI18n().clear }}\n        </button>\n        }\n      </div>\n    </ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n}\n", styles: ["@layer mlv.components{.mlv-color-picker-popup{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-color-picker-popup *{box-sizing:border-box}.mlv-color-picker-popup,.mlv-color-picker-popup__popup-container,.mlv-color-picker-popup__control{display:block;width:100%}.mlv-color-picker-popup__control{display:flex;align-items:center;min-width:0}.mlv-color-picker-popup__input{position:relative;display:block;flex:1 1 auto;width:100%;min-width:0;height:100%;padding:var(--mlv-spacing-1);border:0;outline:0;appearance:none;background:transparent;color:var(--mlv-text-primary);font:inherit}.mlv-color-picker-popup__input::placeholder{color:var(--mlv-text-tertiary)}.mlv-color-picker-popup__input:read-only{cursor:default}.mlv-color-picker-popup__swatch-button{display:inline-grid;flex:0 0 auto;width:1.75rem;height:1.75rem;margin-inline-start:var(--mlv-spacing-1);padding:.1875rem;place-items:center;border:0;border-radius:var(--mlv-radius-s);outline:0;background:transparent;cursor:pointer}.mlv-color-picker-popup__swatch-button:hover:not(:disabled){background-color:var(--mlv-background-neutral-1-hover)}.mlv-color-picker-popup__swatch-button:focus-visible{box-shadow:var(--mlv-focus-ring)}.mlv-color-picker-popup__swatch-button:disabled{cursor:not-allowed}.mlv-color-picker-popup__swatch-trigger{padding:var(--mlv-padding-xs)}.mlv-color-picker-popup__swatch{position:relative;display:block;width:1.375rem;height:1.375rem;overflow:hidden;border:var(--mlv-stroke-width) solid var(--mlv-border-normal);border-radius:var(--mlv-radius-xs, var(--mlv-radius-s));background-color:var(--mlv-background-base);background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0;background-size:.5rem .5rem}.mlv-color-picker-popup__swatch-color{position:absolute;inset:0}.mlv-color-picker-popup__panel{width:min(16rem,100vw - 3.5rem);padding:var(--mlv-popover-inset)}.mlv-color-picker-popup__panel .mlv-color-picker{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.mlv-color-picker-popup__clear{width:100%;margin-block-start:var(--mlv-spacing-2)}.mlv-color-picker-popup--swatch{display:inline-flex;width:auto}.mlv-color-picker-popup--disabled{opacity:var(--mlv-disabled-opacity)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], afterOpened: [{ type: i0.Output, args: ["afterOpened"] }], afterClosed: [{ type: i0.Output, args: ["afterClosed"] }], showOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOpacity", required: false }] }], defaultMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMode", required: false }] }], supportedFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedFormats", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], _inputRef: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], _fieldSwatchColorRef: [{ type: i0.ViewChild, args: ['fieldSwatchColor', { isSignal: true }] }], _swatchTriggerColorRef: [{ type: i0.ViewChild, args: ['swatchTriggerColor', { isSignal: true }] }], _fieldSwatchButtonRef: [{ type: i0.ViewChild, args: ['fieldSwatchButton', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], _swatchTriggerRef: [{ type: i0.ViewChild, args: ['swatchTrigger', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], _fieldPanelRef: [{ type: i0.ViewChild, args: ['fieldPickerPanel', { isSignal: true }] }], _swatchPanelRef: [{ type: i0.ViewChild, args: ['swatchPickerPanel', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvColorPicker, MlvColorPickerPopup, clamp, hexToRgba, hslToRgb, hslaToHex, hslaToModeString, hslaToRgba, hslaToRgbaString, hslaToString, isCssColorValue, parseCssColor, rgbToHsl, rgbaToHex, round, tryParseCssColor };
+//# sourceMappingURL=malva-ui-core-color-picker.mjs.map