@malva-ui/core 0.1.13 → 0.1.14

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

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