@orangelogic/design-system 2.101.0 → 2.102.0

package/library/chunks/{list-editor.DMjclCWz.js → list-editor.CMakbQyU.js}

@@ -1,43 +1,43 @@
 import { C as k } from "./button.DfRnA70F.js";
-import { C as G, D as q } from "./dialog.BTU6B2_4.js";
-import j from "../components/grid.js";
-import R from "../components/grid-item.js";
-import _ from "../components/input.js";
-import P from "../components/line-clamp.js";
-import { C as F } from "./option.B7SoEb_q.js";
-import B from "../components/radio.js";
-import K from "../components/radio-group.js";
-import U from "../components/select.js";
-import E from "../components/space.js";
-import { C as H, H as V } from "./table.Cm-ynClk.js";
-import { C as T } from "./typography.DJC_UXgs.js";
-import { n as o, C as L } from "./lib-cortex-element.CVMmyPMC.js";
-import W from "../components/dynamic-select.js";
-import { c as D } from "./component.styles.CRO4Odto.js";
+import { C as O, D as q } from "./dialog.BTU6B2_4.js";
+import G from "../components/grid.js";
+import j from "../components/grid-item.js";
+import S from "../components/input.js";
+import R from "../components/line-clamp.js";
+import { C as P } from "./option.B7SoEb_q.js";
+import F from "../components/radio.js";
+import B from "../components/radio-group.js";
+import K from "../components/select.js";
+import _ from "../components/space.js";
+import { C as U, H } from "./table.Cm-ynClk.js";
+import { C as E } from "./typography.DJC_UXgs.js";
+import { n as o, C as T } from "./lib-cortex-element.CVMmyPMC.js";
+import V from "../components/dynamic-select.js";
+import { c as L } from "./component.styles.CRO4Odto.js";
 import { c as M } from "./custom-element.L4WJXn1j.js";
-import { d as J } from "./debounce.CIEhztrj.js";
-import { L as z } from "./i18n.DK1uYlJT.js";
-import { w as v } from "./watch.BCJD77bD.js";
-import { a as X } from "./_commonjsHelpers.DQNKXVTB.js";
-import { i as O, x as l } from "./lit-element.jLBm65_O.js";
+import { d as W } from "./debounce.CIEhztrj.js";
+import { L as D } from "./i18n.DK1uYlJT.js";
+import { w as h } from "./watch.BCJD77bD.js";
+import { a as J } from "./_commonjsHelpers.DQNKXVTB.js";
+import { i as z, 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 Y } from "./choose.BTbF6BAn.js";
-import { e as Z } from "./class-map.BiVq-cVR.js";
-import { o as Q } from "./map.D8heArFD.js";
+import { r as X } from "./choose.BTbF6BAn.js";
+import { e as Y } from "./class-map.BiVq-cVR.js";
+import { o as Z } from "./map.D8heArFD.js";
 import { c as x } from "./repeat.DbF2p5ae.js";
 import { n as N } from "./when.Dr1es41R.js";
-import { t as ee } from "./toString.CL_lYXbK.js";
-import { C as te } from "./icon-button.CN0NGNQx.js";
+import { t as Q } from "./toString.CL_lYXbK.js";
+import { C as ee } from "./icon-button.CN0NGNQx.js";
 import { C as ae } from "./image.D207g003.js";
-import { a as ie, D as I } from "./asset.CtL7ACp7.js";
-import { a as ne } from "./index.Cpamj0jB.js";
+import { a as te } from "./asset.CtL7ACp7.js";
+import { a as ie } from "./index.Cpamj0jB.js";
 import { A as g } from "./content-builder.CcgZciZN.js";
