@orangelogic/design-system 4.3.0 → 4.4.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 (109) hide show
  1. package/library/chunks/{asset-link-format.C5Ue4EGP.js → asset-link-format.DTLA2CFh.js} +407 -388
  2. package/library/chunks/{button.DbAUlIXG.js → button.cbDkxJHn.js} +1 -1
  3. package/library/chunks/{color-swatch-group.B10yWbVM.js → color-swatch-group.CZSeCrot.js} +7 -7
  4. package/library/chunks/{confirm-popover.Cd4HM5-B.js → confirm-popover.Dvgoz-oA.js} +3 -3
  5. package/library/chunks/{dialog.CXphbq8N.js → dialog.BvSMV36r.js} +2 -2
  6. package/library/chunks/{document-viewer.B_ESlazf.js → document-viewer.BLdEjbza.js} +7 -7
  7. package/library/chunks/{dot-pagination.CzT-MZmt.js → dot-pagination.CukHxNBk.js} +1 -1
  8. package/library/chunks/{folder-select.BWeanVkA.js → folder-select.DAZQRdLq.js} +4 -4
  9. package/library/chunks/{header.Dy57RuQW.js → header.2RH_nPmz.js} +1 -1
  10. package/library/chunks/{i18n.Q5_2aVLU.js → i18n.BSPmBQ73.js} +1 -0
  11. package/library/chunks/{icon-button.BjAbCuH8.js → icon-button.DV5Fks8j.js} +1 -1
  12. package/library/chunks/{iframe.CdktjPCB.js → iframe.ddX2kGu3.js} +1 -1
  13. package/library/chunks/{image.CCo__54F.js → image.BM7bPTub.js} +174 -143
  14. package/library/chunks/{index.DiZGZkHv.js → index.DKKvxBAi.js} +70 -66
  15. package/library/chunks/{input.ftEf4GS6.js → input.7pumTpdu.js} +1 -1
  16. package/library/chunks/{markdown.RljldBNb.js → markdown.LHSzm035.js} +2 -2
  17. package/library/chunks/{menu-item.BNs1Ji48.js → menu-item.CqPvDGeN.js} +1 -1
  18. package/library/chunks/{option.C8IEnv5Q.js → option.dBUWN4sF.js} +1 -1
  19. package/library/chunks/{pagination.Bke9vgl4.js → pagination.C2f8lUVb.js} +5 -5
  20. package/library/chunks/{resizable-component.styles.CAfXABBc.js → resizable-component.styles.kMFDlGgv.js} +2 -2
  21. package/library/chunks/{tab-group.DZ32f41G.js → tab-group.DOnaT12G.js} +4 -4
  22. package/library/chunks/{tree.Umn7TAkc.js → tree.CHQ1WjZV.js} +1 -1
  23. package/library/chunks/{types.BW36Gr9c.js → types.PdpKNndx.js} +2519 -2411
  24. package/library/components/alert.js +2 -2
  25. package/library/components/asset-link-format.js +3 -3
  26. package/library/components/atoms.js +15 -15
  27. package/library/components/audio.js +3 -3
  28. package/library/components/border-input-group.js +2 -2
  29. package/library/components/breadcrumb.js +1 -1
  30. package/library/components/button.js +2 -2
  31. package/library/components/color-picker.js +6 -6
  32. package/library/components/color-swatch-group.js +2 -2
  33. package/library/components/color-swatch.js +1 -1
  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/date-calendar.js +1 -1
  38. package/library/components/details.js +1 -1
  39. package/library/components/dialog.js +3 -3
  40. package/library/components/document-viewer.js +4 -4
  41. package/library/components/dot-pagination.js +2 -2
  42. package/library/components/drawer.js +2 -2
  43. package/library/components/dropdown.js +2 -2
  44. package/library/components/dynamic-select.js +4 -4
  45. package/library/components/e-chart.js +1 -1
  46. package/library/components/element-clamp.js +2 -2
  47. package/library/components/file-on-demand.js +9 -9
  48. package/library/components/folder-select.js +4 -4
  49. package/library/components/format-bytes.js +1 -1
  50. package/library/components/format-date.js +1 -1
  51. package/library/components/format-number.js +1 -1
  52. package/library/components/format-time.js +1 -1
  53. package/library/components/header.js +2 -2
  54. package/library/components/icon-button.js +2 -2
  55. package/library/components/iframe.js +2 -2
  56. package/library/components/image-comparer.js +1 -1
  57. package/library/components/image.js +3 -3
  58. package/library/components/input.js +2 -2
  59. package/library/components/line-clamp.js +1 -1
  60. package/library/components/markdown.js +3 -3
  61. package/library/components/masonry.js +2 -2
  62. package/library/components/menu-item.js +2 -2
  63. package/library/components/menu.js +2 -2
  64. package/library/components/molecules.js +2 -2
  65. package/library/components/option.js +2 -2
  66. package/library/components/organisms.js +2 -2
  67. package/library/components/padding-input-group.js +1 -1
  68. package/library/components/pagination.js +6 -6
  69. package/library/components/popup.js +1 -1
  70. package/library/components/position-picker.js +1 -1
  71. package/library/components/progress-bar.js +1 -1
  72. package/library/components/progress-ring.js +1 -1
  73. package/library/components/range.js +1 -1
  74. package/library/components/rating.js +1 -1
  75. package/library/components/relative-time.js +1 -1
  76. package/library/components/select.js +2 -2
  77. package/library/components/shadow-input-group.js +1 -1
  78. package/library/components/share-option-list.js +1 -1
  79. package/library/components/sidebar.js +1 -1
  80. package/library/components/size-input-group.js +3 -3
  81. package/library/components/spinner.js +1 -1
  82. package/library/components/split-panel.js +1 -1
  83. package/library/components/tab-group.js +5 -5
  84. package/library/components/tab.js +2 -2
  85. package/library/components/tag.js +2 -2
  86. package/library/components/tooltip.js +1 -1
  87. package/library/components/tree-item.js +2 -2
  88. package/library/components/tree.js +2 -2
  89. package/library/components/typeface.js +2 -2
  90. package/library/components/types.js +21 -21
  91. package/library/components/video.js +1341 -1294
  92. package/library/package.json +1 -1
  93. package/library/packages/atoms/src/components/image/image.d.ts +16 -0
  94. package/library/packages/atoms/src/components/video/video.d.ts +6 -0
  95. package/library/packages/events/src/cx-asset-transformation-dialog-confirm.d.ts +2 -0
  96. package/library/packages/molecules/src/icon-picker/icon-picker.d.ts +5 -6
  97. package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts +6 -0
  98. package/library/packages/organisms/src/asset-transformation-dialog/asset-transformation-dialog.d.ts +5 -1
  99. package/library/packages/organisms/src/content-builder/blocks/image/image.d.ts +10 -3
  100. package/library/packages/organisms/src/content-builder/configs/header.d.ts +1 -1
  101. package/library/packages/organisms/src/content-builder/configs/image.d.ts +2 -0
  102. package/library/packages/organisms/src/content-builder/configs-controller.d.ts +13 -0
  103. package/library/packages/organisms/src/content-builder/styleController.d.ts +2 -0
  104. package/library/packages/organisms/src/form/control-renderer/control-renderer.d.ts +6 -0
  105. package/library/packages/types/src/content-builder.d.ts +6 -2
  106. package/library/packages/utils/src/custom-element/i18n.d.ts +1 -0
  107. package/library/react-web-component.d.ts +4 -0
  108. package/library/utils.js +1 -1
  109. package/package.json +1 -1
