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

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

@@ -17,17 +17,18 @@
  * 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 { 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 { 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";
 //#region node_modules/@luzmo/dashboard-contents-types/shared/utils/options-registry.generated.js
-var d = {
+var p = {
 	"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 +75,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 = {
+}, m = {
 	"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 +296,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) => {
+}, h = async (e) => {
 	try {
-		let t = d[e];
+		let t = p[e];
 		return t ? (await t())?.default ?? null : null;
 	} catch {
 		return null;
 	}
-}, m = async (e, t) => {
+}, g = async (e, t) => {
 	try {
-		let n = f[`${e}:${t}`];
+		let n = m[`${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) => {
+}, _ = (e) => e ? h(e) : Promise.resolve(null), v = 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 g(e, t);
+	return !r && n && t !== "en" && (r = await g(e, "en")), r ?? null;
+}, y = (e, t, n) => {
 	let r = (t) => {
 		for (let i of t ?? []) {
 			if (i.key === e) return n ? i : i.control;
@@ -329,14 +330,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) => {
+}, 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) => {
 	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) => {
+}, S = (e) => {
 	let t;
 	if (typeof e.controlInfo?.extraLabel == "function" ? t = e.controlInfo.extraLabel({
 		options: e.options,
@@ -372,7 +373,7 @@ var d = {
 		extraLabelHasClickAction: r,
 		extraLabelClickAction: i
 	};
-}, x = (e, t) => {
+}, C = (e, t) => {
 	let n = e?.options ?? {};
 	if (typeof e?.controlInfo?.calculateValue == "function") return e.controlInfo.calculateValue({ options: n });
 	if (t.includes(".")) {
@@ -382,7 +383,7 @@ var d = {
 		return r[e[i]];
 	}
 	return n[t];
-}, S = (e) => (t) => {
+}, w = (e) => (t) => {
 	let n = { ...e.options };
 	if (typeof e?.controlInfo?.toOptions == "function") n = e.controlInfo.toOptions({
 		options: n,
@@ -395,7 +396,7 @@ var d = {
 		i[r[a]] = t.detail.value;
 	} else n[e.optionKey] = t.detail.value;
 	return e.changeCallback(n);
-}, C = (e) => {
+}, T = (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,14 +404,14 @@ 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 = C(e, e.optionKey), o = x(e), { extraLabel: c, extraLabelTooltip: l, extraLabelHasClickAction: u, extraLabelClickAction: d } = S(e), f = w(e);
+	return s`
     <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}
@@ -423,23 +424,23 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-action-button-group>
   `;
-}, w = (e) => {
+}, E = (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`
+}, 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`
     <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}
+      .tooltip=${a}
       .extraLabel=${c}
       .extraLabelTooltip=${l}
       .extraLabelHasClickAction=${u}
@@ -454,16 +455,16 @@ 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`
+}, 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`
     <luzmo-item-option-color-picker
-      .value=${n ?? o}
+      .value=${n ?? a}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .size=${r}
       .tooltip=${i}
-      .extraLabel=${s}
+      .extraLabel=${o}
       .extraLabelTooltip=${c}
       .extraLabelHasClickAction=${l}
       @luzmo-extra-label-click=${() => {
@@ -477,11 +478,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`
+}, 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`
     <luzmo-item-option-color-range
-      .value=${n ?? o}
+      .value=${n ?? a}
       .label=${t}
       .size=${r}
       .tooltip=${i}
@@ -491,7 +492,7 @@ var d = {
       .extraLabelHasClickAction=${_}
       .debounce=${e.controlInfo?.debounce}
       ?reverse=${c}
-      ?percentage=${s}
+      ?percentage=${o}
       ?no-alpha-channel=${l}
       ?edit-range-size=${u}
       ?no-values=${p}
@@ -504,24 +505,47 @@ 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`
+}, 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`
+    <luzmo-item-option-guidelines
+      hide-label
+      .label=${t}
+      .value=${n ?? r}
+      .lineTypes=${c}
+      .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>
+  `;
+}, 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`
     <luzmo-item-option-multi-language-field
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
-      .placeholder=${o}
+      .placeholder=${a}
       .value=${n ?? c}
-      language=${l(i)}
-      .size=${s}
+      language=${d(i)}
+      .size=${o}
       .tooltip=${r}
-      .extraLabel=${u}
-      .extraLabelTooltip=${d}
+      .extraLabel=${l}
+      .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${f}
       @luzmo-extra-label-click=${p}
       @luzmo-option-changed=${m}
@@ -529,11 +553,11 @@ var d = {
       .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`
+}, 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`
     <luzmo-item-option-number-field
-      .value=${o}
+      .value=${a}
       .default=${c}
       .min=${n}
       .max=${r}
@@ -541,7 +565,7 @@ var d = {
       .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 +578,7 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-number-field>
   `;
-}, A = (e, t) => {
+}, N = (e, t) => {
 	let n = {};
 	if (Array.isArray(e)) {
 		for (let r of e) typeof r == "string" && (n[r] = t?.[r] ?? r);
@@ -565,17 +589,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`
+}, 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`
     <luzmo-item-option-picker
       .value=${n}
       .default=${c}
-      .values=${o}
+      .values=${a}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .tooltip=${r}
-      .size=${s}
+      .size=${o}
       .extraLabel=${l}
       .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${d}
@@ -585,16 +609,16 @@ 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`
+}, 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`
     <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}
       .extraLabelTooltip=${l}
@@ -604,18 +628,18 @@ 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`
+}, 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`
     <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}
