@orangelogic/design-system 2.56.0 → 2.57.0

package/library/chunks/list-editor.BToq5cqp.js

@@ -0,0 +1,1641 @@
+import { C as _ } from "./button.2-Io1Wm4.js";
+import { C as q, D as j } from "./dialog.CIeu0rVD.js";
+import G from "../components/grid.js";
+import R from "../components/grid-item.js";
+import S from "../components/input.js";
+import P from "../components/line-clamp.js";
+import F from "../components/radio.js";
+import B from "../components/radio-group.js";
+import E from "../components/space.js";
+import { C as K, H as U } from "./table.CrX_NJiY.js";
+import { C as T } from "./typography.BFpl0WMA.js";
+import { i as L, n as o, C as z, x as l, c as D } from "./custom-element.vnXBMQxc.js";
+import { c as M } from "./component.styles.CI-v8BZa.js";
+import { d as H } from "./popup.BE5MfEQJ.js";
+import { L as O } from "./i18n.dCiJrmqj.js";
+import { w as N } from "./watch.BCJD77bD.js";
+import { g as V } from "./_commonjsHelpers.ByX85dGu.js";
+import { r as b } from "./state.Cw55xXlb.js";
+import { e as f } from "./query.BBf1UFkC.js";
+import { r as W } from "./choose.BTbF6BAn.js";
+import { e as J } from "./class-map.CoZTSvbM.js";
+import { o as X } from "./map.D8heArFD.js";
+import { c as x } from "./repeat.CauKaXyy.js";
+import { n as g } from "./when.Dr1es41R.js";
+import { t as Y } from "./toString.CL_lYXbK.js";
+import Z from "../components/icon-button.js";
+import { C as Q } from "./image.gpleN29o.js";
+import { t as ee, a as ae, D as I } from "./asset.Ba-CxnNM.js";
+import { a as te } from "./index.Cpamj0jB.js";
+import { A as v } from "./content-builder.WranV3P4.js";
+import { e as ie, t as A } from "./string.DPf4puTr.js";
+var C, k;
+function ne() {
+  return k || (k = 1, C = {
+    aa: {
+      name: "Afar",
+      nativeName: "Afaraf"
+    },
+    ab: {
+      name: "Abkhaz",
+      nativeName: "аҧсуа бызшәа"
+    },
+    ae: {
+      name: "Avestan",
+      nativeName: "avesta"
+    },
+    af: {
+      name: "Afrikaans",
+      nativeName: "Afrikaans"
+    },
+    ak: {
+      name: "Akan",
+      nativeName: "Akan"
+    },
+    am: {
+      name: "Amharic",
+      nativeName: "አማርኛ"
+    },
+    an: {
+      name: "Aragonese",
+      nativeName: "aragonés"
+    },
+    ar: {
+      name: "Arabic",
+      nativeName: "العربية"
+    },
+    as: {
+      name: "Assamese",
+      nativeName: "অসমীয়া"
+    },
+    av: {
+      name: "Avaric",
+      nativeName: "авар мацӀ"
+    },
+    ay: {
+      name: "Aymara",
+      nativeName: "aymar aru"
+    },
+    az: {
+      name: "Azerbaijani",
+      nativeName: "azərbaycan dili"
+    },
+    ba: {
+      name: "Bashkir",
+      nativeName: "башҡорт теле"
+    },
+    be: {
+      name: "Belarusian",
+      nativeName: "беларуская мова"
+    },
+    bg: {
+      name: "Bulgarian",
+      nativeName: "български език"
+    },
+    bi: {
+      name: "Bislama",
+      nativeName: "Bislama"
+    },
+    bm: {
+      name: "Bambara",
+      nativeName: "bamanankan"
+    },
+    bn: {
+      name: "Bengali",
+      nativeName: "বাংলা"
+    },
+    bo: {
+      name: "Tibetan",
+      nativeName: "བོད་ཡིག"
+    },
+    br: {
+      name: "Breton",
+      nativeName: "brezhoneg"
+    },
+    bs: {
+      name: "Bosnian",
+      nativeName: "bosanski jezik"
+    },
+    ca: {
+      name: "Catalan",
+      nativeName: "Català"
+    },
+    ce: {
+      name: "Chechen",
+      nativeName: "нохчийн мотт"
+    },
+    ch: {
+      name: "Chamorro",
+      nativeName: "Chamoru"
+    },
+    co: {
+      name: "Corsican",
+      nativeName: "corsu"
+    },
+    cr: {
+      name: "Cree",
+      nativeName: "ᓀᐦᐃᔭᐍᐏᐣ"
+    },
+    cs: {
+      name: "Czech",
+      nativeName: "Čeština"
+    },
+    cu: {
+      name: "Old Church Slavonic",
+      nativeName: "ѩзыкъ словѣньскъ"
+    },
+    cv: {
+      name: "Chuvash",
+      nativeName: "чӑваш чӗлхи"
+    },
+    cy: {
+      name: "Welsh",
+      nativeName: "Cymraeg"
+    },
+    da: {
+      name: "Danish",
+      nativeName: "Dansk"
+    },
+    de: {
+      name: "German",
+      nativeName: "Deutsch"
+    },
+    dv: {
+      name: "Divehi",
+      nativeName: "ދިވެހި"
+    },
+    dz: {
+      name: "Dzongkha",
+      nativeName: "རྫོང་ཁ"
+    },
+    ee: {
+      name: "Ewe",
+      nativeName: "Eʋegbe"
+    },
+    el: {
+      name: "Greek",
+      nativeName: "Ελληνικά"
+    },
+    en: {
+      name: "English",
+      nativeName: "English"
+    },
+    eo: {
+      name: "Esperanto",
+      nativeName: "Esperanto"
+    },
+    es: {
+      name: "Spanish",
+      nativeName: "Español"
+    },
+    et: {
+      name: "Estonian",
+      nativeName: "eesti"
+    },
+    eu: {
+      name: "Basque",
+      nativeName: "euskara"
+    },
+    fa: {
+      name: "Persian",
+      nativeName: "فارسی"
+    },
+    ff: {
+      name: "Fula",
+      nativeName: "Fulfulde"
+    },
+    fi: {
+      name: "Finnish",
+      nativeName: "suomi"
+    },
+    fj: {
+      name: "Fijian",
+      nativeName: "vosa Vakaviti"
+    },
+    fo: {
+      name: "Faroese",
+      nativeName: "Føroyskt"
+    },
+    fr: {
+      name: "French",
+      nativeName: "Français"
+    },
+    fy: {
+      name: "Western Frisian",
+      nativeName: "Frysk"
+    },
+    ga: {
+      name: "Irish",
+      nativeName: "Gaeilge"
+    },
+    gd: {
+      name: "Scottish Gaelic",
+      nativeName: "Gàidhlig"
+    },
+    gl: {
+      name: "Galician",
+      nativeName: "galego"
+    },
+    gn: {
+      name: "Guaraní",
+      nativeName: "Avañe'ẽ"
+    },
+    gu: {
+      name: "Gujarati",
+      nativeName: "ગુજરાતી"
+    },
+    gv: {
+      name: "Manx",
+      nativeName: "Gaelg"
+    },
+    ha: {
+      name: "Hausa",
+      nativeName: "هَوُسَ"
+    },
+    he: {
+      name: "Hebrew",
+      nativeName: "עברית"
+    },
+    hi: {
+      name: "Hindi",
+      nativeName: "हिन्दी"
+    },
+    ho: {
+      name: "Hiri Motu",
+      nativeName: "Hiri Motu"
+    },
+    hr: {
+      name: "Croatian",
+      nativeName: "Hrvatski"
+    },
+    ht: {
+      name: "Haitian",
+      nativeName: "Kreyòl ayisyen"
+    },
+    hu: {
+      name: "Hungarian",
+      nativeName: "magyar"
+    },
+    hy: {
+      name: "Armenian",
+      nativeName: "Հայերեն"
+    },
+    hz: {
+      name: "Herero",
+      nativeName: "Otjiherero"
+    },
+    ia: {
+      name: "Interlingua",
+      nativeName: "Interlingua"
+    },
+    id: {
+      name: "Indonesian",
+      nativeName: "Bahasa Indonesia"
+    },
+    ie: {
+      name: "Interlingue",
+      nativeName: "Interlingue"
+    },
+    ig: {
+      name: "Igbo",
+      nativeName: "Asụsụ Igbo"
+    },
+    ii: {
+      name: "Nuosu",
+      nativeName: "ꆈꌠ꒿ Nuosuhxop"
+    },
+    ik: {
+      name: "Inupiaq",
+      nativeName: "Iñupiaq"
+    },
+    io: {
+      name: "Ido",
+      nativeName: "Ido"
+    },
+    is: {
+      name: "Icelandic",
+      nativeName: "Íslenska"
+    },
+    it: {
+      name: "Italian",
+      nativeName: "Italiano"
+    },
+    iu: {
+      name: "Inuktitut",
+      nativeName: "ᐃᓄᒃᑎᑐᑦ"
+    },
+    ja: {
+      name: "Japanese",
+      nativeName: "日本語"
+    },
+    jv: {
+      name: "Javanese",
+      nativeName: "basa Jawa"
+    },
+    ka: {
+      name: "Georgian",
+      nativeName: "ქართული"
+    },
+    kg: {
+      name: "Kongo",
+      nativeName: "Kikongo"
+    },
+    ki: {
+      name: "Kikuyu",
+      nativeName: "Gĩkũyũ"
+    },
+    kj: {
+      name: "Kwanyama",
+      nativeName: "Kuanyama"
+    },
+    kk: {
+      name: "Kazakh",
+      nativeName: "қазақ тілі"
+    },
+    kl: {
+      name: "Kalaallisut",
+      nativeName: "kalaallisut"
+    },
+    km: {
+      name: "Khmer",
+      nativeName: "ខេមរភាសា"
+    },
+    kn: {
+      name: "Kannada",
+      nativeName: "ಕನ್ನಡ"
+    },
+    ko: {
+      name: "Korean",
+      nativeName: "한국어"
+    },
+    kr: {
+      name: "Kanuri",
+      nativeName: "Kanuri"
+    },
+    ks: {
+      name: "Kashmiri",
+      nativeName: "कश्मीरी"
+    },
+    ku: {
+      name: "Kurdish",
+      nativeName: "Kurdî"
+    },
+    kv: {
+      name: "Komi",
+      nativeName: "коми кыв"
+    },
+    kw: {
+      name: "Cornish",
+      nativeName: "Kernewek"
+    },
+    ky: {
+      name: "Kyrgyz",
+      nativeName: "Кыргызча"
+    },
+    la: {
+      name: "Latin",
+      nativeName: "latine"
+    },
+    lb: {
+      name: "Luxembourgish",
+      nativeName: "Lëtzebuergesch"
+    },
+    lg: {
+      name: "Ganda",
+      nativeName: "Luganda"
+    },
+    li: {
+      name: "Limburgish",
+      nativeName: "Limburgs"
+    },
+    ln: {
+      name: "Lingala",
+      nativeName: "Lingála"
+    },
+    lo: {
+      name: "Lao",
+      nativeName: "ພາສາລາວ"
+    },
+    lt: {
+      name: "Lithuanian",
+      nativeName: "lietuvių kalba"
+    },
+    lu: {
+      name: "Luba-Katanga",
+      nativeName: "Kiluba"
+    },
+    lv: {
+      name: "Latvian",
+      nativeName: "latviešu valoda"
+    },
+    mg: {
+      name: "Malagasy",
+      nativeName: "fiteny malagasy"
+    },
+    mh: {
+      name: "Marshallese",
+      nativeName: "Kajin M̧ajeļ"
+    },
+    mi: {
+      name: "Māori",
+      nativeName: "te reo Māori"
+    },
+    mk: {
+      name: "Macedonian",
+      nativeName: "македонски јазик"
+    },
+    ml: {
+      name: "Malayalam",
+      nativeName: "മലയാളം"
+    },
+    mn: {
+      name: "Mongolian",
+      nativeName: "Монгол хэл"
+    },
+    mr: {
+      name: "Marathi",
+      nativeName: "मराठी"
+    },
+    ms: {
+      name: "Malay",
+      nativeName: "Bahasa Melayu"
+    },
+    mt: {
+      name: "Maltese",
+      nativeName: "Malti"
+    },
+    my: {
+      name: "Burmese",
+      nativeName: "ဗမာစာ"
+    },
+    na: {
+      name: "Nauru",
+      nativeName: "Dorerin Naoero"
+    },
+    nb: {
+      name: "Norwegian Bokmål",
+      nativeName: "Norsk bokmål"
+    },
+    nd: {
+      name: "Northern Ndebele",
+      nativeName: "isiNdebele"
+    },
+    ne: {
+      name: "Nepali",
+      nativeName: "नेपाली"
+    },
+    ng: {
+      name: "Ndonga",
+      nativeName: "Owambo"
+    },
+    nl: {
+      name: "Dutch",
+      nativeName: "Nederlands"
+    },
+    nn: {
+      name: "Norwegian Nynorsk",
+      nativeName: "Norsk nynorsk"
+    },
+    no: {
+      name: "Norwegian",
+      nativeName: "Norsk"
+    },
+    nr: {
+      name: "Southern Ndebele",
+      nativeName: "isiNdebele"
+    },
+    nv: {
+      name: "Navajo",
+      nativeName: "Diné bizaad"
+    },
+    ny: {
+      name: "Chichewa",
+      nativeName: "chiCheŵa"
+    },
+    oc: {
+      name: "Occitan",
+      nativeName: "occitan"
+    },
+    oj: {
+      name: "Ojibwe",
+      nativeName: "ᐊᓂᔑᓈᐯᒧᐎᓐ"
+    },
+    om: {
+      name: "Oromo",
+      nativeName: "Afaan Oromoo"
+    },
+    or: {
+      name: "Oriya",
+      nativeName: "ଓଡ଼ିଆ"
+    },
+    os: {
+      name: "Ossetian",
+      nativeName: "ирон æвзаг"
+    },
+    pa: {
+      name: "Panjabi",
+      nativeName: "ਪੰਜਾਬੀ"
+    },
+    pi: {
+      name: "Pāli",
+      nativeName: "पाऴि"
+    },
+    pl: {
+      name: "Polish",
+      nativeName: "Polski"
+    },
+    ps: {
+      name: "Pashto",
+      nativeName: "پښتو"
+    },
+    pt: {
+      name: "Portuguese",
+      nativeName: "Português"
+    },
+    qu: {
+      name: "Quechua",
+      nativeName: "Runa Simi"
+    },
+    rm: {
+      name: "Romansh",
+      nativeName: "rumantsch grischun"
+    },
+    rn: {
+      name: "Kirundi",
+      nativeName: "Ikirundi"
+    },
+    ro: {
+      name: "Romanian",
+      nativeName: "Română"
+    },
+    ru: {
+      name: "Russian",
+      nativeName: "Русский"
+    },
+    rw: {
+      name: "Kinyarwanda",
+      nativeName: "Ikinyarwanda"
+    },
+    sa: {
+      name: "Sanskrit",
+      nativeName: "संस्कृतम्"
+    },
+    sc: {
+      name: "Sardinian",
+      nativeName: "sardu"
+    },
+    sd: {
+      name: "Sindhi",
+      nativeName: "सिन्धी"
+    },
+    se: {
+      name: "Northern Sami",
+      nativeName: "Davvisámegiella"
+    },
+    sg: {
+      name: "Sango",
+      nativeName: "yângâ tî sängö"
+    },
+    si: {
+      name: "Sinhala",
+      nativeName: "සිංහල"
+    },
+    sk: {
+      name: "Slovak",
+      nativeName: "Slovenčina"
+    },
+    sl: {
+      name: "Slovenian",
+      nativeName: "slovenščina"
+    },
+    sm: {
+      name: "Samoan",
+      nativeName: "gagana fa'a Samoa"
+    },
+    sn: {
+      name: "Shona",
+      nativeName: "chiShona"
+    },
+    so: {
+      name: "Somali",
+      nativeName: "Soomaaliga"
+    },
+    sq: {
+      name: "Albanian",
+      nativeName: "Shqip"
+    },
+    sr: {
+      name: "Serbian",
+      nativeName: "српски језик"
+    },
+    ss: {
+      name: "Swati",
+      nativeName: "SiSwati"
+    },
+    st: {
+      name: "Southern Sotho",
+      nativeName: "Sesotho"
+    },
+    su: {
+      name: "Sundanese",
+      nativeName: "Basa Sunda"
+    },
+    sv: {
+      name: "Swedish",
+      nativeName: "Svenska"
+    },
+    sw: {
+      name: "Swahili",
+      nativeName: "Kiswahili"
+    },
+    ta: {
+      name: "Tamil",
+      nativeName: "தமிழ்"
+    },
+    te: {
+      name: "Telugu",
+      nativeName: "తెలుగు"
+    },
+    tg: {
+      name: "Tajik",
+      nativeName: "тоҷикӣ"
+    },
+    th: {
+      name: "Thai",
+      nativeName: "ไทย"
+    },
+    ti: {
+      name: "Tigrinya",
+      nativeName: "ትግርኛ"
+    },
+    tk: {
+      name: "Turkmen",
+      nativeName: "Türkmençe"
+    },
+    tl: {
+      name: "Tagalog",
+      nativeName: "Wikang Tagalog"
+    },
+    tn: {
+      name: "Tswana",
+      nativeName: "Setswana"
+    },
+    to: {
+      name: "Tonga",
+      nativeName: "faka Tonga"
+    },
+    tr: {
+      name: "Turkish",
+      nativeName: "Türkçe"
+    },
+    ts: {
+      name: "Tsonga",
+      nativeName: "Xitsonga"
+    },
+    tt: {
+      name: "Tatar",
+      nativeName: "татар теле"
+    },
+    tw: {
+      name: "Twi",
+      nativeName: "Twi"
+    },
+    ty: {
+      name: "Tahitian",
+      nativeName: "Reo Tahiti"
+    },
+    ug: {
+      name: "Uyghur",
+      nativeName: "ئۇيغۇرچە‎"
+    },
+    uk: {
+      name: "Ukrainian",
+      nativeName: "Українська"
+    },
+    ur: {
+      name: "Urdu",
+      nativeName: "اردو"
+    },
+    uz: {
+      name: "Uzbek",
+      nativeName: "Ўзбек"
+    },
+    ve: {
+      name: "Venda",
+      nativeName: "Tshivenḓa"
+    },
+    vi: {
+      name: "Vietnamese",
+      nativeName: "Tiếng Việt"
+    },
+    vo: {
+      name: "Volapük",
+      nativeName: "Volapük"
+    },
+    wa: {
+      name: "Walloon",
+      nativeName: "walon"
+    },
+    wo: {
+      name: "Wolof",
+      nativeName: "Wollof"
+    },
+    xh: {
+      name: "Xhosa",
+      nativeName: "isiXhosa"
+    },
+    yi: {
+      name: "Yiddish",
+      nativeName: "ייִדיש"
+    },
+    yo: {
+      name: "Yoruba",
+      nativeName: "Yorùbá"
+    },
+    za: {
+      name: "Zhuang",
+      nativeName: "Saɯ cueŋƅ"
+    },
+    zh: {
+      name: "Chinese",
+      nativeName: "中文"
+    },
+    zu: {
+      name: "Zulu",
+      nativeName: "isiZulu"
+    }
+  }), C;
+}
+var w, $;
+function se() {
+  if ($) return w;
+  $ = 1;
+  const e = ne(), a = {}, t = {}, n = [], i = [], m = [];
+  for (const d in e) {
+    const { name: c, nativeName: h } = e[d];
+    a[d] = t[c.toLowerCase()] = t[h.toLowerCase()] = { code: d, name: c, nativeName: h }, n.push(d), i.push(c), m.push(h);
+  }
+  return w = class y {
+    static getLanguages(c = []) {
+      return c.map(
+        (h) => y.validate(h) ? Object.assign({}, a[h]) : { code: h, name: "", nativeName: "" }
+      );
+    }
+    static getName(c) {
+      return y.validate(c) ? e[c].name : "";
+    }
+    static getAllNames() {
+      return i.slice();
+    }
+    static getNativeName(c) {
+      return y.validate(c) ? e[c].nativeName : "";
+    }
+    static getAllNativeNames() {
+      return m.slice();
+    }
+    static getCode(c) {
+      return c = c.toLowerCase(), t.hasOwnProperty(c) ? t[c].code : "";
+    }
+    static getAllCodes() {
+      return n.slice();
+    }
+    static validate(c) {
+      return e.hasOwnProperty(c);
+    }
+  }, w;
+}
+var re = se();
+const oe = /* @__PURE__ */ V(re);
+var le = 0;
+function me(e) {
+  var a = ++le;
+  return Y(e) + a;
+}
+const ce = L`
+  :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 {
+    position: relative;
+    z-index: 1;
+  }
+
+  .asset-picker__image {
+    --height: 150px;
+    --width: 200px;
+    border-radius: var(--cx-border-radius-medium);
+  }
+
+  .asset-picker__input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+`;
+var de = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, p = (e, a, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? ue(a, t) : a, m = e.length - 1, d; m >= 0; m--)
+    (d = e[m]) && (i = (n ? d(a, t, i) : d(i)) || i);
+  return n && i && de(a, t, i), i;
+};
+let u = class extends z {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.value = "", this.name = "", this.type = [v.Image], this.multiple = !1, this.accepts = [], this.required = !1, this.disabled = !1, this.onRequestAsset = void 0;
+  }
+  async handleRequestAssetClick() {
+    if (this.onRequestAsset)
+      try {
+        this.emit("cx-asset-request-status", {
+          detail: {
+            busy: !0
+          }
+        });
+        const e = await this.onRequestAsset(
+          this.type.join(" "),
+          this.multiple,
+          this.accepts
+        );
+        if (this.accepts.length > 0 && Object.values(e).some(
+          (t) => !this.accepts.includes(ie(t.src) ?? "")
+        ))
+          ee(this.localize.term("nonAcceptedExtension", this.accepts), {
+            notificationType: "warning"
+          });
+        else if (this.multiple) {
+          const t = Object.values(e);
+          this.emit("cx-content-builder-asset-select", {
+            detail: t
+          });
+        } else {
+          const { id: t, name: n, src: i, type: m } = e;
+          let d = i;
+          m === v.Audio && (d = (await ae({
+            extraFields: [I],
+            recordIds: [t]
+          })).items[0]?.[I]), d && this.emit("cx-content-builder-asset-select", {
+            detail: {
+              id: t,
+              name: n,
+              src: d,
+              type: m
+            }
+          });
+        }
+      } catch {
+      } finally {
+        this.emit("cx-asset-request-status", {
+          detail: {
+            busy: !1
+          }
+        });
+      }
+  }
+  async handleValueChange() {
+    await this.updateComplete, this.inputEl?.setCustomValidity(
+      !this.required || this.value ? "" : this.localize.term("pleaseSelectAnAsset")
+    );
+  }
+  handleDeleteClick() {
+    this.emit("cx-content-builder-asset-delete");
+  }
+  /** True when the picker accepts this asset type. */
+  acceptsType(e) {
+    return this.type.includes(e);
+  }
+  renderAssetPreview() {
+    if (this.value && this.acceptsType(v.Image))
+      return l`<cx-image
+        part="image"
+        class="asset-picker__image"
+        src=${this.value}
+        alt=${this.name}
+        width="200px"
+        object-fit=${te.Cover}
+      ></cx-image>`;
+    if (this.name && this.acceptsType(v.Video))
+      return l`
+       <cx-typography variant="body-2">
+       ${A(this.name, 30, 11, 11)}
+       </cx-typography>`;
+    if (this.name && this.acceptsType(v.Other)) {
+      const e = this.name.split(",");
+      return l`<cx-typography variant="body-2">
+        ${A(e[0], 30, 11, 11)}
+
+        ${g(
+        e.length > 1,
+        () => l` ${this.localize.term("andOthers", e.length - 1)}`
+      )}
+      </cx-typography>`;
+    }
+    if (this.name && this.acceptsType(v.All)) {
+      const e = this.name.split(",");
+      return l`<cx-typography variant="body-2">
+        ${A(e[0], 30, 11, 11)}
+        ${g(e.length > 1, () => l` ${this.localize.term("andOthers", e.length - 1)}`)}
+      </cx-typography>`;
+    }
+    return null;
+  }
+  render() {
+    return l`
+      <cx-space
+        part="base"
+        class="asset-picker"
+        spacing="2x-small"
+        direction="horizontal"
+        align-items=${this.acceptsType(v.Image) ? "flex-start" : "center"}
+      >
+        ${this.renderAssetPreview()}
+        ${g(
+      !this.disabled,
+      () => l`
+            <div 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>
+              <cx-button
+                part="button"
+                class="asset-picker__button"
+                @click=${this.handleRequestAssetClick}
+              >
+                ${this.localize.term("choose")}
+              </cx-button>
+            </div>
+            ${g(
+        this.value,
+        () => l`<cx-icon-button
+                  label=${this.localize.term("delete")}
+                  name="delete"
+                  @click=${this.handleDeleteClick}
+                >
+                </cx-icon-button>`
+      )}
+          `
+    )}
+      </cx-space>
+    `;
+  }
+};
+u.styles = [M, ce];
+u.dependencies = {
+  "cx-button": _,
+  "cx-icon-button": Z,
+  "cx-image": Q,
+  "cx-input": S,
+  "cx-space": E,
+  "cx-typography": T
+};
+p([
+  f(".asset-picker__button")
+], u.prototype, "buttonEl", 2);
+p([
+  f(".asset-picker__input")
+], u.prototype, "inputEl", 2);
+p([
+  o({ reflect: !0, type: String })
+], u.prototype, "value", 2);
+p([
+  o({ reflect: !0, type: String })
+], u.prototype, "name", 2);
+p([
+  o({
+    converter: {
+      fromAttribute: (e) => (e ?? "").split(" ").filter((a) => a !== ""),
+      toAttribute: (e) => e.join(" ")
+    },
+    reflect: !0
+  })
+], u.prototype, "type", 2);
+p([
+  o({ reflect: !0, type: Boolean })
+], u.prototype, "multiple", 2);
+p([
+  o({
+    converter: {
+      fromAttribute: (e) => (e ?? "").split(" ").filter((a) => a !== ""),
+      toAttribute: (e) => e.join(" ")
+    },
+    reflect: !0
+  })
+], u.prototype, "accepts", 2);
+p([
+  o({ reflect: !0, type: Boolean })
+], u.prototype, "required", 2);
+p([
+  o({ attribute: "disabled", reflect: !0, type: Boolean })
+], u.prototype, "disabled", 2);
+p([
+  o({ attribute: "on-request-asset", type: Function })
+], u.prototype, "onRequestAsset", 2);
+p([
+  N("value")
+], u.prototype, "handleValueChange", 1);
+u = p([
+  D("cx-asset-picker")
+], u);
+const pe = L`
+  :host {
+    --overridden-min-height: var(--min-height, 160px);
+    --overridden-max-height: var(--max-height, 260px);
+    display: block;
+    width: 100%;
+  }
+
+  .list-editor {
+    width: 100%;
+  }
+
+  .list-editor__table {
+    --cell-border-color: transparent;
+    --header-font-size: var(--cx-font-size-small);
+    --row-header-border-color: transparent;
+    --cell-horizontal-padding: var(--cx-spacing-2x-small);
+    --min-height: var(--overridden-min-height);
+    --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 he = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, r = (e, a, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? ve(a, t) : a, m = e.length - 1, d; m >= 0; m--)
+    (d = e[m]) && (i = (n ? d(a, t, i) : d(i)) || i);
+  return n && i && he(a, t, i), i;
+};
+const ge = {
+  resizable: !1
+};
+let s = class extends z {
+  constructor() {
+    super(...arguments), this.localize = new O(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",
+          name: "edit",
+          options: {
+            buttonProps: {
+              variant: "default"
+            }
+          },
+          tooltip: this.localize.term("edit")
+        },
+        {
+          icon: "delete",
+          name: "delete",
+          options: {
+            buttonProps: {
+              variant: "default"
+            },
+            iconStyle: {
+              color: "var(--cx-color-danger)"
+            }
+          },
+          tooltip: this.localize.term("delete")
+        }
+      ],
+      options: {
+        placement: U.Right
+      }
+    }, this.OMITTED_FIELDS = ["id"];
+  }
+  get tabs() {
+    return this.translatableControls.length > 0 ? [
+      "general",
+      "translation"
+      /* Translation */
+    ] : [
+      "general"
+      /* General */
+    ];
+  }
+  handleColumnsChange() {
+    this.columnsMap = {}, this.columns.forEach((e) => {
+      this.columnsMap[e.field] = e;
+    }), this.supportedLanguages.length > 1 ? this.translatableControls = this.columns.filter((e) => e.translatable) : this.translatableControls = [];
+  }
+  handleEditedItemChange() {
+    const e = {};
+    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: a, row: t } = e.detail, n = "component" in t ? t.component : t;
+    if (n) {
+      if (this.useEvents) {
+        this.emit(`cx-list-editor-${a}`, {
+          detail: {
+            index: n.getIndex(),
+            item: n.getData()
+          }
+        });
+        return;
+      }
+      a === "edit" ? this.editedItem = n.getData() : a === "delete" && this.emit("cx-list-editor-change", {
+        detail: {
+          data: this.data.filter((i) => i.id !== n.getData().id)
+        }
+      });
+    }
+  }
+  handleCancelClick() {
+    this.disableCloseConfigDialog || (this.isAdding = !1, this.editedItem = null);
+  }
+  handleRequestClose(e) {
+    if (this.disableCloseConfigDialog) {
+      e.preventDefault();
+      return;
+    }
+    e.stopPropagation(), this.isAdding = !1, this.editedItem = null;
+  }
+  handleAddClick() {
+    this.isAdding = !0, this.editedItem = {
+      ...this.sampleItem,
+      id: me(`${Date.now()}-`)
+    };
+  }
+  handleSaveClick() {
+    if (this.editedItem) {
+      const e = this.data.findIndex(
+        (t) => t.id === this.editedItem.id
+      );
+      if (!this.isAdding && e === -1) {
+        this.editedItem = null;
+        return;
+      }
+      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: a
+        }
+      }), this.editedItem = null, this.isAdding = !1;
+    }
+  }
+  handleTableRowMoved() {
+    this.emit("cx-list-editor-change", {
+      detail: {
+        data: this.table?.tabulatorInstance?.getData() ?? this.data ?? []
+      }
+    });
+  }
+  handleAssetRequestStatus(e) {
+    this.disableCloseConfigDialog = e.detail.busy;
+  }
+  async handleLoadingEventChange() {
+    if (await this.updateComplete, !this.table)
+      return;
+    if (!this.loadingItemIndex) {
+      this.table.tabulatorInstance?.getRows().forEach((t) => {
+        const n = t._row.hoverMenuElement;
+        t._row.hoverMenuElement.actions = n.actions.map((i) => (i.options?.buttonProps && (i.options.buttonProps.loading = !1), i));
+      });
+      return;
+    }
+    const e = this.table.tabulatorInstance?.getRow(this.loadingItemIndex);
+    if (!e || !e?._row?.hoverMenuElement)
+      return;
+    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));
+  }
+  renderControls(e) {
+    if (e === "translation") {
+      const a = l`
+        ${x(
+        this.translatableControls,
+        (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">
+                    ${X(this.supportedLanguages, (n) => {
+          const i = this.localize.languageName(n) || oe.getName(n) || n, m = (d) => {
+            const c = d.target.value;
+            this.editedItem = {
+              ...this.editedItem,
+              [`${t.field}-${n}`]: c
+            };
+          };
+          return l`
+                        <cx-input
+                          ?disabled=${n.toLowerCase() === this.defaultLanguage?.toLowerCase()}
+                          label=${i}
+                          value=${this.editedItem?.[`${t.field}-${n}`] ?? this.editedItem?.[`${t.field}`] ?? ""}
+                          @cx-change=${m}
+                        ></cx-input>
+                      `;
+        })}
+                  </cx-space>
+                </cx-grid-item>
+              </cx-grid>`
+      )}
+      `;
+      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,
+      ([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">
+                ${W(
+        this.columnsMap[a].controlType,
+        [
+          [
+            "image-picker",
+            () => l`<cx-asset-picker
+                          value=${t}
+                          type="image"
+                          id=${a}
+                          @cx-content-builder-asset-select=${async (m) => {
+              if (Array.isArray(m.detail))
+                return;
+              const { src: d } = m.detail;
+              this.editedItem = {
+                ...this.editedItem,
+                [a]: d
+              };
+            }}
+                          @cx-content-builder-asset-delete=${async () => {
+              this.editedItem = {
+                ...this.editedItem,
+                [a]: ""
+              };
+            }}
+                          @cx-asset-request-status=${this.handleAssetRequestStatus}
+                          .onRequestAsset=${this.onRequestAsset}
+                        >
+                        </cx-asset-picker>`
+          ],
+          [
+            "radio-group",
+            () => {
+              const n = (i) => {
+                const m = i.target.value;
+                this.editedItem = {
+                  ...this.editedItem,
+                  [a]: m
+                };
+              };
+              return l`<cx-radio-group
+                          data-testid="radio-group-control"
+                          horizontal
+                          value=${(t || this.columnsMap[a].defaultValue) ?? ""}
+                          size="medium"
+                          @cx-change=${n}
+                        >
+                          ${x(
+                this.columnsMap[a].options ?? [],
+                (i) => i.value,
+                (i) => l`<cx-radio value=${i.value}>
+                                ${i.name}
+                              </cx-radio>`
+              )}
+                        </cx-radio-group>`;
+            }
+          ]
+        ],
+        () => l`
+                      <cx-input
+                        value=${t}
+                        @cx-change=${(i) => {
+          const m = i.target.value;
+          this.editedItem = {
+            ...this.editedItem,
+            [a]: m
+          };
+        }}
+                      ></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=${J({
+      "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=${ge}
+            .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>
+              ${g(
+      !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>
+            ${g(
+      this.tabs.length > 1,
+      () => l`
+              <cx-tab-group
+                class="list-editor__tab-group"
+                placement="top"
+              >
+                ${x(
+        this.tabs,
+        (e) => e,
+        (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>
+        ${g(
+      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>
+    `;
+  }
+};
+s.styles = [M, pe];
+s.dependencies = {
+  "cx-asset-picker": u,
+  "cx-button": _,
+  "cx-dialog": q,
+  "cx-grid": G,
+  "cx-grid-item": R,
+  "cx-input": S,
+  "cx-line-clamp": P,
+  "cx-radio": F,
+  "cx-radio-group": B,
+  "cx-space": E,
+  "cx-table": K,
+  "cx-typography": T
+};
+r([
+  f("cx-dialog")
+], s.prototype, "dialog", 2);
+r([
+  f("cx-table")
+], s.prototype, "table", 2);
+r([
+  o({
+    converter: {
+      fromAttribute: (e) => {
+        try {
+          const a = JSON.parse(e);
+          return Array.isArray(a) ? a : [];
+        } catch {
+          return [];
+        }
+      },
+      toAttribute: (e) => JSON.stringify(e)
+    },
+    reflect: !1,
+    type: String
+  })
+], s.prototype, "data", 2);
+r([
+  o({ attribute: "can-add", reflect: !0, type: Boolean })
+], s.prototype, "canAdd", 2);
+r([
+  o({ attribute: "add-dialog-label", reflect: !0, type: String })
+], s.prototype, "addDialogLabel", 2);
+r([
+  o({ attribute: "edit-dialog-label", reflect: !0, type: String })
+], s.prototype, "editDialogLabel", 2);
+r([
+  o({ attribute: "display-field", reflect: !0, type: String })
+], s.prototype, "displayField", 2);
+r([
+  o({ attribute: "description-field", reflect: !0, type: String })
+], s.prototype, "descriptionField", 2);
+r([
+  o({ attribute: "add-item-text", reflect: !0, type: String })
+], s.prototype, "addItemText", 2);
+r([
+  o({ attribute: "sample-item", type: Object })
+], s.prototype, "sampleItem", 2);
+r([
+  o({ attribute: "use-events", reflect: !0, type: Boolean })
+], s.prototype, "useEvents", 2);
+r([
+  o({ reflect: !0, type: Boolean })
+], s.prototype, "sortable", 2);
+r([
+  o({ attribute: "loading-event", reflect: !0, type: String })
+], s.prototype, "loadingEvent", 2);
+r([
+  o({ attribute: "loading-item-index", reflect: !0, type: String })
+], s.prototype, "loadingItemIndex", 2);
+r([
+  o({ attribute: "columns", reflect: !1, type: Array })
+], s.prototype, "columns", 2);
+r([
+  o({ attribute: "no-header", reflect: !0, type: Boolean })
+], s.prototype, "noHeader", 2);
+r([
+  o({ attribute: "row-height", reflect: !0, type: Number })
+], s.prototype, "rowHeight", 2);
+r([
+  o({ attribute: "default-language", reflect: !0, type: String })
+], s.prototype, "defaultLanguage", 2);
+r([
+  o({
+    attribute: "supported-languages",
+    converter: {
+      fromAttribute: (e) => e.split(" "),
+      toAttribute: (e) => Array.isArray(e) ? e.join(" ") : e
+    },
+    reflect: !0,
+    type: Array
+  })
+], s.prototype, "supportedLanguages", 2);
+r([
+  o({ type: Object })
+], s.prototype, "boundary", 2);
+r([
+  o({ attribute: "on-request-asset", type: Function })
+], s.prototype, "onRequestAsset", 2);
+r([
+  b()
+], s.prototype, "editedItem", 2);
+r([
+  b()
+], s.prototype, "isAdding", 2);
+r([
+  b()
+], s.prototype, "columnsMap", 2);
+r([
+  b()
+], s.prototype, "sortedEntries", 2);
+r([
+  b()
+], s.prototype, "translatableControls", 2);
+r([
+  N("columns"),
+  N("supportedLanguages", { waitUntilFirstUpdate: !0 })
+], s.prototype, "handleColumnsChange", 1);
+r([
+  N("editedItem"),
+  N("columns", { waitUntilFirstUpdate: !0 })
+], s.prototype, "handleEditedItemChange", 1);
+r([
+  N("loadingEvent", { waitUntilFirstUpdate: !0 }),
+  N("loadingItemIndex", { waitUntilFirstUpdate: !0 }),
+  H(10)
+], s.prototype, "handleLoadingEventChange", 1);
+s = r([
+  D("cx-list-editor")
+], s);
+export {
+  s as C,
+  oe as I,
+  u as a,
+  ge as c,
+  me as u
+};