-import { b as se, t as w } from "./string.DUgD4c9f.js";
-import { t as re } from "./toast.D3AW3RWv.js";
-var A, $;
-function oe() {
-  return $ || ($ = 1, A = {
+import { b as ne, t as I } from "./string.DUgD4c9f.js";
+import { t as se } from "./toast.D3AW3RWv.js";
+var C, w;
+function re() {
+  return w || (w = 1, C = {
     aa: {
       name: "Afar",
       nativeName: "Afaraf"
@@ -770,21 +770,21 @@ function oe() {
       name: "Zulu",
       nativeName: "isiZulu"
     }
-  }), A;
+  }), C;
 }
-var C, S;
-function le() {
-  if (S) return C;
-  S = 1;
-  const e = oe(), t = {}, a = {}, i = [], s = [], p = [];
-  for (const c in e) {
-    const { name: m, nativeName: h } = e[c];
-    t[c] = a[m.toLowerCase()] = a[h.toLowerCase()] = { code: c, name: m, nativeName: h }, i.push(c), s.push(m), p.push(h);
+var A, $;
+function oe() {
+  if ($) return A;
+  $ = 1;
+  const e = re(), a = {}, t = {}, i = [], s = [], p = [];
+  for (const d in e) {
+    const { name: m, nativeName: v } = e[d];
+    a[d] = t[m.toLowerCase()] = t[v.toLowerCase()] = { code: d, name: m, nativeName: v }, i.push(d), s.push(m), p.push(v);
   }
-  return C = class f {
+  return A = class f {
     static getLanguages(m = []) {
       return m.map(
-        (h) => f.validate(h) ? Object.assign({}, t[h]) : { code: h, name: "", nativeName: "" }
+        (v) => f.validate(v) ? Object.assign({}, a[v]) : { code: v, name: "", nativeName: "" }
       );
     }
     static getName(m) {
@@ -800,7 +800,7 @@ function le() {
       return p.slice();
     }
     static getCode(m) {
-      return m = m.toLowerCase(), a.hasOwnProperty(m) ? a[m].code : "";
+      return m = m.toLowerCase(), t.hasOwnProperty(m) ? t[m].code : "";
     }
     static getAllCodes() {
       return i.slice();
@@ -808,24 +808,24 @@ function le() {
     static validate(m) {
       return e.hasOwnProperty(m);
     }
-  }, C;
+  }, A;
 }
-var me = le();
-const ce = /* @__PURE__ */ X(me);
-var de = 0;
-function pe(e) {
-  var t = ++de;
-  return ee(e) + t;
+var le = oe();
+const me = /* @__PURE__ */ J(le);
+var ce = 0;
+function de(e) {
+  var a = ++ce;
+  return Q(e) + a;
 }
-const ue = O`:host{isolation:isolate}.asset-picker__input[data-user-invalid]~.asset-picker__button::part(base){border-color:var(--cx-input-invalid-border-color)}.asset-picker__input[data-user-invalid]:focus-within~.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__button{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 he = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, u = (e, t, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? ve(t, a) : t, p = e.length - 1, c; p >= 0; p--)
-    (c = e[p]) && (s = (i ? c(t, a, s) : c(s)) || s);
-  return i && s && he(t, a, s), s;
+const pe = z`:host{isolation:isolate}.asset-picker__input[data-user-invalid]~.asset-picker__button::part(base){border-color:var(--cx-input-invalid-border-color)}.asset-picker__input[data-user-invalid]:focus-within~.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__button{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 ue = Object.defineProperty, he = Object.getOwnPropertyDescriptor, u = (e, a, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? he(a, t) : a, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (s = (i ? d(a, t, s) : d(s)) || s);
+  return i && s && ue(a, t, s), s;
 };
-let d = class extends L {
+let c = class extends T {
   constructor() {
-    super(...arguments), this.localize = new z(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.previewSrc = "", this.apiGetAssets = ie;
+    super(...arguments), this.localize = new D(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.previewSrc = "", this.apiGetAssets = te;
   }
   async handleRequestAssetClick() {
     if (this.onRequestAsset)
@@ -841,28 +841,26 @@ let d = class extends L {
           this.accepts
         );
         if (this.accepts.length > 0 && Object.values(e).some(
-          (a) => !this.accepts.includes(se(a.src) ?? "")
+          (t) => !this.accepts.includes(ne(t.src) ?? "")
         ))
-          re(this.localize.term("nonAcceptedExtension", this.accepts), {
+          se(this.localize.term("nonAcceptedExtension", this.accepts), {
             notificationType: "warning"
           });
         else if (this.multiple) {
-          const a = Object.values(e);
+          const t = Object.values(e);
           this.emit("cx-content-builder-asset-select", {
-            detail: a
+            detail: t
           });
         } else {
-          const { id: a, name: i, src: s, type: p } = e;
-          let c = s;
-          p === g.Audio && (c = (await this.apiGetAssets({
-            extraFields: [I],
-            recordIds: [a]
-          })).items[0]?.[I]), c && this.emit("cx-content-builder-asset-select", {
+          const { extension: t, id: i, name: s, representative: p, src: d, type: m } = e;
+          this.emit("cx-content-builder-asset-select", {
             detail: {
-              id: a,
-              name: i,
-              src: c,
-              type: p
+              extension: t,
+              id: i,
+              name: s,
+              representative: p,
+              src: d,
+              type: m
             }
           });
         }
@@ -886,11 +884,11 @@ let d = class extends L {
       return;
     }
     try {
-      const t = (await this.apiGetAssets({
+      const a = (await this.apiGetAssets({
         getPermanentAssetsPaths: !0,
         recordIds: [this.recordId]
       })).items[0];
-      this.previewSrc = t?.path_TR1 || t?.originalUrl || "";
+      this.previewSrc = a?.path_TR1 || a?.originalUrl || "";
     } catch {
       this.previewSrc = "";
     }
@@ -904,12 +902,12 @@ let d = class extends L {
   }
   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=${ne.Cover}></cx-image>`;
+      return l`<cx-image part="image" class="asset-picker__image" src=${this.previewSrc || this.value} alt=${this.name} width="200px" object-fit=${ie.Cover}></cx-image>`;
     if (this.name && this.acceptsType(g.Video))
-      return l`<cx-typography variant="body-2">${w(this.name, 30, 11, 11)}</cx-typography>`;
+      return l`<cx-typography variant="body-2">${I(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-typography variant="body-2">${w(e[0], 30, 11, 11)}
+      return l`<cx-typography variant="body-2">${I(e[0], 30, 11, 11)}
         ${N(
         e.length > 1,
         () => l` ${this.localize.term("andOthers", e.length - 1)}`
@@ -929,84 +927,84 @@ let d = class extends L {
     )}</cx-space>`;
   }
 };
-d.styles = [D, ue];
-d.dependencies = {
+c.styles = [L, pe];
+c.dependencies = {
   "cx-button": k,
-  "cx-icon-button": te,
+  "cx-icon-button": ee,
   "cx-image": ae,
-  "cx-input": _,
-  "cx-space": E,
-  "cx-typography": T
+  "cx-input": S,
+  "cx-space": _,
+  "cx-typography": E
 };
 u([
   y(".asset-picker__button")
-], d.prototype, "buttonEl", 2);
+], c.prototype, "buttonEl", 2);
 u([
   y(".asset-picker__input")
-], d.prototype, "inputEl", 2);
+], c.prototype, "inputEl", 2);
 u([
   o({ reflect: !0, type: String })
-], d.prototype, "value", 2);
+], c.prototype, "value", 2);
 u([
   o({ reflect: !0, type: String })
-], d.prototype, "name", 2);
+], c.prototype, "name", 2);
 u([
   o({
     converter: {
-      fromAttribute: (e) => (e ?? "").split(" ").filter((t) => t !== ""),
+      fromAttribute: (e) => (e ?? "").split(" ").filter((a) => a !== ""),
       toAttribute: (e) => e.join(" ")
     },
     reflect: !0
   })
-], d.prototype, "type", 2);
+], c.prototype, "type", 2);
 u([
   o({ reflect: !0, type: Boolean })
-], d.prototype, "multiple", 2);
+], c.prototype, "multiple", 2);
 u([
   o({
     converter: {
-      fromAttribute: (e) => (e ?? "").split(" ").filter((t) => t !== ""),
+      fromAttribute: (e) => (e ?? "").split(" ").filter((a) => a !== ""),
       toAttribute: (e) => e.join(" ")
     },
     reflect: !0
   })
-], d.prototype, "accepts", 2);
+], c.prototype, "accepts", 2);
 u([
   o({ reflect: !0, type: Boolean })
-], d.prototype, "required", 2);
+], c.prototype, "required", 2);
 u([
   o({ attribute: "disabled", reflect: !0, type: Boolean })
-], d.prototype, "disabled", 2);
+], c.prototype, "disabled", 2);
 u([
   o({ attribute: "on-request-asset", type: Function })
-], d.prototype, "onRequestAsset", 2);
+], c.prototype, "onRequestAsset", 2);
 u([
   o({ attribute: "record-id", reflect: !0, type: String })
-], d.prototype, "recordId", 2);
+], c.prototype, "recordId", 2);
 u([
   b()
-], d.prototype, "previewSrc", 2);
+], c.prototype, "previewSrc", 2);
 u([
-  v("value")
-], d.prototype, "handleValueChange", 1);
+  h("value")
+], c.prototype, "handleValueChange", 1);
 u([
-  v("recordId")
-], d.prototype, "handleRecordIdChange", 1);
-d = u([
+  h("recordId")
+], c.prototype, "handleRecordIdChange", 1);
+c = u([
   M("cx-asset-picker")
-], d);
-const ge = O`: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 Ne = Object.defineProperty, be = Object.getOwnPropertyDescriptor, r = (e, t, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? be(t, a) : t, p = e.length - 1, c; p >= 0; p--)
-    (c = e[p]) && (s = (i ? c(t, a, s) : c(s)) || s);
-  return i && s && Ne(t, a, s), s;
+], c);
+const ve = z`: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 ge = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, r = (e, a, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Ne(a, t) : a, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (s = (i ? d(a, t, s) : d(s)) || s);
+  return i && s && ge(a, t, s), s;
 };
