@orangelogic/design-system 2.56.0 → 2.57.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/library/chunks/{button.CiWlWCNb.js → button.2-Io1Wm4.js} +80 -66
  2. package/library/chunks/{color-swatch-group.Bsa_Z57a.js → color-swatch-group.VXPK-2tU.js} +167 -157
  3. package/library/chunks/{color-swatch.CsKJgvVf.js → color-swatch.8OhqVqb6.js} +2 -2
  4. package/library/chunks/{confirm-popover.Bfuw361W.js → confirm-popover.DGvyB12c.js} +3 -3
  5. package/library/chunks/{content-builder.UlVFSATk.js → content-builder.WranV3P4.js} +6 -5
  6. package/library/chunks/{dialog.C28qzMSQ.js → dialog.CIeu0rVD.js} +2 -2
  7. package/library/chunks/{dot-pagination.D3RYAiHL.js → dot-pagination.CyCA3kSP.js} +1 -1
  8. package/library/chunks/{file-on-demand.Cr7E_KqH.js → file-on-demand.aux9gsvH.js} +10 -10
  9. package/library/chunks/{folder-select.ELghy6Qk.js → folder-select.B7u40ijN.js} +5 -5
  10. package/library/chunks/{format-time.HdcgoabZ.js → format-time.C56HetWv.js} +1 -1
  11. package/library/chunks/{header.oyZxakKM.js → header.RvymymCe.js} +1 -1
  12. package/library/chunks/{i18n.C3Z8Xe8q.js → i18n.dCiJrmqj.js} +74 -83
  13. package/library/chunks/{iframe.C6CLUrTT.js → iframe.Cwqniwf2.js} +1 -1
  14. package/library/chunks/{image.BJfasRY_.js → image.gpleN29o.js} +3 -3
  15. package/library/chunks/list-editor.BToq5cqp.js +1641 -0
  16. package/library/chunks/{option.BOHZB9Sv.js → option.CJ1p2V0m.js} +1 -1
  17. package/library/chunks/{popup.Ba501Rgg.js → popup.BE5MfEQJ.js} +1 -1
  18. package/library/chunks/purify.es.BGaRrCfO.js +553 -0
  19. package/library/chunks/{select.oVg7uA-M.js → select.xBh4yerC.js} +3 -3
  20. package/library/chunks/string.DPf4puTr.js +136 -0
  21. package/library/chunks/{tab-group.BWYMMhrE.js → tab-group.CjvHb3OJ.js} +3 -3
  22. package/library/chunks/{table.-ecyjIUr.js → table.CrX_NJiY.js} +2019 -1744
  23. package/library/chunks/{timecode.PY1bymeS.js → timecode.XXmVg6tU.js} +1 -1
  24. package/library/chunks/{tree.82OigIgE.js → tree.CDaFhGjU.js} +1 -1
  25. package/library/components/alert.js +1 -1
  26. package/library/components/asset-link-format.js +4 -4
  27. package/library/components/atoms.js +14 -14
  28. package/library/components/border-input-group.js +1 -1
  29. package/library/components/breadcrumb.js +1 -1
  30. package/library/components/button.js +2 -2
  31. package/library/components/color-picker.js +3 -3
  32. package/library/components/color-swatch-group.js +6 -6
  33. package/library/components/color-swatch.js +3 -3
  34. package/library/components/confirm-popover.js +4 -4
  35. package/library/components/copy-button.js +1 -1
  36. package/library/components/corner-position-input-group.js +3 -3
  37. package/library/components/details.js +1 -1
  38. package/library/components/dialog.js +3 -3
  39. package/library/components/dot-pagination.js +2 -2
  40. package/library/components/drawer.js +1 -1
  41. package/library/components/dropdown.js +2 -2
  42. package/library/components/dynamic-select.js +5 -5
  43. package/library/components/element-clamp.js +2 -2
  44. package/library/components/file-on-demand.js +11 -11
  45. package/library/components/folder-select.js +4 -4
  46. package/library/components/format-bytes.js +1 -1
  47. package/library/components/format-date.js +1 -1
  48. package/library/components/format-number.js +1 -1
  49. package/library/components/format-time.js +2 -2
  50. package/library/components/header.js +2 -2
  51. package/library/components/icon-button.js +1 -1
  52. package/library/components/iframe.js +2 -2
  53. package/library/components/image-comparer.js +1 -1
  54. package/library/components/image.js +3 -3
  55. package/library/components/input.js +1 -1
  56. package/library/components/line-clamp.js +31 -23
  57. package/library/components/list-editor.js +9 -8
  58. package/library/components/masonry.js +1 -1
  59. package/library/components/menu-item.js +2 -2
  60. package/library/components/menu.js +1 -1
  61. package/library/components/molecules.js +4 -4
  62. package/library/components/option.js +2 -2
  63. package/library/components/organisms.js +2 -2
  64. package/library/components/pagination.js +4 -4
  65. package/library/components/popup.js +2 -2
  66. package/library/components/position-picker.js +1 -1
  67. package/library/components/progress-bar.js +1 -1
  68. package/library/components/progress-ring.js +1 -1
  69. package/library/components/range.js +2 -2
  70. package/library/components/rating.js +1 -1
  71. package/library/components/relative-time.js +1 -1
  72. package/library/components/select.js +4 -4
  73. package/library/components/share-option-list.js +1 -1
  74. package/library/components/size-input-group.js +2 -2
  75. package/library/components/spinner.js +1 -1
  76. package/library/components/split-panel.js +1 -1
  77. package/library/components/tab-group.js +3 -3
  78. package/library/components/tab.js +1 -1
  79. package/library/components/table.js +2 -2
  80. package/library/components/tag.js +1 -1
  81. package/library/components/timecode.js +2 -2
  82. package/library/components/tooltip.js +2 -2
  83. package/library/components/tree-item.js +2 -2
  84. package/library/components/tree.js +2 -2
  85. package/library/components/typeface.js +1 -1
  86. package/library/components/types.js +30808 -30016
  87. package/library/components/video.js +2 -2
  88. package/library/package.json +1 -1
  89. package/library/packages/atoms/src/components/button/button.d.ts +4 -0
  90. package/library/packages/atoms/src/components/line-clamp/line-clamp.d.ts +3 -1
  91. package/library/packages/atoms/src/components/table/components/table-toolbar/table-saved-search-dropdown.d.ts +60 -0
  92. package/library/packages/atoms/src/components/table/components/table-toolbar/table-toolbar.d.ts +38 -5
  93. package/library/packages/atoms/src/components/table/table.d.ts +28 -5
  94. package/library/packages/atoms/src/components/table/tabulator-tables/core/row/Row.d.ts +2 -2
  95. package/library/packages/events/src/cx-content-builder-translatable-value-change.d.ts +13 -0
  96. package/library/packages/events/src/cx-table-export.d.ts +1 -1
  97. package/library/packages/events/src/cx-table-save-search-select.d.ts +8 -0
  98. package/library/packages/events/src/events.d.ts +2 -0
  99. package/library/packages/molecules/src/data-tab-group/data-tab-group.d.ts +1 -0
  100. package/library/packages/molecules/src/details-group/details-group.d.ts +1 -0
  101. package/library/packages/molecules/src/list-editor/list-editor.d.ts +14 -0
  102. package/library/packages/molecules/src/timeline/timeline.d.ts +4 -0
  103. package/library/packages/organisms/src/color-swatch-group/color-swatch-group.d.ts +1 -0
  104. package/library/packages/organisms/src/comment/comment.d.ts +13 -0
  105. package/library/packages/organisms/src/comment/components/comment-menu/comment-menu.d.ts +14 -0
  106. package/library/packages/organisms/src/content-builder/components/color-swatch-picker/color-swatch-picker.d.ts +21 -0
  107. package/library/packages/organisms/src/content-builder/components/config-form/config-form-controller.d.ts +19 -0
  108. package/library/packages/organisms/src/content-builder/components/config-form/config-form.d.ts +28 -8
  109. package/library/packages/organisms/src/content-builder/components/config-manager/config-manager.d.ts +28 -1
  110. package/library/packages/organisms/src/content-builder/components/gallery-config/gallery-config.d.ts +1 -0
  111. package/library/packages/organisms/src/content-builder/configs/accordion.d.ts +1 -0
  112. package/library/packages/organisms/src/content-builder/configs/color-swatches.d.ts +1 -0
  113. package/library/packages/organisms/src/content-builder/configs/gallery.d.ts +2 -0
  114. package/library/packages/organisms/src/content-builder/configs/tab-group.d.ts +1 -0
  115. package/library/packages/organisms/src/content-builder/configs/timeline.d.ts +1 -0
  116. package/library/packages/organisms/src/content-builder/configs-controller.d.ts +10 -0
  117. package/library/packages/organisms/src/content-builder/content-builder-constants.d.ts +2 -0
  118. package/library/packages/organisms/src/content-builder/content-builder.d.ts +19 -2
  119. package/library/packages/organisms/src/content-builder/content-builder.utils.d.ts +0 -7
  120. package/library/packages/organisms/src/content-builder/plugins/plugin-factory.d.ts +1 -0
  121. package/library/packages/organisms/src/content-builder/styleController.d.ts +3 -1
  122. package/library/packages/types/src/color-swatch.d.ts +1 -0
  123. package/library/packages/types/src/content-builder.d.ts +7 -0
  124. package/library/packages/types/src/table.d.ts +13 -1
  125. package/library/packages/utils/src/custom-element/i18n-utils.d.ts +2 -0
  126. package/library/packages/utils/src/custom-element/i18n.d.ts +32 -9
  127. package/library/packages/utils/src/string/string.d.ts +2 -0
  128. package/library/react-web-component.d.ts +115 -58
  129. package/package.json +1 -1
  130. package/library/chunks/list-editor.Ct803qvF.js +0 -737
  131. package/library/chunks/string.D6poLUEC.js +0 -678
