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

package/components/formula-editor-DN87mT8q.js

@@ -1,690 +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 { t as e } from "./pragmatic-element-adapter-D0LRKx5U.js";
-import { i as t, n } from "./base-8L8Jt2vi.js";
-import { t as r } from "./decorate-DyMgX_Uh.js";
-import { t as i } from "./data-broker-B0uUO5er.js";
-import { t as a } from "./calculate-data-field-icon-DrSg1PuD.js";
-import { t as o } from "./localize-BT7REYBY.js";
-import { a as s, i as c, n as l, p as u, r as d } from "./formula-display-store-JAaWuYNB.js";
-import { n as f } from "./groupings-CODDxpbZ.js";
-import { n as p, t as m } from "./get-css-variable-DYnldi15.js";
-import "./data-field-CSm9APdz.js";
-import { t as h } from "./formula-input-base-HL0Fg74x.js";
-import { luzmoAlertOutline as g, luzmoAngleDown as ee, luzmoAngleRight as te, luzmoArrows as ne, luzmoIcon as _ } from "@luzmo/icons";
-import "@luzmo/lucero/icon";
-import { html as v, nothing as y, unsafeCSS as b } from "lit";
-import { property as x, state as S } from "lit/decorators.js";
-import { localized as re, msg as C, str as w } from "@lit/localize";
-import "@luzmo/lucero/select";
-import "@luzmo/lucero/tooltip";
-import { repeat as T } from "lit/directives/repeat.js";
-import "@luzmo/lucero/field-label";
-import "@luzmo/lucero/progress-circle";
-import "@luzmo/lucero/search";
-//#region src/utils/formula/config/validate-expression.ts
-var E = [
-	"numeric",
-	"hierarchy",
-	"datetime",
-	"spatial"
-], D = [
-	"true",
-	"false",
-	"null"
-], O = [
-	"GROUP",
-	"GROUPFULL",
-	"GROUPINEX"
-], k = /'(?:[^']|'')*'|"(?:[^"]|"")*"/g, A = /\{[^}]*\}/g, j = /[A-Za-z_][A-Za-z0-9_]*/g;
-function M(e, t) {
-	let n = /* @__PURE__ */ new Set();
-	for (let t of Object.keys(e)) /^[A-Za-z_]/.test(t) && n.add(t.toUpperCase());
-	for (let e of Object.keys(t)) n.add(e.toUpperCase());
-	for (let e of [
-		...O,
-		...E,
-		...D
-	]) n.add(e.toUpperCase());
-	return n;
-}
-function N(e, t) {
-	let n = e.replace(k, " ").replace(A, " ");
-	j.lastIndex = 0;
-	let r;
-	for (; (r = j.exec(n)) !== null;) if (!t.has(r[0].toUpperCase())) return r[0];
-	return null;
-}
-//#endregion
-//#region node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js
-function P(e) {
-	return function(t) {
-		var n = t.container;
-		return Object.assign(n.style, {
-			borderLeft: `${e.x} solid transparent`,
-			borderTop: `${e.y} solid transparent`
-		}), {
-			x: 0,
-			y: 0
-		};
-	};
-}
-//#endregion
-//#region src/components/formula-draggable-field/formula-draggable-field.module.scss?inline
-var F = ".draggable{align-items:center;gap:var(--luzmo-spacing-3);box-sizing:border-box;width:100%;min-height:var(--formula-draggable-field-height);padding:0 var(--luzmo-spacing-3);border-radius:var(--luzmo-border-radius);background-color:var(--formula-draggable-field-background);color:var(--luzmo-font-color);font-family:var(--luzmo-font-family);font-size:var(--formula-draggable-field-font-size);text-align:start;cursor:grab;-webkit-user-select:none;user-select:none;border:none;display:flex}.draggable:hover{background-color:var(--luzmo-background-color-highlight)}.draggable:focus-visible{outline:2px solid var(--luzmo-primary);outline-offset:-2px}:host([disabled]) .draggable{opacity:.5;cursor:not-allowed}.draggable-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.drag-icon{color:var(--luzmo-font-color-extra-dimmed);font-size:var(--luzmo-formula-draggable-field-drag-icon-size,var(--formula-draggable-field-drag-icon-size));flex:none;align-items:center;display:inline-flex}.icon-slot{flex:none;align-items:center;display:none}.icon-slot.has-icon{display:inline-flex}.tooltip-content{gap:var(--luzmo-spacing-2);text-align:start;flex-direction:column;display:flex}:host{width:100%;font-family:var(--luzmo-font-family);--formula-draggable-field-height:var(--luzmo-component-height);--formula-draggable-field-font-size:var(--luzmo-font-size);--formula-draggable-field-background:transparent;--formula-draggable-field-drag-icon-size:var(--luzmo-font-size-s);font-size:var(--formula-draggable-field-font-size);display:flex}:host([size=s]){--formula-draggable-field-height:var(--luzmo-component-height-s);--formula-draggable-field-font-size:var(--luzmo-font-size-s);--formula-draggable-field-drag-icon-size:var(--luzmo-font-size-xs)}:host([size=l]){--formula-draggable-field-height:var(--luzmo-component-height-l);--formula-draggable-field-font-size:var(--luzmo-font-size-l);--formula-draggable-field-drag-icon-size:var(--luzmo-font-size)}:host([size=xl]){--formula-draggable-field-height:var(--luzmo-component-height-xl);--formula-draggable-field-font-size:var(--luzmo-font-size-xl);--formula-draggable-field-drag-icon-size:var(--luzmo-font-size-l)}:host([variant=highlight]){--formula-draggable-field-background:var(--luzmo-formula-draggable-field-background,var(--luzmo-background-color-highlight))}", I = class extends n(t, {
-	validSizes: [
-		"s",
-		"m",
-		"l",
-		"xl"
-	],
-	noDefaultSize: !0
-}) {
-	constructor(...e) {
-		super(...e), this.kind = "", this.value = "", this.label = "", this.description = "", this.tooltipPlacement = "right", this.variant = "default", this.disabled = !1, this._hasIcon = !1, this._hasTooltipSlot = !1;
-	}
-	static {
-		this.styles = b(F);
-	}
-	_handleIconSlotChange(e) {
-		this._hasIcon = e.target.assignedNodes({ flatten: !0 }).length > 0;
-	}
-	_handleTooltipSlotChange(e) {
-		this._hasTooltipSlot = e.target.assignedNodes({ flatten: !0 }).length > 0;
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this._cleanupDraggable?.(), this._cleanupDraggable = void 0;
-	}
-	firstUpdated(t) {
-		this._cleanupDraggable = e({
-			element: this,
-			canDrag: () => !this.disabled,
-			onDragStart: () => {
-				this.style.opacity = "0.5";
-			},
-			onDrop: () => {
-				this.style.opacity = "1";
-			},
-			getInitialData: () => ({
-				kind: this.kind,
-				value: this.value
-			}),
-			onGenerateDragPreview: ({ nativeSetDragImage: e }) => {
-				p({
-					nativeSetDragImage: e,
-					getOffset: P({
-						x: "8px",
-						y: "8px"
-					}),
-					render: ({ container: e }) => {
-						e.append(this._buildDragPreview());
-					}
-				});
-			}
-		});
-	}
-	_buildDragPreview() {
-		let e = document.createElement("div"), t = this.variant === "highlight" ? m(this, "--luzmo-formula-draggable-field-background") || m(this, "--luzmo-background-color-highlight") : m(this, "--luzmo-background-color");
-		return e.textContent = this.label, Object.assign(e.style, {
-			display: "inline-flex",
-			alignItems: "center",
-			maxWidth: "14rem",
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			whiteSpace: "nowrap",
-			padding: "4px 8px",
-			borderRadius: m(this, "--luzmo-border-radius") || "6px",
-			border: `1px solid ${m(this, "--luzmo-border-color")}`,
-			background: t,
-			color: m(this, "--luzmo-font-color"),
-			fontFamily: m(this, "--luzmo-font-family"),
-			fontSize: getComputedStyle(this).fontSize,
-			lineHeight: "1",
-			boxShadow: m(this, "--luzmo-box-shadow") || "0 1px 4px rgb(0 0 0 / 15%)"
-		}), e;
-	}
-	_handleClick(e) {
-		e.detail === 0 && this._activate();
-	}
-	_activate() {
-		this.disabled || this.dispatchEvent(new CustomEvent("luzmo-formula-draggable-field-activate", {
-			bubbles: !0,
-			composed: !0,
-			detail: {
-				kind: this.kind,
-				value: this.value
-			}
-		}));
-	}
-	_describe() {
-		this.dispatchEvent(new CustomEvent("luzmo-formula-draggable-field-describe", {
-			bubbles: !0,
-			composed: !0,
-			detail: {
-				kind: this.kind,
-				value: this.value
-			}
-		}));
-	}
-	render() {
-		let e = this._hasTooltipSlot || !!this.description;
-		return v`
-      <button
-        class="draggable"
-        type="button"
-        aria-label=${this.label}
-        ?disabled=${this.disabled}
-        @click=${this._handleClick}
-        @dblclick=${this._activate}
-        @mouseenter=${this._describe}
-        @focus=${this._describe}
-      >
-        <span class="drag-icon" aria-hidden="true">${_(ne)}</span>
-        <slot
-          name="icon"
-          class="icon-slot ${this._hasIcon ? "has-icon" : ""}"
-          @slotchange=${this._handleIconSlotChange}
-        ></slot>
-        <span class="draggable-label">${this.label}</span>
-        <luzmo-tooltip
-          self-managed
-          placement=${this.tooltipPlacement}
-          .size=${this.size}
-          ?disabled=${!e}
-        >
-          <div class="tooltip-content">
-            ${this._hasTooltipSlot ? y : this.description ? v`<span>${this.description}</span>` : y}
-            <slot name="tooltip" @slotchange=${this._handleTooltipSlotChange}></slot>
-          </div>
-        </luzmo-tooltip>
-      </button>
-    `;
-	}
-};
-//#endregion
-//#region src/components/formula-draggable-field/index.ts
-r([x({ type: String })], I.prototype, "kind", void 0), r([x({ type: String })], I.prototype, "value", void 0), r([x({ type: String })], I.prototype, "label", void 0), r([x({ type: String })], I.prototype, "description", void 0), r([x({
-	type: String,
-	attribute: "tooltip-placement"
-})], I.prototype, "tooltipPlacement", void 0), r([x({
-	type: String,
-	reflect: !0
-})], I.prototype, "variant", void 0), r([x({
-	type: Boolean,
-	reflect: !0
-})], I.prototype, "disabled", void 0), r([S()], I.prototype, "_hasIcon", void 0), r([S()], I.prototype, "_hasTooltipSlot", void 0), customElements.get("luzmo-formula-draggable-field") || customElements.define("luzmo-formula-draggable-field", I);
-//#endregion
-//#region src/utils/formula/render-explanation-tooltip.ts
-var L = {
-	numeric: "numeric",
-	hierarchy: "hierarchy",
-	datetime: "datetime"
-};
-function R(e, t) {
-	return t ? v`<code class="tooltip-example">${e.split(/(⟨\w+⟩)/g).map((e) => {
-		let t = e.match(/^⟨(\w+)⟩$/);
-		if (t) {
-			let e = L[t[1]];
-			if (e) return v`<span class="example-icon" aria-hidden="true">${_(a({ type: e }, "s"))}</span>`;
-		}
-		return e;
-	})}</code>` : v`<code class="tooltip-example">${e}</code>`;
-}
-function z(e, t, n) {
-	return !e && !t ? y : v`
-    <div slot="tooltip" class="explanation-tooltip">
-      ${e ? v`<span>${e}</span>` : y}
-      ${t ? R(t, n) : y}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/formula-editor/formula-aggregations-list.ts
-var B = s();
-function V(e) {
-	return v`
-    <div class="list-loading" role="status" part="list-loading">
-      <luzmo-progress-circle
-        indeterminate
-        .label=${C("Loading aggregations", { desc: "Formula editor aggregations list loading spinner label" })}
-        .size=${e}
-      ></luzmo-progress-circle>
-    </div>
-  `;
-}
-function H({ size: e, explanationTooltips: t, disabled: n }) {
-	return v`
-    <div class="list-items" part="list-items" role="list">
-      ${T(c, (e) => e, (r) => v`
-          <luzmo-formula-draggable-field
-            role="listitem"
-            kind="aggregation"
-            value=${r}
-            .label=${B[r]?.label() ?? r}
-            .size=${e}
-            ?disabled=${n}
-          >
-            ${t ? z(B[r]?.description() ?? "", B[r]?.example() ?? "", B[r]?.exampleHasIcons ?? !1) : y}
-          </luzmo-formula-draggable-field>
-        `)}
-    </div>
-  `;
-}
-function U(e) {
-	return v`
-    <div class="list" part="list aggregations-list">
-      <luzmo-field-label class="list-header" part="list-header" .size=${e.size}
-        >${C("Aggregations", { desc: "Formula editor aggregations list title" })}</luzmo-field-label
-      >
-      ${e.loading ? V(e.size) : H(e)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/formula-editor/formula-datasets-list.ts
-function W(e, t, n) {
-	let r = t.trim().toLowerCase();
-	return r ? e.columns.filter((e) => o(e.name, n).toLowerCase().includes(r)) : e.columns;
-}
-function G(e) {
-	return v`
-    <div class="list-loading" role="status" part="list-loading">
-      <luzmo-progress-circle
-        indeterminate
-        .label=${C("Loading columns", { desc: "Formula editor datasets list loading spinner label" })}
-        .size=${e}
-      ></luzmo-progress-circle>
-    </div>
-  `;
-}
-function K(e, t) {
-	let { datasets: n, contentLanguage: r, size: i, disabled: a, searchQuery: s, collapsed: c, onToggleCollapse: l, onInsertColumn: u } = e;
-	return v`
-    <div class="list-scroll" part="list-scroll">
-        ${T(n, (e) => e.id, (e) => {
-		let n = W(e, s, r), d = c.has(e.id);
-		return n.length === 0 ? y : v`
-              <div class="dataset-group" part="dataset-group">
-                ${t ? v`<button
-                        class="dataset-group-header"
-                        part="dataset-group-header"
-                        type="button"
-                        aria-expanded=${!d}
-                        @click=${() => l(e.id)}
-                      >
-                        <span class="dataset-group-icon" aria-hidden="true"
-                          >${_(d ? te : ee)}</span
-                        >
-                        <span class="dataset-group-label">${o(e.name, r) || e.id}</span>
-                      </button>` : y}
-                ${d ? y : v`<div class="dataset-group-fields" role="list">
-                        ${T(n, (e) => `${e.datasetId}:${e.columnId}`, (e) => v`
-                            <luzmo-data-field
-                              role="listitem"
-                              hide-sublevels
-                              .data=${e}
-                              .language=${r}
-                              .size=${i}
-                              ?disabled=${a}
-                              @dblclick=${() => u(e)}
-                            ></luzmo-data-field>
-                          `)}
-                      </div>`}
-              </div>
-            `;
-	})}
-      </div>
-  `;
-}
-function q(e) {
-	let { size: t, loading: n = !1, disabled: r = !1, searchQuery: i, onSearchInput: a } = e, o = e.datasets.length > 1;
-	return v`
-    <div class="list" part="list datasets-list">
-      <luzmo-field-label class="list-header" part="list-header" .size=${t}
-        >${C("Data", {
-		id: "formula-datasets-list-title",
-		desc: "Formula editor datasets list title"
-	})}</luzmo-field-label
-      >
-      <luzmo-search
-        .size=${t}
-        .placeholder=${C("Search columns...", { desc: "Formula editor datasets list search placeholder" })}
-        .value=${i}
-        ?disabled=${r || n}
-        @input=${a}
-      ></luzmo-search>
-      ${n ? G(t) : K(e, o)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/formula-editor/formula-description.ts
-var J = {
-	numeric: "numeric",
-	hierarchy: "hierarchy",
-	datetime: "datetime"
-}, Y = d(), X = s(), ie = f();
-function ae(e, t) {
-	return t ? v`<code class="example-code">${e.split(/(⟨\w+⟩)/g).map((e) => {
-		let t = e.match(/^⟨(\w+)⟩$/);
-		if (t) {
-			let e = J[t[1]];
-			if (e) return v`<span class="example-icon" aria-hidden="true">${_(a({ type: e }, "s"))}</span>`;
-		}
-		return e;
-	})}</code>` : v`<code class="example-code">${e}</code>`;
-}
-function oe(e) {
-	if (!e) return v`
-      <div class="description-empty" part="description-empty">
-        ${C("Hover a function or aggregation to see its description.", { desc: "Formula editor description empty state" })}
-      </div>
-    `;
-	if (e.kind === "grouping") {
-		let t = ie[e.id];
-		return v`
-      <div class="description-title" part="description-title">${t?.label() ?? e.id}</div>
-      <div class="description-text" part="description-text">${t?.description() ?? ""}</div>
-    `;
-	}
-	let t = e.kind === "aggregation" ? X[e.id] : Y[e.id];
-	return t ? v`
-    <div class="description-title" part="description-title">${t.label()}</div>
-    ${ae(t.example(), t.exampleHasIcons ?? !1)}
-    <div class="description-text" part="description-text">${t.description()}</div>
-  ` : y;
-}
-function se({ target: e, size: t }) {
-	return v`
-    <div class="list description" part="list description-list">
-      <luzmo-field-label class="list-header" part="list-header" .size=${t}
-        >${C("Description", { desc: "Formula editor description title" })}</luzmo-field-label
-      >
-      ${oe(e)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/formula-editor/formula-functions-list.ts
-var Z = d();
-function Q(e) {
-	return v`
-    <div class="list-loading" role="status" part="list-loading">
-      <luzmo-progress-circle
-        indeterminate
-        .label=${C("Loading functions", { desc: "Formula editor functions list loading spinner label" })}
-        .size=${e}
-      ></luzmo-progress-circle>
-    </div>
-  `;
-}
-function ce(e, { size: t, explanationTooltips: n, disabled: r }) {
-	return v`
-    <div class="list-items" part="list-items" role="list">
-      ${T(e, (e) => e, (e) => v`
-          <luzmo-formula-draggable-field
-            role="listitem"
-            kind="function"
-            value=${e}
-            .label=${Z[e]?.label() ?? e}
-            .size=${t}
-            ?disabled=${r}
-          >
-            ${n ? z(Z[e]?.description() ?? "", Z[e]?.example() ?? "", Z[e]?.exampleHasIcons ?? !1) : y}
-          </luzmo-formula-draggable-field>
-        `)}
-    </div>
-  `;
-}
-function le(e) {
-	let { size: t, loading: n = !1, disabled: r = !1, selectedCategory: i, onCategoryChange: a } = e, o = l(), s = o.find((e) => e.key === i) ?? o[0], c = o.map((e) => ({
-		value: e.key,
-		label: e.title()
-	}));
-	return v`
-    <div class="list" part="list functions-list">
-      <luzmo-field-label class="list-header" part="list-header" .size=${t}
-        >${C("Functions", { desc: "Formula editor functions list title" })}</luzmo-field-label
-      >
-      <luzmo-select
-        selects="single"
-        variant="highlight"
-        .size=${t}
-        .options=${c}
-        .value=${[s.key]}
-        aria-label=${C("Function category", { desc: "Accessible label for the function category selector" })}
-        ?disabled=${r || n}
-        @change=${a}
-      ></luzmo-select>
-      ${n ? Q(t) : ce(s.functions, e)}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/formula-editor/formula-editor.module.scss?inline
-var ue = ":host{--luzmo-formula-editor-error-color:var(--luzmo-negative-color);--luzmo-formula-editor-error-background:color-mix(in srgb, var(--luzmo-negative-color) 10%, var(--luzmo-background-color) 90%);--luzmo-formula-editor-error-text-color:var(--luzmo-font-color);--luzmo-formula-font-size:var(--luzmo-font-size);--luzmo-formula-pill-disclosure-icon-size:var(--luzmo-font-size);--luzmo-formula-grouping-icon-size:var(--luzmo-icon-size-m);--luzmo-formula-control-height:calc(var(--luzmo-component-height) - 2 * var(--luzmo-spacing-1));--formula-editor-lists-height:24rem}:host([size=s]){--luzmo-formula-font-size:var(--luzmo-font-size-s);--luzmo-formula-control-height:calc(var(--luzmo-component-height-s) - 2 * var(--luzmo-spacing-1));--luzmo-formula-grouping-icon-size:var(--luzmo-icon-size-s);--formula-editor-lists-height:20rem}:host([size=l]){--luzmo-formula-font-size:var(--luzmo-font-size-l);--luzmo-formula-control-height:calc(var(--luzmo-component-height-l) - 2 * var(--luzmo-spacing-1));--luzmo-formula-grouping-icon-size:var(--luzmo-icon-size-l);--formula-editor-lists-height:28rem}:host([size=xl]){--luzmo-formula-font-size:var(--luzmo-font-size-xl);--luzmo-formula-control-height:calc(var(--luzmo-component-height-xl) - 2 * var(--luzmo-spacing-1));--luzmo-formula-grouping-icon-size:var(--luzmo-icon-size-xl);--formula-editor-lists-height:32rem}:host{box-sizing:border-box;width:100%;max-width:100%;font-family:var(--luzmo-font-family);color:var(--luzmo-font-color);display:block}.formula-editor{flex-direction:column;width:100%;display:flex}luzmo-formula-codemirror,.formula-codemirror-loading{--luzmo-formula-field-bottom-radius:0;z-index:1;width:100%;position:relative}.error{align-items:flex-start;gap:var(--luzmo-spacing-2);padding:var(--luzmo-spacing-2) var(--luzmo-spacing-3);border:1px solid var(--luzmo-formula-editor-error-color,var(--luzmo-negative-color));background:var(--luzmo-formula-editor-error-background,color-mix(in srgb, var(--luzmo-negative-color) 10%, var(--luzmo-background-color) 90%));color:var(--luzmo-formula-editor-error-text-color,var(--luzmo-font-color));font-size:var(--luzmo-font-size-s);border-block-start:0;line-height:1.4;display:flex}.error svg{flex:none;margin-block-start:.2em}.validating{align-items:center;gap:var(--luzmo-spacing-2);padding:var(--luzmo-spacing-2) var(--luzmo-spacing-3);border:1px solid var(--luzmo-border-color);background:var(--luzmo-background-color);color:var(--luzmo-font-color-extra-dimmed);font-size:var(--luzmo-font-size-s);border-block-start:0;line-height:1.4;display:flex}.lists{box-sizing:border-box;min-height:0;border:1px solid var(--luzmo-border-color);border-block-start:0;border-end-end-radius:var(--luzmo-border-radius);border-end-start-radius:var(--luzmo-border-radius);grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:0;padding-block-start:var(--luzmo-formula-editor-gap,0);display:grid}:host([show-aggregations]) .lists,:host([explanation-display=description]) .lists{grid-template-columns:repeat(3,minmax(0,1fr))}:host([show-aggregations][explanation-display=description]) .lists{grid-template-columns:repeat(4,minmax(0,1fr))}.lists>*{min-width:0;padding:var(--luzmo-formula-editor-list-padding,var(--luzmo-spacing-3));--luzmo-formula-list-height:var(--luzmo-formula-editor-lists-height,var(--formula-editor-lists-height,16rem))}.lists>:not(:last-child){border-inline-end:1px solid var(--luzmo-border-color)}.lists{--list-text-font-size:var(--luzmo-font-size)}:host([size=s]) .lists{--list-text-font-size:var(--luzmo-font-size-s)}:host([size=l]) .lists{--list-text-font-size:var(--luzmo-font-size-l)}:host([size=xl]) .lists{--list-text-font-size:var(--luzmo-font-size-xl)}.lists .list{gap:var(--luzmo-spacing-2);min-height:0;height:var(--luzmo-formula-list-height,100%);box-sizing:border-box;flex-direction:column;display:flex}.lists .list-header{flex-shrink:0;margin-block-end:var(--luzmo-spacing-1);display:block}.lists .list-items{gap:var(--luzmo-spacing-1);flex-direction:column;align-content:flex-start;min-height:0;display:flex;overflow-y:auto}.lists .list-items::-webkit-scrollbar{width:var(--luzmo-scrollbar-width,6px)}.lists .list-items::-webkit-scrollbar-track{background:var(--luzmo-scrollbar-track-background,transparent);border-radius:var(--luzmo-scrollbar-track-border-radius,4px)}.lists .list-items::-webkit-scrollbar-thumb{background:var(--luzmo-scrollbar-thumb-background,#0003);border-radius:var(--luzmo-scrollbar-thumb-border-radius,4px)}.lists .list-items::-webkit-scrollbar-thumb:hover{background:var(--luzmo-scrollbar-thumb-hover-background,#00000059)}.lists .list-items{scrollbar-width:var(--luzmo-scrollbar-width,thin);scrollbar-color:var(--luzmo-scrollbar-thumb-background,#0003) var(--luzmo-scrollbar-track-background,transparent)}.lists .list-scroll{gap:var(--luzmo-spacing-2,.5rem);flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden auto}.lists .list-scroll::-webkit-scrollbar{width:var(--luzmo-scrollbar-width,6px)}.lists .list-scroll::-webkit-scrollbar-track{background:var(--luzmo-scrollbar-track-background,transparent);border-radius:var(--luzmo-scrollbar-track-border-radius,4px)}.lists .list-scroll::-webkit-scrollbar-thumb{background:var(--luzmo-scrollbar-thumb-background,#0003);border-radius:var(--luzmo-scrollbar-thumb-border-radius,4px)}.lists .list-scroll::-webkit-scrollbar-thumb:hover{background:var(--luzmo-scrollbar-thumb-hover-background,#00000059)}.lists .list-scroll{scrollbar-width:var(--luzmo-scrollbar-width,thin);scrollbar-color:var(--luzmo-scrollbar-thumb-background,#0003) var(--luzmo-scrollbar-track-background,transparent)}.lists luzmo-select,.lists luzmo-search{width:100%}.lists .list-loading{min-height:0;padding:var(--luzmo-spacing-4);flex:1;justify-content:center;align-items:center;display:flex}.lists .dataset-group{gap:var(--luzmo-spacing-1);flex-direction:column;display:flex}.lists .dataset-group-header{align-items:center;gap:var(--luzmo-spacing-1);width:100%;padding:var(--luzmo-spacing-1) 0;color:var(--luzmo-font-color-extra-dimmed);font:inherit;font-size:var(--list-text-font-size);font-weight:var(--luzmo-font-weight-bold);text-align:start;cursor:pointer;background:0 0;border:none;display:flex}.lists .dataset-group-fields{gap:var(--luzmo-spacing-1);flex-direction:column;display:flex}.lists .dataset-group-fields luzmo-data-field{--luzmo-data-field-level-border-width:0;--luzmo-data-field-level-background-color:transparent;--luzmo-data-field-level-horizontal-padding:var(--luzmo-spacing-3);--luzmo-data-field-level-gap:var(--luzmo-spacing-3);--luzmo-data-field-level-background-color-hover:var(--luzmo-formula-editor-data-field-background-color-hover,var(--luzmo-background-color-highlight));--luzmo-data-field-level-border-color-hover:var(--luzmo-formula-editor-data-field-border-color-hover,var(--luzmo-background-color-highlight));--luzmo-data-field-level-background-color-active:var(--luzmo-formula-editor-data-field-background-color-active,var(--luzmo-background-color-highlight-down));--luzmo-data-field-level-border-color-active:var(--luzmo-formula-editor-data-field-border-color-active,var(--luzmo-background-color-highlight-down));--luzmo-data-field-level-background-color-focus-visible:var(--luzmo-formula-editor-data-field-background-color-focus,var(--luzmo-background-color-highlight-focus))}.lists .description{gap:var(--luzmo-spacing-2)}.lists .description-title{font-weight:var(--luzmo-font-weight-bold);font-size:var(--list-text-font-size)}.lists .description-text{font-size:var(--list-text-font-size);color:var(--luzmo-font-color-extra-dimmed);line-height:1.4}.lists .description-empty{font-size:var(--list-text-font-size);color:var(--luzmo-font-color-tertiary,#767676);font-style:italic}.lists .example-code{align-items:center;gap:var(--luzmo-spacing-1);padding:var(--luzmo-spacing-2);border-radius:var(--luzmo-border-radius-s);background-color:var(--luzmo-background-color-highlight);font-family:var(--luzmo-font-family-mono,monospace);font-size:var(--list-text-font-size);flex-wrap:wrap;display:inline-flex}.lists .example-icon{vertical-align:middle;display:inline-flex}.lists .explanation-tooltip{gap:var(--luzmo-spacing-2);text-align:start;flex-direction:column;display:flex}.lists .explanation-tooltip .tooltip-example{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-weight:var(--luzmo-font-weight-bold,700);white-space:pre-wrap;display:block}.lists .explanation-tooltip .example-icon{display:inline}", de = 750, $ = class extends h {
-	constructor(...e) {
-		super(...e), this.expressionResource = "formula", this.explanationDisplay = "tooltip", this._loadingDatasets = !1, this._describeTarget = null, this._validity = {
-			valid: !0,
-			error: null,
-			validating: !1
-		}, this._selectedCategory = "string", this._searchQuery = "", this._collapsedDatasets = /* @__PURE__ */ new Set(), this._validWordIdentifiers = M(this._store.functionDataMap, this._store.aggregationFunctionDataMap), this._validationSequence = 0;
-	}
-	static {
-		this.styles = b(ue);
-	}
-	get _emitDebounceMs() {
-		return de;
-	}
-	_onExpressionComputed(e) {
-		e !== this._lastEmittedExpression && (this._validate(e), this._emitExpressionChanged(e));
-	}
-	_setLoading(e) {
-		this._loadingDatasets = e, this._store.setLoading(e);
-	}
-	_validate(e) {
-		let t = this._localValidity(e), n = ++this._validationSequence;
-		if (!t.valid) {
-			this._emitValidity(t);
-			return;
-		}
-		if (!this.authKey || !this.authToken) {
-			this._emitValidity(this._offlineValidity(e));
-			return;
-		}
-		this._runBackendValidation(e, n);
-	}
-	async _runBackendValidation(e, t) {
-		this._emitValidity({
-			...this._validity,
-			validating: !0
-		});
-		try {
-			i.configure({
-				apiUrl: this.apiUrl,
-				authKey: this.authKey ?? "",
-				authToken: this.authToken ?? ""
-			});
-			let n = await i.validate(this.expressionResource, {
-				expression: e,
-				explain_error: !0
-			});
-			if (t !== this._validationSequence) return;
-			this._emitValidity({
-				valid: n.valid,
-				error: n.valid ? null : n.explanation ?? n.reason ?? null,
-				validating: !1
-			});
-		} catch (n) {
-			console.warn("[luzmo-formula-editor] Expression validation failed, falling back to local validation:", n), t === this._validationSequence && this._emitValidity(this._offlineValidity(e));
-		}
-	}
-	_localValidity(e) {
-		return e.trim() ? e.includes("##EMPTYARG-") ? {
-			valid: !1,
-			error: C("Complete all empty arguments.", { desc: "Formula editor validation error for empty arguments" }),
-			validating: !1
-		} : u.test(e) ? {
-			valid: !1,
-			error: C("Provide a value for every aggregation.", { desc: "Formula editor validation error for empty aggregations" }),
-			validating: !1
-		} : {
-			valid: !0,
-			error: null,
-			validating: !1
-		} : {
-			valid: !1,
-			error: null,
-			validating: !1
-		};
-	}
-	_offlineValidity(e) {
-		let t = N(e, this._validWordIdentifiers);
-		return t ? {
-			valid: !1,
-			error: C(w`'${t}' is not a valid column, function, or value.`, { desc: "Formula editor validation error for unresolved free text in the expression" }),
-			validating: !1
-		} : {
-			valid: !0,
-			error: null,
-			validating: !1
-		};
-	}
-	_emitValidity(e) {
-		this._validity = e, this.dispatchEvent(new CustomEvent("luzmo-validity-changed", {
-			bubbles: !0,
-			composed: !0,
-			detail: e
-		}));
-	}
-	_insertColumn(e) {
-		this.readonly || !e.columnId || this._store.onExtendExpression({
-			type: "column",
-			id: e.columnId,
-			datasetId: e.datasetId,
-			aggregationWidgetId: this._store.lastFocusedAggregationWidgetId,
-			targetEmptyArgumentId: this._store.lastFocusedEmptyArgumentId ?? void 0
-		});
-	}
-	_handleCategoryChange(e) {
-		let t = e.detail?.value?.[0];
-		t && (this._selectedCategory = t);
-	}
-	_handleSearchInput(e) {
-		this._searchQuery = e.target.value;
-	}
-	_toggleCollapse(e) {
-		let t = new Set(this._collapsedDatasets);
-		t.has(e) ? t.delete(e) : t.add(e), this._collapsedDatasets = t;
-	}
-	_handleDraggableActivate(e) {
-		if (e.stopPropagation(), this.readonly) return;
-		let { kind: t, value: n } = e.detail;
-		this._store.onExtendExpression({
-			type: t,
-			id: n,
-			aggregationWidgetId: this._store.lastFocusedAggregationWidgetId,
-			targetEmptyArgumentId: this._store.lastFocusedEmptyArgumentId ?? void 0
-		});
-	}
-	_handleDraggableDescribe(e) {
-		e.stopPropagation();
-		let { kind: t, value: n } = e.detail;
-		this._describeTarget = n ? {
-			kind: t,
-			id: n
-		} : null;
-	}
-	_renderLists() {
-		if (this.readonly) return y;
-		let e = this.explanationDisplay === "tooltip";
-		return v`
-      <div
-        class="lists"
-        part="lists"
-        @luzmo-formula-draggable-field-activate=${this._handleDraggableActivate}
-        @luzmo-formula-draggable-field-describe=${this._handleDraggableDescribe}
-      >
-        ${this.showAggregations ? U({
-			explanationTooltips: e,
-			loading: this._loadingDatasets,
-			size: this.size
-		}) : y}
-        ${q({
-			datasets: this._datasets,
-			loading: this._loadingDatasets,
-			contentLanguage: this.contentLanguage,
-			size: this.size,
-			searchQuery: this._searchQuery,
-			collapsed: this._collapsedDatasets,
-			onSearchInput: (e) => this._handleSearchInput(e),
-			onToggleCollapse: (e) => this._toggleCollapse(e),
-			onInsertColumn: (e) => this._insertColumn(e)
-		})}
-        ${le({
-			explanationTooltips: e,
-			loading: this._loadingDatasets,
-			size: this.size,
-			selectedCategory: this._selectedCategory,
-			onCategoryChange: (e) => this._handleCategoryChange(e)
-		})}
-        ${e ? y : se({
-			target: this._describeTarget,
-			size: this.size
-		})}
-      </div>
-    `;
-	}
-	_renderValidationFeedback() {
-		return this._validity.validating ? v`<div class="validating" part="validating" role="status" aria-live="polite">
-        <luzmo-progress-circle
-          indeterminate
-          size="s"
-          .label=${C("Validating formula", { desc: "Formula editor spinner label shown while the expression is being validated" })}
-        ></luzmo-progress-circle>
-        <span>${C("Validating…", { desc: "Formula editor status text shown while the expression is being validated" })}</span>
-      </div>` : !this._validity.valid && this._validity.error ? v`<div class="error" part="error" role="alert">
-        ${_(g)}
-        <span>${this._validity.error}</span>
-      </div>` : y;
-	}
-	render() {
-		let e = !this._validity.valid && !!this._validity.error && !this._validity.validating;
-		return v`
-      <div class="formula-editor" part="formula-editor">
-        ${this._renderFormulaCodeMirror({ hasError: e })} ${this._renderValidationFeedback()}
-        ${this._renderLists()}
-      </div>
-    `;
-	}
-};
-//#endregion
-//#region src/components/formula-editor/index.ts
-r([x({
-	type: String,
-	attribute: "expression-resource",
-	reflect: !0
-})], $.prototype, "expressionResource", void 0), r([x({
-	type: String,
-	attribute: "explanation-display",
-	reflect: !0
-})], $.prototype, "explanationDisplay", void 0), r([S()], $.prototype, "_loadingDatasets", void 0), r([S()], $.prototype, "_describeTarget", void 0), r([S()], $.prototype, "_validity", void 0), r([S()], $.prototype, "_selectedCategory", void 0), r([S()], $.prototype, "_searchQuery", void 0), r([S()], $.prototype, "_collapsedDatasets", void 0), $ = r([re()], $), customElements.get("luzmo-formula-editor") || customElements.define("luzmo-formula-editor", $);
-//#endregion
-export { $ as t };