import { c as C } from "../../chunks/runtime.js";
import { keyed as n } from "lit/directives/keyed.js";
import { LitElement as m, createEvent as i } from "@arcgis/lumina";
import { css as u, render as g, html as s, svg as f } from "lit";
import { createRef as w, ref as a } from "lit/directives/ref.js";
import { unsafeGetElementDirection as v } from "@arcgis/toolkit/dom";
import { debounce as E } from "@arcgis/toolkit/function";
import { u as k } from "../../chunks/useT9n.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/5.0/esri/copyright.txt for details.
v5.0.0-next.137 */
function $(l, e, o) {
  window.localStorage.setItem(l, JSON.stringify(e));
}
function y(l, e) {
  const o = window.localStorage.getItem(l);
  return o && e ? JSON.parse(o) : o;
}
const S = u`:host,arcgis-picker-input{display:block}.color-picker-container{display:flex;flex-direction:column}.color-picker{--calcite-color-border-1: transparent;overflow-x:hidden}.preview-swatch{width:100%;height:24px}.recent-colors-container{align-items:center;border:var(--calcite-border-width-sm) solid var(--calcite-color-border-input);display:flex;gap:var(--calcite-space-sm);height:32px;padding:0 var(--calcite-space-xs);transition:outline-offset .1s ease-in-out,outline-color .1s ease-in-out}.preview-recent-swatch{cursor:pointer}.recent-colors-container:focus,.preview-recent-swatch:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-brand);outline-offset:var(--calcite-border-width-md)}.empty-swatch{cursor:default}.end-action{display:flex}`;
class I extends m {
  constructor() {
    super(), this._messages = k(), this.actionEl = w(), this.setRecentColorElement = (e) => (o) => {
      switch (e) {
        case 1:
          this.recentColor1El = o;
          break;
        case 2:
          this.recentColor2El = o;
          break;
        default:
          this.recentColor3El = o;
      }
    }, this.recentColors = [], this.clearable = !1, this.compact = !1, this.disabled = !1, this.placement = "auto", this.storageId = "arcgis-color-input-storage-colors", this.hideRecentColors = !1, this.showTransparency = !1, this.arcgisChange = i(), this.arcgisColorInputChange = i(), this.arcgisColorInputPopoverClose = i(), this.arcgisColorInputPopoverOpen = i(), this.arcgisColorInputSwatchUpdate = i(), this.arcgisInternalStoredColor = i(), this.arcgisPickerClose = i(), this.arcgisPickerOpen = i(), this.arcgisSwatchUpdate = i(), this.listenOn(document, "arcgisInternalStoredColor", this.handleUpdateRecentColors), this.listenOn(document, "arcgisRecentColorsUpdate", this.handleStoreNewRecentColor);
  }
  static {
    this.properties = { recentColors: 16, clearable: 5, color: 1, compact: 5, disabled: 5, messageOverrides: 0, placement: 1, popoverProps: 0, storageId: 1, hideRecentColors: 5, showTransparency: 5 };
  }
  static {
    this.styles = S;
  }
  async close() {
    await this.inlineInputEl?.close();
  }
  async setFocus() {
    await this.inlineInputEl?.setFocus();
  }
  load() {
    this.setRecentColorsFromStorage();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.removeTooltip();
  }
  async handleOpen() {
    await this.colorPickerEl?.setFocus(), this.arcgisPickerOpen.emit(), this.arcgisColorInputPopoverOpen.emit();
  }
  setInlineInputRef(e) {
    this.inlineInputEl = e;
  }
  setColorPickerRef(e) {
    e && (this.colorPickerEl = e);
  }
  getRecentColorElement(e) {
    switch (e) {
      case 1:
        return this.recentColor1El;
      case 2:
        return this.recentColor2El;
      default:
        return this.recentColor3El;
    }
  }
  setRecentColorsFromStorage() {
    const e = y(this.storageId, !0);
    e && (this.recentColors = [...e]);
  }
  handleSwatchClickOrKeyUp(e) {
    if ("key" in e && e.key !== "Enter" && e.key !== "Space")
      return;
    const t = e.currentTarget.color || void 0;
    this.updateColor(t), this.arcgisSwatchUpdate.emit(t), this.arcgisColorInputSwatchUpdate.emit(t), setTimeout(() => this.recentColor1El?.focus(), 200);
  }
  handleRecentColorsKeyDown(e) {
    if (this.recentColors.length === 1)
      return;
    const o = e.key;
    let t;
    this.activeColorSwatchEl === this.recentColor1El ? t = 1 : this.activeColorSwatchEl === this.recentColor2El ? t = 2 : this.activeColorSwatchEl === this.recentColor3El && (t = 3), o === "ArrowLeft" && (!t || t === 1 ? this.getRecentColorElement(this.recentColors.length)?.focus() : this.getRecentColorElement(t - 1)?.focus()), o === "ArrowRight" && (!t || t === this.recentColors.length ? this.recentColor1El?.focus() : this.getRecentColorElement(t + 1)?.focus());
  }
  handleUpdateActiveSwatch(e) {
    this.activeColorSwatchEl = e.target;
  }
  handleStoreNewRecentColor(e) {
    this.storeRecentColorToStorage(e.detail);
  }
  handleUpdateRecentColors(e) {
    e.composedPath().includes(this.el) || this.setRecentColorsFromStorage();
  }
  handleClearColor() {
    this.updateColor(void 0);
  }
  updateColor(e, o = !0) {
    e !== this.color && (this.color = e, this.arcgisChange.emit(), this.arcgisColorInputChange.emit(), o && this.storeRecentColorToStorage(e));
  }
  storeRecentColorToStorage(e) {
    if (!e)
      return;
    e.length > 7 && (e = e.slice(0, 7));
    const t = [e, ...this.recentColors.filter((r) => r !== e)].slice(0, 3);
    $(this.storageId, t), this.recentColors = t, this.arcgisInternalStoredColor.emit();
  }
  handleClose(e) {
    e.stopPropagation(), this.storeRecentColorToStorage(this.colorPickerEl?.value), this.arcgisPickerClose.emit(this.colorPickerEl?.value), this.arcgisColorInputPopoverClose.emit(this.colorPickerEl?.value);
  }
  addTooltip(e) {
    this.removeTooltip(), this.tooltipContainerEl = document.createElement("div"), g(s`<calcite-tooltip .placement=${e.placement ?? "auto"} .referenceElement=${e.referenceElement} overlay-positioning=fixed open>${e.innerHTML}</calcite-tooltip>`, this.tooltipContainerEl), document.body.append(this.tooltipContainerEl);
  }
  removeTooltip() {
    this.tooltipContainerEl?.parentNode && (this.tooltipContainerEl.remove(), this.tooltipContainerEl = void 0);
  }
  render() {
    const { compact: e, disabled: o, recentColors: t, _messages: r } = this, h = [t[0], t[1]], d = v(this.el) === "rtl";
    return e || h.push(t[2]), s`<arcgis-picker-input .disabled=${o} .intlDone=${r.commitColor} .heading=${r.selectColor} .label=${r.selectColor} @arcgisPopoverOpen=${this.handleOpen} @arcgisPopoverClose=${this.handleClose} .popoverProps=${this.popoverProps} ${a(this.setInlineInputRef)}><div class="color-picker-container" slot=content>${n(`color-picker${e ? "--compact" : ""}`, s`<calcite-color-picker .clearable=${this.clearable} class="color-picker" @calciteColorPickerInput=${E((c) => {
      c.stopPropagation(), this.updateColor(this.colorPickerEl.value, !1);
    }, 500)} .scale=${e ? "s" : "m"} .storageId=${this.storageId} .alphaChannel=${this.showTransparency} .value=${this.color} ${a(this.setColorPickerRef)}></calcite-color-picker>`)}</div><div slot=preview><calcite-color-picker-swatch class="preview-swatch" .color=${this.color} scale=s></calcite-color-picker-swatch></div>${!this.hideRecentColors && s`<div slot=content-end class="recent-colors-container" @keydown=${this.handleRecentColorsKeyDown} tabindex=-1>${h.map((c, p) => c ? n(c, s`<calcite-color-picker-swatch class="preview-recent-swatch" role=button scale=s tabindex=0 .active=${c === this.color} .color=${c} @click=${this.handleSwatchClickOrKeyUp} @keyup=${this.handleSwatchClickOrKeyUp} @focus=${this.handleUpdateActiveSwatch} ${a(this.setRecentColorElement(p + 1))}></calcite-color-picker-swatch>`) : this.renderEmptySwatch(`empty-swatch-${p}`))}</div>` || ""}${this.clearable && s`<div slot=content-end class="end-action"><calcite-action icon=circle-disallowed scale=s .label=${r.clearColor} .text=${r.clearColor ?? ""} @click=${this.handleClearColor} @mouseover=${() => this.addTooltip({
      referenceElement: this.actionEl.value,
      placement: d ? "right-start" : "left-start",
      innerHTML: r.noColor ?? ""
    })} @mouseout=${() => this.removeTooltip()} ${a(this.actionEl)}></calcite-action></div>` || ""}</arcgis-picker-input>`;
  }
  renderEmptySwatch(e) {
    return n(e, s`<svg class="empty-swatch" viewBox="0 0 20 20" xmlns=http://www.w3.org/2000/svg width=20>${f`<rect width=20 height=20 fill=#f8f8f8 stroke=#000 stroke-dasharray=2 />`}</svg>`);
  }
}
C("arcgis-color-input", I);
export {
  I as ArcgisColorInput
};
