@luzmo/analytics-components-kit 1.0.9-beta.14 → 1.0.9-beta.15

package/components/data-field-level-GrX6yhPV.js

@@ -0,0 +1,243 @@
+/*! * 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 { t as e } from "./pragmatic-element-adapter-CyTyN1YC.js";
+import "./tokens-6HmQYnEP.js";
+import { i as t, n } from "./base-rAte-QzM.js";
+import { t as r } from "./decorate-B2TzfnLZ.js";
+import { n as i, t as a } from "./calculate-data-field-icon-BrFZHlNR.js";
+import { t as o } from "./localize-BNystXyK.js";
+import { n as s, t as c } from "./get-css-variable-Cnzvg4uu.js";
+import { luzmoArrows as l, luzmoDragLines as u, luzmoIcon as d, luzmoInfoCircleOutline as f } from "@luzmo/icons";
+import "@luzmo/lucero/icon";
+import "@luzmo/lucero/tooltip";
+import { html as p, unsafeCSS as m } from "lit";
+import { property as h } from "lit/decorators.js";
+import { msg as g } from "@lit/localize";
+// src/components/data-field-level/data-field-level.module.scss?inline
+var _ = ":host{font-family:var(--luzmo-data-field-level-font-family,var(--luzmo-font-family));color:var(--luzmo-data-field-level-font-color,var(--data-field-level-font-color))}.data-field-level{transition:background-color var(--luzmo-animation-duration);background-color:var(--luzmo-data-field-level-background-color,var(--data-field-level-background-color));grid-template-columns:var(--luzmo-data-field-level-drag-handle-width,var(--data-field-level-drag-handle-width)) var(--luzmo-data-field-level-data-icon-width,var(--data-field-level-data-icon-width)) 1fr var(--luzmo-data-field-level-description-width,var(--data-field-level-description-width,auto));gap:var(--luzmo-data-field-level-gap,var(--data-field-level-gap));padding:0 var(--luzmo-data-field-level-horizontal-padding,var(--data-field-level-horizontal-padding));border-radius:var(--luzmo-data-field-level-border-radius,var(--data-field-level-border-radius));border-width:var(--luzmo-data-field-level-border-width,var(--data-field-level-border-width));border-style:var(--luzmo-data-field-level-border-style,var(--data-field-level-border-style));border-color:var(--luzmo-data-field-level-border-color,var(--data-field-level-border-color));align-items:center;display:grid}.data-field-level:hover{background-color:var(--luzmo-data-field-level-background-color-hover,var(--data-field-level-background-color-hover));color:var(--luzmo-data-field-level-font-color-hover,var(--data-field-level-font-color-hover));border-color:var(--luzmo-data-field-level-border-color-hover,var(--data-field-level-border-color-hover))}.data-field-level:hover .data-description{color:var(--luzmo-data-field-level-font-color-hover,var(--data-field-level-font-color-hover))}.data-field-level .data-label{font-size:var(--luzmo-data-field-level-label-font-size,var(--data-field-level-label-font-size));white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.data-field-level .data-description{height:100%;color:var(--luzmo-data-field-level-font-color,var(--data-field-level-font-color));font-size:var(--luzmo-data-field-level-label-font-size,var(--data-field-level-label-font-size));background-color:#0000;border:none;outline:none;align-items:center;display:flex}.data-field-level{height:var(--luzmo-data-field-level-height,var(--data-field-level-height));cursor:move}.data-field-level:focus-visible{outline:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color);outline-offset:calc(-1 * var(--luzmo-indicator-width))}:host([sublevel]) .data-field-level{height:var(--luzmo-data-field-level-sublevel-height,var(--data-field-level-sublevel-height));background-color:var(--luzmo-data-field-level-sublevel-background-color,var(--data-field-level-sublevel-background-color));border-color:var(--luzmo-data-field-level-sublevel-border-color,var(--data-field-level-sublevel-border-color));grid-template-columns:var(--luzmo-data-field-level-sublevel-drag-handle-width,var(--luzmo-data-field-level-drag-handle-width)) 1fr;margin-inline-start:var(--luzmo-data-field-level-sublevel-margin-inline-start,var(--data-field-level-sublevel-margin-inline-start))}:host([sublevel]) .data-field-level:hover{background-color:var(--luzmo-data-field-level-sublevel-background-color-hover,var(--data-field-level-sublevel-background-color-hover));color:var(--luzmo-data-field-level-sublevel-font-color-hover,var(--data-field-level-sublevel-font-color-hover))}:host([sublevel]) .data-field-level .drag-handle-icon{width:var(--luzmo-data-field-level-sublevel-drag-handle-width,var(--data-field-level-sublevel-drag-handle-width));text-align:center}:host(.highlighted) .data-field-level:not(:hover){background-color:var(--luzmo-data-field-level-background-color-highlighted,var(--data-field-level-background-color-highlighted));color:var(--luzmo-data-field-level-font-color-highlighted,var(--data-field-level-font-color-highlighted));border-color:var(--luzmo-data-field-level-border-color-highlighted,var(--data-field-level-border-color-highlighted))}:host(.highlighted) .data-field-level:not(:hover) .data-description{color:var(--luzmo-data-field-level-font-color-highlighted,var(--data-field-level-font-color-highlighted))}:host([disabled]) .data-field-level{background-color:var(--luzmo-data-field-level-background-color-disabled,var(--data-field-level-background-color-disabled));color:var(--luzmo-data-field-level-color-disabled,var(--data-field-level-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25}:host([sublevel][disabled]) .data-field-level{background-color:var(--luzmo-data-field-level-sublevel-background-color-disabled,var(--data-field-level-sublevel-background-color-disabled))}:host(.pulse) .data-field-level{box-shadow:0 0 0 0 var(--luzmo-data-field-level-pulse-color,var(--data-field-level-pulse-color)), 0 0 0 0 var(--luzmo-data-field-level-pulse-color,var(--data-field-level-pulse-color));animation:1.5s cubic-bezier(.66,.33,0,1) infinite dataFieldLevelPulse}:host(.focus) .data-field-level{background-color:var(--luzmo-data-field-level-background-color-focus,var(--data-field-level-background-color-focus));color:var(--luzmo-data-field-level-font-color-focus,var(--data-field-level-font-color-focus));border-color:var(--luzmo-data-field-level-border-color-focus,var(--data-field-level-border-color-focus))}:host(.focus) .data-field-level .data-description{color:var(--luzmo-data-field-level-font-color-focus,var(--data-field-level-font-color-focus))}@keyframes dataFieldLevelPulse{0%{box-shadow:0 0 0 0 var(--luzmo-data-field-level-pulse-color,var(--data-field-level-pulse-color)), 0 0 0 0 var(--luzmo-data-field-level-pulse-color,var(--data-field-level-pulse-color))}to{box-shadow:0 0 0 .5rem #0000,0 0 0 .5rem #0000}}@media (prefers-reduced-motion:reduce){.data-field-level{transition:none}:host(.pulse) .data-field-level{animation:none}}.drag-handle-icon{opacity:.6;font-size:var(--luzmo-data-field-level-drag-handle-size,var(--luzmo-data-field-level-drag-handle-size));width:var(--luzmo-data-field-level-drag-handle-width,var(--luzmo-data-field-level-drag-handle-width));text-align:center;justify-self:center}.data-icon-type{width:var(--luzmo-data-field-level-data-icon-width,var(--luzmo-data-field-level-data-icon-width));text-align:center;justify-self:center;position:relative}.with-secondary-icon{clip-path:polygon(0 0,60% 0,65% 60%,100% 65%,100% 100%,0 100%)}.secondary-icon{width:auto;font-size:.75em;line-height:1;position:absolute;bottom:45%;left:70%}:host([variant=highlight]){--data-field-level-background-color:var(--luzmo-background-color-highlight);--data-field-level-border-color:var(--luzmo-background-color-highlight);--data-field-level-background-color-hover:var(--luzmo-background-color-highlight-hover);--data-field-level-font-color-hover:var(--luzmo-font-color-hover);--data-field-level-border-color-hover:var(--luzmo-background-color-highlight-hover)}:host{--data-field-level-height:var(--luzmo-component-height);--data-field-level-label-font-size:var(--luzmo-font-size);--data-field-level-icon-type-size:var(--luzmo-font-size);--data-field-level-horizontal-padding:var(--luzmo-spacing-5);--data-field-level-border-width:var(--luzmo-border-width);--data-field-level-border-style:solid;--data-field-level-border-color:var(--luzmo-border-color-hover);--data-field-level-border-radius:var(--luzmo-border-radius);--data-field-level-gap:var(--luzmo-spacing-4);--data-field-level-font-color:var(--luzmo-font-color);--data-field-level-color-disabled:var(--luzmo-color-disabled);--data-field-level-background-color-disabled:var(--luzmo-background-color-disabled);--luzmo-data-field-level-drag-handle-size:var(--luzmo-font-size-s);--luzmo-data-field-level-drag-handle-width:var(--data-field-level-icon-type-size);--luzmo-data-field-level-data-icon-width:calc(var(--data-field-level-icon-type-size) + var(--luzmo-spacing-3));--luzmo-data-field-level-description-width:calc(var(--data-field-level-icon-type-size) + var(--luzmo-spacing-2));--data-field-level-sublevel-height:var(--luzmo-component-height-s);--data-field-level-sublevel-border-color:transparent;--data-field-level-sublevel-background-color:transparent;--data-field-level-sublevel-background-color-disabled:transparent;--data-field-level-sublevel-margin-inline-start:calc(var(--data-field-level-gap) + var(--luzmo-data-field-level-drag-handle-width));--luzmo-data-field-level-sublevel-drag-handle-width:var(--luzmo-data-field-level-data-icon-width);--data-field-level-sublevel-background-color-hover:rgba(var(--luzmo-border-color-rgb), .05)}:host([hide-type-icon]){--data-field-level-sublevel-margin-inline-start:var(--data-field-level-gap)}:host(.highlighted){--data-field-level-background-color-highlighted:var(--luzmo-primary);--data-field-level-font-color-highlighted:var(--luzmo-primary-inverse-color);--data-field-level-border-color-highlighted:var(--luzmo-border-color)}:host(.focus){--data-field-level-background-color-focus:var(--luzmo-background-color-focus,var(--luzmo-primary));--data-field-level-font-color-focus:var(--luzmo-font-color-focus,var(--luzmo-primary-inverse-color));--data-field-level-border-color-focus:var(--luzmo-border-color-focus,var(--luzmo-primary))}:host(.pulse){--data-field-level-pulse-color:rgba(var(--luzmo-primary-rgb), .4)}:host([size=s]){--data-field-level-height:var(--luzmo-component-height-s);--data-field-level-label-font-size:var(--luzmo-font-size-s);--data-field-level-icon-type-size:var(--luzmo-font-size-s);--data-field-level-horizontal-padding:var(--luzmo-spacing-4);--data-field-level-border-radius:var(--luzmo-border-radius);--data-field-level-gap:var(--luzmo-spacing-3);--data-field-level-sublevel-height:var(--luzmo-component-height-xs);--luzmo-data-field-level-drag-handle-size:var(--luzmo-font-size-xs)}:host([size=l]){--data-field-level-height:var(--luzmo-component-height-l);--data-field-level-label-font-size:var(--luzmo-font-size-l);--data-field-level-icon-type-size:var(--luzmo-font-size-l);--data-field-level-horizontal-padding:var(--luzmo-spacing-5);--data-field-level-border-radius:var(--luzmo-border-radius-l);--data-field-level-gap:var(--luzmo-spacing-5);--data-field-level-sublevel-height:var(--luzmo-component-height);--luzmo-data-field-level-drag-handle-size:var(--luzmo-font-size)}:host([size=xl]){--data-field-level-height:var(--luzmo-component-height-xl);--data-field-level-label-font-size:var(--luzmo-font-size-xl);--data-field-level-icon-type-size:var(--luzmo-font-size-xl);--data-field-level-horizontal-padding:var(--luzmo-spacing-5);--data-field-level-border-radius:var(--luzmo-border-radius-xl);--data-field-level-gap:var(--luzmo-spacing-5);--data-field-level-sublevel-height:var(--luzmo-component-height-l);--luzmo-data-field-level-drag-handle-size:var(--luzmo-font-size-l)}:host{box-sizing:border-box}", v = (e) => {
+	let t = e.source.element, n = e.source.data, r = t.renderRoot?.querySelector(".data-label")?.textContent || o(n.name, t.language) || "Untitled", i = n.type, s = n.subtype, l = a({
+		type: i,
+		subtype: s
+	}, t.size), u = {};
+	[
+		[
+			"borderColor",
+			"--luzmo-data-field-level-border-color",
+			"--data-field-level-border-color"
+		],
+		[
+			"backgroundColor",
+			"--luzmo-data-field-level-background-color",
+			"--data-field-level-background-color"
+		],
+		[
+			"color",
+			"--luzmo-data-field-level-font-color",
+			"--data-field-level-font-color"
+		],
+		[
+			"fontSize",
+			"--luzmo-data-field-level-label-font-size",
+			"--data-field-level-label-font-size"
+		],
+		[
+			"height",
+			"--luzmo-data-field-level-height",
+			"--data-field-level-height"
+		],
+		[
+			"borderRadius",
+			"--luzmo-data-field-level-border-radius",
+			"--data-field-level-border-radius"
+		],
+		[
+			"fontFamily",
+			"--luzmo-data-field-level-font-family",
+			"--luzmo-font-family"
+		],
+		[
+			"horizontalPadding",
+			"--luzmo-data-field-level-horizontal-padding",
+			"--data-field-level-horizontal-padding"
+		],
+		[
+			"gap",
+			"--luzmo-data-field-level-gap",
+			"--data-field-level-gap"
+		]
+	].forEach(([e, n, r]) => {
+		let i = c(t, n) || c(t, r);
+		u[e] = i;
+	});
+	let d = document.createElement("div"), f = document.createElement("div");
+	if (d.innerHTML = r, Object.assign(d.style, {
+		maxWidth: "12rem",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	}), !t.sublevel) {
+		let e = document.createElement("luzmo-icon");
+		e.icon = l, f.append(e);
+	}
+	return f.append(d), Object.assign(f.style, {
+		display: "flex",
+		alignItems: "center",
+		maxWidth: "12rem",
+		lineHeight: "1",
+		height: u.height,
+		border: `1px solid ${u.borderColor}`,
+		backgroundColor: u.backgroundColor,
+		borderRadius: u.borderRadius,
+		fontFamily: u.fontFamily,
+		fontSize: u.fontSize,
+		color: u.color,
+		padding: `0 ${u.horizontalPadding}`,
+		gap: u.gap
+	}), f;
+}, y, b = class extends n(t, {
+	validSizes: [
+		"s",
+		"m",
+		"l",
+		"xl"
+	],
+	noDefaultSize: !0
+}) {
+	constructor(...e) {
+		super(...e), this.language = "en", this.data = {}, this._isCurrentlyHighlighted = !1, this._handleHighlight = (e) => {
+			let { columnId: t, level: n, formulaId: r } = e.detail ?? {}, i = this.data?.columnId ?? this.data?.column ?? this.data?.formulaId ?? this.data?.formula ?? this.data?.id, a = this.data?.level ?? 0, o = n ?? 0, s = (i === t || i === r) && a === o || (i === t || i === r) && a === 0 && o > 0;
+			if (this.classList.toggle("highlighted", s), s && !this._isCurrentlyHighlighted) {
+				this._isCurrentlyHighlighted = !0;
+				let e = this.getBoundingClientRect(), t = window.innerHeight || document.documentElement.clientHeight;
+				if (e.top < 0 || e.bottom > t) try {
+					this.scrollIntoView({ block: "center" });
+				} catch {
+					this.scrollIntoView(!0);
+				}
+			} else !s && this._isCurrentlyHighlighted && (this._isCurrentlyHighlighted = !1);
+		}, this._clearHighlight = () => {
+			this.classList.remove("highlighted"), this._isCurrentlyHighlighted = !1;
+		}, this.dataFieldLevelDropped = (e) => {
+			this.dispatchEvent(new CustomEvent("luzmo-data-field-dropped", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0,
+				detail: { data: e }
+			}));
+		}, this.dataFieldLevelDragStarted = (e) => {
+			this.dispatchEvent(new CustomEvent("luzmo-data-field-drag-started", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0,
+				detail: { data: e }
+			}));
+		};
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._cleanupDraggable &&= (this._cleanupDraggable(), void 0), window.removeEventListener("luzmo-slot-menu-highlight", this._handleHighlight), window.removeEventListener("luzmo-slot-menu-inactive", this._clearHighlight);
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("luzmo-slot-menu-highlight", this._handleHighlight), window.addEventListener("luzmo-slot-menu-inactive", this._clearHighlight);
+	}
+	firstUpdated(t) {
+		this._cleanupDraggable = e({
+			element: this,
+			canDrag: () => !this.disabled,
+			onDragStart: () => {
+				this.style.opacity = "0.5", this.dataFieldLevelDragStarted(this.data);
+			},
+			onDrop: () => {
+				this.style.opacity = "1", this.dataFieldLevelDropped(this.data);
+			},
+			getInitialData: () => ({ ...this.data }),
+			onGenerateDragPreview: (e) => {
+				let t = e.nativeSetDragImage;
+				s({
+					render({ container: t }) {
+						let n = v(e);
+						t.append(n);
+					},
+					nativeSetDragImage: t
+				});
+			}
+		});
+	}
+	render() {
+		if (!this.data) return p`
+        <div
+          class="data-field-level"
+          tabindex="0"
+        ></div>
+      `;
+		let e = (e) => {
+			if (e) return e[this.language] ?? e[Object.keys(e)[0]];
+		}, t = this.data, n = (this.sublevel && t.sublevelLabel ? t.sublevelLabel : void 0) ?? e(this.data.name) ?? "Untitled", r = e(this.data.description), o = i(this.data, this.size);
+		return p`
+      <div class="data-field-level" tabindex="0">
+        <div class="drag-handle-icon">
+          ${this.sublevel ? d(u) : d(l)}
+        </div>
+        ${this.sublevel || this.hideTypeIcon ? "" : p`<div class="data-icon-type">
+              <div class=${o ? "with-secondary-icon" : ""}>
+                ${d(a(this.data, this.size))}
+              </div>
+              ${o ? p`<div class="secondary-icon">
+                    ${d(o)}
+                  </div>` : ""}
+            </div>`}
+        <div class="data-label">${n}</div>
+        ${!this.sublevel && r ? p`<button class="data-description" aria-label=${g("Show description", { desc: "Aria label for data field description button" })}>
+              ${d(f)}
+              <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                ${r}
+              </luzmo-tooltip>
+            </button>` : ""}
+        <luzmo-tooltip
+          self-managed
+          placement="top"
+          size=${this.size}
+          show-only-if-truncated
+          truncated-element-selector=".data-label"
+        >
+          ${n}
+        </luzmo-tooltip>
+      </div>
+    `;
+	}
+};
+// src/components/data-field-level/index.ts
+y = b, y.styles = m(_), r([h({
+	type: String,
+	reflect: !0
+})], b.prototype, "variant", void 0), r([h({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-type-icon"
+})], b.prototype, "hideTypeIcon", void 0), r([h({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "sublevel", void 0), r([h({
+	type: String,
+	reflect: !0
+})], b.prototype, "language", void 0), r([h({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "disabled", void 0), r([h({ type: Object })], b.prototype, "data", void 0), customElements.get("luzmo-data-field-level") || customElements.define("luzmo-data-field-level", b);
+export { b as t };

package/components/data-field-panel/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("../data-field-panel-B-fmhPYi.cjs");Object.defineProperty(exports,"LuzmoDataFieldPanel",{enumerable:!0,get:function(){return e.t}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../data-field-panel-DmMkAYAz.cjs");Object.defineProperty(exports,"LuzmoDataFieldPanel",{enumerable:!0,get:function(){return e.t}});

package/components/data-field-panel/index.js

@@ -17,5 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { t as e } from "../data-field-panel-vDNd2Ba2.js";
-export { e as LuzmoDataFieldPanel };
+export { t as LuzmoDataFieldPanel } from "../data-field-panel-BedJ9V2r.js";

package/components/data-field-panel-BedJ9V2r.js

@@ -0,0 +1,373 @@
+/*! * 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 { i as e, n as t } from "./base-rAte-QzM.js";
+import { t as n } from "./decorate-B2TzfnLZ.js";
+import { t as r } from "./localized-mixin-FPDNaZhb.js";
+import { n as i } from "./data-broker-C1Iz71TN.js";
+import { t as a } from "./localize-BNystXyK.js";
+import { t as o } from "./load-data-fields-for-datasets-avT5OQVv.js";
+import "./data-field-B9466d0w.js";
+import { html as s, nothing as c, unsafeCSS as l } from "lit";
+import { property as u, state as d } from "lit/decorators.js";
+import { localized as f, msg as p } from "@lit/localize";
+import "@luzmo/lucero/select";
+import { repeat as m } from "lit/directives/repeat.js";
+import "@luzmo/lucero/progress-circle";
+import "@luzmo/lucero/search";
+import { Task as h, TaskStatus as g } from "@lit/task";
+// src/components/data-field-panel/data-field-panel.module.scss?inline
+var _ = ":host{--data-field-panel-items-gap:var(--luzmo-spacing-2);--data-field-panel-search-edge-to-visual:var(--luzmo-spacing-5);--data-field-panel-search-text-to-icon:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--data-field-panel-search-quiet-block-size:calc(var(--luzmo-component-height) + var(--luzmo-spacing-3));--data-field-panel-dataset-picker-margin-bottom:var(--luzmo-spacing-3);--data-field-panel-scrollbar-width:var(--luzmo-scrollbar-size);--data-field-panel-scrollbar-track-background:var(--luzmo-scrollbar-track-background);--data-field-panel-scrollbar-track-border-radius:var(--luzmo-scrollbar-track-border-radius);--data-field-panel-scrollbar-thumb-background:var(--luzmo-scrollbar-thumb-background);--data-field-panel-scrollbar-thumb-border-radius:var(--luzmo-scrollbar-thumb-border-radius);--data-field-panel-scrollbar-thumb-hover-background:var(--luzmo-scrollbar-thumb-hover-background)}:host([size=s]){--data-field-panel-items-gap:var(--luzmo-spacing-1);--data-field-panel-search-edge-to-visual:var(--luzmo-spacing-4);--data-field-panel-search-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--data-field-panel-search-quiet-block-size:calc(var(--luzmo-component-height-s) + var(--luzmo-spacing-3));--data-field-panel-dataset-picker-margin-bottom:var(--luzmo-spacing-2)}:host([size=l]){--data-field-panel-items-gap:var(--luzmo-spacing-2);--data-field-panel-search-text-to-icon:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--data-field-panel-search-quiet-block-size:calc(var(--luzmo-component-height-l) + var(--luzmo-spacing-3));--data-field-panel-dataset-picker-margin-bottom:var(--luzmo-spacing-3)}:host([size=xl]){--data-field-panel-items-gap:var(--luzmo-spacing-3);--data-field-panel-search-text-to-icon:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--data-field-panel-search-quiet-block-size:calc(var(--luzmo-component-height-xl) + var(--luzmo-spacing-3));--data-field-panel-dataset-picker-margin-bottom:var(--luzmo-spacing-4)}:host([dataset-picker][search-quiet]):has(.search-container){--data-field-panel-dataset-picker-margin-bottom:0}:host{box-sizing:border-box;height:100%;font-family:var(--luzmo-font-family,sans-serif);color:var(--luzmo-font-color,inherit);flex-direction:column;display:flex}.container{flex-direction:column;height:100%;display:flex}.dataset-picker{border-bottom-style:solid;border-bottom-width:var(--data-field-panel-dataset-picker-divider-height,1px);border-bottom-color:var(--luzmo-data-field-panel-dataset-picker-divider-color,var(--data-field-panel-dataset-picker-divider-color,var(--luzmo-border-color)));flex-shrink:0;margin-block-end:var(--luzmo-data-field-panel-dataset-picker-margin-block-end,var(--data-field-panel-dataset-picker-margin-bottom));padding-block-end:var(--luzmo-data-field-panel-dataset-picker-padding-block-end,var(--luzmo-spacing-3))}.dataset-picker luzmo-select{width:100%}.search-container{width:100%;flex-shrink:0;margin-block-end:var(--luzmo-data-field-panel-search-margin-block-end,var(--luzmo-spacing-3,.75rem))}.search-container luzmo-search{--luzmo-search-edge-to-visual:var(--luzmo-data-field-panel-search-edge-to-visual,var(--data-field-panel-search-edge-to-visual));--luzmo-search-text-to-icon:var(--luzmo-data-field-panel-search-text-to-icon,var(--data-field-panel-search-text-to-icon));width:100%}.data-fields-list{gap:var(--luzmo-data-field-panel-data-fields-gap,var(--data-field-panel-items-gap));flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden auto}.data-fields-list::-webkit-scrollbar{width:var(--luzmo-data-field-panel-scrollbar-width,var(--data-field-panel-scrollbar-width))}.data-fields-list::-webkit-scrollbar-track{background:var(--luzmo-data-field-panel-scrollbar-track-background,var(--data-field-panel-scrollbar-track-background));border-radius:var(--luzmo-data-field-panel-scrollbar-track-border-radius,var(--data-field-panel-scrollbar-track-border-radius))}.data-fields-list::-webkit-scrollbar-thumb{background:var(--luzmo-data-field-panel-scrollbar-thumb-background,var(--data-field-panel-scrollbar-thumb-background));border-radius:var(--luzmo-data-field-panel-scrollbar-thumb-border-radius,var(--data-field-panel-scrollbar-thumb-border-radius))}.data-fields-list::-webkit-scrollbar-thumb:hover{background:var(--luzmo-data-field-panel-scrollbar-thumb-hover-background,var(--data-field-panel-scrollbar-thumb-hover-background))}.data-fields-list{scrollbar-width:var(--luzmo-scrollbar-width,thin);scrollbar-color:var(--luzmo-data-field-panel-scrollbar-thumb-background,var(--data-field-panel-scrollbar-thumb-background)) var(--luzmo-data-field-panel-scrollbar-track-background,var(--data-field-panel-scrollbar-track-background))}.empty-state{color:var(--luzmo-font-color-tertiary,#999);font-size:var(--luzmo-font-size);text-align:center;padding:var(--luzmo-spacing-4);flex:1;justify-content:center;align-items:center;display:flex}.pending-state{padding:var(--luzmo-spacing-4);flex:1;justify-content:center;align-items:center;display:flex}:host([search-quiet]){--luzmo-search-block-size:var(--luzmo-data-field-panel-search-quiet-block-size,var(--data-field-panel-search-quiet-block-size))}:host([dataset-picker][search-quiet]):has(.search-container){--data-field-panel-dataset-picker-divider-color:transparent;--data-field-panel-dataset-picker-divider-height:1px}", v, y = 50, b = (v = class extends r(t(e, {
+	validSizes: [
+		"s",
+		"m",
+		"l",
+		"xl"
+	],
+	noDefaultSize: !0
+})) {
+	constructor(...e) {
+		super(...e), this._handleDataFieldDropped = (e) => {
+			e.target !== this && (e.stopPropagation(), this.dispatchEvent(new CustomEvent("luzmo-data-field-dropped", {
+				bubbles: !0,
+				composed: !0,
+				detail: e.detail
+			})));
+		}, this._handleDataFieldDragStarted = (e) => {
+			e.target !== this && (e.stopPropagation(), this.dispatchEvent(new CustomEvent("luzmo-data-field-drag-started", {
+				bubbles: !0,
+				composed: !0,
+				detail: e.detail
+			})));
+		}, this.datasetIds = [], this.datasetsDataFields = [], this.datasetPicker = !1, this.disabled = !1, this.pending = !1, this.dataFieldVariant = "highlight", this.searchQuiet = !1, this.hideTypeIcon = !1, this.hideSublevels = !1, this.apiUrl = "https://api.luzmo.com", this.search = "auto", this.searchThreshold = 20, this._searchQuery = "", this._failedDatasetIds = /* @__PURE__ */ new Set(), this._loadDataFieldsTask = new h(this, {
+			args: () => [
+				this._currentDatasetId,
+				this.apiUrl,
+				this.authKey,
+				this.authToken,
+				this.datasetsDataFields.length
+			],
+			task: async ([e, t, n, r, i]) => {
+				if (i > 0 || !e || this._failedDatasetIds.has(e)) return null;
+				let a = await o([e], { dataBrokerConfig: {
+					apiUrl: t,
+					authKey: n,
+					authToken: r
+				} });
+				return a.length === 0 ? (this._failedDatasetIds.add(e), null) : a[0];
+			}
+		}), this._datasetListItems = [], this._datasetListRetrieving = !1, this._datasetListPending = !1, this._datasetNamesFetchAttempted = !1, this._hasMoreDatasets = !0;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("luzmo-data-field-dropped", this._handleDataFieldDropped), this.addEventListener("luzmo-data-field-drag-started", this._handleDataFieldDragStarted);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("luzmo-data-field-dropped", this._handleDataFieldDropped), this.removeEventListener("luzmo-data-field-drag-started", this._handleDataFieldDragStarted);
+	}
+	get _isDataFieldsPending() {
+		return this.pending || this._loadDataFieldsTask.status === g.PENDING;
+	}
+	get _error() {
+		if (this._loadDataFieldsTask.status === g.ERROR) {
+			let e = this._loadDataFieldsTask.error, t = e instanceof Error ? e.message : "Unknown error";
+			return `${p("Could not retrieve data")}: ${t}`;
+		}
+	}
+	get _availableDatasets() {
+		return this.datasetsDataFields.length > 0 ? this.datasetsDataFields : this.datasetIds.length > 0 ? this.datasetIds.map((e) => {
+			let t = this._datasetListItems.find((t) => t.id === e);
+			return t ? {
+				id: t.id,
+				name: t.name,
+				description: t.description,
+				dataFields: []
+			} : {
+				id: e,
+				name: { en: e },
+				dataFields: []
+			};
+		}) : this._datasetListItems.length > 0 ? this._datasetListItems.map((e) => ({
+			id: e.id,
+			name: e.name,
+			description: e.description,
+			dataFields: []
+		})) : [];
+	}
+	get _selectedDataset() {
+		return this._availableDatasets.find((e) => e.id === this._currentDatasetId);
+	}
+	get _dataFields() {
+		let e = this._loadDataFieldsTask.value;
+		if (e && e.dataFields?.length > 0) return e.dataFields;
+		let t = this._selectedDataset;
+		if (!t) return [];
+		if ("dataFields" in t && Array.isArray(t.dataFields) && t.dataFields.length > 0) return t.dataFields;
+		let n = [];
+		if ("columns" in t && Array.isArray(t.columns)) for (let e of t.columns) n.push({
+			...e,
+			datasetId: t.id
+		});
+		if ("formulas" in t && Array.isArray(t.formulas)) for (let e of t.formulas) n.push({
+			...e,
+			datasetId: t.id
+		});
+		return n;
+	}
+	get _shouldFetchDatasetList() {
+		return this.datasetPicker && this.datasetsDataFields.length === 0;
+	}
+	get _showSearch() {
+		return this.search === "off" ? !1 : this.search === "on" || this._dataFields.length > this.searchThreshold;
+	}
+	get _filteredDataFields() {
+		let e = this._dataFields;
+		if (!this._searchQuery.trim()) return e;
+		let t = this._searchQuery.toLowerCase().trim();
+		return e.filter((e) => (a(e.name, this.language) || "").toLowerCase().includes(t));
+	}
+	willUpdate(e) {
+		super.willUpdate(e);
+		let t = e.has("selectedDatasetId"), n = e.has("datasetsDataFields"), r = e.has("datasetIds"), a = e.has("datasetPicker"), o = e.has("authKey"), s = e.has("authToken"), c = e.has("apiUrl");
+		(r || o || s || c) && (this._datasetListItems = [], this._hasMoreDatasets = !0, this._failedDatasetIds.clear(), this._datasetNamesFetchAttempted = !1, i.configure({
+			apiUrl: this.apiUrl,
+			authKey: this.authKey ?? "",
+			authToken: this.authToken ?? ""
+		})), n && this.datasetsDataFields.length > 0 && (this._datasetListItems = [], this._hasMoreDatasets = !0, this._failedDatasetIds.clear()), (t || n || r) && this._updateCurrentDatasetId(), (r || o || s || c || a) && this.datasetIds.length > 0 && this.datasetPicker && this.datasetsDataFields.length === 0 && this._datasetListItems.length === 0 && this._fetchDatasetNamesForPicker();
+	}
+	async _fetchDatasetNamesForPicker() {
+		if (this.datasetIds.length !== 0) {
+			this._datasetListPending = !0;
+			try {
+				let e = await i.fetchDatasetNames(this.datasetIds);
+				this._datasetListItems = e;
+			} catch (e) {
+				console.warn("Failed to fetch dataset names:", e);
+			} finally {
+				this._datasetListPending = !1, this._datasetNamesFetchAttempted = !0;
+			}
+		}
+	}
+	async _loadMoreDatasets(e) {
+		if (!this._datasetListRetrieving && this._hasMoreDatasets) {
+			this._datasetListRetrieving = !0, e && (e.retrieving = !0);
+			try {
+				let e = this._datasetListItems.length, t = await i.fetchAllDatasets({
+					offset: e,
+					limit: y
+				});
+				this._datasetListItems = [...this._datasetListItems, ...t.data], this._hasMoreDatasets = e + y < (t.pagination?.total ?? 0), !this._currentDatasetId && this._datasetListItems.length > 0 && this._updateCurrentDatasetId();
+			} catch (e) {
+				console.warn("Failed to load dataset list:", e), this._hasMoreDatasets = !1;
+			} finally {
+				this._datasetListRetrieving = !1, e && (e.retrieving = !1);
+			}
+		}
+	}
+	_handlePickerScrolled(e) {
+		if (this.datasetIds.length > 0) return;
+		let t = e.target, { last: n } = e.detail;
+		n >= this._datasetListItems.length - 10 && this._hasMoreDatasets && this._loadMoreDatasets(t);
+	}
+	async _handlePickerOpened(e) {
+		let t = e.target;
+		if (this._datasetListItems.length === 0 && this._shouldFetchDatasetList && this.datasetIds.length === 0 && this._hasMoreDatasets) {
+			t.pending = !0;
+			try {
+				await this._loadMoreDatasets(t);
+			} finally {
+				t.pending = !1;
+			}
+		}
+	}
+	_updateCurrentDatasetId() {
+		let e = this._availableDatasets;
+		this._currentDatasetId = this.selectedDatasetId && e.some((e) => e.id === this.selectedDatasetId) || this.selectedDatasetId && this.datasetIds.includes(this.selectedDatasetId) ? this.selectedDatasetId : e.length > 0 ? e[0].id : void 0;
+	}
+	_handleDatasetChange(e) {
+		let t = e.detail?.value?.[0];
+		t && t !== this._currentDatasetId && (this._currentDatasetId = t, this._searchQuery = "", this.dispatchEvent(new CustomEvent("luzmo-dataset-changed", {
+			bubbles: !0,
+			composed: !0,
+			detail: { datasetId: t }
+		})));
+	}
+	_getDataFieldKey(e) {
+		return "columnId" in e && e.columnId ? `col-${e.columnId}` : "formulaId" in e && e.formulaId ? `formula-${e.formulaId}` : "formula" in e && e.formula ? `adhoc-${e.formula}` : `field-${e.datasetId}-${Math.random().toString(36).slice(2, 11)}`;
+	}
+	_handleSearchInput(e) {
+		let t = e.target;
+		this._searchQuery = t.value;
+	}
+	_renderDatasetPicker() {
+		if (!this.datasetPicker) return c;
+		let e = this._availableDatasets, t = e.length > 1, n = this.datasetIds.length > 0, r = this._shouldFetchDatasetList;
+		if (!t && !n && !r) return c;
+		let i = this._datasetListPending || this.datasetIds.length > 0 && this._datasetListItems.length === 0 && this.datasetsDataFields.length === 0 && !this._datasetNamesFetchAttempted, o = i ? [] : e.map((e) => ({
+			value: e.id,
+			label: a(e.name, this.language) || e.id
+		})), l = i ? [] : this._currentDatasetId ? [this._currentDatasetId] : [], u = i ? p("Loading datasets...") : this.datasetPickerPlaceholder ?? p("Select dataset...");
+		return s`
+      <div class="dataset-picker" part="dataset-picker">
+        <luzmo-select
+          selects="single"
+          variant="highlight"
+          .size=${this.size}
+          .options=${o}
+          .value=${l}
+          .label=${u}
+          ?disabled=${this.disabled}
+          ?pending=${i}
+          @change=${this._handleDatasetChange}
+          @luzmo-opened=${this._handlePickerOpened}
+          @luzmo-scrolled=${this._handlePickerScrolled}
+        ></luzmo-select>
+      </div>
+    `;
+	}
+	_renderSearch() {
+		return !this._showSearch || this._isDataFieldsPending ? c : s`
+      <div class="search-container" part="search">
+        <luzmo-search
+          .size=${this.size}
+          .placeholder=${this.searchPlaceholder ?? p("Search...")}
+          .value=${this._searchQuery}
+          ?disabled=${this.disabled}
+          ?quiet=${this.searchQuiet}
+          @input=${this._handleSearchInput}
+        ></luzmo-search>
+      </div>
+    `;
+	}
+	_renderPendingState() {
+		return s`
+      <div class="pending-state" role="status" part="pending-state">
+        <luzmo-progress-circle
+          indeterminate
+          .label=${p("Loading", { desc: "Loading spinner label" })}
+          .size=${this.size}
+        ></luzmo-progress-circle>
+      </div>
+    `;
+	}
+	_renderErrorState() {
+		return s`
+      <div class="empty-state" role="alert" part="empty-state">
+        ${this._error}
+      </div>
+    `;
+	}
+	_renderDataFields() {
+		if (this._error) return this._renderErrorState();
+		if (this._dataFields.length === 0) return s`
+        <div class="empty-state" part="empty-state">
+          ${p("No data available", { desc: "Empty state message shown when the selected dataset has no data fields (columns or formulas)" })}
+        </div>
+      `;
+		let e = this._filteredDataFields;
+		return e.length === 0 ? s`
+        <div class="empty-state" part="empty-state">
+          ${p("No results found")}
+        </div>
+      ` : s`
+      <div class="data-fields-list" part="data-fields-list" role="list">
+        ${m(e, (e) => this._getDataFieldKey(e), (e) => s`
+            <luzmo-data-field
+              .data=${e}
+              .language=${this.language}
+              .size=${this.size}
+              .variant=${this.dataFieldVariant}
+              ?disabled=${this.disabled}
+              ?hide-type-icon=${this.hideTypeIcon}
+              ?hide-sublevels=${this.hideSublevels}
+            ></luzmo-data-field>
+          `)}
+      </div>
+    `;
+	}
+	render() {
+		return s`
+      <div class="container" part="container" aria-busy=${this._isDataFieldsPending ? "true" : "false"}>
+        ${this._renderDatasetPicker()}
+        ${this._renderSearch()}
+        ${this._isDataFieldsPending ? this._renderPendingState() : this._renderDataFields()}
+      </div>
+    `;
+	}
+}, v.styles = l(_), v);
+// src/components/data-field-panel/index.ts
+n([u({
+	type: Array,
+	attribute: "dataset-ids"
+})], b.prototype, "datasetIds", void 0), n([u({
+	type: Array,
+	attribute: !1
+})], b.prototype, "datasetsDataFields", void 0), n([u({
+	type: String,
+	attribute: "selected-dataset-id",
+	reflect: !0
+})], b.prototype, "selectedDatasetId", void 0), n([u({
+	type: Boolean,
+	attribute: "dataset-picker",
+	reflect: !0
+})], b.prototype, "datasetPicker", void 0), n([u({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "disabled", void 0), n([u({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "pending", void 0), n([u({
+	type: String,
+	attribute: "data-field-variant",
+	reflect: !0
+})], b.prototype, "dataFieldVariant", void 0), n([u({
+	type: Boolean,
+	attribute: "search-quiet",
+	reflect: !0
+})], b.prototype, "searchQuiet", void 0), n([u({
+	type: Boolean,
+	attribute: "hide-type-icon",
+	reflect: !0
+})], b.prototype, "hideTypeIcon", void 0), n([u({
+	type: Boolean,
+	attribute: "hide-sublevels",
+	reflect: !0
+})], b.prototype, "hideSublevels", void 0), n([u({
+	type: String,
+	attribute: "dataset-picker-placeholder"
+})], b.prototype, "datasetPickerPlaceholder", void 0), n([u({
+	type: String,
+	attribute: "api-url"
+})], b.prototype, "apiUrl", void 0), n([u({
+	type: String,
+	attribute: "auth-key"
+})], b.prototype, "authKey", void 0), n([u({
+	type: String,
+	attribute: "auth-token"
+})], b.prototype, "authToken", void 0), n([u({
+	type: String,
+	reflect: !0
+})], b.prototype, "search", void 0), n([u({
+	type: String,
+	attribute: "search-placeholder"
+})], b.prototype, "searchPlaceholder", void 0), n([u({
+	type: Number,
+	attribute: "search-threshold"
+})], b.prototype, "searchThreshold", void 0), n([d()], b.prototype, "_currentDatasetId", void 0), n([d()], b.prototype, "_searchQuery", void 0), n([d()], b.prototype, "_datasetListItems", void 0), n([d()], b.prototype, "_datasetListRetrieving", void 0), n([d()], b.prototype, "_datasetListPending", void 0), b = n([f()], b), customElements.get("luzmo-data-field-panel") || customElements.define("luzmo-data-field-panel", b);
+export { b as t };