@luzmo/analytics-components-kit 1.1.1 → 1.3.0

package/components/item-option-color-range-Dt7Bv06p.js

@@ -1,217 +0,0 @@
-/*! * 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-6HmQYnEP.js";
-import { t as e } from "./decorate-B2TzfnLZ.js";
-import { t } from "./color-CQcCK-_O.js";
-import { t as n } from "./item-option-base-BfHciede.js";
-import { t as r } from "./superPropGet-CUPN9Fvv.js";
-import { luzmoTrashOutline as i } from "@luzmo/icons";
-import "@luzmo/lucero/action-button";
-import "@luzmo/lucero/icon";
-import { html as a, unsafeCSS as o } from "lit";
-import { property as s, queryAll as c, state as l } from "lit/decorators.js";
-import { msg as u } from "@lit/localize";
-import "@luzmo/lucero/number-field";
-import "@luzmo/lucero/text-field";
-import "@luzmo/lucero/color-picker";
-import "@luzmo/lucero/color-field";
-// src/utils/color/extrapolate-color.ts
-var d = (e, n = .1) => {
-	if (e.length < 2) return "#AAAAAA";
-	let r = e.length, i = new t(e[r - 2]).to("oklab"), a = new t(e[r - 1]).to("oklab"), o = i.coords[0], s = a.coords[0], c = Math.min(1, Math.max(0, s + (s > o ? 1 : -1) * n));
-	return new t("oklab", [
-		c,
-		a.coords[1],
-		a.coords[2]
-	], a.alpha).to("srgb").toString({
-		format: "hex",
-		precision: 0
-	});
-}, f = ":host{--luzmo-swatch-size:14px}.luzmo-item-option{align-items:start;height:-moz-fit-content;height:fit-content}.control-container{flex-grow:1;align-items:start}.color-range-line{align-items:center;display:flex}luzmo-color-field,luzmo-number-field{flex-grow:1}.color-range-lines-container,.color-range-lines{gap:var(--luzmo-item-option-color-range-ranges-gap,var(--color-ranges-gap));flex-direction:column;flex-grow:1;display:flex}.color-range-lines{width:100%}.extra-label{height:var(--item-option-component-height);align-items:center;display:flex}.color-range-percentage-value{padding-inline-start:var(--luzmo-item-option-color-range-color-swatch-to-percentage,var(--color-swatch-to-percentage));padding-inline-end:var(--luzmo-item-option-color-range-percentage-to-input-field,var(--percentage-to-input-field))}luzmo-color-picker{position:relative}luzmo-color-picker:not(:has(+.color-range-percentage-value)){padding-inline-end:var(--luzmo-item-option-color-range-color-swatch-to-input-field,var(--color-swatch-to-input-field))}luzmo-number-field:has(+luzmo-action-button){padding-inline-end:var(--luzmo-item-option-color-range-input-field-to-button,var(--input-field-to-button))}luzmo-color-field:has(+luzmo-action-button){padding-inline-end:var(--luzmo-item-option-color-range-input-field-to-button,var(--input-field-to-button))}luzmo-color-picker:before{box-sizing:border-box;content:\"\";top:var(--color-range-connector-top);left:var(--color-range-connector-left);height:var(--color-range-connector-height);width:var(--color-range-connector-width);background:var(--range-color);border:var(--luzmo-item-option-color-range-connector-border-width,var(--luzmo-border-width)) solid var(--luzmo-item-option-color-range-connector-border-color,var(--luzmo-border-color));z-index:-1;border-top:0;border-bottom:0;position:absolute}:host([reverse]) luzmo-color-picker:before{top:var(--color-range-reverse-connector-top)}.color-range-lines:not(.edit-range-size) .color-range-line:last-child luzmo-color-picker:before{display:none}.color-range-add-value-container{height:var(--color-range-input-field-height);justify-content:start;align-items:center;display:flex}.color-range-add-value{box-sizing:border-box;width:var(--luzmo-item-option-color-range-add-value-width,var(--luzmo-swatch-size));height:var(--luzmo-item-option-color-range-add-value-height,var(--luzmo-swatch-size));border-width:var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-item-option-color-range-add-value-border-color,var(--luzmo-primary));border-radius:var(--luzmo-item-option-color-range-add-value-border-radius,50%);background-color:var(--luzmo-item-option-color-range-add-value-background-color,var(--luzmo-background-color));cursor:pointer;color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));justify-content:center;align-items:center;display:flex;position:relative}.color-range-add-value .plus-sign{width:100%;height:100%;position:absolute;top:0;left:0}.color-range-add-value .plus-sign:before{content:\" \";background-color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));height:var(--add-color-range-plus-size);width:var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width));top:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--add-color-range-plus-size)) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));left:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width))) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));z-index:1;display:block;position:absolute}.color-range-add-value .plus-sign:after{content:\" \";background-color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));width:var(--add-color-range-plus-size);height:var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width));left:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--add-color-range-plus-size)) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));top:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width))) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));z-index:1;display:block;position:absolute}.color-range-add-value:hover{background-color:var(--luzmo-item-option-color-range-add-value-background-color-hover,var(--luzmo-background-color-hover));color:var(--luzmo-item-option-color-range-add-value-color-hover,var(--luzmo-primary-hover))}.color-range-add-value[focused]{background-color:var(--luzmo-item-option-color-range-add-value-background-color-focus,var(--luzmo-background-color-focus));color:var(--luzmo-item-option-color-range-add-value-color-focus,var(--luzmo-primary-focus));outline:none}.color-range-add-value:focus-visible{background-color:var(--luzmo-item-option-color-range-add-value-background-color-focus,var(--luzmo-background-color-focus));color:var(--luzmo-item-option-color-range-add-value-color-focus,var(--luzmo-primary-focus));outline:none}.color-range-add-value[focused]:after{content:\"\";inset:calc(var(--luzmo-item-option-color-range-add-value-focus-indicator-gap,var(--add-value-focus-indicator-gap)) * -2);background-color:var(--luzmo-item-option-color-range-add-value-focus-indicator-background-color,var(--luzmo-background-color));border-width:var(--luzmo-item-option-color-range-add-value-focus-indicator-width,var(--add-value-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--luzmo-item-option-color-range-add-value-focus-indicator-color,var(--add-value-focus-indicator-color)));border-radius:var(--luzmo-item-option-color-range-add-value-focus-indicator-border-radius,var(--add-value-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;z-index:-1;position:absolute}.color-range-add-value:focus-visible:after{content:\"\";inset:calc(var(--luzmo-item-option-color-range-add-value-focus-indicator-gap,var(--add-value-focus-indicator-gap)) * -2);background-color:var(--luzmo-item-option-color-range-add-value-focus-indicator-background-color,var(--luzmo-background-color));border-width:var(--luzmo-item-option-color-range-add-value-focus-indicator-width,var(--add-value-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--luzmo-item-option-color-range-add-value-focus-indicator-color,var(--add-value-focus-indicator-color)));border-radius:var(--luzmo-item-option-color-range-add-value-focus-indicator-border-radius,var(--add-value-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;z-index:-1;position:absolute}:host{--luzmo-swatch-size:var(--color-range-swatch-size);--color-range-swatch-size:16px;--color-ranges-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--color-range-connector-width:.25rem;--color-range-connector-height:calc(var(--color-range-input-field-height) + var(--color-ranges-gap) - var(--color-range-swatch-size) + var(--color-range-connector-width));--color-range-connector-top:calc(var(--color-range-swatch-size) - (var(--color-range-connector-width) / 2));--color-range-reverse-connector-top:calc(-1 * var(--color-range-connector-height) + (var(--color-range-connector-width) / 2));--color-range-connector-left:calc((var(--color-range-swatch-size) - var(--color-range-connector-width)) / 2);--color-range-input-field-height:var(--luzmo-component-height);--add-color-range-size:var(--color-range-swatch-size);--add-color-range-plus-size:8px;--add-color-range-plus-sign-border-width:2px;--add-value-focus-indicator-border-radius:50%;--add-value-focus-indicator-gap:3px;--add-value-focus-indicator-width:1px;--add-value-focus-indicator-color:var(--luzmo-primary);--color-swatch-to-percentage:var(--luzmo-spacing-4);--color-swatch-to-input-field:var(--luzmo-spacing-4);--percentage-to-input-field:var(--luzmo-spacing-4);--input-field-to-button:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=s]){--color-range-swatch-size:14px;--color-range-input-field-height:var(--luzmo-component-height-s);--color-ranges-gap:var(--luzmo-spacing-2);--add-color-range-plus-size:6px;--add-color-range-plus-sign-border-width:2px;--color-swatch-to-percentage:var(--luzmo-spacing-3);--color-swatch-to-input-field:var(--luzmo-spacing-3);--percentage-to-input-field:var(--luzmo-spacing-3);--input-field-to-button:var(--luzmo-spacing-2)}:host([size=l]){--color-range-swatch-size:18px;--color-range-input-field-height:var(--luzmo-component-height-l);--color-ranges-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--add-color-range-plus-size:10px;--color-swatch-to-percentage:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--color-swatch-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--percentage-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--input-field-to-button:var(--luzmo-spacing-3)}:host([size=xl]){--color-range-swatch-size:20px;--color-range-input-field-height:var(--luzmo-component-height-xl);--color-ranges-gap:var(--luzmo-spacing-3);--add-color-range-plus-size:10px;--color-swatch-to-percentage:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--color-swatch-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--percentage-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--input-field-to-button:var(--luzmo-spacing-4)}", p, m = class extends n {
-	constructor(...e) {
-		super(...e), this.disabled = !1, this.percentage = !1, this.noAlphaChannel = !1, this.editRangeSize = !1, this.noValues = !1, this.minimumRangeSize = 2, this.negativeInfinityValue = !1, this.readOnlyColorPicker = !1, this.reverse = !1, this.debounce = 100, this._ranges = [];
-	}
-	willUpdate(e) {
-		super.willUpdate(e), e.has("value") && (this._ranges = typeof this.parseValue == "function" ? this.parseValue(this.value ?? this.default ?? []) : this.value ?? this.default ?? []), this.negativeInfinityValue && (this._ranges = [{
-			color: this._ranges[0].color,
-			value: -Infinity
-		}, ...this._ranges.slice(1)]);
-	}
-	_handleChangeEvent() {
-		this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(() => {
-			this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
-				bubbles: !0,
-				composed: !0,
-				cancelable: !0,
-				detail: { value: typeof this.toValue == "function" ? this.toValue(this._ranges) : this._ranges }
-			}));
-		}, this.debounce ?? 200);
-	}
-	_getIndex(e) {
-		let t = [...this.colorRangeLines].indexOf((e?.target)?.closest(".color-range-line"));
-		return this.reverse && (t = (this._ranges?.length ?? 0) - 1 - t), t;
-	}
-	_extrapolateNewValue(e) {
-		if (e.length < 2) return 0;
-		let t = e.at(-1), n = e.at(-2), r = (t ?? 0) - (n ?? 0);
-		return (t ?? 0) + r;
-	}
-	_setColor(e) {
-		let t = this._getIndex(e), n = e.target.color ?? e.target.value;
-		this._ranges?.[t] && (this._ranges[t].color = String(n)), this._ranges = structuredClone(this._ranges), this._handleChangeEvent();
-	}
-	_setNumber(e) {
-		let t = this._getIndex(e), n = e.target.value;
-		this._ranges?.[t] && (this._ranges[t].value = n), this._ranges = structuredClone(this._ranges.sort((e, t) => (e?.value ?? 0) - (t?.value ?? 0))), this._handleChangeEvent();
-	}
-	_removeRangeValue(e) {
-		let t = this._getIndex(e);
-		this._ranges?.splice(t, 1), this._ranges = structuredClone(this._ranges), this._handleChangeEvent();
-	}
-	_addRangeValue() {
-		let e = d(this._ranges?.map((e) => e.color) ?? []), t = this._extrapolateNewValue(this._ranges?.map((e) => e.value ?? 0) ?? []);
-		this._ranges?.push({
-			color: e,
-			value: t
-		}), this._ranges = structuredClone(this._ranges), this._handleChangeEvent();
-	}
-	renderRangeValues() {
-		let e = (e, t, n, r) => a`
-        <div class="color-range-line" style="--range-color: ${e}">
-          <luzmo-color-picker
-            .color=${e}
-            .debounce=${this.debounce}
-            ?disabled=${this.disabled}
-            ?no-alpha-channel=${this.noAlphaChannel}
-            ?read-only=${this.readOnlyColorPicker}
-            @change=${this._setColor}
-          ></luzmo-color-picker>
-          ${this.percentage ? a`
-                  <div class="color-range-percentage-value">%</div>
-                ` : a`
-                  
-                `}
-          ${this.noValues ? a` <luzmo-color-field
-                .value=${e}
-                .size=${this.size}
-                .debounce=${this.debounce}
-                ?no-alpha-channel=${this.noAlphaChannel}
-                ?disabled=${this.disabled}
-                @change=${this._setColor}
-              ></luzmo-color-field>` : n ? a` <luzmo-text-field
-                  .value=${"< " + (r ?? 0)}
-                  .size=${this.size}
-                  readonly
-                ></luzmo-text-field>` : a` <luzmo-number-field
-                  .value=${t ?? 0}
-                  .size=${this.size}
-                  .debounce=${this.debounce}
-                  ?disabled=${this.disabled}
-                  @change=${this._setNumber}
-                ></luzmo-number-field>`}
-          ${this.editRangeSize && !this.disabled && !n && (this._ranges?.length ?? 0) > this.minimumRangeSize ? a`<luzmo-action-button
-                quiet
-                .size=${this.size}
-                .label=${u("Remove color stop", { desc: "Aria label for remove color stop button" })}
-                @click=${this._removeRangeValue}
-              >
-                <luzmo-icon
-                  slot="icon"
-                  .size=${this.size}
-                  .icon=${i}
-                ></luzmo-icon>
-              </luzmo-action-button>` : a`
-                  
-                `}
-        </div>
-      `, t = this._ranges ?? this.default ?? [];
-		this.reverse && (t = [...t].reverse());
-		let n = t.map(({ color: n, value: r }, i) => e(n, r, i === 0 && this.negativeInfinityValue, i === 0 && this.negativeInfinityValue ? t[1]?.value : void 0));
-		return a`
-      <div id="luzmo-item-option-control" class="color-range-lines-container" role="group" aria-label=${this.label || u("Color range", { desc: "Accessible label for color range control" })}>
-        ${this.editRangeSize && !this.disabled && this.reverse ? a`<div class="color-range-add-value-container">
-              <button
-                class="color-range-add-value"
-                aria-label=${u("Add color stop", { desc: "Aria label for add color stop button" })}
-                @click=${this._addRangeValue}
-              >
-                <div class="plus-sign"></div>
-              </button>
-            </div>` : a`
-                
-              `}
-        <div
-          class="color-range-lines ${this.editRangeSize && !this.disabled ? "edit-range-size" : ""}"
-        >
-          ${n}
-        </div>
-        ${this.editRangeSize && !this.disabled && !this.reverse ? a`<div class="color-range-add-value-container">
-              <button
-                class="color-range-add-value"
-                aria-label=${u("Add color stop", { desc: "Aria label for add color stop button" })}
-                @click=${this._addRangeValue}
-              >
-                <div class="plus-sign"></div>
-              </button>
-            </div>` : a`
-                
-              `}
-      </div>
-    `;
-	}
-	renderController() {
-		return this.renderRangeValues();
-	}
-};
-// src/components/item-option-color-range/index.ts
-p = m, p.styles = [r(p, "styles", p), o(f)], e([s({
-	type: Array,
-	reflect: !0
-})], m.prototype, "value", void 0), e([s({
-	type: Array,
-	reflect: !0
-})], m.prototype, "default", void 0), e([s({
-	type: Boolean,
-	reflect: !0
-})], m.prototype, "disabled", void 0), e([s({ type: Boolean })], m.prototype, "percentage", void 0), e([s({
-	type: Boolean,
-	attribute: "no-alpha-channel"
-})], m.prototype, "noAlphaChannel", void 0), e([s({
-	type: Boolean,
-	attribute: "edit-range-size"
-})], m.prototype, "editRangeSize", void 0), e([s({
-	type: Boolean,
-	attribute: "no-values"
-})], m.prototype, "noValues", void 0), e([s({
-	type: Number,
-	reflect: !0,
-	attribute: "minimum-range-size"
-})], m.prototype, "minimumRangeSize", void 0), e([s({
-	type: Boolean,
-	reflect: !0,
-	attribute: "negative-infinity-value"
-})], m.prototype, "negativeInfinityValue", void 0), e([s({
-	type: Boolean,
-	attribute: "read-only-color-picker"
-})], m.prototype, "readOnlyColorPicker", void 0), e([s({ type: Boolean })], m.prototype, "reverse", void 0), e([s({
-	type: Number,
-	reflect: !0
-})], m.prototype, "debounce", void 0), e([s()], m.prototype, "parseValue", void 0), e([s()], m.prototype, "toValue", void 0), e([c(".color-range-line")], m.prototype, "colorRangeLines", void 0), e([l()], m.prototype, "_ranges", void 0), customElements.get("luzmo-item-option-color-range") || customElements.define("luzmo-item-option-color-range", m);
-export { m as t };

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

@@ -1,135 +0,0 @@
-/*! * 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-CGDNY_7v.cjs");const e=require("./decorate-DCJt-2rt.cjs"),t=require("./localized-mixin-EoNvtTBG.cjs"),n=require("./types-pVa6ut_v.cjs"),r=require("./item-option-base-BMy6dWbc.cjs");let i=require("@luzmo/icons");require("@luzmo/lucero/action-button"),require("@luzmo/lucero/button"),require("@luzmo/lucero/icon");let a=require("lit"),o=require("lit/decorators.js"),s=require("@lit/localize"),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}}))};this._clearDebounce(),t||this.debounce<=0?n():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??[],t=this.label||(0,s.msg)(`Guidelines`,{id:`item-option-guidelines-group`,desc:`Accessible name for the guidelines editor`});return a.html`
-      <div id="luzmo-item-option-control" class="guidelines" role="group" aria-label=${t}>
-        ${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-slider-Bo5vs6nr.js

@@ -1,89 +0,0 @@
-/*! * 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-6HmQYnEP.js";
-import { t as e } from "./decorate-B2TzfnLZ.js";
-import { t } from "./item-option-base-BfHciede.js";
-import { html as n, unsafeCSS as r } from "lit";
-import { property as i, query as a } from "lit/decorators.js";
-import "@luzmo/lucero/slider";
-// src/components/item-option-slider/item-option-slider.module.scss?inline
-var o = ":host{overflow:visible}luzmo-slider{contain:layout}", s = class extends t {
-	constructor(...e) {
-		super(...e), this.value = 0, this.default = 0, this.min = 0, this.max = 100, this.step = 100, this.debounce = 200, this._debounceTimeout = null;
-	}
-	static get styles() {
-		return [...super.styles, r(o)];
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this._debounceTimeout &&= (clearTimeout(this._debounceTimeout), null);
-	}
-	_emitOptionChanged(e) {
-		this._lastEmittedSliderValue = e, this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
-			bubbles: !0,
-			composed: !0,
-			cancelable: !0,
-			detail: { value: typeof this.toValue == "function" ? this.toValue(e) : e }
-		}));
-	}
-	_handleEvent(e) {
-		let t = this._slider.value;
-		(e.type !== "change" || this._debounceTimeout || !Object.is(t, this._lastEmittedSliderValue)) && (this._debounceTimeout &&= (clearTimeout(this._debounceTimeout), null), this.debounce > 0 ? this._debounceTimeout = setTimeout(() => {
-			this._debounceTimeout = null, this._emitOptionChanged(t);
-		}, this.debounce) : this._emitOptionChanged(t));
-	}
-	renderController() {
-		let e = typeof this.parseValue == "function" ? this.parseValue(this.value) : this.value, t = typeof this.parseValue == "function" ? this.parseValue(this.default) : this.default;
-		return n`
-      <luzmo-slider
-        id="luzmo-item-option-control"
-        .label=${this.label}
-        .min=${this.min}
-        .max=${this.max}
-        .value=${e ?? t}
-        .step=${this.step}
-        .size=${this.size}
-        .disabled=${this.disabled}
-        @input=${this._handleEvent}
-        @change=${this._handleEvent}
-      ></luzmo-slider>
-    `;
-	}
-};
-// src/components/item-option-slider/index.ts
-e([i({
-	type: Number,
-	reflect: !0
-})], s.prototype, "value", void 0), e([i({
-	type: Number,
-	reflect: !0
-})], s.prototype, "default", void 0), e([i({
-	type: Number,
-	reflect: !0
-})], s.prototype, "min", void 0), e([i({
-	type: Number,
-	reflect: !0
-})], s.prototype, "max", void 0), e([i({
-	type: Number,
-	reflect: !0
-})], s.prototype, "step", void 0), e([i({
-	type: Number,
-	reflect: !0
-})], s.prototype, "debounce", void 0), e([i()], s.prototype, "parseValue", void 0), e([i()], s.prototype, "toValue", void 0), e([a("luzmo-slider")], s.prototype, "_slider", void 0), customElements.get("luzmo-item-option-slider") || customElements.define("luzmo-item-option-slider", s);
-export { s as t };

package/components/item-option-slider-CyWKWr5D.cjs

@@ -1,33 +0,0 @@
-/*! * 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");const e=require("./decorate-DCJt-2rt.cjs"),t=require("./item-option-base-BMy6dWbc.cjs");let n=require("lit"),r=require("lit/decorators.js");require("@luzmo/lucero/slider");var i=`:host{overflow:visible}luzmo-slider{contain:layout}`,a=class extends t.t{constructor(...e){super(...e),this.value=0,this.default=0,this.min=0,this.max=100,this.step=100,this.debounce=200,this._debounceTimeout=null}static get styles(){return[...super.styles,(0,n.unsafeCSS)(i)]}disconnectedCallback(){super.disconnectedCallback(),this._debounceTimeout&&=(clearTimeout(this._debounceTimeout),null)}_emitOptionChanged(e){this._lastEmittedSliderValue=e,this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue==`function`?this.toValue(e):e}}))}_handleEvent(e){let t=this._slider.value;(e.type!==`change`||this._debounceTimeout||!Object.is(t,this._lastEmittedSliderValue))&&(this._debounceTimeout&&=(clearTimeout(this._debounceTimeout),null),this.debounce>0?this._debounceTimeout=setTimeout(()=>{this._debounceTimeout=null,this._emitOptionChanged(t)},this.debounce):this._emitOptionChanged(t))}renderController(){let e=typeof this.parseValue==`function`?this.parseValue(this.value):this.value,t=typeof this.parseValue==`function`?this.parseValue(this.default):this.default;return n.html`
-      <luzmo-slider
-        id="luzmo-item-option-control"
-        .label=${this.label}
-        .min=${this.min}
-        .max=${this.max}
-        .value=${e??t}
-        .step=${this.step}
-        .size=${this.size}
-        .disabled=${this.disabled}
-        @input=${this._handleEvent}
-        @change=${this._handleEvent}
-      ></luzmo-slider>
-    `}};e.t([(0,r.property)({type:Number,reflect:!0})],a.prototype,`value`,void 0),e.t([(0,r.property)({type:Number,reflect:!0})],a.prototype,`default`,void 0),e.t([(0,r.property)({type:Number,reflect:!0})],a.prototype,`min`,void 0),e.t([(0,r.property)({type:Number,reflect:!0})],a.prototype,`max`,void 0),e.t([(0,r.property)({type:Number,reflect:!0})],a.prototype,`step`,void 0),e.t([(0,r.property)({type:Number,reflect:!0})],a.prototype,`debounce`,void 0),e.t([(0,r.property)()],a.prototype,`parseValue`,void 0),e.t([(0,r.property)()],a.prototype,`toValue`,void 0),e.t([(0,r.query)(`luzmo-slider`)],a.prototype,`_slider`,void 0),customElements.get(`luzmo-item-option-slider`)||customElements.define(`luzmo-item-option-slider`,a),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});