@orangelogic/design-system 4.2.0 → 4.4.0

package/library/chunks/index.DKKvxBAi.js

@@ -0,0 +1,1130 @@
+import { C as N } from "./typography.BLYdTF0n.js";
+import { n, C as O } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as M } from "./component.styles.CAS3c9pM.js";
+import { s as V } from "./folder-select.DAZQRdLq.js";
+import { E as F, B as H } from "./content-builder.CBBdfVOl.js";
+import { c as j } from "./custom-element.L4WJXn1j.js";
+import { L as R } from "./i18n.BSPmBQ73.js";
+import { w as k } from "./watch.DJF5K-8U.js";
+import { B as U, E as P, i as G, x as h } from "./lit-element.jLBm65_O.js";
+import { r as g } from "./state.CSDxrqLd.js";
+import { e as $ } from "./query.BBf1UFkC.js";
+import { b as W } from "./_baseIteratee.sC2wLi2m.js";
+import { a as J } from "./toString.B1zKIiZc.js";
+import { b as X } from "./cloneDeep.tKGbEwzn.js";
+import { c as Y } from "./_baseClone.ipmFlCAx.js";
+import { F as _, a as Q, C as Z, I as tt, t as et, c as ot, b as st, d as rt, e as it, f as at, g as nt, h as lt, i as ct, j as pt, k as ht, l as dt, m as ut, n as mt, o as ft, p as gt, q as bt, r as yt, s as xt, O as Ct } from "./types.PdpKNndx.js";
+import { C as wt } from "./button.cbDkxJHn.js";
+import vt from "../components/button-group.js";
+import kt from "../components/card.js";
+import $t from "../components/checkbox.js";
+import { C as Tt, D } from "./dialog.BvSMV36r.js";
+import St from "../components/divider.js";
+import At from "../components/dropdown.js";
+import Ft from "../components/grid.js";
+import Pt from "../components/grid-item.js";
+import { C as _t } from "./icon.BLXWp6CU.js";
+import { C as Rt } from "./input.7pumTpdu.js";
+import Dt from "../components/line-clamp.js";
+import It from "../components/menu.js";
+import { C as qt } from "./menu-item.CqPvDGeN.js";
+import { C as Lt } from "./option.dBUWN4sF.js";
+import Bt from "../components/radio.js";
+import Et from "../components/radio-card.js";
+import zt from "../components/radio-group.js";
+import Nt from "../components/select.js";
+import Ot from "../components/space.js";
+import Mt from "../components/switch.js";
+import Vt from "../components/tab.js";
+import { C as jt } from "./tab-group.DOnaT12G.js";
+import Gt from "../components/tab-panel.js";
+import Wt from "../components/textarea.js";
+import Kt from "../components/tooltip.js";
+import Ht from "../components/visually-hidden.js";
+import Ut from "../components/bicolor-picker.js";
+import Jt from "../components/border-input-group.js";
+import { C as Xt, a as Yt } from "./confirm-popover.Dvgoz-oA.js";
+import Qt from "../components/corner-position-input-group.js";
+import Zt from "../components/dynamic-select.js";
+import te from "../components/padding-input-group.js";
+import ee from "../components/position-picker.js";
+import oe from "../components/shadow-input-group.js";
+import se from "../components/size-input-group.js";
+import { isFormInteracted as re } from "../utils.js";
+import { e as ie, i as ae } from "./directive.oAbCiebi.js";
+import { e as I, p as q, m as L, s as B, h as ne, l as le } from "./directive-helpers.DEDMV45_.js";
+import { i as ce } from "./keyed.DdOUTIg-.js";
+import { c as A } from "./repeat.CFjcER6_.js";
+import { n as y } from "./when.Dr1es41R.js";
+import { b as pe } from "./_baseXor.BCxbgizO.js";
+import { a as he, i as E, b as de } from "./isArrayLikeObject.D7afXo-f.js";
+import { i as ue } from "./isEmpty.DtTJTUcf.js";
+import { u as K } from "./asset-link-format.DTLA2CFh.js";
+import { r as me } from "./choose.BTbF6BAn.js";
+import { o as S } from "./if-defined.BRoBj_Rp.js";
+import { o as fe } from "./map.D8heArFD.js";
+import { e as ge, n as be } from "./ref.DktKp7fP.js";
+import { o as ye } from "./style-map.llVFPd__.js";
+var xe = "Expected a function";
+function Ce(t) {
+  if (typeof t != "function")
+    throw new TypeError(xe);
+  return function() {
+    var e = arguments;
+    switch (e.length) {
+      case 0:
+        return !t.call(this);
+      case 1:
+        return !t.call(this, e[0]);
+      case 2:
+        return !t.call(this, e[0], e[1]);
+      case 3:
+        return !t.call(this, e[0], e[1], e[2]);
+    }
+    return !t.apply(this, e);
+  };
+}
+function we(t, e) {
+  if (t == null)
+    return {};
+  var o = J(Y(t), function(a) {
+    return [a];
+  });
+  return e = W(e), X(t, o, function(a, i) {
+    return e(a, i[0]);
+  });
+}
+function ve(t, e) {
+  return we(t, Ce(W(e)));
+}
+const ke = /* @__PURE__ */ new Map([
+  ["100", "Thin"],
+  ["200", "Extra Light"],
+  ["300", "Light"],
+  ["400", "Regular"],
+  ["500", "Medium"],
+  ["600", "Semi Bold"],
+  ["700", "Bold"],
+  ["800", "Extra Bold"],
+  ["900", "Black"]
+]);
+_.Cff, _.TrueType;
+new Set(Object.values(_));
+new RegExp(
+  `\\$\\{(${Object.values(Q).join("|")})\\}`,
+  "g"
+);
+function $e(t) {
+  return /italic/i.test(t) ? "italic" : "normal";
+}
+function Te(t) {
+  return ke.get(t.trim()) ?? t;
+}
+function Se(t) {
+  const e = /* @__PURE__ */ new Map();
+  for (const o of t) {
+    const a = $e(o.fontStyle), i = Number(o.fontWeight) || 400, r = `${i}:${a}`;
+    e.has(r) || e.set(r, {
+      fontStyle: a,
+      fontWeight: i,
+      name: `${Te(String(i))}${a === "italic" ? " Italic" : ""}`
+    });
+  }
+  return [...e.values()].sort(
+    (o, a) => (o.fontWeight ?? 400) - (a.fontWeight ?? 400) || (o.fontStyle ?? "").localeCompare(a.fontStyle ?? "")
+  );
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const z = (t) => le(t) ? t._$litType$.h : t.strings, Ae = ie(class extends ae {
+  constructor(t) {
+    super(t), this.et = /* @__PURE__ */ new WeakMap();
+  }
+  render(t) {
+    return [t];
+  }
+  update(t, [e]) {
+    const o = I(this.it) ? z(this.it) : null, a = I(e) ? z(e) : null;
+    if (o !== null && (a === null || o !== a)) {
+      const i = q(t).pop();
+      let r = this.et.get(o);
+      if (r === void 0) {
+        const s = document.createDocumentFragment();
+        r = U(P, s), r.setConnected(!1), this.et.set(o, r);
+      }
+      L(r, [i]), B(r, void 0, i);
+    }
+    if (a !== null) {
+      if (o === null || o !== a) {
+        const i = this.et.get(a);
+        if (i !== void 0) {
+          const r = q(i).pop();
+          ne(t), B(t, void 0, r), L(t, [r]);
+        }
+      }
+      this.it = e;
+    } else this.it = void 0;
+    return this.render(e);
+  }
+});
+var Fe = he(function(t, e) {
+  return E(t) ? pe(t, de(e, 1, E, !0)) : [];
+});
+const Pe = G`:host{display:block}.config-form{--body-spacing:0;--header-spacing:var(--cx-spacing-small) var(--cx-spacing-large) 0;--width:680px;--cx-input-required-content-display:none;color:var(--cx-color-neutral)}.config-form__dropdown{text-align:left}.config-form__checkbox-group-item{--item-padding:0;--selected-background-color:transparent}.config-form__radio-card{--radio-card-overflow:clip}.config-form__dropdown-menu{--checked-icon-display:none}.config-form__confirm-popover{--confirm-popover-dialog-width:fit-content;--confirm-button-background-color:var(--cx-color-danger-500);--cancel-button-background-color:var(--cx-color-neutral-100);--cancel-button-color:var(--cx-color-neutral-700)}.config-form__tab-group{--padding:0;--tab-group-nav-padding:0 var(--cx-spacing-large);--tab-group-top-gap:0}.config-form__tab-group::part(nav){background-color:var(--cx-color-neutral-0);z-index:1;position:sticky;top:0}`;
+class _e {
+  constructor(e) {
+    this.host = e, this.localize = new R(this.host), this.controlRenderer = new Z(this.host, {
+      commit: async ({ callback: o, immediate: a, key: i, type: r, value: s }) => {
+        if (a && r === "attribute") {
+          this.handleAttributeChange(i, s, o);
+          return;
+        }
+        await this.handleConfigChange(i, s, r, o);
+      },
+      getContext: () => ({
+        allowedFolders: this.host.allowedFolders,
+        baseUrl: this.host.baseUrl,
+        blockAttributes: this.host.blockAttributes,
+        blockStyles: this.host.blockStyles,
+        boundary: this.host.boundary,
+        defaultLanguage: this.host.defaultLanguage,
+        isAfterShow: this.host.isAfterShow,
+        onConfigureWorkflow: this.host.onConfigureWorkflow,
+        onRequestAsset: this.host.onRequestAsset,
+        onRequestAssetFormat: this.host.onRequestAssetFormat,
+        onRequestDownloadFormat: this.host.onRequestDownloadFormat,
+        sortedLanguages: this.host.sortedLanguages,
+        token: this.host.token,
+        traits: this.host.traits
+      }),
+      renderChildren: (o, a) => this.renderBasicControls(o, a)
+    });
+  }
+  hostConnected() {
+    this.host.addController(this);
+  }
+  handleStyleChange(e, o, a) {
+    let i = { ...this.host.blockStyles };
+    a && (i = a({
+      record: i,
+      value: o
+    })), i = {
+      ...i,
+      [e]: o
+    }, this.host.emit("cx-content-builder-form-change", {
+      detail: {
+        type: "style",
+        value: i
+      }
+    });
+  }
+  handleAttributeChange(e, o, a) {
+    let i = { ...this.host.blockAttributes };
+    a && (i = a({
+      record: i,
+      value: o
+    })), i = {
+      ...i,
+      [e]: o
+    }, this.host.emit("cx-content-builder-form-change", {
+      detail: {
+        type: "attribute",
+        value: i
+      }
+    });
+  }
+  handlePropertyChange(e, o, a) {
+    let i = { ...this.host.blockProperties };
+    a && (i = a({
+      record: i,
+      value: o
+    })), i = {
+      ...i,
+      [e]: o
+    }, this.host.emit("cx-content-builder-form-change", {
+      detail: {
+        type: "property",
+        value: i
+      }
+    });
+  }
+  async handleConfigChange(e, o, a, i) {
+    if (await this.host.updateComplete, a === "attribute") {
+      let r;
+      typeof o == "boolean" ? r = o : typeof o == "object" || Array.isArray(o) ? r = JSON.stringify(o) : r = String(o), this.handleAttributeChange(e, r, i);
+    } else a === "style" ? this.handleStyleChange(e, String(o), i) : a === "property" && this.handlePropertyChange(e, o, i);
+  }
+  renderInfoText(e) {
+    let o = "";
+    typeof e.helpText == "function" ? o = e.helpText(this.host.blockAttributes) : e.helpText && (o = e.helpText);
+    const a = e.infoTextConfigs?.color, i = ye(a ? { "--color": a } : {});
+    return h`<cx-space class="config-form__info-text" direction="vertical" spacing="x-small" wrap="nowrap">${y(
+      e.label,
+      () => h`<cx-typography variant="body3" style=${i}>${e.label}</cx-typography>`
+    )}
+        ${y(
+      o,
+      () => h`<cx-typography variant="body3" class="config-form__help-text" style=${i}>${o}</cx-typography>`
+    )}</cx-space>`;
+  }
+  renderBasicControl({
+    container: e = void 0,
+    currentValue: o,
+    disabled: a,
+    key: i,
+    trait: r,
+    type: s
+  }) {
+    const u = r.label;
+    let m = "";
+    typeof r.helpText == "function" ? m = r.helpText(this.host.blockAttributes) : r.helpText && (m = r.helpText);
+    const x = this.controlRenderer.createChangeHandler({ key: i, trait: r, type: s });
+    return h`<cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.controlRenderer.renderControl({
+      blockAttributes: this.host.blockAttributes,
+      container: e,
+      currentValue: o,
+      disabled: a,
+      handleChange: x,
+      key: i,
+      label: u,
+      trait: {
+        ...r,
+        controlType: r.controlType ? r.controlType : "input"
+      }
+    })}
+        ${y(m, () => h`<cx-typography variant="body3" class="config-form__help-text">${m}</cx-typography>`)}</cx-space>`;
+  }
+  renderBasicControls(e, o, a) {
+    const i = ge(), r = h`
+      ${A(
+      e.filter((s) => {
+        const u = !a || s.name && this.host.tabMap[s.name] === a || o?.name && this.host.tabMap[o.name] === a;
+        let m = !1;
+        return s.controlType === "placeholder" ? m = !0 : (!this.host.skipShowCheck || !s.skipShowCheck) && (typeof s.show == "boolean" ? m = !s.show : typeof s.show == "function" ? m = !s.show(this.host.blockAttributes) : o && typeof o.show == "boolean" ? m = !o.show : o && typeof o.show == "function" && (m = !o.show(this.host.blockAttributes))), s.id && u && s.show !== !1 && !m;
+      }),
+      (s) => s.id,
+      (s) => {
+        const u = s.id;
+        let m = s.label;
+        const x = s.type ?? "attribute";
+        let f = !1;
+        typeof s.disabled == "boolean" ? f = s.disabled : typeof s.disabled == "function" && (f = s.disabled(this.host.blockAttributes)), s.controlType === "checkbox" && (m = "");
+        let b = "";
+        switch (x) {
+          case "style":
+            this.host.blockStyles[u] !== void 0 && (typeof this.host.blockStyles[u] == "string" && this.host.blockStyles[u].includes("url(") ? b = this.host.blockStyles[u].replace(
+              /url\(["']?(.*?)["']?\)/,
+              "$1"
+            ) : this.host.blockStyles[u] === "none" ? b = "" : b = this.host.blockStyles[u]);
+            break;
+          case "attribute":
+            this.host.blockAttributes[u] !== void 0 ? b = this.host.blockAttributes[u] : s.controlType === "size-input-group" && (b = `${this.host.blockAttributes.width} ${this.host.blockAttributes.height}`);
+            break;
+          case "property":
+            this.host.blockProperties[u] !== void 0 && (b = this.host.blockProperties[u]);
+            break;
+        }
+        if (x === "decorative")
+          return me(
+            s.controlType,
+            [
+              [
+                "group-heading",
+                () => h`<cx-typography variant="h5">${m}</cx-typography>`
+              ],
+              [
+                "info-text",
+                () => this.renderInfoText(s)
+              ]
+            ],
+            () => h`<cx-typography variant="h5">${m}</cx-typography>`
+          );
+        if (o) {
+          const w = this.renderBasicControl({
+            container: i,
+            currentValue: b,
+            disabled: f,
+            key: u,
+            trait: s,
+            type: x
+          });
+          if (o.controlType === "group" && o.groupConfigs?.direction === "horizontal") {
+            let C = s.width;
+            if (typeof s.width == "function" && (C = s.width(this.host.blockAttributes)), typeof C == "string" && (C = Number.parseInt(C)), C)
+              return h`<cx-grid-item xs=${C}>${w}</cx-grid-item>`;
+          }
+          return w;
+        }
+        const v = s.direction === "vertical" || s.groupConfigs?.direction === "horizontal" && m === void 0;
+        return h`<cx-grid columns="4" spacing="var(--cx-spacing-small)" column-spacing="0" use-flex-gap row-spacing=${s.direction === "vertical" ? "var(--cx-spacing-small)" : "0"} wrap="wrap">${y(
+          s.direction === "horizontal" || m !== void 0,
+          () => h`<cx-grid-item xs="4" sm=${s.direction === "vertical" ? "4" : "1"}><cx-typography variant="body2">${m}</cx-typography></cx-grid-item>`
+        )}<cx-grid-item xs="4" sm=${v ? "4" : "3"}><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderBasicControl({
+          currentValue: b,
+          disabled: f,
+          key: u,
+          trait: s,
+          type: x
+        })}</cx-space></cx-grid-item></cx-grid>`;
+      }
+    )}
+    `;
+    if (o) {
+      const { controlType: s, groupConfigs: u } = o;
+      if (s === "group" && u?.direction === "horizontal") {
+        const { columnGap: m, gap: x, rowGap: f, wrap: b } = u;
+        return h`<cx-grid columns="100" use-flex-gap spacing=${S(x)} column-spacing=${S(m)} row-spacing=${S(f)} wrap=${S(b)} ${be(i)}>${r}</cx-grid>`;
+      }
+    }
+    return h`<cx-space direction="vertical" wrap="nowrap">${r}</cx-space>`;
+  }
+  renderTranslationControls() {
+    const e = K(
+      this.host.translatableControls.map((a) => a.translateGroup)
+    ), o = h`${A(e, (a) => {
+      const i = this.host.translatableControls.filter((r) => {
+        let s = !1;
+        return (!this.host.skipShowCheck || !r.skipShowCheck) && (typeof r.show == "boolean" ? s = !r.show : typeof r.show == "function" && (s = !r.show(this.host.blockAttributes))), r.translateGroup === a && !s;
+      });
+      return i.length === 0 ? P : h`<cx-typography variant="h5">${a}</cx-typography>${A(
+        i,
+        (r) => r.id,
+        (r) => r.controlType === "info-text" ? this.renderInfoText(r) : h`<cx-grid columns="4" spacing="var(--cx-spacing-small)" column-spacing="0" use-flex-gap row-spacing="0" wrap="wrap"><cx-grid-item xs="4" sm="1"><cx-typography variant="body2">${r.label}</cx-typography></cx-grid-item><cx-grid-item xs="4" sm="3"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${fe(this.host.sortedLanguages, (s) => {
+          const u = this.localize.languageName(s) || tt.getName(s) || s;
+          let m = "";
+          r.id && (s === this.host.defaultLanguage ? m = this.host.blockAttributes[r.id] ?? "" : m = this.host.translatableControlValues[s]?.[r.id] ?? this.host.translatableControlValues[this.host.defaultLanguage]?.[r.id] ?? this.host.blockAttributes[r.id]);
+          let x;
+          switch (r.controlType) {
+            case "image-picker": {
+              x = async (f) => {
+                if (typeof f == "object" && f !== null) {
+                  const { id: b, src: v } = f, w = r.pickerConfigs?.recordIdKey ?? "record-id", C = r.pickerConfigs?.aspectRatioKey, T = b ? await this.controlRenderer.resolveAssetFormat(b, r.pickerConfigs?.defaultFormat ?? "") : { aspectRatio: 0, src: "" };
+                  this.host.emit("cx-content-builder-translatable-value-change", {
+                    detail: {
+                      language: s,
+                      values: [{
+                        attribute: r.id,
+                        type: "attribute",
+                        value: T.src || v
+                      }, {
+                        attribute: w,
+                        type: "attribute",
+                        value: b
+                      }, ...C ? [{
+                        attribute: C,
+                        type: "attribute",
+                        value: String(T.aspectRatio)
+                      }] : []]
+                    }
+                  });
+                }
+              };
+              break;
+            }
+            case "audio-picker":
+            case "video-picker": {
+              x = async (f) => {
+                if (typeof f == "object" && f !== null) {
+                  const { id: b, name: v, src: w } = f, C = r.pickerConfigs?.recordIdKey ?? "record-id", T = r.pickerConfigs?.nameKey ?? "name";
+                  this.host.emit("cx-content-builder-translatable-value-change", {
+                    detail: {
+                      language: s,
+                      values: [{
+                        attribute: r.id,
+                        type: "attribute",
+                        value: w
+                      }, {
+                        attribute: C,
+                        type: "attribute",
+                        value: b
+                      }, {
+                        attribute: T,
+                        type: "attribute",
+                        value: v
+                      }]
+                    }
+                  });
+                }
+              };
+              break;
+            }
+            default:
+              x = async (f) => {
+                typeof f == "string" && this.host.emit("cx-content-builder-translatable-value-change", {
+                  detail: {
+                    language: s,
+                    values: [{
+                      attribute: r.id,
+                      type: "attribute",
+                      value: f
+                    }]
+                  }
+                });
+              };
+          }
+          return h`
+                        ${y(
+            r.controlType && r.controlType !== "input",
+            () => h`<cx-typography variant="body3">${u}</cx-typography>`,
+            () => P
+          )}
+                        ${this.controlRenderer.renderControl({
+            blockAttributes: {
+              ...this.host.blockAttributes,
+              ...this.host.translatableControlValues[s]
+            },
+            container: void 0,
+            currentValue: m,
+            disabled: s.toLowerCase() === this.host.defaultLanguage.toLowerCase(),
+            handleChange: x,
+            key: r.id,
+            label: u,
+            trait: {
+              ...r,
+              inputConfigs: {
+                ...r.inputConfigs,
+                label: u
+              }
+            }
+          })}
+                      `;
+        })}</cx-space></cx-grid-item></cx-grid>`
+      )}`;
+    })}`;
+    return h`<cx-space direction="vertical" wrap="nowrap">${o}</cx-space>`;
+  }
+}
+var Re = Object.defineProperty, De = Object.getOwnPropertyDescriptor, c = (t, e, o, a) => {
+  for (var i = a > 1 ? void 0 : a ? De(e, o) : e, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (i = (a ? s(e, o, i) : s(i)) || i);
+  return a && i && Re(e, o, i), i;
+};
+let l = class extends O {
+  constructor() {
+    super(...arguments), this.localize = new R(this), this.configFormController = new _e(this), this.loading = !1, this.mode = F.Template, this.adhocProperties = [], this.templateName = "", this.templateId = "", this.supportedLanguages = ["en"], this.translatableControlValues = {}, this.defaultLanguage = "en", this.boundary = document.body, this.baseUrl = "", this.token = "", this.onRequestAsset = void 0, this.onRequestDownloadFormat = void 0, this.onRequestAssetFormat = void 0, this.onConfigureWorkflow = void 0, this.blockAttributes = {}, this.blockProperties = {}, this.blockStyles = {}, this.traits = [], this.translatableControls = [], this.blockName = "", this.name = "", this.description = "", this.showTemplateTab = !1, this.dialogTitle = "", this.skipShowCheck = !1, this.enableAssetFormatControls = !1, this.allowedFolders = [], this.isEditingTemplateSettings = !1, this.disableCloseConfigDialog = !1, this.isAfterShow = !1, this.sortedLanguages = [], this.formKey = 0;
+  }
+  /**
+   * Whether the template is editable.
+   * This is used to determine if the user can save the settings as a template.
+   * If the mode is EditorMode.Template, the template is editable.
+   * If the mode is EditorMode.Content, the template is not editable.
+   * @default true
+   */
+  get isTemplateEditable() {
+    return this.mode === F.Template;
+  }
+  /**
+   * Returns the list of tabs available in the configuration manager.
+   * This is derived from the tabMap property, which maps trait IDs to their corresponding tab names.
+   * It returns a unique list of trait tabs.
+   * @returns {string[]} An array of unique trait tabs.
+   */
+  get tabs() {
+    const t = [
+      "content",
+      "sidePanels",
+      "appearance",
+      "styling",
+      "effects"
+      /* Effects */
+    ], e = K(Object.values(this.tabMap)).sort(
+      (o, a) => t.indexOf(o) - t.indexOf(a)
+    );
+    return this.isTemplateEditable ? e : e.filter(
+      (o) => o !== "styling"
+      /* Styling */
+    );
+  }
+  /**
+   * A map of trait IDs to their corresponding tab names.
+   * This is used to determine which tab a trait belongs to.
+   * It is derived from the traits of the component and adhoc properties and is used to render the tabs in the configuration manager.
+   * @return {Record<string, string>} A record mapping trait IDs to tab names.
+   */
+  get tabMap() {
+    const t = this.traits.map((s) => s.name).filter(Boolean), e = Fe(t, this.adhocProperties), o = this.traits.filter(
+      (s) => s.tab === "sidePanels"
+      /* SidePanels */
+    ).map((s) => s.name).filter(Boolean), a = this.traits.filter(
+      (s) => s.tab === "appearance"
+      /* Appearance */
+    ).map((s) => s.name).filter(Boolean), i = this.traits.filter(
+      (s) => s.tab === "effects"
+      /* Effects */
+    ).map((s) => s.name).filter(Boolean), r = {};
+    for (const s of t)
+      r[s] = "content";
+    for (const s of e)
+      r[s] = "styling";
+    for (const s of o)
+      r[s] = "sidePanels";
+    for (const s of a)
+      r[s] = "appearance";
+    for (const s of i)
+      r[s] = "effects";
+    return r;
+  }
+  async handleSupportedLanguagesChange() {
+    await this.updateComplete, this.sortedLanguages = this.supportedLanguages.toSorted((t, e) => t === this.defaultLanguage ? -1 : e === this.defaultLanguage ? 1 : 0);
+  }
+  handleClose() {
+    this.isEditingTemplateSettings = !1;
+  }
+  handleAfterShow() {
+    this.isAfterShow = !0;
+  }
+  handleAfterHide(t) {
+    t?.target !== this.dialog || t.detail.source === "overlay" || (this.handleClose(), this.isAfterShow = !1, this.disableCloseConfigDialog = !1);
+  }
+  handleRequestClose(t) {
+    t?.target === this.dialog && (this.disableCloseConfigDialog ? t.preventDefault() : re(this.form) ? (t.preventDefault(), this.confirmPopover.show()) : this.hide());
+  }
+  handleNameInputChange(t) {
+    this.emit("cx-content-builder-form-field-change", {
+      detail: {
+        field: "name",
+        value: t.target.value
+      }
+    });
+  }
+  handleDescriptionInputChange(t) {
+    this.emit("cx-content-builder-form-field-change", {
+      detail: {
+        field: "description",
+        value: t.target.value
+      }
+    });
+  }
+  handleCancelClick() {
+    this.isEditingTemplateSettings ? this.isEditingTemplateSettings = !1 : this.hide();
+  }
+  handleSaveClick() {
+    this.form.requestSubmit();
+  }
+  handleDropdownSelect(t) {
+    const e = t.detail.item;
+    e.value === "save-as-new-template" ? this.isEditingTemplateSettings = !0 : e.value === "detach-template" && (this.emit("cx-content-builder-form-save", {
+      detail: {
+        isDetachTemplate: !0,
+        isNewTemplate: !1
+      }
+    }), this.hide());
+  }
+  handleAssetRequestStatus(t) {
+    this.disableCloseConfigDialog = t.detail.busy;
+  }
+  handleFormSubmit(t) {
+    if (!this.form.reportValidity()) {
+      t.preventDefault();
+      return;
+    }
+    t.preventDefault(), !this.loading && this.emit("cx-content-builder-form-save", {
+      detail: {
+        isDetachTemplate: !this.templateId && !this.isEditingTemplateSettings || !1,
+        isNewTemplate: this.isEditingTemplateSettings
+      }
+    });
+  }
+  show() {
+    this.formKey += 1, this.dialog.show();
+  }
+  async hide() {
+    this.dialog.hide(), this.confirmPopover.hide(), this.handleClose(), await this.updateComplete, this.tabGroup?.show(this.tabs[0] || "");
+  }
+  renderTemplateForm() {
+    return h`<cx-space direction="vertical" spacing="medium" wrap="nowrap"><cx-typography variant="body2">${this.localize.term("contentBuilderBlockSettingsHelpText")}</cx-typography><cx-grid columns="3" use-flex-gap spacing="var(--cx-spacing-small)" column-spacing="0" wrap="nowrap"><cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.localize.term("templateName")}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2"><cx-input name="name" value=${this.name ?? ""} can-show-length maxlength="200" required @cx-change=${this.handleNameInputChange} type="text"></cx-input></cx-grid-item></cx-grid><cx-grid columns="3" use-flex-gap spacing="var(--cx-spacing-small)" column-spacing="0" wrap="nowrap"><cx-grid-item xs="3" sm="1"><cx-typography variant="body2">${this.localize.term("description")}</cx-typography></cx-grid-item><cx-grid-item xs="3" sm="2"><cx-textarea name="description" value=${this.description ?? ""} can-show-length maxlength="200" resize="none" @cx-change=${this.handleDescriptionInputChange} type="text"></cx-textarea></cx-grid-item></cx-grid></cx-space>`;
+  }
+  render() {
+    return h`<cx-dialog class="config-form" use-overlay-scrollbar divider-position=${D.Footer} .boundary=${this.boundary} @cx-after-show=${this.handleAfterShow} @cx-after-hide=${this.handleAfterHide} @cx-request-close=${this.handleRequestClose} @cx-asset-request-status=${this.handleAssetRequestStatus}><cx-space slot="label" direction="vertical" spacing="2x-small"><cx-typography variant="h4">${y(
+      this.dialogTitle,
+      () => h`<cx-line-clamp lines="1">${this.dialogTitle}</cx-line-clamp>`,
+      () => h`${this.localize.term(
+        "settingsTitle",
+        this.blockName
+      )}`
+    )}</cx-typography>${y(
+      this.templateName,
+      () => h`<cx-typography variant="body3"><cx-line-clamp lines="1">${this.templateName}</cx-line-clamp></cx-typography>`
+    )}</cx-space>${ce(
+      this.formKey,
+      h`<form id="config-form" @submit=${this.handleFormSubmit}>${Ae(y(
+        this.isEditingTemplateSettings,
+        () => y(
+          this.isTemplateEditable,
+          () => h`<cx-tab-group class="config-form__tab-group" placement="top"><cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel></cx-tab-group>`
+        ),
+        () => y(
+          !ue(this.traits) && this.tabs.length >= 1,
+          () => h`<cx-tab-group class="config-form__tab-group" placement="top">${y(
+            this.showTemplateTab,
+            () => h`<cx-tab slot="nav" panel="template" active>${this.localize.term("template")}</cx-tab><cx-tab-panel name="template" active><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.renderTemplateForm()}</cx-space></cx-tab-panel>`
+          )}
+                    ${A(
+            this.tabs.filter(
+              (t) => !this.showTemplateTab || t === "appearance" || t === "effects" || t === "sidePanels" || t === "styling"
+              /* Styling */
+            ),
+            (t) => t,
+            (t, e) => h`<cx-tab slot="nav" panel=${t} ?active=${!this.showTemplateTab && e === 0}>${this.localize.term(t)}</cx-tab><cx-tab-panel name=${t} ?active=${!this.showTemplateTab && e === 0}><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderBasicControls(this.traits, void 0, t)}</cx-space></cx-tab-panel>`
+          )}
+                    ${y(
+            this.translatableControls.length > 0,
+            () => h`<cx-tab slot="nav" panel="Translation">${this.localize.term("translation")}</cx-tab><cx-tab-panel name="Translation"><cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderTranslationControls()}</cx-space></cx-tab-panel>`
+          )}</cx-tab-group>`,
+          () => h`<cx-space direction="vertical" spacing="x-small" wrap="nowrap">${this.configFormController.renderBasicControls(this.traits, void 0, this.tabs[0])}</cx-space>`
+        )
+      ))}</form>`
+    )}<cx-space slot="footer" spacing="x-small" wrap="nowrap" justify-content="end"><cx-button variant="default" size="medium" @click=${this.handleCancelClick}>${this.localize.term("cancel")}</cx-button><cx-button-group><cx-button type="submit" variant="primary" size="medium" ?loading=${this.loading} @click=${this.handleSaveClick}>${this.localize.term("save")}</cx-button>${y(
+      this.isTemplateEditable && !this.isEditingTemplateSettings && !this.showTemplateTab,
+      () => h`<cx-dropdown class="config-form__dropdown" placement="bottom-end" hoist @cx-select=${this.handleDropdownSelect}><cx-button slot="trigger" type="submit" variant="primary" caret><cx-visually-hidden>${this.localize.term("moreOptions")}</cx-visually-hidden></cx-button><cx-menu class="config-form__dropdown-menu"><cx-menu-item value="save-as-new-template"><cx-button type="submit" variant="text">${this.localize.term("saveAsNewTemplate")}</cx-button></cx-menu-item>${y(
+        this.templateId,
+        () => h`<cx-menu-item value="detach-template"><cx-button type="submit" variant="text">${this.localize.term("detachTemplate")}</cx-button></cx-menu-item>`
+      )}</cx-menu></cx-dropdown>`
+    )}</cx-button-group></cx-space></cx-dialog><cx-confirm-popover class="config-form__confirm-popover" divider-position=${D.Both} buttons-direction=${Yt.HorizontalReverse} dialog-label=${this.localize.term("dismissChanges")} confirm-text=${this.localize.term("dismissChanges")} .boundary=${this.boundary} variant="dialog" @cx-confirm=${this.hide}><cx-typography variant="body2" slot="footer" class="confirm-popover__footer">${this.localize.term(
+      "doYouWantToCloseThisDialogChangesWillBeDismissed"
+    )}</cx-typography></cx-confirm-popover>`;
+  }
+};
+l.styles = [M, Pe, et, ot];
+l.dependencies = {
+  "cx-asset-format-picker": ft,
+  "cx-asset-picker": mt,
+  "cx-asset-transformation-dialog": ut,
+  "cx-bicolor-picker": Ut,
+  "cx-border-input-group": Jt,
+  "cx-button": wt,
+  "cx-button-group": vt,
+  "cx-card": kt,
+  "cx-checkbox": $t,
+  "cx-color-swatch-picker": dt,
+  "cx-confirm-popover": Xt,
+  "cx-corner-position-input-group": Qt,
+  "cx-dam-custom-toolbar-buttons-editor": ht,
+  "cx-dialog": Tt,
+  "cx-divider": St,
+  "cx-download-format-picker": pt,
+  "cx-dropdown": At,
+  "cx-dynamic-select": Zt,
+  "cx-folder-picker": ct,
+  "cx-font-picker": lt,
+  "cx-gallery-picker": nt,
+  "cx-grid": Ft,
+  "cx-grid-item": Pt,
+  "cx-icon": _t,
+  "cx-icon-picker": at,
+  "cx-input": Rt,
+  "cx-line-clamp": Dt,
+  "cx-list-editor": it,
+  "cx-menu": It,
+  "cx-menu-item": qt,
+  "cx-option": Lt,
+  "cx-padding-input-group": te,
+  "cx-page-picker": rt,
+  "cx-position-picker": ee,
+  "cx-radio": Bt,
+  "cx-radio-card": Et,
+  "cx-radio-group": zt,
+  "cx-select": Nt,
+  "cx-shadow-input-group": oe,
+  "cx-size-input-group": se,
+  "cx-space": Ot,
+  "cx-switch": Mt,
+  "cx-tab": Vt,
+  "cx-tab-group": jt,
+  "cx-tab-panel": Gt,
+  "cx-textarea": Wt,
+  "cx-tooltip": Kt,
+  "cx-type-subtype-select": st,
+  "cx-typography": N,
+  "cx-visually-hidden": Ht
+};
+c([
+  $(".config-form")
+], l.prototype, "dialog", 2);
+c([
+  $("#config-form")
+], l.prototype, "form", 2);
+c([
+  $("cx-confirm-popover")
+], l.prototype, "confirmPopover", 2);
+c([
+  $(".config-form__tab-group")
+], l.prototype, "tabGroup", 2);
+c([
+  n({ reflect: !0, type: Boolean })
+], l.prototype, "loading", 2);
+c([
+  n({ reflect: !0, type: String })
+], l.prototype, "mode", 2);
+c([
+  n({ attribute: "adhoc-properties", type: Array })
+], l.prototype, "adhocProperties", 2);
+c([
+  n({ attribute: "template-name", reflect: !1, type: String })
+], l.prototype, "templateName", 2);
+c([
+  n({ attribute: "template-id", reflect: !1, type: String })
+], l.prototype, "templateId", 2);
+c([
+  n({
+    attribute: "supported-languages",
+    converter: {
+      fromAttribute: (t) => t.split(" "),
+      toAttribute: (t) => Array.isArray(t) ? t.join(" ") : t
+    },
+    reflect: !0,
+    type: Array
+  })
+], l.prototype, "supportedLanguages", 2);
+c([
+  n({ attribute: "translatable-control-values", type: Object })
+], l.prototype, "translatableControlValues", 2);
+c([
+  n({ attribute: "default-language", reflect: !0, type: String })
+], l.prototype, "defaultLanguage", 2);
+c([
+  n({ type: Object })
+], l.prototype, "boundary", 2);
+c([
+  n({ attribute: "base-url", type: String })
+], l.prototype, "baseUrl", 2);
+c([
+  n({ attribute: "token", type: String })
+], l.prototype, "token", 2);
+c([
+  n({ attribute: "on-request-asset", type: Function })
+], l.prototype, "onRequestAsset", 2);
+c([
+  n({ attribute: "on-request-download-format", type: Function })
+], l.prototype, "onRequestDownloadFormat", 2);
+c([
+  n({ attribute: "on-request-asset-format", type: Function })
+], l.prototype, "onRequestAssetFormat", 2);
+c([
+  n({ attribute: "on-configure-workflow", type: Function })
+], l.prototype, "onConfigureWorkflow", 2);
+c([
+  n({ attribute: "block-attributes", reflect: !1, type: Object })
+], l.prototype, "blockAttributes", 2);
+c([
+  n({ attribute: "block-properties", reflect: !1, type: Object })
+], l.prototype, "blockProperties", 2);
+c([
+  n({ attribute: "block-styles", reflect: !1, type: Object })
+], l.prototype, "blockStyles", 2);
+c([
+  n({ attribute: "traits", reflect: !1, type: Object })
+], l.prototype, "traits", 2);
+c([
+  n({ attribute: "translatable-controls", reflect: !1, type: Array })
+], l.prototype, "translatableControls", 2);
+c([
+  n({ attribute: "block-name", reflect: !0, type: String })
+], l.prototype, "blockName", 2);
+c([
+  n({ reflect: !1, type: String })
+], l.prototype, "name", 2);
+c([
+  n({ reflect: !1, type: String })
+], l.prototype, "description", 2);
+c([
+  n({ attribute: "show-template-tab", reflect: !0, type: Boolean })
+], l.prototype, "showTemplateTab", 2);
+c([
+  n({ attribute: "dialog-title", reflect: !0, type: String })
+], l.prototype, "dialogTitle", 2);
+c([
+  n({ attribute: "skip-show-check", reflect: !0, type: Boolean })
+], l.prototype, "skipShowCheck", 2);
+c([
+  n({ attribute: "enable-asset-format-controls", reflect: !0, type: Boolean })
+], l.prototype, "enableAssetFormatControls", 2);
+c([
+  n({
+    attribute: "allowed-folders",
+    converter: V,
+    type: Array
+  })
+], l.prototype, "allowedFolders", 2);
+c([
+  g()
+], l.prototype, "isEditingTemplateSettings", 2);
+c([
+  g()
+], l.prototype, "disableCloseConfigDialog", 2);
+c([
+  g()
+], l.prototype, "isAfterShow", 2);
+c([
+  g()
+], l.prototype, "sortedLanguages", 2);
+c([
+  g()
+], l.prototype, "formKey", 2);
+c([
+  k("supportedLanguages")
+], l.prototype, "handleSupportedLanguagesChange", 1);
+l = c([
+  j("cx-config-form")
+], l);
+const Ie = G`:host{display:block}.confirm-popover__footer{--color:var(--cx-color-danger)}.confirm-popover__footer::part(base){margin-top:var(--cx-spacing-small);display:block}`;
+var qe = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, d = (t, e, o, a) => {
+  for (var i = a > 1 ? void 0 : a ? Le(e, o) : e, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (i = (a ? s(e, o, i) : s(i)) || i);
+  return a && i && qe(e, o, i), i;
+};
+let p = class extends O {
+  constructor() {
+    super(), this.localize = new R(this), this.configsController = new gt(this.localize), this.component = null, this.loading = !1, this.mode = F.Template, this.enableAssetFormatControls = !1, this.enableFontFamilyControls = !1, this.allowedFolders = [], this.adhocProperties = [], this.templateName = "", this.templateId = "", this.supportedLanguages = ["en-us"], this.defaultLanguage = "en-us", this.translatableControlValues = [], this.boundary = document.body, this.onRequestAsset = void 0, this.onRequestDownloadFormat = void 0, this.onRequestAssetFormat = void 0, this.onConfigureWorkflow = void 0, this.blockAttributes = {}, this.blockProperties = {}, this.blockStyles = {}, this.traits = [], this.blockType = "", this.blockName = "", this.name = "", this.description = "", this.tab = "", this.isEditingTemplateSettings = !1, this.translatableControlValuesMap = {}, this.translatableControls = [], this.handleSave = this.handleSave.bind(this);
+  }
+  /**
+   * Whether the template is editable.
+   * This is used to determine if the user can save the settings as a template.
+   * If the mode is EditorMode.Template, the template is editable.
+   * If the mode is EditorMode.Content, the template is not editable.
+   * @default true
+   */
+  get isTemplateEditable() {
+    return this.mode === F.Template;
+  }
+  getFlattenTraits(t, e, o = !1) {
+    return t.reduce(
+      (a, i) => (i.children && a.push(
+        ...this.getFlattenTraits(i.children, i, o)
+      ), o ? i && (i.show === !1 || typeof i.show == "function" && !i.show(this.blockAttributes) || e && e.show === !1 || e && typeof e.show == "function" && !e.show(this.blockAttributes)) || a.push({
+        ...i,
+        parent: e
+      }) : a.push({
+        ...i,
+        parent: e
+      }), a),
+      []
+    );
+  }
+  async handleTraitsChange() {
+    await this.updateComplete, this.supportedLanguages.length > 1 ? this.translatableControls = this.traits.filter(
+      (t) => t.type === "attribute" && t.translatable || t.controlType === "info-text" && !!t.translateGroup
+    ) : this.translatableControls = [];
+    for (const t of this.translatableControls)
+      for (const e of this.supportedLanguages) {
+        const o = this.translatableControlValues.find((a) => {
+          const [i, r = ""] = String(a.id).split("_", 2);
+          return i === this.component?.getId() && r === e;
+        })?.get("content") ?? {};
+        o && t.id && o[t.id] !== void 0 && (this.translatableControlValuesMap[e] || (this.translatableControlValuesMap[e] = {}), this.translatableControlValuesMap[e][t.id] = o[t.id]);
+      }
+  }
+  async handleComponentChange() {
+    if (!this.component)
+      return;
+    this.translatableControlValuesMap = {}, await this.updateComplete;
+    const t = this.component.get("type"), e = this.configsController.getConfigs(t, {
+      containerFontVariants: this.getContainerFontVariants(),
+      enableAssetFormatControls: this.enableAssetFormatControls,
+      enableFontFamilyControls: this.enableFontFamilyControls
+    });
+    this.blockType = t, this.blockName = this.component.getName(), this.blockAttributes = {
+      ...bt(this.component),
+      ...ve(this.translatableControlValuesMap[this.defaultLanguage], (o) => o === void 0)
+    }, this.blockProperties = yt(this.component), this.blockStyles = xt(this.component), this.traits = Array.isArray(e) ? e : [];
+  }
+  /**
+   * The variants of the font kit the block sits in, if any — the config
+   * manager is the only layer holding the GrapesJS component, so it is the
+   * only place that can reach the kit's resolved typefaces. Absent means the
+   * block has no container resolving a font for it.
+   */
+  getContainerFontVariants() {
+    for (let t = this.component?.parent(); t; t = t.parent())
+      if (t.get("type") === H.FontKitAdvanced) {
+        const e = t.view?.el;
+        return Se(e?.typefacesArray ?? []);
+      }
+  }
+  handleSave(t) {
+    const o = this.getFlattenTraits(this.traits).reduce(
+      (i, r) => (i[r.id] = r, i),
+      {}
+    ), a = Object.entries(this.blockAttributes).reduce(
+      (i, [r, s]) => {
+        const u = o[r];
+        return Ct.includes(r) || (u ? i[r] = s : typeof s == "boolean" && (i[r] = !1)), i;
+      },
+      {}
+    );
+    this.emit("cx-content-builder-configure", {
+      detail: {
+        description: this.description,
+        isDetachTemplate: t.detail.isDetachTemplate ?? !1,
+        name: this.name,
+        settings: {
+          attributes: a,
+          properties: this.blockProperties,
+          styleProps: this.blockStyles,
+          translations: this.translatableControlValuesMap
+        },
+        templateId: t.detail.isNewTemplate ? "" : this.templateId
+      }
+    });
+  }
+  handleClose() {
+    this.adhocProperties = [], this.blockAttributes = {}, this.blockName = "", this.blockProperties = {}, this.blockStyles = {}, this.blockType = "", this.description = "", this.isEditingTemplateSettings = !1, this.name = "", this.templateId = "", this.templateName = "", this.traits = [], this.translatableControlValuesMap = {};
+  }
+  async show() {
+    await this.handleComponentChange(), this.dialog.show();
+  }
+  hide() {
+    this.dialog.hide(), this.handleClose();
+  }
+  handleTranslatableValueChange(t) {
+    const { language: e, values: o } = t.detail;
+    for (const a of o)
+      this.translatableControlValuesMap[e] || (this.translatableControlValuesMap[e] = {}), this.translatableControlValuesMap[e][a.attribute] = a.value;
+    this.translatableControlValuesMap = {
+      ...this.translatableControlValuesMap
+    };
+  }
+  handleChange(t) {
+    const { type: e, value: o } = t.detail;
+    e === "attribute" ? this.blockAttributes = o : e === "style" ? this.blockStyles = o : e === "property" && (this.blockProperties = o);
+  }
+  handleFieldChange(t) {
+    const { field: e, value: o } = t.detail;
+    e === "name" ? this.name = o : e === "description" && (this.description = o);
+  }
+  render() {
+    return h`<cx-config-form block-name=${this.blockName} default-language=${this.defaultLanguage} description=${this.description} name=${this.name} mode=${this.mode} template-name=${this.templateName} template-id=${this.templateId} ?enable-asset-format-controls=${this.enableAssetFormatControls} ?enable-font-family-controls=${this.enableFontFamilyControls} ?loading=${this.loading} .allowedFolders=${this.allowedFolders} .adhocProperties=${this.adhocProperties} .blockAttributes=${this.blockAttributes} .blockProperties=${this.blockProperties} .blockStyles=${this.blockStyles} .boundary=${this.boundary} .supportedLanguages=${this.supportedLanguages} .translatableControls=${this.translatableControls} .translatableControlValues=${this.translatableControlValuesMap} .traits=${this.traits} .onRequestAsset=${this.onRequestAsset} .onRequestDownloadFormat=${this.onRequestDownloadFormat} .onConfigureWorkflow=${this.onConfigureWorkflow} .onRequestAssetFormat=${this.onRequestAssetFormat} @cx-content-builder-translatable-value-change=${this.handleTranslatableValueChange} @cx-content-builder-form-change=${this.handleChange} @cx-content-builder-form-field-change=${this.handleFieldChange} @cx-content-builder-form-save=${this.handleSave}></cx-config-form>`;
+  }
+};
+p.styles = [M, Ie];
+p.dependencies = {
+  "cx-config-form": l,
+  "cx-typography": N
+};
+d([
+  $("cx-config-form")
+], p.prototype, "dialog", 2);
+d([
+  n({ reflect: !1, type: Object })
+], p.prototype, "component", 2);
+d([
+  n({ reflect: !0, type: Boolean })
+], p.prototype, "loading", 2);
+d([
+  n({ reflect: !0, type: String })
+], p.prototype, "mode", 2);
+d([
+  n({
+    attribute: "enable-asset-format-controls",
+    reflect: !0,
+    type: Boolean
+  })
+], p.prototype, "enableAssetFormatControls", 2);
+d([
+  n({
+    attribute: "enable-font-family-controls",
+    reflect: !0,
+    type: Boolean
+  })
+], p.prototype, "enableFontFamilyControls", 2);
+d([
+  n({
+    attribute: "allowed-folders",
+    converter: V,
+    type: Array
+  })
+], p.prototype, "allowedFolders", 2);
+d([
+  n({ attribute: "adhoc-properties", type: Array })
+], p.prototype, "adhocProperties", 2);
+d([
+  n({ attribute: "template-name", reflect: !1, type: String })
+], p.prototype, "templateName", 2);
+d([
+  n({ attribute: "template-id", reflect: !1, type: String })
+], p.prototype, "templateId", 2);
+d([
+  n({
+    attribute: "supported-languages",
+    converter: {
+      fromAttribute: (t) => t.split(" "),
+      toAttribute: (t) => Array.isArray(t) ? t.join(" ") : t
+    },
+    reflect: !0,
+    type: Array
+  })
+], p.prototype, "supportedLanguages", 2);
+d([
+  n({ attribute: "default-language", reflect: !0, type: String })
+], p.prototype, "defaultLanguage", 2);
+d([
+  n({ attribute: "translatable-control-values", type: Array })
+], p.prototype, "translatableControlValues", 2);
+d([
+  n({ type: Object })
+], p.prototype, "boundary", 2);
+d([
+  n({ attribute: "on-request-asset", type: Function })
+], p.prototype, "onRequestAsset", 2);
+d([
+  n({ attribute: "on-request-download-format", type: Function })
+], p.prototype, "onRequestDownloadFormat", 2);
+d([
+  n({ attribute: "on-request-asset-format", type: Function })
+], p.prototype, "onRequestAssetFormat", 2);
+d([
+  n({ attribute: "on-configure-workflow", type: Function })
+], p.prototype, "onConfigureWorkflow", 2);
+d([
+  g()
+], p.prototype, "blockAttributes", 2);
+d([
+  g()
+], p.prototype, "blockProperties", 2);
+d([
+  g()
+], p.prototype, "blockStyles", 2);
+d([
+  g()
+], p.prototype, "traits", 2);
+d([
+  g()
+], p.prototype, "blockType", 2);
+d([
+  g()
+], p.prototype, "blockName", 2);
+d([
+  g()
+], p.prototype, "name", 2);
+d([
+  g()
+], p.prototype, "description", 2);
+d([
+  g()
+], p.prototype, "tab", 2);
+d([
+  g()
+], p.prototype, "isEditingTemplateSettings", 2);
+d([
+  g()
+], p.prototype, "translatableControlValuesMap", 2);
+d([
+  g()
+], p.prototype, "translatableControls", 2);
+d([
+  k("traits"),
+  k("supportedLanguages", { waitUntilFirstUpdate: !0 }),
+  k("blockAttributes", { waitUntilFirstUpdate: !0 })
+], p.prototype, "handleTraitsChange", 1);
+d([
+  k("component")
+], p.prototype, "handleComponentChange", 1);
+p = d([
+  j("cx-config-manager")
+], p);
+export {
+  p as CxConfigManager
+};