@orangelogic/design-system 2.60.0 → 2.61.0

package/library/chunks/{color-swatch-group.qJevXs50.js → color-swatch-group.DlLmydlB.js}

@@ -1,36 +1,27 @@
 import z from "../components/space.js";
-import { C as $ } from "./table.BAr8KKc6.js";
-import { C as F } from "./typography.BFpl0WMA.js";
-import { x as h, B as k, i as A, n as d, C as S, c as T } from "./custom-element.vnXBMQxc.js";
-import { C, a as m } from "./color-swatch.DUe3iLLo.js";
-import { c as E } from "./component.styles.CI-v8BZa.js";
-import { D as l } from "./content-builder.WranV3P4.js";
-import { d as D } from "./popup._w5T7x8f.js";
-import { L as N } from "./i18n.BP2FRO1v.js";
-import { w as x } from "./watch.BCJD77bD.js";
-import { r as p } from "./state.Cw55xXlb.js";
+import { C as $ } from "./table.CY-iMTWV.js";
+import { C as k } from "./typography.oDzoLbZS.js";
+import { n as h, C as F } from "./lib-cortex-element.CVMmyPMC.js";
+import { C, a as m } from "./color-swatch.Bpb_hW2H.js";
+import { c as A } from "./component.styles.DMSLciL5.js";
+import { D as p } from "./content-builder.Bf7kqzDI.js";
+import { c as S } from "./custom-element.L4WJXn1j.js";
+import { d as T } from "./debounce.DaHuiSGU.js";
+import { L as E } from "./i18n.DrzK7TPf.js";
+import { w as x } from "./watch.q1sEjPWL.js";
+import { g as D, a as R } from "./responsive.CA6dcNiM.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 R } from "./query-all.i3PyvTUQ.js";
-import { e as w } from "./class-map.CoZTSvbM.js";
-import { i as b } from "./guard.BDP4A85K.js";
-import { o as H } from "./if-defined.MfEgpxEN.js";
-import { c as W } from "./repeat.CauKaXyy.js";
-import { o as f } from "./style-map.CZovMmo_.js";
-import { n as O } from "./when.Dr1es41R.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 n = /* @__PURE__ */ ((e) => (e.Circles = "circles", e.Grid = "grid", e.Table = "table", e))(n || {});
-function M(e, r = [350, 696, 1024]) {
-  const t = getComputedStyle(e), o = [
-    Number.parseFloat(t.getPropertyValue("--breakpoint-mobile").trim()),
-    Number.parseFloat(t.getPropertyValue("--breakpoint-tablet").trim()),
-    1 / 0
-  ];
-  return Number.isNaN(o[0]) ? o[0] = r[0] : o[0]++, Number.isNaN(o[1]) ? o[1] = r[1] : o[1]++, o;
-}
-function G(e) {
-  const r = window.innerWidth;
-  return r > e[1] ? l.Desktop : r > e[0] && r <= e[1] ? l.Tablet : l.Mobile;
-}
-const y = 165, I = ["HEX", "RGB", "CMYK", "PMS"], L = {
+const v = 165, B = ["HEX", "RGB", "CMYK", "PMS"], I = {
   resizable: !1
 }, _ = [
   {
@@ -89,18 +80,18 @@ const y = 165, I = ["HEX", "RGB", "CMYK", "PMS"], L = {
   }
 ];
 function u(e, r, t) {
-  const o = r.getValue() ?? "";
-  if (!o)
+  const i = r.getValue() ?? "";
+  if (!i)
     return null;
-  const s = h`
+  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")} ${o}. ${e.term("clickOrPressCtrlCToCopy")}`}
+      label=${`${t}, ${r.getField()} ${e.term("code")} ${i}. ${e.term("clickOrPressCtrlCToCopy")}`}
       no-icon
       tooltip-distance="0"
-      value=${o}
+      value=${i}
       style=${f({
     "--button-background-color": "transparent",
     "--button-font-size": "var(--cx-font-size-large)",
@@ -118,13 +109,13 @@ function u(e, r, t) {
     whiteSpace: "nowrap"
   })}
       >
-        ${o}
+        ${i}
       </span>
     </cx-copy-button>
   `, c = document.createDocumentFragment();
-  return k(s, c), c.firstElementChild;
+  return H(s, c), c.firstElementChild;
 }
-const B = (e, r) => [
+const N = (e, r) => [
   ..._.slice(0, 2),
   {
     field: "hex",
@@ -162,7 +153,7 @@ const B = (e, r) => [
     title: "PMS",
     widthGrow: 2
   }
-], K = A`
+], K = O`
   :host {
     --grid-gap: var(--cx-spacing-medium);
     --padding: 0;
@@ -255,18 +246,18 @@ const B = (e, r) => [
     background-color: transparent;
   }
 `;
-var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, i = (e, r, t, o) => {
-  for (var s = o > 1 ? void 0 : o ? j(r, t) : r, c = e.length - 1, g; c >= 0; c--)
-    (g = e[c]) && (s = (o ? g(r, t, s) : g(s)) || s);
-  return o && s && U(r, t, s), s;
+var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, a = (e, r, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? j(r, t) : r, c = e.length - 1, g; c >= 0; c--)
+    (g = e[c]) && (s = (i ? g(r, t, s) : g(s)) || s);
+  return i && s && U(r, t, s), s;
 };
-const v = "unnamed";
-let a = class extends S {
+const y = "unnamed";
+let o = class extends F {
   constructor() {
-    super(), this.localize = new N(this), this.variant = n.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 = l.Desktop, this.currentCol = 0, this.isFocused = !1, this.canFocusContainer = !0, this.isContainerFocused = !1, this.handleWindowResize = this.handleWindowResize.bind(this);
+    super(), this.localize = new E(this), this.variant = n.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 = M(this, this.breakpoints), this.handleResize();
+    this.breakpoints = D(this, this.breakpoints), this.handleResize();
   }
   runConnectedCallback() {
     this.setAttribute("role", "region"), this.setAttribute("aria-label", this.localize.term("colorSwatches")), this.setAttribute(
@@ -288,12 +279,12 @@ let a = class extends S {
           getComputedStyle(this.containerEl).getPropertyValue("--grid-gap")
         );
         this.currentCol = Math.floor(
-          (e + r) / (y + r)
+          (e + r) / (v + r)
         );
         break;
       }
       case n.Circles: {
-        this.deviceType = G(this.breakpoints);
+        this.deviceType = R(this.breakpoints);
         break;
       }
     }
@@ -315,7 +306,7 @@ let a = class extends S {
    * Filter out the columns that are not in the showCodes
    */
   getTableColumns(e) {
-    const r = this.canCopy ? B(this.localize, e) : _;
+    const r = this.canCopy ? N(this.localize, e) : _;
     return [
       ...r.slice(0, 2),
       ...r.slice(2).filter(
@@ -329,7 +320,7 @@ let a = class extends S {
   categorizeByPalette() {
     return Object.values(
       this.data.reduce((e, r) => {
-        const t = r.palette?.trim() ? r.palette : v;
+        const t = r.palette?.trim() ? r.palette : y;
         return e[t] || (e[t] = { colors: [], palette: t }), e[t].colors.push(r), e;
       }, {})
     );
@@ -347,7 +338,7 @@ let a = class extends S {
    * Get current direction of the color swatch group
    */
   get currentDirection() {
-    return this.variant === n.Circles && this.deviceType !== l.Desktop ? "vertical" : "horizontal";
+    return this.variant === n.Circles && this.deviceType !== p.Desktop ? "vertical" : "horizontal";
   }
   /**
    * Get the variant of the color swatch
@@ -355,7 +346,7 @@ let a = class extends S {
   get swatchVariant() {
     switch (this.variant) {
       case n.Circles:
-        return this.deviceType === l.Tablet ? m.Oval : m.Circle;
+        return this.deviceType === p.Tablet ? m.Oval : m.Circle;
       case n.Grid:
         return m.GridItem;
       default:
@@ -364,10 +355,10 @@ let a = class extends S {
   }
   render() {
     const e = this.currentDirection, r = this.localize.lang();
-    return h`
-      ${O(
+    return l`
+      ${L(
       this.variant === n.Table,
-      () => h`
+      () => l`
           <cx-space
             class="color-swatch-group__swatches"
             direction="vertical"
@@ -377,13 +368,13 @@ let a = class extends S {
         [this.data, this.canCopy],
         () => this.categorizeByPalette().map(
           (t) => {
-            const o = this.multiLanguage && r ? t.colors.map((s) => ({
+            const i = this.multiLanguage && r ? t.colors.map((s) => ({
               ...s,
               name: s[`name-${r.toLowerCase()}`] ?? s.name
             })) : t.colors;
-            return h`
+            return l`
                     <div
-                      tabindex=${H(
+                      tabindex=${M(
               this.canFocusContainer ? "0" : void 0
             )}
                       data-table-container
@@ -393,7 +384,7 @@ let a = class extends S {
                       @keydown=${this.handleKeyDown}
                     >
                       <cx-typography variant="h3">
-                        ${t.palette === v ? this.localize.term("noPalette") : this.localize.term("shadesPalette", t.palette)}
+                        ${t.palette === y ? this.localize.term("noPalette") : this.localize.term("shadesPalette", t.palette)}
                       </cx-typography>
                       <cx-table
                         part="table"
@@ -404,9 +395,9 @@ let a = class extends S {
               [this.showCodes, this.canCopy, this.localize],
               () => this.getTableColumns(t.palette)
             )}
-                        .columnDefaults=${L}
+                        .columnDefaults=${I}
                         .rowHeight=${48}
-                        .data=${o}
+                        .data=${i}
                         class="color-swatch-group__table"
                       ></cx-table>
                     </div>
@@ -416,7 +407,7 @@ let a = class extends S {
       )}
           </cx-space>
         `,
-      () => h`
+      () => l`
           <cx-space
             part="color-swatch"
             role="list"
@@ -431,18 +422,18 @@ let a = class extends S {
         [`color-swatch-group__swatches--circles--${e}`]: this.variant === n.Circles
       })}
             style=${f({
-        gridTemplateColumns: this.currentCol >= this.maxCol ? `repeat(${this.maxCol}, 1fr)` : `repeat(auto-fit, minmax(${y}px, 1fr))`
+        gridTemplateColumns: this.currentCol >= this.maxCol ? `repeat(${this.maxCol}, 1fr)` : `repeat(auto-fit, minmax(${v}px, 1fr))`
       })}
           >
-            ${W(
+            ${G(
         this.data,
         (t) => t.name,
-        (t, o) => h`<cx-color-swatch
+        (t, i) => l`<cx-color-swatch
                   part="color-swatch-item"
                   role="listitem"
                   aria-label=${this.localize.term(
           "colorOfTotal",
-          o + 1,
+          i + 1,
           this.data.length
         )}
                   hex=${t.hex}
@@ -457,7 +448,7 @@ let a = class extends S {
                   no-auto-convert
                   class=${w({
           [`color-swatch-group__swatches--circles--${e}__item`]: this.variant === n.Circles,
-          "color-swatch-group__swatches--circles--vertical__item--mobile": this.variant === n.Circles && this.deviceType === l.Mobile
+          "color-swatch-group__swatches--circles--vertical__item--mobile": this.variant === n.Circles && this.deviceType === p.Mobile
         })}
                   @keydown=${this.handleKeyDown}
                   @focusout=${this.handleFocusOut}
@@ -469,77 +460,75 @@ let a = class extends S {
     `;
   }
 };
-a.styles = [E, K];
-a.dependencies = {
+o.styles = [A, K];
+o.dependencies = {
   "cx-color-swatch": C,
   "cx-space": z,
   "cx-table": $,
-  "cx-typography": F
+  "cx-typography": k
 };
-i([
+a([
   P(".color-swatch-group__swatches")
-], a.prototype, "containerEl", 2);
-i([
-  R("cx-table")
-], a.prototype, "tableEls", 2);
-i([
-  d({ reflect: !0, type: String })
-], a.prototype, "variant", 2);
-i([
-  d({ reflect: !0, type: Array })
-], a.prototype, "data", 2);
-i([
-  d({ attribute: "max-col", reflect: !0, type: Number })
-], a.prototype, "maxCol", 2);
-i([
-  d({ attribute: "can-copy", reflect: !0, type: Boolean })
-], a.prototype, "canCopy", 2);
-i([
-  d({
+], 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) => I.includes(t)),
+      fromAttribute: (e) => (e?.split(" ") ?? []).filter((t) => B.includes(t)),
       toAttribute: (e) => e.join(" ")
     },
     reflect: !0
   })
-], a.prototype, "showCodes", 2);
-i([
-  d({ attribute: "multi-language", reflect: !0, type: Boolean })
-], a.prototype, "multiLanguage", 2);
-i([
-  p()
-], a.prototype, "breakpoints", 2);
-i([
-  p()
-], a.prototype, "deviceType", 2);
-i([
-  p()
-], a.prototype, "currentCol", 2);
-i([
-  p()
-], a.prototype, "isFocused", 2);
-i([
-  p()
-], a.prototype, "canFocusContainer", 2);
-i([
-  p()
-], a.prototype, "isContainerFocused", 2);
-i([
-  D(100)
-], a.prototype, "handleWindowResize", 1);
-i([
+], 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 })
-], a.prototype, "handleResize", 1);
-i([
+], o.prototype, "handleResize", 1);
+a([
   x("isFocused", { waitUntilFirstUpdate: !0 })
-], a.prototype, "handleIsFocusedChange", 1);
-a = i([
-  T("cx-color-swatch-group")
-], a);
+], o.prototype, "handleIsFocusedChange", 1);
+o = a([
+  S("cx-color-swatch-group")
+], o);
 export {
-  a as C,
-  G as a,
-  n as b,
-  M as g
+  o as C,
+  n as a
 };