@luzmo/analytics-components-kit 1.0.1-alpha.1 → 1.0.1-alpha.11

package/components/edit-option/index.js

@@ -0,0 +1,543 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * 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 v, k as F, a as G, n as w } from "../property-B2F7x7Cz.js";
+import { o as N } from "../if-defined-Bv6MRdSW.js";
+const P = () => {
+  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);
+  }
+};
+P();
+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))}", C = (o) => {
+  var i, c, f, a, $, h, d, s, u, m, r, p, z, x, b;
+  let t;
+  typeof ((i = o.controlInfo) == null ? void 0 : i.extraLabel) == "function" ? t = o.controlInfo.extraLabel(
+    o.options,
+    o.slots,
+    o.theme
+  ) : typeof ((c = o.controlInfo) == null ? void 0 : c.extraLabel) == "string" && (t = o.controlInfo.extraLabel), typeof t == "string" && (t = ((h = ($ = (a = (f = o.translations) == null ? void 0 : f.options) == null ? void 0 : a[o.optionKey]) == null ? void 0 : $.extraLabel) == null ? void 0 : h[t]) ?? t);
+  let l;
+  typeof ((d = o.controlInfo) == null ? void 0 : d.extraLabelTooltip) == "function" ? t = o.controlInfo.extraLabelTooltip(
+    o.options,
+    o.slots,
+    o.theme
+  ) : typeof ((s = o.controlInfo) == null ? void 0 : s.extraLabelTooltip) == "string" && (l = o.controlInfo.extraLabelTooltip), typeof l == "string" && (t = ((p = (r = (m = (u = o.translations) == null ? void 0 : u.options) == null ? void 0 : m[o.optionKey]) == null ? void 0 : r.extraLabelTooltip) == null ? void 0 : p[l]) ?? l);
+  let n;
+  typeof ((z = o.controlInfo) == null ? void 0 : z.extraLabelHasClickAction) == "function" ? n = o.controlInfo.extraLabelHasClickAction(
+    o.options,
+    o.slots,
+    o.theme
+  ) : typeof ((x = o.controlInfo) == null ? void 0 : x.extraLabelHasClickAction) == "boolean" && (n = o.controlInfo.extraLabelHasClickAction);
+  const e = typeof ((b = o.controlInfo) == null ? void 0 : b.extraLabelClickAction) == "function" ? () => o.controlInfo.extraLabelClickAction(
+    o.options,
+    o.slots,
+    o.theme
+  ) : () => {
+  };
+  return {
+    extraLabel: t,
+    extraLabelTooltip: l,
+    extraLabelHasClickAction: n,
+    extraLabelClickAction: e
+  };
+}, O = (o, t) => {
+  if (t.includes(".")) {
+    const l = t.split(".");
+    let n = o;
+    for (let i = 0; i < l.length - 1; i++)
+      n = n[l[i]] ?? {};
+    const e = l.length - 1;
+    return n[l[e]];
+  }
+  return o[t];
+}, K = (o) => (t) => {
+  const l = { ...o.options };
+  if (o.optionKey.includes(".")) {
+    const n = o.optionKey.split(".");
+    let e = l;
+    for (let c = 0; c < n.length - 1; c++)
+      e[n[c]] = e[n[c]] ?? {}, e = e[n[c]];
+    const i = n.length - 1;
+    e[n[i]] = t.detail.value;
+  } else
+    l[o.optionKey] = t.detail.value;
+  return o.changeCallback(l);
+}, U = (o) => {
+  var h, d, s, u, m, r, p, z, x;
+  const t = ((s = (d = (h = o.translations) == null ? void 0 : h.options) == null ? void 0 : d[o.optionKey]) == null ? void 0 : s.label) ?? ((u = o.controlInfo) == null ? void 0 : u.label) ?? o.optionKey ?? "", l = o.size, n = {};
+  Object.keys((m = o.controlInfo) == null ? void 0 : m.values).forEach((b) => {
+    var L, y, k, I, A, T;
+    n[b] = {
+      ...(L = o.controlInfo) == null ? void 0 : L.values[b],
+      label: ((A = (I = (k = (y = o.translations) == null ? void 0 : y.options) == null ? void 0 : k[o.optionKey]) == null ? void 0 : I.enum) == null ? void 0 : A[b]) ?? ((T = o.controlInfo) == null ? void 0 : T.values[b].label)
+    };
+  });
+  const e = O(o.options, o.optionKey), {
+    extraLabel: i,
+    extraLabelTooltip: c,
+    extraLabelHasClickAction: f,
+    extraLabelClickAction: a
+  } = C(o), $ = K(o);
+  return v`
+    <luzmo-edit-option-action-button-group
+      .label=${t}
+      .value=${e}
+      .values=${n}
+      .default=${(r = o.controlInfo) == null ? void 0 : r.default}
+      .selects=${(p = o.controlInfo) == null ? void 0 : p.selects}
+      .size=${l}
+      .extraLabel=${i}
+      .extraLabelTooltip=${c}
+      .extraLabelHasClickAction=${f}
+      @extraLabelClick=${a}
+      @option-changed=${$}
+      .fromOptionValue=${(z = o.controlInfo) == null ? void 0 : z.fromOptionValue}
+      .toOptionValue=${(x = o.controlInfo) == null ? void 0 : x.toOptionValue}
+    ></luzmo-edit-option-action-button-group>
+  `;
+}, q = (o) => {
+  var d, s, u, m, r, p, z, x;
+  const t = ((u = (s = (d = o.translations) == null ? void 0 : d.options) == null ? void 0 : s[o.optionKey]) == null ? void 0 : u.label) ?? ((m = o.controlInfo) == null ? void 0 : m.label) ?? o.optionKey ?? "", l = O(o.options, o.optionKey), n = o.size;
+  let e;
+  typeof ((r = o.controlInfo) == null ? void 0 : r.default) == "function" ? e = o.controlInfo.default(
+    o.options,
+    o.slots,
+    o.theme
+  ) : typeof ((p = o.controlInfo) == null ? void 0 : p.default) == "string" && (e = o.controlInfo.default);
+  const {
+    extraLabel: i,
+    extraLabelTooltip: c,
+    extraLabelHasClickAction: f,
+    extraLabelClickAction: a
+  } = C(o), $ = K(o);
+  return v`
+    <luzmo-edit-option-color-picker
+      .value=${l ?? e}
+      .label=${t}
+      .size=${n}
+      .extraLabel=${i}
+      .extraLabelTooltip=${c}
+      .extraLabelHasClickAction=${f}
+      @extraLabelClick=${() => {
+    if (typeof a == "function") {
+      const { options: b } = a();
+      return o.changeCallback(b);
+    }
+  }}
+      @option-changed=${$}
+      .fromOptionValue=${(z = o.controlInfo) == null ? void 0 : z.fromOptionValue}
+      .toOptionValue=${(x = o.controlInfo) == null ? void 0 : x.toOptionValue}
+    ></luzmo-edit-option-color-picker>
+  `;
+}, D = (o) => {
+  var d, s, u, m, r, p, z, x, b, L;
+  const t = ((u = (s = (d = o.translations) == null ? void 0 : d.options) == null ? void 0 : s[o.optionKey]) == null ? void 0 : u.label) ?? ((m = o.controlInfo) == null ? void 0 : m.label) ?? o.optionKey ?? "", l = O(o.options, o.optionKey) ?? {}, n = o.language ?? "en", e = {};
+  e[n] = ((z = (p = (r = o.translations) == null ? void 0 : r.options) == null ? void 0 : p[o.optionKey]) == null ? void 0 : z.placeholder) ?? ((x = o.controlInfo) == null ? void 0 : x.placeholder) ?? "";
+  const i = o.size, {
+    extraLabel: c,
+    extraLabelTooltip: f,
+    extraLabelHasClickAction: a,
+    extraLabelClickAction: $
+  } = C(o), h = K(o);
+  return v`
+    <luzmo-edit-option-multi-language-field
+      .label=${t}
+      .placeholder=${e}
+      .value=${l}
+      language=${N(n)}
+      .size=${i}
+      .extraLabel=${c}
+      .extraLabelTooltip=${f}
+      .extraLabelHasClickAction=${a}
+      @extraLabelClick=${$}
+      @option-changed=${h}
+      .fromOptionValue=${(b = o.controlInfo) == null ? void 0 : b.fromOptionValue}
+      .toOptionValue=${(L = o.controlInfo) == null ? void 0 : L.toOptionValue}
+    ></luzmo-edit-option-multi-language-field>
+  `;
+}, J = (o) => {
+  var u, m, r, p, z, x, b, L, y, k;
+  const t = ((r = (m = (u = o.translations) == null ? void 0 : u.options) == null ? void 0 : m[o.optionKey]) == null ? void 0 : r.label) ?? ((p = o.controlInfo) == null ? void 0 : p.label) ?? o.optionKey ?? "", l = (z = o.controlInfo) == null ? void 0 : z.min, n = (x = o.controlInfo) == null ? void 0 : x.max, e = (b = o.controlInfo) == null ? void 0 : b.step, i = O(o.options, o.optionKey), c = (L = o.controlInfo) == null ? void 0 : L.default, f = o.size, {
+    extraLabel: a,
+    extraLabelTooltip: $,
+    extraLabelHasClickAction: h,
+    extraLabelClickAction: d
+  } = C(o), s = K(o);
+  return v`
+    <luzmo-edit-option-number-field
+      .value=${i}
+      .default=${c}
+      .min=${l}
+      .max=${n}
+      .step=${e}
+      .label=${t}
+      .size=${f}
+      .extraLabel=${a}
+      .extraLabelTooltip=${$}
+      .extraLabelHasClickAction=${h}
+      @extraLabelClick=${d}
+      @option-changed=${s}
+      .fromOptionValue=${(y = o.controlInfo) == null ? void 0 : y.fromOptionValue}
+      .toOptionValue=${(k = o.controlInfo) == null ? void 0 : k.toOptionValue}
+    ></luzmo-edit-option-number-field>
+  `;
+}, Q = (o) => {
+  var s, u, m, r, p, z, x, b, L, y, k;
+  const t = ((m = (u = (s = o.translations) == null ? void 0 : s.options) == null ? void 0 : u[o.optionKey]) == null ? void 0 : m.label) ?? ((r = o.controlInfo) == null ? void 0 : r.label) ?? o.optionKey ?? "", l = O(o.options, o.optionKey), n = (p = o.controlInfo) == null ? void 0 : p.default, e = (b = (x = (z = o.translations) == null ? void 0 : z.options) == null ? void 0 : x[o.optionKey]) == null ? void 0 : b.tooltip, i = (L = o.controlInfo) == null ? void 0 : L.enum.reduce(
+    (I, A) => {
+      var T, j, M;
+      return I[A] = ((M = (j = (T = o.translations) == null ? void 0 : T.options) == null ? void 0 : j[o.optionKey]) == null ? void 0 : M.enum[A]) ?? A, I;
+    },
+    {}
+  ), c = o.size, {
+    extraLabel: f,
+    extraLabelTooltip: a,
+    extraLabelHasClickAction: $,
+    extraLabelClickAction: h
+  } = C(o), d = K(o);
+  return v`
+    <luzmo-edit-option-picker
+      .value=${l}
+      .default=${n}
+      .values=${i}
+      .label=${t}
+      .tooltip=${e}
+      .size=${c}
+      .extraLabel=${f}
+      .extraLabelTooltip=${a}
+      .extraLabelHasClickAction=${$}
+      @extraLabelClick=${h}
+      @option-changed=${d}
+      .fromOptionValue=${(y = o.controlInfo) == null ? void 0 : y.fromOptionValue}
+      .toOptionValue=${(k = o.controlInfo) == null ? void 0 : k.toOptionValue}
+    ></luzmo-edit-option-picker>
+  `;
+}, W = (o) => {
+  var s, u, m, r, p, z, x, b, L;
+  const t = ((m = (u = (s = o.translations) == null ? void 0 : s.options) == null ? void 0 : u[o.optionKey]) == null ? void 0 : m.label) ?? ((r = o.controlInfo) == null ? void 0 : r.label), l = (p = o.controlInfo) == null ? void 0 : p.positions, n = ((z = o.controlInfo) == null ? void 0 : z.defaultPosition) ?? "top-right", e = o.size, i = O(o.options, o.optionKey), c = (x = o.controlInfo) == null ? void 0 : x.tooltip, {
+    extraLabel: f,
+    extraLabelTooltip: a,
+    extraLabelHasClickAction: $,
+    extraLabelClickAction: h
+  } = C(o), d = K(o);
+  return v`
+    <luzmo-edit-option-position-picker
+      .value=${(b = o.controlInfo) == null ? void 0 : b.value}
+      .positions=${l}
+      .defaultPosition=${n}
+      .label=${t}
+      .tooltip=${c}
+      .size=${e}
+      .value=${i}
+      .extraLabel=${f}
+      .extraLabelTooltip=${a}
+      .extraLabelHasClickAction=${$}
+      @extraLabelClick=${h}
+      @option-changed=${d}
+      .readonly=${(L = o.controlInfo) == null ? void 0 : L.readonly}
+    ></luzmo-edit-option-position-picker>
+  `;
+}, X = (o) => {
+  var $, h, d, s, u, m, r, p;
+  const t = ((d = (h = ($ = o.translations) == null ? void 0 : $.options) == null ? void 0 : h[o.optionKey]) == null ? void 0 : d.label) ?? ((s = o.controlInfo) == null ? void 0 : s.label), l = O(o.options, o.optionKey), n = o.size, {
+    extraLabel: e,
+    extraLabelTooltip: i,
+    extraLabelHasClickAction: c,
+    extraLabelClickAction: f
+  } = C(o), a = K(o);
+  return v`
+    <luzmo-edit-option-positions-number-field
+      .values=${l}
+      .positions=${(u = o.controlInfo) == null ? void 0 : u.positions}
+      .positionConfiguration=${(m = o.controlInfo) == null ? void 0 : m.positionConfiguration}
+      .label=${t}
+      .size=${n}
+      .extraLabel=${e}
+      .extraLabelTooltip=${i}
+      .extraLabelHasClickAction=${c}
+      @extraLabelClick=${f}
+      @option-changed=${a}
+      .fromOptionValue=${(r = o.controlInfo) == null ? void 0 : r.fromOptionValue}
+      .toOptionValue=${(p = o.controlInfo) == null ? void 0 : p.toOptionValue}
+    ></luzmo-edit-option-positions-number-field>
+  `;
+}, Y = (o) => {
+  var d, s, u, m, r, p, z, x;
+  const t = ((u = (s = (d = o.translations) == null ? void 0 : d.options) == null ? void 0 : s[o.optionKey]) == null ? void 0 : u.label) ?? ((m = o.controlInfo) == null ? void 0 : m.label) ?? o.optionKey ?? "", l = O(o.options, o.optionKey), n = (r = o == null ? void 0 : o.controlInfo) == null ? void 0 : r.default, e = (p = o.controlInfo) == null ? void 0 : p.enum.reduce(
+    (b, L) => {
+      var y, k, I;
+      return b[L] = ((I = (k = (y = o.translations) == null ? void 0 : y.options) == null ? void 0 : k[o.optionKey]) == null ? void 0 : I.enum[L]) ?? L, b;
+    },
+    {}
+  ), i = o.size, {
+    extraLabel: c,
+    extraLabelTooltip: f,
+    extraLabelHasClickAction: a,
+    extraLabelClickAction: $
+  } = C(o), h = K(o);
+  return v`
+    <luzmo-edit-option-radio-button-group
+      .value=${l ?? n}
+      .values=${e}
+      .label=${t}
+      .size=${i}
+      .extraLabel=${c}
+      .extraLabelTooltip=${f}
+      .extraLabelHasClickAction=${a}
+      @extraLabelClick=${$}
+      @option-changed=${h}
+      .fromOptionValue=${(z = o.controlInfo) == null ? void 0 : z.fromOptionValue}
+      .toOptionValue=${(x = o.controlInfo) == null ? void 0 : x.toOptionValue}
+    ></luzmo-edit-option-radio-button-group>
+  `;
+}, Z = (o) => {
+  var r, p, z, x, b, L, y, k, I, A, T, j, M, E;
+  const t = ((z = (p = (r = o.translations) == null ? void 0 : r.options) == null ? void 0 : p[o.optionKey]) == null ? void 0 : z.label) ?? ((x = o.controlInfo) == null ? void 0 : x.label) ?? o.optionKey ?? "", l = (y = (L = (b = o.translations) == null ? void 0 : b.options) == null ? void 0 : L[o.optionKey]) == null ? void 0 : y.tooltip, n = (k = o.controlInfo) == null ? void 0 : k.min, e = (I = o.controlInfo) == null ? void 0 : I.max, i = (A = o.controlInfo) == null ? void 0 : A.step, c = O(o.options, o.optionKey), f = o.size;
+  let a;
+  typeof ((T = o.controlInfo) == null ? void 0 : T.default) == "function" ? a = o.controlInfo.default(
+    o.options,
+    o.slots,
+    o.theme
+  ) : typeof ((j = o.controlInfo) == null ? void 0 : j.default) == "number" && (a = o.controlInfo.default);
+  const {
+    extraLabel: $,
+    extraLabelTooltip: h,
+    extraLabelHasClickAction: d,
+    extraLabelClickAction: s
+  } = C(o), u = K(o);
+  return v`
+    <luzmo-edit-option-slider
+      .value=${c}
+      .default=${a}
+      .min=${n}
+      .max=${e}
+      .step=${i}
+      .label=${t}
+      .tooltip=${l}
+      .size=${f}
+      .extraLabel=${$}
+      .extraLabelTooltip=${h}
+      .extraLabelHasClickAction=${d}
+      @extraLabelClick=${() => {
+    if (typeof s == "function") {
+      const { options: S } = s();
+      return o.changeCallback(S);
+    }
+  }}
+      @option-changed=${u}
+      .fromOptionValue=${(M = o.controlInfo) == null ? void 0 : M.fromOptionValue}
+      .toOptionValue=${(E = o.controlInfo) == null ? void 0 : E.toOptionValue}
+    ></luzmo-edit-option-slider>
+  `;
+}, g = (o) => {
+  var h, d, s, u, m, r, p;
+  const t = ((s = (d = (h = o.translations) == null ? void 0 : h.options) == null ? void 0 : d[o.optionKey]) == null ? void 0 : s.label) ?? ((u = o.controlInfo) == null ? void 0 : u.label) ?? o.optionKey ?? "", l = O(o.options, o.optionKey), n = (m = o.controlInfo) == null ? void 0 : m.default, e = o.size, {
+    extraLabel: i,
+    extraLabelTooltip: c,
+    extraLabelHasClickAction: f,
+    extraLabelClickAction: a
+  } = C(o), $ = K(o);
+  return v`
+    <luzmo-edit-option-switch
+      .value=${l ?? n ?? !1}
+      .label=${t}
+      .size=${e}
+      .extraLabel=${i}
+      .extraLabelTooltip=${c}
+      .extraLabelHasClickAction=${f}
+      @extraLabelClick=${a}
+      @option-changed=${$}
+      .fromOptionValue=${(r = o.controlInfo) == null ? void 0 : r.fromOptionValue}
+      .toOptionValue=${(p = o.controlInfo) == null ? void 0 : p.toOptionValue}
+    ></luzmo-edit-option-switch>
+  `;
+}, oo = (o) => {
+  var d, s, u, m, r, p, z, x, b, L;
+  const t = ((u = (s = (d = o.translations) == null ? void 0 : d.options) == null ? void 0 : s[o.optionKey]) == null ? void 0 : u.label) ?? ((m = o.controlInfo) == null ? void 0 : m.label) ?? o.optionKey ?? "", l = o.language ?? "en", n = {};
+  n[l] = ((z = (p = (r = o.translations) == null ? void 0 : r.options) == null ? void 0 : p[o.optionKey]) == null ? void 0 : z.placeholder) ?? ((x = o.controlInfo) == null ? void 0 : x.placeholder) ?? "";
+  const e = O(o.options, o.optionKey) ?? "", i = o.size, {
+    extraLabel: c,
+    extraLabelTooltip: f,
+    extraLabelHasClickAction: a,
+    extraLabelClickAction: $
+  } = C(o), h = K(o);
+  return v`
+    <luzmo-edit-option-text-field
+      .label=${t}
+      .placeholder=${n[l]}
+      .value=${e}
+      .size=${i}
+      .extraLabel=${c}
+      .extraLabelTooltip=${f}
+      .extraLabelHasClickAction=${a}
+      @extraLabelClick=${$}
+      @option-changed=${h}
+      .fromOptionValue=${(b = o.controlInfo) == null ? void 0 : b.fromOptionValue}
+      .toOptionValue=${(L = o.controlInfo) == null ? void 0 : L.toOptionValue}
+    ></luzmo-edit-option-text-field>
+  `;
+}, to = (o) => {
+  switch (o.controlType) {
+    case "picker":
+      return Q(o);
+    case "slider":
+      return Z(o);
+    case "switch":
+      return g(o);
+    case "multi-language-field":
+      return D(o);
+    case "text-field":
+      return oo(o);
+    case "number-field":
+      return J(o);
+    case "position-picker":
+      return W(o);
+    case "positions-number-field":
+      return X(o);
+    case "radio-button-group":
+      return Y(o);
+    case "color-picker":
+      return q(o);
+    case "action-button-group":
+      return U(o);
+  }
+}, eo = (o, t) => {
+  const l = (n) => {
+    for (const e of n) {
+      if (e.key === o)
+        return e.control;
+      if (e.children) {
+        const i = l(e.children);
+        if (i)
+          return i;
+      }
+    }
+    return null;
+  };
+  for (const n of t) {
+    const e = l(n.children);
+    if (e)
+      return e;
+  }
+  return null;
+};
+var no = Object.defineProperty, H = (o, t, l, n) => {
+  for (var e = void 0, i = o.length - 1, c; i >= 0; i--)
+    (c = o[i]) && (e = c(t, l, e) || e);
+  return e && no(t, l, e), e;
+};
+const _ = class _ extends F {
+  constructor() {
+    super(...arguments), this._loadItemConfig = new B(this, {
+      task: async ([t, l, n]) => {
+        let e = !1;
+        if (t !== this._itemTypeLoaded) {
+          const f = /* @__PURE__ */ Object.assign({
+            "./item-configs/bar-chart.config.ts": () => import("../bar-chart.config-BYIX4E6J.js"),
+            "./item-configs/column-chart.config.ts": () => import("../column-chart.config-BYIX4E6J.js"),
+            "./item-configs/donut-chart.config.ts": () => import("../donut-chart.config-3DhKiSSM.js"),
+            "./item-configs/imageobject.config.ts": () => import("../imageobject.config-CBfeq5Zw.js"),
+            "./item-configs/line-chart.config.ts": () => import("../line-chart.config-DBw4A3Rf.js"),
+            "./item-configs/spacer.config.ts": () => import("../spacer.config-Br2Dm5Uv.js"),
+            "./item-configs/textobject.config.ts": () => import("../textobject.config-DTDqt0ci.js"),
+            "./item-configs/videoobject.config.ts": () => import("../videoobject.config-CbtNZAEK.js")
+          });
+          if (f[`./item-configs/${t}.config.ts`]) {
+            const a = await f[`./item-configs/${t}.config.ts`]();
+            this._optionsConfig = (a == null ? void 0 : a.default) ?? {};
+          }
+          e = !0;
+        }
+        if (n !== this._languageLoaded || e) {
+          const f = /* @__PURE__ */ Object.assign({ "./item-translations/bar-chart.en.ts": () => import("../bar-chart.en-Crc8tYUJ.js"), "./item-translations/bar-chart.fr.ts": () => import("../bar-chart.fr-BwiGRlQf.js"), "./item-translations/bar-chart.nl.ts": () => import("../bar-chart.nl-C9EOP2kE.js"), "./item-translations/column-chart.en.ts": () => import("../column-chart.en-Crc8tYUJ.js"), "./item-translations/column-chart.fr.ts": () => import("../column-chart.fr-BwiGRlQf.js"), "./item-translations/column-chart.nl.ts": () => import("../column-chart.nl-C9EOP2kE.js"), "./item-translations/donut-chart.en.ts": () => import("../donut-chart.en-CrUf4CJ9.js"), "./item-translations/donut-chart.fr.ts": () => import("../donut-chart.fr-DVfZwZny.js"), "./item-translations/donut-chart.nl.ts": () => import("../donut-chart.nl-B13jr7SK.js"), "./item-translations/imageobject.en.ts": () => import("../imageobject.en-BMmV-4O-.js"), "./item-translations/imageobject.fr.ts": () => import("../imageobject.fr-DRE3zImB.js"), "./item-translations/imageobject.nl.ts": () => import("../imageobject.nl-D20hki6i.js"), "./item-translations/textobject.en.ts": () => import("../textobject.en-BQqHFc7M.js"), "./item-translations/textobject.fr.ts": () => import("../textobject.fr-VPJ3bDOM.js"), "./item-translations/textobject.nl.ts": () => import("../textobject.nl-V03mmGmH.js") });
+          if (f[`./item-translations/${t}.${n}.ts`]) {
+            const a = await f[`./item-translations/${t}.${n}.ts`]();
+            this._translations = (a == null ? void 0 : a.default) ?? {};
+          }
+        }
+        const i = eo(l, this._optionsConfig), c = i == null ? void 0 : i.type;
+        if (c !== this._controlTypeLoaded) {
+          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") });
+          f[`../edit-option-${c}/index.ts`] && await f[`../edit-option-${c}/index.ts`](), this._controlTypeLoaded = c;
+        }
+        return i;
+      },
+      args: () => [this.itemType, this.optionKey, this.language]
+    }), this.language = "en", this.options = {}, this.slots = {}, this.theme = {}, this.size = "m", this.changedOptions = (t) => {
+      this.options = t, this.dispatchEvent(
+        new CustomEvent("options-changed", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0,
+          detail: {
+            options: t
+          }
+        })
+      );
+    };
+  }
+  render() {
+    return this._loadItemConfig.render({
+      pending: () => v`<p>Loading...</p>`,
+      complete: (t) => to({
+        controlType: t == null ? void 0 : t.type,
+        optionKey: this.optionKey,
+        controlInfo: t,
+        options: this.options,
+        slots: this.slots,
+        theme: this.theme,
+        language: this.language,
+        translations: this._translations,
+        size: this.size,
+        changeCallback: this.changedOptions
+      }),
+      error: (t) => (console.error(t), v``)
+    });
+  }
+};
+_.styles = G(R);
+let V = _;
+H([
+  w({ type: String, reflect: !0 })
+], V.prototype, "language");
+H([
+  w({ type: String, reflect: !0, attribute: "item-type" })
+], V.prototype, "itemType");
+H([
+  w({ type: String, reflect: !0, attribute: "option-key" })
+], V.prototype, "optionKey");
+H([
+  w({ type: Object })
+], V.prototype, "options");
+H([
+  w({ type: Object })
+], V.prototype, "slots");
+H([
+  w({ type: Object })
+], V.prototype, "theme");
+H([
+  w({ type: String, reflect: !0 })
+], V.prototype, "size");
+customElements.get("luzmo-edit-option") || customElements.define("luzmo-edit-option", V);
+export {
+  V as LuzmoEditOption
+};

package/components/edit-option/item-configs/bar-chart.config.d.ts

@@ -0,0 +1,108 @@
+declare const _default: {
+    key: string;
+    type: string;
+    open: boolean;
+    children: ({
+        key: string;
+        control: {
+            type: string;
+            default: string;
+            enum: string[];
+            min?: undefined;
+            max?: undefined;
+            step?: undefined;
+            extraLabel?: undefined;
+            extraLabelHasClickAction?: undefined;
+            extraLabelClickAction?: undefined;
+        };
+        visibleIf: (_: any, slots: any) => boolean | undefined;
+        type?: undefined;
+    } | {
+        type: string;
+        visibleIf: (_: any, slots: any) => boolean | undefined;
+        key?: undefined;
+        control?: undefined;
+    } | {
+        key: string;
+        control: {
+            type: string;
+            default: boolean;
+            enum?: undefined;
+            min?: undefined;
+            max?: undefined;
+            step?: undefined;
+            extraLabel?: undefined;
+            extraLabelHasClickAction?: undefined;
+            extraLabelClickAction?: undefined;
+        };
+        visibleIf?: undefined;
+        type?: undefined;
+    } | {
+        key: string;
+        control: {
+            type: string;
+            default: boolean;
+            enum?: undefined;
+            min?: undefined;
+            max?: undefined;
+            step?: undefined;
+            extraLabel?: undefined;
+            extraLabelHasClickAction?: undefined;
+            extraLabelClickAction?: undefined;
+        };
+        visibleIf: (_: any, slots: any) => boolean | undefined;
+        type?: undefined;
+    } | {
+        key: string;
+        control: {
+            type: string;
+            default: string;
+            enum: string[];
+            min?: undefined;
+            max?: undefined;
+            step?: undefined;
+            extraLabel?: undefined;
+            extraLabelHasClickAction?: undefined;
+            extraLabelClickAction?: undefined;
+        };
+        visibleIf?: undefined;
+        type?: undefined;
+    } | {
+        key: string;
+        control: {
+            type: string;
+            default: (_options: any, _slots: any, theme: any) => any;
+            min: number;
+            max: number;
+            step: number;
+            extraLabel: (options: any, _slots: any, theme: any) => "auto" | "reset" | undefined;
+            extraLabelHasClickAction: (options: any, _slots: any, theme: any) => boolean;
+            extraLabelClickAction: (options: any, _slots: any, _theme: any) => {
+                value: null;
+                options: any;
+            };
+            enum?: undefined;
+        };
+        visibleIf?: undefined;
+        type?: undefined;
+    } | {
+        key: string;
+        control: {
+            type: string;
+            default: (_options: any, _slots: any, theme: any) => any;
+            extraLabel: (options: any, _slots: any, theme: any) => "reset" | undefined;
+            extraLabelHasClickAction: (options: any, _slots: any, theme: any) => boolean;
+            extraLabelClickAction: (options: any, _slots: any, theme: any) => {
+                value: any;
+                options: any;
+            };
+            enum?: undefined;
+            min?: undefined;
+            max?: undefined;
+            step?: undefined;
+        };
+        visibleIf: (_: any, slots: any) => boolean | undefined;
+        type?: undefined;
+    })[];
+}[];
+export default _default;