@luzmo/analytics-components-kit 1.0.9-beta.1 → 1.0.9-beta.11

package/components/item-option-guidelines-Bn1HSCgL.js

@@ -0,0 +1,420 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import "./tokens-Ov1pCR4Y.js";
+import "./base-CrpOMVeU.js";
+import { t as e } from "./decorate-DyMgX_Uh.js";
+import { t } from "./localized-mixin-CYMFnS-n.js";
+import { a as n, c as r, l as i, n as a, r as o, s, t as c } from "./types-DNRGKFSD.js";
+import { t as l } from "./item-option-base-BIDIiNfI.js";
+import { luzmoBorderDashed as u, luzmoBorderDotted as d, luzmoBorderSolid as f, luzmoPlus as p, luzmoTrashOutline as m } from "@luzmo/icons";
+import "@luzmo/lucero/button";
+import "@luzmo/lucero/icon";
+import { html as h, nothing as g, unsafeCSS as _ } from "lit";
+import { property as v, state as y } from "lit/decorators.js";
+import { localized as b, msg as x, str as S } from "@lit/localize";
+import "@luzmo/lucero/action-button";
+import { repeat as C } from "lit/directives/repeat.js";
+import "@luzmo/lucero/action-group";
+import "@luzmo/lucero/number-field";
+import "@luzmo/lucero/picker";
+import "@luzmo/lucero/menu";
+import "@luzmo/lucero/color-picker";
+//#region src/components/item-option-guidelines/helpers/guidelines-value.ts
+var w = new Set(s), T = new Set(r), E = new Set(i), D = {
+	solid: "0",
+	dotted: "1,2",
+	dashed: "3,3"
+}, O = (e) => typeof e == "object" && !!e && !Array.isArray(e), k = (e) => {
+	if (typeof e == "number" && Number.isFinite(e)) return e;
+	if (typeof e == "string" && e.trim() !== "") {
+		let t = Number(e);
+		return Number.isFinite(t) ? t : void 0;
+	}
+}, A = (e) => typeof e == "string" && w.has(e), j = (e) => {
+	let t = (e ?? []).filter(A);
+	return t.length > 0 ? t : [...c];
+}, M = (e) => e === "dark-edit" ? a : o, N = (e) => structuredClone(e), P = (e) => {
+	if (!O(e)) return { ...n };
+	let t = typeof e.type == "string" ? e.type.trim().toLowerCase() : "", r = T.has(t) ? t : D[t] ?? n.type, i = (typeof e.width == "number" ? String(e.width) : typeof e.width == "string" ? e.width.trim() : "").replace(/px$/i, "");
+	return {
+		type: r,
+		width: E.has(i) ? i : n.width
+	};
+}, F = (e) => {
+	if (!O(e)) return;
+	let t = typeof e.type == "string" ? e.type.trim().toLowerCase() : "";
+	if (!A(t)) return;
+	let n = typeof e.color == "string" && e.color.trim() !== "" ? e.color.trim() : o;
+	return t === "value" ? {
+		type: t,
+		color: n,
+		value: k(e.value) ?? 0
+	} : {
+		type: t,
+		color: n
+	};
+}, I = (e) => {
+	let t = Array.isArray(e) ? { lines: e } : e;
+	if (!O(t) || !(Array.isArray(t.lines) || O(t.lines))) return;
+	let n = Array.isArray(t.lines) ? t.lines : [t.lines], r = n.map(F).filter((e) => e !== void 0);
+	if (!(n.length > 0 && r.length === 0)) return {
+		lines: r,
+		style: P(t.style)
+	};
+}, L = (e, t) => e === "value" ? {
+	type: e,
+	color: t,
+	value: 0
+} : {
+	type: e,
+	color: t
+}, R = (e, t, r) => {
+	let i = j(t)[0], a = L(i, r);
+	if (!e) return {
+		lines: [a],
+		style: { ...n }
+	};
+	let o = N(e);
+	return o.lines.push(a), o;
+}, z = (e, t) => {
+	let n = N(e);
+	return n.lines.splice(t, 1), n;
+}, B = (e, t, n) => {
+	let r = N(e), i = r.lines[t];
+	return i && (r.lines[t] = L(n, i.color)), r;
+}, V = (e, t, n) => {
+	let r = N(e);
+	return r.lines[t] && (r.lines[t].color = n), r;
+}, H = (e, t, n) => {
+	let r = N(e);
+	return r.lines[t] && (r.lines[t].value = n), r;
+}, U = (e, t) => {
+	let n = N(e);
+	return n.style.type = t, n;
+}, W = (e, t) => {
+	let n = N(e);
+	return n.style.width = t, n;
+}, G = ":host{display:block;container-type:inline-size}.luzmo-item-option{align-items:start;height:-moz-fit-content;height:fit-content}.control-container{flex-grow:1;align-items:start}.guidelines{gap:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));flex-direction:column;inline-size:100%;display:flex}.guideline-rows{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));flex-direction:column;display:flex}.guideline-row{align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));grid-template-columns:auto minmax(0,max-content) minmax(6rem,1fr) auto;display:grid}.guideline-value{inline-size:100%}@container (width<=20rem){.guideline-row{grid-template-columns:auto minmax(0,1fr) auto}.guideline-value{grid-column:2}.guideline-value-spacer{display:none}}.guideline-value-spacer{min-inline-size:0;min-block-size:var(--luzmo-component-height)}.guidelines-add{justify-content:flex-end;display:flex}.guideline-shared{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));border-block-start:var(--luzmo-border-width) solid var(--luzmo-border-color);flex-direction:column;padding-block-start:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));display:flex}.guideline-shared-row{justify-content:space-between;align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));flex-wrap:wrap;display:flex}.guideline-shared-label{flex-shrink:0}.guideline-width{min-inline-size:8rem}:host{--item-option-guidelines-rows-gap:var(--luzmo-spacing-2);--item-option-guidelines-row-gap:var(--luzmo-spacing-2);--item-option-guidelines-shared-gap:var(--luzmo-spacing-3)}:host([size=s]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-1);--item-option-guidelines-row-gap:var(--luzmo-spacing-1);--item-option-guidelines-shared-gap:var(--luzmo-spacing-2)}:host([size=l]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-3);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}:host([size=xl]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-4);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}", K = 0, q = 6, J = 10 ** -6, Y = { maximumFractionDigits: q }, X = t(l), Z = class extends X {
+	constructor(...e) {
+		super(...e), this.lineTypes = [], this.lineTypeLabels = {}, this.defaultColor = M(), this.debounce = 200, this._lineIds = [], this._lineIdCounter = 0, this._styleLabelId = `luzmo-item-option-guidelines-style-${++K}`, this._widthLabelId = `luzmo-item-option-guidelines-width-${K}`;
+	}
+	static get styles() {
+		return [...super.styles, _(G)];
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && (this._clearDebounce(), this._guidelines = I(this.value), this._lineIds = (this._guidelines?.lines ?? []).map((e, t) => this._lineIds[t] ?? this._createLineId()));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._clearDebounce();
+	}
+	_createLineId() {
+		return `${this._styleLabelId}-line-${++this._lineIdCounter}`;
+	}
+	_clearDebounce() {
+		clearTimeout(this._debounceTimeout), this._debounceTimeout = void 0;
+	}
+	_emit(e, t = !1) {
+		let n = () => {
+			this._debounceTimeout = void 0, this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0,
+				detail: { value: e }
+			}));
+		};
+		if (this._clearDebounce(), t || this.debounce <= 0) {
+			n();
+			return;
+		}
+		this._debounceTimeout = setTimeout(n, this.debounce);
+	}
+	_commit(e, t = !1) {
+		this._guidelines = e, this._emit(e, t);
+	}
+	_allowedTypes() {
+		return j(this.lineTypes);
+	}
+	_typeLabel(e) {
+		if (this.lineTypeLabels[e]) return this.lineTypeLabels[e];
+		switch (e) {
+			case "value": return x("Value", {
+				id: "item-option-guidelines-type-value",
+				desc: "Guideline type: manual numeric value"
+			});
+			case "average": return x("Average", {
+				id: "item-option-guidelines-type-average",
+				desc: "Guideline type: average of the plotted data"
+			});
+			case "median": return x("Median", {
+				id: "item-option-guidelines-type-median",
+				desc: "Guideline type: median of the plotted data"
+			});
+			case "average open": return x("Average open", {
+				id: "item-option-guidelines-type-average-open",
+				desc: "Guideline type: average of open values"
+			});
+			case "average close": return x("Average close", {
+				id: "item-option-guidelines-type-average-close",
+				desc: "Guideline type: average of close values"
+			});
+		}
+	}
+	_typeValues() {
+		return Object.fromEntries(this._allowedTypes().map((e) => [e, this._typeLabel(e)]));
+	}
+	_widthValues() {
+		return {
+			1: x("Thin", {
+				id: "item-option-guidelines-width-thin",
+				desc: "Guideline width: thin"
+			}),
+			2: x("Medium", {
+				id: "item-option-guidelines-width-medium",
+				desc: "Guideline width: medium"
+			}),
+			3: x("Thick", {
+				id: "item-option-guidelines-width-thick",
+				desc: "Guideline width: thick"
+			})
+		};
+	}
+	_styleOptions() {
+		return [
+			{
+				key: "0",
+				icon: f,
+				label: x("Solid", {
+					id: "item-option-guidelines-style-solid",
+					desc: "Guideline line style: solid"
+				})
+			},
+			{
+				key: "1,2",
+				icon: d,
+				label: x("Dotted", {
+					id: "item-option-guidelines-style-dotted",
+					desc: "Guideline line style: dotted"
+				})
+			},
+			{
+				key: "3,3",
+				icon: u,
+				label: x("Dashed", {
+					id: "item-option-guidelines-style-dashed",
+					desc: "Guideline line style: dashed"
+				})
+			}
+		];
+	}
+	_handleAdd() {
+		this.disabled || (this._lineIds = [...this._lineIds, this._createLineId()], this._commit(R(this._guidelines, this.lineTypes, this.defaultColor), !0));
+	}
+	_handleRemove(e) {
+		this.disabled || !this._guidelines || (this._lineIds = this._lineIds.filter((t, n) => n !== e), this._commit(z(this._guidelines, e), !0));
+	}
+	_handleTypeChange(e, t) {
+		this.disabled || !this._guidelines || !A(t.detail) || this._commit(B(this._guidelines, e, t.detail), !0);
+	}
+	_handleColorChange(e, t) {
+		if (this.disabled || !this._guidelines) return;
+		let n = t.target.color;
+		typeof n == "string" && this._commit(V(this._guidelines, e, n));
+	}
+	_handleValueChange(e, t) {
+		if (this.disabled || !this._guidelines) return;
+		let n = t.target.value;
+		typeof n != "number" || !Number.isFinite(n) || this._commit(H(this._guidelines, e, n));
+	}
+	_handleStyleChange(e) {
+		if (this.disabled || !this._guidelines) return;
+		let t = e.target.selected?.[0];
+		(t === "0" || t === "1,2" || t === "3,3") && this._commit(U(this._guidelines, t), !0);
+	}
+	_handleWidthChange(e) {
+		if (this.disabled || !this._guidelines) return;
+		let t = e.detail, n = e.target.value, r = t === "1" || t === "2" || t === "3" ? t : n;
+		(r === "1" || r === "2" || r === "3") && this._commit(W(this._guidelines, r), !0);
+	}
+	_lineKey(e) {
+		return this._lineIds[e];
+	}
+	_renderLine(e, t) {
+		let n = t + 1, r = x(S`Guideline ${n} color`, {
+			id: "item-option-guidelines-color",
+			desc: "Accessible name for one guideline color picker"
+		}), i = x(S`Guideline ${n} type`, {
+			id: "item-option-guidelines-type",
+			desc: "Accessible name for one guideline type picker"
+		}), a = x(S`Guideline ${n} value`, {
+			id: "item-option-guidelines-value",
+			desc: "Accessible name for one manual guideline value"
+		}), o = x(S`Remove guideline ${n}`, {
+			id: "item-option-guidelines-remove",
+			desc: "Aria label for removing one guideline row"
+		});
+		return h`
+      <div class="guideline-row">
+        <luzmo-color-picker
+          class="guideline-color"
+          .color=${e.color}
+          .size=${this.size}
+          rounding="full"
+          shape="circle"
+          .label=${r}
+          ?disabled=${this.disabled}
+          @change=${(e) => this._handleColorChange(t, e)}
+        ></luzmo-color-picker>
+        <luzmo-picker
+          class="guideline-type"
+          .label=${i}
+          .value=${e.type}
+          .size=${this.size}
+          variant="highlight"
+          ?disabled=${this.disabled}
+          @change=${(e) => this._handleTypeChange(t, e)}
+        >
+          ${Object.entries(this._typeValues()).map(([e, t]) => h`
+              <luzmo-menu-item value=${e}>${t}</luzmo-menu-item>
+            `)}
+        </luzmo-picker>
+        ${e.type === "value" ? h`
+                <luzmo-number-field
+                  class="guideline-value"
+                  .value=${e.value ?? 0}
+                  .size=${this.size}
+                  .step=${J}
+                  .formatOptions=${Y}
+                  .label=${a}
+                  ?disabled=${this.disabled}
+                  @change=${(e) => this._handleValueChange(t, e)}
+                ></luzmo-number-field>
+              ` : h`
+                <div class="guideline-value-spacer"></div>
+              `}
+        <luzmo-action-button
+          class="guideline-remove"
+          quiet
+          .size=${this.size}
+          .label=${o}
+          ?disabled=${this.disabled}
+          @click=${() => this._handleRemove(t)}
+        >
+          <luzmo-icon slot="icon" .size=${this.size} .icon=${m}></luzmo-icon>
+        </luzmo-action-button>
+      </div>
+    `;
+	}
+	_renderSharedStyle(e) {
+		return h`
+      <div class="guideline-shared">
+        <div class="guideline-shared-row">
+          <span class="guideline-shared-label" id=${this._styleLabelId}>
+            ${x("Style", {
+			id: "item-option-guidelines-style-label",
+			desc: "Label for shared guideline dash style"
+		})}
+          </span>
+          <luzmo-action-group
+            class="guideline-style"
+            compact
+            quiet
+            emphasized
+            selects="single"
+            .size=${this.size}
+            .selected=${[e.style.type]}
+            aria-labelledby=${this._styleLabelId}
+            ?disabled=${this.disabled}
+            @change=${this._handleStyleChange}
+          >
+            ${this._styleOptions().map((e) => h`
+                <luzmo-action-button value=${e.key} ?disabled=${this.disabled} .label=${e.label}>
+                  <luzmo-icon slot="icon" .size=${this.size} .icon=${e.icon}></luzmo-icon>
+                </luzmo-action-button>
+              `)}
+          </luzmo-action-group>
+        </div>
+        <div class="guideline-shared-row">
+          <span class="guideline-shared-label" id=${this._widthLabelId}>
+            ${x("Width", {
+			id: "item-option-guidelines-width-label",
+			desc: "Label for shared guideline width"
+		})}
+          </span>
+          <luzmo-picker
+            class="guideline-width"
+            aria-labelledby=${this._widthLabelId}
+            .value=${e.style.width}
+            .size=${this.size}
+            variant="highlight"
+            ?disabled=${this.disabled}
+            @change=${this._handleWidthChange}
+          >
+            ${Object.entries(this._widthValues()).map(([e, t]) => h`
+                <luzmo-menu-item value=${e}>${t}</luzmo-menu-item>
+              `)}
+          </luzmo-picker>
+        </div>
+      </div>
+    `;
+	}
+	renderController() {
+		let e = this._guidelines?.lines ?? [];
+		return h`
+      <div id="luzmo-item-option-control" class="guidelines" role="group" aria-label=${this.label || x("Guidelines", {
+			id: "item-option-guidelines-group",
+			desc: "Accessible name for the guidelines editor"
+		})}>
+        ${e.length > 0 ? h`
+                <div class="guideline-rows">
+                  ${C(e, (e, t) => this._lineKey(t), (e, t) => this._renderLine(e, t))}
+                </div>
+              ` : g}
+        <div class="guidelines-add">
+          <luzmo-button
+            class="add-guideline"
+            treatment="outline"
+            .size=${this.size}
+            ?disabled=${this.disabled}
+            @click=${this._handleAdd}
+          >
+            <luzmo-icon slot="icon" .icon=${p} .size=${this.size}></luzmo-icon>
+            ${x("Add guideline", {
+			id: "item-option-guidelines-add",
+			desc: "Button that adds a chart guideline"
+		})}
+          </luzmo-button>
+        </div>
+        ${this._guidelines && e.length > 0 ? this._renderSharedStyle(this._guidelines) : g}
+      </div>
+    `;
+	}
+};
+//#endregion
+//#region src/components/item-option-guidelines/index.ts
+e([v({ attribute: !1 })], Z.prototype, "value", void 0), e([v({ attribute: !1 })], Z.prototype, "lineTypes", void 0), e([v({ attribute: !1 })], Z.prototype, "lineTypeLabels", void 0), e([v({
+	type: String,
+	reflect: !0,
+	attribute: "default-color"
+})], Z.prototype, "defaultColor", void 0), e([v({
+	type: Number,
+	reflect: !0
+})], Z.prototype, "debounce", void 0), e([y()], Z.prototype, "_guidelines", void 0), Z = e([b()], Z), typeof customElements < "u" && !customElements.get("luzmo-item-option-guidelines") && customElements.define("luzmo-item-option-guidelines", Z);
+//#endregion
+export { Z as t };

