@luzmo/analytics-components-kit 1.0.1-alpha.18 → 1.0.1-alpha.19

package/components/edit-option/index.js

@@ -17,41 +17,49 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { h as B } from "../task-Cr9aRIbV.js";
-import { x as w, k as F, a as G, n as _ } from "../property-B2F7x7Cz.js";
+import { h as P } from "../task-Cr9aRIbV.js";
+import { x as K, k as G, a as R, n as j } from "../property-B2F7x7Cz.js";
 import { o as N } from "../if-defined-Bv6MRdSW.js";
-const g = () => {
+const F = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");
     o.setAttribute("data-luzmo-vars", ""), o.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(o);
   }
 };
-g();
-const R = ":host{font-family:var(--luzmo-edit-option-font-family, var(--luzmo-font-family));font-size:var(--luzmo-edit-option-font-size, var(--luzmo-font-size))}:host([size=s]){font-size:var(--luzmo-edit-option-font-size-s, var(--luzmo-font-size-s))}:host([size=l]){font-size:var(--luzmo-edit-option-font-size-l, var(--luzmo-font-size-l))}:host([size=xl]){font-size:var(--luzmo-edit-option-font-size-xl, var(--luzmo-font-size-xl))}", A = (o) => {
-  var l, r, u, s, L, v, $, f, b, h, c, p, a, m, d;
+F();
+const U = ":host{font-family:var(--luzmo-edit-option-font-family, var(--luzmo-font-family));font-size:var(--luzmo-edit-option-font-size, var(--luzmo-font-size))}:host([size=s]){font-size:var(--luzmo-edit-option-font-size-s, var(--luzmo-font-size-s))}:host([size=l]){font-size:var(--luzmo-edit-option-font-size-l, var(--luzmo-font-size-l))}:host([size=xl]){font-size:var(--luzmo-edit-option-font-size-xl, var(--luzmo-font-size-xl))}", w = (o) => {
+  var e, n, i;
   let t;
-  typeof ((l = o.controlInfo) == null ? void 0 : l.extraLabel) == "function" ? t = o.controlInfo.extraLabel(
-    o.options,
-    o.slots,
-    o.theme
-  ) : typeof ((r = o.controlInfo) == null ? void 0 : r.extraLabel) == "string" && (t = o.controlInfo.extraLabel), typeof t == "string" && (t = ((v = (L = (s = (u = o.translations) == null ? void 0 : u.options) == null ? void 0 : s[o.optionKey]) == null ? void 0 : L.extraLabel) == null ? void 0 : v[t]) ?? t);
+  return typeof ((e = o == null ? void 0 : o.controlInfo) == null ? void 0 : e.default) == "function" ? t = o.controlInfo.default({
+    options: o.options,
+    slots: o.slots,
+    theme: o.theme
+  }) : ((n = o.controlInfo) == null ? void 0 : n.default) !== void 0 && ((i = o.controlInfo) == null ? void 0 : i.default) !== null && (t = o.controlInfo.default), t;
+}, A = (o) => {
+  var l, r, f, s, y, L, k, h, u, b, c, a, p, m, d;
+  let t;
+  typeof ((l = o.controlInfo) == null ? void 0 : l.extraLabel) == "function" ? t = o.controlInfo.extraLabel({
+    options: o.options,
+    slots: o.slots,
+    theme: o.theme
+  }) : typeof ((r = o.controlInfo) == null ? void 0 : r.extraLabel) == "string" && (t = o.controlInfo.extraLabel), typeof t == "string" && (t = ((L = (y = (s = (f = o.translations) == null ? void 0 : f.options) == null ? void 0 : s[o.optionKey]) == null ? void 0 : y.extraLabel) == null ? void 0 : L[t]) ?? t);
   let e;
-  typeof (($ = o.controlInfo) == null ? void 0 : $.extraLabelTooltip) == "function" ? t = o.controlInfo.extraLabelTooltip(
-    o.options,
-    o.slots,
-    o.theme
-  ) : typeof ((f = o.controlInfo) == null ? void 0 : f.extraLabelTooltip) == "string" && (e = o.controlInfo.extraLabelTooltip), typeof e == "string" && (t = ((p = (c = (h = (b = o.translations) == null ? void 0 : b.options) == null ? void 0 : h[o.optionKey]) == null ? void 0 : c.extraLabelTooltip) == null ? void 0 : p[e]) ?? e);
+  typeof ((k = o.controlInfo) == null ? void 0 : k.extraLabelTooltip) == "function" ? t = o.controlInfo.extraLabelTooltip({
+    options: o.options,
+    slots: o.slots,
+    theme: o.theme
+  }) : typeof ((h = o.controlInfo) == null ? void 0 : h.extraLabelTooltip) == "string" && (e = o.controlInfo.extraLabelTooltip), typeof e == "string" && (t = ((a = (c = (b = (u = o.translations) == null ? void 0 : u.options) == null ? void 0 : b[o.optionKey]) == null ? void 0 : c.extraLabelTooltip) == null ? void 0 : a[e]) ?? e);
   let n;
-  typeof ((a = o.controlInfo) == null ? void 0 : a.extraLabelHasClickAction) == "function" ? n = o.controlInfo.extraLabelHasClickAction(
-    o.options,
-    o.slots,
-    o.theme
-  ) : typeof ((m = o.controlInfo) == null ? void 0 : m.extraLabelHasClickAction) == "boolean" && (n = o.controlInfo.extraLabelHasClickAction);
-  const i = typeof ((d = o.controlInfo) == null ? void 0 : d.extraLabelClickAction) == "function" ? () => o.controlInfo.extraLabelClickAction(
-    o.options,
-    o.slots,
-    o.theme
-  ) : () => {
+  typeof ((p = o.controlInfo) == null ? void 0 : p.extraLabelHasClickAction) == "function" ? n = o.controlInfo.extraLabelHasClickAction({
+    options: o.options,
+    slots: o.slots,
+    theme: o.theme
+  }) : typeof ((m = o.controlInfo) == null ? void 0 : m.extraLabelHasClickAction) == "boolean" && (n = o.controlInfo.extraLabelHasClickAction);
+  const i = typeof ((d = o.controlInfo) == null ? void 0 : d.extraLabelClickAction) == "function" ? () => o.controlInfo.extraLabelClickAction({
+    options: o.options,
+    slots: o.slots,
+    theme: o.theme
+  }) : () => {
   };
   return {
     extraLabel: t,
@@ -81,256 +89,242 @@ const R = ":host{font-family:var(--luzmo-edit-option-font-family, var(--luzmo-fo
   } else
     e[o.optionKey] = t.detail.value;
   return o.changeCallback(e);
-}, U = (o) => {
-  var $, f, b, h, c, p, a, m, d, x, z, y, k;
-  const t = ((b = (f = ($ = o.translations) == null ? void 0 : $.options) == null ? void 0 : f[o.optionKey]) == null ? void 0 : b.label) ?? ((h = o.controlInfo) == null ? void 0 : h.label) ?? o.optionKey ?? "", e = o.size, n = {};
-  Object.keys((c = o.controlInfo) == null ? void 0 : c.values).forEach((I) => {
-    var C, O, K, V, E, S;
-    n[I] = {
-      ...(C = o.controlInfo) == null ? void 0 : C.values[I],
-      label: ((E = (V = (K = (O = o.translations) == null ? void 0 : O.options) == null ? void 0 : K[o.optionKey]) == null ? void 0 : V.enum) == null ? void 0 : E[I]) ?? ((S = o.controlInfo) == null ? void 0 : S.values[I].label)
+}, q = (o) => {
+  var h, u, b, c, a, p, m, d, x, z, $, I;
+  const t = ((b = (u = (h = o.translations) == null ? void 0 : h.options) == null ? void 0 : u[o.optionKey]) == null ? void 0 : b.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label) ?? o.optionKey ?? "", e = o.size, n = {};
+  Object.keys((a = o.controlInfo) == null ? void 0 : a.values).forEach((v) => {
+    var C, O, V, _, g, B;
+    n[v] = {
+      ...(C = o.controlInfo) == null ? void 0 : C.values[v],
+      label: ((g = (_ = (V = (O = o.translations) == null ? void 0 : O.options) == null ? void 0 : V[o.optionKey]) == null ? void 0 : _.enum) == null ? void 0 : g[v]) ?? ((B = o.controlInfo) == null ? void 0 : B.values[v].label)
     };
   });
-  const i = ((m = (a = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : a[o.optionKey]) == null ? void 0 : m.tooltip) ?? ((d = o.controlInfo) == null ? void 0 : d.tooltip), l = H(o.options, o.optionKey), {
-    extraLabel: r,
-    extraLabelTooltip: u,
-    extraLabelHasClickAction: s,
+  const i = ((d = (m = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : m[o.optionKey]) == null ? void 0 : d.tooltip) ?? ((x = o.controlInfo) == null ? void 0 : x.tooltip), l = H(o.options, o.optionKey), r = w(o), {
+    extraLabel: f,
+    extraLabelTooltip: s,
+    extraLabelHasClickAction: y,
     extraLabelClickAction: L
-  } = A(o), v = T(o);
-  return w`
+  } = A(o), k = T(o);
+  return K`
     <luzmo-edit-option-action-button-group
       .label=${t}
       .value=${l}
       .values=${n}
-      .default=${(x = o.controlInfo) == null ? void 0 : x.default}
+      .default=${r}
       .selects=${(z = o.controlInfo) == null ? void 0 : z.selects}
       .size=${e}
       .tooltip=${i}
-      .extraLabel=${r}
-      .extraLabelTooltip=${u}
-      .extraLabelHasClickAction=${s}
+      .extraLabel=${f}
+      .extraLabelTooltip=${s}
+      .extraLabelHasClickAction=${y}
       @extraLabelClick=${L}
-      @option-changed=${v}
-      .fromOptionValue=${(y = o.controlInfo) == null ? void 0 : y.fromOptionValue}
-      .toOptionValue=${(k = o.controlInfo) == null ? void 0 : k.toOptionValue}
+      @option-changed=${k}
+      .fromOptionValue=${($ = o.controlInfo) == null ? void 0 : $.fromOptionValue}
+      .toOptionValue=${(I = o.controlInfo) == null ? void 0 : I.toOptionValue}
     ></luzmo-edit-option-action-button-group>
   `;
-}, q = (o) => {
-  var f, b, h, c, p, a, m, d, x, z, y, k;
-  const t = ((h = (b = (f = o.translations) == null ? void 0 : f.options) == null ? void 0 : b[o.optionKey]) == null ? void 0 : h.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label) ?? o.optionKey ?? "", e = H(o.options, o.optionKey), n = o.size, i = ((m = (a = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : a[o.optionKey]) == null ? void 0 : m.tooltip) ?? ((d = o.controlInfo) == null ? void 0 : d.tooltip);
-  let l;
-  typeof ((x = o.controlInfo) == null ? void 0 : x.default) == "function" ? l = o.controlInfo.default(
-    o.options,
-    o.slots,
-    o.theme
-  ) : typeof ((z = o.controlInfo) == null ? void 0 : z.default) == "string" && (l = o.controlInfo.default);
-  const {
+}, D = (o) => {
+  var h, u, b, c, a, p, m, d, x, z;
+  const t = ((b = (u = (h = o.translations) == null ? void 0 : h.options) == null ? void 0 : u[o.optionKey]) == null ? void 0 : b.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label) ?? o.optionKey ?? "", e = H(o.options, o.optionKey), n = o.size, i = ((m = (p = (a = o.translations) == null ? void 0 : a.options) == null ? void 0 : p[o.optionKey]) == null ? void 0 : m.tooltip) ?? ((d = o.controlInfo) == null ? void 0 : d.tooltip), l = w(o), {
     extraLabel: r,
-    extraLabelTooltip: u,
+    extraLabelTooltip: f,
     extraLabelHasClickAction: s,
-    extraLabelClickAction: L
-  } = A(o), v = T(o);
-  return w`
+    extraLabelClickAction: y
+  } = A(o), L = T(o);
+  return K`
     <luzmo-edit-option-color-picker
       .value=${e ?? l}
       .label=${t}
       .size=${n}
       .tooltip=${i}
       .extraLabel=${r}
-      .extraLabelTooltip=${u}
+      .extraLabelTooltip=${f}
       .extraLabelHasClickAction=${s}
       @extraLabelClick=${() => {
-    if (typeof L == "function") {
-      const { options: I } = L();
-      return o.changeCallback(I);
+    if (typeof y == "function") {
+      const { options: $ } = y();
+      return o.changeCallback($);
     }
   }}
-      @option-changed=${v}
-      .fromOptionValue=${(y = o.controlInfo) == null ? void 0 : y.fromOptionValue}
-      .toOptionValue=${(k = o.controlInfo) == null ? void 0 : k.toOptionValue}
+      @option-changed=${L}
+      .fromOptionValue=${(x = o.controlInfo) == null ? void 0 : x.fromOptionValue}
+      .toOptionValue=${(z = o.controlInfo) == null ? void 0 : z.toOptionValue}
     ></luzmo-edit-option-color-picker>
   `;
-}, D = (o) => {
-  var f, b, h, c, p, a, m, d, x, z, y, k, I, C;
-  const t = ((h = (b = (f = o.translations) == null ? void 0 : f.options) == null ? void 0 : b[o.optionKey]) == null ? void 0 : h.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label) ?? o.optionKey ?? "", e = H(o.options, o.optionKey) ?? {}, n = ((m = (a = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : a[o.optionKey]) == null ? void 0 : m.tooltip) ?? ((d = o.controlInfo) == null ? void 0 : d.tooltip), i = o.language ?? "en", l = {};
-  l[i] = ((y = (z = (x = o.translations) == null ? void 0 : x.options) == null ? void 0 : z[o.optionKey]) == null ? void 0 : y.placeholder) ?? ((k = o.controlInfo) == null ? void 0 : k.placeholder) ?? "";
-  const r = o.size, {
-    extraLabel: u,
-    extraLabelTooltip: s,
+}, J = (o) => {
+  var u, b, c, a, p, m, d, x, z, $, I, v, C, O;
+  const t = ((c = (b = (u = o.translations) == null ? void 0 : u.options) == null ? void 0 : b[o.optionKey]) == null ? void 0 : c.label) ?? ((a = o.controlInfo) == null ? void 0 : a.label) ?? o.optionKey ?? "", e = H(o.options, o.optionKey) ?? {}, n = ((d = (m = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : m[o.optionKey]) == null ? void 0 : d.tooltip) ?? ((x = o.controlInfo) == null ? void 0 : x.tooltip), i = o.language ?? "en", l = {};
+  l[i] = ((I = ($ = (z = o.translations) == null ? void 0 : z.options) == null ? void 0 : $[o.optionKey]) == null ? void 0 : I.placeholder) ?? ((v = o.controlInfo) == null ? void 0 : v.placeholder) ?? "";
+  const r = o.size, f = w(o), {
+    extraLabel: s,
+    extraLabelTooltip: y,
     extraLabelHasClickAction: L,
-    extraLabelClickAction: v
-  } = A(o), $ = T(o);
-  return w`
+    extraLabelClickAction: k
+  } = A(o), h = T(o);
+  return K`
     <luzmo-edit-option-multi-language-field
       .label=${t}
       .placeholder=${l}
-      .value=${e}
+      .value=${e ?? f}
       language=${N(i)}
       .size=${r}
       .tooltip=${n}
-      .extraLabel=${u}
-      .extraLabelTooltip=${s}
+      .extraLabel=${s}
+      .extraLabelTooltip=${y}
       .extraLabelHasClickAction=${L}
-      @extraLabelClick=${v}
-      @option-changed=${$}
-      .fromOptionValue=${(I = o.controlInfo) == null ? void 0 : I.fromOptionValue}
-      .toOptionValue=${(C = o.controlInfo) == null ? void 0 : C.toOptionValue}
+      @extraLabelClick=${k}
+      @option-changed=${h}
+      .fromOptionValue=${(C = o.controlInfo) == null ? void 0 : C.fromOptionValue}
+      .toOptionValue=${(O = o.controlInfo) == null ? void 0 : O.toOptionValue}
     ></luzmo-edit-option-multi-language-field>
   `;
-}, J = (o) => {
-  var h, c, p, a, m, d, x, z, y, k, I, C, O, K;
-  const t = ((p = (c = (h = o.translations) == null ? void 0 : h.options) == null ? void 0 : c[o.optionKey]) == null ? void 0 : p.label) ?? ((a = o.controlInfo) == null ? void 0 : a.label) ?? o.optionKey ?? "", e = (m = o.controlInfo) == null ? void 0 : m.min, n = (d = o.controlInfo) == null ? void 0 : d.max, i = (x = o.controlInfo) == null ? void 0 : x.step, l = H(o.options, o.optionKey), r = ((k = (y = (z = o.translations) == null ? void 0 : z.options) == null ? void 0 : y[o.optionKey]) == null ? void 0 : k.tooltip) ?? ((I = o.controlInfo) == null ? void 0 : I.tooltip), u = (C = o.controlInfo) == null ? void 0 : C.default, s = o.size, {
-    extraLabel: L,
-    extraLabelTooltip: v,
-    extraLabelHasClickAction: $,
-    extraLabelClickAction: f
-  } = A(o), b = T(o);
-  return w`
+}, Q = (o) => {
+  var b, c, a, p, m, d, x, z, $, I, v, C, O;
+  const t = ((a = (c = (b = o.translations) == null ? void 0 : b.options) == null ? void 0 : c[o.optionKey]) == null ? void 0 : a.label) ?? ((p = o.controlInfo) == null ? void 0 : p.label) ?? o.optionKey ?? "", e = (m = o.controlInfo) == null ? void 0 : m.min, n = (d = o.controlInfo) == null ? void 0 : d.max, i = (x = o.controlInfo) == null ? void 0 : x.step, l = H(o.options, o.optionKey), r = ((I = ($ = (z = o.translations) == null ? void 0 : z.options) == null ? void 0 : $[o.optionKey]) == null ? void 0 : I.tooltip) ?? ((v = o.controlInfo) == null ? void 0 : v.tooltip), f = w(o), s = o.size, {
+    extraLabel: y,
+    extraLabelTooltip: L,
+    extraLabelHasClickAction: k,
+    extraLabelClickAction: h
+  } = A(o), u = T(o);
+  return K`
     <luzmo-edit-option-number-field
       .value=${l}
-      .default=${u}
+      .default=${f}
       .min=${e}
       .max=${n}
       .step=${i}
       .label=${t}
       .size=${s}
       .tooltip=${r}
-      .extraLabel=${L}
-      .extraLabelTooltip=${v}
-      .extraLabelHasClickAction=${$}
-      @extraLabelClick=${f}
-      @option-changed=${b}
-      .fromOptionValue=${(O = o.controlInfo) == null ? void 0 : O.fromOptionValue}
-      .toOptionValue=${(K = o.controlInfo) == null ? void 0 : K.toOptionValue}
+      .extraLabel=${y}
+      .extraLabelTooltip=${L}
+      .extraLabelHasClickAction=${k}
+      @extraLabelClick=${h}
+      @option-changed=${u}
+      .fromOptionValue=${(C = o.controlInfo) == null ? void 0 : C.fromOptionValue}
+      .toOptionValue=${(O = o.controlInfo) == null ? void 0 : O.toOptionValue}
     ></luzmo-edit-option-number-field>
   `;
-}, Q = (o) => {
-  var f, b, h, c, p, a, m, d, x, z, y, k;
-  const t = ((h = (b = (f = o.translations) == null ? void 0 : f.options) == null ? void 0 : b[o.optionKey]) == null ? void 0 : h.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label) ?? o.optionKey ?? "", e = H(o.options, o.optionKey), n = (p = o.controlInfo) == null ? void 0 : p.default, i = ((d = (m = (a = o.translations) == null ? void 0 : a.options) == null ? void 0 : m[o.optionKey]) == null ? void 0 : d.tooltip) ?? ((x = o.controlInfo) == null ? void 0 : x.tooltip), l = (z = o.controlInfo) == null ? void 0 : z.enum.reduce(
-    (I, C) => {
-      var O, K, V;
-      return I[C] = ((V = (K = (O = o.translations) == null ? void 0 : O.options) == null ? void 0 : K[o.optionKey]) == null ? void 0 : V.enum[C]) ?? C, I;
+}, W = (o) => {
+  var h, u, b, c, a, p, m, d, x, z, $;
+  const t = ((b = (u = (h = o.translations) == null ? void 0 : h.options) == null ? void 0 : u[o.optionKey]) == null ? void 0 : b.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label) ?? o.optionKey ?? "", e = H(o.options, o.optionKey), n = ((m = (p = (a = o.translations) == null ? void 0 : a.options) == null ? void 0 : p[o.optionKey]) == null ? void 0 : m.tooltip) ?? ((d = o.controlInfo) == null ? void 0 : d.tooltip), i = (x = o.controlInfo) == null ? void 0 : x.enum.reduce(
+    (I, v) => {
+      var C, O, V, _;
+      return I[v] = ((_ = (V = (O = (C = o.translations) == null ? void 0 : C.options) == null ? void 0 : O[o.optionKey]) == null ? void 0 : V.enum) == null ? void 0 : _[v]) ?? v, I;
     },
     {}
-  ), r = o.size, {
-    extraLabel: u,
+  ), l = o.size, r = w(o), {
+    extraLabel: f,
     extraLabelTooltip: s,
-    extraLabelHasClickAction: L,
-    extraLabelClickAction: v
-  } = A(o), $ = T(o);
-  return w`
+    extraLabelHasClickAction: y,
+    extraLabelClickAction: L
+  } = A(o), k = T(o);
+  return K`
     <luzmo-edit-option-picker
       .value=${e}
-      .default=${n}
-      .values=${l}
+      .default=${r}
+      .values=${i}
       .label=${t}
-      .tooltip=${i}
-      .size=${r}
-      .extraLabel=${u}
+      .tooltip=${n}
+      .size=${l}
+      .extraLabel=${f}
       .extraLabelTooltip=${s}
-      .extraLabelHasClickAction=${L}
-      @extraLabelClick=${v}
-      @option-changed=${$}
-      .fromOptionValue=${(y = o.controlInfo) == null ? void 0 : y.fromOptionValue}
-      .toOptionValue=${(k = o.controlInfo) == null ? void 0 : k.toOptionValue}
+      .extraLabelHasClickAction=${y}
+      @extraLabelClick=${L}
+      @option-changed=${k}
+      .fromOptionValue=${(z = o.controlInfo) == null ? void 0 : z.fromOptionValue}
+      .toOptionValue=${($ = o.controlInfo) == null ? void 0 : $.toOptionValue}
     ></luzmo-edit-option-picker>
   `;
-}, W = (o) => {
-  var f, b, h, c, p, a, m, d, x, z, y, k;
-  const t = ((h = (b = (f = o.translations) == null ? void 0 : f.options) == null ? void 0 : b[o.optionKey]) == null ? void 0 : h.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label), e = (p = o.controlInfo) == null ? void 0 : p.positions, n = ((a = o.controlInfo) == null ? void 0 : a.defaultPosition) ?? "top-right", i = o.size, l = H(o.options, o.optionKey), r = ((x = (d = (m = o.translations) == null ? void 0 : m.options) == null ? void 0 : d[o.optionKey]) == null ? void 0 : x.tooltip) ?? ((z = o.controlInfo) == null ? void 0 : z.tooltip), {
-    extraLabel: u,
+}, X = (o) => {
+  var h, u, b, c, a, p, m, d, x, z, $;
+  const t = ((b = (u = (h = o.translations) == null ? void 0 : h.options) == null ? void 0 : u[o.optionKey]) == null ? void 0 : b.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label), e = (a = o.controlInfo) == null ? void 0 : a.positions, n = o.size, i = H(o.options, o.optionKey), l = ((d = (m = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : m[o.optionKey]) == null ? void 0 : d.tooltip) ?? ((x = o.controlInfo) == null ? void 0 : x.tooltip), r = w(o) ?? "topRight", {
+    extraLabel: f,
     extraLabelTooltip: s,
-    extraLabelHasClickAction: L,
-    extraLabelClickAction: v
-  } = A(o), $ = T(o);
-  return w`
+    extraLabelHasClickAction: y,
+    extraLabelClickAction: L
+  } = A(o), k = T(o);
+  return K`
     <luzmo-edit-option-position-picker
-      .value=${(y = o.controlInfo) == null ? void 0 : y.value}
+      .value=${(z = o.controlInfo) == null ? void 0 : z.value}
       .positions=${e}
-      .defaultPosition=${n}
+      .default=${r}
       .label=${t}
-      .tooltip=${r}
-      .size=${i}
-      .value=${l}
-      .extraLabel=${u}
+      .tooltip=${l}
+      .size=${n}
+      .value=${i}
+      .extraLabel=${f}
       .extraLabelTooltip=${s}
-      .extraLabelHasClickAction=${L}
-      @extraLabelClick=${v}
-      @option-changed=${$}
-      .readonly=${(k = o.controlInfo) == null ? void 0 : k.readonly}
+      .extraLabelHasClickAction=${y}
+      @extraLabelClick=${L}
+      @option-changed=${k}
+      .readonly=${($ = o.controlInfo) == null ? void 0 : $.readonly}
     ></luzmo-edit-option-position-picker>
   `;
-}, X = (o) => {
-  var v, $, f, b, h, c, p, a, m, d, x, z;
-  const t = ((f = ($ = (v = o.translations) == null ? void 0 : v.options) == null ? void 0 : $[o.optionKey]) == null ? void 0 : f.label) ?? ((b = o.controlInfo) == null ? void 0 : b.label), e = H(o.options, o.optionKey), n = o.size, i = ((p = (c = (h = o.translations) == null ? void 0 : h.options) == null ? void 0 : c[o.optionKey]) == null ? void 0 : p.tooltip) ?? ((a = o.controlInfo) == null ? void 0 : a.tooltip), {
-    extraLabel: l,
-    extraLabelTooltip: r,
-    extraLabelHasClickAction: u,
-    extraLabelClickAction: s
+}, Y = (o) => {
+  var k, h, u, b, c, a, p, m, d, x, z, $;
+  const t = ((u = (h = (k = o.translations) == null ? void 0 : k.options) == null ? void 0 : h[o.optionKey]) == null ? void 0 : u.label) ?? ((b = o.controlInfo) == null ? void 0 : b.label), e = H(o.options, o.optionKey), n = o.size, i = ((p = (a = (c = o.translations) == null ? void 0 : c.options) == null ? void 0 : a[o.optionKey]) == null ? void 0 : p.tooltip) ?? ((m = o.controlInfo) == null ? void 0 : m.tooltip), l = w(o), {
+    extraLabel: r,
+    extraLabelTooltip: f,
+    extraLabelHasClickAction: s,
+    extraLabelClickAction: y
   } = A(o), L = T(o);
-  return w`
+  return K`
     <luzmo-edit-option-positions-number-field
-      .values=${e}
-      .positions=${(m = o.controlInfo) == null ? void 0 : m.positions}
-      .positionConfiguration=${(d = o.controlInfo) == null ? void 0 : d.positionConfiguration}
+      .values=${e ?? l}
+      .positions=${(d = o.controlInfo) == null ? void 0 : d.positions}
+      .positionConfiguration=${(x = o.controlInfo) == null ? void 0 : x.positionConfiguration}
       .label=${t}
       .size=${n}
       .tooltip=${i}
-      .extraLabel=${l}
-      .extraLabelTooltip=${r}
-      .extraLabelHasClickAction=${u}
-      @extraLabelClick=${s}
+      .extraLabel=${r}
+      .extraLabelTooltip=${f}
+      .extraLabelHasClickAction=${s}
+      @extraLabelClick=${y}
       @option-changed=${L}
-      .fromOptionValue=${(x = o.controlInfo) == null ? void 0 : x.fromOptionValue}
-      .toOptionValue=${(z = o.controlInfo) == null ? void 0 : z.toOptionValue}
+      .fromOptionValue=${(z = o.controlInfo) == null ? void 0 : z.fromOptionValue}
+      .toOptionValue=${($ = o.controlInfo) == null ? void 0 : $.toOptionValue}
     ></luzmo-edit-option-positions-number-field>
   `;
-}, Y = (o) => {
-  var f, b, h, c, p, a, m, d, x, z, y, k;
-  const t = ((h = (b = (f = o.translations) == null ? void 0 : f.options) == null ? void 0 : b[o.optionKey]) == null ? void 0 : h.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label) ?? o.optionKey ?? "", e = H(o.options, o.optionKey), n = (p = o == null ? void 0 : o.controlInfo) == null ? void 0 : p.default, i = (a = o.controlInfo) == null ? void 0 : a.enum.reduce(
-    (I, C) => {
-      var O, K, V;
-      return I[C] = ((V = (K = (O = o.translations) == null ? void 0 : O.options) == null ? void 0 : K[o.optionKey]) == null ? void 0 : V.enum[C]) ?? C, I;
+}, Z = (o) => {
+  var h, u, b, c, a, p, m, d, x, z, $;
+  const t = ((b = (u = (h = o.translations) == null ? void 0 : h.options) == null ? void 0 : u[o.optionKey]) == null ? void 0 : b.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label) ?? o.optionKey ?? "", e = H(o.options, o.optionKey), n = w(o), i = (a = o.controlInfo) == null ? void 0 : a.enum.reduce(
+    (I, v) => {
+      var C, O, V, _;
+      return I[v] = ((_ = (V = (O = (C = o.translations) == null ? void 0 : C.options) == null ? void 0 : O[o.optionKey]) == null ? void 0 : V.enum) == null ? void 0 : _[v]) ?? v, I;
     },
     {}
-  ), l = o.size, r = ((x = (d = (m = o.translations) == null ? void 0 : m.options) == null ? void 0 : d[o.optionKey]) == null ? void 0 : x.tooltip) ?? ((z = o.controlInfo) == null ? void 0 : z.tooltip), {
-    extraLabel: u,
+  ), l = o.size, r = ((d = (m = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : m[o.optionKey]) == null ? void 0 : d.tooltip) ?? ((x = o.controlInfo) == null ? void 0 : x.tooltip), {
+    extraLabel: f,
     extraLabelTooltip: s,
-    extraLabelHasClickAction: L,
-    extraLabelClickAction: v
-  } = A(o), $ = T(o);
-  return w`
+    extraLabelHasClickAction: y,
+    extraLabelClickAction: L
+  } = A(o), k = T(o);
+  return K`
     <luzmo-edit-option-radio-button-group
       .value=${e ?? n}
       .values=${i}
       .label=${t}
       .size=${l}
       .tooltip=${r}
-      .extraLabel=${u}
+      .extraLabel=${f}
       .extraLabelTooltip=${s}
-      .extraLabelHasClickAction=${L}
-      @extraLabelClick=${v}
-      @option-changed=${$}
-      .fromOptionValue=${(y = o.controlInfo) == null ? void 0 : y.fromOptionValue}
-      .toOptionValue=${(k = o.controlInfo) == null ? void 0 : k.toOptionValue}
+      .extraLabelHasClickAction=${y}
+      @extraLabelClick=${L}
+      @option-changed=${k}
+      .fromOptionValue=${(z = o.controlInfo) == null ? void 0 : z.fromOptionValue}
+      .toOptionValue=${($ = o.controlInfo) == null ? void 0 : $.toOptionValue}
     ></luzmo-edit-option-radio-button-group>
   `;
-}, Z = (o) => {
-  var c, p, a, m, d, x, z, y, k, I, C, O, K, V, E;
-  const t = ((a = (p = (c = o.translations) == null ? void 0 : c.options) == null ? void 0 : p[o.optionKey]) == null ? void 0 : a.label) ?? ((m = o.controlInfo) == null ? void 0 : m.label) ?? o.optionKey ?? "", e = ((z = (x = (d = o.translations) == null ? void 0 : d.options) == null ? void 0 : x[o.optionKey]) == null ? void 0 : z.tooltip) ?? ((y = o.controlInfo) == null ? void 0 : y.tooltip), n = (k = o.controlInfo) == null ? void 0 : k.min, i = (I = o.controlInfo) == null ? void 0 : I.max, l = (C = o.controlInfo) == null ? void 0 : C.step, r = H(o.options, o.optionKey), u = o.size;
-  let s;
-  typeof ((O = o.controlInfo) == null ? void 0 : O.default) == "function" ? s = o.controlInfo.default(
-    o.options,
-    o.slots,
-    o.theme
-  ) : typeof ((K = o.controlInfo) == null ? void 0 : K.default) == "number" && (s = o.controlInfo.default);
-  const {
-    extraLabel: L,
-    extraLabelTooltip: v,
-    extraLabelHasClickAction: $,
-    extraLabelClickAction: f
-  } = A(o), b = T(o);
-  return w`
+}, oo = (o) => {
+  var c, a, p, m, d, x, z, $, I, v, C, O, V;
+  const t = ((p = (a = (c = o.translations) == null ? void 0 : c.options) == null ? void 0 : a[o.optionKey]) == null ? void 0 : p.label) ?? ((m = o.controlInfo) == null ? void 0 : m.label) ?? o.optionKey ?? "", e = ((z = (x = (d = o.translations) == null ? void 0 : d.options) == null ? void 0 : x[o.optionKey]) == null ? void 0 : z.tooltip) ?? (($ = o.controlInfo) == null ? void 0 : $.tooltip), n = (I = o.controlInfo) == null ? void 0 : I.min, i = (v = o.controlInfo) == null ? void 0 : v.max, l = (C = o.controlInfo) == null ? void 0 : C.step, r = H(o.options, o.optionKey), f = o.size, s = w(o), {
+    extraLabel: y,
+    extraLabelTooltip: L,
+    extraLabelHasClickAction: k,
+    extraLabelClickAction: h
+  } = A(o), u = T(o);
+  return K`
     <luzmo-edit-option-slider
       .value=${r}
       .default=${s}
@@ -339,98 +333,98 @@ const R = ":host{font-family:var(--luzmo-edit-option-font-family, var(--luzmo-fo
       .step=${l}
       .label=${t}
       .tooltip=${e}
-      .size=${u}
-      .extraLabel=${L}
-      .extraLabelTooltip=${v}
-      .extraLabelHasClickAction=${$}
+      .size=${f}
+      .extraLabel=${y}
+      .extraLabelTooltip=${L}
+      .extraLabelHasClickAction=${k}
       @extraLabelClick=${() => {
-    if (typeof f == "function") {
-      const { options: S } = f();
-      return o.changeCallback(S);
+    if (typeof h == "function") {
+      const { options: _ } = h();
+      return o.changeCallback(_);
     }
   }}
-      @option-changed=${b}
-      .fromOptionValue=${(V = o.controlInfo) == null ? void 0 : V.fromOptionValue}
-      .toOptionValue=${(E = o.controlInfo) == null ? void 0 : E.toOptionValue}
+      @option-changed=${u}
+      .fromOptionValue=${(O = o.controlInfo) == null ? void 0 : O.fromOptionValue}
+      .toOptionValue=${(V = o.controlInfo) == null ? void 0 : V.toOptionValue}
     ></luzmo-edit-option-slider>
   `;
-}, oo = (o) => {
-  var $, f, b, h, c, p, a, m, d, x, z;
-  const t = ((b = (f = ($ = o.translations) == null ? void 0 : $.options) == null ? void 0 : f[o.optionKey]) == null ? void 0 : b.label) ?? ((h = o.controlInfo) == null ? void 0 : h.label) ?? o.optionKey ?? "", e = H(o.options, o.optionKey), n = (c = o.controlInfo) == null ? void 0 : c.default, i = o.size, l = ((m = (a = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : a[o.optionKey]) == null ? void 0 : m.tooltip) ?? ((d = o.controlInfo) == null ? void 0 : d.tooltip), {
+}, to = (o) => {
+  var k, h, u, b, c, a, p, m, d, x;
+  const t = ((u = (h = (k = o.translations) == null ? void 0 : k.options) == null ? void 0 : h[o.optionKey]) == null ? void 0 : u.label) ?? ((b = o.controlInfo) == null ? void 0 : b.label) ?? o.optionKey ?? "", e = H(o.options, o.optionKey), n = o.size, i = ((p = (a = (c = o.translations) == null ? void 0 : c.options) == null ? void 0 : a[o.optionKey]) == null ? void 0 : p.tooltip) ?? ((m = o.controlInfo) == null ? void 0 : m.tooltip), l = w(o), {
     extraLabel: r,
-    extraLabelTooltip: u,
+    extraLabelTooltip: f,
     extraLabelHasClickAction: s,
-    extraLabelClickAction: L
-  } = A(o), v = T(o);
-  return w`
+    extraLabelClickAction: y
+  } = A(o), L = T(o);
+  return K`
     <luzmo-edit-option-switch
-      .value=${e ?? n ?? !1}
+      .value=${e ?? l ?? !1}
       .label=${t}
-      .size=${i}
-      .tooltip=${l}
+      .size=${n}
+      .tooltip=${i}
       .extraLabel=${r}
-      .extraLabelTooltip=${u}
+      .extraLabelTooltip=${f}
       .extraLabelHasClickAction=${s}
-      @extraLabelClick=${L}
-      @option-changed=${v}
-      .fromOptionValue=${(x = o.controlInfo) == null ? void 0 : x.fromOptionValue}
-      .toOptionValue=${(z = o.controlInfo) == null ? void 0 : z.toOptionValue}
+      @extraLabelClick=${y}
+      @option-changed=${L}
+      .fromOptionValue=${(d = o.controlInfo) == null ? void 0 : d.fromOptionValue}
+      .toOptionValue=${(x = o.controlInfo) == null ? void 0 : x.toOptionValue}
     ></luzmo-edit-option-switch>
   `;
-}, to = (o) => {
-  var f, b, h, c, p, a, m, d, x, z, y, k, I, C;
-  const t = ((h = (b = (f = o.translations) == null ? void 0 : f.options) == null ? void 0 : b[o.optionKey]) == null ? void 0 : h.label) ?? ((c = o.controlInfo) == null ? void 0 : c.label) ?? o.optionKey ?? "", e = o.language ?? "en", n = {};
-  n[e] = ((m = (a = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : a[o.optionKey]) == null ? void 0 : m.placeholder) ?? ((d = o.controlInfo) == null ? void 0 : d.placeholder) ?? "";
-  const i = H(o.options, o.optionKey) ?? "", l = o.size, r = ((y = (z = (x = o.translations) == null ? void 0 : x.options) == null ? void 0 : z[o.optionKey]) == null ? void 0 : y.tooltip) ?? ((k = o.controlInfo) == null ? void 0 : k.tooltip), {
-    extraLabel: u,
-    extraLabelTooltip: s,
+}, io = (o) => {
+  var u, b, c, a, p, m, d, x, z, $, I, v, C, O;
+  const t = ((c = (b = (u = o.translations) == null ? void 0 : u.options) == null ? void 0 : b[o.optionKey]) == null ? void 0 : c.label) ?? ((a = o.controlInfo) == null ? void 0 : a.label) ?? o.optionKey ?? "", e = o.language ?? "en", n = {};
+  n[e] = ((d = (m = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : m[o.optionKey]) == null ? void 0 : d.placeholder) ?? ((x = o.controlInfo) == null ? void 0 : x.placeholder) ?? "";
+  const i = H(o.options, o.optionKey) ?? "", l = o.size, r = ((I = ($ = (z = o.translations) == null ? void 0 : z.options) == null ? void 0 : $[o.optionKey]) == null ? void 0 : I.tooltip) ?? ((v = o.controlInfo) == null ? void 0 : v.tooltip), f = w(o), {
+    extraLabel: s,
+    extraLabelTooltip: y,
     extraLabelHasClickAction: L,
-    extraLabelClickAction: v
-  } = A(o), $ = T(o);
-  return w`
+    extraLabelClickAction: k
+  } = A(o), h = T(o);
+  return K`
     <luzmo-edit-option-text-field
       .label=${t}
       .placeholder=${n[e]}
-      .value=${i}
+      .value=${i ?? f}
       .size=${l}
       .tooltip=${r}
-      .extraLabel=${u}
-      .extraLabelTooltip=${s}
+      .extraLabel=${s}
+      .extraLabelTooltip=${y}
       .extraLabelHasClickAction=${L}
-      @extraLabelClick=${v}
-      @option-changed=${$}
-      .fromOptionValue=${(I = o.controlInfo) == null ? void 0 : I.fromOptionValue}
-      .toOptionValue=${(C = o.controlInfo) == null ? void 0 : C.toOptionValue}
+      @extraLabelClick=${k}
+      @option-changed=${h}
+      .fromOptionValue=${(C = o.controlInfo) == null ? void 0 : C.fromOptionValue}
+      .toOptionValue=${(O = o.controlInfo) == null ? void 0 : O.toOptionValue}
     ></luzmo-edit-option-text-field>
   `;
-}, io = (o) => {
+}, no = (o) => {
   switch (o.controlType) {
     case "picker":
-      return Q(o);
+      return W(o);
     case "slider":
-      return Z(o);
-    case "switch":
       return oo(o);
+    case "switch":
+      return to(o);
     case "multi-language-field":
-      return D(o);
+      return J(o);
     case "text-field":
-      return to(o);
+      return io(o);
     case "number-field":
-      return J(o);
+      return Q(o);
     case "position-picker":
-      return W(o);
-    case "positions-number-field":
       return X(o);
-    case "radio-button-group":
+    case "positions-number-field":
       return Y(o);
+    case "radio-button-group":
+      return Z(o);
     case "color-picker":
-      return q(o);
+      return D(o);
     case "action-button-group":
-      return U(o);
+      return q(o);
   }
-}, no = (o, t) => {
+}, eo = (o, t) => {
   const e = (n) => {
-    for (const i of n) {
+    for (const i of n ?? []) {
       if (i.key === o)
         return i.control;
       if (i.children) {
@@ -441,7 +435,7 @@ const R = ":host{font-family:var(--luzmo-edit-option-font-family, var(--luzmo-fo
     }
     return null;
   };
-  if (t)
+  if (t && Array.isArray(t))
     for (const n of t) {
       const i = e(n.children);
       if (i)
@@ -449,59 +443,60 @@ const R = ":host{font-family:var(--luzmo-edit-option-font-family, var(--luzmo-fo
     }
   return null;
 };
-var eo = Object.defineProperty, M = (o, t, e, n) => {
+var lo = Object.defineProperty, E = (o, t, e, n) => {
   for (var i = void 0, l = o.length - 1, r; l >= 0; l--)
     (r = o[l]) && (i = r(t, e, i) || i);
-  return i && eo(t, e, i), i;
+  return i && lo(t, e, i), i;
 };
-const P = class P extends F {
+const S = class S extends G {
   constructor() {
-    super(...arguments), this._loadItemConfig = new B(this, {
+    super(...arguments), this._loadItemConfig = new P(this, {
       task: async ([t, e, n]) => {
         let i = !1;
         if (t !== this._itemTypeLoaded) {
-          const u = /* @__PURE__ */ Object.assign({
-            "../../item-definitions/area-chart/area-chart-options.config.ts": () => import("../area-chart-options.config-B5qtlH-_.js"),
-            "../../item-definitions/bar-chart/bar-chart-options.config.ts": () => import("../bar-chart-options.config-CQfpV1Rx.js"),
-            "../../item-definitions/box-plot/box-plot-options.config.ts": () => import("../box-plot-options.config-DoZHVmpm.js"),
-            "../../item-definitions/bubble-chart/bubble-chart-options.config.ts": () => import("../bubble-chart-options.config-Cp6OQnJl.js"),
-            "../../item-definitions/bullet-chart/bullet-chart-options.config.ts": () => import("../bullet-chart-options.config-D8mAooLE.js"),
-            "../../item-definitions/choropleth-map/choropleth-map-options.config.ts": () => import("../choropleth-map-options.config-V8tRnQqz.js"),
+          const f = /* @__PURE__ */ Object.assign({
+            "../../item-definitions/area-chart/area-chart-options.config.ts": () => import("../area-chart-options.config-BbSP_Auh.js"),
+            "../../item-definitions/bar-chart/bar-chart-options.config.ts": () => import("../bar-chart-options.config-CRGDLJCK.js"),
+            "../../item-definitions/box-plot/box-plot-options.config.ts": () => import("../box-plot-options.config-BtonHYul.js"),
+            "../../item-definitions/bubble-chart/bubble-chart-options.config.ts": () => import("../bubble-chart-options.config-R5R-E3dd.js"),
+            "../../item-definitions/bullet-chart/bullet-chart-options.config.ts": () => import("../bullet-chart-options.config-D-_esi9S.js"),
+            "../../item-definitions/choropleth-map/choropleth-map-options.config.ts": () => import("../choropleth-map-options.config-z2fY__jr.js"),
             "../../item-definitions/circle-pack-chart/circle-pack-chart-options.config.ts": () => import("../circle-pack-chart-options.config-DEYL3DMK.js"),
-            "../../item-definitions/circular-gauge/circular-guage-options.config.ts": () => import("../circular-guage-options.config-C3ExuT5F.js"),
-            "../../item-definitions/column-chart/column-chart-options.config.ts": () => import("../column-chart-options.config-CGw1dN1E.js"),
+            "../../item-definitions/circular-gauge/circular-gauge-options.config.ts": () => import("../circular-gauge-options.config-9tIxyJj1.js"),
+            "../../item-definitions/column-chart/column-chart-options.config.ts": () => import("../column-chart-options.config-D87ZFT76.js"),
             "../../item-definitions/combination-chart/combination-chart-options.config.ts": () => import("../combination-chart-options.config-CApdgFvv.js"),
-            "../../item-definitions/conditional-number/conditional-number-options.config.ts": () => import("../conditional-number-options.config-B24MqnZj.js"),
-            "../../item-definitions/donut-chart/donut-chart-options.config.ts": () => import("../donut-chart-options.config-DuJFyp4z.js"),
-            "../../item-definitions/dropdown-filter/dropdown-filter-options.config.ts": () => import("../dropdown-filter-options.config-BxjR1xAD.js"),
+            "../../item-definitions/conditional-number/conditional-number-options.config.ts": () => import("../conditional-number-options.config-PVvKLc1P.js"),
+            "../../item-definitions/donut-chart/donut-chart-options.config.ts": () => import("../donut-chart-options.config-NPwNtLDW.js"),
+            "../../item-definitions/dropdown-filter/dropdown-filter-options.config.ts": () => import("../dropdown-filter-options.config-D9dvPypF.js"),
+            "../../item-definitions/funnel-chart/funnel-chart-options.config.ts": () => import("../funnel-chart-options.config-CrlHKd36.js"),
             "../../item-definitions/image/image-options.config.ts": () => import("../image-options.config-CBfeq5Zw.js"),
-            "../../item-definitions/line-chart/line-chart-options.config.ts": () => import("../line-chart-options.config-CEUJYNt7.js"),
+            "../../item-definitions/line-chart/line-chart-options.config.ts": () => import("../line-chart-options.config-BtfCTjNr.js"),
             "../../item-definitions/ohlc-chart/ohlc-chart-options.config.ts": () => import("../ohlc-chart-options.config-D9npwajt.js"),
-            "../../item-definitions/radar-chart/radar-chart-options.config.ts": () => import("../radar-chart-options.config-gKHFbC63.js"),
-            "../../item-definitions/sankey-diagram/sankey-diagram-options.config.ts": () => import("../sankey-diagram-options.config-ylhZhJ6H.js"),
-            "../../item-definitions/search-filter/search-filter-options.config.ts": () => import("../search-filter-options.config-baX2Vdul.js"),
-            "../../item-definitions/slicer-filter/slicer-filter-options.config.ts": () => import("../slicer-filter-options.config-A3YK_KZn.js"),
-            "../../item-definitions/slider-filter/slider-filter-options.config.ts": () => import("../slider-filter-options.config-C-zvfTNl.js"),
+            "../../item-definitions/radar-chart/radar-chart-options.config.ts": () => import("../radar-chart-options.config-DFxna7UF.js"),
+            "../../item-definitions/sankey-diagram/sankey-diagram-options.config.ts": () => import("../sankey-diagram-options.config-Dj9g2BOp.js"),
+            "../../item-definitions/search-filter/search-filter-options.config.ts": () => import("../search-filter-options.config-BE3JhR-F.js"),
+            "../../item-definitions/slicer-filter/slicer-filter-options.config.ts": () => import("../slicer-filter-options.config-BArPA7Mb.js"),
+            "../../item-definitions/slider-filter/slider-filter-options.config.ts": () => import("../slider-filter-options.config-BIKIbGbN.js"),
             "../../item-definitions/spacer/spacer-options.config.ts": () => import("../spacer-options.config-IpwUxDyU.js"),
-            "../../item-definitions/sunburst-chart/sunburst-chart-options.config.ts": () => import("../sunburst-chart-options.config-VZqDthcz.js"),
+            "../../item-definitions/sunburst-chart/sunburst-chart-options.config.ts": () => import("../sunburst-chart-options.config-BxkJfdrU.js"),
             "../../item-definitions/text/text-options.config.ts": () => import("../text-options.config-BWaJoeG2.js"),
-            "../../item-definitions/treemap-chart/treemap-chart-options.config.ts": () => import("../treemap-chart-options.config-f8L8KfDj.js"),
-            "../../item-definitions/video/video-options.config.ts": () => import("../video-options.config-CbtNZAEK.js"),
-            "../../item-definitions/wordcloud-chart/wordcloud-chart-options.config.ts": () => import("../wordcloud-chart-options.config-CQs8YFfd.js")
+            "../../item-definitions/treemap-chart/treemap-chart-options.config.ts": () => import("../treemap-chart-options.config-MyCTS35Y.js"),
+            "../../item-definitions/video/video-options.config.ts": () => import("../video-options.config-Dk36zJ1B.js"),
+            "../../item-definitions/wordcloud-chart/wordcloud-chart-options.config.ts": () => import("../wordcloud-chart-options.config-Dq7TF0sb.js")
           });
-          if (u[`../../item-definitions/${t}/${t}-options.config.ts`])
+          if (f[`../../item-definitions/${t}/${t}-options.config.ts`])
             try {
-              const s = await u[`../../item-definitions/${t}/${t}-options.config.ts`]();
-              this._optionsConfig = (s == null ? void 0 : s.default) ?? {};
+              const s = await f[`../../item-definitions/${t}/${t}-options.config.ts`]();
+              this._optionsConfig = (s == null ? void 0 : s.default) ?? [];
             } catch {
-              this._optionsConfig = {};
+              this._optionsConfig = [];
             }
           else
-            this._optionsConfig = {};
+            this._optionsConfig = [];
           i = !0;
         }
         if (n !== this._languageLoaded || i) {
-          const u = /* @__PURE__ */ Object.assign({
+          const f = /* @__PURE__ */ Object.assign({
             "../../item-definitions/area-chart/i18n/area-chart-options.de.ts": () => import("../area-chart-options.de-FcVE2Ywe.js"),
             "../../item-definitions/area-chart/i18n/area-chart-options.en.ts": () => import("../area-chart-options.en-Cz5aXeVe.js"),
             "../../item-definitions/area-chart/i18n/area-chart-options.es.ts": () => import("../area-chart-options.es-o3ABpXnC.js"),
@@ -517,11 +512,11 @@ const P = class P extends F {
             "../../item-definitions/box-plot/i18n/box-plot-options.es.ts": () => import("../box-plot-options.es-ePZUgamp.js"),
             "../../item-definitions/box-plot/i18n/box-plot-options.fr.ts": () => import("../box-plot-options.fr-DNkSteEz.js"),
             "../../item-definitions/box-plot/i18n/box-plot-options.nl.ts": () => import("../box-plot-options.nl-GBXrkaLf.js"),
-            "../../item-definitions/bubble-chart/i18n/bubble-chart-options.de.ts": () => import("../bubble-chart-options.de-BGWrRmuN.js"),
-            "../../item-definitions/bubble-chart/i18n/bubble-chart-options.en.ts": () => import("../bubble-chart-options.en-CYwRht5M.js"),
-            "../../item-definitions/bubble-chart/i18n/bubble-chart-options.es.ts": () => import("../bubble-chart-options.es-ZnkjzgL_.js"),
-            "../../item-definitions/bubble-chart/i18n/bubble-chart-options.fr.ts": () => import("../bubble-chart-options.fr-Cym1h3sF.js"),
-            "../../item-definitions/bubble-chart/i18n/bubble-chart-options.nl.ts": () => import("../bubble-chart-options.nl-D1TFWi5k.js"),
+            "../../item-definitions/bubble-chart/i18n/bubble-chart-options.de.ts": () => import("../bubble-chart-options.de-D8Ap7joq.js"),
+            "../../item-definitions/bubble-chart/i18n/bubble-chart-options.en.ts": () => import("../bubble-chart-options.en-BU3F4n13.js"),
+            "../../item-definitions/bubble-chart/i18n/bubble-chart-options.es.ts": () => import("../bubble-chart-options.es-Bh_dRgE3.js"),
+            "../../item-definitions/bubble-chart/i18n/bubble-chart-options.fr.ts": () => import("../bubble-chart-options.fr-CNiJgmGl.js"),
+            "../../item-definitions/bubble-chart/i18n/bubble-chart-options.nl.ts": () => import("../bubble-chart-options.nl-BoV3kpaZ.js"),
             "../../item-definitions/bullet-chart/i18n/bullet-chart-options.de.ts": () => import("../bullet-chart-options.de-DxBk0yku.js"),
             "../../item-definitions/bullet-chart/i18n/bullet-chart-options.en.ts": () => import("../bullet-chart-options.en-Cu1cnL90.js"),
             "../../item-definitions/bullet-chart/i18n/bullet-chart-options.es.ts": () => import("../bullet-chart-options.es-pGm2umSR.js"),
@@ -567,11 +562,16 @@ const P = class P extends F {
             "../../item-definitions/dropdown-filter/i18n/dropdown-filter-options.es.ts": () => import("../dropdown-filter-options.es-DjgZxklA.js"),
             "../../item-definitions/dropdown-filter/i18n/dropdown-filter-options.fr.ts": () => import("../dropdown-filter-options.fr-n_2OjO_u.js"),
             "../../item-definitions/dropdown-filter/i18n/dropdown-filter-options.nl.ts": () => import("../dropdown-filter-options.nl-CL6UEP00.js"),
-            "../../item-definitions/image/i18n/imageobject-options.de.ts": () => import("../imageobject-options.de-CYVnqdL_.js"),
-            "../../item-definitions/image/i18n/imageobject-options.en.ts": () => import("../imageobject-options.en-BMmV-4O-.js"),
-            "../../item-definitions/image/i18n/imageobject-options.es.ts": () => import("../imageobject-options.es-UN5rmaEt.js"),
-            "../../item-definitions/image/i18n/imageobject-options.fr.ts": () => import("../imageobject-options.fr-DRE3zImB.js"),
-            "../../item-definitions/image/i18n/imageobject-options.nl.ts": () => import("../imageobject-options.nl-D20hki6i.js"),
+            "../../item-definitions/funnel-chart/i18n/funnel-chart-options.de.ts": () => import("../funnel-chart-options.de-CuVFMJUC.js"),
+            "../../item-definitions/funnel-chart/i18n/funnel-chart-options.en.ts": () => import("../funnel-chart-options.en-CvPbJr1r.js"),
+            "../../item-definitions/funnel-chart/i18n/funnel-chart-options.es.ts": () => import("../funnel-chart-options.es-_M7sC4m6.js"),
+            "../../item-definitions/funnel-chart/i18n/funnel-chart-options.fr.ts": () => import("../funnel-chart-options.fr-DvnZ-XbE.js"),
+            "../../item-definitions/funnel-chart/i18n/funnel-chart-options.nl.ts": () => import("../funnel-chart-options.nl-C72_FTNm.js"),
+            "../../item-definitions/image/i18n/image-options.de.ts": () => import("../image-options.de-CYVnqdL_.js"),
+            "../../item-definitions/image/i18n/image-options.en.ts": () => import("../image-options.en-BMmV-4O-.js"),
+            "../../item-definitions/image/i18n/image-options.es.ts": () => import("../image-options.es-UN5rmaEt.js"),
+            "../../item-definitions/image/i18n/image-options.fr.ts": () => import("../image-options.fr-DRE3zImB.js"),
+            "../../item-definitions/image/i18n/image-options.nl.ts": () => import("../image-options.nl-D20hki6i.js"),
             "../../item-definitions/line-chart/i18n/line-chart-options.de.ts": () => import("../line-chart-options.de-C4c6fWBr.js"),
             "../../item-definitions/line-chart/i18n/line-chart-options.en.ts": () => import("../line-chart-options.en-XEng6bZk.js"),
             "../../item-definitions/line-chart/i18n/line-chart-options.es.ts": () => import("../line-chart-options.es-B6CBKzRj.js"),
@@ -612,11 +612,11 @@ const P = class P extends F {
             "../../item-definitions/sunburst-chart/i18n/sunburst-chart-options.es.ts": () => import("../sunburst-chart-options.es-DGsVkhyC.js"),
             "../../item-definitions/sunburst-chart/i18n/sunburst-chart-options.fr.ts": () => import("../sunburst-chart-options.fr-DIWRXmkr.js"),
             "../../item-definitions/sunburst-chart/i18n/sunburst-chart-options.nl.ts": () => import("../sunburst-chart-options.nl-D0hYq2Mh.js"),
-            "../../item-definitions/text/i18n/textobject-options.de.ts": () => import("../textobject-options.de-BjfS5RBn.js"),
-            "../../item-definitions/text/i18n/textobject-options.en.ts": () => import("../textobject-options.en-BQqHFc7M.js"),
-            "../../item-definitions/text/i18n/textobject-options.es.ts": () => import("../textobject-options.es-CMB1DKq4.js"),
-            "../../item-definitions/text/i18n/textobject-options.fr.ts": () => import("../textobject-options.fr-VPJ3bDOM.js"),
-            "../../item-definitions/text/i18n/textobject-options.nl.ts": () => import("../textobject-options.nl-V03mmGmH.js"),
+            "../../item-definitions/text/i18n/text-options.de.ts": () => import("../text-options.de-BjfS5RBn.js"),
+            "../../item-definitions/text/i18n/text-options.en.ts": () => import("../text-options.en-BQqHFc7M.js"),
+            "../../item-definitions/text/i18n/text-options.es.ts": () => import("../text-options.es-CMB1DKq4.js"),
+            "../../item-definitions/text/i18n/text-options.fr.ts": () => import("../text-options.fr-VPJ3bDOM.js"),
+            "../../item-definitions/text/i18n/text-options.nl.ts": () => import("../text-options.nl-C8sliUgH.js"),
             "../../item-definitions/treemap-chart/i18n/treemap-chart-options.de.ts": () => import("../treemap-chart-options.de-Bdj6O-Ju.js"),
             "../../item-definitions/treemap-chart/i18n/treemap-chart-options.en.ts": () => import("../treemap-chart-options.en-D6co_QL8.js"),
             "../../item-definitions/treemap-chart/i18n/treemap-chart-options.es.ts": () => import("../treemap-chart-options.es-BjbsJzCM.js"),
@@ -633,9 +633,9 @@ const P = class P extends F {
             "../../item-definitions/wordcloud-chart/i18n/wordcloud-chart-options.fr.ts": () => import("../wordcloud-chart-options.fr-DNK5Ouc5.js"),
             "../../item-definitions/wordcloud-chart/i18n/wordcloud-chart-options.nl.ts": () => import("../wordcloud-chart-options.nl-CcgmqL7I.js")
           });
-          if (u[`../../item-definitions/${t}/i18n/${t}-options.${n}.ts`])
+          if (f[`../../item-definitions/${t}/i18n/${t}-options.${n}.ts`])
             try {
-              const s = await u[`../../item-definitions/${t}/i18n/${t}-options.${n}.ts`]();
+              const s = await f[`../../item-definitions/${t}/i18n/${t}-options.${n}.ts`]();
               this._translations = (s == null ? void 0 : s.default) ?? {};
             } catch (s) {
               this._translations = {}, console.error(s);
@@ -643,11 +643,11 @@ const P = class P extends F {
           else
             this._translations = {};
         }
-        const l = no(e, this._optionsConfig), r = l == null ? void 0 : l.type;
+        const l = eo(e, this._optionsConfig), r = l == null ? void 0 : l.type;
         if (r !== this._controlTypeLoaded) {
-          const u = /* @__PURE__ */ Object.assign({ "../edit-option-action-button-group/index.ts": () => import("../edit-option-action-button-group/index.js"), "../edit-option-color-picker/index.ts": () => import("../edit-option-color-picker/index.js"), "../edit-option-multi-language-field/index.ts": () => import("../edit-option-multi-language-field/index.js"), "../edit-option-number-field/index.ts": () => import("../edit-option-number-field/index.js"), "../edit-option-picker/index.ts": () => import("../edit-option-picker/index.js"), "../edit-option-position-picker/index.ts": () => import("../edit-option-position-picker/index.js"), "../edit-option-positions-number-field/index.ts": () => import("../edit-option-positions-number-field/index.js"), "../edit-option-radio-button-group/index.ts": () => import("../edit-option-radio-button-group/index.js"), "../edit-option-slider/index.ts": () => import("../edit-option-slider/index.js"), "../edit-option-switch/index.ts": () => import("../edit-option-switch/index.js"), "../edit-option-text-field/index.ts": () => import("../edit-option-text-field/index.js") });
+          const f = /* @__PURE__ */ Object.assign({ "../edit-option-action-button-group/index.ts": () => import("../edit-option-action-button-group/index.js"), "../edit-option-color-picker/index.ts": () => import("../edit-option-color-picker/index.js"), "../edit-option-multi-language-field/index.ts": () => import("../edit-option-multi-language-field/index.js"), "../edit-option-number-field/index.ts": () => import("../edit-option-number-field/index.js"), "../edit-option-picker/index.ts": () => import("../edit-option-picker/index.js"), "../edit-option-position-picker/index.ts": () => import("../edit-option-position-picker/index.js"), "../edit-option-positions-number-field/index.ts": () => import("../edit-option-positions-number-field/index.js"), "../edit-option-radio-button-group/index.ts": () => import("../edit-option-radio-button-group/index.js"), "../edit-option-slider/index.ts": () => import("../edit-option-slider/index.js"), "../edit-option-switch/index.ts": () => import("../edit-option-switch/index.js"), "../edit-option-text-field/index.ts": () => import("../edit-option-text-field/index.js") });
           try {
-            u[`../edit-option-${r}/index.ts`] && (await u[`../edit-option-${r}/index.ts`](), this._controlTypeLoaded = r);
+            f[`../edit-option-${r}/index.ts`] && (await f[`../edit-option-${r}/index.ts`](), this._controlTypeLoaded = r);
           } catch (s) {
             console.error(s);
           }
@@ -670,8 +670,8 @@ const P = class P extends F {
   }
   render() {
     return this._loadItemConfig.render({
-      pending: () => w`<p>Loading...</p>`,
-      complete: (t) => io({
+      pending: () => K`<p>Loading...</p>`,
+      complete: (t) => no({
         controlType: t == null ? void 0 : t.type,
         optionKey: this.optionKey,
         controlInfo: t,
@@ -683,34 +683,34 @@ const P = class P extends F {
         size: this.size,
         changeCallback: this.changedOptions
       }),
-      error: (t) => (console.error(t), w``)
+      error: (t) => (console.error(t), K``)
     });
   }
 };
-P.styles = G(R);
-let j = P;
-M([
-  _({ type: String, reflect: !0 })
-], j.prototype, "language");
-M([
-  _({ type: String, reflect: !0, attribute: "item-type" })
-], j.prototype, "itemType");
-M([
-  _({ type: String, reflect: !0, attribute: "option-key" })
-], j.prototype, "optionKey");
-M([
-  _({ type: Object })
-], j.prototype, "options");
-M([
-  _({ type: Object })
-], j.prototype, "slots");
-M([
-  _({ type: Object })
-], j.prototype, "theme");
-M([
-  _({ type: String, reflect: !0 })
-], j.prototype, "size");
-customElements.get("luzmo-edit-option") || customElements.define("luzmo-edit-option", j);
+S.styles = R(U);
+let M = S;
+E([
+  j({ type: String, reflect: !0 })
+], M.prototype, "language");
+E([
+  j({ type: String, reflect: !0, attribute: "item-type" })
+], M.prototype, "itemType");
+E([
+  j({ type: String, reflect: !0, attribute: "option-key" })
+], M.prototype, "optionKey");
+E([
+  j({ type: Object })
+], M.prototype, "options");
+E([
+  j({ type: Object })
+], M.prototype, "slots");
+E([
+  j({ type: Object })
+], M.prototype, "theme");
+E([
+  j({ type: String, reflect: !0 })
+], M.prototype, "size");
+customElements.get("luzmo-edit-option") || customElements.define("luzmo-edit-option", M);
 export {
-  j as LuzmoEditOption
+  M as LuzmoEditOption
 };