@luzmo/analytics-components-kit 1.1.1 → 1.2.1

package/components/{item-option-Cgx3c08E.js → item-option-DKLRnicU.js}

@@ -21,22 +21,23 @@ import "./tokens-6HmQYnEP.js";
 import { i as e } from "./base-rAte-QzM.js";
 import { t } from "./decorate-B2TzfnLZ.js";
 import { n } from "./data-broker-C1Iz71TN.js";
-import { n as r, t as i } from "./themes-BO_1ebSB.js";
-import { t as a } from "./set-nested-value-DmCMg2V3.js";
-import { n as o, r as s } from "./types-DJuS9IwG.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";
+import { n as r } from "./is-same-option-value-B2oyvEqT.js";
+import { n as i, t as a } from "./themes-BO_1ebSB.js";
+import { t as o } from "./set-nested-value-DmCMg2V3.js";
+import { n as s, r as c } from "./types-DJuS9IwG.js";
+import { html as l, unsafeCSS as u } from "lit";
+import { property as d } from "lit/decorators.js";
+import { msg as f } from "@lit/localize";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { Task as m } from "@lit/task";
 // node_modules/@luzmo/dashboard-contents-types/shared/utils/options-registry.generated.js
-var m = {
+var h = {
 	"area-chart": () => import("./area-chart-options.config-Dnw8v2CA.js").then((e) => e.t),
 	"bar-chart": () => import("./bar-chart-options.config-DHO8grQN.js").then((e) => e.t),
 	"box-plot": () => import("./box-plot-options.config-BgiiwSrU.js").then((e) => e.t),
 	"bubble-chart": () => import("./bubble-chart-options.config-UM9w5tBs.js").then((e) => e.t),
 	"bullet-chart": () => import("./bullet-chart-options.config-D9HklLUI.js").then((e) => e.t),
-	"choropleth-map": () => import("./choropleth-map-options.config-D9-u-NwX.js").then((e) => e.t),
+	"choropleth-map": () => import("./choropleth-map-options.config-Blu0Z2tR.js").then((e) => e.t),
 	"circle-pack-chart": () => import("./circle-pack-chart-options.config-DQs-uitJ.js").then((e) => e.t),
 	"circular-gauge": () => import("./circular-gauge-options.config-CnWE16oE.js").then((e) => e.t),
 	"column-chart": () => import("./column-chart-options.config-BYDJTVx6.js").then((e) => e.t),
@@ -48,8 +49,8 @@ var m = {
 	"dropdown-filter": () => import("./dropdown-filter-options.config-B2S5I7IG.js").then((e) => e.t),
 	"evolution-number": () => import("./evolution-number-options.config-BBWPkY_K.js").then((e) => e.n),
 	"funnel-chart": () => import("./funnel-chart-options.config-W83a8ukL.js").then((e) => e.t),
-	"heat-map": () => import("./heat-map-options.config-ChZeslEy.js").then((e) => e.n),
-	"heat-table": () => import("./heat-table-options.config-BPCszrFn.js").then((e) => e.t),
+	"heat-map": () => import("./heat-map-options.config-BQkhkLPb.js").then((e) => e.n),
+	"heat-table": () => import("./heat-table-options.config-CMWWTeyo.js").then((e) => e.t),
 	"hexbin-map": () => import("./hexbin-map-options.config-DUbhSv0B.js").then((e) => e.t),
 	image: () => import("./image-options.config-D_QOqkE_.js").then((e) => e.n),
 	kpi: () => import("./kpi-options.config-D9WuRe5z.js"),
@@ -61,7 +62,7 @@ var m = {
 	"pyramid-chart": () => import("./pyramid-chart-options.config-0Qf1naIx.js").then((e) => e.t),
 	"radar-chart": () => import("./radar-chart-options.config-Dd6SMpMz.js").then((e) => e.t),
 	"regular-table": () => import("./regular-table-options.config-TXfzXF_Y.js").then((e) => e.n),
-	"route-map": () => import("./route-map-options.config-B7vT6KG_.js").then((e) => e.n),
+	"route-map": () => import("./route-map-options.config-DTcS47fW.js").then((e) => e.n),
 	"sankey-diagram": () => import("./sankey-diagram-options.config-Y6jRK3wk.js").then((e) => e.n),
 	"scatter-plot": () => import("./scatter-plot-options.config-DvGofFzR.js").then((e) => e.n),
 	"search-filter": () => import("./search-filter-options.config-JvAotvWb.js").then((e) => e.n),
@@ -69,7 +70,7 @@ var m = {
 	"slider-filter": () => import("./slider-filter-options.config-BaoIKTFj.js").then((e) => e.n),
 	spacer: () => import("./spacer-options.config-Dd_j69HB.js"),
 	"speedometer-chart": () => import("./speedometer-chart-options.config-CIZKRvbg.js").then((e) => e.n),
-	"spike-map": () => import("./spike-map-options.config-DkmRZ1JZ.js").then((e) => e.n),
+	"spike-map": () => import("./spike-map-options.config-CPYfKWoF.js").then((e) => e.n),
 	"strip-plot": () => import("./strip-plot-options.config-D1h3YBHj.js").then((e) => e.t),
 	"sunburst-chart": () => import("./sunburst-chart-options.config-DVETeZFc.js").then((e) => e.n),
 	"symbol-map": () => import("./symbol-map-options.config-BwZ7_S4w.js").then((e) => e.n),
@@ -78,7 +79,7 @@ var m = {
 	"venn-diagram": () => import("./venn-diagram-options.config-3-Adz8wM.js").then((e) => e.n),
 	video: () => import("./video-options.config-DVxtlO5_.js").then((e) => e.n),
 	"wordcloud-chart": () => import("./wordcloud-chart-options.config-UAl2hfU7.js").then((e) => e.n)
-}, h = {
+}, g = {
 	"area-chart:de": () => import("./area-chart-options.de-DXjvU5SP.js"),
 	"area-chart:en": () => import("./area-chart-options.en-C97TC7i-.js"),
 	"area-chart:es": () => import("./area-chart-options.es-BRZqqMoH.js"),
@@ -304,16 +305,16 @@ var m = {
 	"wordcloud-chart:es": () => import("./wordcloud-chart-options.es-C6dUmFLy.js"),
 	"wordcloud-chart:fr": () => import("./wordcloud-chart-options.fr-dNSX7uyQ.js"),
 	"wordcloud-chart:nl": () => import("./wordcloud-chart-options.nl-D1CFGAGK.js")
-}, g = async (e) => {
+}, _ = async (e) => {
 	try {
-		let t = m[e];
+		let t = h[e];
 		return t ? (await t())?.default ?? null : null;
 	} catch {
 		return null;
 	}
-}, _ = async (e, t) => {
+}, v = async (e, t) => {
 	try {
-		let n = h[`${e}:${t}`];
+		let n = g[`${e}:${t}`];
 		if (!n) return null;
 		let r = await n();
 		if (!r?.default) return null;
@@ -334,11 +335,11 @@ var m = {
 	} catch {
 		return null;
 	}
-}, v = (e) => e ? g(e) : Promise.resolve(null), y = async (e, t, n = !1) => {
+}, y = (e) => e ? _(e) : Promise.resolve(null), b = async (e, t, n = !1) => {
 	if (!e || !t) return null;
-	let r = await _(e, t);
-	return !r && n && t !== "en" && (r = await _(e, "en")), r ?? null;
-}, b = (e, t, n) => {
+	let r = await v(e, t);
+	return !r && n && t !== "en" && (r = await v(e, "en")), r ?? null;
+}, x = (e, t, n) => {
 	let r = (t) => {
 		for (let i of t ?? []) {
 			if (i.key === e) return n ? i : i.control;
@@ -354,14 +355,14 @@ var m = {
 		if (t) return t;
 	}
 	return null;
-}, 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) => {
+}, S = ":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}", C = (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;
-}, C = (e) => {
+}, w = (e) => {
 	let t;
 	if (typeof e.controlInfo?.extraLabel == "function" ? t = e.controlInfo.extraLabel({
 		options: e.options,
@@ -387,7 +388,7 @@ var m = {
 		theme: e.theme
 	}) : typeof e.controlInfo?.extraLabelHasClickAction == "boolean" && (r = e.controlInfo.extraLabelHasClickAction);
 	let i = typeof e.controlInfo?.extraLabelClickAction == "function" ? () => e.controlInfo.extraLabelClickAction({
-		options: e.options,
+		options: e.getOptions?.() ?? e.options,
 		slots: e.slots,
 		theme: e.theme
 	}) : () => {};
@@ -397,7 +398,7 @@ var m = {
 		extraLabelHasClickAction: r,
 		extraLabelClickAction: i
 	};
-}, w = (e, t) => {
+}, T = (e, t) => {
 	let n = e?.options ?? {};
 	if (typeof e?.controlInfo?.calculateValue == "function") return e.controlInfo.calculateValue({ options: n });
 	if (t.includes(".")) {
@@ -407,13 +408,15 @@ var m = {
 		return r[e[i]];
 	}
 	return n[t];
-}, T = (e) => (t) => {
-	let n = { ...e.options };
-	return typeof e?.controlInfo?.toOptions == "function" ? n = e.controlInfo.toOptions({
+}, E = (e) => (t) => {
+	let n = { ...e.getOptions?.() ?? e.options };
+	typeof e?.controlInfo?.toOptions == "function" ? n = e.controlInfo.toOptions({
 		options: n,
 		value: t?.detail?.value
-	}) : e.optionKey.includes(".") ? n = a(n, e.optionKey, t.detail.value) : n[e.optionKey] = t.detail.value, e.changeCallback(n);
-}, E = (e) => {
+	}) : e.optionKey.includes(".") ? n = o(n, e.optionKey, t.detail.value) : n[e.optionKey] = t.detail.value;
+	let r = t?.detail?.interaction;
+	return r ? e.changeCallback(n, r) : e.changeCallback(n);
+}, D = (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] = {
@@ -421,8 +424,8 @@ var m = {
 			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 = w(e, e.optionKey), o = S(e), { extraLabel: s, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = C(e), f = T(e);
-	return c`
+	let i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = T(e, e.optionKey), o = C(e), { extraLabel: s, extraLabelTooltip: c, extraLabelHasClickAction: u, extraLabelClickAction: d } = w(e), f = E(e);
+	return l`
     <luzmo-item-option-action-button-group
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
@@ -433,7 +436,7 @@ var m = {
       .size=${n}
       .tooltip=${i}
       .extraLabel=${s}
-      .extraLabelTooltip=${l}
+      .extraLabelTooltip=${c}
       .extraLabelHasClickAction=${u}
       @luzmo-extra-label-click=${d}
       @luzmo-option-changed=${f}
@@ -441,16 +444,16 @@ var m = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-action-button-group>
   `;
-}, D = (e) => {
+}, O = (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;
-}, 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`
+}, k = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = T(e, e.optionKey), r = O(e), i = e.size, a = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = C(e), { extraLabel: s, extraLabelTooltip: c, extraLabelHasClickAction: u, extraLabelClickAction: d } = w(e), f = E(e);
+	return l`
     <luzmo-item-option-color-palette-picker
       .value=${n ?? o}
       .values=${r}
@@ -459,7 +462,7 @@ var m = {
       .size=${i}
       .tooltip=${a}
       .extraLabel=${s}
-      .extraLabelTooltip=${l}
+      .extraLabelTooltip=${c}
       .extraLabelHasClickAction=${u}
       @luzmo-extra-label-click=${() => {
 		if (typeof d == "function") {
@@ -472,9 +475,9 @@ var m = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-color-palette-picker>
   `;
-}, 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`
+}, A = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = T(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = C(e), { extraLabel: o, extraLabelTooltip: s, extraLabelHasClickAction: c, extraLabelClickAction: u } = w(e), d = E(e);
+	return l`
     <luzmo-item-option-color-picker
       .value=${n ?? a}
       .label=${t}
@@ -483,7 +486,7 @@ var m = {
       .tooltip=${i}
       .extraLabel=${o}
       .extraLabelTooltip=${s}
-      .extraLabelHasClickAction=${l}
+      .extraLabelHasClickAction=${c}
       @luzmo-extra-label-click=${() => {
 		if (typeof u == "function") {
 			let { options: t } = u();
@@ -491,13 +494,17 @@ var m = {
 		}
 	}}
       @luzmo-option-changed=${d}
+      ?live-interactions=${e.liveInteractions ?? !1}
+      @luzmo-option-interaction-start=${e.interactionCallback}
+      @luzmo-option-interaction-end=${e.interactionCallback}
+      @luzmo-option-interaction-cancel=${e.interactionCallback}
       .parseValue=${e.controlInfo?.parseValue}
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-color-picker>
   `;
-}, 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`
+}, j = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = T(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = C(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, c = 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 } = w(e), y = E(e);
+	return l`
     <luzmo-item-option-color-range
       .value=${n ?? a}
       .label=${t}
@@ -510,7 +517,7 @@ var m = {
       .debounce=${e.controlInfo?.debounce}
       ?reverse=${s}
       ?percentage=${o}
-      ?no-alpha-channel=${l}
+      ?no-alpha-channel=${c}
       ?edit-range-size=${u}
       ?no-values=${p}
       ?read-only-color-picker=${m}
@@ -523,19 +530,23 @@ var m = {
 		}
 	}}
       @luzmo-option-changed=${y}
+      ?live-interactions=${e.liveInteractions ?? !1}
+      @luzmo-option-interaction-start=${e.interactionCallback}
+      @luzmo-option-interaction-end=${e.interactionCallback}
+      @luzmo-option-interaction-cancel=${e.interactionCallback}
       .parseValue=${e.controlInfo?.parseValue}
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-color-range>
   `;
-}, 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`
+}, M = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey, n = T(e, e.optionKey), r = C(e), i = O(e), a = Array.isArray(i) ? i : [], o = e.translations?.options?.[e.optionKey]?.enum ?? {}, u = e.theme?.editDarkOrLight === "dark-edit" ? s : c, { extraLabel: d, extraLabelTooltip: f, extraLabelHasClickAction: p, extraLabelClickAction: m } = w(e), h = E(e);
+	return l`
     <luzmo-item-option-guidelines
       hide-label
       .label=${t}
       .value=${n ?? r}
       .lineTypes=${a}
-      .lineTypeLabels=${l}
+      .lineTypeLabels=${o}
       .defaultColor=${u}
       .size=${e.size}
       .language=${e.language}
@@ -548,31 +559,35 @@ var m = {
 		if (t && typeof t == "object" && "options" in t) return e.changeCallback(t.options);
 	}}
       @luzmo-option-changed=${h}
+      ?live-interactions=${e.liveInteractions ?? !1}
+      @luzmo-option-interaction-start=${e.interactionCallback}
+      @luzmo-option-interaction-end=${e.interactionCallback}
+      @luzmo-option-interaction-cancel=${e.interactionCallback}
     ></luzmo-item-option-guidelines>
   `;
-}, 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`
+}, N = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = T(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 = C(e), { extraLabel: c, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = w(e), m = E(e);
+	return l`
     <luzmo-item-option-multi-language-field
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .placeholder=${a}
       .value=${n ?? s}
-      language=${f(i)}
+      language=${p(i)}
       .size=${o}
       .tooltip=${r}
-      .extraLabel=${l}
+      .extraLabel=${c}
       .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${d}
-      @luzmo-extra-label-click=${p}
+      @luzmo-extra-label-click=${f}
       @luzmo-option-changed=${m}
       .parseValue=${e.controlInfo?.parseValue}
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-multi-language-field>
   `;
-}, 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`
+}, P = (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 = T(e, e.optionKey), o = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, s = C(e), c = e.size, { extraLabel: u, extraLabelTooltip: d, extraLabelHasClickAction: f, extraLabelClickAction: p } = w(e), m = E(e);
+	return l`
     <luzmo-item-option-number-field
       .value=${a}
       .default=${s}
@@ -581,7 +596,7 @@ var m = {
       .step=${i}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
-      .size=${l}
+      .size=${c}
       .tooltip=${o}
       .placeholder=${e.controlInfo?.placeholder}
       .minWidthInputField=${e.controlInfo?.minWidthInputField}
@@ -595,7 +610,7 @@ var m = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-number-field>
   `;
-}, P = (e, t) => {
+}, F = (e, t) => {
 	let n = {};
 	if (Array.isArray(e)) {
 		for (let r of e) typeof r == "string" && (n[r] = t?.[r] ?? r);
@@ -606,9 +621,9 @@ var m = {
 		n[r] = e ?? a ?? r;
 	}
 	return n;
-}, 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`
+}, I = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = T(e, e.optionKey), r = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, i = e.translations?.options?.[e.optionKey]?.enum, a = F(e.controlInfo?.enum, i), o = e.size, s = C(e), { extraLabel: c, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = w(e), p = E(e);
+	return l`
     <luzmo-item-option-picker
       .value=${n}
       .default=${s}
@@ -617,7 +632,7 @@ var m = {
       ?hide-label=${e.controlInfo?.hideLabel}
       .tooltip=${r}
       .size=${o}
-      .extraLabel=${l}
+      .extraLabel=${c}
       .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${d}
       @luzmo-extra-label-click=${f}
@@ -626,9 +641,9 @@ var m = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-picker>
   `;
-}, 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`
+}, L = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label, n = e.controlInfo?.enum ?? e.controlInfo?.positions, r = e.size, i = T(e, e.optionKey), a = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = C(e) ?? "topRight", { extraLabel: s, extraLabelTooltip: c, extraLabelHasClickAction: u, extraLabelClickAction: d } = w(e), f = E(e);
+	return l`
     <luzmo-item-option-position-picker
       .value=${i}
       .positions=${n}
@@ -638,16 +653,16 @@ var m = {
       .tooltip=${a}
       .size=${r}
       .extraLabel=${s}
-      .extraLabelTooltip=${l}
+      .extraLabelTooltip=${c}
       .extraLabelHasClickAction=${u}
       @luzmo-extra-label-click=${d}
       @luzmo-option-changed=${f}
       .readonly=${e.controlInfo?.readonly}
     ></luzmo-item-option-position-picker>
   `;
-}, 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`
+}, R = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label, n = T(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = C(e), { extraLabel: o, extraLabelTooltip: s, extraLabelHasClickAction: c, extraLabelClickAction: u } = w(e), d = E(e);
+	return l`
     <luzmo-item-option-positions-number-field
       .values=${n ?? a}
       .positions=${e.controlInfo?.positions}
@@ -658,16 +673,16 @@ var m = {
       .tooltip=${i}
       .extraLabel=${o}
       .extraLabelTooltip=${s}
-      .extraLabelHasClickAction=${l}
+      .extraLabelHasClickAction=${c}
       @luzmo-extra-label-click=${u}
       @luzmo-option-changed=${d}
       .parseValue=${e.controlInfo?.parseValue}
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-positions-number-field>
   `;
-}, 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`
+}, z = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = T(e, e.optionKey), r = C(e), i = e.translations?.options?.[e.optionKey]?.enum, a = F(e.controlInfo?.enum, i), o = e.size, s = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, { extraLabel: c, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = w(e), p = E(e);
+	return l`
     <luzmo-item-option-radio-button-group
       .value=${n ?? r}
       .values=${a}
@@ -675,7 +690,7 @@ var m = {
       ?hide-label=${e.controlInfo?.hideLabel}
       .size=${o}
       .tooltip=${s}
-      .extraLabel=${l}
+      .extraLabel=${c}
       .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${d}
       @luzmo-extra-label-click=${f}
@@ -684,12 +699,12 @@ var m = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-radio-button-group>
   `;
-}, 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`
+}, B = (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 = T(e, e.optionKey), s = e.size, c = C(e), { extraLabel: u, extraLabelTooltip: d, extraLabelHasClickAction: f, extraLabelClickAction: p } = w(e), m = E(e);
+	return l`
     <luzmo-item-option-slider
       .value=${o}
-      .default=${l}
+      .default=${c}
       .min=${r}
       .max=${i}
       .step=${a}
@@ -707,13 +722,17 @@ var m = {
 		}
 	}}
       @luzmo-option-changed=${m}
+      ?live-interactions=${e.liveInteractions ?? !1}
+      @luzmo-option-interaction-start=${e.interactionCallback}
+      @luzmo-option-interaction-end=${e.interactionCallback}
+      @luzmo-option-interaction-cancel=${e.interactionCallback}
       .parseValue=${e.controlInfo?.parseValue}
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-slider>
   `;
-}, 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`
+}, V = (e) => {
+	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = T(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, a = C(e), { extraLabel: o, extraLabelTooltip: s, extraLabelHasClickAction: c, extraLabelClickAction: u } = w(e), d = E(e);
+	return l`
     <luzmo-item-option-switch
       .value=${n ?? a ?? !1}
       .label=${t}
@@ -722,16 +741,16 @@ var m = {
       .tooltip=${i}
       .extraLabel=${o}
       .extraLabelTooltip=${s}
-      .extraLabelHasClickAction=${l}
+      .extraLabelHasClickAction=${c}
       @luzmo-extra-label-click=${u}
       @luzmo-option-changed=${d}
       .parseValue=${e.controlInfo?.parseValue}
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-switch>
   `;
-}, 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`
+}, H = (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 = T(e, e.optionKey) ?? "", a = e.size, o = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, s = C(e), { extraLabel: c, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = w(e), p = E(e);
+	return l`
     <luzmo-item-option-text-field
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
@@ -739,7 +758,7 @@ var m = {
       .value=${i ?? s}
       .size=${a}
       .tooltip=${o}
-      .extraLabel=${l}
+      .extraLabel=${c}
       .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${d}
       @luzmo-extra-label-click=${f}
@@ -748,33 +767,33 @@ var m = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-text-field>
   `;
-}, H = (e) => {
+}, U = (e) => {
 	switch (e.controlType) {
-		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);
+		case "picker": return I(e);
+		case "slider": return B(e);
+		case "switch": return V(e);
+		case "multi-language-field": return N(e);
+		case "text-field": return H(e);
+		case "number-field": return P(e);
+		case "color-range": return j(e);
+		case "guidelines": return M(e);
+		case "color-palette-picker": return k(e);
+		case "position-picker": return L(e);
+		case "positions-number-field": return R(e);
+		case "radio-button-group": return z(e);
+		case "color-picker": return A(e);
+		case "action-button-group": return D(e);
 	}
-}, U, W = class extends e {
+}, W, G = 5, K = class extends e {
 	constructor(...e) {
-		super(...e), this._loadItemConfig = new p(this, {
-			task: async ([e, t, a, o, s, c, l, u, d]) => {
+		super(...e), this._loadItemConfig = new m(this, {
+			task: async ([e, t, r, o, s, c, l, u, d]) => {
 				if (l || u || d) {
 					let e = {};
 					l && (e.apiUrl = l), u && (e.authKey = u), d && (e.authToken = d), n.configure(e);
 				}
 				if (c && c.type !== "custom") try {
-					if (c?.id && r.includes(c.id)) this._fullTheme = await i(c.id);
+					if (c?.id && i.includes(c.id)) this._fullTheme = await a(c.id);
 					else if (c?.id) {
 						let e = await n.fetchTheme(c.id);
 						this._fullTheme = e?.theme ?? {};
@@ -792,15 +811,15 @@ var m = {
 					let e = p ?? f?.[t ?? ""], n = this._mergeOptionTranslations(void 0, e);
 					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 v(e) ?? [], this._itemTypeLoaded = e), r) {
-						let t = a ?? "en";
-						this._translations = await y(e, t, !0) ?? {}, this._languageLoaded = a;
+					let n = e !== this._itemTypeLoaded, i = e !== this._itemTypeLoaded || r !== this._languageLoaded;
+					if (n && (this._optionsConfig = await y(e) ?? [], this._itemTypeLoaded = e), i) {
+						let t = r ?? "en";
+						this._translations = await b(e, t, !0) ?? {}, this._languageLoaded = r;
 					}
-					let i = this._translations.options?.[t ?? ""], o = p ?? f?.[t ?? ""], s = this._mergeOptionTranslations(i, o);
+					let a = this._translations.options?.[t ?? ""], o = p ?? f?.[t ?? ""], s = this._mergeOptionTranslations(a, o);
 					this._effectiveTranslations = s ? { options: { [t ?? ""]: s } } : {};
 				} else this._optionsConfig = [], this._translations = {}, this._effectiveTranslations = {};
-				let m = b(t ?? "", this._optionsConfig), h = m?.type;
+				let m = x(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"),
@@ -837,35 +856,58 @@ var m = {
 				this.apiUrl,
 				this.authKey,
 				this.authToken
-			]
-		}), this.language = "en", this.options = {}, this.slots = [], this.size = "m", this._optionsConfig = [], this._translations = {}, this._effectiveTranslations = {}, this.changedOptions = (e) => {
+			],
+			argsEqual: (e, t) => e.length === t.length && e.every((e, n) => e === t[n] || n === G && r(e, t[n]))
+		}), this.language = "en", this.options = {}, this.slots = [], this.size = "m", this.liveInteractions = !1, this._optionsConfig = [], this._translations = {}, this._effectiveTranslations = {}, this._getLatestOptions = () => this.latestOptions?.() ?? this.options ?? {}, this.changedOptions = (e, t) => {
 			this.options = e, this.dispatchEvent(new CustomEvent("luzmo-options-changed", {
 				bubbles: !0,
 				composed: !0,
 				cancelable: !0,
-				detail: { options: e }
+				detail: t ? {
+					options: e,
+					interaction: t
+				} : { options: e }
+			}));
+		}, this._interactionOptionKeys = /* @__PURE__ */ new Map(), this._handleInteraction = (e) => {
+			let { id: t } = e.detail, n = this._interactionOptionKeys.get(t) ?? this._renderedOptionKey;
+			e.stopPropagation(), e.type === "luzmo-option-interaction-start" ? this._interactionOptionKeys.set(t, n) : this._interactionOptionKeys.delete(t), this.dispatchEvent(new CustomEvent(e.type, {
+				bubbles: !0,
+				composed: !0,
+				detail: {
+					...e.detail,
+					optionKey: n
+				}
 			}));
 		};
 	}
+	endInteraction() {
+		for (let e of this.renderRoot?.children ?? []) e.endInteraction?.();
+	}
+	get _renderedOptionKey() {
+		return this.customOptionConfiguration?.key ?? this.optionKey ?? "";
+	}
 	render() {
 		return this._loadItemConfig.render({
-			pending: () => c`
+			pending: () => l`
           <p role="status">Loading...</p>
         `,
-			complete: (e) => H({
+			complete: (e) => U({
 				controlType: e?.type,
-				optionKey: this.customOptionConfiguration?.key ?? this.optionKey ?? "",
+				optionKey: this._renderedOptionKey,
 				controlInfo: e,
 				options: this.options,
+				getOptions: this._getLatestOptions,
 				slots: this.slots,
 				theme: this._fullTheme ?? this.theme,
 				language: this.language,
 				translations: this._effectiveTranslations,
 				size: this.size,
-				changeCallback: this.changedOptions
+				changeCallback: this.changedOptions,
+				liveInteractions: this.liveInteractions,
+				interactionCallback: this._handleInteraction
 			}),
-			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>
+			error: (e) => (console.error(e), l`
+          <span class="sr-only" role="alert">${f("Failed to load option", { desc: "Error message when item option fails to load" })}</span>
         `)
 		});
 	}
@@ -921,37 +963,41 @@ var m = {
 	}
 };
 // src/components/item-option/index.ts
-U = W, U.styles = l(x), t([u({
+W = K, W.styles = u(S), t([d({
 	type: String,
 	reflect: !0
-})], W.prototype, "language", void 0), t([u({
+})], K.prototype, "language", void 0), t([d({
 	type: String,
 	reflect: !0,
 	attribute: "item-type"
-})], W.prototype, "itemType", void 0), t([u({
+})], K.prototype, "itemType", void 0), t([d({
 	type: String,
 	reflect: !0,
 	attribute: "option-key"
-})], W.prototype, "optionKey", void 0), t([u({
+})], K.prototype, "optionKey", void 0), t([d({
 	type: Object,
 	reflect: !1
-})], W.prototype, "customOptionConfiguration", void 0), t([u({
+})], K.prototype, "customOptionConfiguration", void 0), t([d({
 	type: Object,
 	reflect: !1
-})], W.prototype, "customTranslations", void 0), t([u({ type: Object })], W.prototype, "options", void 0), t([u({ type: Object })], W.prototype, "slots", void 0), t([u({ type: Object })], W.prototype, "theme", void 0), t([u({
+})], K.prototype, "customTranslations", void 0), t([d({ type: Object })], K.prototype, "options", void 0), t([d({ type: Object })], K.prototype, "slots", void 0), t([d({ type: Object })], K.prototype, "theme", void 0), t([d({
 	type: String,
 	attribute: "api-url",
 	reflect: !0
-})], W.prototype, "apiUrl", void 0), t([u({
+})], K.prototype, "apiUrl", void 0), t([d({
 	type: String,
 	attribute: "auth-key",
 	reflect: !0
-})], W.prototype, "authKey", void 0), t([u({
+})], K.prototype, "authKey", void 0), t([d({
 	type: String,
 	attribute: "auth-token",
 	reflect: !0
-})], W.prototype, "authToken", void 0), t([u({
+})], K.prototype, "authToken", void 0), t([d({
 	type: String,
 	reflect: !0
-})], W.prototype, "size", void 0), customElements.get("luzmo-item-option") || customElements.define("luzmo-item-option", W);
-export { y as i, b as n, v as r, W as t };
+})], K.prototype, "size", void 0), t([d({
+	type: Boolean,
+	reflect: !0,
+	attribute: "live-interactions"
+})], K.prototype, "liveInteractions", void 0), customElements.get("luzmo-item-option") || customElements.define("luzmo-item-option", K);
+export { b as i, x as n, y as r, K as t };