@orangelogic/design-system 2.124.0 → 2.126.0

package/library/chunks/{list-editor.DOob19sH.js → list-editor.CyHNKjuZ.js}

@@ -1,5 +1,5 @@
 import { C as k } from "./button.DcInI7IV.js";
-import { C as R, D as j } from "./dialog.BlKHLwFx.js";
+import { C as G, D as R } from "./dialog.BlKHLwFx.js";
 import B from "../components/grid.js";
 import F from "../components/grid-item.js";
 import { C as E } from "./input.BRgVRr2i.js";
@@ -11,7 +11,7 @@ import V from "../components/select.js";
 import T from "../components/space.js";
 import { C as W, H as J } from "./table.CipCH4U5.js";
 import { C as L } from "./typography.DJC_UXgs.js";
-import { n as o, C as D } from "./lib-cortex-element.CVMmyPMC.js";
+import { n as r, C as D } from "./lib-cortex-element.CVMmyPMC.js";
 import X from "../components/dynamic-select.js";
 import { c as M } from "./component.styles.CRO4Odto.js";
 import { c as z } from "./custom-element.L4WJXn1j.js";
@@ -19,14 +19,14 @@ import { d as Y } from "./debounce.DaHuiSGU.js";
 import { L as O } from "./i18n.NAH4U8Lw.js";
 import { w as v } from "./watch.CThbualB.js";
 import { a as Z } from "./_commonjsHelpers.DQNKXVTB.js";
-import { i as q, x as l } from "./lit-element.jLBm65_O.js";
-import { r as N } from "./state.CSDxrqLd.js";
+import { i as j, x as l } from "./lit-element.jLBm65_O.js";
+import { r as b } from "./state.CSDxrqLd.js";
 import { e as y } from "./query.BBf1UFkC.js";
 import { r as Q } from "./choose.BTbF6BAn.js";
 import { e as ee } from "./class-map.BiVq-cVR.js";
 import { o as te } from "./map.D8heArFD.js";
 import { c as x } from "./repeat.DbF2p5ae.js";
-import { n as b } from "./when.Dr1es41R.js";
+import { n as N } from "./when.Dr1es41R.js";
 import { t as ae } from "./toString.CAY8lys2.js";
 import { C as ie } from "./icon-button.COTH_z-J.js";
 import { C as ne } from "./image.CDrKFe1H.js";