@@ -1,45 +1,45 @@
1
- import _ from "../components/space.js";
2
- import { C as z } from "./table.-ecyjIUr.js";
3
- import { C as $ } from "./typography.BFpl0WMA.js";
4
- import { x as h, B as F, i as k, n as p, C as A, c as S } from "./custom-element.vnXBMQxc.js";
5
- import { C as v, a as m } from "./color-swatch.CsKJgvVf.js";
6
- import { c as T } from "./component.styles.CI-v8BZa.js";
7
- import { D as n } from "./content-builder.UlVFSATk.js";
8
- import { d as E } from "./popup.Ba501Rgg.js";
9
- import { L as D } from "./i18n.C3Z8Xe8q.js";
10
- import { w as C } from "./watch.BCJD77bD.js";
11
- import { r as d } from "./state.Cw55xXlb.js";
12
- import { e as R } from "./query.BBf1UFkC.js";
13
- import { r as H } from "./query-all.i3PyvTUQ.js";
1
+ import z from "../components/space.js";
2
+ import { C as $ } from "./table.CrX_NJiY.js";
3
+ import { C as F } from "./typography.BFpl0WMA.js";
4
+ import { x as h, B as k, i as A, n as d, C as S, c as T } from "./custom-element.vnXBMQxc.js";
5
+ import { C, a as m } from "./color-swatch.8OhqVqb6.js";
6
+ import { c as E } from "./component.styles.CI-v8BZa.js";
7
+ import { D as l } from "./content-builder.WranV3P4.js";
8
+ import { d as D } from "./popup.BE5MfEQJ.js";
9
+ import { L as N } from "./i18n.dCiJrmqj.js";
10
+ import { w as x } from "./watch.BCJD77bD.js";
11
+ import { r as p } from "./state.Cw55xXlb.js";
12
+ import { e as P } from "./query.BBf1UFkC.js";
13
+ import { r as R } from "./query-all.i3PyvTUQ.js";
14
14
  import { e as w } from "./class-map.CoZTSvbM.js";