+      .extraLabel=${o}
       .extraLabelTooltip=${c}
       .extraLabelHasClickAction=${l}
       @luzmo-extra-label-click=${u}
@@ -624,15 +648,15 @@ 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`
+}, 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`
     <luzmo-item-option-radio-button-group
       .value=${n ?? r}
-      .values=${o}
+      .values=${a}
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
-      .size=${s}
+      .size=${o}
       .tooltip=${c}
       .extraLabel=${l}
       .extraLabelTooltip=${u}
@@ -643,15 +667,15 @@ 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`
+}, 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`
     <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}
@@ -670,16 +694,16 @@ 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`
+}, 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`
     <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}
+      .extraLabel=${o}
       .extraLabelTooltip=${c}
       .extraLabelHasClickAction=${l}
       @luzmo-extra-label-click=${u}
@@ -688,16 +712,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`
+}, 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`
     <luzmo-item-option-text-field
       .label=${t}
       ?hide-label=${e.controlInfo?.hideLabel}
       .placeholder=${r[n]}
       .value=${i ?? c}
-      .size=${o}
-      .tooltip=${s}
+      .size=${a}
+      .tooltip=${o}
       .extraLabel=${l}
       .extraLabelTooltip=${u}
       .extraLabelHasClickAction=${d}
@@ -707,25 +731,26 @@ var d = {
       .toValue=${e.controlInfo?.toValue}
     ></luzmo-item-option-text-field>
   `;
-}, R = (e) => {
+}, V = (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 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);
 	}
-}, z = class extends e {
+}, H = class extends e {
 	constructor(...e) {
-		super(...e), this._loadItemConfig = new u(this, {
+		super(...e), this._loadItemConfig = new f(this, {
 			task: async ([e, t, a, o, s, c, l, u, d]) => {
 				if (l || u || d) {
 					let e = {};
@@ -751,20 +776,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 _(e) ?? [], this._itemTypeLoaded = e), r) {
 						let t = a ?? "en";
-						this._translations = await g(e, t, !0) ?? {}, this._languageLoaded = a;
+						this._translations = await v(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 = y(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 +803,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 +831,14 @@ var d = {
 		};
 	}
 	static {
-		this.styles = o(v);
+		this.styles = c(b);
 	}
 	render() {
 		return this._loadItemConfig.render({
-			pending: () => a`
+			pending: () => s`
           <p role="status">Loading...</p>
         `,
-			complete: (e) => R({
+			complete: (e) => V({
 				controlType: e?.type,
 				optionKey: this.customOptionConfiguration?.key ?? this.optionKey ?? "",
 				controlInfo: e,
@@ -824,8 +850,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), s`
+          <span class="sr-only" role="alert">${u("Failed to load option", { desc: "Error message when item option fails to load" })}</span>
         `)
 		});
 	}
@@ -882,38 +908,38 @@ var d = {
 };
 //#endregion
 //#region src/components/item-option/index.ts
-t([s({
+t([l({
 	type: String,
 	reflect: !0
-})], z.prototype, "language", void 0), t([s({
+})], H.prototype, "language", void 0), t([l({
 	type: String,
 	reflect: !0,
 	attribute: "item-type"
-})], z.prototype, "itemType", void 0), t([s({
+})], H.prototype, "itemType", void 0), t([l({
 	type: String,
 	reflect: !0,
 	attribute: "option-key"
-})], z.prototype, "optionKey", void 0), t([s({
+})], H.prototype, "optionKey", void 0), t([l({
 	type: Object,
 	reflect: !1
-})], z.prototype, "customOptionConfiguration", void 0), t([s({
+})], H.prototype, "customOptionConfiguration", void 0), t([l({
 	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({
+})], 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({
 	type: String,
 	attribute: "api-url",
 	reflect: !0
-})], z.prototype, "apiUrl", void 0), t([s({
+})], H.prototype, "apiUrl", void 0), t([l({
 	type: String,
 	attribute: "auth-key",
 	reflect: !0
-})], z.prototype, "authKey", void 0), t([s({
+})], H.prototype, "authKey", void 0), t([l({
 	type: String,
 	attribute: "auth-token",
 	reflect: !0
-})], z.prototype, "authToken", void 0), t([s({
+})], H.prototype, "authToken", void 0), t([l({
 	type: String,
 	reflect: !0
-})], z.prototype, "size", void 0), customElements.get("luzmo-item-option") || customElements.define("luzmo-item-option", z);
+})], H.prototype, "size", void 0), customElements.get("luzmo-item-option") || customElements.define("luzmo-item-option", H);
 //#endregion
-export { g as i, _ as n, h as r, z as t };
+export { v as i, y as n, _ as r, H as t };

package/components/item-option-number-field/index.cjs

@@ -17,4 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-number-field-Dep43Ym5.cjs");exports.LuzmoItemOptionNumberField=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-number-field-BXZD_sC2.cjs");exports.LuzmoItemOptionNumberField=e.t;

package/components/item-option-number-field/index.js

@@ -24,5 +24,5 @@
 		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba(var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity));--luzmo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
 	}
 })();
-import { t as e } from "../item-option-number-field-Df56sivV.js";
+import { t as e } from "../item-option-number-field-DHl0phm5.js";
 export { e as LuzmoItemOptionNumberField };