-const xe = {
+const be = {
   resizable: !1
 };
-let n = class extends L {
+let n = class extends T {
   constructor() {
-    super(...arguments), this.localize = new z(this), this.data = [], this.canAdd = !1, this.addDialogLabel = "", this.editDialogLabel = "", this.displayField = "", this.descriptionField = "", this.addItemText = "", this.sampleItem = {}, this.useEvents = !1, this.sortable = !1, this.loadingEvent = "", this.loadingItemIndex = void 0, this.columns = [], this.noHeader = !1, this.rowHeight = 40, this.defaultLanguage = "", this.supportedLanguages = ["en"], this.boundary = document.body, this.onRequestAsset = void 0, this.editedItem = null, this.isAdding = !1, this.columnsMap = {}, this.sortedEntries = [], this.translatableControls = [], this.disableCloseConfigDialog = !1, this.hoverMenu = {
+    super(...arguments), this.localize = new D(this), this.data = [], this.canAdd = !1, this.addDialogLabel = "", this.editDialogLabel = "", this.displayField = "", this.descriptionField = "", this.addItemText = "", this.sampleItem = {}, this.useEvents = !1, this.sortable = !1, this.loadingEvent = "", this.loadingItemIndex = void 0, this.columns = [], this.noHeader = !1, this.rowHeight = 40, this.defaultLanguage = "", this.supportedLanguages = ["en"], this.boundary = document.body, this.onRequestAsset = void 0, this.editedItem = null, this.isAdding = !1, this.columnsMap = {}, this.sortedEntries = [], this.translatableControls = [], this.disableCloseConfigDialog = !1, this.hoverMenu = {
       data: [
         {
           icon: "create",
@@ -1033,7 +1031,7 @@ let n = class extends L {
         }
       ],
       options: {
-        placement: V.Right
+        placement: H.Right
       }
     }, this.OMITTED_FIELDS = ["id"];
   }
@@ -1054,15 +1052,15 @@ let n = class extends L {
   }
   handleEditedItemChange() {
     const e = {};
-    for (const t of this.columns)
-      e[t.field] = t.configOrder;
-    this.sortedEntries = Object.entries(this.editedItem || {}).filter(([t]) => this.OMITTED_FIELDS.indexOf(t) === -1 && this.columnsMap[t]).sort(([t], [a]) => (e[t] ?? Number.MAX_SAFE_INTEGER) - (e[a] ?? Number.MAX_SAFE_INTEGER));
+    for (const a of this.columns)
+      e[a.field] = a.configOrder;
+    this.sortedEntries = Object.entries(this.editedItem || {}).filter(([a]) => this.OMITTED_FIELDS.indexOf(a) === -1 && this.columnsMap[a]).sort(([a], [t]) => (e[a] ?? Number.MAX_SAFE_INTEGER) - (e[t] ?? Number.MAX_SAFE_INTEGER));
   }
   handleTableActions(e) {
-    const { name: t, row: a } = e.detail, i = "component" in a ? a.component : a;
+    const { name: a, row: t } = e.detail, i = "component" in t ? t.component : t;
     if (i) {
       if (this.useEvents) {
-        this.emit(`cx-list-editor-${t}`, {
+        this.emit(`cx-list-editor-${a}`, {
           detail: {
             index: i.getIndex(),
             item: i.getData()
@@ -1070,7 +1068,7 @@ let n = class extends L {
         });
         return;
       }
-      t === "edit" ? this.editedItem = i.getData() : t === "delete" && this.emit("cx-list-editor-change", {
+      a === "edit" ? this.editedItem = i.getData() : a === "delete" && this.emit("cx-list-editor-change", {
         detail: {
           data: this.data.filter((s) => s.id !== i.getData().id)
         }
@@ -1090,22 +1088,22 @@ let n = class extends L {
   handleAddClick() {
     this.isAdding = !0, this.editedItem = {
       ...this.sampleItem,
-      id: pe(`${Date.now()}-`)
+      id: de(`${Date.now()}-`)
     };
   }
   handleSaveClick() {
     if (this.editedItem) {
       const e = this.data.findIndex(
-        (a) => a.id === this.editedItem.id
+        (t) => t.id === this.editedItem.id
       );
       if (!this.isAdding && e === -1) {
         this.editedItem = null;
         return;
       }
-      let t = this.data;
-      this.isAdding ? t = [...t, this.editedItem] : t = this.data.map((a) => a.id === this.editedItem.id ? this.editedItem : a), this.emit("cx-list-editor-change", {
+      let a = this.data;
+      this.isAdding ? a = [...a, this.editedItem] : a = this.data.map((t) => t.id === this.editedItem.id ? this.editedItem : t), this.emit("cx-list-editor-change", {
         detail: {
-          data: t
+          data: a
         }
       }), this.editedItem = null, this.isAdding = !1;
     }
@@ -1124,55 +1122,55 @@ let n = class extends L {
     if (await this.updateComplete, !this.table)
       return;
     if (!this.loadingItemIndex) {
-      this.table.tabulatorInstance?.getRows().forEach((a) => {
-        const i = a._row.hoverMenuElement;
-        a._row.hoverMenuElement.actions = i.actions.map((s) => (s.options?.buttonProps && (s.options.buttonProps.loading = !1), s));
+      this.table.tabulatorInstance?.getRows().forEach((t) => {
+        const i = t._row.hoverMenuElement;
+        t._row.hoverMenuElement.actions = i.actions.map((s) => (s.options?.buttonProps && (s.options.buttonProps.loading = !1), s));
       });
       return;
     }
     const e = this.table.tabulatorInstance?.getRow(this.loadingItemIndex);
     if (!e || !e?._row?.hoverMenuElement)
       return;
-    const t = e._row.hoverMenuElement;
-    t.actions = t.actions.map((a) => (a.options?.buttonProps && (a.options.buttonProps.loading = a.name === this.loadingEvent && this.loadingItemIndex === e.getIndex()), a));
+    const a = e._row.hoverMenuElement;
+    a.actions = a.actions.map((t) => (t.options?.buttonProps && (t.options.buttonProps.loading = t.name === this.loadingEvent && this.loadingItemIndex === e.getIndex()), t));
   }
   handleChange(e) {
     if (!e.target)
       return;
-    const t = e.target, a = t.dataset.id;
-    if (!a)
+    const a = e.target, t = a.dataset.id;
+    if (!t)
       return;
-    let i = t.value;
+    let i = a.value;
     Array.isArray(i) ? i = i.join(" ") : i = String(i), this.editedItem = {
       ...this.editedItem,
-      [a]: i
+      [t]: i
     };
   }
   renderControls(e) {
     if (e === "translation") {
-      const t = l`
+      const a = l`
         ${x(
         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">${Q(this.supportedLanguages, (i) => {
-          const s = this.localize.languageName(i) || ce.getName(i) || i, p = (c) => {
-            const m = c.target.value;
+        (t) => t.field,
+        (t) => 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">${t.title}</cx-typography></cx-grid-item><cx-grid-item xs="4" sm="3"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${Z(this.supportedLanguages, (i) => {
+          const s = this.localize.languageName(i) || me.getName(i) || i, p = (d) => {
+            const m = d.target.value;
             this.editedItem = {
               ...this.editedItem,
-              [`${a.field}-${i}`]: m
+              [`${t.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?.[`${t.field}-${i}`] ?? this.editedItem?.[`${t.field}`] ?? ""} @cx-change=${p}></cx-input>`;
         })}</cx-space></cx-grid-item></cx-grid>`
       )}
       `;
-      return l`<cx-space direction="vertical" wrap="nowrap">${t}</cx-space>`;
+      return l`<cx-space direction="vertical" wrap="nowrap">${a}</cx-space>`;
     }
     return l`<cx-grid columns="3" spacing="var(--cx-spacing-small)" wrap="wrap">${x(
       this.sortedEntries,
-      ([t]) => t,
-      ([t, a]) => l`<cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.columnsMap[t].title}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2">${Y(
-        this.columnsMap[t].controlType,
+      ([a]) => a,
+      ([a, t]) => l`<cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.columnsMap[a].title}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2">${X(
+        this.columnsMap[a].controlType,
         [
           [
             "image-picker",
@@ -1180,48 +1178,48 @@ let n = class extends L {
               const i = async (p) => {
                 if (Array.isArray(p.detail))
                   return;
-                const { id: c, src: m } = p.detail;
+                const { id: d, src: m } = p.detail;
                 this.editedItem = {
                   ...this.editedItem,
-                  [t]: m,
-                  recordId: c
+                  [a]: m,
+                  recordId: d
                 };
               }, s = async () => {
                 this.editedItem = {
                   ...this.editedItem,
-                  [t]: "",
+                  [a]: "",
                   recordId: ""
                 };
               };
-              return l`<cx-asset-picker value=${a} record-id=${this.editedItem.recordId || ""} type="image" id=${t} @cx-content-builder-asset-select=${i} @cx-content-builder-asset-delete=${s} @cx-asset-request-status=${this.handleAssetRequestStatus} .onRequestAsset=${this.onRequestAsset}></cx-asset-picker>`;
+              return l`<cx-asset-picker value=${t} record-id=${this.editedItem.recordId || ""} type="image" id=${a} @cx-content-builder-asset-select=${i} @cx-content-builder-asset-delete=${s} @cx-asset-request-status=${this.handleAssetRequestStatus} .onRequestAsset=${this.onRequestAsset}></cx-asset-picker>`;
             }
           ],
           [
             "radio-group",
-            () => l`<cx-radio-group data-id=${t} data-testid="radio-group-control" horizontal value=${(a || this.columnsMap[t].defaultValue) ?? ""} size="medium" @cx-change=${this.handleChange}>${x(
-              this.columnsMap[t].options ?? [],
+            () => l`<cx-radio-group data-id=${a} data-testid="radio-group-control" horizontal value=${(t || this.columnsMap[a].defaultValue) ?? ""} size="medium" @cx-change=${this.handleChange}>${x(
+              this.columnsMap[a].options ?? [],
               (i) => i.value,
               (i) => l`<cx-radio value=${i.value}>${i.name}</cx-radio>`
             )}</cx-radio-group>`
           ],
           [
             "select",
-            () => this.columnsMap[t].api ? l`<cx-dynamic-select data-id=${t} hoist value=${a} @cx-change=${this.handleChange} .api=${this.columnsMap[t].api}></cx-dynamic-select>` : l`<cx-select data-id=${t} hoist value=${a} @cx-change=${this.handleChange}>${x(
-              this.columnsMap[t].options ?? [],
+            () => this.columnsMap[a].api ? l`<cx-dynamic-select data-id=${a} hoist value=${t} @cx-change=${this.handleChange} .api=${this.columnsMap[a].api}></cx-dynamic-select>` : l`<cx-select data-id=${a} hoist value=${t} @cx-change=${this.handleChange}>${x(
+              this.columnsMap[a].options ?? [],
               (i) => i.value,
               (i) => l`<cx-option value=${i.value}>${i.name}</cx-option>`
             )}</cx-select>`
           ]
         ],
-        () => l`<cx-input data-id=${t} value=${a} @cx-change=${this.handleChange}></cx-input>`
+        () => l`<cx-input data-id=${a} value=${t} @cx-change=${this.handleChange}></cx-input>`
       )}</cx-grid-item>`
     )}</cx-grid>`;
   }
   render() {
-    return l`<cx-space direction="vertical" align-items="flex-start"><div class="list-editor"><cx-table part="table" class=${Z({
+    return l`<cx-space direction="vertical" align-items="flex-start"><div class="list-editor"><cx-table part="table" class=${Y({
       "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=${xe} .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=${q.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(
+    })} ?movable-rows=${this.sortable} ?no-header=${this.noHeader} layout="fitColumns" row-height=${this.rowHeight} .columns=${this.columns} .columnDefaults=${be} .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=${q.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>${N(
@@ -1238,23 +1236,23 @@ let n = class extends L {
     )}</cx-space>`;
   }
 };
-n.styles = [D, ge];
+n.styles = [L, ve];
 n.dependencies = {
-  "cx-asset-picker": d,
+  "cx-asset-picker": c,
   "cx-button": k,
-  "cx-dialog": G,
-  "cx-dynamic-select": W,
-  "cx-grid": j,
-  "cx-grid-item": R,
-  "cx-input": _,
-  "cx-line-clamp": P,
-  "cx-option": F,
-  "cx-radio": B,
-  "cx-radio-group": K,
-  "cx-select": U,
-  "cx-space": E,
-  "cx-table": H,
-  "cx-typography": T
+  "cx-dialog": O,
+  "cx-dynamic-select": V,
+  "cx-grid": G,
+  "cx-grid-item": j,
+  "cx-input": S,
+  "cx-line-clamp": R,
+  "cx-option": P,
+  "cx-radio": F,
+  "cx-radio-group": B,
+  "cx-select": K,
+  "cx-space": _,
+  "cx-table": U,
+  "cx-typography": E
 };
 r([
   y("cx-dialog")
@@ -1267,8 +1265,8 @@ r([
     converter: {
       fromAttribute: (e) => {
         try {
-          const t = JSON.parse(e);
-          return Array.isArray(t) ? t : [];
+          const a = JSON.parse(e);
+          return Array.isArray(a) ? a : [];
         } catch {
           return [];
         }
@@ -1357,25 +1355,25 @@ r([
   b()
 ], n.prototype, "translatableControls", 2);
 r([
-  v("columns"),
-  v("supportedLanguages", { waitUntilFirstUpdate: !0 })
+  h("columns"),
+  h("supportedLanguages", { waitUntilFirstUpdate: !0 })
 ], n.prototype, "handleColumnsChange", 1);
 r([
-  v("editedItem"),
-  v("columns", { waitUntilFirstUpdate: !0 })
+  h("editedItem"),
+  h("columns", { waitUntilFirstUpdate: !0 })
 ], n.prototype, "handleEditedItemChange", 1);
 r([
-  v("loadingEvent", { waitUntilFirstUpdate: !0 }),
-  v("loadingItemIndex", { waitUntilFirstUpdate: !0 }),
-  J(10)
+  h("loadingEvent", { waitUntilFirstUpdate: !0 }),
+  h("loadingItemIndex", { waitUntilFirstUpdate: !0 }),
+  W(10)
 ], n.prototype, "handleLoadingEventChange", 1);
 n = r([
   M("cx-list-editor")
 ], n);
 export {
   n as C,
-  ce as I,
-  d as a,
-  xe as c,
-  pe as u
+  me as I,
+  c as a,
+  be as c,
+  de as u
 };