15
15
  import { i as b } from "./guard.BDP4A85K.js";
16
- import { o as N } from "./if-defined.MfEgpxEN.js";
17
- import { c as P } from "./repeat.CauKaXyy.js";
16
+ import { o as H } from "./if-defined.MfEgpxEN.js";
17
+ import { c as W } from "./repeat.CauKaXyy.js";
18
18
  import { o as f } from "./style-map.CZovMmo_.js";
19
- import { n as W } from "./when.Dr1es41R.js";
20
- var s = /* @__PURE__ */ ((e) => (e.Circles = "circles", e.Grid = "grid", e.Table = "table", e))(s || {});
21
- function O(e, t = [350, 696, 1024]) {
22
- const r = getComputedStyle(e), a = [
23
- Number.parseFloat(r.getPropertyValue("--breakpoint-mobile").trim()),
24
- Number.parseFloat(r.getPropertyValue("--breakpoint-tablet").trim()),
19
+ import { n as O } from "./when.Dr1es41R.js";
20
+ var n = /* @__PURE__ */ ((e) => (e.Circles = "circles", e.Grid = "grid", e.Table = "table", e))(n || {});
21
+ function M(e, r = [350, 696, 1024]) {
22
+ const t = getComputedStyle(e), o = [
23
+ Number.parseFloat(t.getPropertyValue("--breakpoint-mobile").trim()),
24
+ Number.parseFloat(t.getPropertyValue("--breakpoint-tablet").trim()),
25
25
  1 / 0
26
26
  ];
27
- return Number.isNaN(a[0]) ? a[0] = t[0] : a[0]++, Number.isNaN(a[1]) ? a[1] = t[1] : a[1]++, a;
27
+ return Number.isNaN(o[0]) ? o[0] = r[0] : o[0]++, Number.isNaN(o[1]) ? o[1] = r[1] : o[1]++, o;
28
28
  }
29
- function M(e) {
30
- const t = window.innerWidth;
31
- return t > e[1] ? n.Desktop : t > e[0] && t <= e[1] ? n.Tablet : n.Mobile;
29
+ function G(e) {
30
+ const r = window.innerWidth;
31
+ return r > e[1] ? l.Desktop : r > e[0] && r <= e[1] ? l.Tablet : l.Mobile;
32
32
  }
33
- const y = 165, G = ["HEX", "RGB", "CMYK", "PMS"], I = {
33
+ const y = 165, I = ["HEX", "RGB", "CMYK", "PMS"], L = {
34
34
  resizable: !1
35
- }, x = [
35
+ }, _ = [
36
36
  {
37
37
  field: "hex",
38
38
  formatter: (e) => {
39
- const t = document.createElement("div");
40
- t.style.display = "flex", t.style.alignItems = "center", t.style.justifyContent = "center", t.style.width = "100%", t.style.height = "100%", t.style.userSelect = "none";
41
39
  const r = document.createElement("div");
42
- return r.style.backgroundColor = e.getValue(), r.style.width = "64px", r.style.height = "32px", r.style.borderRadius = "var(--cx-border-radius-large)", r.style.padding = "0 var(--cx-spacing-medium)", t.appendChild(r), t;
40
+ r.style.display = "flex", r.style.alignItems = "center", r.style.justifyContent = "center", r.style.width = "100%", r.style.height = "100%", r.style.userSelect = "none";
41
+ const t = document.createElement("div");
42
+ 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;
43
43
  },
44
44
  headerHozAlign: "center",
45
45
  headerSort: !1,
@@ -88,19 +88,19 @@ const y = 165, G = ["HEX", "RGB", "CMYK", "PMS"], I = {
88
88
  widthGrow: 2
89
89
  }
90
90
  ];
91
- function u(e, t, r) {
92
- const a = t.getValue() ?? "";
93
- if (!a)
91
+ function u(e, r, t) {
92
+ const o = r.getValue() ?? "";
93
+ if (!o)
94
94
  return null;
95
- const c = h`
95
+ const s = h`
96
96
  <cx-copy-button
97
97
  copy-label=${e.term("clickToCopy")}
98
98
  focus-copy-label=${e.term("pressEnterOrCtrlCToCopy")}
99
99
  hoist
100
- label=${`${r}, ${t.getField()} ${e.term("code")} ${a}. ${e.term("clickOrPressCtrlCToCopy")}`}
100
+ label=${`${t}, ${r.getField()} ${e.term("code")} ${o}. ${e.term("clickOrPressCtrlCToCopy")}`}
101
101
  no-icon
102
102
  tooltip-distance="0"
103
- value=${a}
103
+ value=${o}
104
104
  style=${f({
105
105
  "--button-background-color": "transparent",
106
106
  "--button-font-size": "var(--cx-font-size-large)",
@@ -118,17 +118,17 @@ function u(e, t, r) {
118
118
  whiteSpace: "nowrap"
119
119
  })}
120
120
  >
121
- ${a}
121
+ ${o}
122
122
  </span>
123
123
  </cx-copy-button>
124
- `, l = document.createDocumentFragment();
125
- return F(c, l), l.firstElementChild;
124
+ `, c = document.createDocumentFragment();
125
+ return k(s, c), c.firstElementChild;
126
126
  }
127
- const B = (e, t) => [
128
- ...x.slice(0, 2),
127
+ const B = (e, r) => [
128
+ ..._.slice(0, 2),
129
129
  {
130
130
  field: "hex",
131
- formatter: (r) => u(e, r, t),
131
+ formatter: (t) => u(e, t, r),
132
132
  headerHozAlign: "center",
133
133
  headerSort: !1,
134
134
  hozAlign: "center",
@@ -137,7 +137,7 @@ const B = (e, t) => [
137
137
  },
138
138
  {
139
139
  field: "rgb",
140
- formatter: (r) => u(e, r, t),
140
+ formatter: (t) => u(e, t, r),
141
141
  headerHozAlign: "center",
142
142
  headerSort: !1,
143
143
  hozAlign: "center",
@@ -146,7 +146,7 @@ const B = (e, t) => [
146
146
  },
147
147
  {
148
148
  field: "cmyk",
149
- formatter: (r) => u(e, r, t),
149
+ formatter: (t) => u(e, t, r),
150
150
  headerHozAlign: "center",
151
151
  headerSort: !1,
152
152
  hozAlign: "center",
@@ -155,14 +155,14 @@ const B = (e, t) => [
155
155
  },
156
156
  {
157
157
  field: "pms",
158
- formatter: (r) => u(e, r, t),
158
+ formatter: (t) => u(e, t, r),
159
159
  headerHozAlign: "center",
160
160
  headerSort: !1,
161
161
  hozAlign: "center",
162
162
  title: "PMS",
163
163
  widthGrow: 2
164
164
  }
165
- ], K = k`
165
+ ], K = A`
166
166
  :host {
167
167
  --grid-gap: var(--cx-spacing-medium);
168
168
  --padding: 0;
@@ -254,17 +254,18 @@ const B = (e, t) => [
254
254
  background-color: transparent;
255
255
  }
256
256
  `;
257
- var j = Object.defineProperty, U = Object.getOwnPropertyDescriptor, i = (e, t, r, a) => {
258
- for (var c = a > 1 ? void 0 : a ? U(t, r) : t, l = e.length - 1, g; l >= 0; l--)
259
- (g = e[l]) && (c = (a ? g(t, r, c) : g(c)) || c);
260
- return a && c && j(t, r, c), c;
257
+ var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, i = (e, r, t, o) => {
258
+ for (var s = o > 1 ? void 0 : o ? j(r, t) : r, c = e.length - 1, g; c >= 0; c--)
259
+ (g = e[c]) && (s = (o ? g(r, t, s) : g(s)) || s);
260
+ return o && s && U(r, t, s), s;
261
261
  };
262
- let o = class extends A {
262
+ const v = "unnamed";
263
+ let a = class extends S {
263
264
  constructor() {
264
- super(), this.localize = new D(this), this.variant = s.Table, this.data = [], this.maxCol = 4, this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.breakpoints = [350, 696, 1024], this.deviceType = n.Desktop, this.currentCol = 0, this.isFocused = !1, this.canFocusContainer = !0, this.isContainerFocused = !1, this.handleWindowResize = this.handleWindowResize.bind(this);
265
+ 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);
265
266
  }
266
267
  runFirstUpdated() {
267
- this.breakpoints = O(this, this.breakpoints), this.handleResize();
268
+ this.breakpoints = M(this, this.breakpoints), this.handleResize();
268
269
  }
269
270
  runConnectedCallback() {
270
271
  this.setAttribute("role", "region"), this.setAttribute("aria-label", this.localize.term("colorSwatches")), this.setAttribute(
@@ -281,23 +282,23 @@ let o = class extends A {
281
282
  handleResize() {
282
283
  const e = window.innerWidth;
283
284
  switch (this.variant) {
284
- case s.Grid: {
285
- const t = Number.parseFloat(
285
+ case n.Grid: {
286
+ const r = Number.parseFloat(
286
287
  getComputedStyle(this.containerEl).getPropertyValue("--grid-gap")
287
288
  );
288
289
  this.currentCol = Math.floor(
289
- (e + t) / (y + t)
290
+ (e + r) / (y + r)
290
291
  );
291
292
  break;
292
293
  }
293
- case s.Circles: {
294
- this.deviceType = M(this.breakpoints);
294
+ case n.Circles: {
295
+ this.deviceType = G(this.breakpoints);
295
296
  break;
296
297
  }
297
298
  }
298
299
  }
299
300
  handleKeyDown(e) {
300
- !(e.target instanceof v) && !e.target?.closest(
301
+ !(e.target instanceof C) && !e.target?.closest(
301
302
  "[data-table-container]"
302
303
  ) || (e.key === "Enter" || e.key === " ") && (this.isFocused = !0);
303
304
  }
@@ -313,11 +314,11 @@ let o = class extends A {
313
314
  * Filter out the columns that are not in the showCodes
314
315
  */
315
316
  getTableColumns(e) {
316
- const t = this.canCopy ? B(this.localize, e) : x;
317
+ const r = this.canCopy ? B(this.localize, e) : _;
317
318
  return [
318
- ...t.slice(0, 2),
319
- ...t.slice(2).filter(
320
- (r) => this.showCodes.includes(r.field.toUpperCase())
319
+ ...r.slice(0, 2),
320
+ ...r.slice(2).filter(
321
+ (t) => this.showCodes.includes(t.field.toUpperCase())
321
322
  )
322
323
  ];
323
324
  }
@@ -326,9 +327,9 @@ let o = class extends A {
326
327
  */
327
328
  categorizeByPalette() {
328
329
  return Object.values(
329
- this.data.reduce((e, t) => {
330
- const r = t.palette?.trim() ? t.palette : "No Palette";
331
- return e[r] || (e[r] = { colors: [], palette: r }), e[r].colors.push(t), e;
330
+ this.data.reduce((e, r) => {
331
+ const t = r.palette?.trim() ? r.palette : v;
332
+ return e[t] || (e[t] = { colors: [], palette: t }), e[t].colors.push(r), e;
332
333
  }, {})
333
334
  );
334
335
  }
@@ -345,26 +346,26 @@ let o = class extends A {
345
346
  * Get current direction of the color swatch group
346
347
  */
347
348
  get currentDirection() {
348
- return this.variant === s.Circles && this.deviceType !== n.Desktop ? "vertical" : "horizontal";
349
+ return this.variant === n.Circles && this.deviceType !== l.Desktop ? "vertical" : "horizontal";
349
350
  }
350
351
  /**
351
352
  * Get the variant of the color swatch
352
353
  */
353
354
  get swatchVariant() {
354
355
  switch (this.variant) {
355
- case s.Circles:
356
- return this.deviceType === n.Tablet ? m.Oval : m.Circle;
357
- case s.Grid:
356
+ case n.Circles:
357
+ return this.deviceType === l.Tablet ? m.Oval : m.Circle;
358
+ case n.Grid:
358
359
  return m.GridItem;
359
360
  default:
360
361
  return;
361
362
  }
362
363
  }
363
364
  render() {
364
- const e = this.currentDirection;
365
+ const e = this.currentDirection, r = this.localize.lang();
365
366
  return h`
366
- ${W(
367
- this.variant === s.Table,
367
+ ${O(
368
+ this.variant === n.Table,
368
369
  () => h`
369
370
  <cx-space
370
371
  class="color-swatch-group__swatches"
@@ -374,36 +375,42 @@ let o = class extends A {
374
375
  ${b(
375
376
  [this.data, this.canCopy],
376
377
  () => this.categorizeByPalette().map(
377
- (t) => h`
378
- <div
379
- tabindex=${N(
380
- this.canFocusContainer ? "0" : void 0
381
- )}
382
- data-table-container
383
- class="color-swatch-group__table-container"
384
- @focusin=${this.handleFocusIn}
385
- @focusout=${this.handleFocusOut}
386
- @keydown=${this.handleKeyDown}
387
- >
388
- <cx-typography variant="h3">
389
- ${this.localize.term("shadesPalette", t.palette)}
390
- </cx-typography>
391
- <cx-table
392
- part="table"
393
- tabindex=${this.isFocused ? void 0 : "-1"}
394
- no-selectable
395
- layout="fitColumns"
396
- .columns=${b(
397
- [this.showCodes, this.canCopy, this.localize],
398
- () => this.getTableColumns(t.palette)
399
- )}
400
- .columnDefaults=${I}
401
- .rowHeight=${48}
402
- .data=${t.colors ?? []}
403
- class="color-swatch-group__table"
404
- ></cx-table>
405
- </div>
406
- `
378
+ (t) => {
379
+ const o = this.multiLanguage && r ? t.colors.map((s) => ({
380
+ ...s,
381
+ name: s[`name-${r.toLowerCase()}`] ?? s.name
382
+ })) : t.colors;
383
+ return h`
384
+ <div
385
+ tabindex=${H(
386
+ this.canFocusContainer ? "0" : void 0
387
+ )}
388
+ data-table-container
389
+ class="color-swatch-group__table-container"
390
+ @focusin=${this.handleFocusIn}
391
+ @focusout=${this.handleFocusOut}
392
+ @keydown=${this.handleKeyDown}
393
+ >
394
+ <cx-typography variant="h3">
395
+ ${t.palette === v ? this.localize.term("noPalette") : this.localize.term("shadesPalette", t.palette)}
396
+ </cx-typography>
397
+ <cx-table
398
+ part="table"
399
+ tabindex=${this.isFocused ? void 0 : "-1"}
400
+ no-selectable
401
+ layout="fitColumns"
402
+ .columns=${b(
403
+ [this.showCodes, this.canCopy, this.localize],
404
+ () => this.getTableColumns(t.palette)
405
+ )}
406
+ .columnDefaults=${L}
407
+ .rowHeight=${48}
408
+ .data=${o}
409
+ class="color-swatch-group__table"
410
+ ></cx-table>
411
+ </div>
412
+ `;
413
+ }
407
414
  )
408
415
  )}
409
416
  </cx-space>
@@ -419,37 +426,37 @@ let o = class extends A {
419
426
  wrap=${this.variant === "circles" ? "nowrap" : "wrap"}
420
427
  class=${w({
421
428
  "color-swatch-group__swatches": !0,
422
- "color-swatch-group__swatches--grid": this.variant === s.Grid,
423
- [`color-swatch-group__swatches--circles--${e}`]: this.variant === s.Circles
429
+ "color-swatch-group__swatches--grid": this.variant === n.Grid,
430
+ [`color-swatch-group__swatches--circles--${e}`]: this.variant === n.Circles
424
431
  })}
425
432
  style=${f({
426
433
  gridTemplateColumns: this.currentCol >= this.maxCol ? `repeat(${this.maxCol}, 1fr)` : `repeat(auto-fit, minmax(${y}px, 1fr))`
427
434
  })}
428
435
  >
429
- ${P(
436
+ ${W(
430
437
  this.data,
431
438
  (t) => t.name,
432
- (t, r) => h`<cx-color-swatch
439
+ (t, o) => h`<cx-color-swatch
433
440
  part="color-swatch-item"
434
441
  role="listitem"
435
442
  aria-label=${this.localize.term(
436
443
  "colorOfTotal",
437
- r + 1,
444
+ o + 1,
438
445
  this.data.length
439
446
  )}
440
447
  hex=${t.hex}
441
448
  rgb=${t.rgb}
442
449
  cmyk=${t.cmyk}
443
450
  pms=${t.pms}
444
- name=${t.name}
451
+ name=${this.multiLanguage && r ? t[`name-${r.toLowerCase()}`] ?? t.name : t.name}
445
452
  variant=${this.swatchVariant}
446
453
  ?can-copy=${this.canCopy}
447
454
  ?can-focus-code-only=${this.isFocused}
448
455
  .showCodes=${this.showCodes}
449
456
  no-auto-convert
450
457
  class=${w({
451
- [`color-swatch-group__swatches--circles--${e}__item`]: this.variant === s.Circles,
452
- "color-swatch-group__swatches--circles--vertical__item--mobile": this.variant === s.Circles && this.deviceType === n.Mobile
458
+ [`color-swatch-group__swatches--circles--${e}__item`]: this.variant === n.Circles,
459
+ "color-swatch-group__swatches--circles--vertical__item--mobile": this.variant === n.Circles && this.deviceType === l.Mobile
453
460
  })}
454
461
  @keydown=${this.handleKeyDown}
455
462
  @focusout=${this.handleFocusOut}
@@ -461,74 +468,77 @@ let o = class extends A {
461
468
  `;
462
469
  }
463
470
  };
464
- o.styles = [T, K];
465
- o.dependencies = {
466
- "cx-color-swatch": v,
467
- "cx-space": _,
468
- "cx-table": z,
469
- "cx-typography": $
471
+ a.styles = [E, K];
472
+ a.dependencies = {
473
+ "cx-color-swatch": C,
474
+ "cx-space": z,
475
+ "cx-table": $,
476
+ "cx-typography": F
470
477
  };
471
478
  i([
472
- R(".color-swatch-group__swatches")
473
- ], o.prototype, "containerEl", 2);
479
+ P(".color-swatch-group__swatches")
480
+ ], a.prototype, "containerEl", 2);
474
481
  i([
475
- H("cx-table")
476
- ], o.prototype, "tableEls", 2);
482
+ R("cx-table")
483
+ ], a.prototype, "tableEls", 2);
477
484
  i([
478
- p({ reflect: !0, type: String })
479
- ], o.prototype, "variant", 2);
485
+ d({ reflect: !0, type: String })
486
+ ], a.prototype, "variant", 2);
480
487
  i([
481
- p({ reflect: !0, type: Array })
482
- ], o.prototype, "data", 2);
488
+ d({ reflect: !0, type: Array })
489
+ ], a.prototype, "data", 2);
483
490
  i([
484
- p({ attribute: "max-col", reflect: !0, type: Number })
485
- ], o.prototype, "maxCol", 2);
491
+ d({ attribute: "max-col", reflect: !0, type: Number })
492
+ ], a.prototype, "maxCol", 2);
486
493
  i([
487
- p({ attribute: "can-copy", reflect: !0, type: Boolean })
488
- ], o.prototype, "canCopy", 2);
494
+ d({ attribute: "can-copy", reflect: !0, type: Boolean })
495
+ ], a.prototype, "canCopy", 2);
489
496
  i([
490
- p({
497
+ d({
491
498
  attribute: "show-codes",
492
499
  converter: {
493
- fromAttribute: (e) => (e?.split(" ") ?? []).filter((r) => G.includes(r)),
500
+ fromAttribute: (e) => (e?.split(" ") ?? []).filter((t) => I.includes(t)),
494
501
  toAttribute: (e) => e.join(" ")
495
502
  },
496
503
  reflect: !0
497
504
  })
498
- ], o.prototype, "showCodes", 2);
505
+ ], a.prototype, "showCodes", 2);
506
+ i([
507
+ d({ attribute: "multi-language", reflect: !0, type: Boolean })
508
+ ], a.prototype, "multiLanguage", 2);
499
509
  i([
500
- d()
501
- ], o.prototype, "breakpoints", 2);
510
+ p()
511
+ ], a.prototype, "breakpoints", 2);
502
512
  i([
503
- d()
504
- ], o.prototype, "deviceType", 2);
513
+ p()
514
+ ], a.prototype, "deviceType", 2);
505
515
  i([
506
- d()
507
- ], o.prototype, "currentCol", 2);
516
+ p()
517
+ ], a.prototype, "currentCol", 2);
508
518
  i([
509
- d()
510
- ], o.prototype, "isFocused", 2);
519
+ p()
520
+ ], a.prototype, "isFocused", 2);
511
521
  i([
512
- d()
513
- ], o.prototype, "canFocusContainer", 2);
522
+ p()
523
+ ], a.prototype, "canFocusContainer", 2);
514
524
  i([
515
- d()
516
- ], o.prototype, "isContainerFocused", 2);
525
+ p()
526
+ ], a.prototype, "isContainerFocused", 2);
517
527
  i([
518
- E(100)
519
- ], o.prototype, "handleWindowResize", 1);
528
+ D(100)
529
+ ], a.prototype, "handleWindowResize", 1);
520
530
  i([
521
- C("variant", { waitUntilFirstUpdate: !0 })
522
- ], o.prototype, "handleResize", 1);
531
+ x("variant", { waitUntilFirstUpdate: !0 })
532
+ ], a.prototype, "handleResize", 1);
523
533
  i([
524
- C("isFocused", { waitUntilFirstUpdate: !0 })
525
- ], o.prototype, "handleIsFocusedChange", 1);
526
- o = i([
527
- S("cx-color-swatch-group")
528
- ], o);
534
+ x("isFocused", { waitUntilFirstUpdate: !0 })
535
+ ], a.prototype, "handleIsFocusedChange", 1);
536
+ a = i([
537
+ T("cx-color-swatch-group")
538
+ ], a);
529
539
  export {
530
- o as C,
531
- M as a,
532
- s as b,
533
- O as g
540
+ a as C,
541
+ G as a,
542
+ n as b,
543
+ M as g
534
544
  };
