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

package/components/{interactive-viz-item-DL5aqkvx.js → interactive-viz-item-cdShBZQA.js}

@@ -17,57 +17,56 @@
  * 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-DSeXdW9S.js";
+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-DBUkUh0o.js";
-import "./filters-BddhKRZC.js";
-import "./item-option-panel-DrI7HYrY.js";
-import "./item-slot-picker-panel-DPaabfv5.js";
-import { luzmoAlignLeft as a, luzmoInfoCircle as o, luzmoThumbsDown as s, luzmoThumbsUp as c } from "@luzmo/icons";
+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 l, nothing as u, unsafeCSS as d } from "lit";
-import { property as f, state as p } from "lit/decorators.js";
-import { msg as m } from "@lit/localize";
+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 h = ":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}.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}", g = /* @__PURE__ */ function(e) {
+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;
-}({}), _ = /* @__PURE__ */ function(e) {
-	return e.Asc = "asc", e.Desc = "desc", 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;
-}({}), y = 5, b = Array.isArray;
-function x(e) {
+}({}), b = 5, x = Array.isArray;
+function S(e) {
 	return typeof e == "string";
 }
-function S(e) {
+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 C(e) {
-	return b(e) ? e : Object.entries(e).map(([e, t]) => ({
+function w(e) {
+	return x(e) ? e : Object.entries(e).map(([e, t]) => ({
 		name: e,
-		content: b(t) ? t : []
+		content: x(t) ? t : []
 	}));
 }
-function w(e) {
+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;
-		x(n) && t.add(n);
+		S(n) && t.add(n);
 	}
 	return [...t];
 }
-function T(e) {
-	let t = C(e.slots ?? []), n = e.options ?? {}, r = n.interactivity;
+function E(e) {
+	let t = w(e.slots ?? []), n = e.options ?? {}, r = n.interactivity;
 	return {
 		type: e.type,
 		options: {
@@ -79,12 +78,12 @@ function T(e) {
 		},
 		slots: t.map((e) => ({
 			...e,
-			content: b(e.content) ? e.content.map((e) => S(e)) : []
+			content: x(e.content) ? e.content.map((e) => C(e)) : []
 		})),
 		filters: e.filters
 	};
 }
-function E(e, t) {
+function D(e, t) {
 	return {
 		...e,
 		options: {
@@ -96,13 +95,13 @@ function E(e, t) {
 		}
 	};
 }
-function D(e) {
+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 O(e) {
+function k(e) {
 	let t = [], n = e.options;
 	switch (e.type) {
 		case "area-chart":
@@ -114,14 +113,14 @@ function O(e) {
 				ranking: n.ranking ?? {
 					active: !1,
 					number: 5,
-					direction: g.Top
+					direction: _.Top
 				},
 				sort: n.sort ?? {
-					direction: _.Desc,
-					by: v.Measure
+					direction: v.Desc,
+					by: y.Measure
 				},
 				importance: 100
-			}), D(e.slots)) {
+			}), O(e.slots)) {
 				let r = e.type === "area-chart", i = r ? [
 					{
 						key: "stacked",
@@ -206,7 +205,7 @@ function O(e) {
 	}
 	return t.sort((e, t) => t.importance - e.importance);
 }
-function k(e, t, n) {
+function A(e, t, n) {
 	let r = e.options;
 	switch (t) {
 		case "mode": return {
@@ -239,7 +238,7 @@ function k(e, t, n) {
 		default: return e;
 	}
 }
-function A(e, t) {
+function j(e, t) {
 	switch (t.type) {
 		case "slots": return {
 			...e,
@@ -253,7 +252,7 @@ function A(e, t) {
 			...e,
 			filters: t.filters
 		};
-		case "chartAction": return k(e, t.actionType, t.key);
+		case "chartAction": return A(e, t.actionType, t.key);
 		case "rankAndSort": return {
 			...e,
 			options: {
@@ -267,10 +266,18 @@ function A(e, t) {
 	}
 }
 //#endregion
-//#region src/components/interactive-viz-item/interactive-viz-item.ts
-var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
+//#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._rankingTriggerId = `interactive-viz-item-ranking-${++j}`, 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._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
@@ -295,7 +302,7 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
 		};
 	}
 	static get styles() {
-		return [d(h)];
+		return [f(g)];
 	}
 	get _effectiveContentLanguage() {
 		return this.contentLanguage || this.language;
@@ -309,13 +316,33 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
 		this.dispatchEvent(n);
 	}
 	get _chartActions() {
-		return this.chart ? O(T(this.chart)) : [];
+		return this.chart ? k(E(this.chart)) : [];
 	}
 	get _rating() {
 		return this.feedback?.rating ?? 0;
 	}
-	_toggleConfigPanel() {
-		this._configPanelOpen = !this._configPanelOpen;
+	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 });
@@ -328,7 +355,7 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
 		t.stopPropagation();
 		let n = t.detail, r = typeof n == "string" ? n : n?.value ?? t.target?.value;
 		if (!r) return;
-		let i = A(T(this.chart), {
+		let i = j(E(this.chart), {
 			type: "chartAction",
 			actionType: e.mutationType,
 			key: r
@@ -339,13 +366,13 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
 		return e.ranking ?? {
 			active: !1,
 			number: 5,
-			direction: g.Top
+			direction: _.Top
 		};
 	}
 	_currentSort(e) {
 		return e.sort ?? {
-			direction: _.Desc,
-			by: v.Measure
+			direction: v.Desc,
+			by: y.Measure
 		};
 	}
 	_emitRankAndSort(e, t) {
@@ -357,36 +384,36 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
 	}
 	_renderOptionDropdown(e) {
 		let t = e.values ?? [], n = e.currentValue || t[0]?.key || "";
-		return l`
+		return u`
       <luzmo-picker
         size=${this.size}
         variant="highlight"
         value=${n}
         @change=${(t) => this._handleDropdownChange(e, t)}
       >
-        ${t.map((e) => l`<luzmo-menu-item value=${e.key}>${e.label}</luzmo-menu-item>`)}
+        ${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 l`
+		if (!t.active) return u`
         <luzmo-action-button
           size=${this.size}
           @click=${() => this._emitRankAndSort({
 			active: !0,
 			number: 5,
-			direction: g.Top
+			direction: _.Top
 		}, n)}
         >
-          <luzmo-icon slot="icon" size="xs" .icon=${a}></luzmo-icon>
-          ${m("Show top 5", { desc: "Label to activate top-N ranking on a chart" })}
+          <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 === g.Bottom ? m("Bottom", { desc: "Ranking direction: keep the lowest values" }) : m("Top", { desc: "Ranking direction: keep the highest values" });
-		return l`
+		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=${a}></luzmo-icon>
+        <luzmo-icon slot="icon" size="xs" .icon=${o}></luzmo-icon>
         ${r} ${t.number || 5}
       </luzmo-action-button>
 
@@ -402,10 +429,10 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
                 @change=${(t) => this._handleDirectionChange(e, t)}
               >
                 <luzmo-action-button value="top" emphasized
-                  >${m("Top", { desc: "Ranking direction: keep the highest values" })}</luzmo-action-button
+                  >${h("Top", { desc: "Ranking direction: keep the highest values" })}</luzmo-action-button
                 >
                 <luzmo-action-button value="bottom" emphasized
-                  >${m("Bottom", { desc: "Ranking direction: keep the lowest values" })}</luzmo-action-button
+                  >${h("Bottom", { desc: "Ranking direction: keep the lowest values" })}</luzmo-action-button
                 >
               </luzmo-action-group>
 
@@ -444,16 +471,16 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
                 <luzmo-action-button
                   value="desc"
                   emphasized
-                  label=${m("Sort descending", { desc: "Sort chart values in descending order" })}
+                  label=${h("Sort descending", { desc: "Sort chart values in descending order" })}
                 >
-                  <luzmo-icon slot="icon" size="xs" .icon=${a}></luzmo-icon>
+                  <luzmo-icon slot="icon" size="xs" .icon=${o}></luzmo-icon>
                 </luzmo-action-button>
                 <luzmo-action-button
                   value="asc"
                   emphasized
-                  label=${m("Sort ascending", { desc: "Sort chart values in ascending order" })}
+                  label=${h("Sort ascending", { desc: "Sort chart values in ascending order" })}
                 >
-                  <luzmo-icon slot="icon" size="xs" class="icon-flipped" .icon=${a}></luzmo-icon>
+                  <luzmo-icon slot="icon" size="xs" class="icon-flipped" .icon=${o}></luzmo-icon>
                 </luzmo-action-button>
               </luzmo-action-group>
             </div>
@@ -495,12 +522,12 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
 		});
 	}
 	_renderActions() {
-		return this.hideActions ? l`
+		return this.hideActions ? u`
         <div class="chart-actions-bar">
           <div class="chart-actions-primary"></div>
           <slot name="chart-actions-extra"></slot>
         </div>
-      ` : l`
+      ` : u`
       <div class="chart-actions-bar">
         <div class="chart-actions-primary">
           ${this._chartActions.map((e) => e.type === "optionDropdown" ? this._renderOptionDropdown(e) : this._renderRankingPicker(e))}
@@ -510,9 +537,9 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
     `;
 	}
 	_renderChart() {
-		if (!this.chart) return u;
-		let e = T(this.chart);
-		return l`
+		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}
@@ -530,46 +557,48 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
     `;
 	}
 	_renderFeedback() {
-		let e = !this.hideFeedback && !!this.messageId, t = !!this.chart && !this.hideConfigPanel;
-		return !e && !t ? u : l`
+		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 ? l`
+        ${e ? u`
                 <luzmo-action-group quiet size=${this.size}>
                   <luzmo-action-button
                     class="rating-btn-positive"
                     value="positive"
                     quiet
-                    label=${m("Good response", { desc: "Accessible label for the positive feedback button" })}
+                    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=${c}></luzmo-icon>
+                    <luzmo-icon slot="icon" size="s" .icon=${l}></luzmo-icon>
                   </luzmo-action-button>
                   <luzmo-action-button
                     class="rating-btn-negative"
                     value="negative"
                     quiet
-                    label=${m("Bad response", { desc: "Accessible label for the negative feedback button" })}
+                    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=${s}></luzmo-icon>
+                    <luzmo-icon slot="icon" size="s" .icon=${c}></luzmo-icon>
                   </luzmo-action-button>
                 </luzmo-action-group>
-              ` : u}
-        ${t ? l`
+              ` : d}
+        ${t ? u`
                 <luzmo-action-button
                   class="config-toggle"
                   size=${this.size}
                   quiet
                   ?selected=${this._configPanelOpen}
                   aria-expanded=${this._configPanelOpen}
-                  aria-label=${m("Configure chart", { desc: "Accessible label for the chart config toggle" })}
+                  aria-label=${this._configPanelPending ? n : h("Configure chart", { desc: "Accessible label for the chart config toggle" })}
                   @click=${() => this._toggleConfigPanel()}
                 >
-                  <luzmo-icon slot="icon" size="s" .icon=${o}></luzmo-icon>
+                  ${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>
-              ` : u}
+                <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>
     `;
 	}
@@ -581,13 +610,13 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
 		});
 	}
 	_renderConfigPanel() {
-		if (!this.chart || this.hideConfigPanel || !this._configPanelOpen) return u;
-		let e = this.chart, t = C(e.slots ?? []), n = w(t), r = e.options.theme ?? {};
-		return l`
+		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">${m("Data", { desc: "Label for the data section" })}</luzmo-tab>
-          <luzmo-tab value="options">${m("Options", { desc: "Label for the options section" })}</luzmo-tab>
+          <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">
@@ -608,7 +637,7 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
               </div>
               <div class="edit-column edit-column-filters">
                 <luzmo-field-label size=${this.size}
-                  >${m("Filters", { desc: "Label for the filters section" })}</luzmo-field-label
+                  >${h("Filters", { desc: "Label for the filters section" })}</luzmo-field-label
                 >
                 <luzmo-filters
                   size=${this.size}
@@ -644,11 +673,11 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
     `;
 	}
 	render() {
-		return this.chart ? l`
+		return this.chart ? u`
       <div class="answer" part="container">
         ${this._renderActions()} ${this._renderChart()} ${this._renderFeedback()} ${this._renderConfigPanel()}
       </div>
-    ` : l`
+    ` : u`
         <div
           class="answer"
           part="container"
@@ -658,36 +687,36 @@ var j = 0, M = class extends i(t(e, { validSizes: Object.values(n) })) {
 };
 //#endregion
 //#region src/components/interactive-viz-item/index.ts
-r([f({ type: Object })], M.prototype, "chart", void 0), r([f({ type: Object })], M.prototype, "feedback", void 0), r([f({
+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"
-})], M.prototype, "messageId", void 0), r([f({
+})], L.prototype, "messageId", void 0), r([p({
 	type: String,
 	attribute: "auth-key"
-})], M.prototype, "authKey", void 0), r([f({
+})], L.prototype, "authKey", void 0), r([p({
 	type: String,
 	attribute: "auth-token"
-})], M.prototype, "authToken", void 0), r([f({
+})], L.prototype, "authToken", void 0), r([p({
 	type: String,
 	attribute: "api-url"
-})], M.prototype, "apiUrl", void 0), r([f({
+})], L.prototype, "apiUrl", void 0), r([p({
 	type: String,
 	attribute: "app-server"
-})], M.prototype, "appServer", void 0), r([f({
+})], L.prototype, "appServer", void 0), r([p({
 	type: String,
 	attribute: "content-language"
-})], M.prototype, "contentLanguage", void 0), r([f({
+})], L.prototype, "contentLanguage", void 0), r([p({
 	type: Boolean,
 	attribute: "hide-actions",
 	reflect: !0
-})], M.prototype, "hideActions", void 0), r([f({
+})], L.prototype, "hideActions", void 0), r([p({
 	type: Boolean,
 	attribute: "hide-feedback",
 	reflect: !0
-})], M.prototype, "hideFeedback", void 0), r([f({
+})], L.prototype, "hideFeedback", void 0), r([p({
 	type: Boolean,
 	attribute: "hide-config-panel",
 	reflect: !0
-})], M.prototype, "hideConfigPanel", void 0), r([p()], M.prototype, "_configPanelOpen", void 0), customElements.get("luzmo-interactive-viz-item") || customElements.define("luzmo-interactive-viz-item", M);
+})], 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 { w as a, y as c, _ as d, C as i, g as l, A as n, E as o, O as r, T as s, M as t, v as u };
+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 };

package/components/item-grid/index.cjs

@@ -17,4 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-grid-CcwnD_u5.cjs");exports.LuzmoItemGrid=e.t,Object.defineProperty(exports,"LuzmoItemGridItemActionsMenu",{enumerable:!0,get:function(){return e.n}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-grid-BfhqMuQA.cjs");exports.LuzmoItemGrid=e.t,Object.defineProperty(exports,"LuzmoItemGridItemActionsMenu",{enumerable:!0,get:function(){return e.n}});

package/components/item-grid/index.js

@@ -24,5 +24,5 @@
 		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba(var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity));--luzmo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
 	}
 })();
-import { n as e, t } from "../item-grid-C_OTtv4T.js";
+import { n as e, t } from "../item-grid-xCM8AqRH.js";
 export { t as LuzmoItemGrid, e as LuzmoItemGridItemActionsMenu };