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

package/components/interactive-viz-item-cdShBZQA.js

@@ -1,722 +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 { i as e, n as t, t as n } from "./base-8L8Jt2vi.js";
-import { t as r } from "./decorate-DyMgX_Uh.js";
-import { t as i } from "./localized-mixin-DaLXe5J9.js";
-import { t as a } from "./create-lazy-loader-BO_oTDF5.js";
-import { luzmoAlignLeft as o, luzmoInfoCircle as s, luzmoThumbsDown as c, luzmoThumbsUp as l } from "@luzmo/icons";
-import "@luzmo/lucero/icon";
-import "@luzmo/lucero/overlay";
-import "@luzmo/lucero/popover";
-import { html as u, nothing as d, unsafeCSS as f } from "lit";
-import { property as p, state as m } from "lit/decorators.js";
-import { msg as h } from "@lit/localize";
-import "@luzmo/lucero/action-button";
-import "@luzmo/embed";
-import "@luzmo/lucero/action-group";
-import "@luzmo/lucero/field-label";
-import "@luzmo/lucero/number-field";
-import "@luzmo/lucero/picker";
-import "@luzmo/lucero/progress-circle";
-import "@luzmo/lucero/tabs";
-//#region src/components/interactive-viz-item/interactive-viz-item.module.scss?inline
-var g = ":host{box-sizing:border-box;display:block;container-type:inline-size}.answer{width:100%;display:block}.chart-actions-bar{justify-content:space-between;align-items:center;gap:var(--luzmo-interactive-viz-item-actions-gap,var(--interactive-viz-item-actions-gap));padding-block:var(--luzmo-interactive-viz-item-actions-padding-block,var(--interactive-viz-item-actions-padding-block));flex-wrap:nowrap;margin-block-start:var(--luzmo-interactive-viz-item-actions-margin-block-start,var(--interactive-viz-item-actions-margin-block-start));display:flex}.chart-actions-primary{gap:var(--luzmo-interactive-viz-item-actions-gap,var(--interactive-viz-item-actions-gap));flex-wrap:wrap;flex:1;align-items:center;min-width:0;display:flex}.ranking-content{gap:var(--luzmo-spacing-3);padding:var(--luzmo-spacing-3);flex-direction:column;display:flex}.ranking-row{gap:var(--luzmo-spacing-3);align-items:center;display:flex}.ranking-number{width:4rem}.icon-flipped{transform:scaleY(-1)}.chart-container{border-radius:var(--luzmo-interactive-viz-item-chart-border-radius,var(--interactive-viz-item-chart-border-radius));height:var(--luzmo-interactive-viz-item-chart-height,var(--interactive-viz-item-chart-height));overflow:hidden}.chart-container luzmo-embed-viz-item{width:100%;height:100%;display:block}.feedback-row{padding-block:var(--luzmo-interactive-viz-item-feedback-padding-block,var(--interactive-viz-item-feedback-padding-block));justify-content:space-between;align-items:center;display:flex}.rating-btn-positive{--luzmo-action-button-content-color-default-selected:var(--luzmo-interactive-viz-item-rating-positive-color,var(--interactive-viz-item-rating-positive-color));--luzmo-action-button-content-color-hover-selected:var(--luzmo-interactive-viz-item-rating-positive-color,var(--interactive-viz-item-rating-positive-color));--luzmo-action-button-content-color-down-selected:var(--luzmo-interactive-viz-item-rating-positive-color,var(--interactive-viz-item-rating-positive-color));--luzmo-action-button-content-color-focus-selected:var(--luzmo-interactive-viz-item-rating-positive-color,var(--interactive-viz-item-rating-positive-color));--luzmo-action-button-background-color-default-selected:var(--luzmo-interactive-viz-item-rating-selected-background,var(--interactive-viz-item-rating-selected-background));--luzmo-action-button-background-color-hover-selected:var(--luzmo-interactive-viz-item-rating-selected-background,var(--interactive-viz-item-rating-selected-background));--luzmo-action-button-background-color-down-selected:var(--luzmo-interactive-viz-item-rating-selected-background,var(--interactive-viz-item-rating-selected-background));--luzmo-action-button-background-color-focus-selected:var(--luzmo-interactive-viz-item-rating-selected-background,var(--interactive-viz-item-rating-selected-background))}.rating-btn-negative{--luzmo-action-button-content-color-default-selected:var(--luzmo-interactive-viz-item-rating-negative-color,var(--interactive-viz-item-rating-negative-color));--luzmo-action-button-content-color-hover-selected:var(--luzmo-interactive-viz-item-rating-negative-color,var(--interactive-viz-item-rating-negative-color));--luzmo-action-button-content-color-down-selected:var(--luzmo-interactive-viz-item-rating-negative-color,var(--interactive-viz-item-rating-negative-color));--luzmo-action-button-content-color-focus-selected:var(--luzmo-interactive-viz-item-rating-negative-color,var(--interactive-viz-item-rating-negative-color));--luzmo-action-button-background-color-default-selected:var(--luzmo-interactive-viz-item-rating-selected-background,var(--interactive-viz-item-rating-selected-background));--luzmo-action-button-background-color-hover-selected:var(--luzmo-interactive-viz-item-rating-selected-background,var(--interactive-viz-item-rating-selected-background));--luzmo-action-button-background-color-down-selected:var(--luzmo-interactive-viz-item-rating-selected-background,var(--interactive-viz-item-rating-selected-background));--luzmo-action-button-background-color-focus-selected:var(--luzmo-interactive-viz-item-rating-selected-background,var(--interactive-viz-item-rating-selected-background))}.config-toggle{--luzmo-action-button-border-radius:32px;margin-inline-start:auto}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.config-panel{border:1px solid var(--luzmo-interactive-viz-item-config-panel-border-color,var(--interactive-viz-item-config-panel-border-color));border-radius:var(--luzmo-interactive-viz-item-config-panel-border-radius,var(--interactive-viz-item-config-panel-border-radius));padding:var(--luzmo-interactive-viz-item-config-panel-padding,var(--interactive-viz-item-config-panel-padding));background:var(--luzmo-interactive-viz-item-config-panel-background,var(--interactive-viz-item-config-panel-background));margin-block-start:var(--luzmo-spacing-2)}.config-panel luzmo-tab-panel[selected]{padding-block-start:var(--luzmo-spacing-4);display:block}.config-panel luzmo-item-option-panel,.config-panel luzmo-item-slot-picker-panel,.config-panel luzmo-filters{width:100%;max-height:15rem;scrollbar-width:thin;scrollbar-color:var(--luzmo-interactive-viz-item-config-panel-border-color,var(--interactive-viz-item-config-panel-border-color)) transparent;padding-inline-end:var(--luzmo-spacing-3);overflow-y:auto}.edit-grid{min-height:12.5rem;display:flex}.edit-column{gap:var(--luzmo-spacing-3);flex-direction:column;display:flex}.edit-column:first-child{flex-shrink:0;max-width:15rem}.edit-column-filters{border-inline-start:1px solid var(--luzmo-interactive-viz-item-config-panel-border-color,var(--interactive-viz-item-config-panel-border-color));flex:1;min-width:18.75rem;padding-inline-start:var(--luzmo-spacing-5)}@container (width<=520px){.edit-grid{flex-direction:column}.edit-column,.edit-column:first-child{width:100%;min-width:0;max-width:100%}.edit-column-filters{border-inline-start:none;border-block-start:1px solid var(--luzmo-interactive-viz-item-config-panel-border-color,var(--interactive-viz-item-config-panel-border-color));min-width:0;margin-block-start:var(--luzmo-spacing-3);padding-block-start:var(--luzmo-spacing-4);padding-inline-start:0}}@container (width<=768px){.chart-container{height:calc(var(--luzmo-interactive-viz-item-chart-height,var(--interactive-viz-item-chart-height)) - 2.5rem)}}:host{--interactive-viz-item-actions-gap:var(--luzmo-spacing-3);--interactive-viz-item-actions-padding-block:var(--luzmo-spacing-3);--interactive-viz-item-actions-margin-block-start:var(--luzmo-spacing-5);--interactive-viz-item-chart-height:20rem;--interactive-viz-item-chart-border-radius:var(--luzmo-border-radius);--interactive-viz-item-feedback-padding-block:var(--luzmo-spacing-4);--interactive-viz-item-config-panel-padding:var(--luzmo-spacing-5);--interactive-viz-item-config-panel-border-color:var(--luzmo-border-color);--interactive-viz-item-config-panel-border-radius:var(--luzmo-border-radius);--interactive-viz-item-config-panel-background:var(--luzmo-background-color);--interactive-viz-item-rating-positive-color:var(--luzmo-positive-color,#12855a);--interactive-viz-item-rating-negative-color:var(--luzmo-negative-color,#ca221c);--interactive-viz-item-rating-selected-background:var(--luzmo-background-color-focus,#0000000f)}:host([size=s]){--interactive-viz-item-chart-height:17.5rem}:host([size=l]){--interactive-viz-item-chart-height:22rem}:host([size=xl]){--interactive-viz-item-chart-height:24rem}", _ = /* @__PURE__ */ function(e) {
-	return e.Top = "top", e.Bottom = "bottom", e;
-}({}), v = /* @__PURE__ */ function(e) {
-	return e.Asc = "asc", e.Desc = "desc", e;
-}({}), y = /* @__PURE__ */ function(e) {
-	return e.Measure = "measure", e.Category = "category", e;
-}({}), b = 5, x = Array.isArray;
-function S(e) {
-	return typeof e == "string";
-}
-function C(e) {
-	let t = { ...e };
-	return !t.datasetId && t.set && (t.datasetId = t.set), !t.set && t.datasetId && (t.set = t.datasetId), !t.columnId && t.column && (t.columnId = t.column), !t.column && t.columnId && (t.column = t.columnId), !t.formulaId && t.formula && (t.formulaId = t.formula), !t.formula && t.formulaId && (t.formula = t.formulaId), t;
-}
-function w(e) {
-	return x(e) ? e : Object.entries(e).map(([e, t]) => ({
-		name: e,
-		content: x(t) ? t : []
-	}));
-}
-function T(e) {
-	let t = /* @__PURE__ */ new Set();
-	for (let n of e) for (let e of n.content) {
-		let n = e.datasetId ?? e.set;
-		S(n) && t.add(n);
-	}
-	return [...t];
-}
-function E(e) {
-	let t = w(e.slots ?? []), n = e.options ?? {}, r = n.interactivity;
-	return {
-		type: e.type,
-		options: {
-			...n,
-			interactivity: {
-				...r,
-				scheduledExport: !1
-			}
-		},
-		slots: t.map((e) => ({
-			...e,
-			content: x(e.content) ? e.content.map((e) => C(e)) : []
-		})),
-		filters: e.filters
-	};
-}
-function D(e, t) {
-	return {
-		...e,
-		options: {
-			...e.options,
-			theme: {
-				...e.options.theme,
-				...t
-			}
-		}
-	};
-}
-function O(e) {
-	let t = e.find((e) => e.name === "measure" || e.name === "measures");
-	if (t && t.content.length > 1) return !0;
-	let n = e.find((e) => e.name === "legend");
-	return n ? n.content.length > 0 : !1;
-}
-function k(e) {
-	let t = [], n = e.options;
-	switch (e.type) {
-		case "area-chart":
-		case "bar-chart":
-		case "column-chart":
-			if (t.push({
-				type: "rankingPicker",
-				mutationType: "rankAndSort",
-				ranking: n.ranking ?? {
-					active: !1,
-					number: 5,
-					direction: _.Top
-				},
-				sort: n.sort ?? {
-					direction: v.Desc,
-					by: y.Measure
-				},
-				importance: 100
-			}), O(e.slots)) {
-				let r = e.type === "area-chart", i = r ? [
-					{
-						key: "stacked",
-						label: "Stacked"
-					},
-					{
-						key: "unstacked",
-						label: "Unstacked"
-					},
-					{
-						key: "100",
-						label: "100%"
-					},
-					{
-						key: "stream",
-						label: "Stream"
-					}
-				] : [
-					{
-						key: "grouped",
-						label: "Grouped"
-					},
-					{
-						key: "stacked",
-						label: "Stacked"
-					},
-					{
-						key: "100",
-						label: "100%"
-					}
-				], a = r ? "stacked" : "grouped";
-				t.push({
-					type: "optionDropdown",
-					mutationType: "mode",
-					values: i,
-					currentValue: n.mode ?? a,
-					importance: 90
-				});
-			}
-			break;
-		case "donut-chart": {
-			let e = n.display ?? {};
-			t.push({
-				type: "optionDropdown",
-				mutationType: "donutLabelDisplay",
-				values: [{
-					key: "withLegend",
-					label: "With legend"
-				}, {
-					key: "withLabels",
-					label: "With labels"
-				}],
-				currentValue: e.categoryLabels === !0 ? "withLabels" : "withLegend",
-				importance: 90
-			});
-			break;
-		}
-		case "bubble-chart": {
-			let e = n.display ?? {};
-			t.push({
-				type: "optionDropdown",
-				mutationType: "bubbleValues",
-				values: [
-					{
-						key: "none",
-						label: "No values"
-					},
-					{
-						key: "absolute",
-						label: "Absolute"
-					},
-					{
-						key: "percentage",
-						label: "Percentage"
-					}
-				],
-				currentValue: e.bubbleValues ?? e.values ?? "none",
-				importance: 100
-			});
-			break;
-		}
-	}
-	return t.sort((e, t) => t.importance - e.importance);
-}
-function A(e, t, n) {
-	let r = e.options;
-	switch (t) {
-		case "mode": return {
-			...e,
-			options: {
-				...r,
-				mode: n
-			}
-		};
-		case "donutLabelDisplay": {
-			let t = { ...r.display ?? {} };
-			return n === "withLabels" ? (t.legend = !1, t.categoryLabels = !0) : (t.legend = !0, t.categoryLabels = !1), {
-				...e,
-				options: {
-					...r,
-					display: t
-				}
-			};
-		}
-		case "bubbleValues": {
-			let t = { ...r.display ?? {} };
-			return t.bubbleLabels = t.bubbleLabels !== !1, t.bubbleValues = n, {
-				...e,
-				options: {
-					...r,
-					display: t
-				}
-			};
-		}
-		default: return e;
-	}
-}
-function j(e, t) {
-	switch (t.type) {
-		case "slots": return {
-			...e,
-			slots: t.slotsContents
-		};
-		case "options": return {
-			...e,
-			options: t.options
-		};
-		case "filters": return {
-			...e,
-			filters: t.filters
-		};
-		case "chartAction": return A(e, t.actionType, t.key);
-		case "rankAndSort": return {
-			...e,
-			options: {
-				...e.options,
-				ranking: t.ranking,
-				sort: t.sort
-			}
-		};
-		case "fullReplace": return t.chart;
-		default: return e;
-	}
-}
-//#endregion
-//#region src/components/interactive-viz-item/load-config-panel.ts
-var M = [
-	"luzmo-filters",
-	"luzmo-item-option-panel",
-	"luzmo-item-slot-picker-panel"
-], N = a(() => Promise.all([
-	import("./filters/index.js"),
-	import("./item-option-panel/index.js"),
-	import("./item-slot-picker-panel/index.js")
-])), P = N.load, F = () => N.isLoaded() || M.every((e) => customElements.get(e) !== void 0), I = 0, L = class extends i(t(e, { validSizes: Object.values(n) })) {
-	constructor(...e) {
-		super(...e), this.chart = null, this.feedback = null, this.messageId = "", this.authKey = "", this.authToken = "", this.apiUrl = "https://api.luzmo.com", this.appServer = "https://app.luzmo.com", this.contentLanguage = "", this.hideActions = !1, this.hideFeedback = !1, this.hideConfigPanel = !1, this._configPanelOpen = !1, this._configPanelPending = !1, this._configPanelLoadFailed = !1, this._rankingTriggerId = `interactive-viz-item-ranking-${++I}`, this._handleSlotsChanged = (e) => {
-			this.chart && this._emitChart({
-				...this.chart,
-				slots: e.detail.slotsContents
-			});
-		}, this._handleFiltersChanged = (e) => {
-			this.chart && this._emitChart({
-				...this.chart,
-				filters: e.detail.filters
-			});
-		}, this._handleOptionsChanged = (e) => {
-			if (!this.chart) return;
-			let t = e.detail.options;
-			if (!t) return;
-			let n = this.chart.options.theme ?? {};
-			this._emitChart({
-				...this.chart,
-				options: {
-					...t,
-					theme: { ...n }
-				}
-			});
-		};
-	}
-	static get styles() {
-		return [f(g)];
-	}
-	get _effectiveContentLanguage() {
-		return this.contentLanguage || this.language;
-	}
-	_dispatch(e, t) {
-		let n = new CustomEvent(e, {
-			detail: t,
-			bubbles: !0,
-			composed: !0
-		});
-		this.dispatchEvent(n);
-	}
-	get _chartActions() {
-		return this.chart ? k(E(this.chart)) : [];
-	}
-	get _rating() {
-		return this.feedback?.rating ?? 0;
-	}
-	get _canShowConfigPanel() {
-		return !!this.chart && !this.hideConfigPanel;
-	}
-	async _toggleConfigPanel() {
-		if (this._configPanelLoadFailed = !1, this._configPanelOpen) {
-			this._configPanelOpen = !1;
-			return;
-		}
-		if (!this._configPanelPending) {
-			if (!F()) {
-				this._configPanelPending = !0;
-				try {
-					await P();
-				} catch (e) {
-					console.warn("Failed to load the chart configuration panel:", e), this._configPanelLoadFailed = !0;
-					return;
-				} finally {
-					this._configPanelPending = !1;
-				}
-			}
-			!this.isConnected || !this._canShowConfigPanel || (this._configPanelOpen = !0);
-		}
-	}
-	_emitOptions(e) {
-		this._dispatch("luzmo-chart-options-changed", { options: e });
-	}
-	_emitChart(e) {
-		this._dispatch("luzmo-chart-changed", { chart: e });
-	}
-	_handleDropdownChange(e, t) {
-		if (!this.chart) return;
-		t.stopPropagation();
-		let n = t.detail, r = typeof n == "string" ? n : n?.value ?? t.target?.value;
-		if (!r) return;
-		let i = j(E(this.chart), {
-			type: "chartAction",
-			actionType: e.mutationType,
-			key: r
-		});
-		this._emitOptions(i.options);
-	}
-	_currentRanking(e) {
-		return e.ranking ?? {
-			active: !1,
-			number: 5,
-			direction: _.Top
-		};
-	}
-	_currentSort(e) {
-		return e.sort ?? {
-			direction: v.Desc,
-			by: y.Measure
-		};
-	}
-	_emitRankAndSort(e, t) {
-		this.chart && this._emitOptions({
-			...this.chart.options,
-			ranking: e,
-			sort: t
-		});
-	}
-	_renderOptionDropdown(e) {
-		let t = e.values ?? [], n = e.currentValue || t[0]?.key || "";
-		return u`
-      <luzmo-picker
-        size=${this.size}
-        variant="highlight"
-        value=${n}
-        @change=${(t) => this._handleDropdownChange(e, t)}
-      >
-        ${t.map((e) => u`<luzmo-menu-item value=${e.key}>${e.label}</luzmo-menu-item>`)}
-      </luzmo-picker>
-    `;
-	}
-	_renderRankingPicker(e) {
-		let t = this._currentRanking(e), n = this._currentSort(e);
-		if (!t.active) return u`
-        <luzmo-action-button
-          size=${this.size}
-          @click=${() => this._emitRankAndSort({
-			active: !0,
-			number: 5,
-			direction: _.Top
-		}, n)}
-        >
-          <luzmo-icon slot="icon" size="xs" .icon=${o}></luzmo-icon>
-          ${h("Show top 5", { desc: "Label to activate top-N ranking on a chart" })}
-        </luzmo-action-button>
-      `;
-		let r = t.direction === _.Bottom ? h("Bottom", { desc: "Ranking direction: keep the lowest values" }) : h("Top", { desc: "Ranking direction: keep the highest values" });
-		return u`
-      <luzmo-action-button size=${this.size} id=${this._rankingTriggerId}>
-        <luzmo-icon slot="icon" size="xs" .icon=${o}></luzmo-icon>
-        ${r} ${t.number || 5}
-      </luzmo-action-button>
-
-      <luzmo-overlay type="auto" placement="bottom-start" trigger=${`${this._rankingTriggerId}@click`}>
-        <luzmo-popover>
-          <div class="ranking-content">
-            <div class="ranking-row">
-              <luzmo-action-group
-                size=${this.size}
-                compact
-                selects="single"
-                .selected=${[t.direction]}
-                @change=${(t) => this._handleDirectionChange(e, t)}
-              >
-                <luzmo-action-button value="top" emphasized
-                  >${h("Top", { desc: "Ranking direction: keep the highest values" })}</luzmo-action-button
-                >
-                <luzmo-action-button value="bottom" emphasized
-                  >${h("Bottom", { desc: "Ranking direction: keep the lowest values" })}</luzmo-action-button
-                >
-              </luzmo-action-group>
-
-              <luzmo-number-field
-                class="ranking-number"
-                size=${this.size}
-                hide-stepper
-                min="1"
-                max="100"
-                step="1"
-                .value=${t.number}
-                @change=${(t) => this._handleNumberChange(e, t)}
-                @input=${(t) => this._handleNumberChange(e, t)}
-              ></luzmo-number-field>
-            </div>
-
-            <div class="ranking-row">
-              <luzmo-action-group
-                size=${this.size}
-                compact
-                selects="single"
-                .selected=${[n.by]}
-                @change=${(t) => this._handleSortByChange(e, t)}
-              >
-                <luzmo-action-button value="measure" emphasized>123</luzmo-action-button>
-                <luzmo-action-button value="category" emphasized>ABC</luzmo-action-button>
-              </luzmo-action-group>
-
-              <luzmo-action-group
-                size=${this.size}
-                compact
-                selects="single"
-                .selected=${[n.direction]}
-                @change=${(t) => this._handleSortDirectionChange(e, t)}
-              >
-                <luzmo-action-button
-                  value="desc"
-                  emphasized
-                  label=${h("Sort descending", { desc: "Sort chart values in descending order" })}
-                >
-                  <luzmo-icon slot="icon" size="xs" .icon=${o}></luzmo-icon>
-                </luzmo-action-button>
-                <luzmo-action-button
-                  value="asc"
-                  emphasized
-                  label=${h("Sort ascending", { desc: "Sort chart values in ascending order" })}
-                >
-                  <luzmo-icon slot="icon" size="xs" class="icon-flipped" .icon=${o}></luzmo-icon>
-                </luzmo-action-button>
-              </luzmo-action-group>
-            </div>
-          </div>
-        </luzmo-popover>
-      </luzmo-overlay>
-    `;
-	}
-	_handleDirectionChange(e, t) {
-		t.stopPropagation();
-		let n = t.target?.selected;
-		n?.length && this._emitRankAndSort({
-			...this._currentRanking(e),
-			direction: n[0]
-		}, this._currentSort(e));
-	}
-	_handleNumberChange(e, t) {
-		t.stopPropagation();
-		let n = t.target?.value, r = typeof n == "number" ? n : Number.parseInt(String(n), 10);
-		!Number.isNaN(r) && r >= 1 && this._emitRankAndSort({
-			...this._currentRanking(e),
-			number: r
-		}, this._currentSort(e));
-	}
-	_handleSortByChange(e, t) {
-		t.stopPropagation();
-		let n = t.target?.selected;
-		n?.length && this._emitRankAndSort(this._currentRanking(e), {
-			...this._currentSort(e),
-			by: n[0]
-		});
-	}
-	_handleSortDirectionChange(e, t) {
-		t.stopPropagation();
-		let n = t.target?.selected;
-		n?.length && this._emitRankAndSort(this._currentRanking(e), {
-			...this._currentSort(e),
-			direction: n[0]
-		});
-	}
-	_renderActions() {
-		return this.hideActions ? u`
-        <div class="chart-actions-bar">
-          <div class="chart-actions-primary"></div>
-          <slot name="chart-actions-extra"></slot>
-        </div>
-      ` : u`
-      <div class="chart-actions-bar">
-        <div class="chart-actions-primary">
-          ${this._chartActions.map((e) => e.type === "optionDropdown" ? this._renderOptionDropdown(e) : this._renderRankingPicker(e))}
-        </div>
-        <slot name="chart-actions-extra"></slot>
-      </div>
-    `;
-	}
-	_renderChart() {
-		if (!this.chart) return d;
-		let e = E(this.chart);
-		return u`
-      <div class="chart-container" part="chart-container">
-        <luzmo-embed-viz-item
-          .type=${e.type}
-          .options=${e.options}
-          .slots=${e.slots}
-          .filters=${e.filters ?? []}
-          .authKey=${this.authKey}
-          .authToken=${this.authToken}
-          .apiHost=${this.apiUrl}
-          .appServer=${this.appServer}
-          .language=${this._effectiveContentLanguage}
-          .canFilter=${!1}
-        ></luzmo-embed-viz-item>
-      </div>
-    `;
-	}
-	_renderFeedback() {
-		let e = !this.hideFeedback && !!this.messageId, t = this._canShowConfigPanel, n = h("Loading", { desc: "Loading spinner label" });
-		return !e && !t ? d : u`
-      <div class="feedback-row">
-        ${e ? u`
-                <luzmo-action-group quiet size=${this.size}>
-                  <luzmo-action-button
-                    class="rating-btn-positive"
-                    value="positive"
-                    quiet
-                    label=${h("Good response", { desc: "Accessible label for the positive feedback button" })}
-                    ?selected=${this._rating === 1}
-                    @click=${() => this._toggleRating(!0)}
-                  >
-                    <luzmo-icon slot="icon" size="s" .icon=${l}></luzmo-icon>
-                  </luzmo-action-button>
-                  <luzmo-action-button
-                    class="rating-btn-negative"
-                    value="negative"
-                    quiet
-                    label=${h("Bad response", { desc: "Accessible label for the negative feedback button" })}
-                    ?selected=${this._rating === -1}
-                    @click=${() => this._toggleRating(!1)}
-                  >
-                    <luzmo-icon slot="icon" size="s" .icon=${c}></luzmo-icon>
-                  </luzmo-action-button>
-                </luzmo-action-group>
-              ` : d}
-        ${t ? u`
-                <luzmo-action-button
-                  class="config-toggle"
-                  size=${this.size}
-                  quiet
-                  ?selected=${this._configPanelOpen}
-                  aria-expanded=${this._configPanelOpen}
-                  aria-label=${this._configPanelPending ? n : h("Configure chart", { desc: "Accessible label for the chart config toggle" })}
-                  @click=${() => this._toggleConfigPanel()}
-                >
-                  ${this._configPanelPending ? u`<luzmo-progress-circle slot="icon" size="s" indeterminate .label=${n}></luzmo-progress-circle>` : u`<luzmo-icon slot="icon" size="s" .icon=${s}></luzmo-icon>`}
-                </luzmo-action-button>
-                <span class="sr-only" role="status" aria-live="polite">${this._configPanelPending ? n : ""}</span>
-                <span class="sr-only" role="alert">${this._configPanelLoadFailed ? h("Failed to load the chart configuration. Please try again.", { desc: "Error message when the chart config panel fails to load" }) : ""}</span>
-              ` : d}
-      </div>
-    `;
-	}
-	_toggleRating(e) {
-		let t = e ? 1 : -1, n = this._rating === t ? 0 : t;
-		this._dispatch("luzmo-feedback-changed", {
-			rating: n,
-			comment: this.feedback?.comment
-		});
-	}
-	_renderConfigPanel() {
-		if (!this.chart || this.hideConfigPanel || !this._configPanelOpen) return d;
-		let e = this.chart, t = w(e.slots ?? []), n = T(t), r = e.options.theme ?? {};
-		return u`
-      <div class="config-panel" part="config-panel">
-        <luzmo-tabs selected="data" size=${this.size}>
-          <luzmo-tab value="data">${h("Data", { desc: "Label for the data section" })}</luzmo-tab>
-          <luzmo-tab value="options">${h("Options", { desc: "Label for the options section" })}</luzmo-tab>
-
-          <luzmo-tab-panel value="data">
-            <div class="edit-grid">
-              <div class="edit-column">
-                <luzmo-item-slot-picker-panel
-                  size=${this.size}
-                  slot-menu-placement="bottom-end"
-                  .itemType=${e.type}
-                  .slotsContents=${t}
-                  .datasetIds=${n}
-                  .authKey=${this.authKey}
-                  .authToken=${this.authToken}
-                  .apiUrl=${this.apiUrl}
-                  .language=${this.language}
-                  .contentLanguage=${this._effectiveContentLanguage}
-                  @luzmo-slots-contents-changed=${this._handleSlotsChanged}
-                ></luzmo-item-slot-picker-panel>
-              </div>
-              <div class="edit-column edit-column-filters">
-                <luzmo-field-label size=${this.size}
-                  >${h("Filters", { desc: "Label for the filters section" })}</luzmo-field-label
-                >
-                <luzmo-filters
-                  size=${this.size}
-                  .datasetIds=${n}
-                  .filters=${e.filters ?? []}
-                  .authKey=${this.authKey}
-                  .authToken=${this.authToken}
-                  .apiUrl=${this.apiUrl}
-                  .language=${this.language}
-                  .contentLanguage=${this._effectiveContentLanguage}
-                  @luzmo-filters-changed=${this._handleFiltersChanged}
-                ></luzmo-filters>
-              </div>
-            </div>
-          </luzmo-tab-panel>
-
-          <luzmo-tab-panel value="options">
-            <luzmo-item-option-panel
-              size=${this.size}
-              .itemType=${e.type}
-              .options=${e.options || {}}
-              .slots=${t}
-              .theme=${r}
-              .authKey=${this.authKey}
-              .authToken=${this.authToken}
-              .apiUrl=${this.apiUrl}
-              .language=${this.language}
-              @luzmo-options-changed=${this._handleOptionsChanged}
-            ></luzmo-item-option-panel>
-          </luzmo-tab-panel>
-        </luzmo-tabs>
-      </div>
-    `;
-	}
-	render() {
-		return this.chart ? u`
-      <div class="answer" part="container">
-        ${this._renderActions()} ${this._renderChart()} ${this._renderFeedback()} ${this._renderConfigPanel()}
-      </div>
-    ` : u`
-        <div
-          class="answer"
-          part="container"
-        ></div>
-      `;
-	}
-};
-//#endregion
-//#region src/components/interactive-viz-item/index.ts
-r([p({ type: Object })], L.prototype, "chart", void 0), r([p({ type: Object })], L.prototype, "feedback", void 0), r([p({
-	type: String,
-	attribute: "message-id"
-})], L.prototype, "messageId", void 0), r([p({
-	type: String,
-	attribute: "auth-key"
-})], L.prototype, "authKey", void 0), r([p({
-	type: String,
-	attribute: "auth-token"
-})], L.prototype, "authToken", void 0), r([p({
-	type: String,
-	attribute: "api-url"
-})], L.prototype, "apiUrl", void 0), r([p({
-	type: String,
-	attribute: "app-server"
-})], L.prototype, "appServer", void 0), r([p({
-	type: String,
-	attribute: "content-language"
-})], L.prototype, "contentLanguage", void 0), r([p({
-	type: Boolean,
-	attribute: "hide-actions",
-	reflect: !0
-})], L.prototype, "hideActions", void 0), r([p({
-	type: Boolean,
-	attribute: "hide-feedback",
-	reflect: !0
-})], L.prototype, "hideFeedback", void 0), r([p({
-	type: Boolean,
-	attribute: "hide-config-panel",
-	reflect: !0
-})], L.prototype, "hideConfigPanel", void 0), r([m()], L.prototype, "_configPanelOpen", void 0), r([m()], L.prototype, "_configPanelPending", void 0), r([m()], L.prototype, "_configPanelLoadFailed", void 0), customElements.get("luzmo-interactive-viz-item") || customElements.define("luzmo-interactive-viz-item", L);
-//#endregion
-export { T as a, b as c, v as d, w as i, _ as l, j as n, D as o, k as r, E as s, L as t, y as u };