@@ -1,34 +1,34 @@
1
- import { C as z } from "./typography.BLYdTF0n.js";
2
- import { n, C as N } from "./lib-cortex-element.CVMmyPMC.js";
3
- import { c as O } from "./component.styles.CAS3c9pM.js";
4
- import { s as M } from "./folder-select.BWeanVkA.js";
5
- import { E as A, B as H } from "./content-builder.CBBdfVOl.js";
6
- import { c as V } from "./custom-element.L4WJXn1j.js";
7
- import { L as _ } from "./i18n.Q5_2aVLU.js";
1
+ import { C as N } from "./typography.BLYdTF0n.js";
2
+ import { n, C as O } from "./lib-cortex-element.CVMmyPMC.js";
3
+ import { c as M } from "./component.styles.CAS3c9pM.js";
4
+ import { s as V } from "./folder-select.DAZQRdLq.js";
5
+ import { E as F, B as H } from "./content-builder.CBBdfVOl.js";
6
+ import { c as j } from "./custom-element.L4WJXn1j.js";
7
+ import { L as R } from "./i18n.BSPmBQ73.js";
8
8
  import { w as k } from "./watch.DJF5K-8U.js";
9
- import { B as U, E as F, i as j, x as h } from "./lit-element.jLBm65_O.js";
9
+ import { B as U, E as P, i as G, x as h } from "./lit-element.jLBm65_O.js";
10
10
  import { r as g } from "./state.CSDxrqLd.js";
11
11
  import { e as $ } from "./query.BBf1UFkC.js";
12
- import { b as G } from "./_baseIteratee.sC2wLi2m.js";
12
+ import { b as W } from "./_baseIteratee.sC2wLi2m.js";
13
13
  import { a as J } from "./toString.B1zKIiZc.js";
14
14
  import { b as X } from "./cloneDeep.tKGbEwzn.js";
15
15
  import { c as Y } from "./_baseClone.ipmFlCAx.js";
16
- import { F as P, a as Q, C as Z, I as tt, t as et, c as ot, b as st, d as rt, e as it, f as at, g as nt, h as lt, i as ct, j as pt, k as ht, l as dt, m as ut, n as mt, o as ft, p as gt, q as bt, r as yt, s as xt, O as Ct } from "./types.BW36Gr9c.js";
17
- import { C as wt } from "./button.DbAUlIXG.js";
16
+ import { F as _, a as Q, C as Z, I as tt, t as et, c as ot, b as st, d as rt, e as it, f as at, g as nt, h as lt, i as ct, j as pt, k as ht, l as dt, m as ut, n as mt, o as ft, p as gt, q as bt, r as yt, s as xt, O as Ct } from "./types.PdpKNndx.js";
17
+ import { C as wt } from "./button.cbDkxJHn.js";
18
18
  import vt from "../components/button-group.js";
19
19
  import kt from "../components/card.js";
20
20
  import $t from "../components/checkbox.js";
21
- import { C as Tt, D as R } from "./dialog.CXphbq8N.js";
21
+ import { C as Tt, D } from "./dialog.BvSMV36r.js";
22
22
  import St from "../components/divider.js";
23
23
  import At from "../components/dropdown.js";
24
24
  import Ft from "../components/grid.js";
25
25
  import Pt from "../components/grid-item.js";
26
26
  import { C as _t } from "./icon.BLXWp6CU.js";
27
- import { C as Rt } from "./input.ftEf4GS6.js";
27
+ import { C as Rt } from "./input.7pumTpdu.js";
28
28
  import Dt from "../components/line-clamp.js";
29
29
  import It from "../components/menu.js";
30
- import { C as qt } from "./menu-item.BNs1Ji48.js";
31
- import { C as Lt } from "./option.C8IEnv5Q.js";
30
+ import { C as qt } from "./menu-item.CqPvDGeN.js";
31
+ import { C as Lt } from "./option.dBUWN4sF.js";
32
32
  import Bt from "../components/radio.js";
33
33
  import Et from "../components/radio-card.js";
34
34
  import zt from "../components/radio-group.js";
@@ -36,14 +36,14 @@ import Nt from "../components/select.js";
36
36
  import Ot from "../components/space.js";
37
37
  import Mt from "../components/switch.js";
38
38
  import Vt from "../components/tab.js";
39
- import { C as jt } from "./tab-group.DZ32f41G.js";
39
+ import { C as jt } from "./tab-group.DOnaT12G.js";
40
40
  import Gt from "../components/tab-panel.js";