@@ -776,10 +776,10 @@ var A, S;
 function ce() {
   if (S) return A;
   S = 1;
-  const e = me(), t = {}, a = {}, i = [], s = [], p = [];
+  const e = me(), t = {}, a = {}, i = [], s = [], u = [];
   for (const d in e) {
     const { name: m, nativeName: h } = e[d];
-    t[d] = a[m.toLowerCase()] = a[h.toLowerCase()] = { code: d, name: m, nativeName: h }, i.push(d), s.push(m), p.push(h);
+    t[d] = a[m.toLowerCase()] = a[h.toLowerCase()] = { code: d, name: m, nativeName: h }, i.push(d), s.push(m), u.push(h);
   }
   return A = class f {
     static getLanguages(m = []) {
@@ -797,7 +797,7 @@ function ce() {
       return f.validate(m) ? e[m].nativeName : "";
     }
     static getAllNativeNames() {
-      return p.slice();
+      return u.slice();
     }
     static getCode(m) {
       return m = m.toLowerCase(), a.hasOwnProperty(m) ? a[m].code : "";
@@ -817,15 +817,15 @@ function he(e) {
   var t = ++ue;
   return ae(e) + t;
 }
-const ve = q`:host{isolation:isolate}.asset-picker__input[data-user-invalid]~.asset-picker__trigger-wrapper .asset-picker__button::part(base){border-color:var(--cx-input-invalid-border-color)}.asset-picker__input[data-user-invalid]:focus-within~.asset-picker__trigger-wrapper .asset-picker__button::part(base){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.asset-picker__button-container{position:relative}.asset-picker__trigger-wrapper{z-index:1;position:relative}.asset-picker__image{--height:150px;--width:200px;--border-radius:var(--cx-border-radius-medium)}.asset-picker__input{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}`;
-var ge = Object.defineProperty, be = Object.getOwnPropertyDescriptor, u = (e, t, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? be(t, a) : t, p = e.length - 1, d; p >= 0; p--)
-    (d = e[p]) && (s = (i ? d(t, a, s) : d(s)) || s);
+const ve = j`:host{isolation:isolate}.asset-picker__input[data-user-invalid]~.asset-picker__trigger-wrapper .asset-picker__button::part(base){border-color:var(--cx-input-invalid-border-color)}.asset-picker__input[data-user-invalid]:focus-within~.asset-picker__trigger-wrapper .asset-picker__button::part(base){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.asset-picker__button-container{position:relative}.asset-picker__trigger-wrapper{z-index:1;position:relative}.asset-picker__image{--height:150px;--width:200px;--border-radius:var(--cx-border-radius-medium)}.asset-picker__input{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}`;
+var ge = Object.defineProperty, be = Object.getOwnPropertyDescriptor, p = (e, t, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? be(t, a) : t, u = e.length - 1, d; u >= 0; u--)
+    (d = e[u]) && (s = (i ? d(t, a, s) : d(s)) || s);
   return i && s && ge(t, a, s), s;
 };
 let c = class extends D {
   constructor() {
-    super(...arguments), this.localize = new O(this), this.value = "", this.name = "", this.type = [g.Image], this.multiple = !1, this.accepts = [], this.required = !1, this.disabled = !1, this.onRequestAsset = void 0, this.recordId = "", this.isSiteBuilder = !1, this.previewSrc = "", this.apiGetAssets = se;
+    super(...arguments), this.localize = new O(this), this.value = "", this.name = "", this.type = [g.Image], this.multiple = !1, this.accepts = [], this.required = !1, this.disabled = !1, this.restrict = !1, this.onRequestAsset = void 0, this.recordId = "", this.isSiteBuilder = !1, this.previewSrc = "", this.assetTitle = "", this.apiGetAssets = se;
   }
   async handleRequestAssetClick() {
     if (this.onRequestAsset)
@@ -838,7 +838,8 @@ let c = class extends D {
         const e = await this.onRequestAsset(
           this.type.join(" "),
           this.multiple,
-          this.accepts
+          this.accepts,
+          this.restrict ? this.type.join(" ") : void 0
         );
         if (this.accepts.length > 0 && Object.values(e).some(
           (a) => !this.accepts.includes(oe(a.src) ?? "")
@@ -852,17 +853,17 @@ let c = class extends D {
             detail: a
           });
         } else {
-          const { extension: a, id: i, identifier: s, name: p, parentAssetID: d, representative: m, src: h, type: G } = e;
+          const { extension: a, id: i, identifier: s, name: u, parentAssetID: d, representative: m, src: h, type: q } = e;
           this.emit("cx-content-builder-asset-select", {
             detail: {
               extension: a,
               id: i,
               identifier: s,
-              name: p,
+              name: u,
               parentAssetID: d,
               representative: m,
               src: h,
-              type: G
+              type: q
             }
           });
         }
@@ -882,7 +883,7 @@ let c = class extends D {
   }
   async handleRecordIdChange() {
     if (!this.recordId) {
-      this.previewSrc = "";
+      this.previewSrc = "", this.assetTitle = "";
       return;
     }
     try {
@@ -892,9 +893,9 @@ let c = class extends D {
         isSiteBuilder: this.isSiteBuilder,
         recordIds: [this.recordId]
       })).items[0];
-      this.previewSrc = t?.path_TR1 || t?.originalUrl || "", this.name = t?.[I] || t?.[w] || "";
+      this.previewSrc = t?.path_TR1 || t?.originalUrl || "", this.assetTitle = t?.[I] || t?.[w] || "";
     } catch {
-      this.previewSrc = "";
+      this.previewSrc = "", this.assetTitle = "";
     }
   }
   handleDeleteClick() {
@@ -906,13 +907,13 @@ let c = class extends D {
   }
   renderAssetPreview() {
     if ((this.previewSrc || this.value) && this.acceptsType(g.Image))
-      return l`<cx-image part="image" class="asset-picker__image" src=${this.previewSrc || this.value} alt=${this.name} width="200px" object-fit=${re.Cover}></cx-image>`;
-    if (this.name && this.acceptsType(g.Audio) || this.acceptsType(g.Video))
-      return l`<cx-typography variant="body-2">${$(this.name, 30, 11, 11)}</cx-typography>`;
-    if (this.name && (this.acceptsType(g.Other) || this.acceptsType(g.All))) {
-      const e = this.name.split(",");
+      return l`<cx-image part="image" class="asset-picker__image" src=${this.previewSrc || this.value} alt=${this.assetTitle} width="200px" object-fit=${re.Cover}></cx-image>`;
+    if (this.assetTitle && (this.acceptsType(g.Audio) || this.acceptsType(g.Video)))
+      return l`<cx-typography variant="body-2">${$(this.assetTitle, 30, 11, 11)}</cx-typography>`;
+    if (this.assetTitle && (this.acceptsType(g.Other) || this.acceptsType(g.All))) {
+      const e = this.assetTitle.split(",");
       return l`<cx-typography variant="body-2">${$(e[0], 30, 11, 11)}
-        ${b(
+        ${N(
         e.length > 1,
         () => l` ${this.localize.term("andOthers", e.length - 1)}`
       )}</cx-typography>`;
@@ -921,9 +922,9 @@ let c = class extends D {
   }
   render() {
     return l`<cx-space part="base" class="asset-picker" spacing="2x-small" direction="horizontal" align-items=${this.acceptsType(g.Image) ? "flex-start" : "center"}>${this.renderAssetPreview()}
-        ${b(
+        ${N(
       !this.disabled,
-      () => l`<div part="button-container" class="asset-picker__button-container"><cx-input class="asset-picker__input" aria-label=${this.localize.term("choose")} name=${this.name} value=${this.value} ?required=${this.required} .form=${this.closest("form")}></cx-input><div class="asset-picker__trigger-wrapper"><slot name="trigger" @click=${this.handleRequestAssetClick}><cx-button part="button" class="asset-picker__button">${this.localize.term("choose")}</cx-button></slot></div></div>${b(
+      () => l`<div part="button-container" class="asset-picker__button-container"><cx-input class="asset-picker__input" aria-label=${this.localize.term("choose")} name=${this.name} value=${this.value} ?required=${this.required} .form=${this.closest("form")}></cx-input><div class="asset-picker__trigger-wrapper"><slot name="trigger" @click=${this.handleRequestAssetClick}><cx-button part="button" class="asset-picker__button">${this.localize.term("choose")}</cx-button></slot></div></div>${N(
         this.value,
         () => l`<cx-icon-button label=${this.localize.term("delete")} name="delete" @click=${this.handleDeleteClick}></cx-icon-button>`
       )}
@@ -940,20 +941,20 @@ c.dependencies = {
   "cx-space": T,
   "cx-typography": L
 };
-u([
+p([
   y(".asset-picker__button")
 ], c.prototype, "buttonEl", 2);
-u([
+p([
   y(".asset-picker__input")
 ], c.prototype, "inputEl", 2);
-u([
-  o({ reflect: !0, type: String })
+p([
+  r({ reflect: !0, type: String })
 ], c.prototype, "value", 2);
-u([
-  o({ reflect: !0, type: String })
+p([
+  r({ reflect: !0, type: String })
 ], c.prototype, "name", 2);
-u([
-  o({
+p([
+  r({
     converter: {
       fromAttribute: (e) => (e ?? "").split(" ").filter((t) => t !== ""),
       toAttribute: (e) => e.join(" ")
@@ -961,11 +962,11 @@ u([
     reflect: !0
   })
 ], c.prototype, "type", 2);
-u([
-  o({ reflect: !0, type: Boolean })
+p([
+  r({ reflect: !0, type: Boolean })
 ], c.prototype, "multiple", 2);
-u([
-  o({
+p([
+  r({
     converter: {
       fromAttribute: (e) => (e ?? "").split(" ").filter((t) => t !== ""),
       toAttribute: (e) => e.join(" ")
@@ -973,37 +974,43 @@ u([
     reflect: !0
   })
 ], c.prototype, "accepts", 2);
-u([
-  o({ reflect: !0, type: Boolean })
+p([
+  r({ reflect: !0, type: Boolean })
 ], c.prototype, "required", 2);
-u([
-  o({ attribute: "disabled", reflect: !0, type: Boolean })
+p([
+  r({ attribute: "disabled", reflect: !0, type: Boolean })
 ], c.prototype, "disabled", 2);
-u([
-  o({ attribute: "on-request-asset", type: Function })
+p([
+  r({ attribute: "restrict", reflect: !0, type: Boolean })
+], c.prototype, "restrict", 2);
+p([
+  r({ attribute: "on-request-asset", type: Function })
 ], c.prototype, "onRequestAsset", 2);
-u([
-  o({ attribute: "record-id", reflect: !0, type: String })
+p([
+  r({ attribute: "record-id", reflect: !0, type: String })
 ], c.prototype, "recordId", 2);
-u([
-  o({ attribute: "is-site-builder", reflect: !0, type: Boolean })
+p([
+  r({ attribute: "is-site-builder", reflect: !0, type: Boolean })
 ], c.prototype, "isSiteBuilder", 2);
-u([
-  N()
+p([
+  b()
 ], c.prototype, "previewSrc", 2);
-u([
+p([
+  b()
+], c.prototype, "assetTitle", 2);
+p([
   v("value")
 ], c.prototype, "handleValueChange", 1);
-u([
+p([
   v("recordId")
 ], c.prototype, "handleRecordIdChange", 1);
-c = u([
+c = p([
   z("cx-asset-picker")
 ], c);
-const Ne = q`:host{--overridden-min-height:var(--min-height,160px);--overridden-max-height:var(--max-height,260px);width:100%;display:block}.list-editor{width:100%}.list-editor__table{--cell-border-color:transparent;--cell-bottom-border-color:transparent;--header-font-size:var(--cx-font-size-small);--row-header-border-color:transparent;--cell-horizontal-padding:var(--cx-spacing-2x-small);--table-min-height:var(--overridden-min-height);--table-max-height:var(--overridden-max-height)}.list-editor__table--no-header{--cell-hover-background-color:transparent}.list-editor__item::part(expand-button){display:none}.list-editor__item__text{--line-height:1}.list-editor__item__text__description{color:var(--cx-color-neutral-600)}.list-editor__dialog{--body-spacing:0;--header-spacing:var(--cx-spacing-small) var(--cx-spacing-large) 0;--width:540px}.list-editor__tab-group{--padding:0;--tab-group-nav-padding:0 var(--cx-spacing-large)}`;
-var xe = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, r = (e, t, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? fe(t, a) : t, p = e.length - 1, d; p >= 0; p--)
-    (d = e[p]) && (s = (i ? d(t, a, s) : d(s)) || s);
+const Ne = j`:host{--overridden-min-height:var(--min-height,160px);--overridden-max-height:var(--max-height,260px);width:100%;display:block}.list-editor{width:100%}.list-editor__table{--cell-border-color:transparent;--cell-bottom-border-color:transparent;--header-font-size:var(--cx-font-size-small);--row-header-border-color:transparent;--cell-horizontal-padding:var(--cx-spacing-2x-small);--table-min-height:var(--overridden-min-height);--table-max-height:var(--overridden-max-height)}.list-editor__table--no-header{--cell-hover-background-color:transparent}.list-editor__item::part(expand-button){display:none}.list-editor__item__text{--line-height:1}.list-editor__item__text__description{color:var(--cx-color-neutral-600)}.list-editor__dialog{--body-spacing:0;--header-spacing:var(--cx-spacing-small) var(--cx-spacing-large) 0;--width:540px}.list-editor__tab-group{--padding:0;--tab-group-nav-padding:0 var(--cx-spacing-large)}`;
+var xe = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, o = (e, t, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? fe(t, a) : t, u = e.length - 1, d; u >= 0; u--)
+    (d = e[u]) && (s = (i ? d(t, a, s) : d(s)) || s);
   return i && s && xe(t, a, s), s;
 };
 const ye = {
@@ -1160,14 +1167,14 @@ let n = class extends D {
         this.translatableControls,
         (a) => a.field,
         (a) => l`<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">${a.title}</cx-typography></cx-grid-item><cx-grid-item xs="4" sm="3"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${te(this.supportedLanguages, (i) => {
-          const s = this.localize.languageName(i) || pe.getName(i) || i, p = (d) => {
+          const s = this.localize.languageName(i) || pe.getName(i) || i, u = (d) => {
             const m = d.target.value;
             this.editedItem = {
               ...this.editedItem,
               [`${a.field}-${i}`]: m
             };
           };
-          return l`<cx-input ?disabled=${i.toLowerCase() === this.defaultLanguage?.toLowerCase()} label=${s} value=${this.editedItem?.[`${a.field}-${i}`] ?? this.editedItem?.[`${a.field}`] ?? ""} @cx-change=${p}></cx-input>`;
+          return l`<cx-input ?disabled=${i.toLowerCase() === this.defaultLanguage?.toLowerCase()} label=${s} value=${this.editedItem?.[`${a.field}-${i}`] ?? this.editedItem?.[`${a.field}`] ?? ""} @cx-change=${u}></cx-input>`;
         })}</cx-space></cx-grid-item></cx-grid>`
       )}
       `;
@@ -1182,10 +1189,10 @@ let n = class extends D {
           [
             "image-picker",
             () => {
-              const i = async (p) => {
-                if (Array.isArray(p.detail))
+              const i = async (u) => {
+                if (Array.isArray(u.detail))
                   return;
-                const { id: d, src: m } = p.detail;
+                const { id: d, src: m } = u.detail;
                 this.editedItem = {
                   ...this.editedItem,
                   [t]: m,
@@ -1226,10 +1233,10 @@ let n = class extends D {
     return l`<cx-space direction="vertical" align-items="flex-start"><div class="list-editor"><cx-table part="table" class=${ee({
       "list-editor__table": !0,
       "list-editor__table--no-header": this.noHeader
-    })} ?movable-rows=${this.sortable} ?no-header=${this.noHeader} layout="fitColumns" row-height=${this.rowHeight} .columns=${this.columns} .columnDefaults=${ye} .hoverMenu=${this.hoverMenu} .data=${this.data ?? []} no-selectable @cx-table.rowMoved=${this.handleTableRowMoved} @cx-table-row-action-click=${this.handleTableActions}></cx-table><cx-dialog part="dialog" class="list-editor__dialog" divider-position=${j.Footer} use-overlay-scrollbar strategy="fixed" ?open=${!!this.editedItem} .boundary=${this.boundary} @cx-request-close=${this.handleRequestClose}><cx-space slot="label" direction="vertical" spacing="2x-small"><cx-typography variant="h4">${this.isAdding ? this.addDialogLabel : this.editDialogLabel}</cx-typography>${b(
+    })} ?movable-rows=${this.sortable} ?no-header=${this.noHeader} layout="fitColumns" row-height=${this.rowHeight} .columns=${this.columns} .columnDefaults=${ye} .hoverMenu=${this.hoverMenu} .data=${this.data ?? []} no-selectable @cx-table.rowMoved=${this.handleTableRowMoved} @cx-table-row-action-click=${this.handleTableActions}></cx-table><cx-dialog part="dialog" class="list-editor__dialog" divider-position=${R.Footer} use-overlay-scrollbar strategy="fixed" ?open=${!!this.editedItem} .boundary=${this.boundary} @cx-request-close=${this.handleRequestClose}><cx-space slot="label" direction="vertical" spacing="2x-small"><cx-typography variant="h4">${this.isAdding ? this.addDialogLabel : this.editDialogLabel}</cx-typography>${N(
       !this.isAdding && this.editedItem?.[this.displayField],
       () => l`<cx-typography variant="body3"><cx-line-clamp lines="1">${this.editedItem?.[this.displayField]}</cx-line-clamp></cx-typography>`
-    )}</cx-space>${b(
+    )}</cx-space>${N(
       this.tabs.length >= 1,
       () => l`<cx-tab-group class="list-editor__tab-group" placement="top">${x(
         this.tabs,
@@ -1237,7 +1244,7 @@ let n = class extends D {
         (e) => l`<cx-tab slot="nav" panel=${e}>${this.localize.term(e)}</cx-tab><cx-tab-panel name=${e}><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderControls(e)}</cx-space></cx-tab-panel>`
       )}</cx-tab-group>`,
       () => l`<cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderControls(this.tabs[0])}</cx-space>`
-    )}<cx-space slot="footer" spacing="x-small" wrap="nowrap" justify-content="end"><cx-button data-testid="cancel-button" variant="default" size="medium" @click=${this.handleCancelClick}>${this.localize.term("cancel")}</cx-button><cx-button data-testid="save-button" variant="primary" size="medium" @click=${this.handleSaveClick}>${this.localize.term("save")}</cx-button></cx-space></cx-dialog></div>${b(
+    )}<cx-space slot="footer" spacing="x-small" wrap="nowrap" justify-content="end"><cx-button data-testid="cancel-button" variant="default" size="medium" @click=${this.handleCancelClick}>${this.localize.term("cancel")}</cx-button><cx-button data-testid="save-button" variant="primary" size="medium" @click=${this.handleSaveClick}>${this.localize.term("save")}</cx-button></cx-space></cx-dialog></div>${N(
       this.canAdd,
       () => l`<cx-button data-testid="add-button" variant="default" size="medium" @click=${this.handleAddClick}>${this.addItemText || this.localize.term("add")}</cx-button>`
     )}</cx-space>`;
@@ -1247,7 +1254,7 @@ n.styles = [M, Ne];
 n.dependencies = {
   "cx-asset-picker": c,
   "cx-button": k,
-  "cx-dialog": R,
+  "cx-dialog": G,
   "cx-dynamic-select": X,
   "cx-grid": B,
   "cx-grid-item": F,
@@ -1261,14 +1268,14 @@ n.dependencies = {
   "cx-table": W,
   "cx-typography": L
 };
-r([
+o([
   y("cx-dialog")
 ], n.prototype, "dialog", 2);
-r([
+o([
   y("cx-table")
 ], n.prototype, "table", 2);
-r([
-  o({
+o([
+  r({
     converter: {
       fromAttribute: (e) => {
         try {
@@ -1284,53 +1291,53 @@ r([
     type: String
   })
 ], n.prototype, "data", 2);
-r([
-  o({ attribute: "can-add", reflect: !0, type: Boolean })
+o([
+  r({ attribute: "can-add", reflect: !0, type: Boolean })
 ], n.prototype, "canAdd", 2);
-r([
-  o({ attribute: "add-dialog-label", reflect: !0, type: String })
+o([
+  r({ attribute: "add-dialog-label", reflect: !0, type: String })
 ], n.prototype, "addDialogLabel", 2);
-r([
-  o({ attribute: "edit-dialog-label", reflect: !0, type: String })
+o([
+  r({ attribute: "edit-dialog-label", reflect: !0, type: String })
 ], n.prototype, "editDialogLabel", 2);
-r([
-  o({ attribute: "display-field", reflect: !0, type: String })
+o([
+  r({ attribute: "display-field", reflect: !0, type: String })
 ], n.prototype, "displayField", 2);
-r([
-  o({ attribute: "description-field", reflect: !0, type: String })
+o([
+  r({ attribute: "description-field", reflect: !0, type: String })
 ], n.prototype, "descriptionField", 2);
-r([
-  o({ attribute: "add-item-text", reflect: !0, type: String })
+o([
+  r({ attribute: "add-item-text", reflect: !0, type: String })
 ], n.prototype, "addItemText", 2);
-r([
-  o({ attribute: "sample-item", type: Object })
+o([
+  r({ attribute: "sample-item", type: Object })
 ], n.prototype, "sampleItem", 2);
-r([
-  o({ attribute: "use-events", reflect: !0, type: Boolean })
+o([
+  r({ attribute: "use-events", reflect: !0, type: Boolean })
 ], n.prototype, "useEvents", 2);
-r([
-  o({ reflect: !0, type: Boolean })
+o([
+  r({ reflect: !0, type: Boolean })
 ], n.prototype, "sortable", 2);
-r([
-  o({ attribute: "loading-event", reflect: !0, type: String })
+o([
+  r({ attribute: "loading-event", reflect: !0, type: String })
 ], n.prototype, "loadingEvent", 2);
-r([
-  o({ attribute: "loading-item-index", reflect: !0, type: String })
+o([
+  r({ attribute: "loading-item-index", reflect: !0, type: String })
 ], n.prototype, "loadingItemIndex", 2);
-r([
-  o({ attribute: "columns", reflect: !1, type: Array })
+o([
+  r({ attribute: "columns", reflect: !1, type: Array })
 ], n.prototype, "columns", 2);
-r([
-  o({ attribute: "no-header", reflect: !0, type: Boolean })
+o([
+  r({ attribute: "no-header", reflect: !0, type: Boolean })
 ], n.prototype, "noHeader", 2);
-r([
-  o({ attribute: "row-height", reflect: !0, type: Number })
+o([
+  r({ attribute: "row-height", reflect: !0, type: Number })
 ], n.prototype, "rowHeight", 2);
-r([
-  o({ attribute: "default-language", reflect: !0, type: String })
+o([
+  r({ attribute: "default-language", reflect: !0, type: String })
 ], n.prototype, "defaultLanguage", 2);
-r([
-  o({
+o([
+  r({
     attribute: "supported-languages",
     converter: {
       fromAttribute: (e) => e.split(" ").filter(Boolean),
@@ -1340,41 +1347,41 @@ r([
     type: Array
   })
 ], n.prototype, "supportedLanguages", 2);
-r([
-  o({ type: Object })
+o([
+  r({ type: Object })
 ], n.prototype, "boundary", 2);
-r([
-  o({ attribute: "on-request-asset", type: Function })
+o([
+  r({ attribute: "on-request-asset", type: Function })
 ], n.prototype, "onRequestAsset", 2);
-r([
-  N()
+o([
+  b()
 ], n.prototype, "editedItem", 2);
-r([
-  N()
+o([
+  b()
 ], n.prototype, "isAdding", 2);
-r([
-  N()
+o([
+  b()
 ], n.prototype, "columnsMap", 2);
-r([
-  N()
+o([
+  b()
 ], n.prototype, "sortedEntries", 2);
-r([
-  N()
+o([
+  b()
 ], n.prototype, "translatableControls", 2);
-r([
+o([
   v("columns"),
   v("supportedLanguages", { waitUntilFirstUpdate: !0 })
 ], n.prototype, "handleColumnsChange", 1);
-r([
+o([
   v("editedItem"),
   v("columns", { waitUntilFirstUpdate: !0 })
 ], n.prototype, "handleEditedItemChange", 1);
-r([
+o([
   v("loadingEvent", { waitUntilFirstUpdate: !0 }),
   v("loadingItemIndex", { waitUntilFirstUpdate: !0 }),
   Y(10)
 ], n.prototype, "handleLoadingEventChange", 1);
-n = r([
+n = o([
   z("cx-list-editor")
 ], n);
 export {

package/library/components/atoms.js

@@ -33,7 +33,7 @@ import { default as Te } from "./format-number.js";
 import { default as De } from "./format-time.js";
 import { default as Be } from "./grid.js";
 import { default as he } from "./grid-item.js";
-import { C as Pe } from "../chunks/header.BrmqvtqC.js";
+import { C as Pe } from "../chunks/header.WRWyUU36.js";
 import { C as Me } from "../chunks/hub-connection.Dri0ZNfh.js";
 import { f } from "../chunks/icon.DnBh6-56.js";
 import { C as Fe } from "../chunks/icon.DnBh6-56.js";

package/library/components/header.js

@@ -1,7 +1,7 @@
 import "./copy-button.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as x } from "../chunks/header.BrmqvtqC.js";
+import { C as x } from "../chunks/header.WRWyUU36.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.NAH4U8Lw.js";
 import "../chunks/watch.CThbualB.js";

package/library/components/list-editor.js

@@ -18,7 +18,7 @@ import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";
 import "../chunks/i18n.NAH4U8Lw.js";
 import "../chunks/watch.CThbualB.js";
-import { c as E, C as F } from "../chunks/list-editor.DOob19sH.js";
+import { c as E, C as F } from "../chunks/list-editor.CyHNKjuZ.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/molecules.js

@@ -6,7 +6,7 @@ import { default as s } from "./corner-position-input-group.js";
 import { default as m } from "./cropper.js";
 import { default as i } from "./dynamic-select.js";
 import { C as c } from "../chunks/folder-select.CDFQfcrG.js";
-import { C as P } from "../chunks/list-editor.DOob19sH.js";
+import { C as P } from "../chunks/list-editor.CyHNKjuZ.js";
 import { default as I } from "./masonry.js";
 import { default as y } from "./padding-input-group.js";
 import { default as w } from "./position-picker.js";

package/library/components/types.js

@@ -34,7 +34,7 @@ import qY from "./format-number.js";
 import iR from "./format-time.js";
 import lh from "./grid.js";
 import ch from "./grid-item.js";
-import { C as rR, V as WY, A as GY } from "../chunks/header.BrmqvtqC.js";
+import { C as rR, V as WY, A as GY } from "../chunks/header.WRWyUU36.js";
 import { H as KY, a as YY } from "../chunks/hub-connection.Dri0ZNfh.js";
 import { C as xGt } from "../chunks/hub-connection.Dri0ZNfh.js";
 import { C as In } from "../chunks/icon.DnBh6-56.js";
@@ -120,7 +120,7 @@ import { a as C0, e as zX, f as _R, g as jX, h as K1, i as Y1, j as X1, k as J1,
 import { H as B_ } from "../chunks/slot.j5oheLJC.js";
 import { a as JKt, g as ZKt } from "../chunks/slot.j5oheLJC.js";
 import { c as Mn, d as qX, H as Oi, e as ca, f as Wa, a as WX, b as Ur } from "../chunks/resizable-component.styles.DpK0TTP5.js";
-import { a as h5, C as CR, u as ju, I as SR } from "../chunks/list-editor.DOob19sH.js";
+import { a as h5, C as CR, u as ju, I as SR } from "../chunks/list-editor.CyHNKjuZ.js";
 import TR from "./bicolor-picker.js";
 import ER from "./border-input-group.js";
 import { C as eYt } from "../chunks/color-swatch.U-wztpLf.js";
@@ -92343,6 +92343,7 @@ const LOt = {
   "--transition-transform-duration"
 ], DT = { configs: VOt, defaultValue: $Ot, stylable: UOt }, qOt = {
   alignment: GY.Left,
+  "custom-line-height": !0,
   "data-constraints": !1,
   "disabled-copy-button": !0,
   "font-size": "28px",
@@ -113650,7 +113651,7 @@ class Z7t {
                 src: ""
               });
             }, u = l.pickerConfigs?.recordIdKey ?? "record-id";
-            return $`<cx-asset-picker is-site-builder record-id=${Hi(r ? e[u] : void 0)} value=${r} type="image" ?disabled=${n ?? !1} @cx-content-builder-asset-select=${c} @cx-content-builder-asset-delete=${d} .onRequestAsset=${this.host.onRequestAsset}>${s}</cx-asset-picker>`;
+            return $`<cx-asset-picker is-site-builder record-id=${Hi(r ? e[u] : void 0)} value=${r} type="image" restrict ?disabled=${n ?? !1} @cx-content-builder-asset-select=${c} @cx-content-builder-asset-delete=${d} .onRequestAsset=${this.host.onRequestAsset}>${s}</cx-asset-picker>`;
           }
         ],
         [
@@ -113878,7 +113879,7 @@ class Z7t {
                 src: ""
               });
             }, u = l.pickerConfigs?.recordIdKey ?? "record-id", h = l.pickerConfigs?.nameKey ?? "name";
-            return $`<cx-asset-picker is-site-builder record-id=${Hi(r ? e[u] : void 0)} name=${e[h] ?? ""} value=${r} type="audio" ?disabled=${n ?? !1} @cx-content-builder-asset-select=${c} @cx-content-builder-asset-delete=${d} .onRequestAsset=${this.host.onRequestAsset}>${s}</cx-asset-picker>`;
+            return $`<cx-asset-picker is-site-builder record-id=${Hi(r ? e[u] : void 0)} name=${e[h] ?? ""} value=${r} type="audio" restrict ?disabled=${n ?? !1} @cx-content-builder-asset-select=${c} @cx-content-builder-asset-delete=${d} .onRequestAsset=${this.host.onRequestAsset}>${s}</cx-asset-picker>`;
           }
         ],
         [
@@ -113899,7 +113900,7 @@ class Z7t {
                 src: ""
               });
             }, u = l.pickerConfigs?.recordIdKey ?? "record-id", h = l.pickerConfigs?.nameKey ?? "name";
-            return $`<cx-asset-picker is-site-builder record-id=${Hi(r ? e[u] : void 0)} name=${e[h] ?? ""} value=${r} type="video" ?disabled=${n ?? !1} @cx-content-builder-asset-select=${c} @cx-content-builder-asset-delete=${d} .onRequestAsset=${this.host.onRequestAsset}>${s}</cx-asset-picker>`;
+            return $`<cx-asset-picker is-site-builder record-id=${Hi(r ? e[u] : void 0)} name=${e[h] ?? ""} value=${r} type="video" restrict ?disabled=${n ?? !1} @cx-content-builder-asset-select=${c} @cx-content-builder-asset-delete=${d} .onRequestAsset=${this.host.onRequestAsset}>${s}</cx-asset-picker>`;
           }
         ],
         [
@@ -114144,15 +114145,18 @@ class Z7t {
           if (typeof d == "object" && d !== null) {
             const { id: u, src: h } = d, m = o.pickerConfigs?.recordIdKey ?? "record-id";
             let f = o.callback;
-            if (f && (f = (b) => o.callback({
-              ...b,
+            f && (f = (w) => o.callback({
+              ...w,
               extraValue: {
                 [m]: u
               }
-            })), await this.handleConfigChange(n, h, a, f), u) {
-              const b = this.host.enableAssetFormatControls ? "TR1" : "TRX", w = await this.resolveAssetFormatSrc(u, b);
-              w && await this.handleConfigChange(n, w, "attribute");
-            }
+            }));
+            const b = (w) => a === "style" && w ? `url("${w}")` : w;
+            if (u) {
+              const w = this.host.enableAssetFormatControls ? "TR1" : "TRX", k = await this.resolveAssetFormatSrc(u, w);
+              k ? await this.handleConfigChange(n, b(k), a, f) : await this.handleConfigChange(n, b(h), a, f);
+            } else
+              await this.handleConfigChange(n, b(h), a, f);
           }
         };
         break;
@@ -114389,7 +114393,7 @@ class Z7t {
         switch (c) {
           case "style":
             this.host.blockStyles[s] !== void 0 && (typeof this.host.blockStyles[s] == "string" && this.host.blockStyles[s].includes("url(") ? u = this.host.blockStyles[s].replace(
-              /url\((.*?)\)/,
+              /url\(["']?(.*?)["']?\)/,
               "$1"
             ) : this.host.blockStyles[s] === "none" ? u = "" : u = this.host.blockStyles[s]);
             break;
@@ -133137,8 +133141,10 @@ const VBt = QNt.extend({
   }, u = n.bubbleMenu;
   i.setCustomRte({
     disable(w, k, T) {
-      w.contentEditable = "false", k?.destroy(), (w.tagName === "CX-TEXT" || w.tagName === "CX-HEADER") && w.addSlotElement(), i.trigger("custom:save-translatable-text", {
-        content: k?.getHTML(),
+      w.contentEditable = "false";
+      const C = k?.getHTML();
+      k?.destroy(), (w.tagName === "CX-TEXT" || w.tagName === "CX-HEADER") && w.addSlotElement(), i.trigger("custom:save-translatable-text", {
+        content: C,
         id: T?.view.model.getId()
       }), T?.view.model.trigger("sync:content");
     },

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.124.0",
+  "version": "2.126.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {