@luzmo/analytics-components-kit 1.0.1-alpha.5 → 1.0.1-alpha.50

package/components/edit-option/index.js

@@ -1,6 +1,6 @@
 /*! * A kit of modern Luzmo Web Components for analytics in your web application.
  * 
- * Copyright © 2024 Luzmo
+ * Copyright © 2025 Luzmo
  * All rights reserved.
  * Luzmo web components (“Luzmo Web Components”)
  * must be used according to the Luzmo Terms of Service.
@@ -17,491 +17,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { h as B } from "../task-BPD0PyaQ.js";
-import { x as y, I as F, r as G, n as K } from "../property-CD3dwBJC.js";
-import { o as P } from "../if-defined-Ch2dtEOS.js";
-const E = () => {
+import { L as u } from "../index-BPVXrhaX.js";
+const l = () => {
   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);
+    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-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-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);
   }
 };
-E();
-const N = ":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, u, a, b, d, m, p, s, f, r, z, x, h, $;
-  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 = ((d = (b = (a = (u = o.translations) == null ? void 0 : u.options) == null ? void 0 : a[o.optionKey]) == null ? void 0 : b.extraLabel) == null ? void 0 : d[t]) ?? t);
-  let l;
-  typeof ((m = o.controlInfo) == null ? void 0 : m.extraLabelTooltip) == "function" ? t = o.controlInfo.extraLabelTooltip(
-    o.options,
-    o.slots,
-    o.theme
-  ) : typeof ((p = o.controlInfo) == null ? void 0 : p.extraLabelTooltip) == "string" && (l = o.controlInfo.extraLabelTooltip), typeof l == "string" && (t = ((z = (r = (f = (s = o.translations) == null ? void 0 : s.options) == null ? void 0 : f[o.optionKey]) == null ? void 0 : r.extraLabelTooltip) == null ? void 0 : z[l]) ?? l);
-  let n;
-  typeof ((x = o.controlInfo) == null ? void 0 : x.extraLabelHasClickAction) == "function" ? n = o.controlInfo.extraLabelHasClickAction(
-    o.options,
-    o.slots,
-    o.theme
-  ) : typeof ((h = o.controlInfo) == null ? void 0 : h.extraLabelHasClickAction) == "boolean" && (n = o.controlInfo.extraLabelHasClickAction);
-  const e = typeof (($ = o.controlInfo) == null ? void 0 : $.extraLabelClickAction) == "function" ? () => o.controlInfo.extraLabelClickAction(
-    o.options,
-    o.slots,
-    o.theme
-  ) : () => {
-  };
-  return {
-    extraLabel: t,
-    extraLabelTooltip: l,
-    extraLabelHasClickAction: n,
-    extraLabelClickAction: e
-  };
-}, I = (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];
-}, O = (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);
-}, R = (o) => {
-  var b, d, m, p, s, f, r, z;
-  const t = ((m = (d = (b = o.translations) == null ? void 0 : b.options) == null ? void 0 : d[o.optionKey]) == null ? void 0 : m.label) ?? o.optionKey ?? "", l = o.size, n = I(o.options, o.optionKey), {
-    extraLabel: e,
-    extraLabelTooltip: i,
-    extraLabelHasClickAction: c,
-    extraLabelClickAction: u
-  } = C(o), a = O(o);
-  return y`
-    <luzmo-edit-option-action-button-group
-      .label=${t}
-      .value=${n}
-      .values=${(p = o.controlInfo) == null ? void 0 : p.values}
-      .default=${(s = o.controlInfo) == null ? void 0 : s.default}
-      .selects=${(f = o.controlInfo) == null ? void 0 : f.selects}
-      .size=${l}
-      .extraLabel=${e}
-      .extraLabelTooltip=${i}
-      .extraLabelHasClickAction=${c}
-      @extraLabelClick=${u}
-      @option-changed=${a}
-      .fromOptionValue=${(r = o.controlInfo) == null ? void 0 : r.fromOptionValue}
-      .toOptionValue=${(z = o.controlInfo) == null ? void 0 : z.toOptionValue}
-    ></luzmo-edit-option-action-button-group>
-  `;
-}, U = (o) => {
-  var m, p, s, f, r, z, x;
-  const t = ((s = (p = (m = o.translations) == null ? void 0 : m.options) == null ? void 0 : p[o.optionKey]) == null ? void 0 : s.label) ?? o.optionKey ?? "", l = I(o.options, o.optionKey), n = o.size;
-  let e;
-  typeof ((f = o.controlInfo) == null ? void 0 : f.default) == "function" ? e = o.controlInfo.default(
-    o.options,
-    o.slots,
-    o.theme
-  ) : typeof ((r = o.controlInfo) == null ? void 0 : r.default) == "string" && (e = o.controlInfo.default);
-  const {
-    extraLabel: i,
-    extraLabelTooltip: c,
-    extraLabelHasClickAction: u,
-    extraLabelClickAction: a
-  } = C(o), b = O(o);
-  return y`
-    <luzmo-edit-option-color-picker
-      .value=${l ?? e}
-      .label=${t}
-      .size=${n}
-      .extraLabel=${i}
-      .extraLabelTooltip=${c}
-      .extraLabelHasClickAction=${u}
-      @extraLabelClick=${() => {
-    if (typeof a == "function") {
-      const { options: h } = a();
-      return o.changeCallback(h);
-    }
-  }}
-      @option-changed=${b}
-      .fromOptionValue=${(z = o.controlInfo) == null ? void 0 : z.fromOptionValue}
-      .toOptionValue=${(x = o.controlInfo) == null ? void 0 : x.toOptionValue}
-    ></luzmo-edit-option-color-picker>
-  `;
-}, q = (o) => {
-  var m, p, s, f, r, z;
-  const t = ((s = (p = (m = o.translations) == null ? void 0 : m.options) == null ? void 0 : p[o.optionKey]) == null ? void 0 : s.label) ?? o.optionKey ?? "", l = ((f = o.controlInfo) == null ? void 0 : f.placeholder) ?? "placeholder", n = I(o.options, o.optionKey) ?? {}, e = o.language ?? "en", i = o.size, {
-    extraLabel: c,
-    extraLabelTooltip: u,
-    extraLabelHasClickAction: a,
-    extraLabelClickAction: b
-  } = C(o), d = O(o);
-  return y`
-    <luzmo-edit-option-multi-language-field
-      .label=${t}
-      .placeholder=${l}
-      .value=${n}
-      language=${P(e)}
-      .size=${i}
-      .extraLabel=${c}
-      .extraLabelTooltip=${u}
-      .extraLabelHasClickAction=${a}
-      @extraLabelClick=${b}
-      @option-changed=${d}
-      .fromOptionValue=${(r = o.controlInfo) == null ? void 0 : r.fromOptionValue}
-      .toOptionValue=${(z = o.controlInfo) == null ? void 0 : z.toOptionValue}
-    ></luzmo-edit-option-multi-language-field>
-  `;
-}, D = (o) => {
-  var s, f, r, z, x, h, $, L, k;
-  const t = ((r = (f = (s = o.translations) == null ? void 0 : s.options) == null ? void 0 : f[o.optionKey]) == null ? void 0 : r.label) ?? o.optionKey ?? "", l = (z = o.controlInfo) == null ? void 0 : z.min, n = (x = o.controlInfo) == null ? void 0 : x.max, e = (h = o.controlInfo) == null ? void 0 : h.step, i = I(o.options, o.optionKey), c = ($ = o.controlInfo) == null ? void 0 : $.default, u = o.size, {
-    extraLabel: a,
-    extraLabelTooltip: b,
-    extraLabelHasClickAction: d,
-    extraLabelClickAction: m
-  } = C(o), p = O(o);
-  return y`
-    <luzmo-edit-option-number-field
-      .value=${i}
-      .default=${c}
-      .min=${l}
-      .max=${n}
-      .step=${e}
-      .label=${t}
-      .size=${u}
-      .extraLabel=${a}
-      .extraLabelTooltip=${b}
-      .extraLabelHasClickAction=${d}
-      @extraLabelClick=${m}
-      @option-changed=${p}
-      .fromOptionValue=${(L = o.controlInfo) == null ? void 0 : L.fromOptionValue}
-      .toOptionValue=${(k = o.controlInfo) == null ? void 0 : k.toOptionValue}
-    ></luzmo-edit-option-number-field>
-  `;
-}, J = (o) => {
-  var p, s, f, r, z, x, h, $, L, k;
-  const t = ((f = (s = (p = o.translations) == null ? void 0 : p.options) == null ? void 0 : s[o.optionKey]) == null ? void 0 : f.label) ?? o.optionKey ?? "", l = I(o.options, o.optionKey), n = (r = o.controlInfo) == null ? void 0 : r.default, e = (h = (x = (z = o.translations) == null ? void 0 : z.options) == null ? void 0 : x[o.optionKey]) == null ? void 0 : h.tooltip, i = ($ = o.controlInfo) == null ? void 0 : $.enum.reduce(
-    (V, T) => {
-      var w, H, _;
-      return V[T] = ((_ = (H = (w = o.translations) == null ? void 0 : w.options) == null ? void 0 : H[o.optionKey]) == null ? void 0 : _.enum[T]) ?? T, V;
-    },
-    {}
-  ), c = o.size, {
-    extraLabel: u,
-    extraLabelTooltip: a,
-    extraLabelHasClickAction: b,
-    extraLabelClickAction: d
-  } = C(o), m = O(o);
-  return y`
-    <luzmo-edit-option-picker
-      .value=${l}
-      .default=${n}
-      .values=${i}
-      .label=${t}
-      .tooltip=${e}
-      .size=${c}
-      .extraLabel=${u}
-      .extraLabelTooltip=${a}
-      .extraLabelHasClickAction=${b}
-      @extraLabelClick=${d}
-      @option-changed=${m}
-      .fromOptionValue=${(L = o.controlInfo) == null ? void 0 : L.fromOptionValue}
-      .toOptionValue=${(k = o.controlInfo) == null ? void 0 : k.toOptionValue}
-    ></luzmo-edit-option-picker>
-  `;
-}, Q = (o) => {
-  var b, d, m, p, s, f, r;
-  const t = ((m = (d = (b = o.translations) == null ? void 0 : b.options) == null ? void 0 : d[o.optionKey]) == null ? void 0 : m.label) ?? o.optionKey ?? "", l = I(o.options, o.optionKey), n = o.size, {
-    extraLabel: e,
-    extraLabelTooltip: i,
-    extraLabelHasClickAction: c,
-    extraLabelClickAction: u
-  } = C(o), a = O(o);
-  return y`
-    <luzmo-edit-option-positions-number-field
-      .values=${l}
-      .positions=${(p = o.controlInfo) == null ? void 0 : p.positions}
-      .positionConfiguration=${(s = o.controlInfo) == null ? void 0 : s.positionConfiguration}
-      .label=${t}
-      .size=${n}
-      .extraLabel=${e}
-      .extraLabelTooltip=${i}
-      .extraLabelHasClickAction=${c}
-      @extraLabelClick=${u}
-      @option-changed=${a}
-      .fromOptionValue=${(f = o.controlInfo) == null ? void 0 : f.fromOptionValue}
-      .toOptionValue=${(r = o.controlInfo) == null ? void 0 : r.toOptionValue}
-    ></luzmo-edit-option-positions-number-field>
-  `;
-}, W = (o) => {
-  var m, p, s, f, r, z, x;
-  const t = ((s = (p = (m = o.translations) == null ? void 0 : m.options) == null ? void 0 : p[o.optionKey]) == null ? void 0 : s.label) ?? o.optionKey ?? "", l = I(o.options, o.optionKey), n = (f = o == null ? void 0 : o.controlInfo) == null ? void 0 : f.default, e = (r = o.controlInfo) == null ? void 0 : r.enum.reduce(
-    (h, $) => {
-      var L, k, V;
-      return h[$] = ((V = (k = (L = o.translations) == null ? void 0 : L.options) == null ? void 0 : k[o.optionKey]) == null ? void 0 : V.enum[$]) ?? $, h;
-    },
-    {}
-  ), i = o.size, {
-    extraLabel: c,
-    extraLabelTooltip: u,
-    extraLabelHasClickAction: a,
-    extraLabelClickAction: b
-  } = C(o), d = O(o);
-  return y`
-    <luzmo-edit-option-radio-button-group
-      .value=${l ?? n}
-      .values=${e}
-      .label=${t}
-      .size=${i}
-      .extraLabel=${c}
-      .extraLabelTooltip=${u}
-      .extraLabelHasClickAction=${a}
-      @extraLabelClick=${b}
-      @option-changed=${d}
-      .fromOptionValue=${(z = o.controlInfo) == null ? void 0 : z.fromOptionValue}
-      .toOptionValue=${(x = o.controlInfo) == null ? void 0 : x.toOptionValue}
-    ></luzmo-edit-option-radio-button-group>
-  `;
-}, X = (o) => {
-  var r, z, x, h, $, L, k, V, T, w, H, _, j;
-  const t = ((x = (z = (r = o.translations) == null ? void 0 : r.options) == null ? void 0 : z[o.optionKey]) == null ? void 0 : x.label) ?? o.optionKey ?? "", l = (L = ($ = (h = o.translations) == null ? void 0 : h.options) == null ? void 0 : $[o.optionKey]) == null ? void 0 : L.tooltip, n = (k = o.controlInfo) == null ? void 0 : k.min, e = (V = o.controlInfo) == null ? void 0 : V.max, i = (T = o.controlInfo) == null ? void 0 : T.step, c = I(o.options, o.optionKey), u = o.size;
-  let a;
-  typeof ((w = o.controlInfo) == null ? void 0 : w.default) == "function" ? a = o.controlInfo.default(
-    o.options,
-    o.slots,
-    o.theme
-  ) : typeof ((H = o.controlInfo) == null ? void 0 : H.default) == "number" && (a = o.controlInfo.default);
-  const {
-    extraLabel: b,
-    extraLabelTooltip: d,
-    extraLabelHasClickAction: m,
-    extraLabelClickAction: p
-  } = C(o), s = O(o);
-  return y`
-    <luzmo-edit-option-slider
-      .value=${c}
-      .default=${a}
-      .min=${n}
-      .max=${e}
-      .step=${i}
-      .label=${t}
-      .tooltip=${l}
-      .size=${u}
-      .extraLabel=${b}
-      .extraLabelTooltip=${d}
-      .extraLabelHasClickAction=${m}
-      @extraLabelClick=${() => {
-    if (typeof p == "function") {
-      const { options: S } = p();
-      return o.changeCallback(S);
-    }
-  }}
-      @option-changed=${s}
-      .fromOptionValue=${(_ = o.controlInfo) == null ? void 0 : _.fromOptionValue}
-      .toOptionValue=${(j = o.controlInfo) == null ? void 0 : j.toOptionValue}
-    ></luzmo-edit-option-slider>
-  `;
-}, Y = (o) => {
-  var d, m, p, s, f, r;
-  const t = ((p = (m = (d = o.translations) == null ? void 0 : d.options) == null ? void 0 : m[o.optionKey]) == null ? void 0 : p.label) ?? o.optionKey ?? "", l = I(o.options, o.optionKey), n = (s = o.controlInfo) == null ? void 0 : s.default, e = o.size, {
-    extraLabel: i,
-    extraLabelTooltip: c,
-    extraLabelHasClickAction: u,
-    extraLabelClickAction: a
-  } = C(o), b = O(o);
-  return y`
-    <luzmo-edit-option-switch
-      .value=${l ?? n ?? !1}
-      .label=${t}
-      .size=${e}
-      .extraLabel=${i}
-      .extraLabelTooltip=${c}
-      .extraLabelHasClickAction=${u}
-      @extraLabelClick=${a}
-      @option-changed=${b}
-      .fromOptionValue=${(f = o.controlInfo) == null ? void 0 : f.fromOptionValue}
-      .toOptionValue=${(r = o.controlInfo) == null ? void 0 : r.toOptionValue}
-    ></luzmo-edit-option-switch>
-  `;
-}, Z = (o) => {
-  var d, m, p, s, f, r;
-  const t = ((p = (m = (d = o.translations) == null ? void 0 : d.options) == null ? void 0 : m[o.optionKey]) == null ? void 0 : p.label) ?? o.optionKey ?? "", l = ((s = o.controlInfo) == null ? void 0 : s.placeholder) ?? "placeholder", n = I(o.options, o.optionKey) ?? "", e = o.size, {
-    extraLabel: i,
-    extraLabelTooltip: c,
-    extraLabelHasClickAction: u,
-    extraLabelClickAction: a
-  } = C(o), b = O(o);
-  return y`
-    <luzmo-edit-option-text-field
-      .label=${t}
-      .placeholder=${l}
-      .value=${n}
-      .size=${e}
-      .extraLabel=${i}
-      .extraLabelTooltip=${c}
-      .extraLabelHasClickAction=${u}
-      @extraLabelClick=${a}
-      @option-changed=${b}
-      .fromOptionValue=${(f = o.controlInfo) == null ? void 0 : f.fromOptionValue}
-      .toOptionValue=${(r = o.controlInfo) == null ? void 0 : r.toOptionValue}
-    ></luzmo-edit-option-text-field>
-  `;
-}, g = (o) => {
-  switch (o.controlType) {
-    case "picker":
-      return J(o);
-    case "slider":
-      return X(o);
-    case "switch":
-      return Y(o);
-    case "multi-language-field":
-      return q(o);
-    case "text-field":
-      return Z(o);
-    case "number-field":
-      return D(o);
-    case "positions-number-field":
-      return Q(o);
-    case "radio-button-group":
-      return W(o);
-    case "color-picker":
-      return U(o);
-    case "action-button-group":
-      return R(o);
-  }
-}, oo = (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 to = Object.defineProperty, A = (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 && to(t, l, e), e;
-};
-const M = class M extends F {
-  constructor() {
-    super(...arguments), this._loadItemConfig = new B(this, {
-      task: async ([t, l, n]) => {
-        let e = !1;
-        if (t !== this._itemTypeLoaded) {
-          const u = /* @__PURE__ */ Object.assign({
-            "./item-configs/bar-chart.config.ts": () => import("../bar-chart.config-CQ6HAvs2.js"),
-            "./item-configs/column-chart.config.ts": () => import("../column-chart.config-C9hP0kX7.js"),
-            "./item-configs/donut-chart.config.ts": () => import("../donut-chart.config-3DhKiSSM.js"),
-            "./item-configs/imageobject.config.ts": () => import("../imageobject.config-DZLp9Elq.js"),
-            "./item-configs/line-chart.config.ts": () => import("../line-chart.config-CIVN6uLI.js"),
-            "./item-configs/textobject.config.ts": () => import("../textobject.config-C8opcGG4.js")
-          });
-          if (u[`./item-configs/${t}.config.ts`]) {
-            const a = await u[`./item-configs/${t}.config.ts`]();
-            this._optionsConfig = (a == null ? void 0 : a.default) ?? {};
-          }
-          e = !0;
-        }
-        if (n !== this._languageLoaded || e) {
-          const u = /* @__PURE__ */ Object.assign({ "./item-translations/bar-chart.en.ts": () => import("../bar-chart.en-FwT00qdU.js"), "./item-translations/bar-chart.fr.ts": () => import("../bar-chart.fr-DbxKiM0j.js"), "./item-translations/bar-chart.nl.ts": () => import("../bar-chart.nl-ahX1ARpH.js"), "./item-translations/donut-chart.en.ts": () => import("../donut-chart.en-CzjT4-XN.js"), "./item-translations/donut-chart.fr.ts": () => import("../donut-chart.fr-DftPrKbG.js"), "./item-translations/donut-chart.nl.ts": () => import("../donut-chart.nl-NMatXfhK.js") });
-          if (u[`./item-translations/${t}.${n}.ts`]) {
-            const a = await u[`./item-translations/${t}.${n}.ts`]();
-            this._translations = (a == null ? void 0 : a.default) ?? {};
-          }
-        }
-        const i = oo(l, this._optionsConfig), c = i == null ? void 0 : i.type;
-        if (c !== 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-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") });
-          u[`../edit-option-${c}/index.ts`] && await u[`../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: () => y`<p>Loading...</p>`,
-      complete: (t) => g({
-        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) => y`
-        <div>
-          Could not load control for option: '${this.optionKey}' of chart
-          '${this.itemType}': ${t}.
-        </div>
-      `
-    });
-  }
-};
-M.styles = G(N);
-let v = M;
-A([
-  K({ type: String, reflect: !0 })
-], v.prototype, "language");
-A([
-  K({ type: String, reflect: !0, attribute: "item-type" })
-], v.prototype, "itemType");
-A([
-  K({ type: String, reflect: !0, attribute: "option-key" })
-], v.prototype, "optionKey");
-A([
-  K({ type: Object })
-], v.prototype, "options");
-A([
-  K({ type: Object })
-], v.prototype, "slots");
-A([
-  K({ type: Object })
-], v.prototype, "theme");
-A([
-  K({ type: String, reflect: !0 })
-], v.prototype, "size");
-customElements.get("luzmo-edit-option") || customElements.define("luzmo-edit-option", v);
+l();
 export {
-  v as LuzmoEditOption
+  u as LuzmoEditOption
 };

package/components/edit-option-action-button-group/index.cjs

@@ -1,6 +1,6 @@
 /*! * A kit of modern Luzmo Web Components for analytics in your web application.
  * 
- * Copyright © 2024 Luzmo
+ * Copyright © 2025 Luzmo
  * All rights reserved.
  * Luzmo web components (“Luzmo Web Components”)
  * must be used according to the Luzmo Terms of Service.
@@ -17,17 +17,25 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";var d=Object.getPrototypeOf;var b=Reflect.get;var s=(c,t,u)=>b(d(c),u,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../luzmo-icons-BrtBl3E5.cjs");require("../index-CtHO6VyI.cjs");require("../index-CTPox3yS.cjs");require("../index-liTHhAef.cjs");const n=require("../property-Su1Q6aME.cjs"),m=require("../query-D5qWDopr.cjs"),g=require("../edit-option-base-DnrerC_T.cjs"),z="luzmo-action-group{--luzmo-edit-option-action-button-group-button-background-hover: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-background-down: rgba( var(--luzmo-primary-rgb), .2 );--luzmo-edit-option-action-button-group-button-background-focus: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-content-color-default: var( --luzmo-font-color-disabled );--luzmo-edit-option-action-button-group-button-content-color-hover: var( --luzmo-font-color-hover );--luzmo-edit-option-action-button-group-button-content-color-down: var( --luzmo-font-color-down );--luzmo-edit-option-action-button-group-button-content-color-focus: var( --luzmo-font-color-focus )}luzmo-action-group[compact][quiet][emphasized]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=s]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=l]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-2)}luzmo-action-group[compact][quiet][emphasized][size=xl]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-3)}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-hover );--luzmo-action-button-background-color-down: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-focus: var( --luzmo-edit-option-action-button-group-button-background-focus );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-default );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-hover );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-focus: var( --luzmo-edit-option-action-button-group-button-content-color-focus )}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]:hover,luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-default: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down )}";var v=Object.defineProperty,i=(c,t,u,f)=>{for(var r=void 0,l=c.length-1,p;l>=0;l--)(p=c[l])&&(r=p(t,u,r)||r);return r&&v(t,u,r),r};const h={alignBottom:o.U,alignMiddle:o.P,alignTop:o.E,alignLeft:o.G,alignCenter:o.q,alignRight:o.O,ban:o.a1,borderSolid:o.b2,borderDashed:o.k2,borderDotted:o.S2,compress:o.Y,expand:o._,arrowsExpand:o.c1,arrowsHorizontal:o.J,arrowsVertical:o.j,italic:o.w1,bold:o.D1,underline:o.x1,rows:o.E1,columns:o.P1,table:o.r1},a=class a extends g.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}_handleEvent(){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.actionGroup.selected}}))}_generateButtonContents(t){return typeof t=="string"?n.x`${t}`:t.iconName||t.icon?n.x`
+"use strict";var m=Object.getPrototypeOf;var b=Reflect.get;var d=(c,t,e)=>b(m(c),e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../luzmo-icons-DonyjSXg.cjs");require("../index-Dy_5M3M5.cjs");require("../index-CnP-Q5Bw.cjs");require("../index-DSQyBS9Z.cjs");const n=require("../property-Cu4Q1hS4.cjs"),z=require("../query-D5qWDopr.cjs"),g=require("../edit-option-base-a2yoNqdf.cjs"),v="luzmo-action-group{--luzmo-edit-option-action-button-group-button-background-hover: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-background-down: rgba( var(--luzmo-primary-rgb), .2 );--luzmo-edit-option-action-button-group-button-background-focus: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-content-color-default: var( --luzmo-font-color-disabled );--luzmo-edit-option-action-button-group-button-content-color-hover: var( --luzmo-font-color-hover );--luzmo-edit-option-action-button-group-button-content-color-down: var( --luzmo-font-color-down );--luzmo-edit-option-action-button-group-button-content-color-focus: var( --luzmo-font-color-focus )}luzmo-action-group[compact][quiet][emphasized]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=s]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=l]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-2)}luzmo-action-group[compact][quiet][emphasized][size=xl]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-3)}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-hover );--luzmo-action-button-background-color-down: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-focus: var( --luzmo-edit-option-action-button-group-button-background-focus );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-default );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-hover );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-focus: var( --luzmo-edit-option-action-button-group-button-content-color-focus )}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]:hover,luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-default: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down )}";var h=Object.defineProperty,i=(c,t,e,l)=>{for(var r=void 0,s=c.length-1,p;s>=0;s--)(p=c[s])&&(r=p(t,e,r)||r);return r&&h(t,e,r),r};const f={alignBottom:o.U,alignMiddle:o.E,alignTop:o.P,alignLeft:o.G,alignCenter:o.N,alignRight:o.q,ban:o.a1,borderSolid:o.b2,borderDashed:o.S2,borderDotted:o.k2,compress:o.Y,expand:o._,arrowsExpand:o.c1,arrowsHorizontal:o.J,arrowsVertical:o.j,italic:o.w1,bold:o.f1,underline:o.x1,rows:o.P1,columns:o.E1,table:o.V1},a=class a extends g.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}_handleEvent(){var e,l,r;const t=this.selects==="multiple"?(e=this.actionGroup)==null?void 0:e.selected:(r=(l=this.actionGroup)==null?void 0:l.selected)==null?void 0:r[0];this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:t}}))}_generateButtonContents(t){return typeof t=="string"?n.x`${t}`:t.iconName||t.icon?n.x`
         <luzmo-icon
           slot="icon"
