import z from "../components/space.js";
import { C as $ } from "./table.CGT3XSSx.js";
import { C as k } from "./typography.DJC_UXgs.js";
import { n as h, C as F } from "./lib-cortex-element.CVMmyPMC.js";
import { C, a as g } from "./color-swatch.DJ1kUnBQ.js";
import { c as A } from "./component.styles.CRO4Odto.js";
import { D as p } from "./content-builder.CcgZciZN.js";
import { c as S } from "./custom-element.L4WJXn1j.js";
import { d as T } from "./debounce.DaHuiSGU.js";
import { L as E } from "./i18n.BABe9hN4.js";
import { w as x } from "./watch.BCJD77bD.js";
import { g as D, a as R } from "./responsive.Oz9HWjyQ.js";
import { x as l, B as H, i as O } from "./lit-element.jLBm65_O.js";
import { r as d } from "./state.CSDxrqLd.js";
import { e as P } from "./query.BBf1UFkC.js";
import { r as W } from "./query-all.i3PyvTUQ.js";
import { e as w } from "./class-map.BiVq-cVR.js";
import { i as b } from "./guard.D4axKaMo.js";
import { o as M } from "./if-defined.BRoBj_Rp.js";
import { c as G } from "./repeat.DbF2p5ae.js";
import { o as f } from "./style-map.llVFPd__.js";
import { n as L } from "./when.Dr1es41R.js";
var c = /* @__PURE__ */ ((e) => (e.Circles = "circles", e.Grid = "grid", e.Table = "table", e))(c || {});
const y = 165, B = ["HEX", "RGB", "CMYK", "PMS"], I = {
  resizable: !1
}, _ = [
  {
    field: "hex",
    formatter: (e) => {
      const r = document.createElement("div");
      r.style.display = "flex", r.style.alignItems = "center", r.style.justifyContent = "center", r.style.width = "100%", r.style.height = "100%", r.style.userSelect = "none";
      const t = document.createElement("div");
      return t.style.backgroundColor = e.getValue(), t.style.width = "64px", t.style.height = "32px", t.style.borderRadius = "var(--cx-border-radius-large)", t.style.padding = "0 var(--cx-spacing-medium)", r.appendChild(t), r;
    },
    headerHozAlign: "center",
    headerSort: !1,
    hozAlign: "center",
    title: "Name",
    width: 80
  },
  {
    field: "name",
    headerHozAlign: "center",
    headerSort: !1,
    hozAlign: "left",
    widthGrow: 3
  },
  {
    field: "hex",
    headerHozAlign: "center",
    headerSort: !1,
    hozAlign: "center",
    minWidth: 130,
    title: "Hex"
  },
  {
    field: "rgb",
    headerHozAlign: "center",
    headerSort: !1,
    hozAlign: "center",
    minWidth: 130,
    title: "RGB"
  },
  {
    field: "cmyk",
    headerHozAlign: "center",
    headerSort: !1,
    hozAlign: "center",
    minWidth: 150,
    title: "CMYK"
  },
  {
    field: "pms",
    headerHozAlign: "center",
    headerSort: !1,
    hozAlign: "center",
    responsive: 0,
    title: "PMS",
    widthGrow: 2
  }
];
function u(e, r, t) {
  const i = r.getValue() ?? "";
  if (!i)
    return null;
  const s = l`<cx-copy-button copy-label=${e.term("clickToCopy")} focus-copy-label=${e.term("pressEnterOrCtrlCToCopy")} hoist label=${`${t}, ${r.getField()} ${e.term("code")} ${i}. ${e.term("clickOrPressCtrlCToCopy")}`} no-icon tooltip-distance="0" value=${i} style=${f({
    "--button-background-color": "transparent",
    "--button-font-size": "var(--cx-font-size-large)",
    "--button-padding": "0",
    "max-width": "100%"
  })}><span style=${f({
    display: "inline-block",
    maxWidth: "100%",
    overflow: "hidden",
    textOverflow: "ellipsis",
    verticalAlign: "middle",
    whiteSpace: "nowrap"
  })}>${i}</span></cx-copy-button>`, n = document.createDocumentFragment();
  return H(s, n), n.firstElementChild;
}
const K = (e, r) => [
  ..._.slice(0, 2),
  {
    field: "hex",
    formatter: (t) => u(e, t, r),
    headerHozAlign: "center",
    headerSort: !1,
    hozAlign: "center",
    minWidth: 130,
    title: "Hex"
  },
  {
    field: "rgb",
    formatter: (t) => u(e, t, r),
    headerHozAlign: "center",
    headerSort: !1,
    hozAlign: "center",
    minWidth: 130,
    title: "RGB"
  },
  {
    field: "cmyk",
    formatter: (t) => u(e, t, r),
    headerHozAlign: "center",
    headerSort: !1,
    hozAlign: "center",
    minWidth: 150,
    title: "CMYK"
  },
  {
    field: "pms",
    formatter: (t) => u(e, t, r),
    headerHozAlign: "center",
    headerSort: !1,
    hozAlign: "center",
    title: "PMS",
    widthGrow: 2
  }
], N = O`:host{--grid-gap:var(--cx-spacing-medium);--padding:0;padding:var(--cx-focus-ring-width);width:100%;min-width:0;display:block;overflow:auto}.color-swatch-group__swatches{padding:var(--padding,0);width:100%;max-width:100%;height:100%}.color-swatch-group__table-container{max-width:100%}.color-swatch-group__table-container:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-swatch-group__swatches--circles--horizontal>cx-color-swatch:not(:first-child){margin-left:var(--swatch-group-horizontal-gap,-100px)}.color-swatch-group__swatches--circles--vertical>cx-color-swatch:not(:first-child){margin-top:var(--swatch-group-vertical-gap,-50px)}.color-swatch-group__swatches--circles--horizontal__item{--swatch-content-padding:0 min(calc(var(--swatch-group-horizontal-gap,-100px) * -.5), 0) 0 0}.color-swatch-group__swatches--circles--vertical__item{--swatch-content-padding:0 0 min(calc(var(--swatch-group-vertical-gap,-50px) * -.5), 0) 0}.color-swatch-group__swatches--circles--vertical__item--mobile{--swatch-size:100%}.color-swatch-group__swatches--grid{gap:var(--grid-gap,var(--cx-spacing-medium));display:grid}.color-swatch-group__table{--body-background-color:transparent;--row-background-color:transparent;--row-even-background-color:transparent;--row-hover-background-color:var(--cx-color-neutral-50);--row-even-hover-background-color:var(--cx-color-neutral-50);--header-background-color:transparent;--group-row-background-color:transparent;--cell-border-color:transparent;--cell-bottom-border-color:transparent;--header-font-size:var(--cx-font-size-large);--header-font-weight:var(--cx-font-weight-semibold);--header-border-right:none;--cell-font-size:var(--cx-font-size-large);--cell-font-weight:var(--cx-font-weight-regular);--cell-line-height:40px;--cell-hover-background-color:transparent;--placeholder-font-size:var(--cx-font-size-medium-large);--cell-horizontal-padding:var(--cx-spacing-2x-small);--header-horizontal-padding:var(--cx-spacing-2x-small);--header-border-bottom:1px solid var(--cx-color-neutral-200);--hover-menu-background-color:var(--row-hover-background-color);--outer-border-color:transparent}.color-swatch-group__table::part(table){background-color:#0000}`;
var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, a = (e, r, t, i) => {
  for (var s = i > 1 ? void 0 : i ? j(r, t) : r, n = e.length - 1, m; n >= 0; n--)
    (m = e[n]) && (s = (i ? m(r, t, s) : m(s)) || s);
  return i && s && U(r, t, s), s;
};
const v = "unnamed";
let o = class extends F {
  constructor() {
    super(), this.localize = new E(this), this.variant = c.Table, this.data = [], this.maxCol = 4, this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.multiLanguage = !1, this.breakpoints = [350, 696, 1024], this.deviceType = p.Desktop, this.currentCol = 0, this.isFocused = !1, this.canFocusContainer = !0, this.isContainerFocused = !1, this.handleWindowResize = this.handleWindowResize.bind(this);
  }
  runFirstUpdated() {
    this.breakpoints = D(this, this.breakpoints), this.handleResize();
  }
  runConnectedCallback() {
    this.setAttribute("role", "region"), this.setAttribute("aria-label", this.localize.term("colorSwatches")), this.setAttribute(
      "aria-roledescription",
      this.localize.term("colorSwatches")
    ), window.addEventListener("resize", this.handleWindowResize);
  }
  disconnectedCallback() {
    super.disconnectedCallback(), window.removeEventListener("resize", this.handleWindowResize);
  }
  handleWindowResize() {
    this.handleResize();
  }
  handleResize() {
    const e = window.innerWidth;
    switch (this.variant) {
      case c.Grid: {
        const r = Number.parseFloat(
          getComputedStyle(this.containerEl).getPropertyValue("--grid-gap")
        );
        this.currentCol = Math.floor(
          (e + r) / (y + r)
        );
        break;
      }
      case c.Circles: {
        this.deviceType = R(this.breakpoints);
        break;
      }
    }
  }
  handleKeyDown(e) {
    !(e.target instanceof C) && !e.target?.closest(
      "[data-table-container]"
    ) || (e.key === "Enter" || e.key === " ") && (this.isFocused = !0);
  }
  handleFocusIn() {
    this.isContainerFocused = !0;
  }
  handleFocusOut(e) {
    this.isContainerFocused = !1, requestAnimationFrame(() => {
      (e.target === this || !this.shadowRoot?.activeElement) && (this.isFocused = !1);
    });
  }
  /**
   * Filter out the columns that are not in the showCodes
   */
  getTableColumns(e) {
    const r = this.canCopy ? K(this.localize, e) : _;
    return [
      ...r.slice(0, 2),
      ...r.slice(2).filter(
        (t) => this.showCodes.includes(t.field.toUpperCase())
      )
    ];
  }
  /**
   * Categorize the color swatches by palette
   */
  categorizeByPalette() {
    return Object.values(
      this.data.reduce((e, r) => {
        const t = r.palette?.trim() ? r.palette : v;
        return e[t] || (e[t] = { colors: [], palette: t }), e[t].colors.push(r), e;
      }, {})
    );
  }
  handleIsFocusedChange() {
    if (this.isFocused)
      for (const e of this.tableEls)
        e.removeAttribute("tabindex");
    else
      for (const e of this.tableEls)
        e.setAttribute("tabindex", "-1");
    this.isContainerFocused || (this.canFocusContainer = !this.isFocused);
  }
  /**
   * Get current direction of the color swatch group
   */
  get currentDirection() {
    return this.variant === c.Circles && this.deviceType !== p.Desktop ? "vertical" : "horizontal";
  }
  /**
   * Get the variant of the color swatch
   */
  get swatchVariant() {
    switch (this.variant) {
      case c.Circles:
        return this.deviceType === p.Tablet ? g.Oval : g.Circle;
      case c.Grid:
        return g.GridItem;
      default:
        return;
    }
  }
  render() {
    const e = this.currentDirection, r = this.localize.lang();
    return l`
      ${L(
      this.variant === c.Table,
      () => l`<cx-space class="color-swatch-group__swatches" direction="vertical" spacing="2x-small">${b(
        [this.data, this.canCopy],
        () => this.categorizeByPalette().map(
          (t) => {
            const i = this.multiLanguage && r ? t.colors.map((s) => ({
              ...s,
              name: s[`name-${r.toLowerCase()}`] ?? s.name
            })) : t.colors;
            return l`<div tabindex=${M(
              this.canFocusContainer ? "0" : void 0
            )} data-table-container class="color-swatch-group__table-container" @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.handleKeyDown}><cx-typography variant="h3">${t.palette === v ? this.localize.term("noPalette") : this.localize.term("shadesPalette", t.palette)}</cx-typography><cx-table part="table" tabindex=${this.isFocused ? void 0 : "-1"} no-selectable layout="fitColumns" .columns=${b(
              [this.showCodes, this.canCopy, this.localize],
              () => this.getTableColumns(t.palette)
            )} .columnDefaults=${I} .rowHeight=${48} .data=${i} class="color-swatch-group__table"></cx-table></div>`;
          }
        )
      )}</cx-space>`,
      () => l`<cx-space part="color-swatch" role="list" aria-label=${this.localize.term("listOfColors")} aria-roledescription=${this.localize.term("listOfColors")} direction=${e} justify-content="flex-start" wrap=${this.variant === "circles" ? "nowrap" : "wrap"} class=${w({
        "color-swatch-group__swatches": !0,
        "color-swatch-group__swatches--grid": this.variant === c.Grid,
        [`color-swatch-group__swatches--circles--${e}`]: this.variant === c.Circles
      })} style=${f({
        gridTemplateColumns: this.currentCol >= this.maxCol ? `repeat(${this.maxCol}, 1fr)` : `repeat(auto-fit, minmax(${y}px, 1fr))`
      })}>${G(
        this.data,
        (t) => t.name,
        (t, i) => l`<cx-color-swatch part="color-swatch-item" role="listitem" aria-label=${this.localize.term(
          "colorOfTotal",
          i + 1,
          this.data.length
        )} hex=${t.hex} rgb=${t.rgb} cmyk=${t.cmyk} pms=${t.pms} name=${this.multiLanguage && r ? t[`name-${r.toLowerCase()}`] ?? t.name : t.name} variant=${this.swatchVariant} ?can-copy=${this.canCopy} ?can-focus-code-only=${this.isFocused} .showCodes=${this.showCodes} no-auto-convert class=${w({
          [`color-swatch-group__swatches--circles--${e}__item`]: this.variant === c.Circles,
          "color-swatch-group__swatches--circles--vertical__item--mobile": this.variant === c.Circles && this.deviceType === p.Mobile
        })} @keydown=${this.handleKeyDown} @focusout=${this.handleFocusOut}></cx-color-swatch>`
      )}</cx-space>`
    )}
    `;
  }
};
o.styles = [A, N];
o.dependencies = {
  "cx-color-swatch": C,
  "cx-space": z,
  "cx-table": $,
  "cx-typography": k
};
a([
  P(".color-swatch-group__swatches")
], o.prototype, "containerEl", 2);
a([
  W("cx-table")
], o.prototype, "tableEls", 2);
a([
  h({ reflect: !0, type: String })
], o.prototype, "variant", 2);
a([
  h({ reflect: !0, type: Array })
], o.prototype, "data", 2);
a([
  h({ attribute: "max-col", reflect: !0, type: Number })
], o.prototype, "maxCol", 2);
a([
  h({ attribute: "can-copy", reflect: !0, type: Boolean })
], o.prototype, "canCopy", 2);
a([
  h({
    attribute: "show-codes",
    converter: {
      fromAttribute: (e) => (e?.split(" ") ?? []).filter((t) => B.includes(t)),
      toAttribute: (e) => e.join(" ")
    },
    reflect: !0
  })
], o.prototype, "showCodes", 2);
a([
  h({ attribute: "multi-language", reflect: !0, type: Boolean })
], o.prototype, "multiLanguage", 2);
a([
  d()
], o.prototype, "breakpoints", 2);
a([
  d()
], o.prototype, "deviceType", 2);
a([
  d()
], o.prototype, "currentCol", 2);
a([
  d()
], o.prototype, "isFocused", 2);
a([
  d()
], o.prototype, "canFocusContainer", 2);
a([
  d()
], o.prototype, "isContainerFocused", 2);
a([
  T(100)
], o.prototype, "handleWindowResize", 1);
a([
  x("variant", { waitUntilFirstUpdate: !0 })
], o.prototype, "handleResize", 1);
a([
  x("isFocused", { waitUntilFirstUpdate: !0 })
], o.prototype, "handleIsFocusedChange", 1);
o = a([
  S("cx-color-swatch-group")
], o);
export {
  o as C,
  c as a
};
