@luzmo/analytics-components-kit 1.0.8-beta.1 → 1.0.8-beta.2

package/components/{item-option-n8o2amMX.js → item-option-Dc4GNRMW.js}

@@ -19,16 +19,17 @@
  * */
 import { i as e } from "./base-DPqRkMth.js";
 import { t } from "./decorate-DyMgX_Uh.js";
-import { t as n } from "./data-broker-Bdv5V8Yp.js";
+import { t as n } from "./data-broker-B0uUO5er.js";
 import { n as r, t as i } from "./themes-CQZd578_.js";
-import { n as a, r as o } from "./types-DNRGKFSD.js";
-import { html as s, unsafeCSS as c } from "lit";
-import { property as l } from "lit/decorators.js";
-import { msg as u } from "@lit/localize";
-import { ifDefined as d } from "lit/directives/if-defined.js";
-import { Task as f } from "@lit/task";
+import { t as a } from "./set-nested-value-V1TdquO3.js";
+import { n as o, r as s } from "./types-DNRGKFSD.js";
+import { html as c, unsafeCSS as l } from "lit";
+import { property as u } from "lit/decorators.js";
+import { msg as d } from "@lit/localize";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { Task as p } from "@lit/task";
 //#region node_modules/@luzmo/dashboard-contents-types/shared/utils/options-registry.generated.js
