@luzmo/analytics-components-kit 1.3.0 → 2.0.0

package/components/{interactive-viz-item-BKLOmawA.js → interactive-viz-item-CngeQ579.js}

@@ -18,20 +18,20 @@
  * SOFTWARE.
  * */
 import "./tokens-6HmQYnEP.js";
-import { i as e, n as t, t as n } from "./base-rAte-QzM.js";
+import { i as e, n as t, t as n } from "./base-BqwRKT4V.js";
 import { t as r } from "./decorate-B2TzfnLZ.js";
-import { t as i } from "./localized-mixin-FPDNaZhb.js";
+import { t as i } from "./localized-mixin-BdXrQldH.js";
 import { n as a } from "./is-same-option-value-B2oyvEqT.js";
-import { c as o, i as s, l as c, n as l, o as u, r as d, t as f, u as p } from "./chart-helpers-Cbl3sRra.js";
-import { t as m } from "./create-lazy-loader-BFqDG_WK.js";
-import { luzmoAlignLeft as h, luzmoInfoCircle as g, luzmoThumbsDown as _, luzmoThumbsUp as v } from "@luzmo/icons";
+import { a as o, d as s, i as c, l, n as u, r as d, s as f, t as p, u as m } from "./chart-helpers-BKeMLhov.js";
+import { t as h } from "./create-lazy-loader-BFqDG_WK.js";
+import { luzmoAlignLeft as g, luzmoInfoCircle as _, luzmoThumbsDown as v, luzmoThumbsUp as y } from "@luzmo/icons";
 import "@luzmo/lucero/action-button";
 import "@luzmo/lucero/icon";
 import "@luzmo/lucero/overlay";
 import "@luzmo/lucero/popover";
-import { html as y, nothing as b, unsafeCSS as x } from "lit";
-import { property as S, state as C } from "lit/decorators.js";
-import { msg as w } from "@lit/localize";
+import { html as b, nothing as x, unsafeCSS as S } from "lit";
+import { property as C, query as w, state as T } from "lit/decorators.js";
+import { msg as E } from "@lit/localize";
 import "@luzmo/embed";
 import "@luzmo/lucero/action-group";
 import "@luzmo/lucero/field-label";