@@ -6,8 +6,8 @@ import { C as G } from "./typography.BFpl0WMA.js";
6
6
  import { i as M, n as l, C as S, x as C, c as U } from "./custom-element.vnXBMQxc.js";
7
7
  import { c as W } from "./component.styles.CI-v8BZa.js";
8
8
  import { T as v } from "./index.C1chwzNp.js";
9
- import { d as H } from "./popup.Ba501Rgg.js";
10
- import { L as D } from "./i18n.C3Z8Xe8q.js";
9
+ import { d as H } from "./popup.BE5MfEQJ.js";
10
+ import { L as D } from "./i18n.dCiJrmqj.js";
11
11
  import { w as h } from "./watch.BCJD77bD.js";
12
12
  import { r as d } from "./state.Cw55xXlb.js";
13
13
  import { e as L } from "./query.BBf1UFkC.js";
@@ -1,10 +1,10 @@
1
- import { C as _ } from "./button.CiWlWCNb.js";
2
- import { C as u, D as h } from "./dialog.C28qzMSQ.js";
1
+ import { C as _ } from "./button.2-Io1Wm4.js";
2
+ import { C as u, D as h } from "./dialog.CIeu0rVD.js";
3
3
  import g from "../components/dropdown.js";
4
4
  import { C as x } from "./typography.BFpl0WMA.js";
