@luzmo/analytics-components-kit 1.0.2-beta.1 → 1.0.2

package/components/data-fields-select-CYx1nKai.js

@@ -0,0 +1,262 @@
+/*! * 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 { n as e, t } from "./localized-mixin-BE2uCT7h.js";
+import { t as n } from "./localize-DnUttQBk.js";
+import { n as r } from "./periods.const-As02qpnP.js";
+import { t as i } from "./calculate-data-field-icon-C76mBdj2.js";
+import { n as a, r as o } from "./convert-datasets-to-data-fields-CXQJagZL.js";
+import { luzmoFormula as s } from "@luzmo/icons";
+import { html as c, unsafeCSS as l } from "lit";
+import { property as u } from "lit/decorators.js";
+import { localized as d, msg as f } from "@lit/localize";
+import "@luzmo/lucero/select";
+import { ElementSizes as p, LuzmoElement as m, SizedMixin as h } from "@luzmo/lucero/utils";
+//#region src/components/data-fields-select/data-fields-select.module.scss?inline
+var g = ":host{font-family:var(--luzmo-font-family)}", _ = "::level::", v = (e, t) => `${e}${_}${t}`, y = (e) => {
+	let t = e.indexOf(_);
+	return t === -1 ? null : {
+		columnId: e.slice(0, t),
+		level: Number(e.slice(t + 9))
+	};
+}, b = class extends t(h(m, { validSizes: Object.values(p) })) {
+	constructor(...e) {
+		super(...e), this.contentLanguage = "en", this.icons = "menu-only", this.allowEmpty = !1, this.selects = "single", this.value = [], this.retrieving = !1, this.invalid = !1, this.clearable = !1, this.pending = !1, this.disabled = !1, this.search = "auto", this.placement = "bottom-start", this.datasetsDataFields = [], this._dataFieldsSelected = [];
+	}
+	static get styles() {
+		return [l(g)];
+	}
+	_isAdHocFormula(e) {
+		return "formula" in e && typeof e.formula == "string";
+	}
+	_sendChangeEvent() {
+		this.dispatchEvent(new CustomEvent("luzmo-data-fields-selected", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { dataFields: this._dataFieldsSelected }
+		}));
+	}
+	_toDataFieldData(e, t, n = !1) {
+		return n ? o(t, e, { includeHidden: !0 }) : a(t, e, { includeHidden: !0 });
+	}
+	_toAdHocFormulaFieldData(e, t) {
+		return {
+			datasetId: t,
+			formula: e.formula,
+			type: e.type,
+			name: e.label ?? { en: "Ad-hoc formula" },
+			subtype: e.subtype ?? void 0,
+			format: e.format
+		};
+	}
+	_findFormulaMatch(e, t, n) {
+		for (let r of e) if (this._isAdHocFormula(r)) {
+			if (r.formula === t) return this._toAdHocFormulaFieldData(r, n);
+		} else if (r.id === t) return this._toDataFieldData(r, n, !0);
+		return null;
+	}
+	_resolveDataFieldFromValue(e, t) {
+		let n = y(e), r = n ? n.columnId : e;
+		for (let i of t) {
+			let t = i.columns ?? [], a = i.formulas ?? [], o = t.find((e) => e.id === r);
+			if (o) {
+				let e = this._toDataFieldData(o, i.id, !1);
+				if (e && n && (e.level = n.level, this._isExpandableHierarchy(o))) {
+					let t = o.hierarchyLevels?.find((e) => e.level === n.level);
+					t && (e.name = t.name);
+				}
+				return e;
+			}
+			let s = this._findFormulaMatch(a, e, i.id);
+			if (s) return s;
+		}
+		return null;
+	}
+	setDataField(e) {
+		let t = e?.detail?.value ?? [];
+		this._dataFieldsSelected = [];
+		for (let e of t) {
+			let t = this._resolveDataFieldFromValue(e, this.datasetsDataFields);
+			t && this._dataFieldsSelected.push(t);
+		}
+		this.value = t, this._sendChangeEvent();
+	}
+	_findDataFieldsInDatasetsDataFields(e) {
+		this._dataFieldsSelected = [];
+		for (let t of e) {
+			let e = this._resolveDataFieldFromValue(t, this.datasetsDataFields);
+			e && this._dataFieldsSelected.push(e);
+		}
+	}
+	willUpdate(e) {
+		super.willUpdate(e);
+		let t = e.has("value"), n = e.has("datasetsDataFields");
+		if ((t || n) && (this._findDataFieldsInDatasetsDataFields(this.value), this._dataFieldsSelected.length === 0 && !this.allowEmpty && !this.retrieving)) {
+			for (let e of this.datasetsDataFields) if (e?.columns?.length > 0) {
+				let t = this._toDataFieldData(e.columns[0], e.id, !1);
+				this._dataFieldsSelected = t ? [t] : [];
+				break;
+			} else {
+				let t = e?.formulas?.find((e) => !this._isAdHocFormula(e));
+				if (t && !this._isAdHocFormula(t)) {
+					let n = this._toDataFieldData(t, e.id, !0);
+					this._dataFieldsSelected = n ? [n] : [];
+					break;
+				}
+			}
+			this.value = this._dataFieldsSelected.map((e) => {
+				if ("columnId" in e && e.columnId) return e.columnId;
+				if ("formulaId" in e && e.formulaId) return e.formulaId;
+				if ("formula" in e && e.formula) return e.formula;
+			}).filter((e) => typeof e == "string" && e.length > 0), this._sendChangeEvent();
+		}
+	}
+	_buildDatetimeChildren(e) {
+		let t = [], n = Math.min(Math.max(e.lowestLevel ?? 1, 1), r.length), i = Math.min(Math.max(e.highestLevel ?? 1, 1), r.length);
+		for (let a = i; a <= n; a++) t.push({
+			value: v(e.id, a),
+			label: r[a - 1]?.i18n() ?? ""
+		});
+		return t;
+	}
+	_buildHierarchyChildren(e) {
+		let t = [], r = e.hierarchyLevels ?? [];
+		for (let i of r) i.level < 1 || t.push({
+			value: v(e.id, i.level),
+			label: n(i.name ?? {}, this.contentLanguage) ?? ""
+		});
+		return t;
+	}
+	_isExpandableDatetime(e) {
+		let t = e.type;
+		return (t === "datetime" || t === "array[datetime]") && typeof e.lowestLevel == "number";
+	}
+	_isExpandableHierarchy(e) {
+		return Array.isArray(e.hierarchyLevels) && e.hierarchyLevels.length > 2 && e.hierarchy_enabled === !0;
+	}
+	render() {
+		let e = [], t = this.icons !== "none";
+		for (let r of this.datasetsDataFields ?? []) {
+			let a = r?.columns ?? [], o = r?.formulas ?? [];
+			for (let r of a) {
+				let a = {
+					value: r.id,
+					label: n(r?.name ?? {}, this.contentLanguage) ?? ""
+				};
+				t && (a.icon = i(r, this.size)), this._isExpandableDatetime(r) ? a.children = this._buildDatetimeChildren(r) : this._isExpandableHierarchy(r) && (a.children = this._buildHierarchyChildren(r)), e.push(a);
+			}
+			for (let r of o) if (this._isAdHocFormula(r)) {
+				let i = r.label ? n(r.label, this.contentLanguage) : f("Ad-hoc formula"), a = {
+					value: r.formula,
+					label: i ?? f("Ad-hoc formula")
+				};
+				t && (a.icon = s), e.push(a);
+			} else {
+				let a = {
+					value: r.id,
+					label: n(r?.name ?? {}, this.contentLanguage) ?? ""
+				};
+				t && (a.icon = i(r, this.size)), e.push(a);
+			}
+		}
+		let r = f("Select..."), a = this.pending ? "" : this.label || this.placeholder || r, o = this.pending || this.value.length === 0 ? [] : this.value, l = this.icons === "none" || this.icons === "menu-only" ? "none" : void 0;
+		return c`<luzmo-select
+        id="data-fields"
+        .size=${this.size}
+        .label=${a}
+        .pendingLabel=${this.label || this.placeholder || r}
+        .retrieving=${this.retrieving}
+        .icons=${l}
+        .selects=${this.selects}
+        .variant=${this.selects === "multiple" ? "checkmarks" : "highlight"}
+        .placement=${this.placement}
+        .search=${this.search}
+        emphasized
+        no-wrap
+        ?invalid=${this.invalid}
+        ?clearable=${this.clearable && this.allowEmpty}
+        ?pending=${this.pending}
+        ?disabled=${this.disabled}
+        .options=${e}
+        .value=${o}
+        @change=${this.setDataField}
+      >
+      </luzmo-select>`;
+	}
+};
+//#endregion
+//#region src/components/data-fields-select/index.ts
+e([u({
+	type: String,
+	attribute: "content-language",
+	reflect: !0
+})], b.prototype, "contentLanguage", void 0), e([u({
+	type: String,
+	reflect: !0
+})], b.prototype, "label", void 0), e([u({
+	type: String,
+	reflect: !0
+})], b.prototype, "icons", void 0), e([u({
+	type: Boolean,
+	attribute: "allow-empty",
+	reflect: !0
+})], b.prototype, "allowEmpty", void 0), e([u({
+	type: String,
+	attribute: "placeholder",
+	reflect: !0
+})], b.prototype, "placeholder", void 0), e([u({
+	type: String,
+	reflect: !0
+})], b.prototype, "selects", void 0), e([u({
+	type: Array,
+	reflect: !0
+})], b.prototype, "value", void 0), e([u({
+	type: Boolean,
+	attribute: "retrieving",
+	reflect: !0
+})], b.prototype, "retrieving", void 0), e([u({
+	type: Boolean,
+	attribute: "invalid",
+	reflect: !0
+})], b.prototype, "invalid", void 0), e([u({
+	type: Boolean,
+	attribute: "clearable",
+	reflect: !0
+})], b.prototype, "clearable", void 0), e([u({
+	type: Boolean,
+	attribute: "pending",
+	reflect: !0
+})], b.prototype, "pending", void 0), e([u({
+	type: Boolean,
+	attribute: "disabled",
+	reflect: !0
+})], b.prototype, "disabled", void 0), e([u({
+	type: String,
+	attribute: "search",
+	reflect: !0
+})], b.prototype, "search", void 0), e([u({
+	type: String,
+	reflect: !0
+})], b.prototype, "placement", void 0), e([u({
+	type: Array,
+	reflect: !1
+})], b.prototype, "datasetsDataFields", void 0), b = e([d()], b), customElements.get("luzmo-data-fields-select") || customElements.define("luzmo-data-fields-select", b);
+//#endregion
+export { b as t };

package/components/data-fields-select-D4NsYJvr.cjs

@@ -0,0 +1,41 @@
+/*! * 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(`./chunk-i8uDWG73.cjs`);const e=require(`./localized-mixin-BHSH5kux.cjs`),t=require(`./localize-ClZMnvqx.cjs`),n=require(`./periods.const-Ct5EKQ-g.cjs`),r=require(`./calculate-data-field-icon-Cagj4HZB.cjs`),i=require(`./convert-datasets-to-data-fields-DykHIeG7.cjs`);let a=require(`@luzmo/icons`),o=require(`lit`),s=require(`lit/decorators.js`),c=require(`@lit/localize`);require(`@luzmo/lucero/select`);let l=require(`@luzmo/lucero/utils`);var u=`:host{font-family:var(--luzmo-font-family)}`,d=`::level::`,f=(e,t)=>`${e}${d}${t}`,p=e=>{let t=e.indexOf(d);return t===-1?null:{columnId:e.slice(0,t),level:Number(e.slice(t+9))}},m=class extends e.t((0,l.SizedMixin)(l.LuzmoElement,{validSizes:Object.values(l.ElementSizes)})){constructor(...e){super(...e),this.contentLanguage=`en`,this.icons=`menu-only`,this.allowEmpty=!1,this.selects=`single`,this.value=[],this.retrieving=!1,this.invalid=!1,this.clearable=!1,this.pending=!1,this.disabled=!1,this.search=`auto`,this.placement=`bottom-start`,this.datasetsDataFields=[],this._dataFieldsSelected=[]}static get styles(){return[(0,o.unsafeCSS)(u)]}_isAdHocFormula(e){return`formula`in e&&typeof e.formula==`string`}_sendChangeEvent(){this.dispatchEvent(new CustomEvent(`luzmo-data-fields-selected`,{bubbles:!0,composed:!0,cancelable:!0,detail:{dataFields:this._dataFieldsSelected}}))}_toDataFieldData(e,t,n=!1){return n?i.r(t,e,{includeHidden:!0}):i.n(t,e,{includeHidden:!0})}_toAdHocFormulaFieldData(e,t){return{datasetId:t,formula:e.formula,type:e.type,name:e.label??{en:`Ad-hoc formula`},subtype:e.subtype??void 0,format:e.format}}_findFormulaMatch(e,t,n){for(let r of e)if(this._isAdHocFormula(r)){if(r.formula===t)return this._toAdHocFormulaFieldData(r,n)}else if(r.id===t)return this._toDataFieldData(r,n,!0);return null}_resolveDataFieldFromValue(e,t){let n=p(e),r=n?n.columnId:e;for(let i of t){let t=i.columns??[],a=i.formulas??[],o=t.find(e=>e.id===r);if(o){let e=this._toDataFieldData(o,i.id,!1);if(e&&n&&(e.level=n.level,this._isExpandableHierarchy(o))){let t=o.hierarchyLevels?.find(e=>e.level===n.level);t&&(e.name=t.name)}return e}let s=this._findFormulaMatch(a,e,i.id);if(s)return s}return null}setDataField(e){let t=e?.detail?.value??[];this._dataFieldsSelected=[];for(let e of t){let t=this._resolveDataFieldFromValue(e,this.datasetsDataFields);t&&this._dataFieldsSelected.push(t)}this.value=t,this._sendChangeEvent()}_findDataFieldsInDatasetsDataFields(e){this._dataFieldsSelected=[];for(let t of e){let e=this._resolveDataFieldFromValue(t,this.datasetsDataFields);e&&this._dataFieldsSelected.push(e)}}willUpdate(e){super.willUpdate(e);let t=e.has(`value`),n=e.has(`datasetsDataFields`);if((t||n)&&(this._findDataFieldsInDatasetsDataFields(this.value),this._dataFieldsSelected.length===0&&!this.allowEmpty&&!this.retrieving)){for(let e of this.datasetsDataFields)if(e?.columns?.length>0){let t=this._toDataFieldData(e.columns[0],e.id,!1);this._dataFieldsSelected=t?[t]:[];break}else{let t=e?.formulas?.find(e=>!this._isAdHocFormula(e));if(t&&!this._isAdHocFormula(t)){let n=this._toDataFieldData(t,e.id,!0);this._dataFieldsSelected=n?[n]:[];break}}this.value=this._dataFieldsSelected.map(e=>{if(`columnId`in e&&e.columnId)return e.columnId;if(`formulaId`in e&&e.formulaId)return e.formulaId;if(`formula`in e&&e.formula)return e.formula}).filter(e=>typeof e==`string`&&e.length>0),this._sendChangeEvent()}}_buildDatetimeChildren(e){let t=[],r=Math.min(Math.max(e.lowestLevel??1,1),n.n.length),i=Math.min(Math.max(e.highestLevel??1,1),n.n.length);for(let a=i;a<=r;a++)t.push({value:f(e.id,a),label:n.n[a-1]?.i18n()??``});return t}_buildHierarchyChildren(e){let n=[],r=e.hierarchyLevels??[];for(let i of r)i.level<1||n.push({value:f(e.id,i.level),label:t.t(i.name??{},this.contentLanguage)??``});return n}_isExpandableDatetime(e){let t=e.type;return(t===`datetime`||t===`array[datetime]`)&&typeof e.lowestLevel==`number`}_isExpandableHierarchy(e){return Array.isArray(e.hierarchyLevels)&&e.hierarchyLevels.length>2&&e.hierarchy_enabled===!0}render(){let e=[],n=this.icons!==`none`;for(let i of this.datasetsDataFields??[]){let o=i?.columns??[],s=i?.formulas??[];for(let i of o){let a={value:i.id,label:t.t(i?.name??{},this.contentLanguage)??``};n&&(a.icon=r.t(i,this.size)),this._isExpandableDatetime(i)?a.children=this._buildDatetimeChildren(i):this._isExpandableHierarchy(i)&&(a.children=this._buildHierarchyChildren(i)),e.push(a)}for(let i of s)if(this._isAdHocFormula(i)){let r=i.label?t.t(i.label,this.contentLanguage):(0,c.msg)(`Ad-hoc formula`),o={value:i.formula,label:r??(0,c.msg)(`Ad-hoc formula`)};n&&(o.icon=a.luzmoFormula),e.push(o)}else{let a={value:i.id,label:t.t(i?.name??{},this.contentLanguage)??``};n&&(a.icon=r.t(i,this.size)),e.push(a)}}let i=(0,c.msg)(`Select...`),s=this.pending?``:this.label||this.placeholder||i,l=this.pending||this.value.length===0?[]:this.value,u=this.icons===`none`||this.icons===`menu-only`?`none`:void 0;return o.html`<luzmo-select
+        id="data-fields"
+        .size=${this.size}
+        .label=${s}
+        .pendingLabel=${this.label||this.placeholder||i}
+        .retrieving=${this.retrieving}
+        .icons=${u}
+        .selects=${this.selects}
+        .variant=${this.selects===`multiple`?`checkmarks`:`highlight`}
+        .placement=${this.placement}
+        .search=${this.search}
+        emphasized
+        no-wrap
+        ?invalid=${this.invalid}
+        ?clearable=${this.clearable&&this.allowEmpty}
+        ?pending=${this.pending}
+        ?disabled=${this.disabled}
+        .options=${e}
+        .value=${l}
+        @change=${this.setDataField}
+      >
+      </luzmo-select>`}};e.n([(0,s.property)({type:String,attribute:`content-language`,reflect:!0})],m.prototype,`contentLanguage`,void 0),e.n([(0,s.property)({type:String,reflect:!0})],m.prototype,`label`,void 0),e.n([(0,s.property)({type:String,reflect:!0})],m.prototype,`icons`,void 0),e.n([(0,s.property)({type:Boolean,attribute:`allow-empty`,reflect:!0})],m.prototype,`allowEmpty`,void 0),e.n([(0,s.property)({type:String,attribute:`placeholder`,reflect:!0})],m.prototype,`placeholder`,void 0),e.n([(0,s.property)({type:String,reflect:!0})],m.prototype,`selects`,void 0),e.n([(0,s.property)({type:Array,reflect:!0})],m.prototype,`value`,void 0),e.n([(0,s.property)({type:Boolean,attribute:`retrieving`,reflect:!0})],m.prototype,`retrieving`,void 0),e.n([(0,s.property)({type:Boolean,attribute:`invalid`,reflect:!0})],m.prototype,`invalid`,void 0),e.n([(0,s.property)({type:Boolean,attribute:`clearable`,reflect:!0})],m.prototype,`clearable`,void 0),e.n([(0,s.property)({type:Boolean,attribute:`pending`,reflect:!0})],m.prototype,`pending`,void 0),e.n([(0,s.property)({type:Boolean,attribute:`disabled`,reflect:!0})],m.prototype,`disabled`,void 0),e.n([(0,s.property)({type:String,attribute:`search`,reflect:!0})],m.prototype,`search`,void 0),e.n([(0,s.property)({type:String,reflect:!0})],m.prototype,`placement`,void 0),e.n([(0,s.property)({type:Array,reflect:!1})],m.prototype,`datasetsDataFields`,void 0),m=e.n([(0,c.localized)()],m),customElements.get(`luzmo-data-fields-select`)||customElements.define(`luzmo-data-fields-select`,m),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return m}});

package/components/display-settings-binning-CaIao-s-.cjs

@@ -0,0 +1,56 @@
+/*! * 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.
+ * */
+const e=require(`./chunk-i8uDWG73.cjs`),t=require(`./base-B5o90RpS.cjs`),n=require(`./localized-mixin-BHSH5kux.cjs`);let r=require(`@luzmo/icons`),i=require(`lit`),a=require(`lit/decorators.js`),o=require(`@lit/localize`);require(`@luzmo/lucero/action-button`),require(`@luzmo/lucero/field-label`),require(`@luzmo/lucero/icon`),require(`@luzmo/lucero/number-field`);var s=`:host .settings-container{gap:var(--luzmo-display-settings-vertical-gap,var(--luzmo-spacing-2));flex-direction:column;display:flex}:host .settings-row{justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-binning-gap,var(--display-settings-binning-gap));display:flex}:host,:host([size=s]){--display-settings-binning-gap:var(--luzmo-spacing-3)}:host([size=l]){--display-settings-binning-gap:var(--luzmo-spacing-4)}:host([size=xl]){--display-settings-binning-gap:var(--luzmo-spacing-5)}`,c=class extends n.t(t.n(t.i,{validSizes:Object.values(t.t)})){constructor(...e){super(...e),this.slotContent={},this._enabled=!1,this._binWidth=10}static get styles(){return[(0,i.unsafeCSS)(s)]}willUpdate(e){super.willUpdate(e),e.has(`slotContent`)&&(this._enabled=this.slotContent?.bins?.enabled??!1,this._binWidth=this.slotContent?.bins?.number??10)}toggleBinning(){this._enabled=!this._enabled,this.sendEvent()}setBinning(){this._binWidth=this.binWidthElement.value,this.sendEvent()}sendEvent(){let e={enabled:!!this._enabled,number:this._binWidth??10};this.dispatchEvent(new CustomEvent(`luzmo-slot-content-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContent:{...this.slotContent,bins:e}}}))}renderBinWidth(){return i.html`<div class="setting">
+      <luzmo-field-label for="bin-width"
+        >${(0,o.msg)(`Bin width`,{desc:`The width of each bin in the histogram`})}</luzmo-field-label
+      >
+      <luzmo-number-field
+        id="bin-width"
+        min="0"
+        .value=${this._binWidth}
+        .size=${this.size}
+        @change=${this.setBinning}
+      ></luzmo-number-field>
+    </div>`}render(){return i.html`<div class="settings-container">
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-field-label for="binning"
+            >${(0,o.msg)(`Binning`,{desc:`Grouping numeric data into intervals or "bins" for analysis and visualization`})}</luzmo-field-label
+          >
+          <luzmo-action-button
+            id="binning"
+            toggles
+            emphasized
+            .size=${this.size}
+            ?selected=${this._enabled}
+            class=${this._enabled?`active`:`inactive`}
+            @click=${this.toggleBinning}
+          >
+            <luzmo-icon
+              slot="icon"
+              .size=${this.size}
+              .icon=${this._enabled?r.luzmoCheckboxChecked:r.luzmoCheckbox}
+            ></luzmo-icon>
+            ${this._enabled?(0,o.msg)(`Enabled`,{desc:`Option set to enabled`}):(0,o.msg)(`Disabled`,{desc:`Option set to disabled`})}
+          </luzmo-action-button>
+        </div>
+        ${this._enabled?this.renderBinWidth():``}
+      </div>
+    </div>`}};n.n([(0,a.property)()],c.prototype,`slotContent`,void 0),n.n([(0,a.state)()],c.prototype,`_enabled`,void 0),n.n([(0,a.query)(`#bin-width`)],c.prototype,`binWidthElement`,void 0),c=n.n([(0,o.localized)()],c);var l=e.n({LuzmoDisplaySettingsBinning:()=>c});customElements.get(`luzmo-display-settings-binning`)||customElements.define(`luzmo-display-settings-binning`,c),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});

package/components/display-settings-binning-vHleedf-.js

@@ -0,0 +1,112 @@
+/*! * 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 { n as e } from "./rolldown-runtime-Bk2QBDSK.js";
+import { i as t, n, t as r } from "./base-T2ZGUQze.js";
+import { n as i, t as a } from "./localized-mixin-BE2uCT7h.js";
+import { luzmoCheckbox as o, luzmoCheckboxChecked as s } from "@luzmo/icons";
+import { html as c, unsafeCSS as l } from "lit";
+import { property as u, query as d, state as f } from "lit/decorators.js";
+import { localized as p, msg as m } from "@lit/localize";
+import "@luzmo/lucero/action-button";
+import "@luzmo/lucero/field-label";
+import "@luzmo/lucero/icon";
+import "@luzmo/lucero/number-field";
+//#region src/components/display-settings-binning/display-settings-binning.module.scss?inline
+var h = ":host .settings-container{gap:var(--luzmo-display-settings-vertical-gap,var(--luzmo-spacing-2));flex-direction:column;display:flex}:host .settings-row{justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-binning-gap,var(--display-settings-binning-gap));display:flex}:host,:host([size=s]){--display-settings-binning-gap:var(--luzmo-spacing-3)}:host([size=l]){--display-settings-binning-gap:var(--luzmo-spacing-4)}:host([size=xl]){--display-settings-binning-gap:var(--luzmo-spacing-5)}", g = class extends a(n(t, { validSizes: Object.values(r) })) {
+	constructor(...e) {
+		super(...e), this.slotContent = {}, this._enabled = !1, this._binWidth = 10;
+	}
+	static get styles() {
+		return [l(h)];
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("slotContent") && (this._enabled = this.slotContent?.bins?.enabled ?? !1, this._binWidth = this.slotContent?.bins?.number ?? 10);
+	}
+	toggleBinning() {
+		this._enabled = !this._enabled, this.sendEvent();
+	}
+	setBinning() {
+		this._binWidth = this.binWidthElement.value, this.sendEvent();
+	}
+	sendEvent() {
+		let e = {
+			enabled: !!this._enabled,
+			number: this._binWidth ?? 10
+		};
+		this.dispatchEvent(new CustomEvent("luzmo-slot-content-changed", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { slotContent: {
+				...this.slotContent,
+				bins: e
+			} }
+		}));
+	}
+	renderBinWidth() {
+		return c`<div class="setting">
+      <luzmo-field-label for="bin-width"
+        >${m("Bin width", { desc: "The width of each bin in the histogram" })}</luzmo-field-label
+      >
+      <luzmo-number-field
+        id="bin-width"
+        min="0"
+        .value=${this._binWidth}
+        .size=${this.size}
+        @change=${this.setBinning}
+      ></luzmo-number-field>
+    </div>`;
+	}
+	render() {
+		return c`<div class="settings-container">
+      <div class="settings-row">
+        <div class="setting">
+          <luzmo-field-label for="binning"
+            >${m("Binning", { desc: "Grouping numeric data into intervals or \"bins\" for analysis and visualization" })}</luzmo-field-label
+          >
+          <luzmo-action-button
+            id="binning"
+            toggles
+            emphasized
+            .size=${this.size}
+            ?selected=${this._enabled}
+            class=${this._enabled ? "active" : "inactive"}
+            @click=${this.toggleBinning}
+          >
+            <luzmo-icon
+              slot="icon"
+              .size=${this.size}
+              .icon=${this._enabled ? s : o}
+            ></luzmo-icon>
+            ${this._enabled ? m("Enabled", { desc: "Option set to enabled" }) : m("Disabled", { desc: "Option set to disabled" })}
+          </luzmo-action-button>
+        </div>
+        ${this._enabled ? this.renderBinWidth() : ""}
+      </div>
+    </div>`;
+	}
+};
+i([u()], g.prototype, "slotContent", void 0), i([f()], g.prototype, "_enabled", void 0), i([d("#bin-width")], g.prototype, "binWidthElement", void 0), g = i([p()], g);
+//#endregion
+//#region src/components/display-settings-binning/index.ts
+var _ = /* @__PURE__ */ e({ LuzmoDisplaySettingsBinning: () => g });
+customElements.get("luzmo-display-settings-binning") || customElements.define("luzmo-display-settings-binning", g);
+//#endregion
+export { g as n, _ as t };