@malva-ui/core 0.1.12

package/esm2022/color-picker/lib/color-picker/color-picker.js

@@ -0,0 +1,530 @@
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, forwardRef, inject, input, model, output, signal, ViewEncapsulation, viewChild, } 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 { MLV_FORM_CONTROL, MlvSignalFormControlBase, } from '@malva-ui/core/form-utils';
+import { MLV_COLOR_PICKER_I18N } from '@malva-ui/i18n';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
+import { clamp, hslaToHex, hslaToModeString, hslToRgb, parseCssColor, rgbToHsl, round, } from '../color-utils/color-utils';
+import * as i0 from "@angular/core";
+/**
+ * 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
+ */
+export 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: [".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-1);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:50%;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:50%;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:.375rem}.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:.375rem}.mlv-color-picker__range-input::-moz-range-track{height:.75rem;background:transparent;border-radius:.375rem}.mlv-color-picker__range-input::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;border-radius:50%;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:50%;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:.125rem solid var(--mlv-border-focus);outline-offset:.0625rem}.mlv-color-picker__range-input:focus-visible::-moz-range-thumb{outline:.125rem solid var(--mlv-border-focus);outline-offset:.0625rem}.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-tertiary);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: [".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-1);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:50%;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:50%;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:.375rem}.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:.375rem}.mlv-color-picker__range-input::-moz-range-track{height:.75rem;background:transparent;border-radius:.375rem}.mlv-color-picker__range-input::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;border-radius:50%;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:50%;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:.125rem solid var(--mlv-border-focus);outline-offset:.0625rem}.mlv-color-picker__range-input:focus-visible::-moz-range-thumb{outline:.125rem solid var(--mlv-border-focus);outline-offset:.0625rem}.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-tertiary);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 }] }] } });
+//# sourceMappingURL=color-picker.js.map