5
5
  import { i as b, n as e, C as y, x as d, c as w } from "./custom-element.vnXBMQxc.js";
6
6
  import { c as $ } from "./component.styles.CI-v8BZa.js";
7
- import { L as z } from "./i18n.C3Z8Xe8q.js";
7
+ import { L as z } from "./i18n.dCiJrmqj.js";
8
8
  import { e as m } from "./query.BBf1UFkC.js";
9
9
  import { e as a } from "./class-map.CoZTSvbM.js";
10
10
  var v = /* @__PURE__ */ ((t) => (t.Horizontal = "horizontal", t.HorizontalReverse = "horizontal-reverse", t.Vertical = "vertical", t.VerticalReverse = "vertical-reverse", t))(v || {}), f = /* @__PURE__ */ ((t) => (t.Center = "center", t.End = "end", t.Start = "start", t))(f || {});
@@ -18,7 +18,7 @@ const e = {
18
18
  "tablet"
19
19
  /* Tablet */
20
20
  )
21
- }, d = {
21
+ }, r = {
22
22
  canvasWidth: "320px",
23
23
  height: "",
24
24
  id: "mobile",
@@ -27,15 +27,16 @@ const e = {
27
27
  "mobile"
28
28
  /* Mobile */
29
29
  )
30
- }, g = [e, l, d];
31
- var r = /* @__PURE__ */ ((a) => (a.All = "ALL", a.CanDelete = "CanDelete", a.CanDownload = "CanDownload", a.CanFind = "CanFind", a.CanManageRights = "CanManageRights", a.CanMove = "CanMove", a.CanRead = "CanRead", a.CanReadAll = "CanReadAll", a.CanReadAndWrite = "CanReadAndWrite", a.CanReadLarge = "CanReadLarge", a.CanReadMedium = "CanReadMedium", a.CanReadOriginal = "CanReadOriginal", a.CanShare = "CanShare", a.CanUpload = "CanUpload", a.CanWrite = "CanWrite", a.None = "NONE", a))(r || {}), o = /* @__PURE__ */ ((a) => (a.All = "all", a.Audio = "audio", a.Image = "image", a.Other = "other", a.Video = "video", a))(o || {}), C = /* @__PURE__ */ ((a) => (a.Content = "content", a.Template = "template", a))(C || {}), i = /* @__PURE__ */ ((a) => (a.Administrator = "Administrator", a.Designer = "Designer", a.Editor = "Editor", a))(i || {}), h = /* @__PURE__ */ ((a) => (a.Accordion = "BlockAccordion", a.Analytics = "BlockAnalytics", a.Button = "BlockButton", a.Carousel = "BlockCarousel", a.ColorSwatches = "BlockColorSwatches", a.Column = "BlockCell", a.ColumnGroup = "BlockColumns", a.Divider = "BlockDivider", a.FontKit = "BlockFontKit", a.Gallery = "BlockGallery", a.Header = "BlockHeader", a.Image = "BlockImage", a.RichText = "BlockRichText", a.SearchBox = "BlockSearchBox", a.TabGroup = "BlockTabs", a.Text = "BlockText", a.Timeline = "BlockTimeline", a.Video = "BlockVideo", a))(h || {}), u = /* @__PURE__ */ ((a) => (a.Carousel = "carousel", a.Gallery = "gallery", a))(u || {});
30
+ }, g = [e, l, r];
31
+ var d = /* @__PURE__ */ ((a) => (a.All = "ALL", a.CanDelete = "CanDelete", a.CanDownload = "CanDownload", a.CanFind = "CanFind", a.CanManageRights = "CanManageRights", a.CanMove = "CanMove", a.CanRead = "CanRead", a.CanReadAll = "CanReadAll", a.CanReadAndWrite = "CanReadAndWrite", a.CanReadLarge = "CanReadLarge", a.CanReadMedium = "CanReadMedium", a.CanReadOriginal = "CanReadOriginal", a.CanShare = "CanShare", a.CanUpload = "CanUpload", a.CanWrite = "CanWrite", a.None = "NONE", a))(d || {}), o = /* @__PURE__ */ ((a) => (a.All = "all", a.Audio = "audio", a.Image = "image", a.Other = "other", a.Video = "video", a))(o || {}), C = /* @__PURE__ */ ((a) => (a.Content = "content", a.Template = "template", a))(C || {}), i = /* @__PURE__ */ ((a) => (a.Administrator = "Administrator", a.Designer = "Designer", a.Editor = "Editor", a))(i || {}), h = /* @__PURE__ */ ((a) => (a.Accordion = "BlockAccordion", a.Analytics = "BlockAnalytics", a.Button = "BlockButton", a.Carousel = "BlockCarousel", a.ColorSwatches = "BlockColorSwatches", a.Column = "BlockCell", a.ColumnGroup = "BlockColumns", a.Divider = "BlockDivider", a.FontKit = "BlockFontKit", a.Gallery = "BlockGallery", a.Header = "BlockHeader", a.Image = "BlockImage", a.RichText = "BlockRichText", a.SearchBox = "BlockSearchBox", a.TabGroup = "BlockTabs", a.Text = "BlockText", a.Timeline = "BlockTimeline", a.Video = "BlockVideo", a))(h || {}), u = /* @__PURE__ */ ((a) => (a.Carousel = "carousel", a.Gallery = "gallery", a))(u || {}), A = /* @__PURE__ */ ((a) => (a.Templates = "TEMPLATES", a.TranslatableAttributes = "TRANSLATABLE_ATTRIBUTES", a.TranslatableTexts = "TRANSLATABLE_TEXTS", a))(A || {});
32
32
  export {
33
33
  o as A,
34
34
  h as B,
35
35
  n as D,
36
36
  C as E,
37
- r as P,
37
+ d as P,
38
38
  i as T,
39
39
  u as a,
40
- g as b
40
+ A as b,
41
+ g as c
41
42
  };