-          .icon=${t.icon??h[t.iconName]}
+          .size=${this.size}
+          .icon=${t.icon??f[t.iconName]}
           .label=${t.label??""}
         ></luzmo-icon>
         ${t.buttonText??""}
-      `:n.x`${t.buttonText??""}`}_generateActionButtons(){return Object.entries(this.values).map(([t,u])=>n.x`
-        <luzmo-action-button value=${t} ?disabled=${this.disabled}
-          >${this._generateButtonContents(u)}</luzmo-action-button
-        >
+      `:n.x`${t.buttonText??""}`}_generateActionButtons(){return Object.entries(this.values).map(([t,e])=>n.x`
+        <luzmo-action-button value=${t} ?disabled=${this.disabled}>
+          ${this._generateButtonContents(e)}
+          ${e.label?n.x`<luzmo-tooltip
+                self-managed
+                placement="top"
+                size=${this.size}
+              >
+                ${e.label}
+              </luzmo-tooltip>`:""}
+        </luzmo-action-button>
       `)}renderController(){const t=this._generateActionButtons();return n.x`
       <luzmo-action-group
         compact
@@ -41,4 +49,4 @@
       >
         ${t}
       </luzmo-action-group>
-    `}};a.styles=[...s(a,a,"styles"),n.r(z)];let e=a;i([n.n({type:Array})],e.prototype,"values");i([n.n({type:Boolean,reflect:!0})],e.prototype,"disabled");i([n.n({type:String})],e.prototype,"selects");i([n.n({type:Array})],e.prototype,"value");i([n.n({type:Array})],e.prototype,"default");i([m.e("luzmo-action-group")],e.prototype,"actionGroup");customElements.get("luzmo-edit-option-action-button-group")||customElements.define("luzmo-edit-option-action-button-group",e);exports.LuzmoEditOptionActionButtonGroup=e;
+    `}};a.styles=[...d(a,a,"styles"),n.r(v)];let u=a;i([n.n({type:Array})],u.prototype,"values");i([n.n({type:Boolean,reflect:!0})],u.prototype,"disabled");i([n.n({type:String})],u.prototype,"selects");i([n.n({type:Array})],u.prototype,"value");i([n.n({type:Array})],u.prototype,"default");i([z.e("luzmo-action-group")],u.prototype,"actionGroup");customElements.get("luzmo-edit-option-action-button-group")||customElements.define("luzmo-edit-option-action-button-group",u);exports.LuzmoEditOptionActionButtonGroup=u;