@@ -40,17 +40,19 @@ 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 T = ":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}", E = m(() => import("./add-to-dashboard/index.js")).load, D = [
+var D = ":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-bar[hidden]{display:none}.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}", O = h(() => import("./add-to-dashboard/index.js")).load, k = [
 	"luzmo-filters",
 	"luzmo-item-option-panel",
 	"luzmo-item-slot-picker-panel"
-], O = m(() => Promise.all([
+], A = h(() => Promise.all([
 	import("./filters/index.js"),
 	import("./item-option-panel/index.js"),
 	import("./item-slot-picker-panel/index.js")
-])), k = O.load, A = () => O.isLoaded() || D.every((e) => customElements.get(e) !== void 0), j = 0, M = {}, N = (e, t) => t !== null && a(JSON.parse(JSON.stringify(e)), JSON.parse(JSON.stringify(t))), P = class extends i(t(e, { validSizes: Object.values(n) })) {
+])), j = A.load, M = () => A.isLoaded() || k.every((e) => customElements.get(e) !== void 0), N = 0, P = {}, F = (e, t) => t !== null && a(JSON.parse(JSON.stringify(e)), JSON.parse(JSON.stringify(t))), I = 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.liveInteractions = !1, this._configPanelOpen = !1, this._configPanelPending = !1, this._configPanelLoadFailed = !1, this._rankingTriggerId = `interactive-viz-item-ranking-${++j}`, this._interactionGeneration = 0, this._openInteractions = /* @__PURE__ */ new Map(), this._ownCharts = [], this._handleSlotsChanged = (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.hideConfigOptions = !1, this.slotSelects = "multiple", this.slotGrows = !1, this.slotsConfiguration = null, this.customOptionsConfiguration = null, this.customTranslations = null, this.chartRenderOptions = null, this.addToDashboard = !1, this.dashboardActions = null, this.controlled = !1, this.liveInteractions = !1, this._configPanelOpen = !1, this._actionsSlotHasContent = !1, this._configPanelPending = !1, this._configPanelLoadFailed = !1, this._rankingTriggerId = `interactive-viz-item-ranking-${++N}`, this._interactionGeneration = 0, this._openInteractions = /* @__PURE__ */ new Map(), this._ownCharts = [], this._handleActionsSlotChange = (e) => {
+			this._actionsSlotHasContent = e.target.assignedElements({ flatten: !0 }).length > 0;
+		}, this._handleSlotsChanged = (e) => {
 			this.chart && this._emitChart({
 				...this.chart,
 				slots: e.detail.slotsContents
@@ -93,7 +95,7 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 		};
 	}
 	static get styles() {
-		return [x(T)];
+		return [S(D)];
 	}
 	get _effectiveContentLanguage() {
 		return this.contentLanguage || this.language;
@@ -107,21 +109,21 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 		this.dispatchEvent(n);
 	}
 	get _chartActions() {
-		return this.chart ? l(u(this.chart)) : [];
+		return this.chart ? u(f(this.chart)) : [];
 	}
 	get _rating() {
 		return this.feedback?.rating ?? 0;
 	}
 	get _canShowConfigPanel() {
-		return !this.chart || this.hideConfigPanel ? !1 : !this.chart.inlineData || s(u(this.chart).slots).length > 0;
+		return !this.chart || this.hideConfigPanel ? !1 : !this.chart.inlineData || c(f(this.chart).slots).length > 0;
 	}
 	async _toggleConfigPanel() {
 		if (this._configPanelLoadFailed = !1, this._configPanelOpen) this.endInteraction(), this._configPanelOpen = !1;
 		else if (!this._configPanelPending) {
-			if (!A()) {
+			if (!M()) {
 				this._configPanelPending = !0;
 				try {
-					await k();
+					await j();
 				} catch (e) {
 					console.warn("Failed to load the chart configuration panel:", e), this._configPanelLoadFailed = !0;
 					return;
@@ -132,11 +134,36 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 			this.isConnected && this._canShowConfigPanel && (this._configPanelOpen = !0);
 		}
 	}
+	async export(e) {
+		await this.updateComplete;
+		let t = this._embed;
+		if (this.chart && t && (t.chartElement || await this._waitForEmbedRendered(t))) return await t.export(e);
+	}
+	_waitForEmbedRendered(e) {
+		if (!this.isConnected) return Promise.resolve(!1);
+		this._exportWaitAbort ??= new AbortController();
+		let t = this._exportWaitAbort.signal;
+		return new Promise((n) => {
+			let r = new AbortController(), i = (e) => {
+				r.abort(), n(e);
+			}, { signal: a } = r;
+			e.addEventListener("rendered", () => i(!0), { signal: a }), e.addEventListener("error", () => i(!1), { signal: a }), t.addEventListener("abort", () => i(!1), { signal: a });
+		});
+	}
+	_cancelExportWaits() {
+		this._exportWaitAbort?.abort(), this._exportWaitAbort = void 0;
+	}
 	endInteraction() {
 		this.renderRoot?.querySelector("luzmo-item-option-panel")?.endInteraction?.();
 	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._cancelExportWaits();
+	}
 	willUpdate(e) {
-		super.willUpdate(e), this._openInteractions.size > 0 && this._invalidatesInteractions(e) && this._invalidateInteractions(), e.has("addToDashboard") && this.addToDashboard && E().catch((e) => console.warn("Failed to load add to dashboard:", e));
+		super.willUpdate(e), e.has("chart") && !this.chart && this._cancelExportWaits(), this._openInteractions.size > 0 && this._invalidatesInteractions(e) && this._invalidateInteractions(), e.has("addToDashboard") && this.addToDashboard && O().catch((e) => console.warn("Failed to load add to dashboard:", e));
+	}
+	updated(e) {
+		super.updated(e), e.has("hideConfigOptions") && this.hideConfigOptions && this._configTabs && (this._configTabs.selected = "data");
 	}
 	_emitOptions(e) {
 		!this.controlled && this.chart && (this.chart = {
@@ -159,7 +186,7 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 	}
 	_isCurrentChart(e) {
 		let t = this.chart;
-		return t === e.chart || this._ownCharts.some((e) => e === t) || [...this._ownCharts].reverse().some((e) => N(e, t)) || N(e.chart, t);
+		return t === e.chart || this._ownCharts.some((e) => e === t) || [...this._ownCharts].reverse().some((e) => F(e, t)) || F(e.chart, t);
 	}
 	_isCurrentContext(e) {
 		return e.generation === this._interactionGeneration && e.auth.every((e, t) => e === this._auth[t]) && this._isCurrentChart(e);
@@ -175,8 +202,8 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 		t.stopPropagation();
 		let n = t.detail, r = typeof n == "string" ? n : n?.value ?? t.target?.value;
 		if (!r) return;
-		let i = f({
-			...u(this.chart),
+		let i = p({
+			...f(this.chart),
 			options: this.chart.options
 		}, {
 			type: "chartAction",
@@ -189,13 +216,13 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 		return e.ranking ?? {
 			active: !1,
 			number: 5,
-			direction: o.Top
+			direction: l.Top
 		};
 	}
 	_currentSort(e) {
 		return e.sort ?? {
-			direction: p.Desc,
-			by: c.Measure
+			direction: s.Desc,
+			by: m.Measure
 		};
 	}
 	_emitRankAndSort(e, t) {
@@ -207,36 +234,36 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 	}
 	_renderOptionDropdown(e) {
 		let t = e.values ?? [], n = e.currentValue || t[0]?.key || "";
-		return y`
+		return b`
       <luzmo-picker
         size=${this.size}
         variant="highlight"
         value=${n}
         @change=${(t) => this._handleDropdownChange(e, t)}
       >
-        ${t.map((e) => y`<luzmo-menu-item value=${e.key}>${e.label}</luzmo-menu-item>`)}
+        ${t.map((e) => b`<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 y`
+		if (!t.active) return b`
         <luzmo-action-button
           size=${this.size}
           @click=${() => this._emitRankAndSort({
 			active: !0,
 			number: 5,
-			direction: o.Top
+			direction: l.Top
 		}, n)}
         >
-          <luzmo-icon slot="icon" size="xs" .icon=${h}></luzmo-icon>
-          ${w("Show top 5", { desc: "Label to activate top-N ranking on a chart" })}
+          <luzmo-icon slot="icon" size="xs" .icon=${g}></luzmo-icon>
+          ${E("Show top 5", { desc: "Label to activate top-N ranking on a chart" })}
         </luzmo-action-button>
       `;
-		let r = t.direction === o.Bottom ? w("Bottom", { desc: "Ranking direction: keep the lowest values" }) : w("Top", { desc: "Ranking direction: keep the highest values" });
-		return y`
+		let r = t.direction === l.Bottom ? E("Bottom", { desc: "Ranking direction: keep the lowest values" }) : E("Top", { desc: "Ranking direction: keep the highest values" });
+		return b`
       <luzmo-action-button size=${this.size} id=${this._rankingTriggerId}>
-        <luzmo-icon slot="icon" size="xs" .icon=${h}></luzmo-icon>
+        <luzmo-icon slot="icon" size="xs" .icon=${g}></luzmo-icon>
         ${r} ${t.number || 5}
       </luzmo-action-button>
 
@@ -252,10 +279,10 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
                 @change=${(t) => this._handleDirectionChange(e, t)}
               >
                 <luzmo-action-button value="top" emphasized
-                  >${w("Top", { desc: "Ranking direction: keep the highest values" })}</luzmo-action-button
+                  >${E("Top", { desc: "Ranking direction: keep the highest values" })}</luzmo-action-button
                 >
                 <luzmo-action-button value="bottom" emphasized
-                  >${w("Bottom", { desc: "Ranking direction: keep the lowest values" })}</luzmo-action-button
+                  >${E("Bottom", { desc: "Ranking direction: keep the lowest values" })}</luzmo-action-button
                 >
               </luzmo-action-group>
 
@@ -294,16 +321,16 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
                 <luzmo-action-button
                   value="desc"
                   emphasized
-                  label=${w("Sort descending", { desc: "Sort chart values in descending order" })}
+                  label=${E("Sort descending", { desc: "Sort chart values in descending order" })}
                 >
-                  <luzmo-icon slot="icon" size="xs" .icon=${h}></luzmo-icon>
+                  <luzmo-icon slot="icon" size="xs" .icon=${g}></luzmo-icon>
                 </luzmo-action-button>
                 <luzmo-action-button
                   value="asc"
                   emphasized
-                  label=${w("Sort ascending", { desc: "Sort chart values in ascending order" })}
+                  label=${E("Sort ascending", { desc: "Sort chart values in ascending order" })}
                 >
-                  <luzmo-icon slot="icon" size="xs" class="icon-flipped" .icon=${h}></luzmo-icon>
+                  <luzmo-icon slot="icon" size="xs" class="icon-flipped" .icon=${g}></luzmo-icon>
                 </luzmo-action-button>
               </luzmo-action-group>
             </div>
@@ -345,7 +372,7 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 		});
 	}
 	_renderAddToDashboard() {
-		return this.addToDashboard ? y`
+		return this.addToDashboard ? b`
       <luzmo-add-to-dashboard
         size=${this.size}
         language=${this.language}
@@ -355,33 +382,28 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
         .authToken=${this.authToken}
         .apiUrl=${this.apiUrl}
       ></luzmo-add-to-dashboard>
-    ` : b;
+    ` : x;
 	}
 	_renderActions() {
-		return this.hideActions ? y`
-        <div class="chart-actions-bar">
-          <div class="chart-actions-primary"></div>
-          <slot name="chart-actions-extra"></slot>
-          ${this._renderAddToDashboard()}
-        </div>
-      ` : y`
-      <div class="chart-actions-bar">
-        <div class="chart-actions-primary">
-          ${this._chartActions.map((e) => e.type === "optionDropdown" ? this._renderOptionDropdown(e) : this._renderRankingPicker(e))}
+		let e = this.hideActions && !this.addToDashboard && !this._actionsSlotHasContent;
+		return b`
+      <div class="chart-actions-bar" part="actions-bar" ?hidden=${e}>
+        <div class="chart-actions-primary" part="actions">
+          ${this.hideActions ? x : this._chartActions.map((e) => e.type === "optionDropdown" ? this._renderOptionDropdown(e) : this._renderRankingPicker(e))}
         </div>
-        <slot name="chart-actions-extra"></slot>
+        <slot name="chart-actions-extra" @slotchange=${this._handleActionsSlotChange}></slot>
         ${this._renderAddToDashboard()}
       </div>
     `;
 	}
 	_renderChart() {
-		if (!this.chart) return b;
-		let e = u(this.chart);
-		return y`
+		if (!this.chart) return x;
+		let e = f(this.chart);
+		return b`
       <div class="chart-container" part="chart-container">
         <luzmo-embed-viz-item
           .type=${e.type}
-          .options=${e.options}
+          .options=${o(e.options, this.chartRenderOptions)}
           .slots=${e.slots}
           .filters=${e.filters ?? []}
           .inlineData=${e.inlineData}
@@ -396,48 +418,48 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
     `;
 	}
 	_renderFeedback() {
-		let e = !this.hideFeedback && !!this.messageId, t = this._canShowConfigPanel, n = w("Loading", { desc: "Loading spinner label" });
-		return !e && !t ? b : y`
-      <div class="feedback-row">
-        ${e ? y`
+		let e = !this.hideFeedback && !!this.messageId, t = this._canShowConfigPanel, n = E("Loading", { desc: "Loading spinner label" });
+		return !e && !t ? x : b`
+      <div class="feedback-row" part="footer">
+        ${e ? b`
                 <luzmo-action-group quiet size=${this.size}>
                   <luzmo-action-button
                     class="rating-btn-positive"
                     value="positive"
                     quiet
-                    label=${w("Good response", { desc: "Accessible label for the positive feedback button" })}
+                    label=${E("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=${v}></luzmo-icon>
+                    <luzmo-icon slot="icon" size="s" .icon=${y}></luzmo-icon>
                   </luzmo-action-button>
                   <luzmo-action-button
                     class="rating-btn-negative"
                     value="negative"
                     quiet
-                    label=${w("Bad response", { desc: "Accessible label for the negative feedback button" })}
+                    label=${E("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=${_}></luzmo-icon>
+                    <luzmo-icon slot="icon" size="s" .icon=${v}></luzmo-icon>
                   </luzmo-action-button>
                 </luzmo-action-group>
-              ` : b}
-        ${t ? y`
+              ` : x}
+        ${t ? b`
                 <luzmo-action-button
                   class="config-toggle"
                   size=${this.size}
                   quiet
                   ?selected=${this._configPanelOpen}
                   aria-expanded=${this._configPanelOpen}
-                  aria-label=${this._configPanelPending ? n : w("Configure chart", { desc: "Accessible label for the chart config toggle" })}
+                  aria-label=${this._configPanelPending ? n : E("Configure chart", { desc: "Accessible label for the chart config toggle" })}
                   @click=${() => this._toggleConfigPanel()}
                 >
-                  ${this._configPanelPending ? y`<luzmo-progress-circle slot="icon" size="s" indeterminate .label=${n}></luzmo-progress-circle>` : y`<luzmo-icon slot="icon" size="s" .icon=${g}></luzmo-icon>`}
+                  ${this._configPanelPending ? b`<luzmo-progress-circle slot="icon" size="s" indeterminate .label=${n}></luzmo-progress-circle>` : b`<luzmo-icon slot="icon" size="s" .icon=${_}></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 ? w("Failed to load the chart configuration. Please try again.", { desc: "Error message when the chart config panel fails to load" }) : ""}</span>
-              ` : b}
+                <span class="sr-only" role="alert">${this._configPanelLoadFailed ? E("Failed to load the chart configuration. Please try again.", { desc: "Error message when the chart config panel fails to load" }) : ""}</span>
+              ` : x}
       </div>
     `;
 	}
@@ -449,10 +471,10 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 		});
 	}
 	_renderFilters(e, t) {
-		return e.inlineData ? b : y`
+		return e.inlineData ? x : b`
       <div class="edit-column edit-column-filters">
         <luzmo-field-label size=${this.size}
-          >${w("Filters", { desc: "Label for the filters section" })}</luzmo-field-label
+          >${E("Filters", { desc: "Label for the filters section" })}</luzmo-field-label
         >
         <luzmo-filters
           size=${this.size}
@@ -469,13 +491,13 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
     `;
 	}
 	_renderConfigPanel() {
-		if (!this.chart || !this._canShowConfigPanel || !this._configPanelOpen) return b;
-		let e = this.chart, t = d(e.slots ?? []), n = s(t), r = e.options.theme ?? M;
-		return y`
+		if (!this.chart || !this._canShowConfigPanel || !this._configPanelOpen) return x;
+		let e = this.chart, t = d(e.slots ?? []), n = c(t), r = e.options.theme ?? P;
+		return b`
       <div class="config-panel" part="config-panel">
         <luzmo-tabs selected="data" size=${this.size}>
-          <luzmo-tab value="data">${w("Data", { desc: "Label for the data section" })}</luzmo-tab>
-          <luzmo-tab value="options">${w("Options", { desc: "Label for the options section" })}</luzmo-tab>
+          <luzmo-tab value="data">${E("Data", { desc: "Label for the data section" })}</luzmo-tab>
+          ${this.hideConfigOptions ? x : b`<luzmo-tab value="options">${E("Options", { desc: "Label for the options section" })}</luzmo-tab>`}
 
           <luzmo-tab-panel value="data">
             <div class="edit-grid">
@@ -483,7 +505,10 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
                 <luzmo-item-slot-picker-panel
                   size=${this.size}
                   slot-menu-placement="bottom-end"
+                  selects=${this.slotSelects}
+                  ?grows=${this.slotGrows}
                   .itemType=${e.type}
+                  .slotsConfiguration=${this.slotsConfiguration ?? void 0}
                   .slotsContents=${t}
                   .datasetIds=${n}
                   .authKey=${this.authKey}
@@ -498,24 +523,28 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
             </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}
-              ?live-interactions=${this.liveInteractions}
-              @luzmo-options-changed=${this._handleOptionsChanged}
-              @luzmo-option-interaction-start=${this._handleInteractionStart}
-              @luzmo-option-interaction-end=${this._handleInteractionClosed}
-              @luzmo-option-interaction-cancel=${this._handleInteractionClosed}
-            ></luzmo-item-option-panel>
-          </luzmo-tab-panel>
+          ${this.hideConfigOptions ? x : b`
+                  <luzmo-tab-panel value="options">
+                    <luzmo-item-option-panel
+                      size=${this.size}
+                      .itemType=${e.type}
+                      .options=${e.options || {}}
+                      .slots=${t}
+                      .customOptionsConfiguration=${this.customOptionsConfiguration ?? void 0}
+                      .customTranslations=${this.customTranslations ?? void 0}
+                      .theme=${r}
+                      .authKey=${this.authKey}
+                      .authToken=${this.authToken}
+                      .apiUrl=${this.apiUrl}
+                      .language=${this.language}
+                      ?live-interactions=${this.liveInteractions}
+                      @luzmo-options-changed=${this._handleOptionsChanged}
+                      @luzmo-option-interaction-start=${this._handleInteractionStart}
+                      @luzmo-option-interaction-end=${this._handleInteractionClosed}
+                      @luzmo-option-interaction-cancel=${this._handleInteractionClosed}
+                    ></luzmo-item-option-panel>
+                  </luzmo-tab-panel>
+                `}
         </luzmo-tabs>
       </div>
     `;
@@ -528,11 +557,11 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 		});
 	}
 	render() {
-		return this.chart ? y`
+		return this.chart ? b`
       <div class="answer" part="container">
         ${this._renderActions()} ${this._renderChart()} ${this._renderFeedback()} ${this._renderConfigPanel()}
       </div>
-    ` : y`
+    ` : b`
         <div
           class="answer"
           part="container"
@@ -541,49 +570,61 @@ var T = ":host{box-sizing:border-box;display:block;container-type:inline-size}.a
 	}
 };
 // src/components/interactive-viz-item/index.ts
-r([S({ type: Object })], P.prototype, "chart", void 0), r([S({ type: Object })], P.prototype, "feedback", void 0), r([S({
+r([C({ type: Object })], I.prototype, "chart", void 0), r([C({ type: Object })], I.prototype, "feedback", void 0), r([C({
 	type: String,
 	attribute: "message-id"
-})], P.prototype, "messageId", void 0), r([S({
+})], I.prototype, "messageId", void 0), r([C({
 	type: String,
 	attribute: "auth-key"
-})], P.prototype, "authKey", void 0), r([S({
+})], I.prototype, "authKey", void 0), r([C({
 	type: String,
 	attribute: "auth-token"
-})], P.prototype, "authToken", void 0), r([S({
+})], I.prototype, "authToken", void 0), r([C({
 	type: String,
 	attribute: "api-url"
-})], P.prototype, "apiUrl", void 0), r([S({
+})], I.prototype, "apiUrl", void 0), r([C({
 	type: String,
 	attribute: "app-server"
-})], P.prototype, "appServer", void 0), r([S({
+})], I.prototype, "appServer", void 0), r([C({
 	type: String,
 	attribute: "content-language"
-})], P.prototype, "contentLanguage", void 0), r([S({
+})], I.prototype, "contentLanguage", void 0), r([C({
 	type: Boolean,
 	attribute: "hide-actions",
 	reflect: !0
-})], P.prototype, "hideActions", void 0), r([S({
+})], I.prototype, "hideActions", void 0), r([C({
 	type: Boolean,
 	attribute: "hide-feedback",
 	reflect: !0
-})], P.prototype, "hideFeedback", void 0), r([S({
+})], I.prototype, "hideFeedback", void 0), r([C({
 	type: Boolean,
 	attribute: "hide-config-panel",
 	reflect: !0
-})], P.prototype, "hideConfigPanel", void 0), r([S({
+})], I.prototype, "hideConfigPanel", void 0), r([C({
+	type: Boolean,
+	attribute: "hide-config-options",
+	reflect: !0
+})], I.prototype, "hideConfigOptions", void 0), r([C({
+	type: String,
+	attribute: "slot-selects",
+	reflect: !0
+})], I.prototype, "slotSelects", void 0), r([C({
+	type: Boolean,
+	attribute: "slot-grows",
+	reflect: !0
+})], I.prototype, "slotGrows", void 0), r([C({ attribute: !1 })], I.prototype, "slotsConfiguration", void 0), r([C({ attribute: !1 })], I.prototype, "customOptionsConfiguration", void 0), r([C({ attribute: !1 })], I.prototype, "customTranslations", void 0), r([C({ attribute: !1 })], I.prototype, "chartRenderOptions", void 0), r([C({
 	type: Boolean,
 	attribute: "add-to-dashboard",
 	reflect: !0
-})], P.prototype, "addToDashboard", void 0), r([S({ attribute: !1 })], P.prototype, "dashboardActions", void 0), r([S({
+})], I.prototype, "addToDashboard", void 0), r([C({ attribute: !1 })], I.prototype, "dashboardActions", void 0), r([C({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "controlled", void 0), r([S({
+})], I.prototype, "controlled", void 0), r([C({
 	attribute: "can-filter",
 	converter: { fromAttribute: (e) => e === null ? void 0 : "all" }
-})], P.prototype, "canFilter", void 0), r([S({
+})], I.prototype, "canFilter", void 0), r([C({
 	type: Boolean,
 	reflect: !0,
 	attribute: "live-interactions"
-})], P.prototype, "liveInteractions", void 0), r([C()], P.prototype, "_configPanelOpen", void 0), r([C()], P.prototype, "_configPanelPending", void 0), r([C()], P.prototype, "_configPanelLoadFailed", void 0), customElements.get("luzmo-interactive-viz-item") || customElements.define("luzmo-interactive-viz-item", P);
-export { P as t };
+})], I.prototype, "liveInteractions", void 0), r([T()], I.prototype, "_configPanelOpen", void 0), r([T()], I.prototype, "_actionsSlotHasContent", void 0), r([w("luzmo-embed-viz-item")], I.prototype, "_embed", void 0), r([w("luzmo-tabs")], I.prototype, "_configTabs", void 0), r([T()], I.prototype, "_configPanelPending", void 0), r([T()], I.prototype, "_configPanelLoadFailed", void 0), customElements.get("luzmo-interactive-viz-item") || customElements.define("luzmo-interactive-viz-item", I);
+export { I as t };