@@ -3,7 +3,7 @@ import { c as L } from "./component.styles.CI-v8BZa.js";
3
3
  import { O, C as P, H as $, z as H, o as E } from "./overlayscrollbars.aFuRG5Rs.js";
4
4
  import { s as p, g as h, b as c, a as y } from "./animation-registry.DavRkTTr.js";
5
5
  import { w as x } from "./event.mFzZi4sr.js";
6
- import { L as R } from "./i18n.C3Z8Xe8q.js";
6
+ import { L as R } from "./i18n.dCiJrmqj.js";
7
7
  import { M as W } from "./modal.BqNLxgs1.js";
8
8
  import { l as w, u as _ } from "./scroll.DwPiX2Ox.js";
9
9
  import { H as q } from "./slot.DJLm4Dig.js";
@@ -16,7 +16,7 @@ import { o as A } from "./style-map.CZovMmo_.js";
16
16
  import { n as g } from "./when.Dr1es41R.js";
17
17
  import F from "../components/divider.js";
18
18
  import I from "../components/icon-button.js";
19
- import { C as T } from "./popup.Ba501Rgg.js";
19
+ import { C as T } from "./popup.BE5MfEQJ.js";
20
20
  var l = /* @__PURE__ */ ((e) => (e.Both = "both", e.Footer = "footer", e.Header = "header", e.None = "none", e))(l || {});
21
21
  const U = z`
22
22
  :host {
@@ -1,7 +1,7 @@
1
1
  import { i as P, n as a, C as F, x as y, c as z } from "./custom-element.vnXBMQxc.js";
2
2
  import { c as S } from "./component.styles.CI-v8BZa.js";
3
3
  import { O as C } from "./index.Cpamj0jB.js";
4
- import { L as O } from "./i18n.C3Z8Xe8q.js";
4
+ import { L as O } from "./i18n.dCiJrmqj.js";
5
5
  import { w as h } from "./watch.BCJD77bD.js";
6
6
  import { r as j } from "./state.Cw55xXlb.js";
7
7
  import { e as H } from "./query.BBf1UFkC.js";