@muxima-ui/core 1.1.0 → 1.2.0

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

@@ -0,0 +1,755 @@
+import * as i0 from '@angular/core';
+import { model, input, booleanAttribute, output, viewChild, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, ElementRef } from '@angular/core';
+import { mxUniqueId, MxFormField, MX_FORM_FIELD_CONTROL } from '@muxima-ui/core/form-field';
+import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { NgControl, Validators } from '@angular/forms';
+
+const clamp = (n, min = 0, max = 1) => Math.min(Math.max(n, min), max);
+/**
+ * Lê uma cor escrita: "#1f6f78", "1f6f78", "#1f6", "#1f6f7880" ou "rgb(31, 111, 120)" / "rgba(...)".
+ * Devolve o hex normalizado ("#1F6F78" ou "#1F6F7880" com opacidade) ou null.
+ */
+function mxParseColor(text) {
+    const t = text.trim();
+    const rgb = t.match(/^rgba?\(\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*(?:[,/]\s*([\d.]+%?)\s*)?\)$/i);
+    if (rgb) {
+        const [r, g, b] = [rgb[1], rgb[2], rgb[3]].map(Number);
+        if ([r, g, b].some((n) => n > 255))
+            return null;
+        let a = 1;
+        if (rgb[4])
+            a = rgb[4].endsWith('%') ? Number(rgb[4].slice(0, -1)) / 100 : Number(rgb[4]);
+        return rgbaToHex(r, g, b, clamp(a));
+    }
+    let h = t.replace(/^#/, '');
+    if (!/^([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(h))
+        return null;
+    if (h.length <= 4)
+        h = [...h].map((c) => c + c).join('');
+    h = h.toUpperCase();
+    if (h.length === 8 && h.endsWith('FF'))
+        h = h.slice(0, 6);
+    return '#' + h;
+}
+function rgbaToHex(r, g, b, a = 1) {
+    const x = (n) => Math.round(n).toString(16).padStart(2, '0').toUpperCase();
+    return `#${x(r)}${x(g)}${x(b)}${a < 1 ? x(a * 255) : ''}`;
+}
+function mxHexToRgba(hex) {
+    const h = (mxParseColor(hex) ?? '#000000').slice(1);
+    return {
+        r: parseInt(h.slice(0, 2), 16),
+        g: parseInt(h.slice(2, 4), 16),
+        b: parseInt(h.slice(4, 6), 16),
+        a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1,
+    };
+}
+function mxHexToHsva(hex) {
+    const { r, g, b, a } = mxHexToRgba(hex);
+    const [rr, gg, bb] = [r / 255, g / 255, b / 255];
+    const max = Math.max(rr, gg, bb);
+    const min = Math.min(rr, gg, bb);
+    const d = max - min;
+    let h = 0;
+    if (d) {
+        if (max === rr)
+            h = ((gg - bb) / d) % 6;
+        else if (max === gg)
+            h = (bb - rr) / d + 2;
+        else
+            h = (rr - gg) / d + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    return { h, s: max ? d / max : 0, v: max, a };
+}
+function mxHsvaToHex({ h, s, v, a }) {
+    const f = (n) => {
+        const k = (n + h / 60) % 6;
+        return v - v * s * Math.max(0, Math.min(k, 4 - k, 1));
+    };
+    return rgbaToHex(f(5) * 255, f(3) * 255, f(1) * 255, a);
+}
+/** Contraste WCAG entre duas cores (1 a 21). */
+function mxContrast(a, b) {
+    const lum = (hex) => {
+        const { r, g, b: bb } = mxHexToRgba(hex);
+        const c = [r, g, bb].map((x) => {
+            const s = x / 255;
+            return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+        });
+        return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+    };
+    const [l1, l2] = [lum(a), lum(b)].sort((x, y) => y - x);
+    return (l1 + 0.05) / (l2 + 0.05);
+}
+const HUES = [
+    [15, 'vermelho'],
+    [40, 'laranja'],
+    [65, 'amarelo'],
+    [80, 'verde-lima'],
+    [160, 'verde'],
+    [195, 'azul-petróleo'],
+    [250, 'azul'],
+    [285, 'roxo'],
+    [330, 'magenta'],
+    [360, 'vermelho'],
+];
+/** Nome aproximado da cor em português, para o leitor de ecrã: "azul escuro", "cinzento claro". */
+function mxColorName(hex) {
+    const { h, s, v } = mxHexToHsva(hex);
+    if (v < 0.12)
+        return 'preto';
+    if (s < 0.12)
+        return v > 0.92
+            ? 'branco'
+            : v > 0.6
+                ? 'cinzento claro'
+                : v > 0.3
+                    ? 'cinzento'
+                    : 'cinzento escuro';
+    let name = HUES.find(([max]) => h < max)[1];
+    if (name === 'laranja' && v < 0.6)
+        name = 'castanho';
+    // luminosidade HSL: escuro abaixo de 38%, claro acima de 70%
+    const l = v * (1 - s / 2);
+    const tone = l < 0.38 ? ' escuro' : l > 0.7 ? ' claro' : '';
+    return name + tone;
+}
+
+/**
+ * Editor de cor: área de saturação e brilho, matiz, opacidade opcional, campo hex,
+ * amostras e conta-gotas (quando o navegador o tem). O valor é um hex ("#1F6F78",
+ * ou "#1F6F7880" com opacidade).
+ *
+ * ```html
+ * <mx-color-panel [(value)]="cor" [swatches]="marca" />
+ * ```
+ *
+ * Teclado na área: ← → mudam a saturação, ↑ ↓ o brilho (Shift para passos de 10).
+ * A matiz e a opacidade são input range nativos.
+ */
+class MxColorPanel {
+    value = model('#1F6F78', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Mostra o controlo de opacidade e devolve hex de 8 dígitos quando < 100%. */
+    alpha = input(false, { ...(ngDevMode ? { debugName: "alpha" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    swatches = input([], ...(ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []));
+    showInput = input(true, { ...(ngDevMode ? { debugName: "showInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Só as amostras: uma paleta fechada, sem área nem matiz. */
+    swatchesOnly = input(false, { ...(ngDevMode ? { debugName: "swatchesOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    areaLabel = input('Saturação e brilho', ...(ngDevMode ? [{ debugName: "areaLabel" }] : /* istanbul ignore next */ []));
+    hueLabel = input('Matiz', ...(ngDevMode ? [{ debugName: "hueLabel" }] : /* istanbul ignore next */ []));
+    alphaLabel = input('Opacidade', ...(ngDevMode ? [{ debugName: "alphaLabel" }] : /* istanbul ignore next */ []));
+    swatchesLabel = input('Cores sugeridas', ...(ngDevMode ? [{ debugName: "swatchesLabel" }] : /* istanbul ignore next */ []));
+    /** Emite ao largar o rato, escolher amostra ou terminar de escrever (para guardar). */
+    committed = output();
+    area = viewChild.required('area');
+    inputId = mxUniqueId('mx-color-hex');
+    eyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
+    /** HSVA interno: guarda a matiz quando a cor é cinzenta (o hex não a tem). */
+    hsva = signal(mxHexToHsva('#1F6F78'), ...(ngDevMode ? [{ debugName: "hsva" }] : /* istanbul ignore next */ []));
+    hex = computed(() => mxHsvaToHex(this.hsva()), ...(ngDevMode ? [{ debugName: "hex" }] : /* istanbul ignore next */ []));
+    opaque = computed(() => mxHsvaToHex({ ...this.hsva(), a: 1 }), ...(ngDevMode ? [{ debugName: "opaque" }] : /* istanbul ignore next */ []));
+    draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    draftInvalid = computed(() => !!this.draft() && !mxParseColor(this.draft()), ...(ngDevMode ? [{ debugName: "draftInvalid" }] : /* istanbul ignore next */ []));
+    hueName = computed(() => mxColorName(mxHsvaToHex({ h: this.hsva().h, s: 1, v: 1, a: 1 })), ...(ngDevMode ? [{ debugName: "hueName" }] : /* istanbul ignore next */ []));
+    areaText = computed(() => {
+        const c = this.hsva();
+        return `Saturação ${this.pct(c.s)}%, brilho ${this.pct(c.v)}%, ${mxColorName(this.hex())}`;
+    }, ...(ngDevMode ? [{ debugName: "areaText" }] : /* istanbul ignore next */ []));
+    swatchList = computed(() => this.swatches().map((s) => {
+        const color = mxParseColor(typeof s === 'string' ? s : s.color) ?? '#000000';
+        const label = typeof s === 'string' ? `${mxColorName(color)}, ${color}` : `${s.label}, ${color}`;
+        return { color, label };
+    }), ...(ngDevMode ? [{ debugName: "swatchList" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // valor de fora -> HSVA (sem perder a matiz quando é a mesma cor)
+        effect(() => {
+            const v = mxParseColor(this.value() ?? '');
+            if (!v)
+                return;
+            if (untracked(() => this.hex()) === v)
+                return;
+            const next = mxHexToHsva(v);
+            const prev = untracked(() => this.hsva());
+            this.hsva.set(next.s === 0 || next.v === 0 ? { ...next, h: prev.h } : next);
+        });
+    }
+    round(n) {
+        return Math.round(n);
+    }
+    pct(n) {
+        return Math.round(n * 100);
+    }
+    update(next, commit = false) {
+        this.hsva.update((c) => ({ ...c, ...next }));
+        const hex = this.alpha() ? this.hex() : mxHsvaToHex({ ...this.hsva(), a: 1 });
+        this.value.set(hex);
+        if (commit)
+            this.committed.emit(hex);
+    }
+    setHex(hex) {
+        const v = mxParseColor(hex);
+        if (!v)
+            return;
+        const next = mxHexToHsva(v);
+        this.hsva.set(next.s === 0 || next.v === 0 ? { ...next, h: this.hsva().h } : next);
+        this.value.set(this.alpha() ? v : mxHsvaToHex({ ...this.hsva(), a: 1 }));
+        this.committed.emit(this.value());
+    }
+    setHue(e) {
+        this.update({ h: Number(e.target.value) });
+    }
+    setAlpha(e) {
+        this.update({ a: Number(e.target.value) / 100 });
+    }
+    onHexInput(e) {
+        const text = e.target.value;
+        this.draft.set(text);
+        const v = mxParseColor(text);
+        if (v)
+            this.setHex(v);
+    }
+    onAreaKey(e) {
+        if (this.disabled())
+            return;
+        const step = e.shiftKey ? 0.1 : 0.01;
+        const c = this.hsva();
+        const moves = {
+            ArrowRight: { s: Math.min(1, c.s + step) },
+            ArrowLeft: { s: Math.max(0, c.s - step) },
+            ArrowUp: { v: Math.min(1, c.v + step) },
+            ArrowDown: { v: Math.max(0, c.v - step) },
+            PageUp: { v: Math.min(1, c.v + 0.1) },
+            PageDown: { v: Math.max(0, c.v - 0.1) },
+            Home: { s: 0 },
+            End: { s: 1 },
+        };
+        const m = moves[e.key];
+        if (m) {
+            e.preventDefault();
+            this.update(m, true);
+        }
+    }
+    onAreaDown(e) {
+        if (this.disabled() || e.button !== 0)
+            return;
+        e.preventDefault();
+        const el = this.area().nativeElement;
+        el.querySelector('.mx-color-area-thumb')?.focus();
+        const rect = el.getBoundingClientRect();
+        const move = (ev) => this.update({
+            s: Math.min(Math.max((ev.clientX - rect.left) / rect.width, 0), 1),
+            v: 1 - Math.min(Math.max((ev.clientY - rect.top) / rect.height, 0), 1),
+        });
+        move(e);
+        const up = () => {
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', up);
+            this.committed.emit(this.value());
+        };
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+    }
+    async pickFromScreen() {
+        try {
+            const Ctor = window.EyeDropper;
+            const r = await new Ctor().open();
+            this.setHex(r.sRGBHex);
+        }
+        catch {
+            // a pessoa cancelou
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxColorPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MxColorPanel, isStandalone: true, selector: "mx-color-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, showInput: { classPropertyName: "showInput", publicName: "showInput", isSignal: true, isRequired: false, transformFunction: null }, swatchesOnly: { classPropertyName: "swatchesOnly", publicName: "swatchesOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, areaLabel: { classPropertyName: "areaLabel", publicName: "areaLabel", isSignal: true, isRequired: false, transformFunction: null }, hueLabel: { classPropertyName: "hueLabel", publicName: "hueLabel", isSignal: true, isRequired: false, transformFunction: null }, alphaLabel: { classPropertyName: "alphaLabel", publicName: "alphaLabel", isSignal: true, isRequired: false, transformFunction: null }, swatchesLabel: { classPropertyName: "swatchesLabel", publicName: "swatchesLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-swatches-only": "swatchesOnly() ? \"\" : null", "style.--mx-color-hue": "hsva().h", "style.--mx-color-current": "hex()", "style.--mx-color-opaque": "opaque()" }, classAttribute: "mx-color-panel" }, viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, isSignal: true }], exportAs: ["mxColorPanel"], ngImport: i0, template: `
+    @if (!swatchesOnly()) {
+      <div class="mx-color-area" #area (pointerdown)="onAreaDown($event)">
+        <div
+          class="mx-color-area-thumb"
+          role="slider"
+          [attr.tabindex]="disabled() ? -1 : 0"
+          [attr.aria-label]="areaLabel()"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          [attr.aria-valuenow]="pct(hsva().s)"
+          [attr.aria-valuetext]="areaText()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          [style.left.%]="hsva().s * 100"
+          [style.top.%]="(1 - hsva().v) * 100"
+          (keydown)="onAreaKey($event)"
+        ></div>
+      </div>
+
+      <div class="mx-color-sliders">
+        <div class="mx-color-preview" aria-hidden="true"><span></span></div>
+        <div class="mx-color-ranges">
+          <input
+            type="range"
+            class="mx-color-range mx-color-hue"
+            min="0"
+            max="359"
+            [value]="round(hsva().h)"
+            [disabled]="disabled()"
+            [attr.aria-label]="hueLabel()"
+            [attr.aria-valuetext]="round(hsva().h) + ' graus, ' + hueName()"
+            (input)="setHue($event)"
+          />
+          @if (alpha()) {
+            <input
+              type="range"
+              class="mx-color-range mx-color-alpha"
+              min="0"
+              max="100"
+              [value]="pct(hsva().a)"
+              [disabled]="disabled()"
+              [attr.aria-label]="alphaLabel()"
+              [attr.aria-valuetext]="pct(hsva().a) + '%'"
+              (input)="setAlpha($event)"
+            />
+          }
+        </div>
+        @if (eyeDropper) {
+          <button
+            type="button"
+            class="mx-color-tool"
+            [disabled]="disabled()"
+            aria-label="Escolher uma cor do ecrã"
+            (click)="pickFromScreen()"
+          >
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path
+                d="M10.5 2.5l3 3-1.5 1.5-.8-.8-5.7 5.7H3.5v-2l5.7-5.7-.8-.8z"
+                stroke="currentColor"
+                stroke-width="1.3"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        }
+      </div>
+    }
+
+    @if (showInput() && !swatchesOnly()) {
+      <div class="mx-color-input-row">
+        <label class="mx-color-input-label" [for]="inputId">Hex</label>
+        <input
+          class="mx-input mx-color-hex"
+          data-size="sm"
+          [id]="inputId"
+          spellcheck="false"
+          autocomplete="off"
+          [disabled]="disabled()"
+          [value]="draft() ?? hex()"
+          [attr.aria-invalid]="draftInvalid() ? 'true' : null"
+          (input)="onHexInput($event)"
+          (blur)="draft.set(null)"
+        />
+      </div>
+    }
+
+    @if (swatchList().length) {
+      <div class="mx-color-swatches" role="group" [attr.aria-label]="swatchesLabel()">
+        @for (s of swatchList(); track s.color) {
+          <button
+            type="button"
+            class="mx-color-swatch"
+            [style.--mx-swatch]="s.color"
+            [attr.aria-label]="s.label"
+            [attr.aria-pressed]="s.color === hex()"
+            [disabled]="disabled()"
+            (click)="setHex(s.color)"
+          ></button>
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxColorPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mx-color-panel',
+                    exportAs: 'mxColorPanel',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'mx-color-panel',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-swatches-only]': 'swatchesOnly() ? "" : null',
+                        '[style.--mx-color-hue]': 'hsva().h',
+                        '[style.--mx-color-current]': 'hex()',
+                        '[style.--mx-color-opaque]': 'opaque()',
+                    },
+                    template: `
+    @if (!swatchesOnly()) {
+      <div class="mx-color-area" #area (pointerdown)="onAreaDown($event)">
+        <div
+          class="mx-color-area-thumb"
+          role="slider"
+          [attr.tabindex]="disabled() ? -1 : 0"
+          [attr.aria-label]="areaLabel()"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          [attr.aria-valuenow]="pct(hsva().s)"
+          [attr.aria-valuetext]="areaText()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          [style.left.%]="hsva().s * 100"
+          [style.top.%]="(1 - hsva().v) * 100"
+          (keydown)="onAreaKey($event)"
+        ></div>
+      </div>
+
+      <div class="mx-color-sliders">
+        <div class="mx-color-preview" aria-hidden="true"><span></span></div>
+        <div class="mx-color-ranges">
+          <input
+            type="range"
+            class="mx-color-range mx-color-hue"
+            min="0"
+            max="359"
+            [value]="round(hsva().h)"
+            [disabled]="disabled()"
+            [attr.aria-label]="hueLabel()"
+            [attr.aria-valuetext]="round(hsva().h) + ' graus, ' + hueName()"
+            (input)="setHue($event)"
+          />
+          @if (alpha()) {
+            <input
+              type="range"
+              class="mx-color-range mx-color-alpha"
+              min="0"
+              max="100"
+              [value]="pct(hsva().a)"
+              [disabled]="disabled()"
+              [attr.aria-label]="alphaLabel()"
+              [attr.aria-valuetext]="pct(hsva().a) + '%'"
+              (input)="setAlpha($event)"
+            />
+          }
+        </div>
+        @if (eyeDropper) {
+          <button
+            type="button"
+            class="mx-color-tool"
+            [disabled]="disabled()"
+            aria-label="Escolher uma cor do ecrã"
+            (click)="pickFromScreen()"
+          >
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path
+                d="M10.5 2.5l3 3-1.5 1.5-.8-.8-5.7 5.7H3.5v-2l5.7-5.7-.8-.8z"
+                stroke="currentColor"
+                stroke-width="1.3"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        }
+      </div>
+    }
+
+    @if (showInput() && !swatchesOnly()) {
+      <div class="mx-color-input-row">
+        <label class="mx-color-input-label" [for]="inputId">Hex</label>
+        <input
+          class="mx-input mx-color-hex"
+          data-size="sm"
+          [id]="inputId"
+          spellcheck="false"
+          autocomplete="off"
+          [disabled]="disabled()"
+          [value]="draft() ?? hex()"
+          [attr.aria-invalid]="draftInvalid() ? 'true' : null"
+          (input)="onHexInput($event)"
+          (blur)="draft.set(null)"
+        />
+      </div>
+    }
+
+    @if (swatchList().length) {
+      <div class="mx-color-swatches" role="group" [attr.aria-label]="swatchesLabel()">
+        @for (s of swatchList(); track s.color) {
+          <button
+            type="button"
+            class="mx-color-swatch"
+            [style.--mx-swatch]="s.color"
+            [attr.aria-label]="s.label"
+            [attr.aria-pressed]="s.color === hex()"
+            [disabled]="disabled()"
+            (click)="setHex(s.color)"
+          ></button>
+        }
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], swatches: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatches", required: false }] }], showInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInput", required: false }] }], swatchesOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatchesOnly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], areaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaLabel", required: false }] }], hueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hueLabel", required: false }] }], alphaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "alphaLabel", required: false }] }], swatchesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatchesLabel", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }], area: [{ type: i0.ViewChild, args: ['area', { isSignal: true }] }] } });
+
+const POSITIONS = [
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+];
+/**
+ * Campo de cor: escreve-se o hex (ou rgb()) ou escolhe-se no painel que abre no botão
+ * da amostra. Funciona com ngModel e Reactive Forms; o valor é um hex ou null.
+ *
+ * ```html
+ * <mx-form-field>
+ *   <label mxLabel>Cor da marca</label>
+ *   <mx-color-picker formControlName="cor" [swatches]="sugestoes" />
+ * </mx-form-field>
+ * ```
+ */
+class MxColorPicker {
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    alpha = input(false, { ...(ngDevMode ? { debugName: "alpha" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    swatches = input([], ...(ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []));
+    placeholder = input('#RRGGBB', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    dialogLabel = input('Escolher cor', ...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    field = inject(MxFormField, { optional: true });
+    ngControl = inject(NgControl, { self: true, optional: true });
+    host = inject(ElementRef).nativeElement;
+    toggleButton = viewChild.required('toggleButton');
+    panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    positions = POSITIONS;
+    generatedId = mxUniqueId('mx-color');
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    badFormat = computed(() => !!this.draft() && !mxParseColor(this.draft()), ...(ngDevMode ? [{ debugName: "badFormat" }] : /* istanbul ignore next */ []));
+    toggleLabel = computed(() => {
+        const v = this.value();
+        return v ? `Mudar cor, ${mxColorName(v)}, ${v}` : 'Escolher cor';
+    }, ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+    }
+    open() {
+        if (!this.isDisabled())
+            this.isOpen.set(true);
+    }
+    toggle() {
+        if (this.isOpen())
+            this.close();
+        else
+            this.open();
+    }
+    close(restoreFocus = true) {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        if (restoreFocus)
+            this.toggleButton().nativeElement.focus();
+    }
+    onAttach() {
+        queueMicrotask(() => this.panel()?.nativeElement.querySelector('.mx-color-area-thumb')?.focus());
+    }
+    onOverlayKey(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.close();
+        }
+    }
+    onOutside(e) {
+        if (!this.host.contains(e.target))
+            this.close(false);
+    }
+    setValue(v) {
+        this.draft.set(null);
+        if (v === this.value())
+            return;
+        this.value.set(v);
+        this.onChange(v);
+    }
+    onInput(e) {
+        const text = e.target.value;
+        const v = mxParseColor(text);
+        this.draft.set(text && !v ? text : null);
+        if (v || !text)
+            this.setValue(v);
+        if (v)
+            this.draft.set(text);
+    }
+    onBlur() {
+        if (!this.badFormat())
+            this.draft.set(null);
+        this.onTouched();
+    }
+    // ---- MxFormFieldControl ----
+    errorState() {
+        if (this.invalid() || this.badFormat())
+            return true;
+        const c = this.ngControl;
+        return !!c && !!c.invalid && !!(c.touched || c.dirty);
+    }
+    isRequired() {
+        return this.required() || !!this.ngControl?.control?.hasValidator?.(Validators.required);
+    }
+    // ---- ControlValueAccessor ----
+    writeValue(value) {
+        this.value.set(value ? mxParseColor(value) : null);
+        this.draft.set(null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: MxColorPicker, isStandalone: true, selector: "mx-color-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.aria-label": "null" }, classAttribute: "mx-color-picker" }, providers: [{ provide: MX_FORM_FIELD_CONTROL, useExisting: MxColorPicker }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], exportAs: ["mxColorPicker"], ngImport: i0, template: `
+    <div class="mx-color-picker-field" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+      <button
+        #toggleButton
+        type="button"
+        class="mx-color-picker-toggle"
+        aria-haspopup="dialog"
+        [style.--mx-swatch]="value() ?? 'transparent'"
+        [attr.data-empty]="value() ? null : ''"
+        [attr.aria-expanded]="isOpen()"
+        [attr.aria-label]="toggleLabel()"
+        [disabled]="isDisabled()"
+        (click)="toggle()"
+      ></button>
+      <input
+        class="mx-input mx-color-picker-input"
+        spellcheck="false"
+        autocomplete="off"
+        [id]="controlId()"
+        [placeholder]="placeholder()"
+        [value]="draft() ?? value() ?? ''"
+        [disabled]="isDisabled()"
+        [attr.data-size]="size() === 'md' ? null : size()"
+        [attr.aria-invalid]="errorState() ? 'true' : null"
+        [attr.aria-required]="isRequired() ? 'true' : null"
+        [attr.aria-describedby]="field?.describedBy() ?? null"
+        [attr.aria-label]="ariaLabel() ?? null"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+        (keydown.alt.arrowdown)="$event.preventDefault(); open()"
+      />
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="onOutside($event)"
+      (overlayKeydown)="onOverlayKey($event)"
+      (attach)="onAttach()"
+      (detach)="close(false)"
+    >
+      <div
+        class="mx-color-picker-panel"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-label]="dialogLabel()"
+        #panel
+      >
+        <mx-color-panel
+          [value]="value() ?? '#1F6F78'"
+          (valueChange)="setValue($event)"
+          [alpha]="alpha()"
+          [swatches]="swatches()"
+          [showInput]="false"
+        />
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: MxColorPanel, selector: "mx-color-panel", inputs: ["value", "alpha", "swatches", "showInput", "swatchesOnly", "disabled", "areaLabel", "hueLabel", "alphaLabel", "swatchesLabel"], outputs: ["valueChange", "committed"], exportAs: ["mxColorPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxColorPicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mx-color-picker',
+                    exportAs: 'mxColorPicker',
+                    imports: [CdkOverlayOrigin, CdkConnectedOverlay, MxColorPanel],
+                    providers: [{ provide: MX_FORM_FIELD_CONTROL, useExisting: MxColorPicker }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'mx-color-picker', '[attr.aria-label]': 'null' },
+                    template: `
+    <div class="mx-color-picker-field" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+      <button
+        #toggleButton
+        type="button"
+        class="mx-color-picker-toggle"
+        aria-haspopup="dialog"
+        [style.--mx-swatch]="value() ?? 'transparent'"
+        [attr.data-empty]="value() ? null : ''"
+        [attr.aria-expanded]="isOpen()"
+        [attr.aria-label]="toggleLabel()"
+        [disabled]="isDisabled()"
+        (click)="toggle()"
+      ></button>
+      <input
+        class="mx-input mx-color-picker-input"
+        spellcheck="false"
+        autocomplete="off"
+        [id]="controlId()"
+        [placeholder]="placeholder()"
+        [value]="draft() ?? value() ?? ''"
+        [disabled]="isDisabled()"
+        [attr.data-size]="size() === 'md' ? null : size()"
+        [attr.aria-invalid]="errorState() ? 'true' : null"
+        [attr.aria-required]="isRequired() ? 'true' : null"
+        [attr.aria-describedby]="field?.describedBy() ?? null"
+        [attr.aria-label]="ariaLabel() ?? null"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+        (keydown.alt.arrowdown)="$event.preventDefault(); open()"
+      />
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions"
+      (overlayOutsideClick)="onOutside($event)"
+      (overlayKeydown)="onOverlayKey($event)"
+      (attach)="onAttach()"
+      (detach)="close(false)"
+    >
+      <div
+        class="mx-color-picker-panel"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-label]="dialogLabel()"
+        #panel
+      >
+        <mx-color-panel
+          [value]="value() ?? '#1F6F78'"
+          (valueChange)="setValue($event)"
+          [alpha]="alpha()"
+          [swatches]="swatches()"
+          [showInput]="false"
+        />
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], swatches: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatches", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], toggleButton: [{ type: i0.ViewChild, args: ['toggleButton', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MxColorPanel, MxColorPicker, mxColorName, mxContrast, mxHexToHsva, mxHexToRgba, mxHsvaToHex, mxParseColor };
+//# sourceMappingURL=muxima-ui-core-color-picker.mjs.map