41
41
  import Wt from "../components/textarea.js";
42
42
  import Kt from "../components/tooltip.js";
43
43
  import Ht from "../components/visually-hidden.js";
44
44
  import Ut from "../components/bicolor-picker.js";
45
45
  import Jt from "../components/border-input-group.js";
46
- import { C as Xt, a as Yt } from "./confirm-popover.Cd4HM5-B.js";
46
+ import { C as Xt, a as Yt } from "./confirm-popover.Dvgoz-oA.js";
47
47
  import Qt from "../components/corner-position-input-group.js";
48
48
  import Zt from "../components/dynamic-select.js";
49
49
  import te from "../components/padding-input-group.js";
@@ -52,16 +52,16 @@ import oe from "../components/shadow-input-group.js";
52
52
  import se from "../components/size-input-group.js";
53
53
  import { isFormInteracted as re } from "../utils.js";
54
54
  import { e as ie, i as ae } from "./directive.oAbCiebi.js";
55
- import { e as D, p as I, m as q, s as L, h as ne, l as le } from "./directive-helpers.DEDMV45_.js";
55
+ import { e as I, p as q, m as L, s as B, h as ne, l as le } from "./directive-helpers.DEDMV45_.js";
56
56
  import { i as ce } from "./keyed.DdOUTIg-.js";
57
- import { c as S } from "./repeat.CFjcER6_.js";
57
+ import { c as A } from "./repeat.CFjcER6_.js";
58
58
  import { n as y } from "./when.Dr1es41R.js";
59
59
  import { b as pe } from "./_baseXor.BCxbgizO.js";
60
- import { a as he, i as B, b as de } from "./isArrayLikeObject.D7afXo-f.js";
60
+ import { a as he, i as E, b as de } from "./isArrayLikeObject.D7afXo-f.js";
61
61
  import { i as ue } from "./isEmpty.DtTJTUcf.js";
62
- import { u as W } from "./asset-link-format.C5Ue4EGP.js";
62
+ import { u as K } from "./asset-link-format.DTLA2CFh.js";
63
63
  import { r as me } from "./choose.BTbF6BAn.js";
64
- import { o as T } from "./if-defined.BRoBj_Rp.js";
64
+ import { o as S } from "./if-defined.BRoBj_Rp.js";
65
65
  import { o as fe } from "./map.D8heArFD.js";
66
66
  import { e as ge, n as be } from "./ref.DktKp7fP.js";
67
67
  import { o as ye } from "./style-map.llVFPd__.js";
