import v from "../components/copy-button.js";
import f from "../components/line-clamp.js";
import w from "../components/resize-observer.js";
import b from "../components/space.js";
import { C as _ } from "./typography.DJC_UXgs.js";
import { n as a, C as k } from "./lib-cortex-element.CVMmyPMC.js";
import { c as F } from "./component.styles.CRO4Odto.js";
import { c as n, C as h, H as $, l as z } from "./color.vLD2sNTs.js";
import { c as O } from "./custom-element.L4WJXn1j.js";
import { d as W } from "./debounce.DaHuiSGU.js";
import { L as A } from "./i18n.BABe9hN4.js";
import { w as i } from "./watch.BCJD77bD.js";
import { i as G, x as u } from "./lit-element.jLBm65_O.js";
import { r as c } from "./state.CSDxrqLd.js";
import { e as R } from "./query.BBf1UFkC.js";
import { e as g } from "./class-map.BiVq-cVR.js";
import { o as x } from "./if-defined.BRoBj_Rp.js";
import { c as U } from "./repeat.DbF2p5ae.js";
import { o as l } from "./style-map.llVFPd__.js";
import { n as E } from "./when.Dr1es41R.js";
var p = /* @__PURE__ */ ((o) => (o.Circle = "circle", o.GridItem = "grid-item", o.Oval = "oval", o))(p || {});
const S = G`:host{display:block}.color-swatch{border:1px solid var(--cx-color-neutral-200);justify-content:center;align-items:center;display:flex}.color-swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-swatch--circle{aspect-ratio:1;height:auto;width:var(--swatch-size,350px);min-width:var(--swatch-size,230px);border-radius:var(--cx-border-radius-circle);max-width:100%}.color-swatch--oval{height:var(--swatch-size,350px);border-radius:calc(var(--swatch-size,350px) / 2);width:100%}.color-swatch--grid{width:100%;height:var(--swatch-size,300px);min-width:var(--swatch-grid-min-width,165px);border-radius:var(--cx-border-radius-x-large)}.color-swatch__content{max-height:100%;padding:var(--swatch-content-padding,0);justify-content:space-between;gap:var(--cx-spacing-medium)}.color-swatch--circle>.color-swatch__content{min-width:50%;max-width:75%}.color-swatch--oval>.color-swatch__content{max-width:85%}.color-swatch--grid>.color-swatch__content{width:100%;height:100%;padding:var(--cx-spacing-large) var(--cx-spacing-medium)}.color-swatch__key::part(base){vertical-align:middle;min-width:50px;height:100%}.color-swatch__key[variant=small]::part(base){display:inline-block}.color-swatch__copy-button::part(button){height:fit-content;min-height:fit-content;padding:0;background:0 0!important;border-width:0!important}.color-swatch__copy-button::part(label){height:fit-content;padding:0}.color-swatch__value{text-transform:none}.color-swatch__value::part(base){word-break:break-word}.color-swatch__value-wrapper{text-align:left}`;
var V = Object.defineProperty, B = Object.getOwnPropertyDescriptor, e = (o, r, y, d) => {
  for (var s = d > 1 ? void 0 : d ? B(r, y) : r, C = o.length - 1, m; C >= 0; C--)
    (m = o[C]) && (s = (d ? m(r, y, s) : m(s)) || s);
  return d && s && V(r, y, s), s;
};
let t = class extends k {
  constructor() {
    super(...arguments), this.localize = new A(this), this.ignoreWatchColorChange = /* @__PURE__ */ new Set(), this.variant = p.Circle, this.name = "", this.hex = "", this.rgb = "", this.cmyk = "", this.pms = "", this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.canFocusCodeOnly = !1, this.noAutoConvert = !1, this.textColor = "#27272A", this.textVariant = "body2", this.lineClamp = 3, this.backgroundColor = "#F9F9F9", this.canFocusContainer = !0, this.isContainerFocused = !1;
  }
  runFirstUpdated() {
    this.handleColorChange();
  }
  /**
   * Change to default color
   */
  setDefaultColor() {
    this.backgroundColor = "#F9F9F9", this.textColor = "#27272A";
  }
  handleResize() {
    const o = this.containerEl.offsetWidth;
    o > 315 || this.variant === "grid-item" ? (this.textVariant = "body2", this.rowGap = "x-small", this.lineClamp = 3) : o > 230 ? (this.textVariant = "body3", this.rowGap = "2x-small", this.lineClamp = 2) : (this.textVariant = "small", this.rowGap = "3x-small", this.lineClamp = 1);
  }
  handleVariantChange() {
    this.containerEl && this.handleResize();
  }
  handleCmykChange() {
    if (!this.noAutoConvert) {
      if (this.ignoreWatchColorChange.has("cmyk") || this.cmyk === "" && !this.hasUpdated) {
        this.ignoreWatchColorChange.delete("cmyk");
        return;
      }
      this.ignoreWatchColorChange.add("hex"), this.ignoreWatchColorChange.add("rgb"), this.hex = n(this.cmyk, h.Hex), this.rgb = n(this.cmyk, h.Rgb);
    }
  }
  handleRGBChange() {
    if (!this.noAutoConvert) {
      if (this.ignoreWatchColorChange.has("rgb") || this.rgb === "" && !this.hasUpdated) {
        this.ignoreWatchColorChange.delete("rgb");
        return;
      }
      this.ignoreWatchColorChange.add("hex"), this.ignoreWatchColorChange.add("cmyk"), this.hex = n(this.rgb, h.Hex), this.cmyk = n(this.rgb, h.Cmyk);
    }
  }
  handleHexChange() {
    if (!this.noAutoConvert) {
      if (this.ignoreWatchColorChange.has("hex") || this.hex === "" && !this.hasUpdated) {
        this.ignoreWatchColorChange.delete("hex");
        return;
      }
      this.ignoreWatchColorChange.add("rgb"), this.ignoreWatchColorChange.add("cmyk"), this.rgb = n(this.hex, h.Rgb), this.cmyk = n(this.hex, h.Cmyk);
    }
  }
  async handleColorChange() {
    await this.updateComplete, this.hex && $.test(this.hex) ? (this.textColor = z(this.hex, "#27272A", "#F9F9F9"), this.backgroundColor = this.hex) : this.setDefaultColor();
  }
  handleCanFocusCodeOnlyChange() {
    this.isContainerFocused || (this.canFocusContainer = !this.canFocusCodeOnly);
  }
  handleFocusIn() {
    this.isContainerFocused = !0;
  }
  handleFocusOut() {
    this.isContainerFocused = !1;
  }
  render() {
    const o = [
      { key: "HEX", value: this.hex },
      { key: "RGB", value: this.rgb },
      { key: "CMYK", value: this.cmyk },
      { key: "PMS", value: this.pms }
    ].filter((r) => this.showCodes.includes(r.key));
    return u`<cx-resize-observer @cx-resize=${this.handleResize}><div part="base" tabindex=${x(this.canFocusContainer ? "0" : void 0)} class=${g({
      "color-swatch": !0,
      "color-swatch--circle": this.variant === p.Circle,
      "color-swatch--grid": this.variant === p.GridItem,
      "color-swatch--oval": this.variant === p.Oval
    })} style=${l({
      backgroundColor: this.backgroundColor
    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}><cx-space part="content" direction="vertical" class="color-swatch__content"><cx-typography variant="h5" part="name" style=${l({
      "--color": this.textColor
    })}>${this.name}</cx-typography><cx-space direction="vertical" spacing=${this.rowGap} part="content">${U(
      o,
      (r) => r.key,
      (r) => u`<cx-space direction="horizontal" align-items="center" spacing="small" part="item" wrap="nowrap"><cx-typography variant=${this.textVariant} class="color-swatch__key" part="key" style=${l({
        "--color": this.textColor
      })}>${r.key}</cx-typography>${E(
        this.canCopy && r.value !== "",
        () => u`<cx-copy-button part="copy-button" tabindex=${x(
          this.canFocusCodeOnly ? void 0 : "-1"
        )} class="color-swatch__copy-button" copy-label=${this.localize.term("clickToCopy")} focus-copy-label=${this.localize.term(
          "pressEnterOrCtrlCToCopy"
        )} label=${`${r.key} ${r.value}`} no-icon value=${r.value}><cx-line-clamp lines=${this.lineClamp} disabled-tooltip class=${g({
          "color-swatch__value-wrapper": !0
        })}><cx-typography variant=${this.textVariant} style=${l({
          "--color": this.textColor
        })} class="color-swatch__value" part="value">${r.value}</cx-typography></cx-line-clamp></cx-copy-button>`,
        () => u`<cx-line-clamp lines=${this.lineClamp} disabled-tooltip class="color-swatch__value-wrapper"><cx-typography variant=${this.textVariant} style=${l({
          "--color": this.textColor
        })} class="color-swatch__value" part="value">${r.value}</cx-typography></cx-line-clamp>`
      )}</cx-space>`
    )}</cx-space></cx-space></div></cx-resize-observer>`;
  }
};
t.styles = [F, S];
t.dependencies = {
  "cx-copy-button": v,
  "cx-line-clamp": f,
  "cx-resize-observer": w,
  "cx-space": b,
  "cx-typography": _
};
e([
  R(".color-swatch")
], t.prototype, "containerEl", 2);
e([
  a({ reflect: !0, type: String })
], t.prototype, "variant", 2);
e([
  a({ reflect: !0, type: String })
], t.prototype, "name", 2);
e([
  a({ reflect: !0, type: String })
], t.prototype, "hex", 2);
e([
  a({ reflect: !0, type: String })
], t.prototype, "rgb", 2);
e([
  a({ reflect: !0, type: String })
], t.prototype, "cmyk", 2);
e([
  a({ reflect: !0, type: String })
], t.prototype, "pms", 2);
e([
  a({ attribute: "can-copy", reflect: !0, type: Boolean })
], t.prototype, "canCopy", 2);
e([
  a({
    attribute: "show-codes",
    converter: {
      fromAttribute: (o) => o?.split(" ") ?? [],
      toAttribute: (o) => o.join(" ")
    }
  })
], t.prototype, "showCodes", 2);
e([
  a({ attribute: "can-focus-code-only", reflect: !0, type: Boolean })
], t.prototype, "canFocusCodeOnly", 2);
e([
  a({ attribute: "no-auto-convert", reflect: !0, type: Boolean })
], t.prototype, "noAutoConvert", 2);
e([
  c()
], t.prototype, "textColor", 2);
e([
  c()
], t.prototype, "textVariant", 2);
e([
  c()
], t.prototype, "rowGap", 2);
e([
  c()
], t.prototype, "lineClamp", 2);
e([
  c()
], t.prototype, "backgroundColor", 2);
e([
  c()
], t.prototype, "canFocusContainer", 2);
e([
  c()
], t.prototype, "isContainerFocused", 2);
e([
  W(50)
], t.prototype, "handleResize", 1);
e([
  i("variant")
], t.prototype, "handleVariantChange", 1);
e([
  i("cmyk")
], t.prototype, "handleCmykChange", 1);
e([
  i("rgb")
], t.prototype, "handleRGBChange", 1);
e([
  i("hex")
], t.prototype, "handleHexChange", 1);
e([
  i("hex", { waitUntilFirstUpdate: !0 }),
  i("rgb", { waitUntilFirstUpdate: !0 }),
  i("cmyk", { waitUntilFirstUpdate: !0 })
], t.prototype, "handleColorChange", 1);
e([
  i("canFocusCodeOnly", { waitUntilFirstUpdate: !0 })
], t.prototype, "handleCanFocusCodeOnlyChange", 1);
t = e([
  O("cx-color-swatch")
], t);
export {
  t as C,
  p as a
};
