@malva-ui/core 0.1.12

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../../../../../libs/core/color-picker/src/lib/color-picker/color-picker.ts","../../../../../../../libs/core/color-picker/src/lib/color-picker/color-picker.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  ViewEncapsulation,\n  viewChild,\n} from '@angular/core';\nimport type { AfterViewInit, ElementRef, OnInit } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  MlvTab,\n  MlvTabContentDef,\n  MlvTabDef,\n  MlvTabGroup,\n} from '@malva-ui/core/tabs';\nimport { MlvInput } from '@malva-ui/core/input';\nimport {\n  MLV_FORM_CONTROL,\n  MlvSignalFormControlBase,\n} from '@malva-ui/core/form-utils';\nimport { MLV_COLOR_PICKER_I18N } from '@malva-ui/i18n';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { fromEvent } from 'rxjs';\nimport { take, takeUntil } from 'rxjs/operators';\nimport type { MlvHsla, MlvColorInputMode } from '../color-utils/color-utils';\nimport {\n  clamp,\n  hslaToHex,\n  hslaToModeString,\n  hslToRgb,\n  parseCssColor,\n  rgbToHsl,\n  round,\n} from '../color-utils/color-utils';\n\n/**\n * The MlvColorPicker provides an HSL/HEX/RGB color picker with:\n * - A 2D saturation-lightness canvas (pointer-draggable)\n * - A hue slider\n * - An opacity slider\n * - Input mode tabs for HEX, RGB, and HSL\n * - Signal, reactive, and template-driven forms integration producing a CSS color string\n */\n@Component({\n  selector: 'mlv-color-picker',\n  templateUrl: './color-picker.html',\n  styleUrl: './color-picker.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgTemplateOutlet,\n    MlvTab,\n    MlvTabContentDef,\n    MlvTabDef,\n    MlvTabGroup,\n    MlvInput,\n  ],\n  providers: [\n    {\n      provide: MLV_FORM_CONTROL,\n      useExisting: forwardRef(() => MlvColorPicker),\n    },\n  ],\n  host: {\n    class: 'mlv-color-picker',\n    '[class.mlv-color-picker--disabled]': 'computedDisabled()',\n    '(focusout)': '_markTouched()',\n  },\n})\nexport class MlvColorPicker\n  extends MlvSignalFormControlBase<string>\n  implements AfterViewInit, OnInit\n{\n  private static readonly _ALL_FORMATS: readonly MlvColorInputMode[] = [\n    'hex',\n    'rgb',\n    'hsl',\n  ];\n\n  /** The CSS color string used by all Angular forms APIs. */\n  readonly value = model<string>('#ff0000');\n  /** @protected Injected i18n translations for the color picker. */\n  protected readonly _i18n = inject(MLV_COLOR_PICKER_I18N);\n\n  /** Whether to show the opacity slider. Defaults to true. */\n  readonly showOpacity = input<boolean, BooleanInput>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** The default input mode displayed when the picker opens. */\n  readonly defaultMode = input<MlvColorInputMode>('hex');\n\n  /** Available color formats, in display order. */\n  readonly supportedFormats = input<readonly MlvColorInputMode[]>(\n    MlvColorPicker._ALL_FORMATS,\n  );\n\n  /** Emits the CSS color string whenever the color changes. */\n  readonly colorChange = output<string>();\n\n  /** @private Current color in HSLA space. */\n  protected readonly _hsla = signal<MlvHsla>({ h: 0, s: 100, l: 50, a: 1 });\n\n  /** @private Current input mode for the text inputs. */\n  protected readonly _inputMode = signal<MlvColorInputMode>('hex');\n\n  /** Formats normalized to supported unique values, preserving caller order. */\n  protected readonly _supportedFormats = computed<readonly MlvColorInputMode[]>(\n    () => {\n      const formats = this.supportedFormats().filter(\n        (format, index, values) =>\n          MlvColorPicker._ALL_FORMATS.includes(format) &&\n          values.indexOf(format) === index,\n      );\n      return formats.length > 0 ? formats : MlvColorPicker._ALL_FORMATS;\n    },\n  );\n\n  /** @private The current raw hex input string (kept separate to avoid cursor-jump on typing). */\n  protected readonly _hexInput = signal<string>('#ff0000');\n\n  /** @private The current raw red channel input. */\n  protected readonly _rgbRInput = signal<string>('255');\n\n  /** @private The current raw green channel input. */\n  protected readonly _rgbGInput = signal<string>('0');\n\n  /** @private The current raw blue channel input. */\n  protected readonly _rgbBInput = signal<string>('0');\n\n  /** @private The current raw alpha input for RGB mode. */\n  protected readonly _rgbAInput = signal<string>('1');\n\n  /** @private The current raw hue input for HSL mode. */\n  protected readonly _hslHInput = signal<string>('0');\n\n  /** @private The current raw saturation input for HSL mode. */\n  protected readonly _hslSInput = signal<string>('100');\n\n  /** @private The current raw lightness input for HSL mode. */\n  protected readonly _hslLInput = signal<string>('50');\n\n  /** @private The current raw alpha input for HSL mode. */\n  protected readonly _hslAInput = signal<string>('1');\n\n  /** @private Whether the canvas pointer is currently being dragged. */\n  protected readonly _canvasDragging = signal(false);\n\n  /**\n   * @private Computed CSS string for the hue thumb gradient stop.\n   * Used to show the pure hue color on the canvas gradient background.\n   */\n  protected readonly _hueColor = computed(() => {\n    const { r, g, b } = hslToRgb(this._hsla().h, 100, 50);\n    return `rgb(${r},${g},${b})`;\n  });\n\n  /**\n   * @private Computed CSS color for the opacity slider checkerboard preview.\n   */\n  protected readonly _rgbaString = computed(() => {\n    const c = this._hsla();\n    const { r, g, b } = hslToRgb(c.h, c.s, c.l);\n    return `rgba(${r},${g},${b},${c.a})`;\n  });\n\n  /** @private Reference to the canvas element. */\n  protected readonly _canvasRef =\n    viewChild<ElementRef<HTMLCanvasElement>>('slCanvas');\n\n  /** @private Reference to the canvas container for size calculation. */\n  protected readonly _canvasContainerRef =\n    viewChild<ElementRef<HTMLDivElement>>('slContainer');\n\n  /** @private DestroyRef for cleanup. */\n  private readonly _destroyRef = inject(DestroyRef);\n\n  /**\n   * @private The canvas bounding rect captured once at pointerdown and reused\n   * for every pointermove of that drag, avoiding a forced layout read\n   * (`getBoundingClientRect`) on every move. Cleared on pointerup.\n   */\n  private _dragRect: DOMRect | null = null;\n\n  constructor() {\n    super();\n    effect(() => this._applyValue(this.value()));\n    effect(() => {\n      const formats = this._supportedFormats();\n      if (!formats.includes(this._inputMode())) {\n        this._inputMode.set(\n          formats.includes(this.defaultMode())\n            ? this.defaultMode()\n            : formats[0],\n        );\n      }\n    });\n  }\n\n  ngOnInit(): void {\n    const formats = this._supportedFormats();\n    this._inputMode.set(\n      formats.includes(this.defaultMode()) ? this.defaultMode() : formats[0],\n    );\n    this._syncFromHsla();\n  }\n\n  ngAfterViewInit(): void {\n    this._drawCanvas();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Forms value\n  // ---------------------------------------------------------------------------\n\n  /** Whether the control holds a clearable value — The picker always holds a colour, so a clearable X (if enabled) is always actionable. */\n  readonly hasValue = computed(() => true);\n\n  /** @private Synchronizes the color editor from an external value. */\n  private _applyValue(value: string | null | undefined): void {\n    if (!value) return;\n    const parsed = parseCssColor(value);\n    this._hsla.set(parsed);\n    this._syncFromHsla();\n    // Draw after change detection settles\n    setTimeout(() => this._drawCanvas(), 0);\n  }\n\n  // ---------------------------------------------------------------------------\n  // Canvas drawing\n  // ---------------------------------------------------------------------------\n\n  /**\n   * @private Draws the 2D saturation-lightness canvas for the current hue.\n   * The canvas shows a gradient from white (top-left) to the pure hue (top-right)\n   * to black (bottom).\n   */\n  protected _drawCanvas(): void {\n    const canvasEl = this._canvasRef()?.nativeElement;\n    if (!canvasEl) return;\n    const ctx = canvasEl.getContext('2d');\n    if (!ctx) return;\n\n    const w = canvasEl.offsetWidth || canvasEl.width;\n    const h = canvasEl.offsetHeight || canvasEl.height;\n\n    // Set canvas resolution to match displayed size\n    if (canvasEl.width !== w || canvasEl.height !== h) {\n      canvasEl.width = w;\n      canvasEl.height = h;\n    }\n\n    const hue = this._hsla().h;\n    const { r, g, b } = hslToRgb(hue, 100, 50);\n    const pureHue = `rgb(${r},${g},${b})`;\n\n    // White → pure hue (horizontal)\n    const hGrad = ctx.createLinearGradient(0, 0, w, 0);\n    hGrad.addColorStop(0, '#ffffff');\n    hGrad.addColorStop(1, pureHue);\n    ctx.fillStyle = hGrad;\n    ctx.fillRect(0, 0, w, h);\n\n    // Transparent → black (vertical, overlaid)\n    const vGrad = ctx.createLinearGradient(0, 0, 0, h);\n    vGrad.addColorStop(0, 'rgba(0,0,0,0)');\n    vGrad.addColorStop(1, 'rgba(0,0,0,1)');\n    ctx.fillStyle = vGrad;\n    ctx.fillRect(0, 0, w, h);\n  }\n\n  // ---------------------------------------------------------------------------\n  // Canvas pointer interaction\n  // ---------------------------------------------------------------------------\n\n  /**\n   * @private Handles pointer down on the SL canvas.\n   * Begins drag and updates color immediately.\n   */\n  protected _onCanvasPointerDown(event: PointerEvent): void {\n    if (this.computedDisabled()) return;\n    event.preventDefault();\n\n    // Capture the canvas rect once, up front, and reuse it for the whole drag\n    // so pointermove never forces a layout read. It is fresh here, so the\n    // initial pointerdown update below also uses an up-to-date rect.\n    this._dragRect =\n      this._canvasRef()?.nativeElement.getBoundingClientRect() ?? null;\n\n    this._canvasDragging.set(true);\n    this._updateColorFromCanvas(event);\n\n    const target = event.currentTarget as HTMLElement;\n    target.setPointerCapture(event.pointerId);\n\n    // Per-drag rxjs streams: the move stream completes on the first pointerup\n    // (takeUntil) and both streams complete on destroy (takeUntilDestroyed),\n    // so no window listener can leak or accumulate across drags — this\n    // replaces an earlier bug where each drag's pointermove listener stayed\n    // attached to `window`.\n    const pointerUp$ = fromEvent<PointerEvent>(window, 'pointerup');\n\n    fromEvent<PointerEvent>(window, 'pointermove')\n      .pipe(takeUntil(pointerUp$), takeUntilDestroyed(this._destroyRef))\n      .subscribe((e) => {\n        if (this._canvasDragging()) {\n          this._updateColorFromCanvas(e);\n        }\n      });\n\n    pointerUp$\n      .pipe(take(1), takeUntilDestroyed(this._destroyRef))\n      .subscribe(() => {\n        this._canvasDragging.set(false);\n        this._dragRect = null;\n        this._markTouched();\n      });\n  }\n\n  /**\n   * @private Converts a pointer position on the canvas to saturation/lightness values.\n   */\n  private _updateColorFromCanvas(event: PointerEvent): void {\n    const canvasEl = this._canvasRef()?.nativeElement;\n    if (!canvasEl) return;\n    // Reuse the rect captured at pointerdown during a drag; fall back to a live\n    // read for any standalone call.\n    const rect = this._dragRect ?? canvasEl.getBoundingClientRect();\n    const x = clamp((event.clientX - rect.left) / rect.width, 0, 1);\n    const y = clamp((event.clientY - rect.top) / rect.height, 0, 1);\n\n    // Convert canvas (x,y) → HSL via HSV intermediate:\n    //   x  = HSV saturation (Sv),  y = 1 − HSV value (V = 1−y)\n    //   L_hsl  = V · (1 − Sv/2)\n    //   S_hsl  = ΔC / (1 − |2L−1|)  where ΔC = V · Sv  (NOT just Sv alone)\n    const sv = x;\n    const v = 1 - y;\n    const lightness = v * (1 - sv / 2);\n    const saturation =\n      lightness === 0 || lightness === 1\n        ? 0\n        : (sv * v) / (1 - Math.abs(2 * lightness - 1));\n\n    this._hsla.update((c) => ({\n      ...c,\n      s: round(clamp(saturation * 100, 0, 100), 1),\n      l: round(clamp(lightness * 100, 0, 100), 1),\n    }));\n    this._syncFromHsla();\n    this._emitChange();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Hue slider\n  // ---------------------------------------------------------------------------\n\n  /**\n   * @private Handles hue slider input change.\n   */\n  protected _onHueChange(event: Event): void {\n    if (this.computedDisabled()) return;\n    const value = parseFloat((event.target as HTMLInputElement).value);\n    this._hsla.update((c) => ({ ...c, h: clamp(value, 0, 360) }));\n    this._syncFromHsla();\n    this._drawCanvas();\n    this._emitChange();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Opacity slider\n  // ---------------------------------------------------------------------------\n\n  /**\n   * @private Handles opacity slider input change.\n   */\n  protected _onOpacityChange(event: Event): void {\n    if (this.computedDisabled()) return;\n    const value = parseFloat((event.target as HTMLInputElement).value);\n    this._hsla.update((c) => ({ ...c, a: clamp(value / 100, 0, 1) }));\n    this._syncFromHsla();\n    this._emitChange();\n  }\n\n  // ---------------------------------------------------------------------------\n  // Input mode tabs\n  // ---------------------------------------------------------------------------\n\n  /**\n   * @private Switches the active input mode tab.\n   */\n  protected _setInputMode(mode: string): void {\n    if (!this._supportedFormats().includes(mode as MlvColorInputMode)) return;\n    const nextMode = mode as MlvColorInputMode;\n    if (nextMode === this._inputMode()) return;\n    this._inputMode.set(nextMode);\n    this._emitChange();\n  }\n\n  // ---------------------------------------------------------------------------\n  // HEX input\n  // ---------------------------------------------------------------------------\n\n  /**\n   * @private Handles hex input changes.\n   */\n  protected _onHexInput(event: Event): void {\n    if (this.computedDisabled()) return;\n    const raw = (event.target as HTMLInputElement).value;\n    this._hexInput.set(raw);\n    const hex = raw.startsWith('#') ? raw : '#' + raw;\n    const parsed = parseCssColor(hex);\n    if (hex.replace('#', '').length >= 6) {\n      this._hsla.set({ ...parsed, a: this._hsla().a });\n      this._syncFromHsla('rgb', 'hsl');\n      this._drawCanvas();\n      this._emitChange();\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // RGB inputs\n  // ---------------------------------------------------------------------------\n\n  /** @private Updates red channel from input. */\n  protected _onRgbRInput(event: Event): void {\n    this._rgbRInput.set((event.target as HTMLInputElement).value);\n    this._applyRgbInputs();\n  }\n\n  /** @private Updates green channel from input. */\n  protected _onRgbGInput(event: Event): void {\n    this._rgbGInput.set((event.target as HTMLInputElement).value);\n    this._applyRgbInputs();\n  }\n\n  /** @private Updates blue channel from input. */\n  protected _onRgbBInput(event: Event): void {\n    this._rgbBInput.set((event.target as HTMLInputElement).value);\n    this._applyRgbInputs();\n  }\n\n  /** @private Updates alpha channel from RGB mode input. */\n  protected _onRgbAInput(event: Event): void {\n    this._rgbAInput.set((event.target as HTMLInputElement).value);\n    this._applyRgbInputs();\n  }\n\n  /**\n   * @private Parses all RGB inputs and updates the internal HSLA state.\n   */\n  private _applyRgbInputs(): void {\n    if (this.computedDisabled()) return;\n    const r = clamp(parseInt(this._rgbRInput(), 10), 0, 255);\n    const g = clamp(parseInt(this._rgbGInput(), 10), 0, 255);\n    const b = clamp(parseInt(this._rgbBInput(), 10), 0, 255);\n    const a = clamp(parseFloat(this._rgbAInput()), 0, 1);\n    if (!isNaN(r) && !isNaN(g) && !isNaN(b) && !isNaN(a)) {\n      const { h, s, l } = rgbToHsl(r, g, b);\n      this._hsla.set({ h, s, l, a });\n      this._syncFromHsla('hex', 'hsl');\n      this._drawCanvas();\n      this._emitChange();\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // HSL inputs\n  // ---------------------------------------------------------------------------\n\n  /** @private Updates hue from HSL input. */\n  protected _onHslHInput(event: Event): void {\n    this._hslHInput.set((event.target as HTMLInputElement).value);\n    this._applyHslInputs();\n  }\n\n  /** @private Updates saturation from HSL input. */\n  protected _onHslSInput(event: Event): void {\n    this._hslSInput.set((event.target as HTMLInputElement).value);\n    this._applyHslInputs();\n  }\n\n  /** @private Updates lightness from HSL input. */\n  protected _onHslLInput(event: Event): void {\n    this._hslLInput.set((event.target as HTMLInputElement).value);\n    this._applyHslInputs();\n  }\n\n  /** @private Updates alpha from HSL mode input. */\n  protected _onHslAInput(event: Event): void {\n    this._hslAInput.set((event.target as HTMLInputElement).value);\n    this._applyHslInputs();\n  }\n\n  /**\n   * @private Parses all HSL inputs and updates internal state.\n   */\n  private _applyHslInputs(): void {\n    if (this.computedDisabled()) return;\n    const h = clamp(parseFloat(this._hslHInput()), 0, 360);\n    const s = clamp(parseFloat(this._hslSInput()), 0, 100);\n    const l = clamp(parseFloat(this._hslLInput()), 0, 100);\n    const a = clamp(parseFloat(this._hslAInput()), 0, 1);\n    if (!isNaN(h) && !isNaN(s) && !isNaN(l) && !isNaN(a)) {\n      this._hsla.set({ h, s, l, a });\n      this._syncFromHsla('hex', 'rgb');\n      this._drawCanvas();\n      this._emitChange();\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Input sync helper (single, channel-targeted)\n  // ---------------------------------------------------------------------------\n\n  /**\n   * @private Refreshes the in-progress text-mirror signals for the requested\n   * channels from the canonical `_hsla()` state. Called after every external\n   * mutation (canvas drag, hue slider, opacity slider, external value write) to\n   * keep the unfocused channels in sync without clobbering the channel the\n   * user is currently typing into.\n   */\n  private _syncFromHsla(\n    ...channels: ReadonlyArray<'hex' | 'rgb' | 'hsl'>\n  ): void {\n    const c = this._hsla();\n    if (channels.length === 0 || channels.includes('hex')) {\n      this._hexInput.set(hslaToHex(c));\n    }\n    if (channels.length === 0 || channels.includes('rgb')) {\n      const { r, g, b } = hslToRgb(c.h, c.s, c.l);\n      this._rgbRInput.set(String(r));\n      this._rgbGInput.set(String(g));\n      this._rgbBInput.set(String(b));\n      this._rgbAInput.set(String(round(c.a, 2)));\n    }\n    if (channels.length === 0 || channels.includes('hsl')) {\n      this._hslHInput.set(String(round(c.h, 1)));\n      this._hslSInput.set(String(round(c.s, 1)));\n      this._hslLInput.set(String(round(c.l, 1)));\n      this._hslAInput.set(String(round(c.a, 2)));\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Change emission\n  // ---------------------------------------------------------------------------\n\n  /**\n   * @private Emits the current color through the forms model and colorChange output.\n   */\n  private _emitChange(): void {\n    const cssColor = hslaToModeString(this._hsla(), this._inputMode());\n    this.value.set(cssColor);\n    this.colorChange.emit(cssColor);\n  }\n\n  /**\n   * @private Returns the current CSS color string for a given mode.\n   * Used by the template to display the color in the active mode.\n   */\n  protected _getColorString(mode: MlvColorInputMode): string {\n    return hslaToModeString(this._hsla(), mode);\n  }\n\n  /**\n   * @private Returns opacity value as 0-100 integer for the opacity slider.\n   */\n  protected _getOpacityPercent(): number {\n    return Math.round(this._hsla().a * 100);\n  }\n\n  /**\n   * @private Returns the hue value for the hue slider.\n   */\n  protected _getHue(): number {\n    return this._hsla().h;\n  }\n\n  /**\n   * @private Canvas thumb left position.\n   * The canvas uses HSV space (x = HSV saturation, y = 1 − HSV value).\n   * Converts the stored HSL to HSV to get the correct x coordinate.\n   */\n  protected _getThumbLeft(): string {\n    const { sv } = this._hslToHsv();\n    return `${clamp(sv * 100, 0, 100)}%`;\n  }\n\n  /**\n   * @private Canvas thumb top position.\n   * y = 1 − HSV value (top = bright/white, bottom = black).\n   */\n  protected _getThumbTop(): string {\n    const { v } = this._hslToHsv();\n    return `${clamp((1 - v) * 100, 0, 100)}%`;\n  }\n\n  /**\n   * @private Converts the current HSLA state to HSV (saturation + value),\n   * matching the coordinate system used by the SL canvas gradient.\n   *\n   * The canvas draws:\n   *   - Horizontal: white (left) → pure hue (right)  → x = HSV saturation\n   *   - Vertical:   full brightness (top) → black (bottom) → y = 1 − HSV value\n   *\n   * HSL → HSV:\n   *   V  = L + S · min(L, 1−L)\n   *   Sv = V > 0 ? 2·(1 − L/V) : 0\n   */\n  private _hslToHsv(): { sv: number; v: number } {\n    const s = this._hsla().s / 100;\n    const l = this._hsla().l / 100;\n    const v = l + s * Math.min(l, 1 - l);\n    const sv = v > 0 ? 2 * (1 - l / v) : 0;\n    return { sv, v };\n  }\n}\n","<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"]}

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

@@ -0,0 +1,419 @@
+import { ChangeDetectionStrategy, Component, computed, ElementRef, effect, forwardRef, inject, input, model, output, signal, untracked, ViewEncapsulation, viewChild, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvFormControlWrapper, MlvFormControlWrapperControl, MlvHint, MlvDescription, MlvLabel, MLV_FORM_CONTROL, MlvMessage, MlvSignalFormControlBase, } from '@malva-ui/core/form-utils';
+import { MlvButton, MlvButtonIcon } from '@malva-ui/core/button';
+import { MlvTooltip } from '@malva-ui/core/tooltip';
+import { MlvPopup, MlvPopupContainer, MlvPopupContent, } from '@malva-ui/core/popup';
+import { MlvTabbableElementService } from '@malva-ui/cdk/accessibility';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+import { MLV_COLOR_PICKER_I18N, MLV_FORM_UTILS_I18N, MlvI18nResolverService, } from '@malva-ui/i18n';
+import { MlvColorPicker } from '../color-picker/color-picker';
+import { isCssColorValue, tryParseCssColor } from '../color-utils/color-utils';
+import * as i0 from "@angular/core";
+/**
+ * Input-like CSS color control that opens the full `mlv-color-picker` in a
+ * connected popup with a light-dismiss backdrop.
+ *
+ * The editable draft stays separate from the committed forms value. Valid
+ * concrete colors and `var(--custom-property)` references commit on blur or
+ * popup close by default; `live` publishes every valid draft immediately.
+ * Invalid drafts roll back to the most recent valid draft.
+ */
+export class MlvColorPickerPopup extends MlvSignalFormControlBase {
+    /** The committed CSS color string used by all Angular forms APIs. */
+    value = model('#ff0000', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Visual trigger presentation. Field mode preserves the input-like control. */
+    presentation = input('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable connected-overlay state. */
+    opened = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    /** Emits after the detached picker panel has opened. */
+    afterOpened = output();
+    /** Emits after the detached picker panel has closed and torn down. */
+    afterClosed = output();
+    /** Whether to show the opacity slider inside the picker. */
+    showOpacity = input(true, { ...(ngDevMode ? { debugName: "showOpacity" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** The default input mode for the picker's text tabs. */
+    defaultMode = input('hex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultMode" }] : /* istanbul ignore next */ []));
+    /** Available picker formats, in display order. */
+    supportedFormats = input([
+        'hex',
+        'rgb',
+        'hsl',
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "supportedFormats" }] : /* istanbul ignore next */ []));
+    /** Whether every valid draft is published immediately. */
+    live = input(false, { ...(ngDevMode ? { debugName: "live" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Emits when user interaction commits a new CSS color string. */
+    colorChange = output();
+    /** Whether the committed value is non-empty and can be cleared. */
+    hasValue = computed(() => this.value().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Suppresses the wrapper-owned clear affordance while readonly. Disabled
+     * wrappers already suppress pointer interaction through their shared state.
+     */
+    ownsClearButton = computed(() => this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownsClearButton" }] : /* istanbul ignore next */ []));
+    /** @protected Injected i18n translations for the color picker. */
+    _i18n = inject(MLV_COLOR_PICKER_I18N);
+    /** @protected Localized copy used by the swatch-mode clear action. */
+    _formI18n = inject(MLV_FORM_UTILS_I18N);
+    /** @private Resolver for ICU parameterized i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /** @protected Whether the connected popup is open. */
+    /** Keep the wrapper focus treatment active while its popup is visible. */
+    focused = computed(() => this._focused() || this.opened(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** @protected Editable text that has not necessarily been committed. */
+    _draftValue = signal(this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_draftValue" }] : /* istanbul ignore next */ []));
+    /** @private Most recent valid draft used for invalid-input rollback. */
+    _lastValidDraft = signal(this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lastValidDraft" }] : /* istanbul ignore next */ []));
+    /** @protected Concrete color used to initialize the visual picker. */
+    _pickerValue = signal('#ff0000', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pickerValue" }] : /* istanbul ignore next */ []));
+    /** @protected Stable id linked from the input's `aria-controls`. */
+    _panelId = mlvNextId('mlv-color-picker-popup-panel');
+    /** @protected Stable id used by the input's `aria-describedby`. */
+    /**
+     * @protected Resolved accessible name for the swatch button, e.g.
+     * "Pick color: #ff0000".
+     */
+    _pickColorLabel = computed(() => this._resolver.resolve(this._i18n(), 'pickColor', { color: this._draftValue() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pickColorLabel" }] : /* istanbul ignore next */ []));
+    /** @private Native input used for synchronous rollback of invalid drafts. */
+    _inputRef = viewChild('nativeInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_inputRef" }] : /* istanbul ignore next */ []));
+    /** @private Rounded color square used for computed CSS-variable resolution. */
+    _fieldSwatchColorRef = viewChild('fieldSwatchColor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fieldSwatchColorRef" }] : /* istanbul ignore next */ []));
+    /** @private Swatch-only presentation color layer. */
+    _swatchTriggerColorRef = viewChild('swatchTriggerColor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_swatchTriggerColorRef" }] : /* istanbul ignore next */ []));
+    /** @private Field-mode swatch button used for keyboard focus restoration. */
+    _fieldSwatchButtonRef = viewChild('fieldSwatchButton', {
+        read: ElementRef,
+    });
+    /** @private Swatch-mode Malva trigger used by detached composition. */
+    _swatchTriggerRef = viewChild('swatchTrigger', {
+        read: ElementRef,
+    });
+    /** @private Field-mode detached picker surface. */
+    _fieldPanelRef = viewChild('fieldPickerPanel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fieldPanelRef" }] : /* istanbul ignore next */ []));
+    /** @private Swatch-mode detached picker surface. */
+    _swatchPanelRef = viewChild('swatchPickerPanel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_swatchPanelRef" }] : /* istanbul ignore next */ []));
+    /** Public trigger element for toolbar/composite registration. */
+    triggerElement = computed(() => (this.presentation() !== 'field'
+        ? this._swatchTriggerRef()
+        : this._fieldSwatchButtonRef())?.nativeElement ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerElement" }] : /* istanbul ignore next */ []));
+    /** Public detached panel element for overlay ownership registration. */
+    panelElement = computed(() => (this.presentation() !== 'field'
+        ? this._swatchPanelRef()
+        : this._fieldPanelRef())?.nativeElement ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelElement" }] : /* istanbul ignore next */ []));
+    /** @private Locates the first tabbable picker control for keyboard opening. */
+    _tabbable = inject(MlvTabbableElementService);
+    /** @private Whether the next completed close should restore swatch focus. */
+    _restoreSwatchFocus = false;
+    /** @private Whether `afterOpened` should transfer focus into the picker. */
+    _focusPickerAfterOpen = false;
+    /** @private Whether the shared overlay is attached or playing its leave animation. */
+    _popupAttached = false;
+    /** @private Previous open state used to detect every close request once. */
+    _wasOpen = false;
+    /** @private Reopens after a click/focus that occurs during the leave animation. */
+    _reopenAfterClose = false;
+    constructor() {
+        super();
+        // External form/model writes replace all local draft state.
+        effect(() => {
+            const committed = this.value();
+            this._draftValue.set(committed);
+            this._lastValidDraft.set(committed);
+            if (untracked(() => this.opened())) {
+                const swatch = this._swatchColorElement();
+                if (swatch) {
+                    swatch.style.backgroundColor = committed || 'transparent';
+                }
+                this._syncPickerValue(committed);
+            }
+        });
+        // State changes can make an already-open picker inert. Close it
+        // immediately and discard any uncommitted draft in that case.
+        effect(() => {
+            if (!this._isInert() || !this.opened())
+                return;
+            this._restoreCommittedValue();
+            this._focusPickerAfterOpen = false;
+            this._restoreSwatchFocus = false;
+            this.opened.set(false);
+        });
+        // Commit at close intent rather than after the leave animation. This covers
+        // backdrop, Escape, programmatic, and reduced-motion close paths uniformly.
+        effect(() => {
+            const isOpen = this.opened();
+            const inert = this._isInert();
+            if (this._wasOpen && !isOpen && !inert) {
+                untracked(() => this._commitDraft());
+            }
+            this._wasOpen = isOpen;
+        });
+    }
+    /** @protected Stores text input without publishing a partial forms value. */
+    _onInput(event) {
+        if (this._isInert())
+            return;
+        const draft = event.target.value;
+        this._setDraftValue(draft);
+        if (draft === '' || isCssColorValue(draft)) {
+            this._lastValidDraft.set(draft);
+            if (this.live())
+                this._commitValue(draft);
+        }
+    }
+    /** @protected Opens the popup when the editable field receives focus. */
+    _onInputFocus() {
+        this.setFocused(true);
+        if (this._isInert())
+            return;
+        this._restoreSwatchFocus = false;
+        this._open(false);
+    }
+    /**
+     * @protected Reopens after Escape when the input retained focus (and thus
+     * cannot emit another native focus event).
+     */
+    _onInputClick() {
+        if (this._isInert())
+            return;
+        this._restoreSwatchFocus = false;
+        this._open(false);
+    }
+    /** @protected Commits or rolls back the draft when focus leaves the input. */
+    _onInputBlur() {
+        this.setFocused(false);
+        if (this._isInert())
+            return;
+        this._commitDraft();
+        this._markTouched();
+    }
+    /** @protected Closes the popup from the input on Escape. */
+    _onInputKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this._restoreSwatchFocus = false;
+            this.opened.set(false);
+            this._markTouched();
+        }
+    }
+    /**
+     * @protected Opens from the rounded square. Keyboard activation opts into
+     * focus transfer; pointer activation leaves focus on the trigger.
+     */
+    _openFromSwatch(focusPicker = false) {
+        if (this._isInert())
+            return;
+        if (this.presentation() !== 'field')
+            this._restoreSwatchFocus = true;
+        if (focusPicker) {
+            this._focusPickerAfterOpen = true;
+            this._restoreSwatchFocus = true;
+        }
+        this._open(focusPicker);
+    }
+    /** @private Opens the connected popup and refreshes the picker's color. */
+    _open(focusPicker) {
+        if (this._isInert())
+            return;
+        this._syncPickerValue(this._draftValue());
+        // PopupContainer keeps the overlay attached while its leave animation
+        // runs. Queue a fresh attach instead of toggling the model back to true:
+        // the closing handle would otherwise finish and overwrite it with false.
+        if (!this.opened() && this._popupAttached) {
+            this._reopenAfterClose = true;
+            return;
+        }
+        if (this.opened()) {
+            if (focusPicker)
+                queueMicrotask(() => this._focusPicker());
+            return;
+        }
+        this.opened.set(true);
+    }
+    /** @protected Performs post-attach focus work requested by keyboard opening. */
+    _onPopupOpened() {
+        this._popupAttached = true;
+        this.afterOpened.emit();
+        if (!this._focusPickerAfterOpen)
+            return;
+        this._focusPickerAfterOpen = false;
+        queueMicrotask(() => this._focusPicker());
+    }
+    /** @protected Restores swatch focus only for keyboard/panel close flows. */
+    _onPopupClosed() {
+        this._popupAttached = false;
+        if (this._reopenAfterClose) {
+            this._reopenAfterClose = false;
+            this._open(this._focusPickerAfterOpen);
+            return;
+        }
+        if (this._restoreSwatchFocus) {
+            this._restoreSwatchFocus = false;
+            this.triggerElement()?.focus();
+        }
+        this.afterClosed.emit();
+    }
+    /** @protected Closes from the panel and commits the current draft. */
+    _onPanelEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._restoreSwatchFocus = true;
+        this.opened.set(false);
+        this._markTouched();
+    }
+    /** @protected Clears the committed forms value through the shared X button. */
+    _clearValue() {
+        if (this._isInert())
+            return;
+        this._lastValidDraft.set('');
+        this._commitValue('');
+    }
+    /** @protected Updates the picker draft and optionally publishes it live. */
+    _onColorChange(cssColor) {
+        if (this._isInert())
+            return;
+        this._lastValidDraft.set(cssColor);
+        this._setDraftValue(cssColor);
+        if (this.live())
+            this._commitValue(cssColor);
+    }
+    /** @private Commits valid/empty input or the most recent valid draft. */
+    _commitDraft() {
+        const draft = this._draftValue().trim();
+        if (draft === '' || isCssColorValue(draft)) {
+            this._lastValidDraft.set(draft);
+            this._commitValue(draft);
+            return;
+        }
+        const lastValid = this._lastValidDraft();
+        this._setDraftValue(lastValid);
+        const input = this._inputRef()?.nativeElement;
+        if (input)
+            input.value = lastValid;
+        this._commitValue(lastValid);
+    }
+    /**
+     * @private Restores local state from the committed value without publishing.
+     */
+    _restoreCommittedValue() {
+        const committed = this.value();
+        this._lastValidDraft.set(committed);
+        this._setDraftValue(committed);
+        const input = this._inputRef()?.nativeElement;
+        if (input)
+            input.value = committed;
+    }
+    /** @private Synchronizes all visual draft consumers without committing. */
+    _setDraftValue(value) {
+        this._draftValue.set(value);
+        const swatch = this._swatchColorElement();
+        if (swatch)
+            swatch.style.backgroundColor = value || 'transparent';
+        this._syncPickerValue(value);
+    }
+    /** @private Publishes one committed user change across forms and output. */
+    _commitValue(value) {
+        this._setDraftValue(value);
+        this._lastValidDraft.set(value);
+        if (value === this.value())
+            return;
+        this.value.set(value);
+        this.colorChange.emit(value);
+    }
+    /**
+     * @private Initializes the visual picker without replacing the committed
+     * source string. Concrete formats pass through. CSS variables are resolved
+     * from the swatch's computed background in the trigger's cascade.
+     */
+    _syncPickerValue(source = this._draftValue()) {
+        if (tryParseCssColor(source)) {
+            this._pickerValue.set(source);
+            return;
+        }
+        const swatch = this._swatchColorElement();
+        const resolved = swatch ? getComputedStyle(swatch).backgroundColor : '';
+        this._pickerValue.set(tryParseCssColor(resolved) ? resolved : '#ff0000');
+    }
+    /** @private Moves focus into the picker after a keyboard swatch activation. */
+    _focusPicker() {
+        const panel = document.getElementById(this._panelId);
+        if (!panel)
+            return;
+        const first = this._tabbable.getTabbableElement(panel, false, true);
+        (first ?? panel).focus();
+    }
+    /** @private Current presentation's rendered colour layer. */
+    _swatchColorElement() {
+        const ref = this.presentation() === 'swatch'
+            ? this._swatchTriggerColorRef()
+            : this.presentation() === 'field'
+                ? this._fieldSwatchColorRef()
+                : undefined;
+        return ref?.nativeElement;
+    }
+    /** @private Whether disabled/readonly state blocks all user mutation. */
+    _isInert() {
+        return this.computedDisabled() || this.readonly();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvColorPickerPopup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvColorPickerPopup, isStandalone: true, selector: "mlv-color-picker-popup", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, showOpacity: { classPropertyName: "showOpacity", publicName: "showOpacity", isSignal: true, isRequired: false, transformFunction: null }, defaultMode: { classPropertyName: "defaultMode", publicName: "defaultMode", isSignal: true, isRequired: false, transformFunction: null }, supportedFormats: { classPropertyName: "supportedFormats", publicName: "supportedFormats", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "openedChange", afterOpened: "afterOpened", afterClosed: "afterClosed", colorChange: "colorChange" }, host: { properties: { "class": "\"mlv-color-picker-popup--state-\" + resolvedState()", "class.mlv-color-picker-popup--disabled": "computedDisabled()", "class.mlv-color-picker-popup--readonly": "readonly()", "class.mlv-color-picker-popup--open": "opened()", "class.mlv-color-picker-popup--swatch": "presentation() !== \"field\"" }, classAttribute: "mlv-color-picker-popup" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvColorPickerPopup),
+            },
+        ], viewQueries: [{ propertyName: "_inputRef", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }, { propertyName: "_fieldSwatchColorRef", first: true, predicate: ["fieldSwatchColor"], descendants: true, isSignal: true }, { propertyName: "_swatchTriggerColorRef", first: true, predicate: ["swatchTriggerColor"], descendants: true, isSignal: true }, { propertyName: "_fieldSwatchButtonRef", first: true, predicate: ["fieldSwatchButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_swatchTriggerRef", first: true, predicate: ["swatchTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_fieldPanelRef", first: true, predicate: ["fieldPickerPanel"], descendants: true, isSignal: true }, { propertyName: "_swatchPanelRef", first: true, predicate: ["swatchPickerPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (presentation() === 'field') {\n<mlv-form-control-wrapper (clear)=\"_clearValue()\">\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    <mlv-popup-container class=\"mlv-color-picker-popup__popup-container\">\n      <div class=\"mlv-color-picker-popup__control\">\n        <input\n          #nativeInput\n          class=\"mlv-color-picker-popup__input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [id]=\"id()\"\n          [value]=\"_draftValue()\"\n          [disabled]=\"computedDisabled()\"\n          [readOnly]=\"readonly()\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"opened()\"\n          [attr.aria-controls]=\"opened() ? _panelId : null\"\n          [attr.aria-invalid]=\"resolvedState() === 'error'\"\n          [attr.aria-required]=\"required() || null\"\n          [attr.aria-describedby]=\"_describedBy()\"\n          [attr.aria-label]=\"label() ? null : (ariaLabel() ?? _i18n().colorPicker)\"\n          (input)=\"_onInput($event)\"\n          (focus)=\"_onInputFocus()\"\n          (click)=\"_onInputClick()\"\n          (blur)=\"_onInputBlur()\"\n          (keydown)=\"_onInputKeydown($event)\"\n        />\n\n        <button\n          #fieldSwatchButton\n          class=\"mlv-color-picker-popup__swatch-button\"\n          type=\"button\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"opened()\"\n          [attr.aria-controls]=\"opened() ? _panelId : null\"\n          [attr.aria-label]=\"_pickColorLabel()\"\n          (click)=\"_openFromSwatch()\"\n          (keydown.enter)=\"_openFromSwatch(true); $event.preventDefault()\"\n          (keydown.space)=\"_openFromSwatch(true); $event.preventDefault()\"\n        >\n          <span class=\"mlv-color-picker-popup__swatch\" aria-hidden=\"true\">\n            <span\n              #fieldSwatchColor\n              class=\"mlv-color-picker-popup__swatch-color\"\n              [style.background-color]=\"_draftValue() || 'transparent'\"\n            ></span>\n          </span>\n        </button>\n      </div>\n\n      <mlv-popup\n        [(opened)]=\"opened\"\n        [position]=\"['bottom-start', 'top-start']\"\n        [restrictPosition]=\"false\"\n        [hasBackdrop]=\"true\"\n        [hasShadow]=\"true\"\n        panelRole=\"dialog\"\n        [ariaLabel]=\"_i18n().colorPicker\"\n        class=\"mlv-color-picker-popup__overlay\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div\n            #fieldPickerPanel\n            class=\"mlv-color-picker-popup__panel\"\n            [id]=\"_panelId\"\n            tabindex=\"-1\"\n            (keydown.escape)=\"_onPanelEscape($event)\"\n          >\n            <mlv-color-picker\n              [value]=\"_pickerValue()\"\n              [showOpacity]=\"!!showOpacity()\"\n              [defaultMode]=\"defaultMode()\"\n              [supportedFormats]=\"supportedFormats()\"\n              [disabled]=\"computedDisabled() || readonly()\"\n              (colorChange)=\"_onColorChange($event)\"\n            />\n          </div>\n        </ng-template>\n      </mlv-popup>\n    </mlv-popup-container>\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [attr.id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n} @else {\n<mlv-popup-container class=\"mlv-color-picker-popup__popup-container\">\n  <button\n    #swatchTrigger\n    mlvButton\n    class=\"mlv-color-picker-popup__swatch-trigger\"\n    type=\"button\"\n    shape=\"square\"\n    mlvDensity=\"tight\"\n    variant=\"transparent\"\n    [disabled]=\"computedDisabled() || readonly()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"opened()\"\n    [attr.aria-controls]=\"opened() ? _panelId : null\"\n    [attr.aria-label]=\"ariaLabel() ?? _pickColorLabel()\"\n    [mlvTooltip]=\"ariaLabel() ?? _pickColorLabel()\"\n    (click)=\"_openFromSwatch()\"\n    (keydown.enter)=\"_openFromSwatch(true); $event.preventDefault()\"\n    (keydown.space)=\"_openFromSwatch(true); $event.preventDefault()\"\n  >\n    @if (presentation() === 'icon') {\n    <span mlvButtonIcon>\n      <ng-content />\n    </span>\n    } @else {\n    <span class=\"mlv-color-picker-popup__swatch\" aria-hidden=\"true\">\n      <span\n        #swatchTriggerColor\n        class=\"mlv-color-picker-popup__swatch-color\"\n        [style.background-color]=\"_draftValue() || 'transparent'\"\n      ></span>\n    </span>\n    }\n  </button>\n\n  <mlv-popup\n    [(opened)]=\"opened\"\n    [position]=\"['bottom-start', 'top-start']\"\n    [restrictPosition]=\"false\"\n    [hasBackdrop]=\"true\"\n    [hasShadow]=\"true\"\n    panelRole=\"dialog\"\n    [ariaLabel]=\"ariaLabel() ?? _i18n().colorPicker\"\n    class=\"mlv-color-picker-popup__overlay\"\n    (afterOpened)=\"_onPopupOpened()\"\n    (afterClosed)=\"_onPopupClosed()\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        #swatchPickerPanel\n        class=\"mlv-color-picker-popup__panel\"\n        [id]=\"_panelId\"\n        tabindex=\"-1\"\n        (keydown.escape)=\"_onPanelEscape($event)\"\n      >\n        <mlv-color-picker\n          [value]=\"_pickerValue()\"\n          [showOpacity]=\"!!showOpacity()\"\n          [defaultMode]=\"defaultMode()\"\n          [supportedFormats]=\"supportedFormats()\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          (colorChange)=\"_onColorChange($event)\"\n        />\n        @if (clearable() && hasValue()) {\n        <button\n          mlvButton\n          class=\"mlv-color-picker-popup__clear\"\n          type=\"button\"\n          variant=\"secondary\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          (click)=\"_clearValue()\"\n        >\n          {{ _formI18n().clear }}\n        </button>\n        }\n      </div>\n    </ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n}\n", styles: [".mlv-color-picker-popup{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-color-picker-popup *{box-sizing:border-box}.mlv-color-picker-popup,.mlv-color-picker-popup__popup-container,.mlv-color-picker-popup__control{display:block;width:100%}.mlv-color-picker-popup__control{display:flex;align-items:center;min-width:0}.mlv-color-picker-popup__input{position:relative;display:block;flex:1 1 auto;width:100%;min-width:0;height:100%;padding:var(--mlv-spacing-1);border:0;outline:0;appearance:none;background:transparent;color:var(--mlv-text-primary);font:inherit}.mlv-color-picker-popup__input::placeholder{color:var(--mlv-text-tertiary)}.mlv-color-picker-popup__input:read-only{cursor:default}.mlv-color-picker-popup__swatch-button{display:inline-grid;flex:0 0 auto;width:1.75rem;height:1.75rem;margin-inline-start:var(--mlv-spacing-1);padding:.1875rem;place-items:center;border:0;border-radius:var(--mlv-radius-s);outline:0;background:transparent;cursor:pointer}.mlv-color-picker-popup__swatch-button:hover:not(:disabled){background-color:var(--mlv-background-neutral-1-hover)}.mlv-color-picker-popup__swatch-button:focus-visible{box-shadow:0 0 0 .125rem var(--mlv-border-focus)}.mlv-color-picker-popup__swatch-button:disabled{cursor:not-allowed}.mlv-color-picker-popup__swatch-trigger{padding:var(--mlv-padding-xs)}.mlv-color-picker-popup__swatch{position:relative;display:block;width:1.375rem;height:1.375rem;overflow:hidden;border:var(--mlv-stroke-width) solid var(--mlv-border-normal);border-radius:var(--mlv-radius-xs, var(--mlv-radius-s));background-color:var(--mlv-background-base);background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0;background-size:.5rem .5rem}.mlv-color-picker-popup__swatch-color{position:absolute;inset:0}.mlv-color-picker-popup__panel{width:min(16rem,100vw - 3.5rem);padding:var(--mlv-spacing-2)}.mlv-color-picker-popup__panel .mlv-color-picker{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.mlv-color-picker-popup__clear{width:100%;margin-block-start:var(--mlv-spacing-2)}.mlv-color-picker-popup--swatch{display:inline-flex;width:auto}.mlv-color-picker-popup--disabled{opacity:var(--mlv-disabled-opacity)}\n"], dependencies: [{ kind: "component", type: MlvColorPicker, selector: "mlv-color-picker", inputs: ["value", "showOpacity", "defaultMode", "supportedFormats"], outputs: ["valueChange", "colorChange"] }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading"] }, { kind: "directive", type: MlvTooltip, selector: "[mlvTooltip]", inputs: ["mlvTooltip", "tooltipPlacement", "tooltipTone", "tooltipDelay", "tooltipDisabled", "tooltipArrow"] }, { kind: "component", type: MlvFormControlWrapper, selector: "mlv-form-control-wrapper", outputs: ["clear"] }, { kind: "directive", type: MlvFormControlWrapperControl, selector: "[mlvFormControlWrapperControl]" }, { kind: "component", type: MlvHint, selector: "mlv-hint" }, { kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "component", type: MlvPopupContainer, selector: "mlv-popup-container" }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "directive", type: MlvButtonIcon, selector: "[mlvButtonIcon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvColorPickerPopup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-color-picker-popup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MlvColorPicker,
+                        MlvButton,
+                        MlvTooltip,
+                        MlvFormControlWrapper,
+                        MlvFormControlWrapperControl,
+                        MlvHint,
+                        MlvDescription,
+                        MlvLabel,
+                        MlvMessage,
+                        MlvPopup,
+                        MlvPopupContainer,
+                        MlvPopupContent,
+                        MlvButtonIcon,
+                    ], providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvColorPickerPopup),
+                        },
+                    ], host: {
+                        class: 'mlv-color-picker-popup',
+                        '[class]': '"mlv-color-picker-popup--state-" + resolvedState()',
+                        '[class.mlv-color-picker-popup--disabled]': 'computedDisabled()',
+                        '[class.mlv-color-picker-popup--readonly]': 'readonly()',
+                        '[class.mlv-color-picker-popup--open]': 'opened()',
+                        '[class.mlv-color-picker-popup--swatch]': 'presentation() !== "field"',
+                    }, template: "@if (presentation() === 'field') {\n<mlv-form-control-wrapper (clear)=\"_clearValue()\">\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    <mlv-popup-container class=\"mlv-color-picker-popup__popup-container\">\n      <div class=\"mlv-color-picker-popup__control\">\n        <input\n          #nativeInput\n          class=\"mlv-color-picker-popup__input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [id]=\"id()\"\n          [value]=\"_draftValue()\"\n          [disabled]=\"computedDisabled()\"\n          [readOnly]=\"readonly()\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"opened()\"\n          [attr.aria-controls]=\"opened() ? _panelId : null\"\n          [attr.aria-invalid]=\"resolvedState() === 'error'\"\n          [attr.aria-required]=\"required() || null\"\n          [attr.aria-describedby]=\"_describedBy()\"\n          [attr.aria-label]=\"label() ? null : (ariaLabel() ?? _i18n().colorPicker)\"\n          (input)=\"_onInput($event)\"\n          (focus)=\"_onInputFocus()\"\n          (click)=\"_onInputClick()\"\n          (blur)=\"_onInputBlur()\"\n          (keydown)=\"_onInputKeydown($event)\"\n        />\n\n        <button\n          #fieldSwatchButton\n          class=\"mlv-color-picker-popup__swatch-button\"\n          type=\"button\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"opened()\"\n          [attr.aria-controls]=\"opened() ? _panelId : null\"\n          [attr.aria-label]=\"_pickColorLabel()\"\n          (click)=\"_openFromSwatch()\"\n          (keydown.enter)=\"_openFromSwatch(true); $event.preventDefault()\"\n          (keydown.space)=\"_openFromSwatch(true); $event.preventDefault()\"\n        >\n          <span class=\"mlv-color-picker-popup__swatch\" aria-hidden=\"true\">\n            <span\n              #fieldSwatchColor\n              class=\"mlv-color-picker-popup__swatch-color\"\n              [style.background-color]=\"_draftValue() || 'transparent'\"\n            ></span>\n          </span>\n        </button>\n      </div>\n\n      <mlv-popup\n        [(opened)]=\"opened\"\n        [position]=\"['bottom-start', 'top-start']\"\n        [restrictPosition]=\"false\"\n        [hasBackdrop]=\"true\"\n        [hasShadow]=\"true\"\n        panelRole=\"dialog\"\n        [ariaLabel]=\"_i18n().colorPicker\"\n        class=\"mlv-color-picker-popup__overlay\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div\n            #fieldPickerPanel\n            class=\"mlv-color-picker-popup__panel\"\n            [id]=\"_panelId\"\n            tabindex=\"-1\"\n            (keydown.escape)=\"_onPanelEscape($event)\"\n          >\n            <mlv-color-picker\n              [value]=\"_pickerValue()\"\n              [showOpacity]=\"!!showOpacity()\"\n              [defaultMode]=\"defaultMode()\"\n              [supportedFormats]=\"supportedFormats()\"\n              [disabled]=\"computedDisabled() || readonly()\"\n              (colorChange)=\"_onColorChange($event)\"\n            />\n          </div>\n        </ng-template>\n      </mlv-popup>\n    </mlv-popup-container>\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [attr.id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n} @else {\n<mlv-popup-container class=\"mlv-color-picker-popup__popup-container\">\n  <button\n    #swatchTrigger\n    mlvButton\n    class=\"mlv-color-picker-popup__swatch-trigger\"\n    type=\"button\"\n    shape=\"square\"\n    mlvDensity=\"tight\"\n    variant=\"transparent\"\n    [disabled]=\"computedDisabled() || readonly()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"opened()\"\n    [attr.aria-controls]=\"opened() ? _panelId : null\"\n    [attr.aria-label]=\"ariaLabel() ?? _pickColorLabel()\"\n    [mlvTooltip]=\"ariaLabel() ?? _pickColorLabel()\"\n    (click)=\"_openFromSwatch()\"\n    (keydown.enter)=\"_openFromSwatch(true); $event.preventDefault()\"\n    (keydown.space)=\"_openFromSwatch(true); $event.preventDefault()\"\n  >\n    @if (presentation() === 'icon') {\n    <span mlvButtonIcon>\n      <ng-content />\n    </span>\n    } @else {\n    <span class=\"mlv-color-picker-popup__swatch\" aria-hidden=\"true\">\n      <span\n        #swatchTriggerColor\n        class=\"mlv-color-picker-popup__swatch-color\"\n        [style.background-color]=\"_draftValue() || 'transparent'\"\n      ></span>\n    </span>\n    }\n  </button>\n\n  <mlv-popup\n    [(opened)]=\"opened\"\n    [position]=\"['bottom-start', 'top-start']\"\n    [restrictPosition]=\"false\"\n    [hasBackdrop]=\"true\"\n    [hasShadow]=\"true\"\n    panelRole=\"dialog\"\n    [ariaLabel]=\"ariaLabel() ?? _i18n().colorPicker\"\n    class=\"mlv-color-picker-popup__overlay\"\n    (afterOpened)=\"_onPopupOpened()\"\n    (afterClosed)=\"_onPopupClosed()\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        #swatchPickerPanel\n        class=\"mlv-color-picker-popup__panel\"\n        [id]=\"_panelId\"\n        tabindex=\"-1\"\n        (keydown.escape)=\"_onPanelEscape($event)\"\n      >\n        <mlv-color-picker\n          [value]=\"_pickerValue()\"\n          [showOpacity]=\"!!showOpacity()\"\n          [defaultMode]=\"defaultMode()\"\n          [supportedFormats]=\"supportedFormats()\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          (colorChange)=\"_onColorChange($event)\"\n        />\n        @if (clearable() && hasValue()) {\n        <button\n          mlvButton\n          class=\"mlv-color-picker-popup__clear\"\n          type=\"button\"\n          variant=\"secondary\"\n          [disabled]=\"computedDisabled() || readonly()\"\n          (click)=\"_clearValue()\"\n        >\n          {{ _formI18n().clear }}\n        </button>\n        }\n      </div>\n    </ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n}\n", styles: [".mlv-color-picker-popup{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-color-picker-popup *{box-sizing:border-box}.mlv-color-picker-popup,.mlv-color-picker-popup__popup-container,.mlv-color-picker-popup__control{display:block;width:100%}.mlv-color-picker-popup__control{display:flex;align-items:center;min-width:0}.mlv-color-picker-popup__input{position:relative;display:block;flex:1 1 auto;width:100%;min-width:0;height:100%;padding:var(--mlv-spacing-1);border:0;outline:0;appearance:none;background:transparent;color:var(--mlv-text-primary);font:inherit}.mlv-color-picker-popup__input::placeholder{color:var(--mlv-text-tertiary)}.mlv-color-picker-popup__input:read-only{cursor:default}.mlv-color-picker-popup__swatch-button{display:inline-grid;flex:0 0 auto;width:1.75rem;height:1.75rem;margin-inline-start:var(--mlv-spacing-1);padding:.1875rem;place-items:center;border:0;border-radius:var(--mlv-radius-s);outline:0;background:transparent;cursor:pointer}.mlv-color-picker-popup__swatch-button:hover:not(:disabled){background-color:var(--mlv-background-neutral-1-hover)}.mlv-color-picker-popup__swatch-button:focus-visible{box-shadow:0 0 0 .125rem var(--mlv-border-focus)}.mlv-color-picker-popup__swatch-button:disabled{cursor:not-allowed}.mlv-color-picker-popup__swatch-trigger{padding:var(--mlv-padding-xs)}.mlv-color-picker-popup__swatch{position:relative;display:block;width:1.375rem;height:1.375rem;overflow:hidden;border:var(--mlv-stroke-width) solid var(--mlv-border-normal);border-radius:var(--mlv-radius-xs, var(--mlv-radius-s));background-color:var(--mlv-background-base);background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0;background-size:.5rem .5rem}.mlv-color-picker-popup__swatch-color{position:absolute;inset:0}.mlv-color-picker-popup__panel{width:min(16rem,100vw - 3.5rem);padding:var(--mlv-spacing-2)}.mlv-color-picker-popup__panel .mlv-color-picker{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.mlv-color-picker-popup__clear{width:100%;margin-block-start:var(--mlv-spacing-2)}.mlv-color-picker-popup--swatch{display:inline-flex;width:auto}.mlv-color-picker-popup--disabled{opacity:var(--mlv-disabled-opacity)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], afterOpened: [{ type: i0.Output, args: ["afterOpened"] }], afterClosed: [{ type: i0.Output, args: ["afterClosed"] }], showOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOpacity", required: false }] }], defaultMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMode", required: false }] }], supportedFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedFormats", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], _inputRef: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], _fieldSwatchColorRef: [{ type: i0.ViewChild, args: ['fieldSwatchColor', { isSignal: true }] }], _swatchTriggerColorRef: [{ type: i0.ViewChild, args: ['swatchTriggerColor', { isSignal: true }] }], _fieldSwatchButtonRef: [{ type: i0.ViewChild, args: ['fieldSwatchButton', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], _swatchTriggerRef: [{ type: i0.ViewChild, args: ['swatchTrigger', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], _fieldPanelRef: [{ type: i0.ViewChild, args: ['fieldPickerPanel', { isSignal: true }] }], _swatchPanelRef: [{ type: i0.ViewChild, args: ['swatchPickerPanel', { isSignal: true }] }] } });
+//# sourceMappingURL=color-picker-popup.js.map