@@ -90,12 +90,12 @@ function we(t, e) {
90
90
  var o = J(Y(t), function(a) {
91
91
  return [a];
92
92
  });
93
- return e = G(e), X(t, o, function(a, i) {
93
+ return e = W(e), X(t, o, function(a, i) {
94
94
  return e(a, i[0]);
95
95
  });
96
96
  }
97
97
  function ve(t, e) {
98
- return we(t, Ce(G(e)));
98
+ return we(t, Ce(W(e)));
99
99
  }
100
100
  const ke = /* @__PURE__ */ new Map([
101
101
  ["100", "Thin"],
@@ -108,8 +108,8 @@ const ke = /* @__PURE__ */ new Map([
108
108
  ["800", "Extra Bold"],
109
109
  ["900", "Black"]
110
110
  ]);
111
- P.Cff, P.TrueType;
112
- new Set(Object.values(P));
111
+ _.Cff, _.TrueType;
112
+ new Set(Object.values(_));
113
113
  new RegExp(
114
114
  `\\$\\{(${Object.values(Q).join("|")})\\}`,
115
115
  "g"
@@ -139,7 +139,7 @@ function Se(t) {
139
139
  * Copyright 2017 Google LLC
140
140
  * SPDX-License-Identifier: BSD-3-Clause
141
141
  */
142
- const E = (t) => le(t) ? t._$litType$.h : t.strings, Ae = ie(class extends ae {
142
+ const z = (t) => le(t) ? t._$litType$.h : t.strings, Ae = ie(class extends ae {
143
143
  constructor(t) {
144
144
  super(t), this.et = /* @__PURE__ */ new WeakMap();
145
145
  }
@@ -147,22 +147,22 @@ const E = (t) => le(t) ? t._$litType$.h : t.strings, Ae = ie(class extends ae {
147
147
  return [t];
148
148
  }
149
149
  update(t, [e]) {
150
- const o = D(this.it) ? E(this.it) : null, a = D(e) ? E(e) : null;
150
+ const o = I(this.it) ? z(this.it) : null, a = I(e) ? z(e) : null;
151
151
  if (o !== null && (a === null || o !== a)) {
152
- const i = I(t).pop();
152
+ const i = q(t).pop();
153
153
  let r = this.et.get(o);
154
154
  if (r === void 0) {
155
155
  const s = document.createDocumentFragment();
156
- r = U(F, s), r.setConnected(!1), this.et.set(o, r);
156
+ r = U(P, s), r.setConnected(!1), this.et.set(o, r);
157
157
  }
158
- q(r, [i]), L(r, void 0, i);
158
+ L(r, [i]), B(r, void 0, i);
159
159
  }
160
160
  if (a !== null) {
161
161
  if (o === null || o !== a) {
162
162
  const i = this.et.get(a);
163
163
  if (i !== void 0) {
164
- const r = I(i).pop();
165
- ne(t), L(t, void 0, r), q(t, [r]);
164
+ const r = q(i).pop();
165
+ ne(t), B(t, void 0, r), L(t, [r]);
166
166
  }
167
167
  }
168
168
  this.it = e;
@@ -171,12 +171,12 @@ const E = (t) => le(t) ? t._$litType$.h : t.strings, Ae = ie(class extends ae {
171
171
  }
172
172
  });
173
173
  var Fe = he(function(t, e) {
174
- return B(t) ? pe(t, de(e, 1, B, !0)) : [];
174
+ return E(t) ? pe(t, de(e, 1, E, !0)) : [];
175
175
  });
176
- const Pe = j`:host{display:block}.config-form{--body-spacing:0;--header-spacing:var(--cx-spacing-small) var(--cx-spacing-large) 0;--width:680px;--cx-input-required-content-display:none;color:var(--cx-color-neutral)}.config-form__dropdown{text-align:left}.config-form__checkbox-group-item{--item-padding:0;--selected-background-color:transparent}.config-form__radio-card{--radio-card-overflow:clip}.config-form__dropdown-menu{--checked-icon-display:none}.config-form__confirm-popover{--confirm-popover-dialog-width:fit-content;--confirm-button-background-color:var(--cx-color-danger-500);--cancel-button-background-color:var(--cx-color-neutral-100);--cancel-button-color:var(--cx-color-neutral-700)}.config-form__tab-group{--padding:0;--tab-group-nav-padding:0 var(--cx-spacing-large);--tab-group-top-gap:0}.config-form__tab-group::part(nav){background-color:var(--cx-color-neutral-0);z-index:1;position:sticky;top:0}`;
176
+ const Pe = G`:host{display:block}.config-form{--body-spacing:0;--header-spacing:var(--cx-spacing-small) var(--cx-spacing-large) 0;--width:680px;--cx-input-required-content-display:none;color:var(--cx-color-neutral)}.config-form__dropdown{text-align:left}.config-form__checkbox-group-item{--item-padding:0;--selected-background-color:transparent}.config-form__radio-card{--radio-card-overflow:clip}.config-form__dropdown-menu{--checked-icon-display:none}.config-form__confirm-popover{--confirm-popover-dialog-width:fit-content;--confirm-button-background-color:var(--cx-color-danger-500);--cancel-button-background-color:var(--cx-color-neutral-100);--cancel-button-color:var(--cx-color-neutral-700)}.config-form__tab-group{--padding:0;--tab-group-nav-padding:0 var(--cx-spacing-large);--tab-group-top-gap:0}.config-form__tab-group::part(nav){background-color:var(--cx-color-neutral-0);z-index:1;position:sticky;top:0}`;
177
177
  class _e {
178
178
  constructor(e) {
179
- this.host = e, this.localize = new _(this.host), this.controlRenderer = new Z(this.host, {
179
+ this.host = e, this.localize = new R(this.host), this.controlRenderer = new Z(this.host, {
180
180
  commit: async ({ callback: o, immediate: a, key: i, type: r, value: s }) => {
181
181
  if (a && r === "attribute") {
182
182
  this.handleAttributeChange(i, s, o);
@@ -299,7 +299,7 @@ class _e {
299
299
  }
300
300
  renderBasicControls(e, o, a) {
301
301
  const i = ge(), r = h`
302
- ${S(
302
+ ${A(
303
303
  e.filter((s) => {
304
304
  const u = !a || s.name && this.host.tabMap[s.name] === a || o?.name && this.host.tabMap[o.name] === a;
305
305
  let m = !1;
@@ -376,20 +376,20 @@ class _e {
376
376
  const { controlType: s, groupConfigs: u } = o;
377
377
  if (s === "group" && u?.direction === "horizontal") {
378
378
  const { columnGap: m, gap: x, rowGap: f, wrap: b } = u;
379
- return h`<cx-grid columns="100" use-flex-gap spacing=${T(x)} column-spacing=${T(m)} row-spacing=${T(f)} wrap=${T(b)} ${be(i)}>${r}</cx-grid>`;
379
+ return h`<cx-grid columns="100" use-flex-gap spacing=${S(x)} column-spacing=${S(m)} row-spacing=${S(f)} wrap=${S(b)} ${be(i)}>${r}</cx-grid>`;
380
380
  }
381
381
  }
382
382
  return h`<cx-space direction="vertical" wrap="nowrap">${r}</cx-space>`;
383
383
  }
384
384
  renderTranslationControls() {
385
- const e = W(
385
+ const e = K(
386
386
  this.host.translatableControls.map((a) => a.translateGroup)
387
- ), o = h`${S(e, (a) => {
387
+ ), o = h`${A(e, (a) => {
388
388
  const i = this.host.translatableControls.filter((r) => {
389
389
  let s = !1;
390
390
  return (!this.host.skipShowCheck || !r.skipShowCheck) && (typeof r.show == "boolean" ? s = !r.show : typeof r.show == "function" && (s = !r.show(this.host.blockAttributes))), r.translateGroup === a && !s;
391
391
  });
392
- return i.length === 0 ? F : h`<cx-typography variant="h5">${a}</cx-typography>${S(
392
+ return i.length === 0 ? P : h`<cx-typography variant="h5">${a}</cx-typography>${A(
393
393
  i,
394
394
  (r) => r.id,
395
395
  (r) => r.controlType === "info-text" ? this.renderInfoText(r) : h`<cx-grid columns="4" spacing="var(--cx-spacing-small)" column-spacing="0" use-flex-gap row-spacing="0" wrap="wrap"><cx-grid-item xs="4" sm="1"><cx-typography variant="body2">${r.label}</cx-typography></cx-grid-item><cx-grid-item xs="4" sm="3"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${fe(this.host.sortedLanguages, (s) => {
@@ -401,19 +401,23 @@ class _e {
401
401
  case "image-picker": {
402
402
  x = async (f) => {
403
403
  if (typeof f == "object" && f !== null) {
404
- const { id: b, src: v } = f, w = r.pickerConfigs?.recordIdKey ?? "record-id";
404
+ const { id: b, src: v } = f, w = r.pickerConfigs?.recordIdKey ?? "record-id", C = r.pickerConfigs?.aspectRatioKey, T = b ? await this.controlRenderer.resolveAssetFormat(b, r.pickerConfigs?.defaultFormat ?? "") : { aspectRatio: 0, src: "" };
405
405
  this.host.emit("cx-content-builder-translatable-value-change", {
406
406
  detail: {
407
407
  language: s,
408
408
  values: [{
409
409
  attribute: r.id,
410
410
  type: "attribute",
411
- value: v
411
+ value: T.src || v
412
412
  }, {
413
413
  attribute: w,
414
414
  type: "attribute",
415
415
  value: b
416
- }]
416
+ }, ...C ? [{
417
+ attribute: C,
418
+ type: "attribute",
419
+ value: String(T.aspectRatio)
420
+ }] : []]
417
421
  }
418
422
  });
419
423
  }
@@ -424,7 +428,7 @@ class _e {
424
428
  case "video-picker": {
425
429
  x = async (f) => {
426
430
  if (typeof f == "object" && f !== null) {
427
- const { id: b, name: v, src: w } = f, C = r.pickerConfigs?.recordIdKey ?? "record-id", K = r.pickerConfigs?.nameKey ?? "name";
431
+ const { id: b, name: v, src: w } = f, C = r.pickerConfigs?.recordIdKey ?? "record-id", T = r.pickerConfigs?.nameKey ?? "name";
428
432
  this.host.emit("cx-content-builder-translatable-value-change", {
429
433
  detail: {
430
434
  language: s,
@@ -437,7 +441,7 @@ class _e {
437
441
  type: "attribute",
438
442
  value: b
439
443
  }, {
440
- attribute: K,
444
+ attribute: T,
441
445
  type: "attribute",
442
446
  value: v
443
447
  }]
@@ -465,7 +469,7 @@ class _e {
465
469
  ${y(
466
470
  r.controlType && r.controlType !== "input",
467
471
  () => h`<cx-typography variant="body3">${u}</cx-typography>`,
468
- () => F
472
+ () => P
469
473
  )}
470
474
  ${this.controlRenderer.renderControl({
471
475
  blockAttributes: {
@@ -498,9 +502,9 @@ var Re = Object.defineProperty, De = Object.getOwnPropertyDescriptor, c = (t, e,
498
502
  (s = t[r]) && (i = (a ? s(e, o, i) : s(i)) || i);
499
503
  return a && i && Re(e, o, i), i;
500
504
  };
501
- let l = class extends N {
505
+ let l = class extends O {
502
506
  constructor() {
503
- super(...arguments), this.localize = new _(this), this.configFormController = new _e(this), this.loading = !1, this.mode = A.Template, this.adhocProperties = [], this.templateName = "", this.templateId = "", this.supportedLanguages = ["en"], this.translatableControlValues = {}, this.defaultLanguage = "en", this.boundary = document.body, this.baseUrl = "", this.token = "", this.onRequestAsset = void 0, this.onRequestDownloadFormat = void 0, this.onRequestAssetFormat = void 0, this.onConfigureWorkflow = void 0, this.blockAttributes = {}, this.blockProperties = {}, this.blockStyles = {}, this.traits = [], this.translatableControls = [], this.blockName = "", this.name = "", this.description = "", this.showTemplateTab = !1, this.dialogTitle = "", this.skipShowCheck = !1, this.enableAssetFormatControls = !1, this.allowedFolders = [], this.isEditingTemplateSettings = !1, this.disableCloseConfigDialog = !1, this.isAfterShow = !1, this.sortedLanguages = [], this.formKey = 0;
507
+ super(...arguments), this.localize = new R(this), this.configFormController = new _e(this), this.loading = !1, this.mode = F.Template, this.adhocProperties = [], this.templateName = "", this.templateId = "", this.supportedLanguages = ["en"], this.translatableControlValues = {}, this.defaultLanguage = "en", this.boundary = document.body, this.baseUrl = "", this.token = "", this.onRequestAsset = void 0, this.onRequestDownloadFormat = void 0, this.onRequestAssetFormat = void 0, this.onConfigureWorkflow = void 0, this.blockAttributes = {}, this.blockProperties = {}, this.blockStyles = {}, this.traits = [], this.translatableControls = [], this.blockName = "", this.name = "", this.description = "", this.showTemplateTab = !1, this.dialogTitle = "", this.skipShowCheck = !1, this.enableAssetFormatControls = !1, this.allowedFolders = [], this.isEditingTemplateSettings = !1, this.disableCloseConfigDialog = !1, this.isAfterShow = !1, this.sortedLanguages = [], this.formKey = 0;
504
508
  }
505
509
  /**
506
510
  * Whether the template is editable.
@@ -510,7 +514,7 @@ let l = class extends N {
510
514
  * @default true
511
515
  */
512
516
  get isTemplateEditable() {
513
- return this.mode === A.Template;
517
+ return this.mode === F.Template;
514
518
  }
515
519
  /**
516
520
  * Returns the list of tabs available in the configuration manager.
@@ -526,7 +530,7 @@ let l = class extends N {
526
530
  "styling",
527
531
  "effects"
528
532
  /* Effects */
529
- ], e = W(Object.values(this.tabMap)).sort(
533
+ ], e = K(Object.values(this.tabMap)).sort(
530
534
  (o, a) => t.indexOf(o) - t.indexOf(a)
531
535
  );
532
536
  return this.isTemplateEditable ? e : e.filter(
@@ -634,7 +638,7 @@ let l = class extends N {
634
638
  return h`<cx-space direction="vertical" spacing="medium" wrap="nowrap"><cx-typography variant="body2">${this.localize.term("contentBuilderBlockSettingsHelpText")}</cx-typography><cx-grid columns="3" use-flex-gap spacing="var(--cx-spacing-small)" column-spacing="0" wrap="nowrap"><cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.localize.term("templateName")}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2"><cx-input name="name" value=${this.name ?? ""} can-show-length maxlength="200" required @cx-change=${this.handleNameInputChange} type="text"></cx-input></cx-grid-item></cx-grid><cx-grid columns="3" use-flex-gap spacing="var(--cx-spacing-small)" column-spacing="0" wrap="nowrap"><cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.localize.term("description")}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2"><cx-textarea name="description" value=${this.description ?? ""} can-show-length maxlength="200" resize="none" @cx-change=${this.handleDescriptionInputChange} type="text"></cx-textarea></cx-grid-item></cx-grid></cx-space>`;
635
639
  }
636
640
  render() {
637
- return h`<cx-dialog class="config-form" use-overlay-scrollbar divider-position=${R.Footer} .boundary=${this.boundary} @cx-after-show=${this.handleAfterShow} @cx-after-hide=${this.handleAfterHide} @cx-request-close=${this.handleRequestClose} @cx-asset-request-status=${this.handleAssetRequestStatus}><cx-space slot="label" direction="vertical" spacing="2x-small"><cx-typography variant="h4">${y(
641
+ return h`<cx-dialog class="config-form" use-overlay-scrollbar divider-position=${D.Footer} .boundary=${this.boundary} @cx-after-show=${this.handleAfterShow} @cx-after-hide=${this.handleAfterHide} @cx-request-close=${this.handleRequestClose} @cx-asset-request-status=${this.handleAssetRequestStatus}><cx-space slot="label" direction="vertical" spacing="2x-small"><cx-typography variant="h4">${y(
638
642
  this.dialogTitle,
639
643
  () => h`<cx-line-clamp lines="1">${this.dialogTitle}</cx-line-clamp>`,
640
644
  () => h`${this.localize.term(
@@ -658,7 +662,7 @@ let l = class extends N {
658
662
  this.showTemplateTab,
659
663
  () => h`<cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel>`
660
664
  )}
661
- ${S(
665
+ ${A(
662
666
  this.tabs.filter(
663
667
  (t) => !this.showTemplateTab || t === "appearance" || t === "effects" || t === "sidePanels" || t === "styling"
664
668
  /* Styling */
@@ -679,12 +683,12 @@ let l = class extends N {
679
683
  this.templateId,
680
684
  () => h`<cx-menu-item value="detach-template"><cx-button type="submit" variant="text">${this.localize.term("detachTemplate")}</cx-button></cx-menu-item>`
681
685
  )}</cx-menu></cx-dropdown>`
682
- )}</cx-button-group></cx-space></cx-dialog><cx-confirm-popover class="config-form__confirm-popover" divider-position=${R.Both} buttons-direction=${Yt.HorizontalReverse} dialog-label=${this.localize.term("dismissChanges")} confirm-text=${this.localize.term("dismissChanges")} .boundary=${this.boundary} variant="dialog" @cx-confirm=${this.hide}><cx-typography variant="body2" slot="footer" class="confirm-popover__footer">${this.localize.term(
686
+ )}</cx-button-group></cx-space></cx-dialog><cx-confirm-popover class="config-form__confirm-popover" divider-position=${D.Both} buttons-direction=${Yt.HorizontalReverse} dialog-label=${this.localize.term("dismissChanges")} confirm-text=${this.localize.term("dismissChanges")} .boundary=${this.boundary} variant="dialog" @cx-confirm=${this.hide}><cx-typography variant="body2" slot="footer" class="confirm-popover__footer">${this.localize.term(
683
687
  "doYouWantToCloseThisDialogChangesWillBeDismissed"
684
688
  )}</cx-typography></cx-confirm-popover>`;
685
689
  }
686
690
  };
687
- l.styles = [O, Pe, et, ot];
691
+ l.styles = [M, Pe, et, ot];
688
692
  l.dependencies = {
689
693
  "cx-asset-format-picker": ft,
690
694
  "cx-asset-picker": mt,
@@ -734,7 +738,7 @@ l.dependencies = {
734
738
  "cx-textarea": Wt,
735
739
  "cx-tooltip": Kt,
736
740
  "cx-type-subtype-select": st,
737
- "cx-typography": z,
741
+ "cx-typography": N,
738
742
  "cx-visually-hidden": Ht
739
743
  };
740
744
  c([
@@ -841,7 +845,7 @@ c([
841
845
  c([
842
846
  n({
843
847
  attribute: "allowed-folders",
844
- converter: M,
848
+ converter: V,
845
849
  type: Array
846
850
  })
847
851
  ], l.prototype, "allowedFolders", 2);
@@ -864,17 +868,17 @@ c([
864
868
  k("supportedLanguages")
865
869
  ], l.prototype, "handleSupportedLanguagesChange", 1);
866
870
  l = c([
867
- V("cx-config-form")
871
+ j("cx-config-form")
868
872
  ], l);
869
- const Ie = j`:host{display:block}.confirm-popover__footer{--color:var(--cx-color-danger)}.confirm-popover__footer::part(base){margin-top:var(--cx-spacing-small);display:block}`;
873
+ const Ie = G`:host{display:block}.confirm-popover__footer{--color:var(--cx-color-danger)}.confirm-popover__footer::part(base){margin-top:var(--cx-spacing-small);display:block}`;
870
874
  var qe = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, d = (t, e, o, a) => {
871
875
  for (var i = a > 1 ? void 0 : a ? Le(e, o) : e, r = t.length - 1, s; r >= 0; r--)
872
876
  (s = t[r]) && (i = (a ? s(e, o, i) : s(i)) || i);
873
877
  return a && i && qe(e, o, i), i;
874
878
  };
875
- let p = class extends N {
879
+ let p = class extends O {
876
880
  constructor() {
877
- super(), this.localize = new _(this), this.configsController = new gt(this.localize), this.component = null, this.loading = !1, this.mode = A.Template, this.enableAssetFormatControls = !1, this.enableFontFamilyControls = !1, this.allowedFolders = [], this.adhocProperties = [], this.templateName = "", this.templateId = "", this.supportedLanguages = ["en-us"], this.defaultLanguage = "en-us", this.translatableControlValues = [], this.boundary = document.body, this.onRequestAsset = void 0, this.onRequestDownloadFormat = void 0, this.onRequestAssetFormat = void 0, this.onConfigureWorkflow = void 0, this.blockAttributes = {}, this.blockProperties = {}, this.blockStyles = {}, this.traits = [], this.blockType = "", this.blockName = "", this.name = "", this.description = "", this.tab = "", this.isEditingTemplateSettings = !1, this.translatableControlValuesMap = {}, this.translatableControls = [], this.handleSave = this.handleSave.bind(this);
881
+ super(), this.localize = new R(this), this.configsController = new gt(this.localize), this.component = null, this.loading = !1, this.mode = F.Template, this.enableAssetFormatControls = !1, this.enableFontFamilyControls = !1, this.allowedFolders = [], this.adhocProperties = [], this.templateName = "", this.templateId = "", this.supportedLanguages = ["en-us"], this.defaultLanguage = "en-us", this.translatableControlValues = [], this.boundary = document.body, this.onRequestAsset = void 0, this.onRequestDownloadFormat = void 0, this.onRequestAssetFormat = void 0, this.onConfigureWorkflow = void 0, this.blockAttributes = {}, this.blockProperties = {}, this.blockStyles = {}, this.traits = [], this.blockType = "", this.blockName = "", this.name = "", this.description = "", this.tab = "", this.isEditingTemplateSettings = !1, this.translatableControlValuesMap = {}, this.translatableControls = [], this.handleSave = this.handleSave.bind(this);
878
882
  }
879
883
  /**
880
884
  * Whether the template is editable.
@@ -884,7 +888,7 @@ let p = class extends N {
884
888
  * @default true
885
889
  */
886
890
  get isTemplateEditable() {
887
- return this.mode === A.Template;
891
+ return this.mode === F.Template;
888
892
  }
889
893
  getFlattenTraits(t, e, o = !1) {
890
894
  return t.reduce(
@@ -995,10 +999,10 @@ let p = class extends N {
995
999
  return h`<cx-config-form block-name=${this.blockName} default-language=${this.defaultLanguage} description=${this.description} name=${this.name} mode=${this.mode} template-name=${this.templateName} template-id=${this.templateId} ?enable-asset-format-controls=${this.enableAssetFormatControls} ?enable-font-family-controls=${this.enableFontFamilyControls} ?loading=${this.loading} .allowedFolders=${this.allowedFolders} .adhocProperties=${this.adhocProperties} .blockAttributes=${this.blockAttributes} .blockProperties=${this.blockProperties} .blockStyles=${this.blockStyles} .boundary=${this.boundary} .supportedLanguages=${this.supportedLanguages} .translatableControls=${this.translatableControls} .translatableControlValues=${this.translatableControlValuesMap} .traits=${this.traits} .onRequestAsset=${this.onRequestAsset} .onRequestDownloadFormat=${this.onRequestDownloadFormat} .onConfigureWorkflow=${this.onConfigureWorkflow} .onRequestAssetFormat=${this.onRequestAssetFormat} @cx-content-builder-translatable-value-change=${this.handleTranslatableValueChange} @cx-content-builder-form-change=${this.handleChange} @cx-content-builder-form-field-change=${this.handleFieldChange} @cx-content-builder-form-save=${this.handleSave}></cx-config-form>`;
996
1000
  }
997
1001
  };
998
- p.styles = [O, Ie];
1002
+ p.styles = [M, Ie];
999
1003
  p.dependencies = {
1000
1004
  "cx-config-form": l,
1001
- "cx-typography": z
1005
+ "cx-typography": N
1002
1006
  };
1003
1007
  d([
1004
1008
  $("cx-config-form")
@@ -1029,7 +1033,7 @@ d([
1029
1033
  d([
1030
1034
  n({
1031
1035
  attribute: "allowed-folders",
1032
- converter: M,
1036
+ converter: V,
1033
1037
  type: Array
1034
1038
  })
1035
1039
  ], p.prototype, "allowedFolders", 2);
@@ -1119,7 +1123,7 @@ d([
1119
1123
  k("component")
1120
1124
  ], p.prototype, "handleComponentChange", 1);
1121
1125
  p = d([
1122
- V("cx-config-manager")
1126
+ j("cx-config-manager")
1123
1127
  ], p);
1124
1128
  export {
1125
1129
  p as CxConfigManager
@@ -4,7 +4,7 @@ import { f as ot } from "./form-control.styles.CHC7Q08Q.js";
4
4
  import { c as lt } from "./custom-element.L4WJXn1j.js";
5
5
  import { d as ht } from "./default-value.COZopaet.js";
6
6
  import { F as pt } from "./form.LpappO1d.js";
7
- import { L as ct } from "./i18n.Q5_2aVLU.js";
7
+ import { L as ct } from "./i18n.BSPmBQ73.js";
8
8
  import { H as dt } from "./slot.j5oheLJC.js";
9
9
  import { w as V } from "./watch.DJF5K-8U.js";
10
10
  import { i as ft, x as E } from "./lit-element.jLBm65_O.js";
@@ -1,7 +1,7 @@
1
- import { C as jn, I as Yn } from "./icon-button.BjAbCuH8.js";
1
+ import { C as jn, I as Yn } from "./icon-button.DV5Fks8j.js";
2
2
  import { C as Un, n as me } from "./lib-cortex-element.CVMmyPMC.js";
3
3
  import { c as Gn } from "./custom-element.L4WJXn1j.js";
4
- import { L as Hn } from "./i18n.Q5_2aVLU.js";
4
+ import { L as Hn } from "./i18n.BSPmBQ73.js";
5
5
  import { w as Ne } from "./watch.DJF5K-8U.js";
6
6
  import { s as Kn } from "./string.CfI2ejyR.js";
7
7
  import { i as mt, x as Wn } from "./lit-element.jLBm65_O.js";
@@ -1,7 +1,7 @@
1
1
  import { n as r, C as L } from "./lib-cortex-element.CVMmyPMC.js";
2
2
  import { c as M } from "./component.styles.CAS3c9pM.js";
3
3
  import { c as E } from "./custom-element.L4WJXn1j.js";
4
- import { d as k, L as P } from "./i18n.Q5_2aVLU.js";
4
+ import { d as k, L as P } from "./i18n.BSPmBQ73.js";
5
5
  import { H as z, g as R } from "./slot.j5oheLJC.js";
6
6
  import { w as b } from "./watch.DJF5K-8U.js";
7
7
  import { i as D, x as h, E as S } from "./lit-element.jLBm65_O.js";
@@ -1,7 +1,7 @@
1
1
  import { n as s, C as x } from "./lib-cortex-element.CVMmyPMC.js";
2
2
  import { c as m } from "./component.styles.CAS3c9pM.js";
3
3
  import { c as v } from "./custom-element.L4WJXn1j.js";
4
- import { L as g } from "./i18n.Q5_2aVLU.js";
4
+ import { L as g } from "./i18n.BSPmBQ73.js";
5
5
  import { w as d } from "./watch.DJF5K-8U.js";
6
6
  import { i as b, x as h } from "./lit-element.jLBm65_O.js";
7
7
  import { r as f } from "./state.CSDxrqLd.js";
@@ -1,8 +1,8 @@
1
1
  import d from "../components/space.js";
2
2
  import { n as o, C as _ } from "./lib-cortex-element.CVMmyPMC.js";
3
- import { C as P, I as z } from "./icon-button.BjAbCuH8.js";
3
+ import { C as P, I as z } from "./icon-button.DV5Fks8j.js";
4
4
  import { c as y } from "./custom-element.L4WJXn1j.js";
5
- import { L as f } from "./i18n.Q5_2aVLU.js";
5
+ import { L as f } from "./i18n.BSPmBQ73.js";
6
6
  import { c as m } from "./math.DuKzLacZ.js";
7
7
  import { w as b } from "./watch.DJF5K-8U.js";
8
8
  import { i as C, x as s } from "./lit-element.jLBm65_O.js";
@@ -10,9 +10,9 @@ import { r as S } from "./state.CSDxrqLd.js";
10
10
  import { e as $ } from "./class-map.BiVq-cVR.js";
11
11
  import { c as x } from "./repeat.CFjcER6_.js";
12
12
  import { n as c } from "./when.Dr1es41R.js";
13
- import { C as w } from "./button.DbAUlIXG.js";
14
- import { C as v } from "./input.ftEf4GS6.js";
15
- import { C as I } from "./option.C8IEnv5Q.js";
13
+ import { C as w } from "./button.cbDkxJHn.js";
14
+ import { C as v } from "./input.7pumTpdu.js";
15
+ import { C as I } from "./option.dBUWN4sF.js";
16
16
  import B from "../components/select.js";
17
17
  import N from "../components/tooltip.js";
18
18
  import { C as k } from "./typography.BLYdTF0n.js";
@@ -274,8 +274,8 @@ const E = L`.resizer{background-color:var(--cx-color-primary);z-index:100;width:
274
274
  export {
275
275
  B as H,
276
276
  u as R,
277
- p as a,
278
- b,
277
+ b as a,
278
+ p as b,
279
279
  k as c,
280
280
  n as d,
281
281
  H as e,
@@ -2,7 +2,7 @@ import zn from "../components/resize-observer.js";
2
2
  import { n as wt, C as Bn } from "./lib-cortex-element.CVMmyPMC.js";
3
3
  import { c as Fn } from "./component.styles.CAS3c9pM.js";
4
4
  import { c as Nn } from "./custom-element.L4WJXn1j.js";
5
- import { L as Ln } from "./i18n.Q5_2aVLU.js";
5
+ import { L as Ln } from "./i18n.BSPmBQ73.js";
6
6
  import { s as Zi } from "./scroll.xtO5yojm.js";
7
7
  import { w as ft } from "./watch.DJF5K-8U.js";
8
8
  import { i as $n } from "./dom.D0lSUoEI.js";
@@ -17,11 +17,11 @@ import { i as Ji } from "./guard.D4axKaMo.js";
17
17
  import { o as tr } from "./map.D8heArFD.js";
18
18
  import { o as Ve } from "./style-map.llVFPd__.js";
19
19
  import { n as Pe } from "./when.Dr1es41R.js";
20
- import { C as Yn } from "./button.DbAUlIXG.js";
20
+ import { C as Yn } from "./button.cbDkxJHn.js";
21
21
  import Xn from "../components/dropdown.js";
22
- import { C as qn } from "./icon-button.BjAbCuH8.js";
22
+ import { C as qn } from "./icon-button.DV5Fks8j.js";
23
23
  import Gn from "../components/menu.js";
24
- import { C as Kn } from "./menu-item.BNs1Ji48.js";
24
+ import { C as Kn } from "./menu-item.CqPvDGeN.js";
25
25
  import jn from "../components/tab.js";
26
26
  var bi = /* @__PURE__ */ ((o) => (o.Bottom = "bottom", o.End = "end", o.Start = "start", o.Top = "top", o))(bi || {}), Ke = /* @__PURE__ */ ((o) => (o.Center = "center", o.End = "flex-end", o.Start = "flex-start", o))(Ke || {}), wr = /* @__PURE__ */ ((o) => (o.Auto = "auto", o.Manual = "manual", o))(wr || {}), ue = /* @__PURE__ */ ((o) => (o.Button = "button", o.Default = "default", o.Timeline = "timeline", o))(ue || {}), Tt = /* @__PURE__ */ ((o) => (o.Dropdown = "dropdown", o.Pagination = "pagination", o.Scroll = "scroll", o))(Tt || {}), Ut = /* @__PURE__ */ ((o) => (o.Absolute = "absolute", o.DisplayNone = "display-none", o))(Ut || {});
27
27
  function Dt(o) {
@@ -1,7 +1,7 @@
1
1
  import { C as F, n as l } from "./lib-cortex-element.CVMmyPMC.js";
2
2
  import { c as O } from "./component.styles.CAS3c9pM.js";
3
3
  import { c as U } from "./custom-element.L4WJXn1j.js";
4
- import { L as N } from "./i18n.Q5_2aVLU.js";
4
+ import { L as N } from "./i18n.BSPmBQ73.js";
5
5
  import { c as j } from "./math.DuKzLacZ.js";
6
6
  import { w as b } from "./watch.DJF5K-8U.js";
7
7
  import { i as R, x as m, E } from "./lit-element.jLBm65_O.js";