@arcgis/map-components/dist/components/arcgis-color-select/customElement.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as h } from "../../chunks/runtime.js";
import { ref as m } from "lit/directives/ref.js";
import { css as f, html as c } from "lit";
import i from "@arcgis/core/Color.js";
import { substitute as d } from "@arcgis/core/intl.js";
import { LitElement as g, createEvent as u, nothing as s } from "@arcgis/lumina";
import { generateGuid as _ } from "@arcgis/toolkit/string";
import { u as $ } from "../../chunks/useT9n.js";
const b = f`:host{display:inline-block;position:relative;width:fit-content;isolation:isolate}calcite-label:focus-within .swatch-wrapper{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:2px}`;
class v extends g {
  constructor() {
    super(...arguments), this._messages = $(), this.#t = (e) => {
      this._popoverReferenceElement = e ?? void 0;
    }, this.#e = _(), this._color = new i([0, 0, 0, 1]), this._open = !1, this.arcgisColorChanged = u();
  }
  static {
    this.properties = { _color: 16, _open: 16, _popoverReferenceElement: 16, color: 1, label: 1 };
  }
  static {
    this.styles = b;
  }
  #t;
  #e;
  #i(e) {
    (e.key === " " || e.key === "Enter") && this.#o(e);
  }
  #o(e) {
    e.preventDefault(), e.stopPropagation(), this._open = !this._open;
  }
  get color() {
    return this._color;
  }
  set color(e) {
    const o = e instanceof i ? e : new i(e);
    o.equals(this._color) || (this._color = o);
  }
  render() {
    const e = this._color.toCss(!0), [o, a, n, p] = this._color.toRgba(), r = d(this._messages?.ariaDescription ?? "", {
      label: this.label ?? this._messages?.label ?? "",
      color: `${o}, ${a}, ${n}, ${p}`
    });
    return c`<calcite-label layout=inline scale=s @click=${this.#o}><div class="swatch-wrapper" tabindex=0 role=button aria-controls=${this.#e ?? s} aria-expanded=${this._open ? "true" : "false"} aria-haspopup=dialog aria-label=${r ?? s} @keydown=${this.#i} @click=${this.#o} ${m(this.#t)}><calcite-swatch .color=${e} .label=${r}></calcite-swatch></div>${this.label ?? this._messages?.label}${this._popoverReferenceElement ? c`<calcite-popover id=${this.#e ?? s} auto-close class="popover" .label=${this._messages?.popoverLabel ?? ""} .open=${this._open} @calcitePopoverClose=${() => this._open = !1} @calcitePopoverOpen=${() => this._open = !0} overlay-positioning=fixed .referenceElement=${this._popoverReferenceElement}><calcite-color-picker alpha-channel channels-disabled @click=${(t) => {
      t.stopPropagation();
    }} @calciteColorPickerInput=${({ target: { value: t } }) => {
      if (typeof t == "string") {
        const l = new i(t);
        this.color = l, this.arcgisColorChanged.emit(l);
      }
    }} saved-disabled .value=${e}></calcite-color-picker></calcite-popover>` : void 0}</calcite-label>`;
  }
}
h("arcgis-color-select", v);
export {
  v as ArcgisColorSelect
};