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

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

@@ -0,0 +1,523 @@
+/*! * 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, t as n } from "./base-rAte-QzM.js";
+import { t as r } from "./decorate-B2TzfnLZ.js";
+import { t as i } from "./localized-mixin-FPDNaZhb.js";
+import { c as a, i as o, l as s, n as c, o as l, r as u, t as d, u as f } from "./chart-helpers-Dng_LGfq.js";
+import { t as p } from "./create-lazy-loader-BFqDG_WK.js";
+import { luzmoAlignLeft as m, luzmoInfoCircle as h, luzmoThumbsDown as g, luzmoThumbsUp as _ } from "@luzmo/icons";
+import "@luzmo/lucero/action-button";
+import "@luzmo/lucero/icon";
+import "@luzmo/lucero/overlay";
+import "@luzmo/lucero/popover";
+import { html as v, nothing as y, unsafeCSS as b } from "lit";
+import { property as x, state as S } from "lit/decorators.js";
+import { msg as C } from "@lit/localize";
+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";
+// src/components/interactive-viz-item/interactive-viz-item.module.scss?inline
+var w = ":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:flex-start;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)) - var(--luzmo-interactive-viz-item-chart-narrow-offset,var(--interactive-viz-item-chart-narrow-offset)))}}: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-narrow-offset:2.5rem;--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}", T = p(() => import("./add-to-dashboard/index.js")).load, E = [
+	"luzmo-filters",
+	"luzmo-item-option-panel",
+	"luzmo-item-slot-picker-panel"
+], D = p(() => Promise.all([
+	import("./filters/index.js"),
+	import("./item-option-panel/index.js"),
+	import("./item-slot-picker-panel/index.js")
+])), O = D.load, k = () => D.isLoaded() || E.every((e) => customElements.get(e) !== void 0), A = 0, j = 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.addToDashboard = !1, this.dashboardActions = null, this.controlled = !1, this._configPanelOpen = !1, this._configPanelPending = !1, this._configPanelLoadFailed = !1, this._rankingTriggerId = `interactive-viz-item-ranking-${++A}`, 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 [b(w)];
+	}
+	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 ? c(l(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;
+		else if (!this._configPanelPending) {
+			if (!k()) {
+				this._configPanelPending = !0;
+				try {
+					await O();
+				} 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);
+		}
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("addToDashboard") && this.addToDashboard && T().catch((e) => console.warn("Failed to load add to dashboard:", e));
+	}
+	_emitOptions(e) {
+		!this.controlled && this.chart && (this.chart = {
+			...this.chart,
+			options: e
+		}), this._dispatch("luzmo-chart-options-changed", { options: e });
+	}
+	_emitChart(e) {
+		this.controlled || (this.chart = 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 = d({
+			...l(this.chart),
+			options: this.chart.options
+		}, {
+			type: "chartAction",
+			actionType: e.mutationType,
+			key: r
+		});
+		this._emitOptions(i.options);
+	}
+	_currentRanking(e) {
+		return e.ranking ?? {
+			active: !1,
+			number: 5,
+			direction: a.Top
+		};
+	}
+	_currentSort(e) {
+		return e.sort ?? {
+			direction: f.Desc,
+			by: s.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 v`
+      <luzmo-picker
+        size=${this.size}
+        variant="highlight"
+        value=${n}
+        @change=${(t) => this._handleDropdownChange(e, t)}
+      >
+        ${t.map((e) => v`<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 v`
+        <luzmo-action-button
+          size=${this.size}
+          @click=${() => this._emitRankAndSort({
+			active: !0,
+			number: 5,
+			direction: a.Top
+		}, n)}
+        >
+          <luzmo-icon slot="icon" size="xs" .icon=${m}></luzmo-icon>
+          ${C("Show top 5", { desc: "Label to activate top-N ranking on a chart" })}
+        </luzmo-action-button>
+      `;
+		let r = t.direction === a.Bottom ? C("Bottom", { desc: "Ranking direction: keep the lowest values" }) : C("Top", { desc: "Ranking direction: keep the highest values" });
+		return v`
+      <luzmo-action-button size=${this.size} id=${this._rankingTriggerId}>
+        <luzmo-icon slot="icon" size="xs" .icon=${m}></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
+                  >${C("Top", { desc: "Ranking direction: keep the highest values" })}</luzmo-action-button
+                >
+                <luzmo-action-button value="bottom" emphasized
+                  >${C("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=${C("Sort descending", { desc: "Sort chart values in descending order" })}
+                >
+                  <luzmo-icon slot="icon" size="xs" .icon=${m}></luzmo-icon>
+                </luzmo-action-button>
+                <luzmo-action-button
+                  value="asc"
+                  emphasized
+                  label=${C("Sort ascending", { desc: "Sort chart values in ascending order" })}
+                >
+                  <luzmo-icon slot="icon" size="xs" class="icon-flipped" .icon=${m}></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]
+		});
+	}
+	_renderAddToDashboard() {
+		return this.addToDashboard ? v`
+      <luzmo-add-to-dashboard
+        size=${this.size}
+        language=${this.language}
+        .chart=${this.chart}
+        .dashboardActions=${this.dashboardActions}
+        .authKey=${this.authKey}
+        .authToken=${this.authToken}
+        .apiUrl=${this.apiUrl}
+      ></luzmo-add-to-dashboard>
+    ` : y;
+	}
+	_renderActions() {
+		return this.hideActions ? v`
+        <div class="chart-actions-bar">
+          <div class="chart-actions-primary"></div>
+          <slot name="chart-actions-extra"></slot>
+          ${this._renderAddToDashboard()}
+        </div>
+      ` : v`
+      <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>
+        ${this._renderAddToDashboard()}
+      </div>
+    `;
+	}
+	_renderChart() {
+		if (!this.chart) return y;
+		let e = l(this.chart);
+		return v`
+      <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=${this.canFilter ?? !1}
+        ></luzmo-embed-viz-item>
+      </div>
+    `;
+	}
+	_renderFeedback() {
+		let e = !this.hideFeedback && !!this.messageId, t = this._canShowConfigPanel, n = C("Loading", { desc: "Loading spinner label" });
+		return !e && !t ? y : v`
+      <div class="feedback-row">
+        ${e ? v`
+                <luzmo-action-group quiet size=${this.size}>
+                  <luzmo-action-button
+                    class="rating-btn-positive"
+                    value="positive"
+                    quiet
+                    label=${C("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=${_}></luzmo-icon>
+                  </luzmo-action-button>
+                  <luzmo-action-button
+                    class="rating-btn-negative"
+                    value="negative"
+                    quiet
+                    label=${C("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=${g}></luzmo-icon>
+                  </luzmo-action-button>
+                </luzmo-action-group>
+              ` : y}
+        ${t ? v`
+                <luzmo-action-button
+                  class="config-toggle"
+                  size=${this.size}
+                  quiet
+                  ?selected=${this._configPanelOpen}
+                  aria-expanded=${this._configPanelOpen}
+                  aria-label=${this._configPanelPending ? n : C("Configure chart", { desc: "Accessible label for the chart config toggle" })}
+                  @click=${() => this._toggleConfigPanel()}
+                >
+                  ${this._configPanelPending ? v`<luzmo-progress-circle slot="icon" size="s" indeterminate .label=${n}></luzmo-progress-circle>` : v`<luzmo-icon slot="icon" size="s" .icon=${h}></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 ? C("Failed to load the chart configuration. Please try again.", { desc: "Error message when the chart config panel fails to load" }) : ""}</span>
+              ` : y}
+      </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 y;
+		let e = this.chart, t = u(e.slots ?? []), n = o(t), r = e.options.theme ?? {};
+		return v`
+      <div class="config-panel" part="config-panel">
+        <luzmo-tabs selected="data" size=${this.size}>
+          <luzmo-tab value="data">${C("Data", { desc: "Label for the data section" })}</luzmo-tab>
+          <luzmo-tab value="options">${C("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}
+                  >${C("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 ? v`
+      <div class="answer" part="container">
+        ${this._renderActions()} ${this._renderChart()} ${this._renderFeedback()} ${this._renderConfigPanel()}
+      </div>
+    ` : v`
+        <div
+          class="answer"
+          part="container"
+        ></div>
+      `;
+	}
+};
+// src/components/interactive-viz-item/index.ts
+r([x({ type: Object })], j.prototype, "chart", void 0), r([x({ type: Object })], j.prototype, "feedback", void 0), r([x({
+	type: String,
+	attribute: "message-id"
+})], j.prototype, "messageId", void 0), r([x({
+	type: String,
+	attribute: "auth-key"
+})], j.prototype, "authKey", void 0), r([x({
+	type: String,
+	attribute: "auth-token"
+})], j.prototype, "authToken", void 0), r([x({
+	type: String,
+	attribute: "api-url"
+})], j.prototype, "apiUrl", void 0), r([x({
+	type: String,
+	attribute: "app-server"
+})], j.prototype, "appServer", void 0), r([x({
+	type: String,
+	attribute: "content-language"
+})], j.prototype, "contentLanguage", void 0), r([x({
+	type: Boolean,
+	attribute: "hide-actions",
+	reflect: !0
+})], j.prototype, "hideActions", void 0), r([x({
+	type: Boolean,
+	attribute: "hide-feedback",
+	reflect: !0
+})], j.prototype, "hideFeedback", void 0), r([x({
+	type: Boolean,
+	attribute: "hide-config-panel",
+	reflect: !0
+})], j.prototype, "hideConfigPanel", void 0), r([x({
+	type: Boolean,
+	attribute: "add-to-dashboard",
+	reflect: !0
+})], j.prototype, "addToDashboard", void 0), r([x({ attribute: !1 })], j.prototype, "dashboardActions", void 0), r([x({
+	type: Boolean,
+	reflect: !0
+})], j.prototype, "controlled", void 0), r([x({
+	attribute: "can-filter",
+	converter: { fromAttribute: (e) => e === null ? void 0 : "all" }
+})], j.prototype, "canFilter", void 0), r([S()], j.prototype, "_configPanelOpen", void 0), r([S()], j.prototype, "_configPanelPending", void 0), r([S()], j.prototype, "_configPanelLoadFailed", void 0), customElements.get("luzmo-interactive-viz-item") || customElements.define("luzmo-interactive-viz-item", j);
+export { j as t };