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

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

@@ -17,17 +17,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { i as e } from "./base-2sulw8ws.js";
+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 { html as a, unsafeCSS as o } from "lit";
-import { property as s } from "lit/decorators.js";
-import { msg as c } from "@lit/localize";
-import { ifDefined as l } from "lit/directives/if-defined.js";
-import { Task as u } 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 d = {
+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),
@@ -74,7 +76,7 @@ var d = {
 	"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)
-}, f = {
+}, 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"),
@@ -295,25 +297,25 @@ var d = {
 	"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")
-}, p = async (e) => {
+}, g = async (e) => {
 	try {
-		let t = d[e];
+		let t = m[e];
 		return t ? (await t())?.default ?? null : null;
 	} catch {
 		return null;
 	}
-}, m = async (e, t) => {
+}, _ = async (e, t) => {
 	try {
-		let n = f[`${e}:${t}`];
+		let n = h[`${e}:${t}`];
 		return n ? (await n())?.default ?? null : null;
 	} catch {
 		return null;
 	}
-}, h = (e) => e ? p(e) : Promise.resolve(null), g = 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 m(e, t);
-	return !r && n && t !== "en" && (r = await m(e, "en")), r ?? null;
-}, _ = (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;
@@ -329,14 +331,14 @@ var d = {
 		if (t) return t;
 	}
 	return null;
-}, v = ":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}", y = (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;
-}, b = (e) => {
+}, C = (e) => {
 	let t;
 	if (typeof e.controlInfo?.extraLabel == "function" ? t = e.controlInfo.extraLabel({
 		options: e.options,
@@ -372,7 +374,7 @@ var d = {
 		extraLabelHasClickAction: r,
 		extraLabelClickAction: i
 	};
-}, x = (e, t) => {
+}, w = (e, t) => {
 	let n = e?.options ?? {};
 	if (typeof e?.controlInfo?.calculateValue == "function") return e.controlInfo.calculateValue({ options: n });
 	if (t.includes(".")) {
@@ -382,20 +384,13 @@ var d = {
 		return r[e[i]];
 	}
 	return n[t];
-}, S = (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);
-}, C = (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] = {
@@ -403,18 +398,18 @@ var d = {
 			label: e.translations?.options?.[e.optionKey]?.enum?.[t] ?? e.controlInfo?.values[t].label
 		};
 	});
-	let i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = x(e, e.optionKey), s = y(e), { extraLabel: c, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = b(e), f = S(e);
-	return a`
+	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}
-      .value=${o}
+      .value=${a}
       .values=${r}
-      .default=${s}
+      .default=${o}
       .selects=${e.controlInfo?.selects}
       .size=${n}
       .tooltip=${i}
-      .extraLabel=${c}
+      .extraLabel=${s}
       .extraLabelTooltip=${l}
       .extraLabelHasClickAction=${u}
       @luzmo-extra-label-click=${d}
@@ -423,24 +418,24 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-action-button-group>
   `;
-}, w = (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;
-}, T = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = x(e, e.optionKey), r = w(e), i = e.size, o = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, s = y(e), { extraLabel: c, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = b(e), f = S(e);
-	return a`
+}, 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 ?? s}
+      .value=${n ?? o}
       .values=${r}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .size=${i}
-      .tooltip=${o}
-      .extraLabel=${c}
+      .tooltip=${a}
+      .extraLabel=${s}
       .extraLabelTooltip=${l}
       .extraLabelHasClickAction=${u}
       @luzmo-extra-label-click=${() => {
@@ -454,17 +449,17 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-color-palette-picker>
   `;
-}, E = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = x(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = y(e), { extraLabel: s, extraLabelTooltip: c, extraLabelHasClickAction: l, extraLabelClickAction: u } = b(e), d = S(e);
-	return a`
+}, 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 ?? o}
+      .value=${n ?? a}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .size=${r}
       .tooltip=${i}
-      .extraLabel=${s}
-      .extraLabelTooltip=${c}
+      .extraLabel=${o}
+      .extraLabelTooltip=${s}
       .extraLabelHasClickAction=${l}
       @luzmo-extra-label-click=${() => {
 		if (typeof u == "function") {
@@ -477,11 +472,11 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-color-picker>
   `;
-}, D = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = x(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = y(e), s = 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 } = b(e), C = S(e);
-	return a`
+}, 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 ?? o}
+      .value=${n ?? a}
       .label=${t}
       .size=${r}
       .tooltip=${i}
@@ -490,8 +485,8 @@ var d = {
       .extraLabelTooltip=${g}
       .extraLabelHasClickAction=${_}
       .debounce=${e.controlInfo?.debounce}
-      ?reverse=${c}
-      ?percentage=${s}
+      ?reverse=${s}
+      ?percentage=${o}
       ?no-alpha-channel=${l}
       ?edit-range-size=${u}
       ?no-values=${p}
@@ -504,44 +499,67 @@ var d = {
 			return e.changeCallback(t);
 		}
 	}}
-      @luzmo-option-changed=${C}
+      @luzmo-option-changed=${y}
       .parseValue=${e.controlInfo?.parseValue}
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-color-range>
   `;
-}, O = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = x(e, e.optionKey) ?? {}, r = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, i = e.language ?? "en", o = { [i]: e.translations?.options?.[e.optionKey]?.placeholder ?? e.controlInfo?.placeholder ?? "" }, s = e.size, c = y(e), { extraLabel: u, extraLabelTooltip: d, extraLabelHasClickAction: f, extraLabelClickAction: p } = b(e), m = S(e);
-	return a`
+}, 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=${a}
+      .lineTypeLabels=${l}
+      .defaultColor=${u}
+      .size=${e.size}
+      .language=${e.language}
+      .extraLabel=${d}
+      .extraLabelTooltip=${f}
+      .extraLabelHasClickAction=${p}
+      .debounce=${e.controlInfo?.debounce ?? 200}
+      @luzmo-extra-label-click=${() => {
+		let t = m();
+		if (t && typeof t == "object" && "options" in t) return e.changeCallback(t.options);
+	}}
+      @luzmo-option-changed=${h}
+    ></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`
     <luzmo-item-option-multi-language-field
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
-      .placeholder=${o}
-      .value=${n ?? c}
-      language=${l(i)}
-      .size=${s}
+      .placeholder=${a}
+      .value=${n ?? s}
+      language=${f(i)}
+      .size=${o}
       .tooltip=${r}
-      .extraLabel=${u}
-      .extraLabelTooltip=${d}
-      .extraLabelHasClickAction=${f}
+      .extraLabel=${l}
+      .extraLabelTooltip=${u}
+      .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>
   `;
-}, k = (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, o = x(e, e.optionKey), s = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, c = y(e), l = e.size, { extraLabel: u, extraLabelTooltip: d, extraLabelHasClickAction: f, extraLabelClickAction: p } = b(e), m = S(e);
-	return a`
+}, 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=${o}
-      .default=${c}
+      .value=${a}
+      .default=${s}
       .min=${n}
       .max=${r}
       .step=${i}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .size=${l}
-      .tooltip=${s}
+      .tooltip=${o}
       .placeholder=${e.controlInfo?.placeholder}
       .minWidthInputField=${e.controlInfo?.minWidthInputField}
       .debounce=${e.controlInfo?.debounce}
@@ -554,7 +572,7 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-number-field>
   `;
-}, A = (e, t) => {
+}, P = (e, t) => {
 	let n = {};
 	if (Array.isArray(e)) {
 		for (let r of e) typeof r == "string" && (n[r] = t?.[r] ?? r);
@@ -565,17 +583,17 @@ var d = {
 		n[r] = e ?? a ?? r;
 	}
 	return n;
-}, j = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = x(e, e.optionKey), r = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, i = e.translations?.options?.[e.optionKey]?.enum, o = A(e.controlInfo?.enum, i), s = e.size, c = y(e), { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = b(e), p = S(e);
-	return a`
+}, 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}
-      .values=${o}
+      .default=${s}
+      .values=${a}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .tooltip=${r}
-      .size=${s}
+      .size=${o}
       .extraLabel=${l}
       .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${d}
@@ -585,18 +603,18 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-picker>
   `;
-}, M = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label, n = e.controlInfo?.positions, r = e.size, i = x(e, e.optionKey), o = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, s = y(e) ?? "topRight", { extraLabel: c, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = b(e), f = S(e);
-	return a`
+}, 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}
-      .default=${s}
+      .default=${o}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
-      .tooltip=${o}
+      .tooltip=${a}
       .size=${r}
-      .extraLabel=${c}
+      .extraLabel=${s}
       .extraLabelTooltip=${l}
       .extraLabelHasClickAction=${u}
       @luzmo-extra-label-click=${d}
@@ -604,19 +622,19 @@ var d = {
       .readonly=${e.controlInfo?.readonly}
     ></luzmo-item-option-position-picker>
   `;
-}, N = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label, n = x(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = y(e), { extraLabel: s, extraLabelTooltip: c, extraLabelHasClickAction: l, extraLabelClickAction: u } = b(e), d = S(e);
-	return a`
+}, 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 ?? o}
+      .values=${n ?? a}
       .positions=${e.controlInfo?.positions}
       .positionConfiguration=${e.controlInfo?.positionConfiguration}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .size=${r}
       .tooltip=${i}
-      .extraLabel=${s}
-      .extraLabelTooltip=${c}
+      .extraLabel=${o}
+      .extraLabelTooltip=${s}
       .extraLabelHasClickAction=${l}
       @luzmo-extra-label-click=${u}
       @luzmo-option-changed=${d}
@@ -624,16 +642,16 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-positions-number-field>
   `;
-}, P = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = x(e, e.optionKey), r = y(e), i = e.translations?.options?.[e.optionKey]?.enum, o = A(e.controlInfo?.enum, i), s = e.size, c = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = b(e), p = S(e);
-	return a`
+}, 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=${o}
+      .values=${a}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
-      .size=${s}
-      .tooltip=${c}
+      .size=${o}
+      .tooltip=${s}
       .extraLabel=${l}
       .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${d}
@@ -643,19 +661,19 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-radio-button-group>
   `;
-}, F = (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, o = e.controlInfo?.step, s = x(e, e.optionKey), c = e.size, l = y(e), { extraLabel: u, extraLabelTooltip: d, extraLabelHasClickAction: f, extraLabelClickAction: p } = b(e), m = S(e);
-	return a`
+}, 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=${s}
+      .value=${o}
       .default=${l}
       .min=${r}
       .max=${i}
-      .step=${o}
+      .step=${a}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .tooltip=${n}
-      .size=${c}
+      .size=${s}
       .extraLabel=${u}
       .extraLabelTooltip=${d}
       .extraLabelHasClickAction=${f}
@@ -670,17 +688,17 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-slider>
   `;
-}, I = (e) => {
-	let t = e.translations?.options?.[e.optionKey]?.label ?? e.controlInfo?.label ?? e.optionKey ?? "", n = x(e, e.optionKey), r = e.size, i = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, o = y(e), { extraLabel: s, extraLabelTooltip: c, extraLabelHasClickAction: l, extraLabelClickAction: u } = b(e), d = S(e);
-	return a`
+}, 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 ?? o ?? !1}
+      .value=${n ?? a ?? !1}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .size=${r}
       .tooltip=${i}
-      .extraLabel=${s}
-      .extraLabelTooltip=${c}
+      .extraLabel=${o}
+      .extraLabelTooltip=${s}
       .extraLabelHasClickAction=${l}
       @luzmo-extra-label-click=${u}
       @luzmo-option-changed=${d}
@@ -688,16 +706,16 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-switch>
   `;
-}, L = (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 = x(e, e.optionKey) ?? "", o = e.size, s = e.translations?.options?.[e.optionKey]?.tooltip ?? e.controlInfo?.tooltip, c = y(e), { extraLabel: l, extraLabelTooltip: u, extraLabelHasClickAction: d, extraLabelClickAction: f } = b(e), p = S(e);
-	return a`
+}, 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}
-      .size=${o}
-      .tooltip=${s}
+      .value=${i ?? s}
+      .size=${a}
+      .tooltip=${o}
       .extraLabel=${l}
       .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${d}
@@ -707,25 +725,26 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-text-field>
   `;
-}, R = (e) => {
+}, H = (e) => {
 	switch (e.controlType) {
-		case "picker": return j(e);
-		case "slider": return F(e);
-		case "switch": return I(e);
-		case "multi-language-field": return O(e);
-		case "text-field": return L(e);
-		case "number-field": return k(e);
-		case "color-range": return D(e);
-		case "color-palette-picker": return T(e);
-		case "position-picker": return M(e);
-		case "positions-number-field": return N(e);
-		case "radio-button-group": return P(e);
-		case "color-picker": return E(e);
-		case "action-button-group": return C(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);
 	}
-}, z = class extends e {
+}, U = class extends e {
 	constructor(...e) {
-		super(...e), this._loadItemConfig = new u(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 = {};
@@ -751,20 +770,21 @@ var d = {
 					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 h(e) ?? [], this._itemTypeLoaded = e), r) {
+					if (n && (this._optionsConfig = await v(e) ?? [], this._itemTypeLoaded = e), r) {
 						let t = a ?? "en";
-						this._translations = await g(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 = _(t ?? "", this._optionsConfig), v = m?.type;
-				if (v !== this._controlTypeLoaded) {
+				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"),
 						"../item-option-color-palette-picker/index.ts": () => import("./item-option-color-palette-picker/index.js"),
 						"../item-option-color-picker/index.ts": () => import("./item-option-color-picker/index.js"),
 						"../item-option-color-range/index.ts": () => import("./item-option-color-range/index.js"),
+						"../item-option-guidelines/index.ts": () => import("./item-option-guidelines/index.js"),
 						"../item-option-multi-language-field/index.ts": () => import("./item-option-multi-language-field/index.js"),
 						"../item-option-number-field/index.ts": () => import("./item-option-number-field/index.js"),
 						"../item-option-panel/index.ts": () => import("./item-option-panel/index.js"),
@@ -777,7 +797,7 @@ var d = {
 						"../item-option-text-field/index.ts": () => import("./item-option-text-field/index.js")
 					});
 					try {
-						e[`../item-option-${v}/index.ts`] && (await e[`../item-option-${v}/index.ts`](), this._controlTypeLoaded = v);
+						e[`../item-option-${h}/index.ts`] && (await e[`../item-option-${h}/index.ts`](), this._controlTypeLoaded = h);
 					} catch (e) {
 						console.error(e);
 					}
@@ -805,14 +825,14 @@ var d = {
 		};
 	}
 	static {
-		this.styles = o(v);
+		this.styles = l(x);
 	}
 	render() {
 		return this._loadItemConfig.render({
-			pending: () => a`
+			pending: () => c`
           <p role="status">Loading...</p>
         `,
-			complete: (e) => R({
+			complete: (e) => H({
 				controlType: e?.type,
 				optionKey: this.customOptionConfiguration?.key ?? this.optionKey ?? "",
 				controlInfo: e,
@@ -824,8 +844,8 @@ var d = {
 				size: this.size,
 				changeCallback: this.changedOptions
 			}),
-			error: (e) => (console.error(e), a`
-          <span class="sr-only" role="alert">${c("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>
         `)
 		});
 	}
@@ -882,38 +902,38 @@ var d = {
 };
 //#endregion
 //#region src/components/item-option/index.ts
-t([s({
+t([u({
 	type: String,
 	reflect: !0
-})], z.prototype, "language", void 0), t([s({
+})], U.prototype, "language", void 0), t([u({
 	type: String,
 	reflect: !0,
 	attribute: "item-type"
-})], z.prototype, "itemType", void 0), t([s({
+})], U.prototype, "itemType", void 0), t([u({
 	type: String,
 	reflect: !0,
 	attribute: "option-key"
-})], z.prototype, "optionKey", void 0), t([s({
+})], U.prototype, "optionKey", void 0), t([u({
 	type: Object,
 	reflect: !1
-})], z.prototype, "customOptionConfiguration", void 0), t([s({
+})], U.prototype, "customOptionConfiguration", void 0), t([u({
 	type: Object,
 	reflect: !1
-})], z.prototype, "customTranslations", void 0), t([s({ type: Object })], z.prototype, "options", void 0), t([s({ type: Object })], z.prototype, "slots", void 0), t([s({ type: Object })], z.prototype, "theme", void 0), t([s({
+})], 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
-})], z.prototype, "apiUrl", void 0), t([s({
+})], U.prototype, "apiUrl", void 0), t([u({
 	type: String,
 	attribute: "auth-key",
 	reflect: !0
-})], z.prototype, "authKey", void 0), t([s({
+})], U.prototype, "authKey", void 0), t([u({
 	type: String,
 	attribute: "auth-token",
 	reflect: !0
-})], z.prototype, "authToken", void 0), t([s({
+})], U.prototype, "authToken", void 0), t([u({
 	type: String,
 	reflect: !0
-})], z.prototype, "size", void 0), customElements.get("luzmo-item-option") || customElements.define("luzmo-item-option", z);
+})], U.prototype, "size", void 0), customElements.get("luzmo-item-option") || customElements.define("luzmo-item-option", U);
 //#endregion
-export { g as i, _ as n, h as r, z as t };
+export { y as i, b as n, v as r, U as t };