import { C as k } from "./button.CAa1kvwe.js";
import { C as G, D as q } from "./dialog.BLaxLMSc.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.DGXQzdtb.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.CGT3XSSx.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 M } from "./custom-element.L4WJXn1j.js";
import { d as J } from "./debounce.DaHuiSGU.js";
import { L as z } from "./i18n.BABe9hN4.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 { 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 { 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.C2s3pHG4.js";
import { C as ae } from "./image.RAgoEmf7.js";
import { a as ie, D as I } from "./asset.53rQdj1g.js";
import { a as ne } 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 = {
    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"
    }
  }), A;
}
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);
  }
  return C = class f {
    static getLanguages(m = []) {
      return m.map(
        (h) => f.validate(h) ? Object.assign({}, t[h]) : { code: h, name: "", nativeName: "" }
      );
    }
    static getName(m) {
      return f.validate(m) ? e[m].name : "";
    }
    static getAllNames() {
      return s.slice();
    }
    static getNativeName(m) {
      return f.validate(m) ? e[m].nativeName : "";
    }
    static getAllNativeNames() {
      return p.slice();
    }
    static getCode(m) {
      return m = m.toLowerCase(), a.hasOwnProperty(m) ? a[m].code : "";
    }
    static getAllCodes() {
      return i.slice();
    }
    static validate(m) {
      return e.hasOwnProperty(m);
    }
  }, C;
}
var me = le();
const ce = /* @__PURE__ */ X(me);
var de = 0;
function pe(e) {
  var t = ++de;
  return ee(e) + t;
}
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;
};
let d = class extends L {
  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;
  }
  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(
          (a) => !this.accepts.includes(se(a.src) ?? "")
        ))
          re(this.localize.term("nonAcceptedExtension", this.accepts), {
            notificationType: "warning"
          });
        else if (this.multiple) {
          const a = Object.values(e);
          this.emit("cx-content-builder-asset-select", {
            detail: a
          });
        } 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", {
            detail: {
              id: a,
              name: i,
              src: c,
              type: p
            }
          });
        }
      } 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")
    );
  }
  async handleRecordIdChange() {
    if (!this.recordId) {
      this.previewSrc = "";
      return;
    }
    try {
      const t = (await this.apiGetAssets({
        getPermanentAssetsPaths: !0,
        recordIds: [this.recordId]
      })).items[0];
      this.previewSrc = t?.path_TR1 || t?.originalUrl || "";
    } catch {
      this.previewSrc = "";
    }
  }
  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.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>`;
    if (this.name && this.acceptsType(g.Video))
      return l`<cx-typography variant="body-2">${w(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)}
        ${N(
        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(g.Image) ? "flex-start" : "center"}>${this.renderAssetPreview()}
        ${N(
      !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>${N(
        this.value,
        () => l`<cx-icon-button label=${this.localize.term("delete")} name="delete" @click=${this.handleDeleteClick}></cx-icon-button>`
      )}
          `
    )}</cx-space>`;
  }
};
d.styles = [D, ue];
d.dependencies = {
  "cx-button": k,
  "cx-icon-button": te,
  "cx-image": ae,
  "cx-input": _,
  "cx-space": E,
  "cx-typography": T
};
u([
  y(".asset-picker__button")
], d.prototype, "buttonEl", 2);
u([
  y(".asset-picker__input")
], d.prototype, "inputEl", 2);
u([
  o({ reflect: !0, type: String })
], d.prototype, "value", 2);
u([
  o({ reflect: !0, type: String })
], d.prototype, "name", 2);
u([
  o({
    converter: {
      fromAttribute: (e) => (e ?? "").split(" ").filter((t) => t !== ""),
      toAttribute: (e) => e.join(" ")
    },
    reflect: !0
  })
], d.prototype, "type", 2);
u([
  o({ reflect: !0, type: Boolean })
], d.prototype, "multiple", 2);
u([
  o({
    converter: {
      fromAttribute: (e) => (e ?? "").split(" ").filter((t) => t !== ""),
      toAttribute: (e) => e.join(" ")
    },
    reflect: !0
  })
], d.prototype, "accepts", 2);
u([
  o({ reflect: !0, type: Boolean })
], d.prototype, "required", 2);
u([
  o({ attribute: "disabled", reflect: !0, type: Boolean })
], d.prototype, "disabled", 2);
u([
  o({ attribute: "on-request-asset", type: Function })
], d.prototype, "onRequestAsset", 2);
u([
  o({ attribute: "record-id", reflect: !0, type: String })
], d.prototype, "recordId", 2);
u([
  b()
], d.prototype, "previewSrc", 2);
u([
  v("value")
], d.prototype, "handleValueChange", 1);
u([
  v("recordId")
], d.prototype, "handleRecordIdChange", 1);
d = 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;
};
const xe = {
  resizable: !1
};
let n = class extends L {
  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 = {
      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: V.Right
      }
    }, this.OMITTED_FIELDS = ["id"];
  }
  get tabs() {
    return this.translatableControls.length > 0 && this.supportedLanguages.length > 1 ? [
      "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 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));
  }
  handleTableActions(e) {
    const { name: t, row: a } = e.detail, i = "component" in a ? a.component : a;
    if (i) {
      if (this.useEvents) {
        this.emit(`cx-list-editor-${t}`, {
          detail: {
            index: i.getIndex(),
            item: i.getData()
          }
        });
        return;
      }
      t === "edit" ? this.editedItem = i.getData() : t === "delete" && this.emit("cx-list-editor-change", {
        detail: {
          data: this.data.filter((s) => s.id !== i.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: pe(`${Date.now()}-`)
    };
  }
  handleSaveClick() {
    if (this.editedItem) {
      const e = this.data.findIndex(
        (a) => a.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", {
        detail: {
          data: t
        }
      }), 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((a) => {
        const i = a._row.hoverMenuElement;
        a._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));
  }
  handleChange(e) {
    if (!e.target)
      return;
    const t = e.target, a = t.dataset.id;
    if (!a)
      return;
    let i = t.value;
    Array.isArray(i) ? i = i.join(" ") : i = String(i), this.editedItem = {
      ...this.editedItem,
      [a]: i
    };
  }
  renderControls(e) {
    if (e === "translation") {
      const t = 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;
            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>`;
        })}</cx-space></cx-grid-item></cx-grid>`
      )}
      `;
      return l`<cx-space direction="vertical" wrap="nowrap">${t}</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,
        [
          [
            "image-picker",
            () => {
              const i = async (p) => {
                if (Array.isArray(p.detail))
                  return;
                const { id: c, src: m } = p.detail;
                this.editedItem = {
                  ...this.editedItem,
                  [t]: m,
                  recordId: c
                };
              }, s = async () => {
                this.editedItem = {
                  ...this.editedItem,
                  [t]: "",
                  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>`;
            }
          ],
          [
            "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 ?? [],
              (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 ?? [],
              (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>`
      )}</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({
      "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(
      !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(
      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>${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>`;
  }
};
n.styles = [D, ge];
n.dependencies = {
  "cx-asset-picker": d,
  "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
};
r([
  y("cx-dialog")
], n.prototype, "dialog", 2);
r([
  y("cx-table")
], n.prototype, "table", 2);
r([
  o({
    converter: {
      fromAttribute: (e) => {
        try {
          const t = JSON.parse(e);
          return Array.isArray(t) ? t : [];
        } catch {
          return [];
        }
      },
      toAttribute: (e) => JSON.stringify(e)
    },
    reflect: !1,
    type: String
  })
], n.prototype, "data", 2);
r([
  o({ attribute: "can-add", reflect: !0, type: Boolean })
], n.prototype, "canAdd", 2);
r([
  o({ attribute: "add-dialog-label", reflect: !0, type: String })
], n.prototype, "addDialogLabel", 2);
r([
  o({ attribute: "edit-dialog-label", reflect: !0, type: String })
], n.prototype, "editDialogLabel", 2);
r([
  o({ attribute: "display-field", reflect: !0, type: String })
], n.prototype, "displayField", 2);
r([
  o({ attribute: "description-field", reflect: !0, type: String })
], n.prototype, "descriptionField", 2);
r([
  o({ attribute: "add-item-text", reflect: !0, type: String })
], n.prototype, "addItemText", 2);
r([
  o({ attribute: "sample-item", type: Object })
], n.prototype, "sampleItem", 2);
r([
  o({ attribute: "use-events", reflect: !0, type: Boolean })
], n.prototype, "useEvents", 2);
r([
  o({ reflect: !0, type: Boolean })
], n.prototype, "sortable", 2);
r([
  o({ attribute: "loading-event", reflect: !0, type: String })
], n.prototype, "loadingEvent", 2);
r([
  o({ attribute: "loading-item-index", reflect: !0, type: String })
], n.prototype, "loadingItemIndex", 2);
r([
  o({ attribute: "columns", reflect: !1, type: Array })
], n.prototype, "columns", 2);
r([
  o({ attribute: "no-header", reflect: !0, type: Boolean })
], n.prototype, "noHeader", 2);
r([
  o({ attribute: "row-height", reflect: !0, type: Number })
], n.prototype, "rowHeight", 2);
r([
  o({ attribute: "default-language", reflect: !0, type: String })
], n.prototype, "defaultLanguage", 2);
r([
  o({
    attribute: "supported-languages",
    converter: {
      fromAttribute: (e) => e.split(" ").filter(Boolean),
      toAttribute: (e) => Array.isArray(e) ? e.join(" ") : e
    },
    reflect: !0,
    type: Array
  })
], n.prototype, "supportedLanguages", 2);
r([
  o({ type: Object })
], n.prototype, "boundary", 2);
r([
  o({ attribute: "on-request-asset", type: Function })
], n.prototype, "onRequestAsset", 2);
r([
  b()
], n.prototype, "editedItem", 2);
r([
  b()
], n.prototype, "isAdding", 2);
r([
  b()
], n.prototype, "columnsMap", 2);
r([
  b()
], n.prototype, "sortedEntries", 2);
r([
  b()
], n.prototype, "translatableControls", 2);
r([
  v("columns"),
  v("supportedLanguages", { waitUntilFirstUpdate: !0 })
], n.prototype, "handleColumnsChange", 1);
r([
  v("editedItem"),
  v("columns", { waitUntilFirstUpdate: !0 })
], n.prototype, "handleEditedItemChange", 1);
r([
  v("loadingEvent", { waitUntilFirstUpdate: !0 }),
  v("loadingItemIndex", { waitUntilFirstUpdate: !0 }),
  J(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
};