package/components/item-option-guidelines-CmPaMdqb.cjs

@@ -0,0 +1,135 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+require("./tokens-BWMfo_w4.cjs"),require("./base-BmvsQ-s1.cjs");const e=require("./decorate-DCJt-2rt.cjs"),t=require("./localized-mixin-Bt25Frg1.cjs"),n=require("./types-pVa6ut_v.cjs"),r=require("./item-option-base-C6RQH9M8.cjs");let i=require("@luzmo/icons");require("@luzmo/lucero/button"),require("@luzmo/lucero/icon");let a=require("lit"),o=require("lit/decorators.js"),s=require("@lit/localize");require("@luzmo/lucero/action-button");let c=require("lit/directives/repeat.js");require("@luzmo/lucero/action-group"),require("@luzmo/lucero/number-field"),require("@luzmo/lucero/picker"),require("@luzmo/lucero/menu"),require("@luzmo/lucero/color-picker");var l=new Set(n.s),u=new Set(n.c),d=new Set(n.l),f={solid:`0`,dotted:`1,2`,dashed:`3,3`},p=e=>typeof e==`object`&&!!e&&!Array.isArray(e),m=e=>{if(typeof e==`number`&&Number.isFinite(e))return e;if(typeof e==`string`&&e.trim()!==``){let t=Number(e);return Number.isFinite(t)?t:void 0}},h=e=>typeof e==`string`&&l.has(e),g=e=>{let t=(e??[]).filter(h);return t.length>0?t:[...n.t]},_=e=>e===`dark-edit`?n.n:n.r,v=e=>structuredClone(e),y=e=>{if(!p(e))return{...n.a};let t=typeof e.type==`string`?e.type.trim().toLowerCase():``,r=u.has(t)?t:f[t]??n.a.type,i=(typeof e.width==`number`?String(e.width):typeof e.width==`string`?e.width.trim():``).replace(/px$/i,``);return{type:r,width:d.has(i)?i:n.a.width}},b=e=>{if(!p(e))return;let t=typeof e.type==`string`?e.type.trim().toLowerCase():``;if(!h(t))return;let r=typeof e.color==`string`&&e.color.trim()!==``?e.color.trim():n.r;return t===`value`?{type:t,color:r,value:m(e.value)??0}:{type:t,color:r}},x=e=>{let t=Array.isArray(e)?{lines:e}:e;if(!p(t)||!(Array.isArray(t.lines)||p(t.lines)))return;let n=Array.isArray(t.lines)?t.lines:[t.lines],r=n.map(b).filter(e=>e!==void 0);if(!(n.length>0&&r.length===0))return{lines:r,style:y(t.style)}},S=(e,t)=>e===`value`?{type:e,color:t,value:0}:{type:e,color:t},C=(e,t,r)=>{let i=g(t)[0],a=S(i,r);if(!e)return{lines:[a],style:{...n.a}};let o=v(e);return o.lines.push(a),o},w=(e,t)=>{let n=v(e);return n.lines.splice(t,1),n},T=(e,t,n)=>{let r=v(e),i=r.lines[t];return i&&(r.lines[t]=S(n,i.color)),r},E=(e,t,n)=>{let r=v(e);return r.lines[t]&&(r.lines[t].color=n),r},D=(e,t,n)=>{let r=v(e);return r.lines[t]&&(r.lines[t].value=n),r},O=(e,t)=>{let n=v(e);return n.style.type=t,n},k=(e,t)=>{let n=v(e);return n.style.width=t,n},A=`:host{display:block;container-type:inline-size}.luzmo-item-option{align-items:start;height:-moz-fit-content;height:fit-content}.control-container{flex-grow:1;align-items:start}.guidelines{gap:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));flex-direction:column;inline-size:100%;display:flex}.guideline-rows{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));flex-direction:column;display:flex}.guideline-row{align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));grid-template-columns:auto minmax(0,max-content) minmax(6rem,1fr) auto;display:grid}.guideline-value{inline-size:100%}@container (width<=20rem){.guideline-row{grid-template-columns:auto minmax(0,1fr) auto}.guideline-value{grid-column:2}.guideline-value-spacer{display:none}}.guideline-value-spacer{min-inline-size:0;min-block-size:var(--luzmo-component-height)}.guidelines-add{justify-content:flex-end;display:flex}.guideline-shared{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));border-block-start:var(--luzmo-border-width) solid var(--luzmo-border-color);flex-direction:column;padding-block-start:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));display:flex}.guideline-shared-row{justify-content:space-between;align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));flex-wrap:wrap;display:flex}.guideline-shared-label{flex-shrink:0}.guideline-width{min-inline-size:8rem}:host{--item-option-guidelines-rows-gap:var(--luzmo-spacing-2);--item-option-guidelines-row-gap:var(--luzmo-spacing-2);--item-option-guidelines-shared-gap:var(--luzmo-spacing-3)}:host([size=s]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-1);--item-option-guidelines-row-gap:var(--luzmo-spacing-1);--item-option-guidelines-shared-gap:var(--luzmo-spacing-2)}:host([size=l]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-3);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}:host([size=xl]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-4);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}`,j=0,M=6,N=10**-6,P={maximumFractionDigits:M},F=t.t(r.t),I=class extends F{constructor(...e){super(...e),this.lineTypes=[],this.lineTypeLabels={},this.defaultColor=_(),this.debounce=200,this._lineIds=[],this._lineIdCounter=0,this._styleLabelId=`luzmo-item-option-guidelines-style-${++j}`,this._widthLabelId=`luzmo-item-option-guidelines-width-${j}`}static get styles(){return[...super.styles,(0,a.unsafeCSS)(A)]}willUpdate(e){super.willUpdate(e),e.has(`value`)&&(this._clearDebounce(),this._guidelines=x(this.value),this._lineIds=(this._guidelines?.lines??[]).map((e,t)=>this._lineIds[t]??this._createLineId()))}disconnectedCallback(){super.disconnectedCallback(),this._clearDebounce()}_createLineId(){return`${this._styleLabelId}-line-${++this._lineIdCounter}`}_clearDebounce(){clearTimeout(this._debounceTimeout),this._debounceTimeout=void 0}_emit(e,t=!1){let n=()=>{this._debounceTimeout=void 0,this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:e}}))};if(this._clearDebounce(),t||this.debounce<=0){n();return}this._debounceTimeout=setTimeout(n,this.debounce)}_commit(e,t=!1){this._guidelines=e,this._emit(e,t)}_allowedTypes(){return g(this.lineTypes)}_typeLabel(e){if(this.lineTypeLabels[e])return this.lineTypeLabels[e];switch(e){case`value`:return(0,s.msg)(`Value`,{id:`item-option-guidelines-type-value`,desc:`Guideline type: manual numeric value`});case`average`:return(0,s.msg)(`Average`,{id:`item-option-guidelines-type-average`,desc:`Guideline type: average of the plotted data`});case`median`:return(0,s.msg)(`Median`,{id:`item-option-guidelines-type-median`,desc:`Guideline type: median of the plotted data`});case`average open`:return(0,s.msg)(`Average open`,{id:`item-option-guidelines-type-average-open`,desc:`Guideline type: average of open values`});case`average close`:return(0,s.msg)(`Average close`,{id:`item-option-guidelines-type-average-close`,desc:`Guideline type: average of close values`})}}_typeValues(){return Object.fromEntries(this._allowedTypes().map(e=>[e,this._typeLabel(e)]))}_widthValues(){return{1:(0,s.msg)(`Thin`,{id:`item-option-guidelines-width-thin`,desc:`Guideline width: thin`}),2:(0,s.msg)(`Medium`,{id:`item-option-guidelines-width-medium`,desc:`Guideline width: medium`}),3:(0,s.msg)(`Thick`,{id:`item-option-guidelines-width-thick`,desc:`Guideline width: thick`})}}_styleOptions(){return[{key:`0`,icon:i.luzmoBorderSolid,label:(0,s.msg)(`Solid`,{id:`item-option-guidelines-style-solid`,desc:`Guideline line style: solid`})},{key:`1,2`,icon:i.luzmoBorderDotted,label:(0,s.msg)(`Dotted`,{id:`item-option-guidelines-style-dotted`,desc:`Guideline line style: dotted`})},{key:`3,3`,icon:i.luzmoBorderDashed,label:(0,s.msg)(`Dashed`,{id:`item-option-guidelines-style-dashed`,desc:`Guideline line style: dashed`})}]}_handleAdd(){this.disabled||(this._lineIds=[...this._lineIds,this._createLineId()],this._commit(C(this._guidelines,this.lineTypes,this.defaultColor),!0))}_handleRemove(e){this.disabled||!this._guidelines||(this._lineIds=this._lineIds.filter((t,n)=>n!==e),this._commit(w(this._guidelines,e),!0))}_handleTypeChange(e,t){this.disabled||!this._guidelines||!h(t.detail)||this._commit(T(this._guidelines,e,t.detail),!0)}_handleColorChange(e,t){if(this.disabled||!this._guidelines)return;let n=t.target.color;typeof n==`string`&&this._commit(E(this._guidelines,e,n))}_handleValueChange(e,t){if(this.disabled||!this._guidelines)return;let n=t.target.value;typeof n!=`number`||!Number.isFinite(n)||this._commit(D(this._guidelines,e,n))}_handleStyleChange(e){if(this.disabled||!this._guidelines)return;let t=e.target.selected?.[0];(t===`0`||t===`1,2`||t===`3,3`)&&this._commit(O(this._guidelines,t),!0)}_handleWidthChange(e){if(this.disabled||!this._guidelines)return;let t=e.detail,n=e.target.value,r=t===`1`||t===`2`||t===`3`?t:n;(r===`1`||r===`2`||r===`3`)&&this._commit(k(this._guidelines,r),!0)}_lineKey(e){return this._lineIds[e]}_renderLine(e,t){let n=t+1,r=(0,s.msg)(s.str`Guideline ${n} color`,{id:`item-option-guidelines-color`,desc:`Accessible name for one guideline color picker`}),o=(0,s.msg)(s.str`Guideline ${n} type`,{id:`item-option-guidelines-type`,desc:`Accessible name for one guideline type picker`}),c=(0,s.msg)(s.str`Guideline ${n} value`,{id:`item-option-guidelines-value`,desc:`Accessible name for one manual guideline value`}),l=(0,s.msg)(s.str`Remove guideline ${n}`,{id:`item-option-guidelines-remove`,desc:`Aria label for removing one guideline row`});return a.html`
+      <div class="guideline-row">
+        <luzmo-color-picker
+          class="guideline-color"
+          .color=${e.color}
+          .size=${this.size}
+          rounding="full"
+          shape="circle"
+          .label=${r}
+          ?disabled=${this.disabled}
+          @change=${e=>this._handleColorChange(t,e)}
+        ></luzmo-color-picker>
+        <luzmo-picker
+          class="guideline-type"
+          .label=${o}
+          .value=${e.type}
+          .size=${this.size}
+          variant="highlight"
+          ?disabled=${this.disabled}
+          @change=${e=>this._handleTypeChange(t,e)}
+        >
+          ${Object.entries(this._typeValues()).map(([e,t])=>a.html`
+              <luzmo-menu-item value=${e}>${t}</luzmo-menu-item>
+            `)}
+        </luzmo-picker>
+        ${e.type===`value`?a.html`
+                <luzmo-number-field
+                  class="guideline-value"
+                  .value=${e.value??0}
+                  .size=${this.size}
+                  .step=${N}
+                  .formatOptions=${P}
+                  .label=${c}
+                  ?disabled=${this.disabled}
+                  @change=${e=>this._handleValueChange(t,e)}
+                ></luzmo-number-field>
+              `:a.html`
+                <div class="guideline-value-spacer"></div>
+              `}
+        <luzmo-action-button
+          class="guideline-remove"
+          quiet
+          .size=${this.size}
+          .label=${l}
+          ?disabled=${this.disabled}
+          @click=${()=>this._handleRemove(t)}
+        >
+          <luzmo-icon slot="icon" .size=${this.size} .icon=${i.luzmoTrashOutline}></luzmo-icon>
+        </luzmo-action-button>
+      </div>
+    `}_renderSharedStyle(e){return a.html`
+      <div class="guideline-shared">
+        <div class="guideline-shared-row">
+          <span class="guideline-shared-label" id=${this._styleLabelId}>
+            ${(0,s.msg)(`Style`,{id:`item-option-guidelines-style-label`,desc:`Label for shared guideline dash style`})}
+          </span>
+          <luzmo-action-group
+            class="guideline-style"
+            compact
+            quiet
+            emphasized
+            selects="single"
+            .size=${this.size}
+            .selected=${[e.style.type]}
+            aria-labelledby=${this._styleLabelId}
+            ?disabled=${this.disabled}
+            @change=${this._handleStyleChange}
+          >
+            ${this._styleOptions().map(e=>a.html`
+                <luzmo-action-button value=${e.key} ?disabled=${this.disabled} .label=${e.label}>
+                  <luzmo-icon slot="icon" .size=${this.size} .icon=${e.icon}></luzmo-icon>
+                </luzmo-action-button>
+              `)}
+          </luzmo-action-group>
+        </div>
+        <div class="guideline-shared-row">
+          <span class="guideline-shared-label" id=${this._widthLabelId}>
+            ${(0,s.msg)(`Width`,{id:`item-option-guidelines-width-label`,desc:`Label for shared guideline width`})}
+          </span>
+          <luzmo-picker
+            class="guideline-width"
+            aria-labelledby=${this._widthLabelId}
+            .value=${e.style.width}
+            .size=${this.size}
+            variant="highlight"
+            ?disabled=${this.disabled}
+            @change=${this._handleWidthChange}
+          >
+            ${Object.entries(this._widthValues()).map(([e,t])=>a.html`
+                <luzmo-menu-item value=${e}>${t}</luzmo-menu-item>
+              `)}
+          </luzmo-picker>
+        </div>
+      </div>
+    `}renderController(){let e=this._guidelines?.lines??[];return a.html`
+      <div id="luzmo-item-option-control" class="guidelines" role="group" aria-label=${this.label||(0,s.msg)(`Guidelines`,{id:`item-option-guidelines-group`,desc:`Accessible name for the guidelines editor`})}>
+        ${e.length>0?a.html`
+                <div class="guideline-rows">
+                  ${(0,c.repeat)(e,(e,t)=>this._lineKey(t),(e,t)=>this._renderLine(e,t))}
+                </div>
+              `:a.nothing}
+        <div class="guidelines-add">
+          <luzmo-button
+            class="add-guideline"
+            treatment="outline"
+            .size=${this.size}
+            ?disabled=${this.disabled}
+            @click=${this._handleAdd}
+          >
+            <luzmo-icon slot="icon" .icon=${i.luzmoPlus} .size=${this.size}></luzmo-icon>
+            ${(0,s.msg)(`Add guideline`,{id:`item-option-guidelines-add`,desc:`Button that adds a chart guideline`})}
+          </luzmo-button>
+        </div>
+        ${this._guidelines&&e.length>0?this._renderSharedStyle(this._guidelines):a.nothing}
+      </div>
+    `}};e.t([(0,o.property)({attribute:!1})],I.prototype,`value`,void 0),e.t([(0,o.property)({attribute:!1})],I.prototype,`lineTypes`,void 0),e.t([(0,o.property)({attribute:!1})],I.prototype,`lineTypeLabels`,void 0),e.t([(0,o.property)({type:String,reflect:!0,attribute:`default-color`})],I.prototype,`defaultColor`,void 0),e.t([(0,o.property)({type:Number,reflect:!0})],I.prototype,`debounce`,void 0),e.t([(0,o.state)()],I.prototype,`_guidelines`,void 0),I=e.t([(0,s.localized)()],I),typeof customElements<`u`&&!customElements.get(`luzmo-item-option-guidelines`)&&customElements.define(`luzmo-item-option-guidelines`,I),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return I}});

package/components/item-option-multi-language-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-multi-language-field-C75Hd2fG.cjs");exports.LuzmoItemOptionMultiLangField=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-multi-language-field-Du609wC_.cjs");exports.LuzmoItemOptionMultiLangField=e.t;

package/components/item-option-multi-language-field/index.js

@@ -17,12 +17,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-// Auto-generated initialization code
-(function() {
-	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-		let e = document.createElement("style");
-		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-multi-language-field-S6Mt3k23.js";
+import { t as e } from "../item-option-multi-language-field-BFgbOzMM.js";
 export { e as LuzmoItemOptionMultiLangField };