-var p = {
+var m = {
 	"area-chart": () => import("./area-chart-options.config-Dc4P64YS.js").then((e) => e.n),
 	"bar-chart": () => import("./bar-chart-options.config-B7tknpxM.js").then((e) => e.t),
 	"box-plot": () => import("./box-plot-options.config-D6Wvmx36.js").then((e) => e.t),
@@ -75,7 +76,7 @@ var p = {
 	"venn-diagram": () => import("./venn-diagram-options.config-Wi0dQsAu.js").then((e) => e.n),
 	video: () => import("./video-options.config-B6pQUPB7.js").then((e) => e.n),
 	"wordcloud-chart": () => import("./wordcloud-chart-options.config-D_AhgZRs.js").then((e) => e.n)
-}, m = {
+}, h = {
 	"area-chart:de": () => import("./area-chart-options.de-DY-fWkTJ.js"),
 	"area-chart:en": () => import("./area-chart-options.en-BwX3W0Rz.js"),
 	"area-chart:es": () => import("./area-chart-options.es-DcNoi7rP.js"),
@@ -296,25 +297,25 @@ var p = {
 	"wordcloud-chart:es": () => import("./wordcloud-chart-options.es-DPccPG_x.js"),
 	"wordcloud-chart:fr": () => import("./wordcloud-chart-options.fr-D6DKbL9I.js"),
 	"wordcloud-chart:nl": () => import("./wordcloud-chart-options.nl-CBKMvA4E.js")
-}, h = async (e) => {
+}, g = async (e) => {
 	try {
-		let t = p[e];
+		let t = m[e];
 		return t ? (await t())?.default ?? null : null;
 	} catch {
 		return null;
 	}
-}, g = async (e, t) => {
+}, _ = async (e, t) => {
 	try {
-		let n = m[`${e}:${t}`];
+		let n = h[`${e}:${t}`];
 		return n ? (await n())?.default ?? null : null;
 	} catch {
 		return null;
 	}
-}, _ = (e) => e ? h(e) : Promise.resolve(null), v = async (e, t, n = !1) => {
+}, v = (e) => e ? g(e) : Promise.resolve(null), y = async (e, t, n = !1) => {
 	if (!e || !t) return null;
-	let r = await g(e, t);
-	return !r && n && t !== "en" && (r = await g(e, "en")), r ?? null;
-}, y = (e, t, n) => {
+	let r = await _(e, t);
+	return !r && n && t !== "en" && (r = await _(e, "en")), r ?? null;
+}, b = (e, t, n) => {
 	let r = (t) => {
 		for (let i of t ?? []) {
 			if (i.key === e) return n ? i : i.control;
@@ -330,14 +331,14 @@ var p = {
 		if (t) return t;
 	}
 	return null;
-}, b = ":host{font-family:var(--luzmo-item-option-font-family,var(--luzmo-font-family));font-size:var(--luzmo-item-option-font-size,var(--luzmo-font-size));display:block;overflow:visible}:host([size=s]){font-size:var(--luzmo-item-option-font-size-s,var(--luzmo-font-size-s))}:host([size=l]){font-size:var(--luzmo-item-option-font-size-l,var(--luzmo-font-size-l))}:host([size=xl]){font-size:var(--luzmo-item-option-font-size-xl,var(--luzmo-font-size-xl))}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}", x = (e) => {
+}, x = ":host{font-family:var(--luzmo-item-option-font-family,var(--luzmo-font-family));font-size:var(--luzmo-item-option-font-size,var(--luzmo-font-size));display:block;overflow:visible}:host([size=s]){font-size:var(--luzmo-item-option-font-size-s,var(--luzmo-font-size-s))}:host([size=l]){font-size:var(--luzmo-item-option-font-size-l,var(--luzmo-font-size-l))}:host([size=xl]){font-size:var(--luzmo-item-option-font-size-xl,var(--luzmo-font-size-xl))}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}", S = (e) => {
 	let t;
 	return typeof e?.controlInfo?.default == "function" ? t = e.controlInfo.default({
 		options: e.options,
 		slots: e.slots,
 		theme: e.theme
 	}) : e.controlInfo?.default !== void 0 && e.controlInfo?.default !== null && (t = e.controlInfo.default), t;
-}, S = (e) => {
+}, C = (e) => {
 	let t;
 	if (typeof e.controlInfo?.extraLabel == "function" ? t = e.controlInfo.extraLabel({
 		options: e.options,
@@ -373,7 +374,7 @@ var p = {
 		extraLabelHasClickAction: r,
 		extraLabelClickAction: i
 	};
-}, C = (e, t) => {
+}, w = (e, t) => {
 	let n = e?.options ?? {};
 	if (typeof e?.controlInfo?.calculateValue == "function") return e.controlInfo.calculateValue({ options: n });
 	if (t.includes(".")) {
@@ -383,20 +384,13 @@ var p = {
 		return r[e[i]];
 	}
 	return n[t];
-}, w = (e) => (t) => {
+}, T = (e) => (t) => {
 	let n = { ...e.options };
-	if (typeof e?.controlInfo?.toOptions == "function") n = e.controlInfo.toOptions({
+	return typeof e?.controlInfo?.toOptions == "function" ? n = e.controlInfo.toOptions({
 		options: n,
 		value: t?.detail?.value
-	});
-	else if (e.optionKey.includes(".")) {
-		let r = e.optionKey.split("."), i = n;
-		for (let e = 0; e < r.length - 1; e++) i[r[e]] = i[r[e]] ?? {}, i = i[r[e]];
-		let a = r.length - 1;
-		i[r[a]] = t.detail.value;
-	} else n[e.optionKey] = t.detail.value;
-	return e.changeCallback(n);
-}, T = (e) => {
+	}) : e.optionKey.includes(".") ? n = a(n, e.optionKey, t.detail.value) : n[e.optionKey] = t.detail.value, e.changeCallback(n);
+}, E = (e) => {
 	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = e.size, r = {};
 	Object.keys(e.controlInfo?.values).forEach((t) => {
 		r[t] = {
@@ -404,8 +398,8 @@ var p = {
 			label: e.translations?.options?.[e.optionKey]?.enum?.[t] ?? e.controlInfo?.values[t].label
 		};
 	});
-	let i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = C(e, e.optionKey), o = x(e), { extraLabel: c, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = S(e), f = w(e);
-	return s`
+	let i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = w(e, e.optionKey), o = S(e), { extraLabel: s, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = C(e), f = T(e);
+	return c`
     <luzmo-item-option-action-button-group
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
@@ -415,7 +409,7 @@ var p = {
       .selects=${e.controlInfo?.selects}
       .size=${n}
       .tooltip=${i}
-      .extraLabel=${c}
+      .extraLabel=${s}
       .extraLabelTooltip=${l}
       .extraLabelHasClickAction=${u}
       @luzmo-extra-label-click=${d}
@@ -424,16 +418,16 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-action-button-group>
   `;
-}, E = (e) => {
+}, D = (e) => {
 	let t;
 	return typeof e?.controlInfo?.enum == "function" ? t = e.controlInfo.enum({
 		options: e.options,
 		slots: e.slots,
 		theme: e.theme
 	}) : e.controlInfo?.enum !== void 0 && e.controlInfo?.enum !== null && (t = e.controlInfo.enum), t;
-}, D = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = C(e, e.optionKey), r = E(e), i = e.size, a = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = x(e), { extraLabel: c, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = S(e), f = w(e);
-	return s`
+}, O = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = w(e, e.optionKey), r = D(e), i = e.size, a = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = S(e), { extraLabel: s, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = C(e), f = T(e);
+	return c`
     <luzmo-item-option-color-palette-picker
       .value=${n ?? o}
       .values=${r}
@@ -441,7 +435,7 @@ var p = {
       ?hide-label=${e.controlInfo?.hideLabel}
       .size=${i}
       .tooltip=${a}
-      .extraLabel=${c}
+      .extraLabel=${s}
       .extraLabelTooltip=${l}
       .extraLabelHasClickAction=${u}
       @luzmo-extra-label-click=${() => {
@@ -455,9 +449,9 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-color-palette-picker>
   `;
-}, O = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = C(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = x(e), { extraLabel: o, extraLabelTooltip: c, extraLabelHasClickAction: l, extraLabelClickAction: u } = S(e), d = w(e);
-	return s`
+}, k = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = w(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = S(e), { extraLabel: o, extraLabelTooltip: s, extraLabelHasClickAction: l, extraLabelClickAction: u } = C(e), d = T(e);
+	return c`
     <luzmo-item-option-color-picker
       .value=${n ?? a}
       .label=${t}
@@ -465,7 +459,7 @@ var p = {
       .size=${r}
       .tooltip=${i}
       .extraLabel=${o}
-      .extraLabelTooltip=${c}
+      .extraLabelTooltip=${s}
       .extraLabelHasClickAction=${l}
       @luzmo-extra-label-click=${() => {
 		if (typeof u == "function") {
@@ -478,9 +472,9 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-color-picker>
   `;
-}, k = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = C(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = x(e), o = typeof e?.controlInfo?.percentage == "function" ? e.controlInfo.percentage(e) : e.controlInfo.percentage, c = typeof e?.controlInfo?.reverse == "function" ? e.controlInfo.reverse(e) : e.controlInfo.reverse, l = typeof e?.controlInfo?.noAlphaChannel == "function" ? e.controlInfo.noAlphaChannel(e) : e.controlInfo.noAlphaChannel, u = typeof e?.controlInfo?.editRangeSize == "function" ? e.controlInfo.editRangeSize(e) : e.controlInfo.editRangeSize, d = typeof e?.controlInfo?.minimumRangeSize == "function" ? e.controlInfo.minimumRangeSize(e) : e.controlInfo.minimumRangeSize, f = typeof e?.controlInfo?.negativeInfinityValue == "function" ? e.controlInfo.negativeInfinityValue(e) : e.controlInfo.negativeInfinityValue, p = typeof e?.controlInfo?.noValues == "function" ? e.controlInfo.noValues(e) : e.controlInfo.noValues, m = typeof e?.controlInfo?.readOnlyColorPicker == "function" ? e.controlInfo.readOnlyColorPicker(e) : e.controlInfo.readOnlyColorPicker, { extraLabel: h, extraLabelTooltip: g, extraLabelHasClickAction: _, extraLabelClickAction: v } = S(e), y = w(e);
-	return s`
+}, A = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = w(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = S(e), o = typeof e?.controlInfo?.percentage == "function" ? e.controlInfo.percentage(e) : e.controlInfo.percentage, s = typeof e?.controlInfo?.reverse == "function" ? e.controlInfo.reverse(e) : e.controlInfo.reverse, l = typeof e?.controlInfo?.noAlphaChannel == "function" ? e.controlInfo.noAlphaChannel(e) : e.controlInfo.noAlphaChannel, u = typeof e?.controlInfo?.editRangeSize == "function" ? e.controlInfo.editRangeSize(e) : e.controlInfo.editRangeSize, d = typeof e?.controlInfo?.minimumRangeSize == "function" ? e.controlInfo.minimumRangeSize(e) : e.controlInfo.minimumRangeSize, f = typeof e?.controlInfo?.negativeInfinityValue == "function" ? e.controlInfo.negativeInfinityValue(e) : e.controlInfo.negativeInfinityValue, p = typeof e?.controlInfo?.noValues == "function" ? e.controlInfo.noValues(e) : e.controlInfo.noValues, m = typeof e?.controlInfo?.readOnlyColorPicker == "function" ? e.controlInfo.readOnlyColorPicker(e) : e.controlInfo.readOnlyColorPicker, { extraLabel: h, extraLabelTooltip: g, extraLabelHasClickAction: _, extraLabelClickAction: v } = C(e), y = T(e);
+	return c`
     <luzmo-item-option-color-range
       .value=${n ?? a}
       .label=${t}
@@ -491,7 +485,7 @@ var p = {
       .extraLabelTooltip=${g}
       .extraLabelHasClickAction=${_}
       .debounce=${e.controlInfo?.debounce}
-      ?reverse=${c}
+      ?reverse=${s}
       ?percentage=${o}
       ?no-alpha-channel=${l}
       ?edit-range-size=${u}
@@ -510,14 +504,14 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-color-range>
   `;
-}, A = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey, n = C(e, e.optionKey), r = x(e), i = E(e), c = Array.isArray(i) ? i : [], l = e.translations?.options?.[e.optionKey]?.enum ?? {}, u = e.theme?.editDarkOrLight === "dark-edit" ? a : o, { extraLabel: d, extraLabelTooltip: f, extraLabelHasClickAction: p, extraLabelClickAction: m } = S(e), h = w(e);
-	return s`
+}, j = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey, n = w(e, e.optionKey), r = S(e), i = D(e), a = Array.isArray(i) ? i : [], l = e.translations?.options?.[e.optionKey]?.enum ?? {}, u = e.theme?.editDarkOrLight === "dark-edit" ? o : s, { extraLabel: d, extraLabelTooltip: f, extraLabelHasClickAction: p, extraLabelClickAction: m } = C(e), h = T(e);
+	return c`
     <luzmo-item-option-guidelines
       hide-label
       .label=${t}
       .value=${n ?? r}
-      .lineTypes=${c}
+      .lineTypes=${a}
       .lineTypeLabels=${l}
       .defaultColor=${u}
       .size=${e.size}
@@ -533,32 +527,32 @@ var p = {
       @luzmo-option-changed=${h}
     ></luzmo-item-option-guidelines>
   `;
-}, j = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = C(e, e.optionKey) ?? {}, r = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, i = e.language ?? "en", a = { [i]: e.translations?.options?.[e.optionKey]?.placeholder ?? e.controlInfo?.placeholder ?? "" }, o = e.size, c = x(e), { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: f, extraLabelClickAction: p } = S(e), m = w(e);
-	return s`
+}, M = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = w(e, e.optionKey) ?? {}, r = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, i = e.language ?? "en", a = { [i]: e.translations?.options?.[e.optionKey]?.placeholder ?? e.controlInfo?.placeholder ?? "" }, o = e.size, s = S(e), { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: p } = C(e), m = T(e);
+	return c`
     <luzmo-item-option-multi-language-field
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .placeholder=${a}
-      .value=${n ?? c}
-      language=${d(i)}
+      .value=${n ?? s}
+      language=${f(i)}
       .size=${o}
       .tooltip=${r}
       .extraLabel=${l}
       .extraLabelTooltip=${u}
-      .extraLabelHasClickAction=${f}
+      .extraLabelHasClickAction=${d}
       @luzmo-extra-label-click=${p}
       @luzmo-option-changed=${m}
       .parseValue=${e.controlInfo?.parseValue}
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-multi-language-field>
   `;
-}, M = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = e.controlInfo?.min, r = e.controlInfo?.max, i = e.controlInfo?.step, a = C(e, e.optionKey), o = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, c = x(e), l = e.size, { extraLabel: u, extraLabelTooltip: d, extraLabelHasClickAction: f, extraLabelClickAction: p } = S(e), m = w(e);
-	return s`
+}, N = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = e.controlInfo?.min, r = e.controlInfo?.max, i = e.controlInfo?.step, a = w(e, e.optionKey), o = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, s = S(e), l = e.size, { extraLabel: u, extraLabelTooltip: d, extraLabelHasClickAction: f, extraLabelClickAction: p } = C(e), m = T(e);
+	return c`
     <luzmo-item-option-number-field
       .value=${a}
-      .default=${c}
+      .default=${s}
       .min=${n}
       .max=${r}
       .step=${i}
@@ -578,7 +572,7 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-number-field>
   `;
-}, N = (e, t) => {
+}, P = (e, t) => {
 	let n = {};
 	if (Array.isArray(e)) {
 		for (let r of e) typeof r == "string" && (n[r] = t?.[r] ?? r);
@@ -589,12 +583,12 @@ var p = {
 		n[r] = e ?? a ?? r;
 	}
 	return n;
-}, P = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = C(e, e.optionKey), r = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, i = e.translations?.options?.[e.optionKey]?.enum, a = N(e.controlInfo?.enum, i), o = e.size, c = x(e), { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = S(e), p = w(e);
-	return s`
+}, F = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = w(e, e.optionKey), r = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, i = e.translations?.options?.[e.optionKey]?.enum, a = P(e.controlInfo?.enum, i), o = e.size, s = S(e), { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = C(e), p = T(e);
+	return c`
     <luzmo-item-option-picker
       .value=${n}
-      .default=${c}
+      .default=${s}
       .values=${a}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
@@ -609,9 +603,9 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-picker>
   `;
-}, F = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label, n = e.controlInfo?.positions, r = e.size, i = C(e, e.optionKey), a = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = x(e) ?? "topRight", { extraLabel: c, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = S(e), f = w(e);
-	return s`
+}, I = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label, n = e.controlInfo?.enum ?? e.controlInfo?.positions, r = e.size, i = w(e, e.optionKey), a = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = S(e) ?? "topRight", { extraLabel: s, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = C(e), f = T(e);
+	return c`
     <luzmo-item-option-position-picker
       .value=${i}
       .positions=${n}
@@ -620,7 +614,7 @@ var p = {
       ?hide-label=${e.controlInfo?.hideLabel}
       .tooltip=${a}
       .size=${r}
-      .extraLabel=${c}
+      .extraLabel=${s}
       .extraLabelTooltip=${l}
       .extraLabelHasClickAction=${u}
       @luzmo-extra-label-click=${d}
@@ -628,9 +622,9 @@ var p = {
       .readonly=${e.controlInfo?.readonly}
     ></luzmo-item-option-position-picker>
   `;
-}, I = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label, n = C(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = x(e), { extraLabel: o, extraLabelTooltip: c, extraLabelHasClickAction: l, extraLabelClickAction: u } = S(e), d = w(e);
-	return s`
+}, L = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label, n = w(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = S(e), { extraLabel: o, extraLabelTooltip: s, extraLabelHasClickAction: l, extraLabelClickAction: u } = C(e), d = T(e);
+	return c`
     <luzmo-item-option-positions-number-field
       .values=${n ?? a}
       .positions=${e.controlInfo?.positions}
@@ -640,7 +634,7 @@ var p = {
       .size=${r}
       .tooltip=${i}
       .extraLabel=${o}
-      .extraLabelTooltip=${c}
+      .extraLabelTooltip=${s}
       .extraLabelHasClickAction=${l}
       @luzmo-extra-label-click=${u}
       @luzmo-option-changed=${d}
@@ -648,16 +642,16 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-positions-number-field>
   `;
-}, L = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = C(e, e.optionKey), r = x(e), i = e.translations?.options?.[e.optionKey]?.enum, a = N(e.controlInfo?.enum, i), o = e.size, c = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = S(e), p = w(e);
-	return s`
+}, R = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = w(e, e.optionKey), r = S(e), i = e.translations?.options?.[e.optionKey]?.enum, a = P(e.controlInfo?.enum, i), o = e.size, s = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = C(e), p = T(e);
+	return c`
     <luzmo-item-option-radio-button-group
       .value=${n ?? r}
       .values=${a}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .size=${o}
-      .tooltip=${c}
+      .tooltip=${s}
       .extraLabel=${l}
       .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${d}
@@ -667,9 +661,9 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-radio-button-group>
   `;
-}, R = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, r = e.controlInfo?.min, i = e.controlInfo?.max, a = e.controlInfo?.step, o = C(e, e.optionKey), c = e.size, l = x(e), { extraLabel: u, extraLabelTooltip: d, extraLabelHasClickAction: f, extraLabelClickAction: p } = S(e), m = w(e);
-	return s`
+}, z = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, r = e.controlInfo?.min, i = e.controlInfo?.max, a = e.controlInfo?.step, o = w(e, e.optionKey), s = e.size, l = S(e), { extraLabel: u, extraLabelTooltip: d, extraLabelHasClickAction: f, extraLabelClickAction: p } = C(e), m = T(e);
+	return c`
     <luzmo-item-option-slider
       .value=${o}
       .default=${l}
@@ -679,7 +673,7 @@ var p = {
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .tooltip=${n}
-      .size=${c}
+      .size=${s}
       .extraLabel=${u}
       .extraLabelTooltip=${d}
       .extraLabelHasClickAction=${f}
@@ -694,9 +688,9 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-slider>
   `;
-}, z = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = C(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = x(e), { extraLabel: o, extraLabelTooltip: c, extraLabelHasClickAction: l, extraLabelClickAction: u } = S(e), d = w(e);
-	return s`
+}, B = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = w(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = S(e), { extraLabel: o, extraLabelTooltip: s, extraLabelHasClickAction: l, extraLabelClickAction: u } = C(e), d = T(e);
+	return c`
     <luzmo-item-option-switch
       .value=${n ?? a ?? !1}
       .label=${t}
@@ -704,7 +698,7 @@ var p = {
       .size=${r}
       .tooltip=${i}
       .extraLabel=${o}
-      .extraLabelTooltip=${c}
+      .extraLabelTooltip=${s}
       .extraLabelHasClickAction=${l}
       @luzmo-extra-label-click=${u}
       @luzmo-option-changed=${d}
@@ -712,14 +706,14 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-switch>
   `;
-}, B = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = e.language ?? "en", r = { [n]: e.translations?.options?.[e.optionKey]?.placeholder ?? e.controlInfo?.placeholder ?? "" }, i = C(e, e.optionKey) ?? "", a = e.size, o = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, c = x(e), { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = S(e), p = w(e);
-	return s`
+}, V = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = e.language ?? "en", r = { [n]: e.translations?.options?.[e.optionKey]?.placeholder ?? e.controlInfo?.placeholder ?? "" }, i = w(e, e.optionKey) ?? "", a = e.size, o = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, s = S(e), { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = C(e), p = T(e);
+	return c`
     <luzmo-item-option-text-field
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .placeholder=${r[n]}
-      .value=${i ?? c}
+      .value=${i ?? s}
       .size=${a}
       .tooltip=${o}
       .extraLabel=${l}
@@ -731,26 +725,26 @@ var p = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-text-field>
   `;
-}, V = (e) => {
+}, H = (e) => {
 	switch (e.controlType) {
-		case "picker": return P(e);
-		case "slider": return R(e);
-		case "switch": return z(e);
-		case "multi-language-field": return j(e);
-		case "text-field": return B(e);
-		case "number-field": return M(e);
-		case "color-range": return k(e);
-		case "guidelines": return A(e);
-		case "color-palette-picker": return D(e);
-		case "position-picker": return F(e);
-		case "positions-number-field": return I(e);
-		case "radio-button-group": return L(e);
-		case "color-picker": return O(e);
-		case "action-button-group": return T(e);
+		case "picker": return F(e);
+		case "slider": return z(e);
+		case "switch": return B(e);
+		case "multi-language-field": return M(e);
+		case "text-field": return V(e);
+		case "number-field": return N(e);
+		case "color-range": return A(e);
+		case "guidelines": return j(e);
+		case "color-palette-picker": return O(e);
+		case "position-picker": return I(e);
+		case "positions-number-field": return L(e);
+		case "radio-button-group": return R(e);
+		case "color-picker": return k(e);
+		case "action-button-group": return E(e);
 	}
-}, H = class extends e {
+}, U = class extends e {
 	constructor(...e) {
-		super(...e), this._loadItemConfig = new f(this, {
+		super(...e), this._loadItemConfig = new p(this, {
 			task: async ([e, t, a, o, s, c, l, u, d]) => {
 				if (l || u || d) {
 					let e = {};
@@ -776,14 +770,14 @@ var p = {
 					this._effectiveTranslations = n ? { options: { [t ?? ""]: n } } : {};
 				} else if (e) {
 					let n = e !== this._itemTypeLoaded, r = e !== this._itemTypeLoaded || a !== this._languageLoaded;
-					if (n && (this._optionsConfig = await _(e) ?? [], this._itemTypeLoaded = e), r) {
+					if (n && (this._optionsConfig = await v(e) ?? [], this._itemTypeLoaded = e), r) {
 						let t = a ?? "en";
-						this._translations = await v(e, t, !0) ?? {}, this._languageLoaded = a;
+						this._translations = await y(e, t, !0) ?? {}, this._languageLoaded = a;
 					}
 					let i = this._translations.options?.[t ?? ""], o = p ?? f?.[t ?? ""], s = this._mergeOptionTranslations(i, o);
 					this._effectiveTranslations = s ? { options: { [t ?? ""]: s } } : {};
 				} else this._optionsConfig = [], this._translations = {}, this._effectiveTranslations = {};
-				let m = y(t ?? "", this._optionsConfig), h = m?.type;
+				let m = b(t ?? "", this._optionsConfig), h = m?.type;
 				if (h !== this._controlTypeLoaded) {
 					let e = /* #__PURE__ */ Object.assign({
 						"../item-option-action-button-group/index.ts": () => import("./item-option-action-button-group/index.js"),
@@ -831,14 +825,14 @@ var p = {
 		};
 	}
 	static {
-		this.styles = c(b);
+		this.styles = l(x);
 	}
 	render() {
 		return this._loadItemConfig.render({
-			pending: () => s`
+			pending: () => c`
           <p role="status">Loading...</p>
         `,
-			complete: (e) => V({
+			complete: (e) => H({
 				controlType: e?.type,
 				optionKey: this.customOptionConfiguration?.key ?? this.optionKey ?? "",
 				controlInfo: e,
@@ -850,8 +844,8 @@ var p = {
 				size: this.size,
 				changeCallback: this.changedOptions
 			}),
-			error: (e) => (console.error(e), s`
-          <span class="sr-only" role="alert">${u("Failed to load option", { desc: "Error message when item option fails to load" })}</span>
+			error: (e) => (console.error(e), c`
+          <span class="sr-only" role="alert">${d("Failed to load option", { desc: "Error message when item option fails to load" })}</span>
         `)
 		});
 	}
@@ -908,38 +902,38 @@ var p = {
 };
 //#endregion
 //#region src/components/item-option/index.ts
-t([l({
+t([u({
 	type: String,
 	reflect: !0
-})], H.prototype, "language", void 0), t([l({
+})], U.prototype, "language", void 0), t([u({
 	type: String,
 	reflect: !0,
 	attribute: "item-type"
-})], H.prototype, "itemType", void 0), t([l({
+})], U.prototype, "itemType", void 0), t([u({
 	type: String,
 	reflect: !0,
 	attribute: "option-key"
-})], H.prototype, "optionKey", void 0), t([l({
+})], U.prototype, "optionKey", void 0), t([u({
 	type: Object,
 	reflect: !1
-})], H.prototype, "customOptionConfiguration", void 0), t([l({
+})], U.prototype, "customOptionConfiguration", void 0), t([u({
 	type: Object,
 	reflect: !1
-})], H.prototype, "customTranslations", void 0), t([l({ type: Object })], H.prototype, "options", void 0), t([l({ type: Object })], H.prototype, "slots", void 0), t([l({ type: Object })], H.prototype, "theme", void 0), t([l({
+})], U.prototype, "customTranslations", void 0), t([u({ type: Object })], U.prototype, "options", void 0), t([u({ type: Object })], U.prototype, "slots", void 0), t([u({ type: Object })], U.prototype, "theme", void 0), t([u({
 	type: String,
 	attribute: "api-url",
 	reflect: !0
-})], H.prototype, "apiUrl", void 0), t([l({
+})], U.prototype, "apiUrl", void 0), t([u({
 	type: String,
 	attribute: "auth-key",
 	reflect: !0
-})], H.prototype, "authKey", void 0), t([l({
+})], U.prototype, "authKey", void 0), t([u({
 	type: String,
 	attribute: "auth-token",
 	reflect: !0
-})], H.prototype, "authToken", void 0), t([l({
+})], U.prototype, "authToken", void 0), t([u({
 	type: String,
 	reflect: !0
-})], H.prototype, "size", void 0), customElements.get("luzmo-item-option") || customElements.define("luzmo-item-option", H);
+})], U.prototype, "size", void 0), customElements.get("luzmo-item-option") || customElements.define("luzmo-item-option", U);
 //#endregion
-export { v as i, y as n, _ as r, H as t };
+export { y as i, b as n, v as r, U as t };