@luzmo/analytics-components-kit 1.0.1-alpha.140 → 1.0.1-alpha.141

package/components/{grid-BW6LPvCu.js → grid-Ca-fxUK1.js}

@@ -31,6 +31,7 @@ import { repeat } from "lit/directives/repeat.js";
 import "@luzmo/lucero/icon";
 import "@luzmo/lucero/action-button";
 import "@luzmo/lucero/action-group";
+import { guard } from "lit/directives/guard.js";
 import { LuzmoElement } from "@luzmo/lucero/utils";
 import { styleMap } from "lit/directives/style-map.js";
 var byteToHex = [];
@@ -61,980 +62,241 @@ function _v4(e, k, A) {
 function v4(e, k, A) {
 	return native_default.randomUUID && !k && !e ? native_default.randomUUID() : _v4(e, k, A);
 }
-var v4_default = v4, min = Math.min, max = Math.max, round = Math.round, floor = Math.floor, createCoords = (e) => ({
-	x: e,
-	y: e
-}), oppositeSideMap = {
-	left: "right",
-	right: "left",
-	bottom: "top",
-	top: "bottom"
-}, oppositeAlignmentMap = {
-	start: "end",
-	end: "start"
+var v4_default = v4;
+const _handleError = (e, k) => {
+	let A = "The dashboard component encountered an error";
+	typeof k?.dashboardId == "string" && (A += ` for dashboard with id ${k.dashboardId}`), typeof k?.dashboardSlug == "string" && (A += ` for dashboard with slug ${k.dashboardSlug}`), typeof k?.container == "string" && (A += ` in container ${k.container}`), e && (A += `:\n${e}`, console.warn(A));
+}, _browserCheck = (e) => {
+	let k = !1, A = "", j = (document.body || document.documentElement).style, M = {
+		svg: !!("createElementNS" in document && document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect),
+		flexbox: j.webkitFlexWrap === "" || j.flexWrap === "",
+		postMessage: !!window.postMessage
+	};
+	for (let j of [
+		"svg",
+		"flexbox",
+		"postMessage"
+	]) M[j] || (k = !0, e.browserNotSupported = e.browserNotSupported || [], e.browserNotSupported.push(j), A += `Your browser does not support: ${j}\n`);
+	let N = window.navigator.userAgent, P = N.includes("MSIE"), F = N.includes("Trident/");
+	(P || F) && (k = !0, A = "IE is not supported."), k && _handleError(A);
+}, DEFAULT_PARAMETERS = {
+	appServer: "https://app.luzmo.com/",
+	apiHost: "https://api.luzmo.com/",
+	dashboardId: null,
+	dashboardSlug: null,
+	container: null,
+	key: null,
+	token: null,
+	language: "auto",
+	editorLanguage: "auto",
+	qeVersion: null,
+	editMode: null,
+	screenMode: null,
+	switchScreenModeOnResize: !0,
+	itemId: null,
+	theme: "",
+	mainColor: "",
+	accentColor: "",
+	itemDimensions: {
+		width: "auto",
+		height: "auto"
+	},
+	loaderBackground: "#f9f9f9",
+	loaderFontColor: "#5a5a5a",
+	loaderSpinnerColor: "rgba(255, 165, 0, 0.7)",
+	loaderSpinnerBackground: "rgba(169, 169, 169, 0.14)",
+	timezoneId: null,
+	contextId: null
+}, EXTENTS = [
+	{
+		mode: "mobile",
+		width: [150, 767]
+	},
+	{
+		mode: "tablet",
+		width: [768, 1199]
+	},
+	{
+		mode: "desktop",
+		width: [1200, 1599]
+	},
+	{
+		mode: "largeScreen",
+		width: [1600, 9999]
+	},
+	{
+		mode: "fixed",
+		width: []
+	}
+];
+var translations_default = {
+	initializing: {
+		en: "Initializing...",
+		nl: "Laden...",
+		fr: "Chargement...",
+		de: "Initialisiere...",
+		es: "Inicializando..."
+	},
+	errorDashboard: {
+		en: "Oops, we could not load this dashboard!",
+		nl: "Oeps, we konden het dashboard niet laden.",
+		fr: "Le chargement a echoué.",
+		de: "Hoppla, wir konnten dieses Dashboard nicht laden!",
+		es: "¡Ups! No pudimos cargar este tablero."
+	},
+	errorItem: {
+		en: "Oops, we could not load this item!",
+		nl: "Oeps, we konden de grafiek niet laden.",
+		fr: "Le chargement a echoué.",
+		de: "Hoppla, wir konnten dieses Diagramm nicht laden!",
+		es: "¡Ups! No pudimos cargar este elemento."
+	}
 };
-function evaluate(e, k) {
-	return typeof e == "function" ? e(k) : e;
+const addTrailingSlash = (e) => e ? e.endsWith("/") ? e : `${e}/` : "", removeTrailingSlash = (e) => e ? e.endsWith("/") ? e.slice(0, -1) : e : "", formatDashboardList = (e, k, A, j) => {
+	let M = (e, k) => {
+		let A = e.users.find((e) => e.id === k.id), j = A && A.userAccessRight ? {
+			flagRead: A.userAccessRight.flagRead,
+			flagUse: A.userAccessRight.flagUse,
+			flagModify: A.userAccessRight.flagModify,
+			flagOwn: A.userAccessRight.flagOwn
+		} : {
+			flagRead: !1,
+			flagUse: !1,
+			flagModify: !1,
+			flagOwn: !1
+		}, M = e.groups.filter((e) => k.userGroups.includes(e.id) || e.public === !0).map((e) => {
+			if (e.groupAccessRight) return e.groupAccessRight;
+		});
+		for (let e of M) !j.flagRead && e.flagRead && (j.flagRead = e.flagRead), !j.flagUse && e.flagUse && (j.flagUse = e.flagUse), !j.flagModify && e.flagModify && (j.flagModify = e.flagModify), !j.flagOwn && e.flagOwn && (j.flagOwn = e.flagOwn);
+		let N = e.integrations?.length > 0 ? e.integrations.map((e) => {
+			if (e.integrationAccessRight) return e.integrationAccessRight;
+		}) : [];
+		for (let e of N) !j.flagRead && e.flagRead && (j.flagRead = e.flagRead), !j.flagUse && e.flagUse && (j.flagUse = e.flagUse), !j.flagModify && e.flagModify && (j.flagModify = e.flagModify);
+		return j;
+	}, N = (e, k) => {
+		if (e == null) return "";
+		if (typeof e != "object" || Object.keys(e).length === 0) return typeof e == "object" && Object.keys(e).length === 0 ? "" : e;
+		let A;
+		return A = k && e[k] ? e[k] : e[Object.keys(e)[0]], A ??= "", A;
+	}, P = [];
+	for (let F of e) {
+		let e = {
+			accessibleBy: [],
+			accessRights: M(F, A),
+			id: F.id,
+			modifiedAt: F.modified_at,
+			name: N(F.name, j.language),
+			slug: null,
+			tags: F.tags.map((e) => e.tag).sort((e, k) => e.localeCompare(k))
+		}, I = F.integrations.find((e) => e.id === k);
+		I?.integrationAccessRight?.slug && (e.slug = I.integrationAccessRight.slug);
+		let L = F.users.map((e) => ({
+			model: "User",
+			id: e.id,
+			name: N(e.name, A.locale_id)
+		})), R = F.groups.map((e) => ({
+			model: "Group",
+			id: e.id,
+			name: N(e.name, A.locale_id) || {}
+		})), z = F.integrations.map((e) => ({
+			model: "Integration",
+			id: e.id,
+			name: N(e.name, A.locale_id) || {}
+		}));
+		e.accessibleBy = [
+			...L,
+			...R,
+			...z
+		], P.push(e);
+	}
+	return P;
+}, sanitizeUrl = (e) => {
+	let k = /^(%20|\s)*(javascript|data)/im, A = /[^\u0020-\u007E]/gim, j = /^([^:]+):/gm, M = new Set([".", "/"]), N = (e) => M.has(e[0]);
+	if (!e) return "about:blank";
+	let P = e.replaceAll(A, "").trim();
+	if (N(P)) return P;
+	let F = P.match(j);
+	if (!F) return P;
+	let I = F[0];
+	return k.test(I) ? "about:blank" : P;
+}, cloneDeep = (e) => JSON.parse(JSON.stringify(e));
+var isObject = (e) => e && typeof e == "object";
+const defaultsDeep = (e, k) => (Object.entries(k).forEach(([k, A]) => {
+	k in e ? e[k] === void 0 ? e[k] = A : e[k] = isObject(A) ? defaultsDeep(e[k], A) : e[k] : e[k] = A;
+}), e), uuidv4 = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replaceAll(/[xy]/g, function(e) {
+	let k = Math.random() * 16 | 0;
+	return (e == "x" ? k : k & 3 | 8).toString(16);
+}), createIframeUrl = (e) => {
+	let k = [], { appServer: A, language: j, editorLanguage: M, qeVersion: N, loaderBackground: P, loaderSpinnerColor: F, loaderSpinnerBackground: I, loaderFontColor: L, screenMode: R, key: z, token: B, timezoneId: V, itemEmbedding: H, itemDimensions: U, dashboardId: W, dashboardSlug: G, itemId: K, theme: q, mainColor: J, accentColor: Y, editMode: X } = e.params;
+	j && j !== "auto" && k.push(`language=${j}`), M && M !== "auto" && k.push(`editorLanguage=${M}`), N && k.push(`qe_version=${N}`), P && k.push(`ldrbg=${P}`), L && k.push(`ldrftclr=${L}`), F && k.push(`ldrspclr=${F}`), I && k.push(`ldrspbg=${I}`), q && k.push(`theme=${q}`), J && k.push(`mainColor=${J}`), Y && k.push(`accentColor=${Y}`), R && R !== "auto" && k.push("screenMode=&{screenMode}"), V && k.push("timezoneId=" + V), H && U && U.width && k.push("width=" + U.width), H && U && U.height && k.push("height=" + U.height), X && k.push("editMode=" + X);
+	let Z = z && B ? "#" + z + ":" + B : "";
+	return k.push("version=" + (e.libVersion || "0.0.0-unknown-luzmo")), sanitizeUrl(H ? `${A}i/${W || G}/${K}?${encodeURIComponent(k.join("&"))}${Z}` : `${A}i/${W || G}?${encodeURIComponent(k.join("&"))}${Z}`);
+}, getLoader = (e) => {
+	let k;
+	(e.params.error || e.browserNotSupported.length > 0) && (e.params.error = !0, e.browserNotSupported && (k = "Browser is not supported."));
+	let A = translations_default.initializing[e.params.language] || translations_default.initializing.en;
+	return e.browserNotSupported || e.params.error ? {
+		loadingMsg: A,
+		errorMsg: k
+	} : {
+		loadingMsg: A,
+		errorMsg: ""
+	};
+};
+function resolvePromise(e, k, A) {
+	e.promises[k] && (e.promises[k].resolve(A), delete e.promises[k]);
 }
-function getSide(e) {
-	return e.split("-")[0];
+function rejectPromise(e, k, A) {
+	e.promises[k] && (e.promises[k].reject(A), delete e.promises[k]);
 }
-function getAlignment(e) {
-	return e.split("-")[1];
+function containerStyles(e) {
+	let k = {};
+	return e.params.loaderBackground && !e.iframeLoaded && (k.background = e.params.loaderBackground), k;
 }
-function getOppositeAxis(e) {
-	return e === "x" ? "y" : "x";
+function containerLoaderStyles(e) {
+	let k = e.params.itemDimensions?.height || DEFAULT_PARAMETERS.itemDimensions.height, A = e.params.itemEmbedding && k !== "auto";
+	return {
+		display: e.iframeLoaded ? "none" : "",
+		height: `${A ? k : e.minHeight}px`
+	};
 }
-function getAxisLength(e) {
-	return e === "y" ? "height" : "width";
+function loaderStyles(e) {
+	let k = e.params.loaderBackground || DEFAULT_PARAMETERS.loaderBackground;
+	if (e.params.itemEmbedding) {
+		e.loaderSize = 24, e.borderWidth = 4, e.minHeight = 200;
+		let A = e.params.itemDimensions?.width || DEFAULT_PARAMETERS.itemDimensions.width, j = e.params.itemDimensions?.height || DEFAULT_PARAMETERS.itemDimensions.height, M = A !== "auto", N = j !== "auto";
+		return {
+			background: k,
+			width: M ? `${A}px` : "100%",
+			height: `${N ? j : "200"}px`,
+			"min-height": N ? "" : "200px"
+		};
+	}
+	return { background: k };
 }
-var yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
-function getSideAxis(e) {
-	return yAxisSides.has(getSide(e)) ? "y" : "x";
+function plStyles(e) {
+	let { loaderSpinnerColor: k, loaderSpinnerBackground: A } = DEFAULT_PARAMETERS, j = generateBorderStyle(e.borderWidth, e.params.loaderSpinnerColor || k), M = generateBorderStyle(e.borderWidth, e.params.loaderSpinnerBackground || A), N = `${e.loaderSize}px`;
+	return {
+		"border-top": j,
+		"border-right": j,
+		"border-bottom": M,
+		"border-left": M,
+		width: N,
+		height: N
+	};
 }
-function getAlignmentAxis(e) {
-	return getOppositeAxis(getSideAxis(e));
+function lcStyles(e) {
+	let k = e.params.itemDimensions?.height || DEFAULT_PARAMETERS.itemDimensions.height, A = e.params.itemEmbedding && k !== "auto";
+	return { padding: `${e.params.itemId ? ((k) => `${(k - e.loaderSize - 32) / 2}px`)(A ? Number.parseInt(`${k}`, 10) : e.minHeight) : "128px"} 16px` };
 }
-function getAlignmentSides(e, k, A) {
-	A === void 0 && (A = !1);
-	let j = getAlignment(e), M = getAlignmentAxis(e), N = getAxisLength(M), P = M === "x" ? j === (A ? "end" : "start") ? "right" : "left" : j === "start" ? "bottom" : "top";
-	return k.reference[N] > k.floating[N] && (P = getOppositePlacement(P)), [P, getOppositePlacement(P)];
-}
-function getExpandedPlacements(e) {
-	let k = getOppositePlacement(e);
-	return [
-		getOppositeAlignmentPlacement(e),
-		k,
-		getOppositeAlignmentPlacement(k)
-	];
-}
-function getOppositeAlignmentPlacement(e) {
-	return e.replace(/start|end/g, (e) => oppositeAlignmentMap[e]);
-}
-var lrPlacement = ["left", "right"], rlPlacement = ["right", "left"], tbPlacement = ["top", "bottom"], btPlacement = ["bottom", "top"];
-function getSideList(e, k, A) {
-	switch (e) {
-		case "top":
-		case "bottom": return A ? k ? rlPlacement : lrPlacement : k ? lrPlacement : rlPlacement;
-		case "left":
-		case "right": return k ? tbPlacement : btPlacement;
-		default: return [];
-	}
-}
-function getOppositeAxisPlacements(e, k, A, j) {
-	let M = getAlignment(e), N = getSideList(getSide(e), A === "start", j);
-	return M && (N = N.map((e) => e + "-" + M), k && (N = N.concat(N.map(getOppositeAlignmentPlacement)))), N;
-}
-function getOppositePlacement(e) {
-	return e.replace(/left|right|bottom|top/g, (e) => oppositeSideMap[e]);
-}
-function expandPaddingObject(e) {
-	return {
-		top: 0,
-		right: 0,
-		bottom: 0,
-		left: 0,
-		...e
-	};
-}
-function getPaddingObject(e) {
-	return typeof e == "number" ? {
-		top: e,
-		right: e,
-		bottom: e,
-		left: e
-	} : expandPaddingObject(e);
-}
-function rectToClientRect(e) {
-	let { x: k, y: A, width: j, height: M } = e;
-	return {
-		width: j,
-		height: M,
-		top: A,
-		left: k,
-		right: k + j,
-		bottom: A + M,
-		x: k,
-		y: A
-	};
-}
-function computeCoordsFromPlacement(e, k, A) {
-	let { reference: j, floating: M } = e, N = getSideAxis(k), P = getAlignmentAxis(k), F = getAxisLength(P), I = getSide(k), L = N === "y", R = j.x + j.width / 2 - M.width / 2, z = j.y + j.height / 2 - M.height / 2, B = j[F] / 2 - M[F] / 2, V;
-	switch (I) {
-		case "top":
-			V = {
-				x: R,
-				y: j.y - M.height
-			};
-			break;
-		case "bottom":
-			V = {
-				x: R,
-				y: j.y + j.height
-			};
-			break;
-		case "right":
-			V = {
-				x: j.x + j.width,
-				y: z
-			};
-			break;
-		case "left":
-			V = {
-				x: j.x - M.width,
-				y: z
-			};
-			break;
-		default: V = {
-			x: j.x,
-			y: j.y
-		};
-	}
-	switch (getAlignment(k)) {
-		case "start":
-			V[P] -= B * (A && L ? -1 : 1);
-			break;
-		case "end":
-			V[P] += B * (A && L ? -1 : 1);
-			break;
-	}
-	return V;
-}
-var computePosition$1 = async (e, k, A) => {
-	let { placement: j = "bottom", strategy: M = "absolute", middleware: N = [], platform: P } = A, F = N.filter(Boolean), I = await (P.isRTL == null ? void 0 : P.isRTL(k)), L = await P.getElementRects({
-		reference: e,
-		floating: k,
-		strategy: M
-	}), { x: R, y: z } = computeCoordsFromPlacement(L, j, I), B = j, V = {}, H = 0;
-	for (let A = 0; A < F.length; A++) {
-		let { name: N, fn: U } = F[A], { x: W, y: G, data: K, reset: q } = await U({
-			x: R,
-			y: z,
-			initialPlacement: j,
-			placement: B,
-			strategy: M,
-			middlewareData: V,
-			rects: L,
-			platform: P,
-			elements: {
-				reference: e,
-				floating: k
-			}
-		});
-		R = W ?? R, z = G ?? z, V = {
-			...V,
-			[N]: {
-				...V[N],
-				...K
-			}
-		}, q && H <= 50 && (H++, typeof q == "object" && (q.placement && (B = q.placement), q.rects && (L = q.rects === !0 ? await P.getElementRects({
-			reference: e,
-			floating: k,
-			strategy: M
-		}) : q.rects), {x: R, y: z} = computeCoordsFromPlacement(L, B, I)), A = -1);
-	}
-	return {
-		x: R,
-		y: z,
-		placement: B,
-		strategy: M,
-		middlewareData: V
-	};
-};
-async function detectOverflow(e, k) {
-	k === void 0 && (k = {});
-	let { x: A, y: j, platform: M, rects: N, elements: P, strategy: F } = e, { boundary: I = "clippingAncestors", rootBoundary: L = "viewport", elementContext: R = "floating", altBoundary: z = !1, padding: B = 0 } = evaluate(k, e), V = getPaddingObject(B), H = P[z ? R === "floating" ? "reference" : "floating" : R], U = rectToClientRect(await M.getClippingRect({
-		element: await (M.isElement == null ? void 0 : M.isElement(H)) ?? !0 ? H : H.contextElement || await (M.getDocumentElement == null ? void 0 : M.getDocumentElement(P.floating)),
-		boundary: I,
-		rootBoundary: L,
-		strategy: F
-	})), W = R === "floating" ? {
-		x: A,
-		y: j,
-		width: N.floating.width,
-		height: N.floating.height
-	} : N.reference, G = await (M.getOffsetParent == null ? void 0 : M.getOffsetParent(P.floating)), K = await (M.isElement == null ? void 0 : M.isElement(G)) && await (M.getScale == null ? void 0 : M.getScale(G)) || {
-		x: 1,
-		y: 1
-	}, q = rectToClientRect(M.convertOffsetParentRelativeRectToViewportRelativeRect ? await M.convertOffsetParentRelativeRectToViewportRelativeRect({
-		elements: P,
-		rect: W,
-		offsetParent: G,
-		strategy: F
-	}) : W);
-	return {
-		top: (U.top - q.top + V.top) / K.y,
-		bottom: (q.bottom - U.bottom + V.bottom) / K.y,
-		left: (U.left - q.left + V.left) / K.x,
-		right: (q.right - U.right + V.right) / K.x
-	};
-}
-var flip$1 = function(e) {
-	return e === void 0 && (e = {}), {
-		name: "flip",
-		options: e,
-		async fn(k) {
-			var A;
-			let { placement: j, middlewareData: M, rects: N, initialPlacement: P, platform: F, elements: I } = k, { mainAxis: L = !0, crossAxis: R = !0, fallbackPlacements: z, fallbackStrategy: B = "bestFit", fallbackAxisSideDirection: V = "none", flipAlignment: H = !0, ...U } = evaluate(e, k);
-			if ((A = M.arrow) != null && A.alignmentOffset) return {};
-			let W = getSide(j), G = getSideAxis(P), K = getSide(P) === P, q = await (F.isRTL == null ? void 0 : F.isRTL(I.floating)), J = z || (K || !H ? [getOppositePlacement(P)] : getExpandedPlacements(P)), Y = V !== "none";
-			!z && Y && J.push(...getOppositeAxisPlacements(P, H, V, q));
-			let X = [P, ...J], Z = await detectOverflow(k, U), Q = [], $ = M.flip?.overflows || [];
-			if (L && Q.push(Z[W]), R) {
-				let e = getAlignmentSides(j, N, q);
-				Q.push(Z[e[0]], Z[e[1]]);
-			}
-			if ($ = [...$, {
-				placement: j,
-				overflows: Q
-			}], !Q.every((e) => e <= 0)) {
-				let e = (M.flip?.index || 0) + 1, k = X[e];
-				if (k && (!(R === "alignment" && G !== getSideAxis(k)) || $.every((e) => getSideAxis(e.placement) === G ? e.overflows[0] > 0 : !0))) return {
-					data: {
-						index: e,
-						overflows: $
-					},
-					reset: { placement: k }
-				};
-				let A = $.filter((e) => e.overflows[0] <= 0).sort((e, k) => e.overflows[1] - k.overflows[1])[0]?.placement;
-				if (!A) switch (B) {
-					case "bestFit": {
-						let e = $.filter((e) => {
-							if (Y) {
-								let k = getSideAxis(e.placement);
-								return k === G || k === "y";
-							}
-							return !0;
-						}).map((e) => [e.placement, e.overflows.filter((e) => e > 0).reduce((e, k) => e + k, 0)]).sort((e, k) => e[1] - k[1])[0]?.[0];
-						e && (A = e);
-						break;
-					}
-					case "initialPlacement":
-						A = P;
-						break;
-				}
-				if (j !== A) return { reset: { placement: A } };
-			}
-			return {};
-		}
-	};
-}, originSides = /* @__PURE__ */ new Set(["left", "top"]);
-async function convertValueToCoords(e, k) {
-	let { placement: A, platform: j, elements: M } = e, N = await (j.isRTL == null ? void 0 : j.isRTL(M.floating)), P = getSide(A), F = getAlignment(A), I = getSideAxis(A) === "y", L = originSides.has(P) ? -1 : 1, R = N && I ? -1 : 1, z = evaluate(k, e), { mainAxis: B, crossAxis: V, alignmentAxis: H } = typeof z == "number" ? {
-		mainAxis: z,
-		crossAxis: 0,
-		alignmentAxis: null
-	} : {
-		mainAxis: z.mainAxis || 0,
-		crossAxis: z.crossAxis || 0,
-		alignmentAxis: z.alignmentAxis
-	};
-	return F && typeof H == "number" && (V = F === "end" ? H * -1 : H), I ? {
-		x: V * R,
-		y: B * L
-	} : {
-		x: B * L,
-		y: V * R
-	};
-}
-var offset$1 = function(e) {
-	return e === void 0 && (e = 0), {
-		name: "offset",
-		options: e,
-		async fn(k) {
-			var A;
-			let { x: j, y: M, placement: N, middlewareData: P } = k, F = await convertValueToCoords(k, e);
-			return N === P.offset?.placement && (A = P.arrow) != null && A.alignmentOffset ? {} : {
-				x: j + F.x,
-				y: M + F.y,
-				data: {
-					...F,
-					placement: N
-				}
-			};
-		}
-	};
-};
-function hasWindow() {
-	return typeof window < "u";
-}
-function getNodeName(e) {
-	return isNode(e) ? (e.nodeName || "").toLowerCase() : "#document";
-}
-function getWindow(e) {
-	var k;
-	return (e == null || (k = e.ownerDocument) == null ? void 0 : k.defaultView) || window;
-}
-function getDocumentElement(e) {
-	return ((isNode(e) ? e.ownerDocument : e.document) || window.document)?.documentElement;
-}
-function isNode(e) {
-	return hasWindow() ? e instanceof Node || e instanceof getWindow(e).Node : !1;
-}
-function isElement(e) {
-	return hasWindow() ? e instanceof Element || e instanceof getWindow(e).Element : !1;
-}
-function isHTMLElement(e) {
-	return hasWindow() ? e instanceof HTMLElement || e instanceof getWindow(e).HTMLElement : !1;
-}
-function isShadowRoot(e) {
-	return !hasWindow() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof getWindow(e).ShadowRoot;
-}
-var invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
-function isOverflowElement(e) {
-	let { overflow: k, overflowX: A, overflowY: j, display: M } = getComputedStyle$1(e);
-	return /auto|scroll|overlay|hidden|clip/.test(k + j + A) && !invalidOverflowDisplayValues.has(M);
-}
-var tableElements = /* @__PURE__ */ new Set([
-	"table",
-	"td",
-	"th"
-]);
-function isTableElement(e) {
-	return tableElements.has(getNodeName(e));
-}
-var topLayerSelectors = [":popover-open", ":modal"];
-function isTopLayer(e) {
-	return topLayerSelectors.some((k) => {
-		try {
-			return e.matches(k);
-		} catch {
-			return !1;
-		}
-	});
-}
-var transformProperties = [
-	"transform",
-	"translate",
-	"scale",
-	"rotate",
-	"perspective"
-], willChangeValues = [
-	"transform",
-	"translate",
-	"scale",
-	"rotate",
-	"perspective",
-	"filter"
-], containValues = [
-	"paint",
-	"layout",
-	"strict",
-	"content"
-];
-function isContainingBlock(e) {
-	let k = isWebKit(), A = isElement(e) ? getComputedStyle$1(e) : e;
-	return transformProperties.some((e) => A[e] ? A[e] !== "none" : !1) || (A.containerType ? A.containerType !== "normal" : !1) || !k && (A.backdropFilter ? A.backdropFilter !== "none" : !1) || !k && (A.filter ? A.filter !== "none" : !1) || willChangeValues.some((e) => (A.willChange || "").includes(e)) || containValues.some((e) => (A.contain || "").includes(e));
-}
-function getContainingBlock(e) {
-	let k = getParentNode(e);
-	for (; isHTMLElement(k) && !isLastTraversableNode(k);) {
-		if (isContainingBlock(k)) return k;
-		if (isTopLayer(k)) return null;
-		k = getParentNode(k);
-	}
-	return null;
-}
-function isWebKit() {
-	return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
-}
-var lastTraversableNodeNames = /* @__PURE__ */ new Set([
-	"html",
-	"body",
-	"#document"
-]);
-function isLastTraversableNode(e) {
-	return lastTraversableNodeNames.has(getNodeName(e));
-}
-function getComputedStyle$1(e) {
-	return getWindow(e).getComputedStyle(e);
-}
-function getNodeScroll(e) {
-	return isElement(e) ? {
-		scrollLeft: e.scrollLeft,
-		scrollTop: e.scrollTop
-	} : {
-		scrollLeft: e.scrollX,
-		scrollTop: e.scrollY
-	};
-}
-function getParentNode(e) {
-	if (getNodeName(e) === "html") return e;
-	let k = e.assignedSlot || e.parentNode || isShadowRoot(e) && e.host || getDocumentElement(e);
-	return isShadowRoot(k) ? k.host : k;
-}
-function getNearestOverflowAncestor(e) {
-	let k = getParentNode(e);
-	return isLastTraversableNode(k) ? e.ownerDocument ? e.ownerDocument.body : e.body : isHTMLElement(k) && isOverflowElement(k) ? k : getNearestOverflowAncestor(k);
-}
-function getOverflowAncestors(e, k, A) {
-	k === void 0 && (k = []), A === void 0 && (A = !0);
-	let j = getNearestOverflowAncestor(e), M = j === e.ownerDocument?.body, N = getWindow(j);
-	if (M) {
-		let e = getFrameElement(N);
-		return k.concat(N, N.visualViewport || [], isOverflowElement(j) ? j : [], e && A ? getOverflowAncestors(e) : []);
-	}
-	return k.concat(j, getOverflowAncestors(j, [], A));
-}
-function getFrameElement(e) {
-	return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
-}
-function getCssDimensions(e) {
-	let k = getComputedStyle$1(e), A = parseFloat(k.width) || 0, j = parseFloat(k.height) || 0, M = isHTMLElement(e), N = M ? e.offsetWidth : A, P = M ? e.offsetHeight : j, F = round(A) !== N || round(j) !== P;
-	return F && (A = N, j = P), {
-		width: A,
-		height: j,
-		$: F
-	};
-}
-function unwrapElement(e) {
-	return isElement(e) ? e : e.contextElement;
-}
-function getScale(e) {
-	let k = unwrapElement(e);
-	if (!isHTMLElement(k)) return createCoords(1);
-	let A = k.getBoundingClientRect(), { width: j, height: M, $: N } = getCssDimensions(k), P = (N ? round(A.width) : A.width) / j, F = (N ? round(A.height) : A.height) / M;
-	return (!P || !Number.isFinite(P)) && (P = 1), (!F || !Number.isFinite(F)) && (F = 1), {
-		x: P,
-		y: F
-	};
-}
-var noOffsets = /* @__PURE__ */ createCoords(0);
-function getVisualOffsets(e) {
-	let k = getWindow(e);
-	return !isWebKit() || !k.visualViewport ? noOffsets : {
-		x: k.visualViewport.offsetLeft,
-		y: k.visualViewport.offsetTop
-	};
-}
-function shouldAddVisualOffsets(e, k, A) {
-	return k === void 0 && (k = !1), !A || k && A !== getWindow(e) ? !1 : k;
-}
-function getBoundingClientRect(e, k, A, j) {
-	k === void 0 && (k = !1), A === void 0 && (A = !1);
-	let M = e.getBoundingClientRect(), N = unwrapElement(e), P = createCoords(1);
-	k && (j ? isElement(j) && (P = getScale(j)) : P = getScale(e));
-	let F = shouldAddVisualOffsets(N, A, j) ? getVisualOffsets(N) : createCoords(0), I = (M.left + F.x) / P.x, L = (M.top + F.y) / P.y, R = M.width / P.x, z = M.height / P.y;
-	if (N) {
-		let e = getWindow(N), k = j && isElement(j) ? getWindow(j) : j, A = e, M = getFrameElement(A);
-		for (; M && j && k !== A;) {
-			let e = getScale(M), k = M.getBoundingClientRect(), j = getComputedStyle$1(M), N = k.left + (M.clientLeft + parseFloat(j.paddingLeft)) * e.x, P = k.top + (M.clientTop + parseFloat(j.paddingTop)) * e.y;
-			I *= e.x, L *= e.y, R *= e.x, z *= e.y, I += N, L += P, A = getWindow(M), M = getFrameElement(A);
-		}
-	}
-	return rectToClientRect({
-		width: R,
-		height: z,
-		x: I,
-		y: L
-	});
-}
-function getWindowScrollBarX(e, k) {
-	let A = getNodeScroll(e).scrollLeft;
-	return k ? k.left + A : getBoundingClientRect(getDocumentElement(e)).left + A;
-}
-function getHTMLOffset(e, k) {
-	let A = e.getBoundingClientRect();
-	return {
-		x: A.left + k.scrollLeft - getWindowScrollBarX(e, A),
-		y: A.top + k.scrollTop
-	};
-}
-function convertOffsetParentRelativeRectToViewportRelativeRect(e) {
-	let { elements: k, rect: A, offsetParent: j, strategy: M } = e, N = M === "fixed", P = getDocumentElement(j), F = k ? isTopLayer(k.floating) : !1;
-	if (j === P || F && N) return A;
-	let I = {
-		scrollLeft: 0,
-		scrollTop: 0
-	}, L = createCoords(1), R = createCoords(0), z = isHTMLElement(j);
-	if ((z || !z && !N) && ((getNodeName(j) !== "body" || isOverflowElement(P)) && (I = getNodeScroll(j)), isHTMLElement(j))) {
-		let e = getBoundingClientRect(j);
-		L = getScale(j), R.x = e.x + j.clientLeft, R.y = e.y + j.clientTop;
-	}
-	let B = P && !z && !N ? getHTMLOffset(P, I) : createCoords(0);
-	return {
-		width: A.width * L.x,
-		height: A.height * L.y,
-		x: A.x * L.x - I.scrollLeft * L.x + R.x + B.x,
-		y: A.y * L.y - I.scrollTop * L.y + R.y + B.y
-	};
-}
-function getClientRects(e) {
-	return Array.from(e.getClientRects());
-}
-function getDocumentRect(e) {
-	let k = getDocumentElement(e), A = getNodeScroll(e), j = e.ownerDocument.body, M = max(k.scrollWidth, k.clientWidth, j.scrollWidth, j.clientWidth), N = max(k.scrollHeight, k.clientHeight, j.scrollHeight, j.clientHeight), P = -A.scrollLeft + getWindowScrollBarX(e), F = -A.scrollTop;
-	return getComputedStyle$1(j).direction === "rtl" && (P += max(k.clientWidth, j.clientWidth) - M), {
-		width: M,
-		height: N,
-		x: P,
-		y: F
-	};
-}
-var SCROLLBAR_MAX = 25;
-function getViewportRect(e, k) {
-	let A = getWindow(e), j = getDocumentElement(e), M = A.visualViewport, N = j.clientWidth, P = j.clientHeight, F = 0, I = 0;
-	if (M) {
-		N = M.width, P = M.height;
-		let e = isWebKit();
-		(!e || e && k === "fixed") && (F = M.offsetLeft, I = M.offsetTop);
-	}
-	let L = getWindowScrollBarX(j);
-	if (L <= 0) {
-		let e = j.ownerDocument, k = e.body, A = getComputedStyle(k), M = e.compatMode === "CSS1Compat" && parseFloat(A.marginLeft) + parseFloat(A.marginRight) || 0, P = Math.abs(j.clientWidth - k.clientWidth - M);
-		P <= SCROLLBAR_MAX && (N -= P);
-	} else L <= SCROLLBAR_MAX && (N += L);
-	return {
-		width: N,
-		height: P,
-		x: F,
-		y: I
-	};
-}
-var absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
-function getInnerBoundingClientRect(e, k) {
-	let A = getBoundingClientRect(e, !0, k === "fixed"), j = A.top + e.clientTop, M = A.left + e.clientLeft, N = isHTMLElement(e) ? getScale(e) : createCoords(1);
-	return {
-		width: e.clientWidth * N.x,
-		height: e.clientHeight * N.y,
-		x: M * N.x,
-		y: j * N.y
-	};
-}
-function getClientRectFromClippingAncestor(e, k, A) {
-	let j;
-	if (k === "viewport") j = getViewportRect(e, A);
-	else if (k === "document") j = getDocumentRect(getDocumentElement(e));
-	else if (isElement(k)) j = getInnerBoundingClientRect(k, A);
-	else {
-		let A = getVisualOffsets(e);
-		j = {
-			x: k.x - A.x,
-			y: k.y - A.y,
-			width: k.width,
-			height: k.height
-		};
-	}
-	return rectToClientRect(j);
-}
-function hasFixedPositionAncestor(e, k) {
-	let A = getParentNode(e);
-	return A === k || !isElement(A) || isLastTraversableNode(A) ? !1 : getComputedStyle$1(A).position === "fixed" || hasFixedPositionAncestor(A, k);
-}
-function getClippingElementAncestors(e, k) {
-	let A = k.get(e);
-	if (A) return A;
-	let j = getOverflowAncestors(e, [], !1).filter((e) => isElement(e) && getNodeName(e) !== "body"), M = null, N = getComputedStyle$1(e).position === "fixed", P = N ? getParentNode(e) : e;
-	for (; isElement(P) && !isLastTraversableNode(P);) {
-		let k = getComputedStyle$1(P), A = isContainingBlock(P);
-		!A && k.position === "fixed" && (M = null), (N ? !A && !M : !A && k.position === "static" && M && absoluteOrFixed.has(M.position) || isOverflowElement(P) && !A && hasFixedPositionAncestor(e, P)) ? j = j.filter((e) => e !== P) : M = k, P = getParentNode(P);
-	}
-	return k.set(e, j), j;
-}
-function getClippingRect(e) {
-	let { element: k, boundary: A, rootBoundary: j, strategy: M } = e, N = [...A === "clippingAncestors" ? isTopLayer(k) ? [] : getClippingElementAncestors(k, this._c) : [].concat(A), j], P = N[0], F = N.reduce((e, A) => {
-		let j = getClientRectFromClippingAncestor(k, A, M);
-		return e.top = max(j.top, e.top), e.right = min(j.right, e.right), e.bottom = min(j.bottom, e.bottom), e.left = max(j.left, e.left), e;
-	}, getClientRectFromClippingAncestor(k, P, M));
-	return {
-		width: F.right - F.left,
-		height: F.bottom - F.top,
-		x: F.left,
-		y: F.top
-	};
-}
-function getDimensions(e) {
-	let { width: k, height: A } = getCssDimensions(e);
-	return {
-		width: k,
-		height: A
-	};
-}
-function getRectRelativeToOffsetParent(e, k, A) {
-	let j = isHTMLElement(k), M = getDocumentElement(k), N = A === "fixed", P = getBoundingClientRect(e, !0, N, k), F = {
-		scrollLeft: 0,
-		scrollTop: 0
-	}, I = createCoords(0);
-	function L() {
-		I.x = getWindowScrollBarX(M);
-	}
-	if (j || !j && !N) if ((getNodeName(k) !== "body" || isOverflowElement(M)) && (F = getNodeScroll(k)), j) {
-		let e = getBoundingClientRect(k, !0, N, k);
-		I.x = e.x + k.clientLeft, I.y = e.y + k.clientTop;
-	} else M && L();
-	N && !j && M && L();
-	let R = M && !j && !N ? getHTMLOffset(M, F) : createCoords(0);
-	return {
-		x: P.left + F.scrollLeft - I.x - R.x,
-		y: P.top + F.scrollTop - I.y - R.y,
-		width: P.width,
-		height: P.height
-	};
-}
-function isStaticPositioned(e) {
-	return getComputedStyle$1(e).position === "static";
-}
-function getTrueOffsetParent(e, k) {
-	if (!isHTMLElement(e) || getComputedStyle$1(e).position === "fixed") return null;
-	if (k) return k(e);
-	let A = e.offsetParent;
-	return getDocumentElement(e) === A && (A = A.ownerDocument.body), A;
-}
-function getOffsetParent(e, k) {
-	let A = getWindow(e);
-	if (isTopLayer(e)) return A;
-	if (!isHTMLElement(e)) {
-		let k = getParentNode(e);
-		for (; k && !isLastTraversableNode(k);) {
-			if (isElement(k) && !isStaticPositioned(k)) return k;
-			k = getParentNode(k);
-		}
-		return A;
-	}
-	let j = getTrueOffsetParent(e, k);
-	for (; j && isTableElement(j) && isStaticPositioned(j);) j = getTrueOffsetParent(j, k);
-	return j && isLastTraversableNode(j) && isStaticPositioned(j) && !isContainingBlock(j) ? A : j || getContainingBlock(e) || A;
-}
-var getElementRects = async function(e) {
-	let k = this.getOffsetParent || getOffsetParent, A = this.getDimensions, j = await A(e.floating);
-	return {
-		reference: getRectRelativeToOffsetParent(e.reference, await k(e.floating), e.strategy),
-		floating: {
-			x: 0,
-			y: 0,
-			width: j.width,
-			height: j.height
-		}
-	};
-};
-function isRTL(e) {
-	return getComputedStyle$1(e).direction === "rtl";
-}
-var platform = {
-	convertOffsetParentRelativeRectToViewportRelativeRect,
-	getDocumentElement,
-	getClippingRect,
-	getOffsetParent,
-	getElementRects,
-	getClientRects,
-	getDimensions,
-	getScale,
-	isElement,
-	isRTL
-};
-function rectsAreEqual(e, k) {
-	return e.x === k.x && e.y === k.y && e.width === k.width && e.height === k.height;
-}
-function observeMove(e, k) {
-	let A = null, j, M = getDocumentElement(e);
-	function N() {
-		var e;
-		clearTimeout(j), (e = A) == null || e.disconnect(), A = null;
-	}
-	function P(F, I) {
-		F === void 0 && (F = !1), I === void 0 && (I = 1), N();
-		let L = e.getBoundingClientRect(), { left: R, top: z, width: B, height: V } = L;
-		if (F || k(), !B || !V) return;
-		let H = floor(z), U = floor(M.clientWidth - (R + B)), W = floor(M.clientHeight - (z + V)), G = floor(R), K = {
-			rootMargin: -H + "px " + -U + "px " + -W + "px " + -G + "px",
-			threshold: max(0, min(1, I)) || 1
-		}, q = !0;
-		function J(k) {
-			let A = k[0].intersectionRatio;
-			if (A !== I) {
-				if (!q) return P();
-				A ? P(!1, A) : j = setTimeout(() => {
-					P(!1, 1e-7);
-				}, 1e3);
-			}
-			A === 1 && !rectsAreEqual(L, e.getBoundingClientRect()) && P(), q = !1;
-		}
-		try {
-			A = new IntersectionObserver(J, {
-				...K,
-				root: M.ownerDocument
-			});
-		} catch {
-			A = new IntersectionObserver(J, K);
-		}
-		A.observe(e);
-	}
-	return P(!0), N;
-}
-function autoUpdate(e, k, A, j) {
-	j === void 0 && (j = {});
-	let { ancestorScroll: M = !0, ancestorResize: N = !0, elementResize: P = typeof ResizeObserver == "function", layoutShift: F = typeof IntersectionObserver == "function", animationFrame: I = !1 } = j, L = unwrapElement(e), R = M || N ? [...L ? getOverflowAncestors(L) : [], ...getOverflowAncestors(k)] : [];
-	R.forEach((e) => {
-		M && e.addEventListener("scroll", A, { passive: !0 }), N && e.addEventListener("resize", A);
-	});
-	let z = L && F ? observeMove(L, A) : null, B = -1, V = null;
-	P && (V = new ResizeObserver((e) => {
-		let [j] = e;
-		j && j.target === L && V && (V.unobserve(k), cancelAnimationFrame(B), B = requestAnimationFrame(() => {
-			var e;
-			(e = V) == null || e.observe(k);
-		})), A();
-	}), L && !I && V.observe(L), V.observe(k));
-	let H, U = I ? getBoundingClientRect(e) : null;
-	I && W();
-	function W() {
-		let k = getBoundingClientRect(e);
-		U && !rectsAreEqual(U, k) && A(), U = k, H = requestAnimationFrame(W);
-	}
-	return A(), () => {
-		var e;
-		R.forEach((e) => {
-			M && e.removeEventListener("scroll", A), N && e.removeEventListener("resize", A);
-		}), z?.(), (e = V) == null || e.disconnect(), V = null, I && cancelAnimationFrame(H);
-	};
-}
-var offset = offset$1, flip = flip$1, computePosition = (e, k, A) => {
-	let j = /* @__PURE__ */ new Map(), M = {
-		platform,
-		...A
-	}, N = {
-		...M.platform,
-		_c: j
-	};
-	return computePosition$1(e, k, {
-		...M,
-		platform: N
-	});
-};
-const _handleError = (e, k) => {
-	let A = "The dashboard component encountered an error";
-	typeof k?.dashboardId == "string" && (A += ` for dashboard with id ${k.dashboardId}`), typeof k?.dashboardSlug == "string" && (A += ` for dashboard with slug ${k.dashboardSlug}`), typeof k?.container == "string" && (A += ` in container ${k.container}`), e && (A += `:\n${e}`, console.warn(A));
-}, _browserCheck = (e) => {
-	let k = !1, A = "", j = (document.body || document.documentElement).style, M = {
-		svg: !!("createElementNS" in document && document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect),
-		flexbox: j.webkitFlexWrap === "" || j.flexWrap === "",
-		postMessage: !!window.postMessage
-	};
-	for (let j of [
-		"svg",
-		"flexbox",
-		"postMessage"
-	]) M[j] || (k = !0, e.browserNotSupported = e.browserNotSupported || [], e.browserNotSupported.push(j), A += `Your browser does not support: ${j}\n`);
-	let N = window.navigator.userAgent, P = N.includes("MSIE"), F = N.includes("Trident/");
-	(P || F) && (k = !0, A = "IE is not supported."), k && _handleError(A);
-}, DEFAULT_PARAMETERS = {
-	appServer: "https://app.luzmo.com/",
-	apiHost: "https://api.luzmo.com/",
-	dashboardId: null,
-	dashboardSlug: null,
-	container: null,
-	key: null,
-	token: null,
-	language: "auto",
-	editorLanguage: "auto",
-	qeVersion: null,
-	editMode: null,
-	screenMode: null,
-	switchScreenModeOnResize: !0,
-	itemId: null,
-	theme: "",
-	mainColor: "",
-	accentColor: "",
-	itemDimensions: {
-		width: "auto",
-		height: "auto"
-	},
-	loaderBackground: "#f9f9f9",
-	loaderFontColor: "#5a5a5a",
-	loaderSpinnerColor: "rgba(255, 165, 0, 0.7)",
-	loaderSpinnerBackground: "rgba(169, 169, 169, 0.14)",
-	timezoneId: null,
-	contextId: null
-}, EXTENTS = [
-	{
-		mode: "mobile",
-		width: [150, 767]
-	},
-	{
-		mode: "tablet",
-		width: [768, 1199]
-	},
-	{
-		mode: "desktop",
-		width: [1200, 1599]
-	},
-	{
-		mode: "largeScreen",
-		width: [1600, 9999]
-	},
-	{
-		mode: "fixed",
-		width: []
-	}
-];
-var translations_default = {
-	initializing: {
-		en: "Initializing...",
-		nl: "Laden...",
-		fr: "Chargement...",
-		de: "Initialisiere...",
-		es: "Inicializando..."
-	},
-	errorDashboard: {
-		en: "Oops, we could not load this dashboard!",
-		nl: "Oeps, we konden het dashboard niet laden.",
-		fr: "Le chargement a echoué.",
-		de: "Hoppla, wir konnten dieses Dashboard nicht laden!",
-		es: "¡Ups! No pudimos cargar este tablero."
-	},
-	errorItem: {
-		en: "Oops, we could not load this item!",
-		nl: "Oeps, we konden de grafiek niet laden.",
-		fr: "Le chargement a echoué.",
-		de: "Hoppla, wir konnten dieses Diagramm nicht laden!",
-		es: "¡Ups! No pudimos cargar este elemento."
-	}
-};
-const addTrailingSlash = (e) => e ? e.endsWith("/") ? e : `${e}/` : "", removeTrailingSlash = (e) => e ? e.endsWith("/") ? e.slice(0, -1) : e : "", formatDashboardList = (e, k, A, j) => {
-	let M = (e, k) => {
-		let A = e.users.find((e) => e.id === k.id), j = A && A.userAccessRight ? {
-			flagRead: A.userAccessRight.flagRead,
-			flagUse: A.userAccessRight.flagUse,
-			flagModify: A.userAccessRight.flagModify,
-			flagOwn: A.userAccessRight.flagOwn
-		} : {
-			flagRead: !1,
-			flagUse: !1,
-			flagModify: !1,
-			flagOwn: !1
-		}, M = e.groups.filter((e) => k.userGroups.includes(e.id) || e.public === !0).map((e) => {
-			if (e.groupAccessRight) return e.groupAccessRight;
-		});
-		for (let e of M) !j.flagRead && e.flagRead && (j.flagRead = e.flagRead), !j.flagUse && e.flagUse && (j.flagUse = e.flagUse), !j.flagModify && e.flagModify && (j.flagModify = e.flagModify), !j.flagOwn && e.flagOwn && (j.flagOwn = e.flagOwn);
-		let N = e.integrations?.length > 0 ? e.integrations.map((e) => {
-			if (e.integrationAccessRight) return e.integrationAccessRight;
-		}) : [];
-		for (let e of N) !j.flagRead && e.flagRead && (j.flagRead = e.flagRead), !j.flagUse && e.flagUse && (j.flagUse = e.flagUse), !j.flagModify && e.flagModify && (j.flagModify = e.flagModify);
-		return j;
-	}, N = (e, k) => {
-		if (e == null) return "";
-		if (typeof e != "object" || Object.keys(e).length === 0) return typeof e == "object" && Object.keys(e).length === 0 ? "" : e;
-		let A;
-		return A = k && e[k] ? e[k] : e[Object.keys(e)[0]], A ??= "", A;
-	}, P = [];
-	for (let F of e) {
-		let e = {
-			accessibleBy: [],
-			accessRights: M(F, A),
-			id: F.id,
-			modifiedAt: F.modified_at,
-			name: N(F.name, j.language),
-			slug: null,
-			tags: F.tags.map((e) => e.tag).sort((e, k) => e.localeCompare(k))
-		}, I = F.integrations.find((e) => e.id === k);
-		I?.integrationAccessRight?.slug && (e.slug = I.integrationAccessRight.slug);
-		let L = F.users.map((e) => ({
-			model: "User",
-			id: e.id,
-			name: N(e.name, A.locale_id)
-		})), R = F.groups.map((e) => ({
-			model: "Group",
-			id: e.id,
-			name: N(e.name, A.locale_id) || {}
-		})), z = F.integrations.map((e) => ({
-			model: "Integration",
-			id: e.id,
-			name: N(e.name, A.locale_id) || {}
-		}));
-		e.accessibleBy = [
-			...L,
-			...R,
-			...z
-		], P.push(e);
-	}
-	return P;
-}, sanitizeUrl = (e) => {
-	let k = /^(%20|\s)*(javascript|data)/im, A = /[^\u0020-\u007E]/gim, j = /^([^:]+):/gm, M = new Set([".", "/"]), N = (e) => M.has(e[0]);
-	if (!e) return "about:blank";
-	let P = e.replaceAll(A, "").trim();
-	if (N(P)) return P;
-	let F = P.match(j);
-	if (!F) return P;
-	let I = F[0];
-	return k.test(I) ? "about:blank" : P;
-}, cloneDeep = (e) => JSON.parse(JSON.stringify(e));
-var isObject = (e) => e && typeof e == "object";
-const defaultsDeep = (e, k) => (Object.entries(k).forEach(([k, A]) => {
-	k in e ? e[k] === void 0 ? e[k] = A : e[k] = isObject(A) ? defaultsDeep(e[k], A) : e[k] : e[k] = A;
-}), e), uuidv4 = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replaceAll(/[xy]/g, function(e) {
-	let k = Math.random() * 16 | 0;
-	return (e == "x" ? k : k & 3 | 8).toString(16);
-}), createIframeUrl = (e) => {
-	let k = [], { appServer: A, language: j, editorLanguage: M, qeVersion: N, loaderBackground: P, loaderSpinnerColor: F, loaderSpinnerBackground: I, loaderFontColor: L, screenMode: R, key: z, token: B, timezoneId: V, itemEmbedding: H, itemDimensions: U, dashboardId: W, dashboardSlug: G, itemId: K, theme: q, mainColor: J, accentColor: Y, editMode: X } = e.params;
-	j && j !== "auto" && k.push(`language=${j}`), M && M !== "auto" && k.push(`editorLanguage=${M}`), N && k.push(`qe_version=${N}`), P && k.push(`ldrbg=${P}`), L && k.push(`ldrftclr=${L}`), F && k.push(`ldrspclr=${F}`), I && k.push(`ldrspbg=${I}`), q && k.push(`theme=${q}`), J && k.push(`mainColor=${J}`), Y && k.push(`accentColor=${Y}`), R && R !== "auto" && k.push("screenMode=&{screenMode}"), V && k.push("timezoneId=" + V), H && U && U.width && k.push("width=" + U.width), H && U && U.height && k.push("height=" + U.height), X && k.push("editMode=" + X);
-	let Z = z && B ? "#" + z + ":" + B : "";
-	return k.push("version=" + (e.libVersion || "0.0.0-unknown-luzmo")), sanitizeUrl(H ? `${A}i/${W || G}/${K}?${encodeURIComponent(k.join("&"))}${Z}` : `${A}i/${W || G}?${encodeURIComponent(k.join("&"))}${Z}`);
-}, getLoader = (e) => {
-	let k;
-	(e.params.error || e.browserNotSupported.length > 0) && (e.params.error = !0, e.browserNotSupported && (k = "Browser is not supported."));
-	let A = translations_default.initializing[e.params.language] || translations_default.initializing.en;
-	return e.browserNotSupported || e.params.error ? {
-		loadingMsg: A,
-		errorMsg: k
-	} : {
-		loadingMsg: A,
-		errorMsg: ""
-	};
-};
-function resolvePromise(e, k, A) {
-	e.promises[k] && (e.promises[k].resolve(A), delete e.promises[k]);
-}
-function rejectPromise(e, k, A) {
-	e.promises[k] && (e.promises[k].reject(A), delete e.promises[k]);
-}
-function containerStyles(e) {
-	let k = {};
-	return e.params.loaderBackground && !e.iframeLoaded && (k.background = e.params.loaderBackground), k;
-}
-function containerLoaderStyles(e) {
-	let k = e.params.itemDimensions?.height || DEFAULT_PARAMETERS.itemDimensions.height, A = e.params.itemEmbedding && k !== "auto";
-	return {
-		display: e.iframeLoaded ? "none" : "",
-		height: `${A ? k : e.minHeight}px`
-	};
-}
-function loaderStyles(e) {
-	let k = e.params.loaderBackground || DEFAULT_PARAMETERS.loaderBackground;
-	if (e.params.itemEmbedding) {
-		e.loaderSize = 24, e.borderWidth = 4, e.minHeight = 200;
-		let A = e.params.itemDimensions?.width || DEFAULT_PARAMETERS.itemDimensions.width, j = e.params.itemDimensions?.height || DEFAULT_PARAMETERS.itemDimensions.height, M = A !== "auto", N = j !== "auto";
-		return {
-			background: k,
-			width: M ? `${A}px` : "100%",
-			height: `${N ? j : "200"}px`,
-			"min-height": N ? "" : "200px"
-		};
-	}
-	return { background: k };
-}
-function plStyles(e) {
-	let { loaderSpinnerColor: k, loaderSpinnerBackground: A } = DEFAULT_PARAMETERS, j = generateBorderStyle(e.borderWidth, e.params.loaderSpinnerColor || k), M = generateBorderStyle(e.borderWidth, e.params.loaderSpinnerBackground || A), N = `${e.loaderSize}px`;
-	return {
-		"border-top": j,
-		"border-right": j,
-		"border-bottom": M,
-		"border-left": M,
-		width: N,
-		height: N
-	};
-}
-function lcStyles(e) {
-	let k = e.params.itemDimensions?.height || DEFAULT_PARAMETERS.itemDimensions.height, A = e.params.itemEmbedding && k !== "auto";
-	return { padding: `${e.params.itemId ? ((k) => `${(k - e.loaderSize - 32) / 2}px`)(A ? Number.parseInt(`${k}`, 10) : e.minHeight) : "128px"} 16px` };
-}
-function calculateIframeStyles(e) {
-	let k = e.params.itemDimensions?.height || DEFAULT_PARAMETERS.itemDimensions.height, A = e.params.itemDimensions?.width || DEFAULT_PARAMETERS.itemDimensions.width;
-	e.params.itemEmbedding && k !== "auto" ? e.iframeHeight = `${k}px` : e.params.itemEmbedding ? e.iframeHeight = "200px" : ["editFull", "editLimited"].includes(e.params.editMode) ? e.iframeHeight = "100%" : e.iframeHeight = "400px", e.iframeWidth = e.params.itemEmbedding && A !== "auto" ? `${A}px` : "100%";
-	let j = {
-		height: e.iframeHeight,
-		width: e.iframeWidth
-	};
-	return e.iframeLoaded ? j.opacity = 1 : e.error ? (j.opacity = 1, j.width = "100%", j.height = "400px") : j.opacity = 0, j;
+function calculateIframeStyles(e) {
+	let k = e.params.itemDimensions?.height || DEFAULT_PARAMETERS.itemDimensions.height, A = e.params.itemDimensions?.width || DEFAULT_PARAMETERS.itemDimensions.width;
+	e.params.itemEmbedding && k !== "auto" ? e.iframeHeight = `${k}px` : e.params.itemEmbedding ? e.iframeHeight = "200px" : ["editFull", "editLimited"].includes(e.params.editMode) ? e.iframeHeight = "100%" : e.iframeHeight = "400px", e.iframeWidth = e.params.itemEmbedding && A !== "auto" ? `${A}px` : "100%";
+	let j = {
+		height: e.iframeHeight,
+		width: e.iframeWidth
+	};
+	return e.iframeLoaded ? j.opacity = 1 : e.error ? (j.opacity = 1, j.width = "100%", j.height = "400px") : j.opacity = 0, j;
 }
 function generateBorderStyle(e, k) {
 	return `${e}px solid ${k}`;
@@ -1716,364 +978,1750 @@ var __defProp = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyD
 		let e = getLoader(this);
 		this._loaderMsg = e.loadingMsg, e.errorMsg && (this.browserError = !0, this.browserErrorMsg = e.errorMsg, this._displayError());
 	}
-	_displayError() {
-		this.dashboardError && (this._loaderStyles(), this.iframeStyle.opacity = 1), this.browserError && (this._containerStyle.display = "none");
+	_displayError() {
+		this.dashboardError && (this._loaderStyles(), this.iframeStyle.opacity = 1), this.browserError && (this._containerStyle.display = "none");
+	}
+	_calculateDimAfterDashboardLoaded() {
+		this.dashboardError = !1, this._loaderStyles(), _setCalculatedDimensions(this);
+	}
+	_loaderStyles() {
+		this._containerStyle = containerStyles(this), this._loaderStyle = loaderStyles(this), this._loadingCircleStyle = plStyles(this), this._containerLoaderStyle = containerLoaderStyles(this), this._lcStyle = lcStyles(this);
+	}
+	static get styles() {
+		return [dashboardStyles];
+	}
+	render() {
+		let e, k = html`
+      <div
+        class="luzmo-container-loader"
+        id="luzmo-container-loader-${this._containerId}"
+        style=${styleMap(this._containerLoaderStyle)}
+      >
+        <div
+          class="luzmo-loader"
+          id="luzmo-loader-${this._containerId}"
+          style=${styleMap(this._loaderStyle)}
+        >
+          <div
+            class="luzmo-lc"
+            style=${styleMap(this._lcStyle)}
+          >
+            <div
+              class="luzmo-loading-circle"
+              style=${styleMap(this._loadingCircleStyle)}
+            ></div>
+            ${this._itemEmbedding ? "" : html`
+                <div
+                  class="luzmo-loading-message"
+                  style=${styleMap({ color: this.loaderFontColor })}
+                >
+                  ${this._loaderMsg}
+                </div>
+              `}
+          </div>
+        </div>
+      </div>
+    `;
+		return e = this.isWebComponentViewMode() ? this.isLibraryLoaded ? html`
+          ${this.dashboardId || this.dashboardSlug ? html`
+            <dashboard-component dashboard-id="${this.params.dashboardId}" app-server="${this.params.appServer}"
+                                 api-host="${this.params.apiHost}"></dashboard-component>
+          ` : html`
+            <div id="luzmo-error-${this._containerId}">
+              <h3 class="luzmo-error">${this.browserErrorMsg}</h3>
+            </div>
+          `}
+        ` : html`${k}` : html`
+        ${this.dashboardId || this.dashboardSlug ? html`
+            ${k}
+            <iframe
+              class="luzmo-embed-dashboard ${this.isWebComponentViewMode() ? "" : "luzmo-embed-dashboard-ede"}"
+              id="${this._iframeId}"
+              name="${this._iframeId}"
+              style=${styleMap(this.iframeStyle)}
+              src="${this._iframeUrl}"
+              frameborder="0"
+            ></iframe>
+          ` : html`<!-- the dashboard will inititialize when you provide a dashboardSlug or a dashboardId -->`}
+        ${this.browserError ? html`
+            <div id="luzmo-error-${this._containerId}">
+              <h3 class="luzmo-error">${this.browserErrorMsg}</h3>
+            </div>
+          ` : ""}
+      `, html`
+      <div class="${luzmoEmbedContainerClass} ${this.isWebComponentViewMode() ? "" : `${luzmoEmbedContainerClass}-ede`}">
+        <div
+          class="dashboard-container"
+          style=${styleMap(Object.assign({}, this._containerStyle, {
+			width: this.iframeStyle.width ?? "100%",
+			height: this.iframeStyle.height ?? "100%"
+		}))}
+        >
+          ${e}
+        </div>
+      </div>
+
+    `;
+	}
+	getDashboards() {
+		return new Promise((e) => e(luzmo_service_default._dashboardComponents));
+	}
+	getData(e) {
+		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.getData(e) : this.isWebComponentViewMode() ? Promise.reject() : getData(this, this.iframe, e);
+	}
+	getFilters() {
+		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.getFilters() : this.isWebComponentViewMode() ? Promise.reject() : getFilters(this, this.iframe);
+	}
+	setSelectedData(e, k) {
+		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.setSelectedData(e, k) : this.isWebComponentViewMode() ? Promise.reject() : setSelectedData(this, this.iframe, e, k);
+	}
+	setAuthorization(e, k) {
+		return this.currentAuthKey = e, this.currentAuthToken = k, this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.setAuthorization(e, k) : this.isWebComponentViewMode() ? Promise.reject() : setAuthorization(this, this.iframe, e, k);
+	}
+	refreshData(e) {
+		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.refreshData(e) : this.isWebComponentViewMode() ? Promise.reject() : e ? refreshData(this, this.iframe, e) : refreshData(this, this.iframe);
+	}
+	reloadDashboard() {
+		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.reloadDashboard() : this.isWebComponentViewMode() ? Promise.reject() : reloadDashboard(this, this.iframe);
+	}
+	exportDashboard(e) {
+		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.exportDashboard(e) : this.isWebComponentViewMode() ? Promise.reject() : e ? exportDashboard(this, this.iframe, e) : exportDashboard(this, this.iframe);
+	}
+	getAccessibleDashboards() {
+		return getAccessibleDashboards(this);
+	}
+	addFilters(e, k) {
+		return this.dashboardReference.addFilters(e, k);
+	}
+	setEditMode(e) {
+		return this.dashboardReference && e === "view" ? (this.editMode = "view", this.params.editMode = "view", this.initComponent(), Promise.resolve({
+			type: "setEditMode",
+			editMode: e
+		})) : this.dashboardReference && ["editFull", "editLimited"].includes(e) ? (this.editMode = e, this.params.editMode = e, this.initComponent(), Promise.resolve({
+			type: "setEditMode",
+			editMode: e
+		})) : this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.setEditMode(e) : this.isWebComponentViewMode() ? Promise.reject() : setEditMode(this, this.iframe, e);
+	}
+	setPreview(e) {
+		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.setPreview(e) : setPreview(this, this.iframe, e);
+	}
+	sendExportEmail(e, k, A) {
+		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.sendExportEmail(e, k, A) : this.isWebComponentViewMode() ? Promise.reject() : sendExportEmail(this, this.iframe, e, k, A);
+	}
+	isWebComponentViewMode() {
+		return this.embedMode === "webComponent" && (this.params.editMode === "view" || this.params.editMode === void 0);
+	}
+};
+__decorateClass([query(".dashboard-container")], LuzmoDashboard.prototype, "container", 2), __decorateClass([query(`.${luzmoEmbedContainerClass}`)], LuzmoDashboard.prototype, "luzmoEmbedContainer", 2), __decorateClass([query("iframe")], LuzmoDashboard.prototype, "iframe", 2), __decorateClass([property()], LuzmoDashboard.prototype, "dashboardId", 2), __decorateClass([property()], LuzmoDashboard.prototype, "dashboardSlug", 2), __decorateClass([property()], LuzmoDashboard.prototype, "itemId", 2), __decorateClass([property()], LuzmoDashboard.prototype, "language", 2), __decorateClass([property()], LuzmoDashboard.prototype, "editorLanguage", 2), __decorateClass([property()], LuzmoDashboard.prototype, "qeVersion", 2), __decorateClass([property()], LuzmoDashboard.prototype, "screenMode", 2), __decorateClass([property({ converter: {
+	fromAttribute: (e) => e === "true",
+	toAttribute: String
+} })], LuzmoDashboard.prototype, "switchScreenModeOnResize", 2), __decorateClass([property()], LuzmoDashboard.prototype, "editMode", 2), __decorateClass([property()], LuzmoDashboard.prototype, "theme", 2), __decorateClass([property()], LuzmoDashboard.prototype, "mainColor", 2), __decorateClass([property()], LuzmoDashboard.prototype, "accentColor", 2), __decorateClass([property()], LuzmoDashboard.prototype, "authToken", 2), __decorateClass([property()], LuzmoDashboard.prototype, "authKey", 2), __decorateClass([property()], LuzmoDashboard.prototype, "loaderBackground", 2), __decorateClass([property()], LuzmoDashboard.prototype, "loaderFontColor", 2), __decorateClass([property()], LuzmoDashboard.prototype, "loaderSpinnerColor", 2), __decorateClass([property()], LuzmoDashboard.prototype, "loaderSpinnerBackground", 2), __decorateClass([property()], LuzmoDashboard.prototype, "appServer", 2), __decorateClass([property()], LuzmoDashboard.prototype, "timezoneId", 2), __decorateClass([property()], LuzmoDashboard.prototype, "apiHost", 2), __decorateClass([property({ type: Object })], LuzmoDashboard.prototype, "itemDimensions", 2), __decorateClass([property()], LuzmoDashboard.prototype, "embedMode", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_containerId", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_iframeId", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "params", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_iframeUrl", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "iframeLoaded", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "promises", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "iframeStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_containerStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_loaderStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_lcStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_loadingCircleStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_containerLoaderStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_loaderMsg", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "containerWidth", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "dimensions", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "currentScreenMode", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_itemEmbedding", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "browserError", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "browserErrorMsg", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "dashboardError", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "browserNotSupported", 2), __decorateClass([property()], LuzmoDashboard.prototype, "libVersion", 2), __decorateClass([state()], LuzmoDashboard.prototype, "isLibraryLoaded", 2), __decorateClass([state()], LuzmoDashboard.prototype, "dashboardReference", 2), __decorateClass([state()], LuzmoDashboard.prototype, "currentAuthKey", 2), __decorateClass([state()], LuzmoDashboard.prototype, "currentAuthToken", 2), __decorateClass([state()], LuzmoDashboard.prototype, "isInitCalled", 2);
+var LuzmoEmbedDashboard = class extends LuzmoDashboard {};
+customElements.get("luzmo-embed-dashboard") || customElements.define("luzmo-embed-dashboard", LuzmoEmbedDashboard);
+var dashboardContentsVersion = "0.1.99", vizItemRemote = "VizItemApp", LuzmoBaseVizItem = class extends LitElement {
+	constructor() {
+		super(...arguments), this.appServer = "https://app.luzmo.com", this.apiHost = "https://api.luzmo.com", this.slots = [], this.version = version + "-wc-luzmo", this.dashboardContentsVersion = dashboardContentsVersion, this.libVersion = version + "-wc-luzmo", this.postInitCallQueue = [];
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    luzmo-embed-viz-item {
+      width: 100%;
+      height: 1000%;
+      display: block;
+    }
+  `;
+	}
+	createRenderRoot() {
+		return this.style.display || (this.style.display = "block"), this.style.height || (this.style.height = "100%"), this.style.width || (this.style.width = "100%"), this;
+	}
+	canInitializeVizItem() {
+		return !!(this.type || this.dashboardId && this.itemId);
+	}
+	getFilters() {
+		return this.chartElement.getFilters();
+	}
+	export(e = "png") {
+		return this.chartElement.export(e);
+	}
+	getData() {
+		return this.chartElement.getData();
+	}
+	refreshData() {
+		return this.chartElement.refreshData();
+	}
+	setSelectedData(e) {
+		return this.chartElement.setSelectedData(void 0, e);
+	}
+	setAuthorization(e, k) {
+		return this.chartElement.setAuthorization(e, k);
+	}
+	attributeChangedCallback(e, k, A) {
+		super.attributeChangedCallback(e, k, A), e === "selecteddata" && (this.chartElement ? this.setSelectedData(JSON.parse(A ?? "{}")) : this.postInitCallQueue.push([this.setSelectedData, [JSON.parse(A ?? "{}")]]));
+	}
+	async firstUpdated(e) {
+		super.firstUpdated(e), this.canInitializeVizItem() && (await loadLibrary(this.appServer, vizItemRemote), this.createAndAppendElement());
+	}
+	createAndAppendElement() {
+		this.chartElement || (this.chartElement = document.createElement("chart-component"), this.chartElement.setAttribute("embedding-mode", "chart"), this.chartElement.style.height = "100%", this.chartElement.style.width = "100%", this.chartElement.style.display = "block", this.chartElement.addEventListener("load", (e) => this.dispatchEvent(new CustomEvent("load", e))), this.chartElement.addEventListener("rendered", (e) => {
+			if (this.postInitCallQueue?.length > 0) for (let e of this.postInitCallQueue) e[0].bind(this)(...e[1]);
+			else this.selectedData && this.setSelectedData(this.selectedData);
+			this.dispatchEvent(new CustomEvent("rendered", e));
+		}), this.chartElement.addEventListener("changedFilters", (e) => this.dispatchEvent(new CustomEvent("changedFilters", e))), this.chartElement.addEventListener("exported", (e) => this.dispatchEvent(new CustomEvent("exported", e))), this.chartElement.addEventListener("customEvent", (e) => this.dispatchEvent(new CustomEvent("customEvent", e))), this.updateVizItemProperties(), this.renderRoot.append(this.chartElement));
+	}
+	updateVizItemProperties() {
+		if (this.chartElement) for (let e in libraryTypeToWebComponentTypeMapping) {
+			let k = this[e];
+			if (k) {
+				let A = ["appServer", "apiHost"].includes(e) ? removeTrailingSlash(k) : k;
+				this.chartElement.setAttribute(libraryTypeToWebComponentTypeMapping[e], typeof A == "object" ? JSON.stringify(A) : A);
+			}
+		}
+	}
+	async updated(e) {
+		if (this.chartElement) for (let [k] of e.entries()) {
+			let e = libraryTypeToWebComponentTypeMapping[k] ?? k, A = typeof this[k] == "object" ? JSON.stringify(this[k]) : this[k]?.toString() ?? this[k];
+			this.chartElement.setAttribute(e, A);
+		}
+		else this.canInitializeVizItem() && (await loadLibrary(this.appServer, vizItemRemote), this.createAndAppendElement());
+	}
+	render() {
+		return html`  `;
+	}
+};
+__decorateClass([property()], LuzmoBaseVizItem.prototype, "appServer", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "apiHost", 2), __decorateClass([property({ type: Array })], LuzmoBaseVizItem.prototype, "slots", 2), __decorateClass([property({ type: Object })], LuzmoBaseVizItem.prototype, "options", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "type", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "authKey", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "authToken", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "version", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "contextId", 2), __decorateClass([property({ converter: (e) => {
+	try {
+		return JSON.parse(e);
+	} catch {
+		return e;
+	}
+} })], LuzmoBaseVizItem.prototype, "canFilter", 2), __decorateClass([property({ type: Array })], LuzmoBaseVizItem.prototype, "filters", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "dashboardId", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "itemId", 2), __decorateClass([property({ type: Object })], LuzmoBaseVizItem.prototype, "selectedData", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "dashboardContentsVersion", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "libVersion", 2);
+var LuzmoEmbedVizItem = class extends LuzmoBaseVizItem {};
+customElements.get("luzmo-embed-viz-item") || customElements.define("luzmo-embed-viz-item", LuzmoEmbedVizItem);
+var inputMap = {
+	aiEndpoint: "ai-endpoint",
+	appServer: "app-server",
+	apiHost: "api-host",
+	options: "options",
+	initialSuggestionsDatasetId: "initialSuggestionsDatasetId",
+	authKey: "auth-key",
+	authToken: "auth-token",
+	version: "version",
+	libVersion: "lib-version",
+	aydHost: "ayd-host",
+	availableDatasets: "available-datasets"
+}, embedChatTag = "luzmo-iq-embed-chat", chatComponentTag = "luzmo-iq-chat-component", LuzmoIQEmbedChatComponent = class extends LitElement {
+	constructor() {
+		super(...arguments), this.appServer = "https://app.luzmo.com", this.apiHost = "https://api.luzmo.com", this.version = version + "-wc-luzmo", this.libVersion = version + "-wc-luzmo", this.remoteEntryServer = "http://localhost:4202/", this.aydHost = "https://ayd.luzmo.com/";
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+	}
+	createRenderRoot() {
+		return this;
+	}
+	async firstUpdated(e) {
+		super.firstUpdated(e), await loadLibrary(this.calculatedAppServer, "IQApp"), this.createAndAppendElement();
+	}
+	get calculatedAppServer() {
+		return this.appServer.startsWith("http://localhost") ? this.remoteEntryServer : this.appServer;
 	}
-	_calculateDimAfterDashboardLoaded() {
-		this.dashboardError = !1, this._loaderStyles(), _setCalculatedDimensions(this);
+	createAndAppendElement() {
+		this.chartElement || (this.chartElement = document.createElement(chatComponentTag), this.chartElement.addEventListener("load", (e) => this.dispatchEvent(new CustomEvent("load", e))), this.updateVizItemProperties(), this.renderRoot.append(this.chartElement));
 	}
-	_loaderStyles() {
-		this._containerStyle = containerStyles(this), this._loaderStyle = loaderStyles(this), this._loadingCircleStyle = plStyles(this), this._containerLoaderStyle = containerLoaderStyles(this), this._lcStyle = lcStyles(this);
+	updateVizItemProperties() {
+		if (this.chartElement) for (let e in inputMap) {
+			let k = this[e];
+			if (k) {
+				let A = [
+					"appServer",
+					"apiHost",
+					"aydHost"
+				].includes(e) ? removeTrailingSlash(k) : k;
+				this.chartElement.setAttribute(inputMap[e], typeof A == "object" ? JSON.stringify(A) : A);
+			}
+		}
 	}
-	static get styles() {
-		return [dashboardStyles];
+	async updated(e) {
+		if (this.chartElement) for (let [k] of e.entries()) {
+			let e = inputMap[k] ?? k, A = typeof this[k] == "object" ? JSON.stringify(this[k]) : this[k]?.toString() ?? this[k];
+			this.chartElement.setAttribute(e, A);
+		}
+		else await loadLibrary(this.calculatedAppServer, "IQApp"), this.createAndAppendElement();
 	}
 	render() {
-		let e, k = html`
-      <div
-        class="luzmo-container-loader"
-        id="luzmo-container-loader-${this._containerId}"
-        style=${styleMap(this._containerLoaderStyle)}
-      >
-        <div
-          class="luzmo-loader"
-          id="luzmo-loader-${this._containerId}"
-          style=${styleMap(this._loaderStyle)}
-        >
-          <div
-            class="luzmo-lc"
-            style=${styleMap(this._lcStyle)}
-          >
-            <div
-              class="luzmo-loading-circle"
-              style=${styleMap(this._loadingCircleStyle)}
-            ></div>
-            ${this._itemEmbedding ? "" : html`
-                <div
-                  class="luzmo-loading-message"
-                  style=${styleMap({ color: this.loaderFontColor })}
-                >
-                  ${this._loaderMsg}
-                </div>
-              `}
-          </div>
-        </div>
-      </div>
-    `;
-		return e = this.isWebComponentViewMode() ? this.isLibraryLoaded ? html`
-          ${this.dashboardId || this.dashboardSlug ? html`
-            <dashboard-component dashboard-id="${this.params.dashboardId}" app-server="${this.params.appServer}"
-                                 api-host="${this.params.apiHost}"></dashboard-component>
-          ` : html`
-            <div id="luzmo-error-${this._containerId}">
-              <h3 class="luzmo-error">${this.browserErrorMsg}</h3>
-            </div>
-          `}
-        ` : html`${k}` : html`
-        ${this.dashboardId || this.dashboardSlug ? html`
-            ${k}
-            <iframe
-              class="luzmo-embed-dashboard ${this.isWebComponentViewMode() ? "" : "luzmo-embed-dashboard-ede"}"
-              id="${this._iframeId}"
-              name="${this._iframeId}"
-              style=${styleMap(this.iframeStyle)}
-              src="${this._iframeUrl}"
-              frameborder="0"
-            ></iframe>
-          ` : html`<!-- the dashboard will inititialize when you provide a dashboardSlug or a dashboardId -->`}
-        ${this.browserError ? html`
-            <div id="luzmo-error-${this._containerId}">
-              <h3 class="luzmo-error">${this.browserErrorMsg}</h3>
-            </div>
-          ` : ""}
-      `, html`
-      <div class="${luzmoEmbedContainerClass} ${this.isWebComponentViewMode() ? "" : `${luzmoEmbedContainerClass}-ede`}">
-        <div
-          class="dashboard-container"
-          style=${styleMap(Object.assign({}, this._containerStyle, {
-			width: this.iframeStyle.width ?? "100%",
-			height: this.iframeStyle.height ?? "100%"
-		}))}
-        >
-          ${e}
-        </div>
-      </div>
-
-    `;
+		return html``;
 	}
-	getDashboards() {
-		return new Promise((e) => e(luzmo_service_default._dashboardComponents));
+	connectedCallback() {
+		super.connectedCallback();
+		let e = document.querySelector(embedChatTag);
+		if (!e) return;
+		let k = new MutationObserver(() => {
+			let A = e.querySelector("*[slot=\"custom-chat-widget-content\"]");
+			if (!A) return;
+			let j = e.querySelector(chatComponentTag);
+			j && (j.append(A), k.disconnect());
+		});
+		k.observe(e, {
+			childList: !0,
+			subtree: !0
+		});
 	}
-	getData(e) {
-		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.getData(e) : this.isWebComponentViewMode() ? Promise.reject() : getData(this, this.iframe, e);
+};
+__decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "appServer", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "apiHost", 2), __decorateClass([property({ type: Object })], LuzmoIQEmbedChatComponent.prototype, "options", 2), __decorateClass([property({ type: String })], LuzmoIQEmbedChatComponent.prototype, "initialSuggestionsDatasetId", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "aiEndpoint", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "authKey", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "authToken", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "version", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "libVersion", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "remoteEntryServer", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "aydHost", 2), __decorateClass([property({ type: Array })], LuzmoIQEmbedChatComponent.prototype, "availableDatasets", 2), customElements.get(embedChatTag) || customElements.define(embedChatTag, LuzmoIQEmbedChatComponent);
+var inputMap2 = {
+	aiEndPoint: "ai-end-point",
+	appServer: "app-server",
+	apiHost: "api-host",
+	options: "options",
+	authKey: "auth-key",
+	authToken: "auth-token",
+	version: "version",
+	libVersion: "lib-version",
+	messages: "messages"
+}, componentTag = "luzmo-iq-embed-answer", LuzmoIQEmbedAnswerComponent = class extends LitElement {
+	constructor() {
+		super(...arguments), this.appServer = "https://app.luzmo.com", this.apiHost = "https://api.luzmo.com", this.version = version + "-wc-luzmo", this.libVersion = version + "-wc-luzmo", this.remoteEntryServer = "http://localhost:4202";
 	}
-	getFilters() {
-		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.getFilters() : this.isWebComponentViewMode() ? Promise.reject() : getFilters(this, this.iframe);
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `;
 	}
-	setSelectedData(e, k) {
-		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.setSelectedData(e, k) : this.isWebComponentViewMode() ? Promise.reject() : setSelectedData(this, this.iframe, e, k);
+	createRenderRoot() {
+		return this;
 	}
-	setAuthorization(e, k) {
-		return this.currentAuthKey = e, this.currentAuthToken = k, this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.setAuthorization(e, k) : this.isWebComponentViewMode() ? Promise.reject() : setAuthorization(this, this.iframe, e, k);
+	async firstUpdated(e) {
+		super.firstUpdated(e), await loadLibrary(this.calculatedAppServer, "IQApp"), this.createAndAppendElement();
 	}
-	refreshData(e) {
-		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.refreshData(e) : this.isWebComponentViewMode() ? Promise.reject() : e ? refreshData(this, this.iframe, e) : refreshData(this, this.iframe);
+	get calculatedAppServer() {
+		return this.appServer.startsWith("http://localhost") ? this.remoteEntryServer : this.appServer;
 	}
-	reloadDashboard() {
-		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.reloadDashboard() : this.isWebComponentViewMode() ? Promise.reject() : reloadDashboard(this, this.iframe);
+	createAndAppendElement() {
+		this.chartElement || (this.chartElement = document.createElement("luzmo-iq-answer-component"), this.chartElement.addEventListener("addQuestion", (e) => this.dispatchEvent(new CustomEvent("addQuestion", e))), this.chartElement.addEventListener("addAnswer", (e) => this.dispatchEvent(new CustomEvent("addAnswer", e))), this.updateVizItemProperties(), this.renderRoot.append(this.chartElement));
 	}
-	exportDashboard(e) {
-		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.exportDashboard(e) : this.isWebComponentViewMode() ? Promise.reject() : e ? exportDashboard(this, this.iframe, e) : exportDashboard(this, this.iframe);
+	updateVizItemProperties() {
+		if (this.chartElement) for (let e in inputMap2) {
+			let k = this[e];
+			if (k) {
+				let A = ["appServer", "apiHost"].includes(e) ? removeTrailingSlash(k) : k;
+				this.chartElement.setAttribute(inputMap2[e], typeof A == "object" ? JSON.stringify(A) : A);
+			}
+		}
 	}
-	getAccessibleDashboards() {
-		return getAccessibleDashboards(this);
+	async updated(e) {
+		if (this.chartElement) for (let [k] of e.entries()) {
+			let e = inputMap2[k] ?? k, A = typeof this[k] == "object" ? JSON.stringify(this[k]) : this[k]?.toString() ?? this[k];
+			this.chartElement.setAttribute(e, A);
+		}
+		else await loadLibrary(this.calculatedAppServer, "IQApp"), this.createAndAppendElement();
 	}
-	addFilters(e, k) {
-		return this.dashboardReference.addFilters(e, k);
+	render() {
+		return html`  `;
 	}
-	setEditMode(e) {
-		return this.dashboardReference && e === "view" ? (this.editMode = "view", this.params.editMode = "view", this.initComponent(), Promise.resolve({
-			type: "setEditMode",
-			editMode: e
-		})) : this.dashboardReference && ["editFull", "editLimited"].includes(e) ? (this.editMode = e, this.params.editMode = e, this.initComponent(), Promise.resolve({
-			type: "setEditMode",
-			editMode: e
-		})) : this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.setEditMode(e) : this.isWebComponentViewMode() ? Promise.reject() : setEditMode(this, this.iframe, e);
+};
+__decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "appServer", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "apiHost", 2), __decorateClass([property({ type: Object })], LuzmoIQEmbedAnswerComponent.prototype, "options", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "aiEndPoint", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "authKey", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "authToken", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "messages", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "version", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "libVersion", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "remoteEntryServer", 2), customElements.get(componentTag) || customElements.define(componentTag, LuzmoIQEmbedAnswerComponent), LitElement.disableWarning?.("change-in-update");
+var gridstack_min_default = ".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;width:auto;margin:0;position:absolute;z-index:0!important}.grid-stack>.grid-stack-item{width:var(--gs-column-width);height:var(--gs-cell-height);padding:0;position:absolute;top:0;left:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{width:auto;margin:0;position:absolute;overflow:hidden auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{-ms-touch-action:none;touch-action:none;font-size:.1px;display:block;position:absolute}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" stroke=\\\"%23666\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2\\\" viewBox=\\\"0 0 20 20\\\"><path d=\\\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\\\"/></svg>\");background-position:50%;background-repeat:no-repeat}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{opacity:.8;box-shadow:1px 4px 6px #0003}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left,top,height,width}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack>.grid-stack-item[gs-x=\"0\"]{left:0}", lockAction = {
+	icon: luzmoLockOutline,
+	label: "Lock",
+	tooltip: "Lock",
+	action: "lock",
+	type: "toggle"
+}, editAction = {
+	icon: luzmoPencil,
+	label: "Edit",
+	tooltip: "Edit",
+	action: "edit",
+	type: "toggle"
+}, editDataAction = {
+	icon: luzmoTable,
+	label: "Edit data",
+	tooltip: "Data",
+	action: "edit-data",
+	type: "toggle"
+}, editOptionsAction = {
+	icon: luzmoCog,
+	label: "Edit options",
+	tooltip: "Options",
+	action: "edit-options",
+	type: "toggle"
+}, editFiltersAction = {
+	icon: luzmoFilterOutline,
+	label: "Edit filters",
+	tooltip: "Filters",
+	action: "edit-filters",
+	type: "toggle"
+}, cloneAction = {
+	icon: luzmoClone,
+	label: "Clone",
+	tooltip: "Clone",
+	action: "clone",
+	type: "button"
+}, deleteAction = {
+	icon: luzmoTrashOutline,
+	label: "Delete",
+	tooltip: "Delete",
+	action: "delete",
+	type: "button"
+};
+const generateActionsMenu = (e) => {
+	if (!e) return;
+	let k = [];
+	return k = structuredClone(e).map((e) => {
+		if (e.type === "group") return e.actions = e.actions ?? [], e.actions = e.actions.map((e) => {
+			if (typeof e == "string" && [
+				"lock",
+				"filters",
+				"edit",
+				"edit-data",
+				"edit-options",
+				"edit-filters",
+				"delete",
+				"clone"
+			].includes(e)) return {
+				delete: { ...deleteAction },
+				filters: { ...editFiltersAction },
+				clone: { ...cloneAction },
+				edit: { ...editAction },
+				"edit-data": { ...editDataAction },
+				"edit-options": { ...editOptionsAction },
+				"edit-filters": { ...editFiltersAction },
+				lock: { ...lockAction }
+			}[e];
+			if (typeof e == "object") return e.icon = e.icon ?? luzmoCircle, e.label = e.label ?? e.action, e.tooltip = e.tooltip ?? e.label ?? e.action, e.type = ["toggle", "button"].includes(e.type ?? "") ? e.type : "button", e;
+		}).filter(Boolean), e;
+	}).filter(Boolean), k;
+}, defaultActionsMenu = () => [{
+	type: "group",
+	actions: [
+		{ ...editDataAction },
+		{ ...editOptionsAction },
+		{ ...cloneAction }
+	]
+}, {
+	type: "group",
+	actions: [{ ...deleteAction }]
+}];
+var grid_item_actions_menu_module_default = ":host{--luzmo-action-button-content-color-default:var(--luzmo-grid-item-action-button-content-color-default,#fff);--luzmo-action-button-content-color-hover:var(--luzmo-grid-item-action-button-content-color-hover,#fff);--luzmo-action-button-content-color-down:var(--luzmo-grid-item-action-button-content-color-down,#fff);--luzmo-action-button-content-color-focus:var(--luzmo-grid-item-action-button-content-color-focus,#fff);--luzmo-action-button-background-color-default:var(--luzmo-grid-item-action-button-background-color-default,#333);--luzmo-action-button-background-color-hover:var(--luzmo-grid-item-action-button-background-color-hover,#444);--luzmo-action-button-background-color-down:var(--luzmo-grid-item-action-button-background-color-down,#555);--luzmo-action-button-background-color-focus:var(--luzmo-grid-item-action-button-background-color-focus,#666);--grid-item-actions-flex-direction:column;display:block}.action-buttons{gap:var(--luzmo-grid-item-action-group-gap,.5rem);flex-direction:var(--luzmo-grid-item-actions-flex-direction,var(--grid-item-actions-flex-direction));outline:none;display:flex}.action-button[selected]{--luzmo-action-button-background-color-default:var(--luzmo-primary);--luzmo-action-button-background-color-hover:var(--luzmo-primary-hover);--luzmo-action-button-background-color-down:var(--luzmo-primary-down);--luzmo-action-button-background-color-focus:var(--luzmo-primary-focus);--luzmo-action-button-content-color-default:var(--luzmo-primary-inverse-color);--luzmo-action-button-content-color-hover:var(--luzmo-primary-inverse-color);--luzmo-action-button-content-color-down:var(--luzmo-primary-inverse-color);--luzmo-action-button-content-color-focus:var(--luzmo-primary-inverse-color)}:host .action-buttons{--luzmo-action-button-content-color-default:var(--luzmo-grid-item-action-button-content-color-default,#fff);--luzmo-action-button-content-color-hover:var(--luzmo-grid-item-action-button-content-color-hover,#fff);--luzmo-action-button-content-color-down:var(--luzmo-grid-item-action-button-content-color-down,#fff);--luzmo-action-button-content-color-focus:var(--luzmo-grid-item-action-button-content-color-focus,#fff);--luzmo-action-button-background-color-default:var(--luzmo-grid-item-action-button-background-color-default,#333);--luzmo-action-button-background-color-hover:var(--luzmo-grid-item-action-button-background-color-hover,#444);--luzmo-action-button-background-color-down:var(--luzmo-grid-item-action-button-background-color-down,#555);--luzmo-action-button-background-color-focus:var(--luzmo-grid-item-action-button-background-color-focus,#666)}.delete-button{--luzmo-action-button-background-color-hover:var(--luzmo-grid-item-delete-button-background-color-hover,var(--luzmo-negative-color));--luzmo-action-button-content-color-hover:var(--luzmo-grid-item-delete-button-content-color-hover,#fff);--luzmo-action-button-background-color-focus:var(--luzmo-grid-item-delete-button-background-color-focus,var(--luzmo-negative-color-focus));--luzmo-action-button-content-color-focus:var(--luzmo-grid-item-delete-button-content-color-focus,#fff);--luzmo-action-button-background-color-down:var(--luzmo-grid-item-delete-button-background-color-down,var(--luzmo-negative-color-down));--luzmo-action-button-content-color-down:var(--luzmo-grid-item-delete-button-content-color-down,#fff)}:host([placement=top-start]),:host([placement=top]),:host([placement=top-end]),:host([placement=bottom-start]),:host([placement=bottom]),:host([placement=bottom-end]){--grid-item-actions-flex-direction:row}", LuzmoGridItemActionsMenu = class extends LocalizedMixin(LuzmoElement) {
+	constructor(...e) {
+		super(...e), this.placement = "right-start", this.actions = defaultActionsMenu();
 	}
-	setPreview(e) {
-		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.setPreview(e) : setPreview(this, this.iframe, e);
+	static get styles() {
+		return [unsafeCSS(grid_item_actions_menu_module_default)];
 	}
-	sendExportEmail(e, k, A) {
-		return this.isWebComponentViewMode() && this.dashboardReference ? this.dashboardReference.sendExportEmail(e, k, A) : this.isWebComponentViewMode() ? Promise.reject() : sendExportEmail(this, this.iframe, e, k, A);
+	get isVertical() {
+		return this.placement.includes("left") || this.placement.includes("right");
 	}
-	isWebComponentViewMode() {
-		return this.embedMode === "webComponent" && (this.params.editMode === "view" || this.params.editMode === void 0);
+	_dispatchAction(e) {
+		this.dispatchEvent(new CustomEvent("luzmo-grid-item-action", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				action: e.action,
+				type: e.type,
+				active: e.active
+			}
+		}));
 	}
-};
-__decorateClass([query(".dashboard-container")], LuzmoDashboard.prototype, "container", 2), __decorateClass([query(`.${luzmoEmbedContainerClass}`)], LuzmoDashboard.prototype, "luzmoEmbedContainer", 2), __decorateClass([query("iframe")], LuzmoDashboard.prototype, "iframe", 2), __decorateClass([property()], LuzmoDashboard.prototype, "dashboardId", 2), __decorateClass([property()], LuzmoDashboard.prototype, "dashboardSlug", 2), __decorateClass([property()], LuzmoDashboard.prototype, "itemId", 2), __decorateClass([property()], LuzmoDashboard.prototype, "language", 2), __decorateClass([property()], LuzmoDashboard.prototype, "editorLanguage", 2), __decorateClass([property()], LuzmoDashboard.prototype, "qeVersion", 2), __decorateClass([property()], LuzmoDashboard.prototype, "screenMode", 2), __decorateClass([property({ converter: {
-	fromAttribute: (e) => e === "true",
-	toAttribute: String
-} })], LuzmoDashboard.prototype, "switchScreenModeOnResize", 2), __decorateClass([property()], LuzmoDashboard.prototype, "editMode", 2), __decorateClass([property()], LuzmoDashboard.prototype, "theme", 2), __decorateClass([property()], LuzmoDashboard.prototype, "mainColor", 2), __decorateClass([property()], LuzmoDashboard.prototype, "accentColor", 2), __decorateClass([property()], LuzmoDashboard.prototype, "authToken", 2), __decorateClass([property()], LuzmoDashboard.prototype, "authKey", 2), __decorateClass([property()], LuzmoDashboard.prototype, "loaderBackground", 2), __decorateClass([property()], LuzmoDashboard.prototype, "loaderFontColor", 2), __decorateClass([property()], LuzmoDashboard.prototype, "loaderSpinnerColor", 2), __decorateClass([property()], LuzmoDashboard.prototype, "loaderSpinnerBackground", 2), __decorateClass([property()], LuzmoDashboard.prototype, "appServer", 2), __decorateClass([property()], LuzmoDashboard.prototype, "timezoneId", 2), __decorateClass([property()], LuzmoDashboard.prototype, "apiHost", 2), __decorateClass([property({ type: Object })], LuzmoDashboard.prototype, "itemDimensions", 2), __decorateClass([property()], LuzmoDashboard.prototype, "embedMode", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_containerId", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_iframeId", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "params", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_iframeUrl", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "iframeLoaded", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "promises", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "iframeStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_containerStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_loaderStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_lcStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_loadingCircleStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_containerLoaderStyle", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_loaderMsg", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "containerWidth", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "dimensions", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "currentScreenMode", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "_itemEmbedding", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "browserError", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "browserErrorMsg", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "dashboardError", 2), __decorateClass([property({ attribute: !1 })], LuzmoDashboard.prototype, "browserNotSupported", 2), __decorateClass([property()], LuzmoDashboard.prototype, "libVersion", 2), __decorateClass([state()], LuzmoDashboard.prototype, "isLibraryLoaded", 2), __decorateClass([state()], LuzmoDashboard.prototype, "dashboardReference", 2), __decorateClass([state()], LuzmoDashboard.prototype, "currentAuthKey", 2), __decorateClass([state()], LuzmoDashboard.prototype, "currentAuthToken", 2), __decorateClass([state()], LuzmoDashboard.prototype, "isInitCalled", 2);
-var LuzmoEmbedDashboard = class extends LuzmoDashboard {};
-customElements.get("luzmo-embed-dashboard") || customElements.define("luzmo-embed-dashboard", LuzmoEmbedDashboard);
-var dashboardContentsVersion = "0.1.99", vizItemRemote = "VizItemApp", LuzmoBaseVizItem = class extends LitElement {
-	constructor() {
-		super(...arguments), this.appServer = "https://app.luzmo.com", this.apiHost = "https://api.luzmo.com", this.slots = [], this.version = version + "-wc-luzmo", this.dashboardContentsVersion = dashboardContentsVersion, this.libVersion = version + "-wc-luzmo", this.postInitCallQueue = [];
+	_handleActionClick(e) {
+		e.type === "toggle" && (e.active = !e.active, this.actions.forEach((k) => {
+			k.actions?.forEach((k) => {
+				e !== k && k.active && (k.active = !1);
+			});
+		})), this._dispatchAction(e), this.requestUpdate();
 	}
-	static {
-		this.styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-
-    luzmo-embed-viz-item {
-      width: 100%;
-      height: 1000%;
-      display: block;
-    }
-  `;
+	clearActiveToggles() {
+		this.actions = this.actions.map((e) => ({
+			...e,
+			actions: e.actions?.map((e) => (e.type === "toggle" && (e.active = !1), e)) ?? []
+		}));
 	}
-	createRenderRoot() {
-		return this.style.display || (this.style.display = "block"), this.style.height || (this.style.height = "100%"), this.style.width || (this.style.width = "100%"), this;
+	focus() {
+		let e = this.shadowRoot?.querySelectorAll("luzmo-action-button[toggles]");
+		e && e[0]?.focus();
 	}
-	canInitializeVizItem() {
-		return !!(this.type || this.dashboardId && this.itemId);
+	_generateActionButton(e) {
+		let k = {
+			Data: msg("Data", { desc: "Grid item action tooltip" }),
+			Options: msg("Options", { desc: "Grid item action tooltip" }),
+			Clone: msg("Clone", { desc: "Grid item action tooltip" }),
+			Delete: msg("Delete", { desc: "Grid item action tooltip" }),
+			Edit: msg("Edit", { desc: "Grid item action tooltip" }),
+			Lock: msg("Lock", { desc: "Grid item action tooltip" }),
+			Filters: msg("Filters", { desc: "Grid item action tooltip" })
+		};
+		return html`
+      <luzmo-action-button
+        class="${e.action}-button action-button"
+        .label=${e.label}
+        ?toggles=${e.type === "toggle"}
+        ?selected=${e.type === "toggle" && e.active}
+        @click=${this._handleActionClick.bind(this, e)}
+      >
+        <luzmo-icon slot="icon" .icon=${e.icon} size="s"></luzmo-icon>
+        ${e.tooltip ? html`
+              <luzmo-tooltip
+                self-managed
+                delayed
+                placement=${this.placement?.includes("right") ? "right" : this.placement?.includes("left") ? "left" : this.placement?.includes("bottom") ? "bottom" : this.placement?.includes("top") ? "top" : "right"}
+              >
+                ${k[e.tooltip] ?? e.tooltip}
+              </luzmo-tooltip>
+            ` : ""}
+      </luzmo-action-button>
+    `;
 	}
-	getFilters() {
-		return this.chartElement.getFilters();
+	_generateActionGroup(e) {
+		let k = e?.actions?.map((e) => this._generateActionButton(e)) ?? [];
+		return k.length > 0 ? html`
+          <luzmo-action-group ?vertical=${this.isVertical} compact
+            >${k}</luzmo-action-group
+          >
+        ` : html`
+          
+        `;
 	}
-	export(e = "png") {
-		return this.chartElement.export(e);
+	render() {
+		return html`
+      <div class="action-buttons" tabindex="0">${this.actions.map((e) => this._generateActionGroup(e))}</div>
+    `;
 	}
-	getData() {
-		return this.chartElement.getData();
+};
+__decorate([property({
+	type: String,
+	reflect: !0
+})], LuzmoGridItemActionsMenu.prototype, "placement", void 0), __decorate([property({ type: Array })], LuzmoGridItemActionsMenu.prototype, "actions", void 0), LuzmoGridItemActionsMenu = __decorate([localized()], LuzmoGridItemActionsMenu);
+var grid_module_default = ":host{width:100%;display:block}.grid-stack{width:100%;min-height:var(--luzmo-grid-min-height);background:var(--luzmo-grid-background,var(--grid-background,var(--luzmo-background-color)));position:relative}.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-stack-item-content,.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-item-actions-popover{opacity:.5}.grid-stack .grid-stack-item[active]>.ui-resizable-handle,.grid-stack .grid-stack-item[active].ui-resizable-autohide>.ui-resizable-handle{display:block}.grid-stack .grid-stack-item.ui-resizable-resizing,.grid-stack .grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{opacity:var(--luzmo-grid-item-resizing-opacity,.8)!important}.grid-item-drag-handle{color:var(--luzmo-grid-item-drag-handle-color,#000);top:var(--luzmo-grid-item-drag-handle-position-top,0);left:var(--luzmo-grid-item-drag-handle-position-left,0);right:var(--luzmo-grid-item-drag-handle-position-right,auto);bottom:var(--luzmo-grid-item-drag-handle-position-bottom,auto);padding:var(--luzmo-grid-item-drag-handle-padding,.5rem);z-index:var(--luzmo-grid-item-drag-handle-z-index,3);cursor:var(--luzmo-grid-item-drag-handle-cursor,move);position:absolute}.grid-stack[dark-background] .grid-item-drag-handle{color:var(--luzmo-grid-item-drag-handle-color,#fff)}.grid-stack .grid-stack-item .grid-stack-item-content{border-radius:var(--luzmo-grid-item-border-radius,var(--grid-item-border-radius,4px));background:var(--luzmo-grid-item-background,var(--grid-item-background,transparent));box-shadow:var(--luzmo-grid-item-box-shadow,var(--grid-item-box-shadow,none));border-style:var(--luzmo-grid-item-border-style,none);border-color:var(--luzmo-grid-item-border-color,transparent);-webkit-backdrop-filter:var(--luzmo-grid-item-backdrop-filter,none);backdrop-filter:var(--luzmo-grid-item-backdrop-filter,none);overflow:hidden}.grid-stack .grid-stack-item:not(.has-luzmo-viz-item) .grid-stack-item-content{border-style:var(--luzmo-grid-item-border-style,var(--grid-item-border-style,none));border-color:var(--luzmo-grid-item-border-color,var(--grid-item-border-color,transparent));border-width:var(--luzmo-grid-item-border-width,var(--grid-item-border-width,0));border-top-width:var(--luzmo-grid-item-border-top-width,var(--grid-item-border-top-width,0));border-right-width:var(--luzmo-grid-item-border-right-width,var(--grid-item-border-right-width,0));border-bottom-width:var(--luzmo-grid-item-border-bottom-width,var(--grid-item-border-bottom-width,0));border-left-width:var(--luzmo-grid-item-border-left-width,var(--grid-item-border-left-width,0))}.grid-stack .grid-stack-placeholder>.placeholder-content{border-radius:var(--grid-item-border-radius,4px)}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{z-index:var(--luzmo-grid-resize-handle-z-index,100);background:var(--luzmo-grid-resize-handle-background,#fff);border-radius:var(--luzmo-grid-resize-handle-border-radius,3px);opacity:var(--luzmo-grid-resize-handle-opacity,0);transition:var(--luzmo-grid-resize-handle-transition,opacity .2s ease);box-shadow:0 0 6px #0000001a,0 0 2px #000000bf;display:block!important;position:absolute!important}:host .grid-stack[dark-background]>.grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack[dark-background]>.grid-stack-item:hover>.ui-resizable-handle{background:var(--luzmo-grid-resize-handle-background,#333);box-shadow:0 0 6px #ffffff1a,0 0 2px #ffffffbf}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{opacity:var(--luzmo-grid-resize-handle-opacity-hover,1)}:host .grid-stack-item>.ui-resizable-handle:hover{opacity:var(--luzmo-grid-resize-handle-opacity-active,1);background:var(--luzmo-grid-resize-handle-background-hover,var(--luzmo-background-color-highlight))}:host .grid-stack-item>.ui-resizable-n,:host .grid-stack-item>.ui-resizable-s{height:var(--luzmo-grid-resize-handle-edge-size,8px);width:var(--luzmo-grid-resize-handle-side-size,18px);left:calc(50% - var(--luzmo-grid-resize-handle-side-size,18px)/2)}:host .grid-stack-item>.ui-resizable-n{cursor:n-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset,-4px) + var(--gs-item-margin-top,0px))}:host .grid-stack-item>.ui-resizable-s{cursor:s-resize;bottom:calc(var(--luzmo-grid-resize-handle-edge-offset,-4px) + var(--gs-item-margin-bottom,0px))}:host .grid-stack-item>.ui-resizable-e,:host .grid-stack-item>.ui-resizable-w{width:var(--luzmo-grid-resize-handle-edge-size,8px);height:var(--luzmo-grid-resize-handle-side-size,18px);top:calc(50% - var(--luzmo-grid-resize-handle-side-size,18px)/2)}:host .grid-stack-item>.ui-resizable-e{cursor:e-resize;right:calc(var(--luzmo-grid-resize-handle-edge-offset,-4px) + var(--gs-item-margin-right,0px))}:host .grid-stack-item>.ui-resizable-w{cursor:w-resize;left:calc(var(--luzmo-grid-resize-handle-edge-offset,-4px) + var(--gs-item-margin-left,0px))}:host .grid-stack-item>.ui-resizable-ne,:host .grid-stack-item>.ui-resizable-nw,:host .grid-stack-item>.ui-resizable-se,:host .grid-stack-item>.ui-resizable-sw{width:var(--luzmo-grid-resize-handle-corner-size,12px);height:var(--luzmo-grid-resize-handle-corner-size,12px);background-image:none;transform:none}:host .grid-stack-item>.ui-resizable-ne{cursor:ne-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset,-6px) + var(--gs-item-margin-top,0px));right:calc(var(--luzmo-grid-resize-handle-edge-offset,-6px) + var(--gs-item-margin-right,0px))}:host .grid-stack-item>.ui-resizable-nw{cursor:nw-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset,-6px) + var(--gs-item-margin-top,0px));left:calc(var(--luzmo-grid-resize-handle-edge-offset,-6px) + var(--gs-item-margin-left,0px))}:host .grid-stack-item>.ui-resizable-se{cursor:se-resize;right:calc(var(--luzmo-grid-resize-handle-corner-offset,-4px) + var(--gs-item-margin-right,0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset,-4px) + var(--gs-item-margin-bottom,0px))}:host .grid-stack-item>.ui-resizable-sw{cursor:sw-resize;left:calc(var(--luzmo-grid-resize-handle-corner-offset,-4px) + var(--gs-item-margin-left,0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset,-4px) + var(--gs-item-margin-bottom,0px))}:host .grid-stack-item>.ui-resizable-resizing .ui-resizable-handle{background:var(--luzmo-grid-resize-handle-background-active,var(--luzmo-background-color-highlight));opacity:1!important}.grid-item-actions-popover{z-index:2;background:0 0;border:none;outline:none;margin:0;padding:0;position:absolute;overflow:visible}luzmo-grid-item-actions-menu{padding:var(--luzmo-grid-item-actions-padding,var(--grid-item-actions-padding))}.dimensions-hint-popover{font-size:var(--luzmo-grid-item-dimensions-hint-font-size,var(--luzmo-font-size-xs,10px));font-family:var(--luzmo-grid-item-dimensions-hint-font-family,var(--luzmo-font-family,inherit));border-width:var(--luzmo-grid-item-dimensions-hint-border-width,var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-grid-item-dimensions-hint-border-color,var(--luzmo-border-color));border-radius:var(--luzmo-grid-item-dimensions-hint-border-radius,var(--luzmo-border-radius));padding:var(--luzmo-grid-item-dimensions-hint-padding,var(--luzmo-spacing-1)var(--luzmo-spacing-2));z-index:3;background:var(--luzmo-grid-item-dimensions-hint-background,var(--luzmo-background-color));color:var(--luzmo-grid-item-dimensions-hint-color,var(--luzmo-font-color));pointer-events:none;outline:none;margin:0;position:absolute;overflow:visible}luzmo-grid-item-actions-menu{--grid-item-actions-padding:0 .75rem}luzmo-grid-item-actions-menu[placement=top-start],luzmo-grid-item-actions-menu[placement=top],luzmo-grid-item-actions-menu[placement=top-end],luzmo-grid-item-actions-menu[placement=bottom-start],luzmo-grid-item-actions-menu[placement=bottom],luzmo-grid-item-actions-menu[placement=bottom-end]{--grid-item-actions-padding:.75rem 0}.grid-stack-item:focus-visible{outline:none}.grid-stack-item:focus-visible .grid-stack-item-content:after{content:\"\";border:var(--luzmo-indicator-width)solid var(--luzmo-indicator-color,var(--luzmo-primary));box-sizing:border-box;border-radius:var(--luzmo-grid-item-border-radius,var(--grid-item-border-radius,4px));z-index:2;width:100%;height:100%;position:absolute;top:0;left:0}";
+const updateLuzmoVizItemsLanguage = (e, k) => {
+	e.forEach((e) => {
+		let A = e.querySelector("luzmo-embed-viz-item");
+		A && (A.options = {
+			...A.options,
+			locale: k
+		});
+	});
+}, createGridItemActionDetail = ({ action: e, actionType: k, active: A, items: j, element: M, itemId: N, item: P, deletedId: F, originalElement: I }) => ({
+	action: e,
+	actionType: k,
+	active: A,
+	items: j,
+	element: M,
+	id: N,
+	type: P?.type,
+	slots: P?.slots,
+	options: P?.options,
+	filters: P?.filters ?? [],
+	...F && { deletedId: F },
+	...I && { originalElement: I }
+}), dispatchGridItemActionEvent = ({ target: e, action: k, actionType: A, active: j, items: M, element: N, itemId: P, item: F, deletedId: I, originalElement: L }) => {
+	e.dispatchEvent(new CustomEvent("luzmo-grid-item-action", {
+		detail: createGridItemActionDetail({
+			action: k,
+			actionType: A,
+			active: j,
+			items: M,
+			element: N,
+			itemId: P,
+			item: F,
+			deletedId: I,
+			originalElement: L
+		}),
+		bubbles: !0,
+		composed: !0,
+		cancelable: !0
+	}));
+}, dispatchGridLifecycleEvent = ({ target: e, eventName: k, detail: A }) => {
+	e.dispatchEvent(new CustomEvent(k, {
+		detail: A,
+		bubbles: !0,
+		composed: !0
+	}));
+};
+var asElement = (e) => e instanceof Element ? e : void 0;
+const getGridItemElementFromTarget = (e) => asElement(e)?.closest(".grid-stack-item"), shouldRemovePopoverOnMouseout = ({ event: e, gridItem: k }) => asElement(e.relatedTarget)?.closest(".grid-item-actions-popover") ? !1 : !k.hasAttribute("active"), applyGridItemFocus = ({ event: e, focusedItemElement: k, removeItemActionsMenuPopover: A }) => {
+	let j = getGridItemElementFromTarget(e.target);
+	return j ? (k && k !== j && (k.removeAttribute("focused"), A(k)), j.setAttribute("focused", "true"), j) : k;
+}, clearGridItemFocus = ({ event: e, focusedItemElement: k, removeItemActionsMenuPopover: A }) => k ? asElement(e.relatedTarget)?.closest("luzmo-grid-item-actions-menu") ? {
+	focusedItemElement: k,
+	shouldFocusGrid: !1
+} : (k.removeAttribute("focused"), A(k), {
+	focusedItemElement: void 0,
+	shouldFocusGrid: !0
+}) : {
+	focusedItemElement: void 0,
+	shouldFocusGrid: !1
+}, resolveGridItemForDelete = (e, k) => getGridItemElementFromTarget(e.target) ?? k, cleanupActiveGridItem = ({ item: e, activeItemElement: k, gridElement: A, removeItemActionsMenuPopover: j }) => {
+	if (e.removeAttribute("active"), j(e), k === e) {
+		A.removeAttribute("has-active-item");
+		return;
 	}
-	refreshData() {
-		return this.chartElement.refreshData();
+	return k;
+}, handleGridAction = ({ event: e, gridElement: k, items: A, state: j, cleanupActiveItem: M, dispatchItemActionEvent: N, handleDeleteItem: P, handleCloneItem: F, createItemActionsMenuPopover: I }) => {
+	e.stopPropagation();
+	let L = e.detail, R = e.target?.closest(".grid-stack-item");
+	if (!R) return j;
+	let z = R.getAttribute("gs-id"), B = A.find((e) => e.id === z);
+	if (L.type === "toggle" && L.action === j.activeItemActionToggle && R === j.activeItemElement) return j.activeItemElement = void 0, j.activeItemActionToggle = void 0, k.removeAttribute("has-active-item"), R.removeAttribute("active"), M(R), z && N(L.action, L.type, !1, R, z, B), j;
+	if (["delete", "clone"].includes(L.action) || (k.querySelectorAll(".grid-stack-item").forEach((e) => {
+		e !== R && M(e);
+	}), L.type === "toggle" ? (j.activeItemElement = R, j.activeItemActionToggle = L.action, k.setAttribute("has-active-item", "true"), R.setAttribute("active", "true"), I(R, L.action)) : j.activeItemElement && j.activeItemElement !== R && (j.activeItemElement = void 0, j.activeItemActionToggle = void 0), z && N(L.action, L.type, L.active, R, z, B)), L.action === "delete") {
+		let k = j.activeItemElement === R;
+		return P(e), z && N(L.action, L.type, L.active, R, z, B, z), k ? {
+			activeItemElement: void 0,
+			activeItemActionToggle: void 0
+		} : j;
+	} else L.action === "clone" && F(e);
+	return j;
+}, handleGridClick = ({ event: e, gridElement: k, hostElement: A, items: j, activeItemActionToggle: M, cleanupActiveItem: N, dispatchItemActionEvent: P }) => {
+	let F = e.composedPath();
+	if (!F.includes(k) && !F.includes(A)) return { activeItemActionToggle: M };
+	let I = k.querySelector(".grid-stack-item[active]");
+	if (!I || F.includes(I)) return { activeItemActionToggle: M };
+	let L = I.querySelector(".grid-item-actions-popover");
+	if (L && F.includes(L)) return { activeItemActionToggle: M };
+	let R = I.getAttribute("gs-id"), z = j.find((e) => e.id === R);
+	return N(I), M && R && P(M, "toggle", !1, I, R, z), { activeItemActionToggle: void 0 };
+}, triggerGridItemAction = ({ gridElement: e, items: k, gridItemData: A, itemId: j, action: M, options: N, state: P, cleanupActiveItem: F, dispatchItemActionEvent: I, createItemActionsMenuPopover: L }) => {
+	if (!A?.element) return {
+		result: void 0,
+		state: P
+	};
+	let R = A.element, z = A.item, B = M === P.activeItemActionToggle && R === P.activeItemElement, V = N?.active ?? !B;
+	if (N?.active !== void 0 && V === B) return {
+		result: B,
+		state: P
+	};
+	if (!V) return P.activeItemElement = void 0, P.activeItemActionToggle = void 0, e.removeAttribute("has-active-item"), R.removeAttribute("active"), F(R), I(M, "toggle", !1, R, j, z), {
+		result: !1,
+		state: P
+	};
+	if (P.activeItemElement && P.activeItemElement !== R) {
+		let e = P.activeItemElement.getAttribute("gs-id"), A = k.find((k) => k.id === e), j = P.activeItemActionToggle, M = P.activeItemElement;
+		F(P.activeItemElement), P.activeItemElement = void 0, P.activeItemActionToggle = void 0, j && e && A && I(j, "toggle", !1, M, e, A);
 	}
-	setSelectedData(e) {
-		return this.chartElement.setSelectedData(void 0, e);
+	return P.activeItemElement = R, P.activeItemActionToggle = M, e.setAttribute("has-active-item", "true"), R.setAttribute("active", "true"), L(R, M), I(M, "toggle", !0, R, j, z), {
+		result: !0,
+		state: P
+	};
+}, deactivateGridItems = ({ gridElement: e, items: k, state: A, cleanupActiveItem: j, dispatchItemActionEvent: M }) => {
+	let N = 0;
+	if (A.activeItemElement && A.activeItemActionToggle) {
+		let P = A.activeItemElement.getAttribute("gs-id"), F = k.find((e) => e.id === P), I = A.activeItemActionToggle, L = A.activeItemElement;
+		j(A.activeItemElement), A.activeItemElement = void 0, A.activeItemActionToggle = void 0, e.removeAttribute("has-active-item"), I && P && F && (M(I, "toggle", !1, L, P, F), N++);
 	}
-	setAuthorization(e, k) {
-		return this.chartElement.setAuthorization(e, k);
+	return {
+		deactivatedCount: N,
+		state: A
+	};
+};
+var DEFAULT_ITEM_POSITION = {
+	sizeX: 1,
+	sizeY: 1,
+	col: 0,
+	row: 0
+};
+const normalizeGridItems = (e, k) => {
+	e.forEach((e) => {
+		e.id = e.id ?? k(), e.canFilter = e.canFilter ?? "all";
+	});
+}, ensureGridItemId = (e, k) => (e.id = e.id ?? k(), e.id), buildGridWidgetOptions = (e, k) => ({
+	id: k,
+	x: e?.position?.col ?? 0,
+	y: e?.position?.row ?? 0,
+	w: e?.position?.sizeX ?? 1,
+	h: e?.position?.sizeY ?? 1
+}), createGridItemFromInput = (e, k) => ({
+	...structuredClone(e),
+	id: k,
+	position: structuredClone(e.position) ?? { ...DEFAULT_ITEM_POSITION },
+	canFilter: e.canFilter ?? "all"
+}), createOrphanGridItemElement = (e) => {
+	let k = document.createElement("div");
+	return k.className = "luzmo-grid-item has-luzmo-viz-item", k.setAttribute("luzmo-grid-item-id", e), k.setAttribute("orphan", "true"), k.setAttribute("tabindex", "0"), k.setAttribute("role", "row"), k.innerHTML = "<div class=\"grid-stack-item-content\" role=\"gridcell\"></div>", k;
+}, readGridItemPosition = (e) => ({
+	sizeX: Number.parseInt(e.getAttribute("gs-w") ?? "1", 10),
+	sizeY: Number.parseInt(e.getAttribute("gs-h") ?? "1", 10),
+	col: Number.parseInt(e.getAttribute("gs-x") ?? "0", 10),
+	row: Number.parseInt(e.getAttribute("gs-y") ?? "0", 10)
+}), findGridItemElementById = (e, k) => {
+	if (k) {
+		for (let A of e) if (A.getAttribute("luzmo-grid-item-id") === k) return A;
+	}
+}, mapGridItems = (e, k) => e.map((e) => {
+	let A = {
+		item: e,
+		element: k.querySelector(`[gs-id="${e.id}"]`)
+	}, j = A.element?.querySelector("luzmo-embed-viz-item");
+	return j && (A.luzmoElement = j), A;
+}), addGridItem = ({ newItem: e, gridElement: k, grid: A, createId: j }) => {
+	let M = createGridItemFromInput(e, j()), N = createOrphanGridItemElement(M.id);
+	k.append(N);
+	let P = {
+		x: M.position?.col ?? 0,
+		y: M.position?.row ?? 0,
+		w: M.position?.sizeX ?? 1,
+		h: M.position?.sizeY ?? 1,
+		autoPosition: !0,
+		id: M.id
+	}, F = A?.makeWidget(N, P);
+	return F && (M.position = readGridItemPosition(F)), {
+		item: M,
+		element: N
+	};
+}, removeGridItemById = ({ id: e, grid: k, items: A, getGridItemById: j, removeItemActionsMenuPopover: M, activeItemElement: N, cleanupActiveItem: P }) => {
+	if (!e) return {
+		activeItemElement: N,
+		focusedItemElement: void 0
+	};
+	let F = j(e)?.element;
+	F && k && k.removeWidget(F);
+	let I = A.findIndex((k) => k.id === e);
+	I !== -1 && A.splice(I, 1), F && M(F);
+	let L = N;
+	return F && N === F && (P(F), L = void 0), {
+		activeItemElement: L,
+		focusedItemElement: void 0
+	};
+}, handleCloneItem = ({ event: e, hasGrid: k, items: A, createId: j, addGridItem: M, dispatchItemActionEvent: N }) => {
+	let P = e.target.closest(".grid-stack-item");
+	if (!P || !k) return;
+	let F = P.getAttribute("gs-id");
+	if (!F) return;
+	let I = A.find((e) => e.id === F);
+	if (!I) return;
+	let L = j(), R = {
+		...structuredClone(I),
+		id: L
+	}, z = M(R), B = e.detail;
+	N("clone", B?.type ?? "button", B?.active ?? !1, z, L, R, void 0, P);
+};
+var min = Math.min, max = Math.max, round = Math.round, floor = Math.floor, createCoords = (e) => ({
+	x: e,
+	y: e
+}), oppositeSideMap = {
+	left: "right",
+	right: "left",
+	bottom: "top",
+	top: "bottom"
+}, oppositeAlignmentMap = {
+	start: "end",
+	end: "start"
+};
+function evaluate(e, k) {
+	return typeof e == "function" ? e(k) : e;
+}
+function getSide(e) {
+	return e.split("-")[0];
+}
+function getAlignment(e) {
+	return e.split("-")[1];
+}
+function getOppositeAxis(e) {
+	return e === "x" ? "y" : "x";
+}
+function getAxisLength(e) {
+	return e === "y" ? "height" : "width";
+}
+var yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
+function getSideAxis(e) {
+	return yAxisSides.has(getSide(e)) ? "y" : "x";
+}
+function getAlignmentAxis(e) {
+	return getOppositeAxis(getSideAxis(e));
+}
+function getAlignmentSides(e, k, A) {
+	A === void 0 && (A = !1);
+	let j = getAlignment(e), M = getAlignmentAxis(e), N = getAxisLength(M), P = M === "x" ? j === (A ? "end" : "start") ? "right" : "left" : j === "start" ? "bottom" : "top";
+	return k.reference[N] > k.floating[N] && (P = getOppositePlacement(P)), [P, getOppositePlacement(P)];
+}
+function getExpandedPlacements(e) {
+	let k = getOppositePlacement(e);
+	return [
+		getOppositeAlignmentPlacement(e),
+		k,
+		getOppositeAlignmentPlacement(k)
+	];
+}
+function getOppositeAlignmentPlacement(e) {
+	return e.replace(/start|end/g, (e) => oppositeAlignmentMap[e]);
+}
+var lrPlacement = ["left", "right"], rlPlacement = ["right", "left"], tbPlacement = ["top", "bottom"], btPlacement = ["bottom", "top"];
+function getSideList(e, k, A) {
+	switch (e) {
+		case "top":
+		case "bottom": return A ? k ? rlPlacement : lrPlacement : k ? lrPlacement : rlPlacement;
+		case "left":
+		case "right": return k ? tbPlacement : btPlacement;
+		default: return [];
 	}
-	attributeChangedCallback(e, k, A) {
-		super.attributeChangedCallback(e, k, A), e === "selecteddata" && (this.chartElement ? this.setSelectedData(JSON.parse(A ?? "{}")) : this.postInitCallQueue.push([this.setSelectedData, [JSON.parse(A ?? "{}")]]));
+}
+function getOppositeAxisPlacements(e, k, A, j) {
+	let M = getAlignment(e), N = getSideList(getSide(e), A === "start", j);
+	return M && (N = N.map((e) => e + "-" + M), k && (N = N.concat(N.map(getOppositeAlignmentPlacement)))), N;
+}
+function getOppositePlacement(e) {
+	return e.replace(/left|right|bottom|top/g, (e) => oppositeSideMap[e]);
+}
+function expandPaddingObject(e) {
+	return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
+		...e
+	};
+}
+function getPaddingObject(e) {
+	return typeof e == "number" ? {
+		top: e,
+		right: e,
+		bottom: e,
+		left: e
+	} : expandPaddingObject(e);
+}
+function rectToClientRect(e) {
+	let { x: k, y: A, width: j, height: M } = e;
+	return {
+		width: j,
+		height: M,
+		top: A,
+		left: k,
+		right: k + j,
+		bottom: A + M,
+		x: k,
+		y: A
+	};
+}
+function computeCoordsFromPlacement(e, k, A) {
+	let { reference: j, floating: M } = e, N = getSideAxis(k), P = getAlignmentAxis(k), F = getAxisLength(P), I = getSide(k), L = N === "y", R = j.x + j.width / 2 - M.width / 2, z = j.y + j.height / 2 - M.height / 2, B = j[F] / 2 - M[F] / 2, V;
+	switch (I) {
+		case "top":
+			V = {
+				x: R,
+				y: j.y - M.height
+			};
+			break;
+		case "bottom":
+			V = {
+				x: R,
+				y: j.y + j.height
+			};
+			break;
+		case "right":
+			V = {
+				x: j.x + j.width,
+				y: z
+			};
+			break;
+		case "left":
+			V = {
+				x: j.x - M.width,
+				y: z
+			};
+			break;
+		default: V = {
+			x: j.x,
+			y: j.y
+		};
 	}
-	async firstUpdated(e) {
-		super.firstUpdated(e), this.canInitializeVizItem() && (await loadLibrary(this.appServer, vizItemRemote), this.createAndAppendElement());
+	switch (getAlignment(k)) {
+		case "start":
+			V[P] -= B * (A && L ? -1 : 1);
+			break;
+		case "end":
+			V[P] += B * (A && L ? -1 : 1);
+			break;
 	}
-	createAndAppendElement() {
-		this.chartElement || (this.chartElement = document.createElement("chart-component"), this.chartElement.setAttribute("embedding-mode", "chart"), this.chartElement.style.height = "100%", this.chartElement.style.width = "100%", this.chartElement.style.display = "block", this.chartElement.addEventListener("load", (e) => this.dispatchEvent(new CustomEvent("load", e))), this.chartElement.addEventListener("rendered", (e) => {
-			if (this.postInitCallQueue?.length > 0) for (let e of this.postInitCallQueue) e[0].bind(this)(...e[1]);
-			else this.selectedData && this.setSelectedData(this.selectedData);
-			this.dispatchEvent(new CustomEvent("rendered", e));
-		}), this.chartElement.addEventListener("changedFilters", (e) => this.dispatchEvent(new CustomEvent("changedFilters", e))), this.chartElement.addEventListener("exported", (e) => this.dispatchEvent(new CustomEvent("exported", e))), this.chartElement.addEventListener("customEvent", (e) => this.dispatchEvent(new CustomEvent("customEvent", e))), this.updateVizItemProperties(), this.renderRoot.append(this.chartElement));
+	return V;
+}
+var computePosition$1 = async (e, k, A) => {
+	let { placement: j = "bottom", strategy: M = "absolute", middleware: N = [], platform: P } = A, F = N.filter(Boolean), I = await (P.isRTL == null ? void 0 : P.isRTL(k)), L = await P.getElementRects({
+		reference: e,
+		floating: k,
+		strategy: M
+	}), { x: R, y: z } = computeCoordsFromPlacement(L, j, I), B = j, V = {}, H = 0;
+	for (let A = 0; A < F.length; A++) {
+		let { name: N, fn: U } = F[A], { x: W, y: G, data: K, reset: q } = await U({
+			x: R,
+			y: z,
+			initialPlacement: j,
+			placement: B,
+			strategy: M,
+			middlewareData: V,
+			rects: L,
+			platform: P,
+			elements: {
+				reference: e,
+				floating: k
+			}
+		});
+		R = W ?? R, z = G ?? z, V = {
+			...V,
+			[N]: {
+				...V[N],
+				...K
+			}
+		}, q && H <= 50 && (H++, typeof q == "object" && (q.placement && (B = q.placement), q.rects && (L = q.rects === !0 ? await P.getElementRects({
+			reference: e,
+			floating: k,
+			strategy: M
+		}) : q.rects), {x: R, y: z} = computeCoordsFromPlacement(L, B, I)), A = -1);
 	}
-	updateVizItemProperties() {
-		if (this.chartElement) for (let e in libraryTypeToWebComponentTypeMapping) {
-			let k = this[e];
-			if (k) {
-				let A = ["appServer", "apiHost"].includes(e) ? removeTrailingSlash(k) : k;
-				this.chartElement.setAttribute(libraryTypeToWebComponentTypeMapping[e], typeof A == "object" ? JSON.stringify(A) : A);
+	return {
+		x: R,
+		y: z,
+		placement: B,
+		strategy: M,
+		middlewareData: V
+	};
+};
+async function detectOverflow(e, k) {
+	k === void 0 && (k = {});
+	let { x: A, y: j, platform: M, rects: N, elements: P, strategy: F } = e, { boundary: I = "clippingAncestors", rootBoundary: L = "viewport", elementContext: R = "floating", altBoundary: z = !1, padding: B = 0 } = evaluate(k, e), V = getPaddingObject(B), H = P[z ? R === "floating" ? "reference" : "floating" : R], U = rectToClientRect(await M.getClippingRect({
+		element: await (M.isElement == null ? void 0 : M.isElement(H)) ?? !0 ? H : H.contextElement || await (M.getDocumentElement == null ? void 0 : M.getDocumentElement(P.floating)),
+		boundary: I,
+		rootBoundary: L,
+		strategy: F
+	})), W = R === "floating" ? {
+		x: A,
+		y: j,
+		width: N.floating.width,
+		height: N.floating.height
+	} : N.reference, G = await (M.getOffsetParent == null ? void 0 : M.getOffsetParent(P.floating)), K = await (M.isElement == null ? void 0 : M.isElement(G)) && await (M.getScale == null ? void 0 : M.getScale(G)) || {
+		x: 1,
+		y: 1
+	}, q = rectToClientRect(M.convertOffsetParentRelativeRectToViewportRelativeRect ? await M.convertOffsetParentRelativeRectToViewportRelativeRect({
+		elements: P,
+		rect: W,
+		offsetParent: G,
+		strategy: F
+	}) : W);
+	return {
+		top: (U.top - q.top + V.top) / K.y,
+		bottom: (q.bottom - U.bottom + V.bottom) / K.y,
+		left: (U.left - q.left + V.left) / K.x,
+		right: (q.right - U.right + V.right) / K.x
+	};
+}
+var flip$1 = function(e) {
+	return e === void 0 && (e = {}), {
+		name: "flip",
+		options: e,
+		async fn(k) {
+			var A;
+			let { placement: j, middlewareData: M, rects: N, initialPlacement: P, platform: F, elements: I } = k, { mainAxis: L = !0, crossAxis: R = !0, fallbackPlacements: z, fallbackStrategy: B = "bestFit", fallbackAxisSideDirection: V = "none", flipAlignment: H = !0, ...U } = evaluate(e, k);
+			if ((A = M.arrow) != null && A.alignmentOffset) return {};
+			let W = getSide(j), G = getSideAxis(P), K = getSide(P) === P, q = await (F.isRTL == null ? void 0 : F.isRTL(I.floating)), J = z || (K || !H ? [getOppositePlacement(P)] : getExpandedPlacements(P)), Y = V !== "none";
+			!z && Y && J.push(...getOppositeAxisPlacements(P, H, V, q));
+			let X = [P, ...J], Z = await detectOverflow(k, U), Q = [], $ = M.flip?.overflows || [];
+			if (L && Q.push(Z[W]), R) {
+				let e = getAlignmentSides(j, N, q);
+				Q.push(Z[e[0]], Z[e[1]]);
+			}
+			if ($ = [...$, {
+				placement: j,
+				overflows: Q
+			}], !Q.every((e) => e <= 0)) {
+				let e = (M.flip?.index || 0) + 1, k = X[e];
+				if (k && (!(R === "alignment" && G !== getSideAxis(k)) || $.every((e) => getSideAxis(e.placement) === G ? e.overflows[0] > 0 : !0))) return {
+					data: {
+						index: e,
+						overflows: $
+					},
+					reset: { placement: k }
+				};
+				let A = $.filter((e) => e.overflows[0] <= 0).sort((e, k) => e.overflows[1] - k.overflows[1])[0]?.placement;
+				if (!A) switch (B) {
+					case "bestFit": {
+						let e = $.filter((e) => {
+							if (Y) {
+								let k = getSideAxis(e.placement);
+								return k === G || k === "y";
+							}
+							return !0;
+						}).map((e) => [e.placement, e.overflows.filter((e) => e > 0).reduce((e, k) => e + k, 0)]).sort((e, k) => e[1] - k[1])[0]?.[0];
+						e && (A = e);
+						break;
+					}
+					case "initialPlacement":
+						A = P;
+						break;
+				}
+				if (j !== A) return { reset: { placement: A } };
 			}
+			return {};
 		}
-	}
-	async updated(e) {
-		if (this.chartElement) for (let [k] of e.entries()) {
-			let e = libraryTypeToWebComponentTypeMapping[k] ?? k, A = typeof this[k] == "object" ? JSON.stringify(this[k]) : this[k]?.toString() ?? this[k];
-			this.chartElement.setAttribute(e, A);
+	};
+}, originSides = /* @__PURE__ */ new Set(["left", "top"]);
+async function convertValueToCoords(e, k) {
+	let { placement: A, platform: j, elements: M } = e, N = await (j.isRTL == null ? void 0 : j.isRTL(M.floating)), P = getSide(A), F = getAlignment(A), I = getSideAxis(A) === "y", L = originSides.has(P) ? -1 : 1, R = N && I ? -1 : 1, z = evaluate(k, e), { mainAxis: B, crossAxis: V, alignmentAxis: H } = typeof z == "number" ? {
+		mainAxis: z,
+		crossAxis: 0,
+		alignmentAxis: null
+	} : {
+		mainAxis: z.mainAxis || 0,
+		crossAxis: z.crossAxis || 0,
+		alignmentAxis: z.alignmentAxis
+	};
+	return F && typeof H == "number" && (V = F === "end" ? H * -1 : H), I ? {
+		x: V * R,
+		y: B * L
+	} : {
+		x: B * L,
+		y: V * R
+	};
+}
+var offset$1 = function(e) {
+	return e === void 0 && (e = 0), {
+		name: "offset",
+		options: e,
+		async fn(k) {
+			var A;
+			let { x: j, y: M, placement: N, middlewareData: P } = k, F = await convertValueToCoords(k, e);
+			return N === P.offset?.placement && (A = P.arrow) != null && A.alignmentOffset ? {} : {
+				x: j + F.x,
+				y: M + F.y,
+				data: {
+					...F,
+					placement: N
+				}
+			};
+		}
+	};
+};
+function hasWindow() {
+	return typeof window < "u";
+}
+function getNodeName(e) {
+	return isNode(e) ? (e.nodeName || "").toLowerCase() : "#document";
+}
+function getWindow(e) {
+	var k;
+	return (e == null || (k = e.ownerDocument) == null ? void 0 : k.defaultView) || window;
+}
+function getDocumentElement(e) {
+	return ((isNode(e) ? e.ownerDocument : e.document) || window.document)?.documentElement;
+}
+function isNode(e) {
+	return hasWindow() ? e instanceof Node || e instanceof getWindow(e).Node : !1;
+}
+function isElement(e) {
+	return hasWindow() ? e instanceof Element || e instanceof getWindow(e).Element : !1;
+}
+function isHTMLElement(e) {
+	return hasWindow() ? e instanceof HTMLElement || e instanceof getWindow(e).HTMLElement : !1;
+}
+function isShadowRoot(e) {
+	return !hasWindow() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof getWindow(e).ShadowRoot;
+}
+var invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
+function isOverflowElement(e) {
+	let { overflow: k, overflowX: A, overflowY: j, display: M } = getComputedStyle$1(e);
+	return /auto|scroll|overlay|hidden|clip/.test(k + j + A) && !invalidOverflowDisplayValues.has(M);
+}
+var tableElements = /* @__PURE__ */ new Set([
+	"table",
+	"td",
+	"th"
+]);
+function isTableElement(e) {
+	return tableElements.has(getNodeName(e));
+}
+var topLayerSelectors = [":popover-open", ":modal"];
+function isTopLayer(e) {
+	return topLayerSelectors.some((k) => {
+		try {
+			return e.matches(k);
+		} catch {
+			return !1;
 		}
-		else this.canInitializeVizItem() && (await loadLibrary(this.appServer, vizItemRemote), this.createAndAppendElement());
-	}
-	render() {
-		return html`  `;
-	}
-};
-__decorateClass([property()], LuzmoBaseVizItem.prototype, "appServer", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "apiHost", 2), __decorateClass([property({ type: Array })], LuzmoBaseVizItem.prototype, "slots", 2), __decorateClass([property({ type: Object })], LuzmoBaseVizItem.prototype, "options", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "type", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "authKey", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "authToken", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "version", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "contextId", 2), __decorateClass([property({ converter: (e) => {
-	try {
-		return JSON.parse(e);
-	} catch {
-		return e;
+	});
+}
+var transformProperties = [
+	"transform",
+	"translate",
+	"scale",
+	"rotate",
+	"perspective"
+], willChangeValues = [
+	"transform",
+	"translate",
+	"scale",
+	"rotate",
+	"perspective",
+	"filter"
+], containValues = [
+	"paint",
+	"layout",
+	"strict",
+	"content"
+];
+function isContainingBlock(e) {
+	let k = isWebKit(), A = isElement(e) ? getComputedStyle$1(e) : e;
+	return transformProperties.some((e) => A[e] ? A[e] !== "none" : !1) || (A.containerType ? A.containerType !== "normal" : !1) || !k && (A.backdropFilter ? A.backdropFilter !== "none" : !1) || !k && (A.filter ? A.filter !== "none" : !1) || willChangeValues.some((e) => (A.willChange || "").includes(e)) || containValues.some((e) => (A.contain || "").includes(e));
+}
+function getContainingBlock(e) {
+	let k = getParentNode(e);
+	for (; isHTMLElement(k) && !isLastTraversableNode(k);) {
+		if (isContainingBlock(k)) return k;
+		if (isTopLayer(k)) return null;
+		k = getParentNode(k);
 	}
-} })], LuzmoBaseVizItem.prototype, "canFilter", 2), __decorateClass([property({ type: Array })], LuzmoBaseVizItem.prototype, "filters", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "dashboardId", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "itemId", 2), __decorateClass([property({ type: Object })], LuzmoBaseVizItem.prototype, "selectedData", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "dashboardContentsVersion", 2), __decorateClass([property()], LuzmoBaseVizItem.prototype, "libVersion", 2);
-var LuzmoEmbedVizItem = class extends LuzmoBaseVizItem {};
-customElements.get("luzmo-embed-viz-item") || customElements.define("luzmo-embed-viz-item", LuzmoEmbedVizItem);
-var inputMap = {
-	aiEndpoint: "ai-endpoint",
-	appServer: "app-server",
-	apiHost: "api-host",
-	options: "options",
-	initialSuggestionsDatasetId: "initialSuggestionsDatasetId",
-	authKey: "auth-key",
-	authToken: "auth-token",
-	version: "version",
-	libVersion: "lib-version",
-	aydHost: "ayd-host",
-	availableDatasets: "available-datasets"
-}, embedChatTag = "luzmo-iq-embed-chat", chatComponentTag = "luzmo-iq-chat-component", LuzmoIQEmbedChatComponent = class extends LitElement {
-	constructor() {
-		super(...arguments), this.appServer = "https://app.luzmo.com", this.apiHost = "https://api.luzmo.com", this.version = version + "-wc-luzmo", this.libVersion = version + "-wc-luzmo", this.remoteEntryServer = "http://localhost:4202/", this.aydHost = "https://ayd.luzmo.com/";
+	return null;
+}
+function isWebKit() {
+	return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
+}
+var lastTraversableNodeNames = /* @__PURE__ */ new Set([
+	"html",
+	"body",
+	"#document"
+]);
+function isLastTraversableNode(e) {
+	return lastTraversableNodeNames.has(getNodeName(e));
+}
+function getComputedStyle$1(e) {
+	return getWindow(e).getComputedStyle(e);
+}
+function getNodeScroll(e) {
+	return isElement(e) ? {
+		scrollLeft: e.scrollLeft,
+		scrollTop: e.scrollTop
+	} : {
+		scrollLeft: e.scrollX,
+		scrollTop: e.scrollY
+	};
+}
+function getParentNode(e) {
+	if (getNodeName(e) === "html") return e;
+	let k = e.assignedSlot || e.parentNode || isShadowRoot(e) && e.host || getDocumentElement(e);
+	return isShadowRoot(k) ? k.host : k;
+}
+function getNearestOverflowAncestor(e) {
+	let k = getParentNode(e);
+	return isLastTraversableNode(k) ? e.ownerDocument ? e.ownerDocument.body : e.body : isHTMLElement(k) && isOverflowElement(k) ? k : getNearestOverflowAncestor(k);
+}
+function getOverflowAncestors(e, k, A) {
+	k === void 0 && (k = []), A === void 0 && (A = !0);
+	let j = getNearestOverflowAncestor(e), M = j === e.ownerDocument?.body, N = getWindow(j);
+	if (M) {
+		let e = getFrameElement(N);
+		return k.concat(N, N.visualViewport || [], isOverflowElement(j) ? j : [], e && A ? getOverflowAncestors(e) : []);
 	}
-	static {
-		this.styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  `;
+	return k.concat(j, getOverflowAncestors(j, [], A));
+}
+function getFrameElement(e) {
+	return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
+}
+function getCssDimensions(e) {
+	let k = getComputedStyle$1(e), A = parseFloat(k.width) || 0, j = parseFloat(k.height) || 0, M = isHTMLElement(e), N = M ? e.offsetWidth : A, P = M ? e.offsetHeight : j, F = round(A) !== N || round(j) !== P;
+	return F && (A = N, j = P), {
+		width: A,
+		height: j,
+		$: F
+	};
+}
+function unwrapElement(e) {
+	return isElement(e) ? e : e.contextElement;
+}
+function getScale(e) {
+	let k = unwrapElement(e);
+	if (!isHTMLElement(k)) return createCoords(1);
+	let A = k.getBoundingClientRect(), { width: j, height: M, $: N } = getCssDimensions(k), P = (N ? round(A.width) : A.width) / j, F = (N ? round(A.height) : A.height) / M;
+	return (!P || !Number.isFinite(P)) && (P = 1), (!F || !Number.isFinite(F)) && (F = 1), {
+		x: P,
+		y: F
+	};
+}
+var noOffsets = /* @__PURE__ */ createCoords(0);
+function getVisualOffsets(e) {
+	let k = getWindow(e);
+	return !isWebKit() || !k.visualViewport ? noOffsets : {
+		x: k.visualViewport.offsetLeft,
+		y: k.visualViewport.offsetTop
+	};
+}
+function shouldAddVisualOffsets(e, k, A) {
+	return k === void 0 && (k = !1), !A || k && A !== getWindow(e) ? !1 : k;
+}
+function getBoundingClientRect(e, k, A, j) {
+	k === void 0 && (k = !1), A === void 0 && (A = !1);
+	let M = e.getBoundingClientRect(), N = unwrapElement(e), P = createCoords(1);
+	k && (j ? isElement(j) && (P = getScale(j)) : P = getScale(e));
+	let F = shouldAddVisualOffsets(N, A, j) ? getVisualOffsets(N) : createCoords(0), I = (M.left + F.x) / P.x, L = (M.top + F.y) / P.y, R = M.width / P.x, z = M.height / P.y;
+	if (N) {
+		let e = getWindow(N), k = j && isElement(j) ? getWindow(j) : j, A = e, M = getFrameElement(A);
+		for (; M && j && k !== A;) {
+			let e = getScale(M), k = M.getBoundingClientRect(), j = getComputedStyle$1(M), N = k.left + (M.clientLeft + parseFloat(j.paddingLeft)) * e.x, P = k.top + (M.clientTop + parseFloat(j.paddingTop)) * e.y;
+			I *= e.x, L *= e.y, R *= e.x, z *= e.y, I += N, L += P, A = getWindow(M), M = getFrameElement(A);
+		}
 	}
-	createRenderRoot() {
-		return this;
+	return rectToClientRect({
+		width: R,
+		height: z,
+		x: I,
+		y: L
+	});
+}
+function getWindowScrollBarX(e, k) {
+	let A = getNodeScroll(e).scrollLeft;
+	return k ? k.left + A : getBoundingClientRect(getDocumentElement(e)).left + A;
+}
+function getHTMLOffset(e, k) {
+	let A = e.getBoundingClientRect();
+	return {
+		x: A.left + k.scrollLeft - getWindowScrollBarX(e, A),
+		y: A.top + k.scrollTop
+	};
+}
+function convertOffsetParentRelativeRectToViewportRelativeRect(e) {
+	let { elements: k, rect: A, offsetParent: j, strategy: M } = e, N = M === "fixed", P = getDocumentElement(j), F = k ? isTopLayer(k.floating) : !1;
+	if (j === P || F && N) return A;
+	let I = {
+		scrollLeft: 0,
+		scrollTop: 0
+	}, L = createCoords(1), R = createCoords(0), z = isHTMLElement(j);
+	if ((z || !z && !N) && ((getNodeName(j) !== "body" || isOverflowElement(P)) && (I = getNodeScroll(j)), isHTMLElement(j))) {
+		let e = getBoundingClientRect(j);
+		L = getScale(j), R.x = e.x + j.clientLeft, R.y = e.y + j.clientTop;
 	}
-	async firstUpdated(e) {
-		super.firstUpdated(e), await loadLibrary(this.calculatedAppServer, "IQApp"), this.createAndAppendElement();
+	let B = P && !z && !N ? getHTMLOffset(P, I) : createCoords(0);
+	return {
+		width: A.width * L.x,
+		height: A.height * L.y,
+		x: A.x * L.x - I.scrollLeft * L.x + R.x + B.x,
+		y: A.y * L.y - I.scrollTop * L.y + R.y + B.y
+	};
+}
+function getClientRects(e) {
+	return Array.from(e.getClientRects());
+}
+function getDocumentRect(e) {
+	let k = getDocumentElement(e), A = getNodeScroll(e), j = e.ownerDocument.body, M = max(k.scrollWidth, k.clientWidth, j.scrollWidth, j.clientWidth), N = max(k.scrollHeight, k.clientHeight, j.scrollHeight, j.clientHeight), P = -A.scrollLeft + getWindowScrollBarX(e), F = -A.scrollTop;
+	return getComputedStyle$1(j).direction === "rtl" && (P += max(k.clientWidth, j.clientWidth) - M), {
+		width: M,
+		height: N,
+		x: P,
+		y: F
+	};
+}
+var SCROLLBAR_MAX = 25;
+function getViewportRect(e, k) {
+	let A = getWindow(e), j = getDocumentElement(e), M = A.visualViewport, N = j.clientWidth, P = j.clientHeight, F = 0, I = 0;
+	if (M) {
+		N = M.width, P = M.height;
+		let e = isWebKit();
+		(!e || e && k === "fixed") && (F = M.offsetLeft, I = M.offsetTop);
 	}
-	get calculatedAppServer() {
-		return this.appServer.startsWith("http://localhost") ? this.remoteEntryServer : this.appServer;
+	let L = getWindowScrollBarX(j);
+	if (L <= 0) {
+		let e = j.ownerDocument, k = e.body, A = getComputedStyle(k), M = e.compatMode === "CSS1Compat" && parseFloat(A.marginLeft) + parseFloat(A.marginRight) || 0, P = Math.abs(j.clientWidth - k.clientWidth - M);
+		P <= SCROLLBAR_MAX && (N -= P);
+	} else L <= SCROLLBAR_MAX && (N += L);
+	return {
+		width: N,
+		height: P,
+		x: F,
+		y: I
+	};
+}
+var absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
+function getInnerBoundingClientRect(e, k) {
+	let A = getBoundingClientRect(e, !0, k === "fixed"), j = A.top + e.clientTop, M = A.left + e.clientLeft, N = isHTMLElement(e) ? getScale(e) : createCoords(1);
+	return {
+		width: e.clientWidth * N.x,
+		height: e.clientHeight * N.y,
+		x: M * N.x,
+		y: j * N.y
+	};
+}
+function getClientRectFromClippingAncestor(e, k, A) {
+	let j;
+	if (k === "viewport") j = getViewportRect(e, A);
+	else if (k === "document") j = getDocumentRect(getDocumentElement(e));
+	else if (isElement(k)) j = getInnerBoundingClientRect(k, A);
+	else {
+		let A = getVisualOffsets(e);
+		j = {
+			x: k.x - A.x,
+			y: k.y - A.y,
+			width: k.width,
+			height: k.height
+		};
 	}
-	createAndAppendElement() {
-		this.chartElement || (this.chartElement = document.createElement(chatComponentTag), this.chartElement.addEventListener("load", (e) => this.dispatchEvent(new CustomEvent("load", e))), this.updateVizItemProperties(), this.renderRoot.append(this.chartElement));
+	return rectToClientRect(j);
+}
+function hasFixedPositionAncestor(e, k) {
+	let A = getParentNode(e);
+	return A === k || !isElement(A) || isLastTraversableNode(A) ? !1 : getComputedStyle$1(A).position === "fixed" || hasFixedPositionAncestor(A, k);
+}
+function getClippingElementAncestors(e, k) {
+	let A = k.get(e);
+	if (A) return A;
+	let j = getOverflowAncestors(e, [], !1).filter((e) => isElement(e) && getNodeName(e) !== "body"), M = null, N = getComputedStyle$1(e).position === "fixed", P = N ? getParentNode(e) : e;
+	for (; isElement(P) && !isLastTraversableNode(P);) {
+		let k = getComputedStyle$1(P), A = isContainingBlock(P);
+		!A && k.position === "fixed" && (M = null), (N ? !A && !M : !A && k.position === "static" && M && absoluteOrFixed.has(M.position) || isOverflowElement(P) && !A && hasFixedPositionAncestor(e, P)) ? j = j.filter((e) => e !== P) : M = k, P = getParentNode(P);
 	}
-	updateVizItemProperties() {
-		if (this.chartElement) for (let e in inputMap) {
-			let k = this[e];
-			if (k) {
-				let A = [
-					"appServer",
-					"apiHost",
-					"aydHost"
-				].includes(e) ? removeTrailingSlash(k) : k;
-				this.chartElement.setAttribute(inputMap[e], typeof A == "object" ? JSON.stringify(A) : A);
-			}
-		}
+	return k.set(e, j), j;
+}
+function getClippingRect(e) {
+	let { element: k, boundary: A, rootBoundary: j, strategy: M } = e, N = [...A === "clippingAncestors" ? isTopLayer(k) ? [] : getClippingElementAncestors(k, this._c) : [].concat(A), j], P = N[0], F = N.reduce((e, A) => {
+		let j = getClientRectFromClippingAncestor(k, A, M);
+		return e.top = max(j.top, e.top), e.right = min(j.right, e.right), e.bottom = min(j.bottom, e.bottom), e.left = max(j.left, e.left), e;
+	}, getClientRectFromClippingAncestor(k, P, M));
+	return {
+		width: F.right - F.left,
+		height: F.bottom - F.top,
+		x: F.left,
+		y: F.top
+	};
+}
+function getDimensions(e) {
+	let { width: k, height: A } = getCssDimensions(e);
+	return {
+		width: k,
+		height: A
+	};
+}
+function getRectRelativeToOffsetParent(e, k, A) {
+	let j = isHTMLElement(k), M = getDocumentElement(k), N = A === "fixed", P = getBoundingClientRect(e, !0, N, k), F = {
+		scrollLeft: 0,
+		scrollTop: 0
+	}, I = createCoords(0);
+	function L() {
+		I.x = getWindowScrollBarX(M);
 	}
-	async updated(e) {
-		if (this.chartElement) for (let [k] of e.entries()) {
-			let e = inputMap[k] ?? k, A = typeof this[k] == "object" ? JSON.stringify(this[k]) : this[k]?.toString() ?? this[k];
-			this.chartElement.setAttribute(e, A);
+	if (j || !j && !N) if ((getNodeName(k) !== "body" || isOverflowElement(M)) && (F = getNodeScroll(k)), j) {
+		let e = getBoundingClientRect(k, !0, N, k);
+		I.x = e.x + k.clientLeft, I.y = e.y + k.clientTop;
+	} else M && L();
+	N && !j && M && L();
+	let R = M && !j && !N ? getHTMLOffset(M, F) : createCoords(0);
+	return {
+		x: P.left + F.scrollLeft - I.x - R.x,
+		y: P.top + F.scrollTop - I.y - R.y,
+		width: P.width,
+		height: P.height
+	};
+}
+function isStaticPositioned(e) {
+	return getComputedStyle$1(e).position === "static";
+}
+function getTrueOffsetParent(e, k) {
+	if (!isHTMLElement(e) || getComputedStyle$1(e).position === "fixed") return null;
+	if (k) return k(e);
+	let A = e.offsetParent;
+	return getDocumentElement(e) === A && (A = A.ownerDocument.body), A;
+}
+function getOffsetParent(e, k) {
+	let A = getWindow(e);
+	if (isTopLayer(e)) return A;
+	if (!isHTMLElement(e)) {
+		let k = getParentNode(e);
+		for (; k && !isLastTraversableNode(k);) {
+			if (isElement(k) && !isStaticPositioned(k)) return k;
+			k = getParentNode(k);
 		}
-		else await loadLibrary(this.calculatedAppServer, "IQApp"), this.createAndAppendElement();
-	}
-	render() {
-		return html``;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		let e = document.querySelector(embedChatTag);
-		if (!e) return;
-		let k = new MutationObserver(() => {
-			let A = e.querySelector("*[slot=\"custom-chat-widget-content\"]");
-			if (!A) return;
-			let j = e.querySelector(chatComponentTag);
-			j && (j.append(A), k.disconnect());
-		});
-		k.observe(e, {
-			childList: !0,
-			subtree: !0
-		});
+		return A;
 	}
+	let j = getTrueOffsetParent(e, k);
+	for (; j && isTableElement(j) && isStaticPositioned(j);) j = getTrueOffsetParent(j, k);
+	return j && isLastTraversableNode(j) && isStaticPositioned(j) && !isContainingBlock(j) ? A : j || getContainingBlock(e) || A;
+}
+var getElementRects = async function(e) {
+	let k = this.getOffsetParent || getOffsetParent, A = this.getDimensions, j = await A(e.floating);
+	return {
+		reference: getRectRelativeToOffsetParent(e.reference, await k(e.floating), e.strategy),
+		floating: {
+			x: 0,
+			y: 0,
+			width: j.width,
+			height: j.height
+		}
+	};
 };
-__decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "appServer", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "apiHost", 2), __decorateClass([property({ type: Object })], LuzmoIQEmbedChatComponent.prototype, "options", 2), __decorateClass([property({ type: String })], LuzmoIQEmbedChatComponent.prototype, "initialSuggestionsDatasetId", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "aiEndpoint", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "authKey", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "authToken", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "version", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "libVersion", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "remoteEntryServer", 2), __decorateClass([property()], LuzmoIQEmbedChatComponent.prototype, "aydHost", 2), __decorateClass([property({ type: Array })], LuzmoIQEmbedChatComponent.prototype, "availableDatasets", 2), customElements.get(embedChatTag) || customElements.define(embedChatTag, LuzmoIQEmbedChatComponent);
-var inputMap2 = {
-	aiEndPoint: "ai-end-point",
-	appServer: "app-server",
-	apiHost: "api-host",
-	options: "options",
-	authKey: "auth-key",
-	authToken: "auth-token",
-	version: "version",
-	libVersion: "lib-version",
-	messages: "messages"
-}, componentTag = "luzmo-iq-embed-answer", LuzmoIQEmbedAnswerComponent = class extends LitElement {
-	constructor() {
-		super(...arguments), this.appServer = "https://app.luzmo.com", this.apiHost = "https://api.luzmo.com", this.version = version + "-wc-luzmo", this.libVersion = version + "-wc-luzmo", this.remoteEntryServer = "http://localhost:4202";
-	}
-	static {
-		this.styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  `;
-	}
-	createRenderRoot() {
-		return this;
-	}
-	async firstUpdated(e) {
-		super.firstUpdated(e), await loadLibrary(this.calculatedAppServer, "IQApp"), this.createAndAppendElement();
-	}
-	get calculatedAppServer() {
-		return this.appServer.startsWith("http://localhost") ? this.remoteEntryServer : this.appServer;
-	}
-	createAndAppendElement() {
-		this.chartElement || (this.chartElement = document.createElement("luzmo-iq-answer-component"), this.chartElement.addEventListener("addQuestion", (e) => this.dispatchEvent(new CustomEvent("addQuestion", e))), this.chartElement.addEventListener("addAnswer", (e) => this.dispatchEvent(new CustomEvent("addAnswer", e))), this.updateVizItemProperties(), this.renderRoot.append(this.chartElement));
+function isRTL(e) {
+	return getComputedStyle$1(e).direction === "rtl";
+}
+var platform = {
+	convertOffsetParentRelativeRectToViewportRelativeRect,
+	getDocumentElement,
+	getClippingRect,
+	getOffsetParent,
+	getElementRects,
+	getClientRects,
+	getDimensions,
+	getScale,
+	isElement,
+	isRTL
+};
+function rectsAreEqual(e, k) {
+	return e.x === k.x && e.y === k.y && e.width === k.width && e.height === k.height;
+}
+function observeMove(e, k) {
+	let A = null, j, M = getDocumentElement(e);
+	function N() {
+		var e;
+		clearTimeout(j), (e = A) == null || e.disconnect(), A = null;
 	}
-	updateVizItemProperties() {
-		if (this.chartElement) for (let e in inputMap2) {
-			let k = this[e];
-			if (k) {
-				let A = ["appServer", "apiHost"].includes(e) ? removeTrailingSlash(k) : k;
-				this.chartElement.setAttribute(inputMap2[e], typeof A == "object" ? JSON.stringify(A) : A);
+	function P(F, I) {
+		F === void 0 && (F = !1), I === void 0 && (I = 1), N();
+		let L = e.getBoundingClientRect(), { left: R, top: z, width: B, height: V } = L;
+		if (F || k(), !B || !V) return;
+		let H = floor(z), U = floor(M.clientWidth - (R + B)), W = floor(M.clientHeight - (z + V)), G = floor(R), K = {
+			rootMargin: -H + "px " + -U + "px " + -W + "px " + -G + "px",
+			threshold: max(0, min(1, I)) || 1
+		}, q = !0;
+		function J(k) {
+			let A = k[0].intersectionRatio;
+			if (A !== I) {
+				if (!q) return P();
+				A ? P(!1, A) : j = setTimeout(() => {
+					P(!1, 1e-7);
+				}, 1e3);
 			}
+			A === 1 && !rectsAreEqual(L, e.getBoundingClientRect()) && P(), q = !1;
+		}
+		try {
+			A = new IntersectionObserver(J, {
+				...K,
+				root: M.ownerDocument
+			});
+		} catch {
+			A = new IntersectionObserver(J, K);
 		}
+		A.observe(e);
 	}
-	async updated(e) {
-		if (this.chartElement) for (let [k] of e.entries()) {
-			let e = inputMap2[k] ?? k, A = typeof this[k] == "object" ? JSON.stringify(this[k]) : this[k]?.toString() ?? this[k];
-			this.chartElement.setAttribute(e, A);
+	return P(!0), N;
+}
+function autoUpdate(e, k, A, j) {
+	j === void 0 && (j = {});
+	let { ancestorScroll: M = !0, ancestorResize: N = !0, elementResize: P = typeof ResizeObserver == "function", layoutShift: F = typeof IntersectionObserver == "function", animationFrame: I = !1 } = j, L = unwrapElement(e), R = M || N ? [...L ? getOverflowAncestors(L) : [], ...getOverflowAncestors(k)] : [];
+	R.forEach((e) => {
+		M && e.addEventListener("scroll", A, { passive: !0 }), N && e.addEventListener("resize", A);
+	});
+	let z = L && F ? observeMove(L, A) : null, B = -1, V = null;
+	P && (V = new ResizeObserver((e) => {
+		let [j] = e;
+		j && j.target === L && V && (V.unobserve(k), cancelAnimationFrame(B), B = requestAnimationFrame(() => {
+			var e;
+			(e = V) == null || e.observe(k);
+		})), A();
+	}), L && !I && V.observe(L), V.observe(k));
+	let H, U = I ? getBoundingClientRect(e) : null;
+	I && W();
+	function W() {
+		let k = getBoundingClientRect(e);
+		U && !rectsAreEqual(U, k) && A(), U = k, H = requestAnimationFrame(W);
+	}
+	return A(), () => {
+		var e;
+		R.forEach((e) => {
+			M && e.removeEventListener("scroll", A), N && e.removeEventListener("resize", A);
+		}), z?.(), (e = V) == null || e.disconnect(), V = null, I && cancelAnimationFrame(H);
+	};
+}
+var offset = offset$1, flip = flip$1, computePosition = (e, k, A) => {
+	let j = /* @__PURE__ */ new Map(), M = {
+		platform,
+		...A
+	}, N = {
+		...M.platform,
+		_c: j
+	};
+	return computePosition$1(e, k, {
+		...M,
+		platform: N
+	});
+}, cleanupCallbacks = /* @__PURE__ */ new WeakMap();
+const setPopoverCleanup = (e, k) => {
+	clearPopoverCleanup(e), cleanupCallbacks.set(e, k);
+}, clearPopoverCleanup = (e) => {
+	let k = cleanupCallbacks.get(e);
+	k && (k(), cleanupCallbacks.delete(e));
+}, createItemActionsMenuPopover = ({ element: e, activeAction: k, getGridItemById: A, placementItemActionsMenu: j, renderOverlayContent: M, removeItemActionsMenuPopover: N }) => {
+	let P = e.querySelector(".grid-item-actions-popover"), F = e.querySelector(".grid-stack-item-content"), I = A(e.getAttribute("gs-id") ?? "");
+	if (k && P && (N(e), P = null), !P) {
+		let A = document.createDocumentFragment();
+		render(M(I?.item, k), A), P = A.querySelector(".grid-item-actions-popover"), e.append(P);
+	}
+	let R = autoUpdate(F, P, async () => {
+		let { x: e, y: k } = await computePosition(F, P, {
+			placement: I?.item?.placementActionsMenu ?? j ?? "right-start",
+			middleware: [offset(0), flip({ crossAxis: !1 })]
+		});
+		P.style.left = `${e}px`, P.style.top = `${k}px`;
+	});
+	setPopoverCleanup(P, R), P.matches(":popover-open") || P.showPopover();
+}, removeItemActionsMenuPopover = (e) => {
+	let k = e.querySelector(".grid-item-actions-popover");
+	k && (clearPopoverCleanup(k), k.matches(":popover-open") && k.hidePopover(), k.remove());
+}, isGridArrowKey = (e) => e === "ArrowLeft" || e === "ArrowRight" || e === "ArrowUp" || e === "ArrowDown", getGridKeyboardUpdate = ({ key: e, node: k, maxColumns: A, shiftKey: j, ctrlKey: M, metaKey: N }) => {
+	let P = {
+		ArrowLeft: {
+			move: { x: k.x - 1 },
+			resize: {
+				x: k.x - 1,
+				w: k.w + 1
+			},
+			shrink: { w: k.w - 1 },
+			canMove: k.x > 0,
+			canResize: k.x > 0,
+			canShrink: k.w > 1
+		},
+		ArrowRight: {
+			move: { x: k.x + 1 },
+			resize: { w: k.w + 1 },
+			shrink: {
+				x: k.x + 1,
+				w: k.w - 1
+			},
+			canMove: k.x < A - k.w,
+			canResize: k.x + k.w < A,
+			canShrink: k.w > 1
+		},
+		ArrowUp: {
+			move: { y: k.y - 1 },
+			resize: {
+				y: k.y - 1,
+				h: k.h + 1
+			},
+			shrink: { h: k.h - 1 },
+			canMove: k.y > 0,
+			canResize: k.y > 0,
+			canShrink: k.h > 1
+		},
+		ArrowDown: {
+			move: { y: k.y + 1 },
+			resize: { h: k.h + 1 },
+			shrink: {
+				y: k.y + 1,
+				h: k.h - 1
+			},
+			canMove: !0,
+			canResize: !0,
+			canShrink: k.h > 1
 		}
-		else await loadLibrary(this.calculatedAppServer, "IQApp"), this.createAndAppendElement();
-	}
-	render() {
-		return html`  `;
+	}[e];
+	if (j && P.canResize) return P.resize;
+	if ((M || N) && P.canShrink) return P.shrink;
+	if (P.canMove) return P.move;
+}, handleGridKeyDown = ({ event: e, viewMode: k, focusedItemElement: A, activeItemElement: j, gridElement: M, grid: N, columns: P, handleDeleteItem: F, removeItemActionsMenuPopover: I, createItemActionsMenuPopover: L }) => {
+	if (k) return {
+		focusedItemElement: A,
+		activeItemElement: j
+	};
+	let R = A, z = j;
+	if (e.key === "Delete" && A) F(new Event("delete")), R = void 0, j === A && (z = void 0);
+	else if (e.key === "Escape" && A) A.removeAttribute("focused"), I(A), R = void 0, M.focus();
+	else if (e.key === "Enter" && A) e.preventDefault(), e.stopPropagation(), j && (j.removeAttribute("active"), M.removeAttribute("has-active-item"), I(j), z = void 0), M.querySelectorAll(".grid-stack-item").forEach((e) => {
+		e !== A && I(e);
+	}), L(A), requestAnimationFrame(() => {
+		let e = A.querySelector("luzmo-grid-item-actions-menu");
+		e && e.focus();
+	});
+	else if (A && N && isGridArrowKey(e.key)) {
+		e.preventDefault(), e.stopPropagation();
+		let k = A.gridstackNode;
+		if (!k) return {
+			focusedItemElement: R,
+			activeItemElement: z
+		};
+		let j = getGridKeyboardUpdate({
+			key: e.key,
+			node: k,
+			maxColumns: P,
+			shiftKey: e.shiftKey,
+			ctrlKey: e.ctrlKey,
+			metaKey: e.metaKey
+		});
+		j && N.update(A, j);
 	}
+	return {
+		focusedItemElement: R,
+		activeItemElement: z
+	};
+};
+var DEFAULT_MARGIN = 16, DEFAULT_HINT_OFFSET = 10, getRGBA = (e, k) => k >= 1 ? `rgba(${e.r},${e.g},${e.b},1)` : k <= 0 ? `rgba(${e.r},${e.g},${e.b},0)` : `rgba(${e.r},${e.g},${e.b},${k})`;
+const resolveGridTheme = async ({ theme: e, currentTheme: k }) => e?.type === "custom" ? structuredClone(e) : e?.id && systemThemeIds.includes(e.id) && k?.id !== e.id ? {
+	...await getTheme(e.id),
+	id: e.id
+} : e?.id && k?.id !== e.id || !e && k ? k : await getTheme("default"), getGridHalfMargins = (e) => [(e?.margins?.[0] ?? DEFAULT_MARGIN) / 2, (e?.margins?.[1] ?? DEFAULT_MARGIN) / 2], getDimensionsHintOffset = (e) => DEFAULT_HINT_OFFSET - (e?.margins?.[0] ?? DEFAULT_HINT_OFFSET), getGridBoxShadow = (e) => {
+	let k = e?.boxShadow;
+	if (!k) return "";
+	let j = new Color(k.color), M = {
+		r: Math.round(j.srgb.r * 255),
+		g: Math.round(j.srgb.g * 255),
+		b: Math.round(j.srgb.b * 255)
+	}, N = e?.margins?.[0] ?? DEFAULT_MARGIN, P = Math.min(N / 10, 2);
+	return k.size === "none" ? "none" : k.size === "S" ? `0 ${P * 2}px ${P * 4}px ${getRGBA(M, .16)}, 0 ${P * 2}px ${P * 4}px ${getRGBA(M, .23)}` : k.size === "M" ? `0 ${P * 8}px ${P * 16}px ${getRGBA(M, .19)}, 0 ${P * 4}px ${P * 4}px ${getRGBA(M, .23)}` : k.size === "L" ? `0 ${P * 12}px ${P * 24}px ${getRGBA(M, .25)}, 0 ${P * 8}px ${P * 8}px ${getRGBA(M, .22)}` : "";
+}, getGridCssVariables = (e) => {
+	let k = getGridBoxShadow(e);
+	return new Map([
+		["--grid-font-family", e?.font?.fontFamily],
+		["--grid-background", e?.background],
+		["--grid-item-box-shadow", k],
+		["--grid-item-background", e?.itemsBackground],
+		["--grid-item-border-color", e?.borders?.["border-color"]],
+		["--grid-item-border-style", e?.borders?.["border-style"]],
+		["--grid-item-border-radius", e?.borders?.["border-radius"]],
+		["--grid-item-border-width", `${e?.borders?.["border-top-width"]}`],
+		["--grid-item-border-top-width", e?.borders?.["border-top-width"]],
+		["--grid-item-border-right-width", e?.borders?.["border-right-width"]],
+		["--grid-item-border-bottom-width", e?.borders?.["border-bottom-width"]],
+		["--grid-item-border-left-width", e?.borders?.["border-left-width"]]
+	]);
+}, isGridDarkBackground = (e) => {
+	let k = e?.itemsBackground ?? e?.background;
+	return k ? new Color(k).luminance < .5 : !1;
+}, applyThemeProperties = (e, k) => {
+	k && getGridCssVariables(k).forEach((k, A) => {
+		k ? e.setProperty(A, k) : e.removeProperty(A);
+	});
+};
+var buildGridActionsMenu = ({ item: e, defaultItemActionsMenu: k, activeAction: A }) => {
+	let j = generateActionsMenu(e?.actionsMenu) ?? generateActionsMenu(k) ?? defaultActionsMenu();
+	return !itemTypes.find((k) => k.type === e?.type)?.containsData && !e?.actionsMenu && !k && (j = j.map((e) => ({
+		...e,
+		actions: e.actions?.filter((e) => e.action !== "edit-data")
+	}))), A && (j = j.map((e) => ({
+		...e,
+		actions: e.actions?.map((e) => ({
+			...e,
+			active: e.action === A ? !0 : e.active
+		}))
+	}))), j;
+};
+const renderOverlayContent = ({ item: e, activeAction: k, defaultItemActionsMenu: A, placementItemActionsMenu: j, language: M, handleAction: N }) => html`
+    <div class="grid-item-actions-popover" popover="manual">
+      <luzmo-grid-item-actions-menu
+        .actions=${buildGridActionsMenu({
+	item: e,
+	defaultItemActionsMenu: A,
+	activeAction: k
+})}
+        placement=${e?.placementActionsMenu ?? j ?? "right-start"}
+        .language=${M}
+        @luzmo-grid-item-action=${N}
+      >
+      </luzmo-grid-item-actions-menu>
+    </div>
+  `, renderGridItem = ({ item: e, index: k, initialized: A, viewMode: j, contentLanguage: M, fullTheme: N, appServer: P, apiHost: F, authKey: L, authToken: R, handleMouseover: z, handleMouseout: B, handleFocus: V, handleBlur: H }) => {
+	let U = {
+		...e.options,
+		locale: M
+	};
+	U.theme ||= N?.id ? { id: N.id } : structuredClone(N);
+	let W = !j;
+	return html`
+    <div
+      class="luzmo-grid-item has-luzmo-viz-item"
+      luzmo-grid-item-id=${e.id ?? ""}
+      tabindex="0"
+      role="row"
+      @mouseover=${z}
+      @mouseout=${B}
+      @focus=${V}
+      @blur=${H}
+    >
+      <div
+        class="grid-stack-item-content"
+        role="gridcell"
+        aria-label="Grid item ${k + 1}"
+      >
+        ${A ? html` ${W ? html`
+                    <div class="grid-item-drag-handle">
+                      <luzmo-icon .icon=${luzmoArrows} size="s"></luzmo-icon>
+                    </div>
+                  ` : html`
+                      
+                    `}
+              <luzmo-embed-viz-item
+                .appServer=${P}
+                .apiHost=${F}
+                .authKey=${L}
+                .authToken=${R}
+                .type=${e.type}
+                .slots=${e.slots}
+                .options=${U}
+                .filters=${e.filters}
+                .language=${M}
+                .canFilter=${e.canFilter ?? "all"}
+              ></luzmo-embed-viz-item>` : html`
+                
+              `}
+      </div>
+    </div>
+  `;
+}, renderGridItems = ({ items: e, initialized: k, viewMode: A, contentLanguage: j, fullTheme: M, appServer: N, apiHost: P, authKey: F, authToken: I, renderItem: L }) => repeat(e, (e) => e.id, (e, R) => guard([
+	e,
+	k,
+	A,
+	j,
+	M,
+	N,
+	P,
+	F,
+	I
+], () => L(e, R))), renderGrid = ({ items: e, initialized: k, viewMode: A, contentLanguage: j, fullTheme: M, appServer: N, apiHost: P, authKey: F, authToken: L, columns: R, ensureGridItemId: z, handleMouseover: B, handleMouseout: V, handleFocus: H, handleBlur: U }) => {
+	e.forEach((e) => {
+		z(e);
+	});
+	let W = renderGridItems({
+		items: e,
+		initialized: k,
+		viewMode: A,
+		contentLanguage: j,
+		fullTheme: M,
+		appServer: N,
+		apiHost: P,
+		authKey: F,
+		authToken: L,
+		renderItem: (e, I) => renderGridItem({
+			item: e,
+			index: I,
+			initialized: k,
+			viewMode: A,
+			contentLanguage: j,
+			fullTheme: M,
+			appServer: N,
+			apiHost: P,
+			authKey: F,
+			authToken: L,
+			handleMouseover: B,
+			handleMouseout: V,
+			handleFocus: H,
+			handleBlur: U
+		})
+	});
+	return html`
+    <div
+      ?dark-background=${k ? isGridDarkBackground(M) : !1}
+      class="grid-stack"
+      data-grid-columns=${R}
+      role="grid"
+      aria-label="Dashboard grid"
+    >
+      ${W}
+    </div>
+  `;
 };
-__decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "appServer", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "apiHost", 2), __decorateClass([property({ type: Object })], LuzmoIQEmbedAnswerComponent.prototype, "options", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "aiEndPoint", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "authKey", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "authToken", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "messages", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "version", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "libVersion", 2), __decorateClass([property()], LuzmoIQEmbedAnswerComponent.prototype, "remoteEntryServer", 2), customElements.get(componentTag) || customElements.define(componentTag, LuzmoIQEmbedAnswerComponent), LitElement.disableWarning?.("change-in-update");
 var Utils = class e {
 	static getElements(e, k = document) {
 		if (typeof e == "string") {
@@ -4054,289 +4702,210 @@ var DDDroppable = class extends DDBaseImplement {
 	}
 	static _itemRemoving(e, k) {
 		if (!e) return;
-		let A = e ? e.gridstackNode : void 0;
-		!A?.grid || e.classList.contains(A.grid.opts.removableOptions.decline) || (k ? A._isAboutToRemove = !0 : delete A._isAboutToRemove, k ? e.classList.add("grid-stack-item-removing") : e.classList.remove("grid-stack-item-removing"));
-	}
-	_setupRemoveDrop() {
-		if (typeof this.opts.removable != "string") return this;
-		let k = document.querySelector(this.opts.removable);
-		return k && !this.opts.staticGrid && !dd.isDroppable(k) && dd.droppable(k, this.opts.removableOptions).on(k, "dropover", (k, A) => e._itemRemoving(A, !0)).on(k, "dropout", (k, A) => e._itemRemoving(A, !1)), this;
-	}
-	prepareDragDrop(e, k = !1) {
-		let A = e?.gridstackNode;
-		if (!A) return;
-		let j = A.noMove || this.opts.disableDrag, M = A.noResize || this.opts.disableResize, N = this.opts.staticGrid || j && M;
-		if ((k || N) && (A._initDD && (this._removeDD(e), delete A._initDD), N && e.classList.add("ui-draggable-disabled", "ui-resizable-disabled"), !k)) return this;
-		if (!A._initDD) {
-			let k, j, M = (M, N) => {
-				this.triggerEvent(M, M.target), k = this.cellWidth(), j = this.getCellHeight(!0), this._onStartMoving(e, M, N, A, k, j);
-			}, N = (M, N) => {
-				this._dragOrResize(e, M, N, A, k, j);
-			}, P = (k) => {
-				this.placeholder.remove(), delete this.placeholder.gridstackNode, delete A._moving, delete A._resizing, delete A._event, delete A._lastTried;
-				let j = A.w !== A._orig.w, M = k.target;
-				if (!(!M.gridstackNode || M.gridstackNode.grid !== this)) {
-					if (A.el = M, A._isAboutToRemove) {
-						let j = e.gridstackNode.grid;
-						j._gsEventHandler[k.type] && j._gsEventHandler[k.type](k, M), j.engine.nodes.push(A), j.removeWidget(e, !0, !0);
-					} else Utils.removePositioningStyles(M), A._temporaryRemoved ? (this._writePosAttr(M, A), this.engine.addNode(A)) : this._writePosAttr(M, A), this.triggerEvent(k, M);
-					this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), k.type === "resizestop" && (Number.isInteger(A.sizeToContent) && (A.sizeToContent = A.h), this.resizeToContentCheck(j, A));
-				}
-			};
-			dd.draggable(e, {
-				start: M,
-				stop: P,
-				drag: N
-			}).resizable(e, {
-				start: M,
-				stop: P,
-				resize: N
-			}), A._initDD = !0;
-		}
-		return dd.draggable(e, j ? "disable" : "enable").resizable(e, M ? "disable" : "enable"), this;
-	}
-	_onStartMoving(e, k, A, j, M, N) {
-		if (this.engine.cleanNodes().beginUpdate(j), this._writePosAttr(this.placeholder, j), this.el.appendChild(this.placeholder), this.placeholder.gridstackNode = j, j.grid?.el) this.dragTransform = Utils.getValuesFromTransformedElement(e);
-		else if (this.placeholder && this.placeholder.closest(".grid-stack")) {
-			let e = this.placeholder.closest(".grid-stack");
-			this.dragTransform = Utils.getValuesFromTransformedElement(e);
-		} else this.dragTransform = {
-			xScale: 1,
-			xOffset: 0,
-			yScale: 1,
-			yOffset: 0
-		};
-		if (j.el = this.placeholder, j._lastUiPosition = A.position, j._prevYPix = A.position.top, j._moving = k.type === "dragstart", j._resizing = k.type === "resizestart", delete j._lastTried, k.type === "dropover" && j._temporaryRemoved && (this.engine.addNode(j), j._moving = !0), this.engine.cacheRects(M, N, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft), k.type === "resizestart") {
-			let k = this.getColumn() - j.x, A = (this.opts.maxRow || 2 ** 53 - 1) - j.y;
-			dd.resizable(e, "option", "minWidth", M * Math.min(j.minW || 1, k)).resizable(e, "option", "minHeight", N * Math.min(j.minH || 1, A)).resizable(e, "option", "maxWidth", M * Math.min(j.maxW || 2 ** 53 - 1, k)).resizable(e, "option", "maxWidthMoveLeft", M * Math.min(j.maxW || 2 ** 53 - 1, j.x + j.w)).resizable(e, "option", "maxHeight", N * Math.min(j.maxH || 2 ** 53 - 1, A)).resizable(e, "option", "maxHeightMoveUp", N * Math.min(j.maxH || 2 ** 53 - 1, j.y + j.h));
-		}
-	}
-	_dragOrResize(e, k, A, j, M, N) {
-		let P = { ...j._orig }, F, I = this.opts.marginLeft, L = this.opts.marginRight, R = this.opts.marginTop, z = this.opts.marginBottom, B = Math.round(N * .1), V = Math.round(M * .1);
-		if (I = Math.min(I, V), L = Math.min(L, V), R = Math.min(R, B), z = Math.min(z, B), k.type === "drag") {
-			if (j._temporaryRemoved) return;
-			let k = A.position.top - j._prevYPix;
-			j._prevYPix = A.position.top, this.opts.draggable.scroll !== !1 && Utils.updateScrollPosition(e, A.position, k);
-			let F = A.position.left + (A.position.left > j._lastUiPosition.left ? -L : I), B = A.position.top + (A.position.top > j._lastUiPosition.top ? -z : R);
-			P.x = Math.round(F / M), P.y = Math.round(B / N);
-			let V = this._extraDragRow;
-			if (this.engine.collide(j, P)) {
-				let e = this.getRow(), k = Math.max(0, P.y + j.h - e);
-				this.opts.maxRow && e + k > this.opts.maxRow && (k = Math.max(0, this.opts.maxRow - e)), this._extraDragRow = k;
-			} else this._extraDragRow = 0;
-			if (this._extraDragRow !== V && this._updateContainerHeight(), j.x === P.x && j.y === P.y) return;
-		} else if (k.type === "resize") {
-			if (P.x < 0 || (Utils.updateScrollResize(k, e, N), P.w = Math.round((A.size.width - I) / M), P.h = Math.round((A.size.height - R) / N), j.w === P.w && j.h === P.h) || j._lastTried && j._lastTried.w === P.w && j._lastTried.h === P.h) return;
-			let L = A.position.left + I, z = A.position.top + R;
-			P.x = Math.round(L / M), P.y = Math.round(z / N), F = !0;
-		}
-		j._event = k, j._lastTried = P;
-		let H = {
-			x: A.position.left + I,
-			y: A.position.top + R,
-			w: (A.size ? A.size.width : j.w * M) - I - L,
-			h: (A.size ? A.size.height : j.h * N) - R - z
-		};
-		if (this.engine.moveNodeCheck(j, {
-			...P,
-			cellWidth: M,
-			cellHeight: N,
-			rect: H,
-			resizing: F
-		})) {
-			j._lastUiPosition = A.position, this.engine.cacheRects(M, N, R, L, z, I), delete j._skipDown, F && j.subGrid && j.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
-			let e = k.target;
-			j._sidebarOrig || this._writePosAttr(e, j), this.triggerEvent(k, e);
-		}
-	}
-	triggerEvent(e, k) {
-		let A = this;
-		for (; A.parentGridNode;) A = A.parentGridNode.grid;
-		A._gsEventHandler[e.type] && A._gsEventHandler[e.type](e, k);
-	}
-	_leave(k, A) {
-		A ||= k;
-		let j = A.gridstackNode;
-		if (!j || (A.style.transform = A.style.transformOrigin = null, dd.off(k, "drag"), j._temporaryRemoved)) return;
-		j._temporaryRemoved = !0, this.engine.removeNode(j), j.el = j._isExternal && A ? A : k;
-		let M = j._sidebarOrig;
-		j._isExternal && this.engine.cleanupNode(j), j._sidebarOrig = M, this.opts.removable === !0 && e._itemRemoving(k, !0), k._gridstackNodeOrig ? (k.gridstackNode = k._gridstackNodeOrig, delete k._gridstackNodeOrig) : j._isExternal && this.engine.restoreInitial();
-	}
-};
-GridStack.renderCB = (e, k) => {
-	e && k?.content && (e.textContent = k.content);
-}, GridStack.resizeToContentParent = ".grid-stack-item-content", GridStack.Utils = Utils, GridStack.Engine = GridStackEngine, GridStack.GDRev = "12.4.2";
-var gridstack_min_default = ".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;width:auto;margin:0;position:absolute;z-index:0!important}.grid-stack>.grid-stack-item{width:var(--gs-column-width);height:var(--gs-cell-height);padding:0;position:absolute;top:0;left:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{width:auto;margin:0;position:absolute;overflow:hidden auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{-ms-touch-action:none;touch-action:none;font-size:.1px;display:block;position:absolute}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"none\\\" stroke=\\\"%23666\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\" stroke-width=\\\"2\\\" viewBox=\\\"0 0 20 20\\\"><path d=\\\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\\\"/></svg>\");background-position:50%;background-repeat:no-repeat}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{opacity:.8;box-shadow:1px 4px 6px #0003}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left,top,height,width}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack>.grid-stack-item[gs-x=\"0\"]{left:0}", lockAction = {
-	icon: luzmoLockOutline,
-	label: "Lock",
-	tooltip: "Lock",
-	action: "lock",
-	type: "toggle"
-}, editAction = {
-	icon: luzmoPencil,
-	label: "Edit",
-	tooltip: "Edit",
-	action: "edit",
-	type: "toggle"
-}, editDataAction = {
-	icon: luzmoTable,
-	label: "Edit data",
-	tooltip: "Data",
-	action: "edit-data",
-	type: "toggle"
-}, editOptionsAction = {
-	icon: luzmoCog,
-	label: "Edit options",
-	tooltip: "Options",
-	action: "edit-options",
-	type: "toggle"
-}, editFiltersAction = {
-	icon: luzmoFilterOutline,
-	label: "Edit filters",
-	tooltip: "Filters",
-	action: "edit-filters",
-	type: "toggle"
-}, cloneAction = {
-	icon: luzmoClone,
-	label: "Clone",
-	tooltip: "Clone",
-	action: "clone",
-	type: "button"
-}, deleteAction = {
-	icon: luzmoTrashOutline,
-	label: "Delete",
-	tooltip: "Delete",
-	action: "delete",
-	type: "button"
-};
-const generateActionsMenu = (e) => {
-	if (!e) return;
-	let k = [];
-	return k = structuredClone(e).map((e) => {
-		if (e.type === "group") return e.actions = e.actions ?? [], e.actions = e.actions.map((e) => {
-			if (typeof e == "string" && [
-				"lock",
-				"filters",
-				"edit",
-				"edit-data",
-				"edit-options",
-				"edit-filters",
-				"delete",
-				"clone"
-			].includes(e)) return {
-				delete: { ...deleteAction },
-				filters: { ...editFiltersAction },
-				clone: { ...cloneAction },
-				edit: { ...editAction },
-				"edit-data": { ...editDataAction },
-				"edit-options": { ...editOptionsAction },
-				"edit-filters": { ...editFiltersAction },
-				lock: { ...lockAction }
-			}[e];
-			if (typeof e == "object") return e.icon = e.icon ?? luzmoCircle, e.label = e.label ?? e.action, e.tooltip = e.tooltip ?? e.label ?? e.action, e.type = ["toggle", "button"].includes(e.type ?? "") ? e.type : "button", e;
-		}).filter(Boolean), e;
-	}).filter(Boolean), k;
-}, defaultActionsMenu = () => [{
-	type: "group",
-	actions: [
-		{ ...editDataAction },
-		{ ...editOptionsAction },
-		{ ...cloneAction }
-	]
-}, {
-	type: "group",
-	actions: [{ ...deleteAction }]
-}];
-var grid_item_actions_menu_module_default = ":host{--luzmo-action-button-content-color-default:var(--luzmo-grid-item-action-button-content-color-default,#fff);--luzmo-action-button-content-color-hover:var(--luzmo-grid-item-action-button-content-color-hover,#fff);--luzmo-action-button-content-color-down:var(--luzmo-grid-item-action-button-content-color-down,#fff);--luzmo-action-button-content-color-focus:var(--luzmo-grid-item-action-button-content-color-focus,#fff);--luzmo-action-button-background-color-default:var(--luzmo-grid-item-action-button-background-color-default,#333);--luzmo-action-button-background-color-hover:var(--luzmo-grid-item-action-button-background-color-hover,#444);--luzmo-action-button-background-color-down:var(--luzmo-grid-item-action-button-background-color-down,#555);--luzmo-action-button-background-color-focus:var(--luzmo-grid-item-action-button-background-color-focus,#666);--grid-item-actions-flex-direction:column;display:block}.action-buttons{gap:var(--luzmo-grid-item-action-group-gap,.5rem);flex-direction:var(--luzmo-grid-item-actions-flex-direction,var(--grid-item-actions-flex-direction));outline:none;display:flex}.action-button[selected]{--luzmo-action-button-background-color-default:var(--luzmo-primary);--luzmo-action-button-background-color-hover:var(--luzmo-primary-hover);--luzmo-action-button-background-color-down:var(--luzmo-primary-down);--luzmo-action-button-background-color-focus:var(--luzmo-primary-focus);--luzmo-action-button-content-color-default:var(--luzmo-primary-inverse-color);--luzmo-action-button-content-color-hover:var(--luzmo-primary-inverse-color);--luzmo-action-button-content-color-down:var(--luzmo-primary-inverse-color);--luzmo-action-button-content-color-focus:var(--luzmo-primary-inverse-color)}:host .action-buttons{--luzmo-action-button-content-color-default:var(--luzmo-grid-item-action-button-content-color-default,#fff);--luzmo-action-button-content-color-hover:var(--luzmo-grid-item-action-button-content-color-hover,#fff);--luzmo-action-button-content-color-down:var(--luzmo-grid-item-action-button-content-color-down,#fff);--luzmo-action-button-content-color-focus:var(--luzmo-grid-item-action-button-content-color-focus,#fff);--luzmo-action-button-background-color-default:var(--luzmo-grid-item-action-button-background-color-default,#333);--luzmo-action-button-background-color-hover:var(--luzmo-grid-item-action-button-background-color-hover,#444);--luzmo-action-button-background-color-down:var(--luzmo-grid-item-action-button-background-color-down,#555);--luzmo-action-button-background-color-focus:var(--luzmo-grid-item-action-button-background-color-focus,#666)}.delete-button{--luzmo-action-button-background-color-hover:var(--luzmo-grid-item-delete-button-background-color-hover,var(--luzmo-negative-color));--luzmo-action-button-content-color-hover:var(--luzmo-grid-item-delete-button-content-color-hover,#fff);--luzmo-action-button-background-color-focus:var(--luzmo-grid-item-delete-button-background-color-focus,var(--luzmo-negative-color-focus));--luzmo-action-button-content-color-focus:var(--luzmo-grid-item-delete-button-content-color-focus,#fff);--luzmo-action-button-background-color-down:var(--luzmo-grid-item-delete-button-background-color-down,var(--luzmo-negative-color-down));--luzmo-action-button-content-color-down:var(--luzmo-grid-item-delete-button-content-color-down,#fff)}:host([placement=top-start]),:host([placement=top]),:host([placement=top-end]),:host([placement=bottom-start]),:host([placement=bottom]),:host([placement=bottom-end]){--grid-item-actions-flex-direction:row}", LuzmoGridItemActionsMenu = class extends LocalizedMixin(LuzmoElement) {
-	constructor(...e) {
-		super(...e), this.placement = "right-start", this.actions = defaultActionsMenu();
-	}
-	static get styles() {
-		return [unsafeCSS(grid_item_actions_menu_module_default)];
-	}
-	get isVertical() {
-		return this.placement.includes("left") || this.placement.includes("right");
-	}
-	_dispatchAction(e) {
-		this.dispatchEvent(new CustomEvent("luzmo-grid-item-action", {
-			bubbles: !0,
-			composed: !0,
-			detail: {
-				action: e.action,
-				type: e.type,
-				active: e.active
-			}
-		}));
-	}
-	_handleActionClick(e) {
-		e.type === "toggle" && (e.active = !e.active, this.actions.forEach((k) => {
-			k.actions?.forEach((k) => {
-				e !== k && k.active && (k.active = !1);
-			});
-		})), this._dispatchAction(e), this.requestUpdate();
+		let A = e ? e.gridstackNode : void 0;
+		!A?.grid || e.classList.contains(A.grid.opts.removableOptions.decline) || (k ? A._isAboutToRemove = !0 : delete A._isAboutToRemove, k ? e.classList.add("grid-stack-item-removing") : e.classList.remove("grid-stack-item-removing"));
 	}
-	clearActiveToggles() {
-		this.actions = this.actions.map((e) => ({
-			...e,
-			actions: e.actions?.map((e) => (e.type === "toggle" && (e.active = !1), e)) ?? []
-		}));
+	_setupRemoveDrop() {
+		if (typeof this.opts.removable != "string") return this;
+		let k = document.querySelector(this.opts.removable);
+		return k && !this.opts.staticGrid && !dd.isDroppable(k) && dd.droppable(k, this.opts.removableOptions).on(k, "dropover", (k, A) => e._itemRemoving(A, !0)).on(k, "dropout", (k, A) => e._itemRemoving(A, !1)), this;
 	}
-	focus() {
-		let e = this.shadowRoot?.querySelectorAll("luzmo-action-button[toggles]");
-		e && e[0]?.focus();
+	prepareDragDrop(e, k = !1) {
+		let A = e?.gridstackNode;
+		if (!A) return;
+		let j = A.noMove || this.opts.disableDrag, M = A.noResize || this.opts.disableResize, N = this.opts.staticGrid || j && M;
+		if ((k || N) && (A._initDD && (this._removeDD(e), delete A._initDD), N && e.classList.add("ui-draggable-disabled", "ui-resizable-disabled"), !k)) return this;
+		if (!A._initDD) {
+			let k, j, M = (M, N) => {
+				this.triggerEvent(M, M.target), k = this.cellWidth(), j = this.getCellHeight(!0), this._onStartMoving(e, M, N, A, k, j);
+			}, N = (M, N) => {
+				this._dragOrResize(e, M, N, A, k, j);
+			}, P = (k) => {
+				this.placeholder.remove(), delete this.placeholder.gridstackNode, delete A._moving, delete A._resizing, delete A._event, delete A._lastTried;
+				let j = A.w !== A._orig.w, M = k.target;
+				if (!(!M.gridstackNode || M.gridstackNode.grid !== this)) {
+					if (A.el = M, A._isAboutToRemove) {
+						let j = e.gridstackNode.grid;
+						j._gsEventHandler[k.type] && j._gsEventHandler[k.type](k, M), j.engine.nodes.push(A), j.removeWidget(e, !0, !0);
+					} else Utils.removePositioningStyles(M), A._temporaryRemoved ? (this._writePosAttr(M, A), this.engine.addNode(A)) : this._writePosAttr(M, A), this.triggerEvent(k, M);
+					this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), k.type === "resizestop" && (Number.isInteger(A.sizeToContent) && (A.sizeToContent = A.h), this.resizeToContentCheck(j, A));
+				}
+			};
+			dd.draggable(e, {
+				start: M,
+				stop: P,
+				drag: N
+			}).resizable(e, {
+				start: M,
+				stop: P,
+				resize: N
+			}), A._initDD = !0;
+		}
+		return dd.draggable(e, j ? "disable" : "enable").resizable(e, M ? "disable" : "enable"), this;
 	}
-	_generateActionButton(e) {
-		let k = {
-			Data: msg("Data", { desc: "Grid item action tooltip" }),
-			Options: msg("Options", { desc: "Grid item action tooltip" }),
-			Clone: msg("Clone", { desc: "Grid item action tooltip" }),
-			Delete: msg("Delete", { desc: "Grid item action tooltip" }),
-			Edit: msg("Edit", { desc: "Grid item action tooltip" }),
-			Lock: msg("Lock", { desc: "Grid item action tooltip" }),
-			Filters: msg("Filters", { desc: "Grid item action tooltip" })
+	_onStartMoving(e, k, A, j, M, N) {
+		if (this.engine.cleanNodes().beginUpdate(j), this._writePosAttr(this.placeholder, j), this.el.appendChild(this.placeholder), this.placeholder.gridstackNode = j, j.grid?.el) this.dragTransform = Utils.getValuesFromTransformedElement(e);
+		else if (this.placeholder && this.placeholder.closest(".grid-stack")) {
+			let e = this.placeholder.closest(".grid-stack");
+			this.dragTransform = Utils.getValuesFromTransformedElement(e);
+		} else this.dragTransform = {
+			xScale: 1,
+			xOffset: 0,
+			yScale: 1,
+			yOffset: 0
 		};
-		return html`
-      <luzmo-action-button
-        class="${e.action}-button action-button"
-        .label=${e.label}
-        ?toggles=${e.type === "toggle"}
-        ?selected=${e.type === "toggle" && e.active}
-        @click=${this._handleActionClick.bind(this, e)}
-      >
-        <luzmo-icon slot="icon" .icon=${e.icon} size="s"></luzmo-icon>
-        ${e.tooltip ? html`
-              <luzmo-tooltip
-                self-managed
-                delayed
-                placement=${this.placement?.includes("right") ? "right" : this.placement?.includes("left") ? "left" : this.placement?.includes("bottom") ? "bottom" : this.placement?.includes("top") ? "top" : "right"}
-              >
-                ${k[e.tooltip] ?? e.tooltip}
-              </luzmo-tooltip>
-            ` : ""}
-      </luzmo-action-button>
-    `;
+		if (j.el = this.placeholder, j._lastUiPosition = A.position, j._prevYPix = A.position.top, j._moving = k.type === "dragstart", j._resizing = k.type === "resizestart", delete j._lastTried, k.type === "dropover" && j._temporaryRemoved && (this.engine.addNode(j), j._moving = !0), this.engine.cacheRects(M, N, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft), k.type === "resizestart") {
+			let k = this.getColumn() - j.x, A = (this.opts.maxRow || 2 ** 53 - 1) - j.y;
+			dd.resizable(e, "option", "minWidth", M * Math.min(j.minW || 1, k)).resizable(e, "option", "minHeight", N * Math.min(j.minH || 1, A)).resizable(e, "option", "maxWidth", M * Math.min(j.maxW || 2 ** 53 - 1, k)).resizable(e, "option", "maxWidthMoveLeft", M * Math.min(j.maxW || 2 ** 53 - 1, j.x + j.w)).resizable(e, "option", "maxHeight", N * Math.min(j.maxH || 2 ** 53 - 1, A)).resizable(e, "option", "maxHeightMoveUp", N * Math.min(j.maxH || 2 ** 53 - 1, j.y + j.h));
+		}
 	}
-	_generateActionGroup(e) {
-		let k = e?.actions?.map((e) => this._generateActionButton(e)) ?? [];
-		return k.length > 0 ? html`
-          <luzmo-action-group ?vertical=${this.isVertical} compact
-            >${k}</luzmo-action-group
-          >
-        ` : html`
-          
-        `;
+	_dragOrResize(e, k, A, j, M, N) {
+		let P = { ...j._orig }, F, I = this.opts.marginLeft, L = this.opts.marginRight, R = this.opts.marginTop, z = this.opts.marginBottom, B = Math.round(N * .1), V = Math.round(M * .1);
+		if (I = Math.min(I, V), L = Math.min(L, V), R = Math.min(R, B), z = Math.min(z, B), k.type === "drag") {
+			if (j._temporaryRemoved) return;
+			let k = A.position.top - j._prevYPix;
+			j._prevYPix = A.position.top, this.opts.draggable.scroll !== !1 && Utils.updateScrollPosition(e, A.position, k);
+			let F = A.position.left + (A.position.left > j._lastUiPosition.left ? -L : I), B = A.position.top + (A.position.top > j._lastUiPosition.top ? -z : R);
+			P.x = Math.round(F / M), P.y = Math.round(B / N);
+			let V = this._extraDragRow;
+			if (this.engine.collide(j, P)) {
+				let e = this.getRow(), k = Math.max(0, P.y + j.h - e);
+				this.opts.maxRow && e + k > this.opts.maxRow && (k = Math.max(0, this.opts.maxRow - e)), this._extraDragRow = k;
+			} else this._extraDragRow = 0;
+			if (this._extraDragRow !== V && this._updateContainerHeight(), j.x === P.x && j.y === P.y) return;
+		} else if (k.type === "resize") {
+			if (P.x < 0 || (Utils.updateScrollResize(k, e, N), P.w = Math.round((A.size.width - I) / M), P.h = Math.round((A.size.height - R) / N), j.w === P.w && j.h === P.h) || j._lastTried && j._lastTried.w === P.w && j._lastTried.h === P.h) return;
+			let L = A.position.left + I, z = A.position.top + R;
+			P.x = Math.round(L / M), P.y = Math.round(z / N), F = !0;
+		}
+		j._event = k, j._lastTried = P;
+		let H = {
+			x: A.position.left + I,
+			y: A.position.top + R,
+			w: (A.size ? A.size.width : j.w * M) - I - L,
+			h: (A.size ? A.size.height : j.h * N) - R - z
+		};
+		if (this.engine.moveNodeCheck(j, {
+			...P,
+			cellWidth: M,
+			cellHeight: N,
+			rect: H,
+			resizing: F
+		})) {
+			j._lastUiPosition = A.position, this.engine.cacheRects(M, N, R, L, z, I), delete j._skipDown, F && j.subGrid && j.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
+			let e = k.target;
+			j._sidebarOrig || this._writePosAttr(e, j), this.triggerEvent(k, e);
+		}
 	}
-	render() {
-		return html`
-      <div class="action-buttons" tabindex="0">${this.actions.map((e) => this._generateActionGroup(e))}</div>
-    `;
+	triggerEvent(e, k) {
+		let A = this;
+		for (; A.parentGridNode;) A = A.parentGridNode.grid;
+		A._gsEventHandler[e.type] && A._gsEventHandler[e.type](e, k);
+	}
+	_leave(k, A) {
+		A ||= k;
+		let j = A.gridstackNode;
+		if (!j || (A.style.transform = A.style.transformOrigin = null, dd.off(k, "drag"), j._temporaryRemoved)) return;
+		j._temporaryRemoved = !0, this.engine.removeNode(j), j.el = j._isExternal && A ? A : k;
+		let M = j._sidebarOrig;
+		j._isExternal && this.engine.cleanupNode(j), j._sidebarOrig = M, this.opts.removable === !0 && e._itemRemoving(k, !0), k._gridstackNodeOrig ? (k.gridstackNode = k._gridstackNodeOrig, delete k._gridstackNodeOrig) : j._isExternal && this.engine.restoreInitial();
 	}
 };
-__decorate([property({
-	type: String,
-	reflect: !0
-})], LuzmoGridItemActionsMenu.prototype, "placement", void 0), __decorate([property({ type: Array })], LuzmoGridItemActionsMenu.prototype, "actions", void 0), LuzmoGridItemActionsMenu = __decorate([localized()], LuzmoGridItemActionsMenu);
-var grid_module_default = ":host{width:100%;display:block}.grid-stack{width:100%;min-height:var(--luzmo-grid-min-height);background:var(--luzmo-grid-background,var(--grid-background,var(--luzmo-background-color)));position:relative}.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-stack-item-content,.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-item-actions-popover{opacity:.5}.grid-stack .grid-stack-item[active]>.ui-resizable-handle,.grid-stack .grid-stack-item[active].ui-resizable-autohide>.ui-resizable-handle{display:block}.grid-stack .grid-stack-item.ui-resizable-resizing,.grid-stack .grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{opacity:var(--luzmo-grid-item-resizing-opacity,.8)!important}.grid-item-drag-handle{color:var(--luzmo-grid-item-drag-handle-color,#000);top:var(--luzmo-grid-item-drag-handle-position-top,0);left:var(--luzmo-grid-item-drag-handle-position-left,0);right:var(--luzmo-grid-item-drag-handle-position-right,auto);bottom:var(--luzmo-grid-item-drag-handle-position-bottom,auto);padding:var(--luzmo-grid-item-drag-handle-padding,.5rem);z-index:var(--luzmo-grid-item-drag-handle-z-index,3);cursor:var(--luzmo-grid-item-drag-handle-cursor,move);position:absolute}.grid-stack[dark-background] .grid-item-drag-handle{color:var(--luzmo-grid-item-drag-handle-color,#fff)}.grid-stack .grid-stack-item .grid-stack-item-content{border-radius:var(--luzmo-grid-item-border-radius,var(--grid-item-border-radius,4px));background:var(--luzmo-grid-item-background,var(--grid-item-background,transparent));box-shadow:var(--luzmo-grid-item-box-shadow,var(--grid-item-box-shadow,none));border-style:var(--luzmo-grid-item-border-style,none);border-color:var(--luzmo-grid-item-border-color,transparent);-webkit-backdrop-filter:var(--luzmo-grid-item-backdrop-filter,none);backdrop-filter:var(--luzmo-grid-item-backdrop-filter,none);overflow:hidden}.grid-stack .grid-stack-item:not(.has-luzmo-viz-item) .grid-stack-item-content{border-style:var(--luzmo-grid-item-border-style,var(--grid-item-border-style,none));border-color:var(--luzmo-grid-item-border-color,var(--grid-item-border-color,transparent));border-width:var(--luzmo-grid-item-border-width,var(--grid-item-border-width,0));border-top-width:var(--luzmo-grid-item-border-top-width,var(--grid-item-border-top-width,0));border-right-width:var(--luzmo-grid-item-border-right-width,var(--grid-item-border-right-width,0));border-bottom-width:var(--luzmo-grid-item-border-bottom-width,var(--grid-item-border-bottom-width,0));border-left-width:var(--luzmo-grid-item-border-left-width,var(--grid-item-border-left-width,0))}.grid-stack .grid-stack-placeholder>.placeholder-content{border-radius:var(--grid-item-border-radius,4px)}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{z-index:var(--luzmo-grid-resize-handle-z-index,100);background:var(--luzmo-grid-resize-handle-background,#fff);border-radius:var(--luzmo-grid-resize-handle-border-radius,3px);opacity:var(--luzmo-grid-resize-handle-opacity,0);transition:var(--luzmo-grid-resize-handle-transition,opacity .2s ease);box-shadow:0 0 6px #0000001a,0 0 2px #000000bf;display:block!important;position:absolute!important}:host .grid-stack[dark-background]>.grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack[dark-background]>.grid-stack-item:hover>.ui-resizable-handle{background:var(--luzmo-grid-resize-handle-background,#333);box-shadow:0 0 6px #ffffff1a,0 0 2px #ffffffbf}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{opacity:var(--luzmo-grid-resize-handle-opacity-hover,1)}:host .grid-stack-item>.ui-resizable-handle:hover{opacity:var(--luzmo-grid-resize-handle-opacity-active,1);background:var(--luzmo-grid-resize-handle-background-hover,var(--luzmo-background-color-highlight))}:host .grid-stack-item>.ui-resizable-n,:host .grid-stack-item>.ui-resizable-s{height:var(--luzmo-grid-resize-handle-edge-size,8px);width:var(--luzmo-grid-resize-handle-side-size,18px);left:calc(50% - var(--luzmo-grid-resize-handle-side-size,18px)/2)}:host .grid-stack-item>.ui-resizable-n{cursor:n-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset,-4px) + var(--gs-item-margin-top,0px))}:host .grid-stack-item>.ui-resizable-s{cursor:s-resize;bottom:calc(var(--luzmo-grid-resize-handle-edge-offset,-4px) + var(--gs-item-margin-bottom,0px))}:host .grid-stack-item>.ui-resizable-e,:host .grid-stack-item>.ui-resizable-w{width:var(--luzmo-grid-resize-handle-edge-size,8px);height:var(--luzmo-grid-resize-handle-side-size,18px);top:calc(50% - var(--luzmo-grid-resize-handle-side-size,18px)/2)}:host .grid-stack-item>.ui-resizable-e{cursor:e-resize;right:calc(var(--luzmo-grid-resize-handle-edge-offset,-4px) + var(--gs-item-margin-right,0px))}:host .grid-stack-item>.ui-resizable-w{cursor:w-resize;left:calc(var(--luzmo-grid-resize-handle-edge-offset,-4px) + var(--gs-item-margin-left,0px))}:host .grid-stack-item>.ui-resizable-ne,:host .grid-stack-item>.ui-resizable-nw,:host .grid-stack-item>.ui-resizable-se,:host .grid-stack-item>.ui-resizable-sw{width:var(--luzmo-grid-resize-handle-corner-size,12px);height:var(--luzmo-grid-resize-handle-corner-size,12px);background-image:none;transform:none}:host .grid-stack-item>.ui-resizable-ne{cursor:ne-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset,-6px) + var(--gs-item-margin-top,0px));right:calc(var(--luzmo-grid-resize-handle-edge-offset,-6px) + var(--gs-item-margin-right,0px))}:host .grid-stack-item>.ui-resizable-nw{cursor:nw-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset,-6px) + var(--gs-item-margin-top,0px));left:calc(var(--luzmo-grid-resize-handle-edge-offset,-6px) + var(--gs-item-margin-left,0px))}:host .grid-stack-item>.ui-resizable-se{cursor:se-resize;right:calc(var(--luzmo-grid-resize-handle-corner-offset,-4px) + var(--gs-item-margin-right,0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset,-4px) + var(--gs-item-margin-bottom,0px))}:host .grid-stack-item>.ui-resizable-sw{cursor:sw-resize;left:calc(var(--luzmo-grid-resize-handle-corner-offset,-4px) + var(--gs-item-margin-left,0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset,-4px) + var(--gs-item-margin-bottom,0px))}:host .grid-stack-item>.ui-resizable-resizing .ui-resizable-handle{background:var(--luzmo-grid-resize-handle-background-active,var(--luzmo-background-color-highlight));opacity:1!important}.grid-item-actions-popover{z-index:2;background:0 0;border:none;outline:none;margin:0;padding:0;position:absolute;overflow:visible}luzmo-grid-item-actions-menu{padding:var(--luzmo-grid-item-actions-padding,var(--grid-item-actions-padding))}.dimensions-hint-popover{font-size:var(--luzmo-grid-item-dimensions-hint-font-size,var(--luzmo-font-size-xs,10px));font-family:var(--luzmo-grid-item-dimensions-hint-font-family,var(--luzmo-font-family,inherit));border-width:var(--luzmo-grid-item-dimensions-hint-border-width,var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-grid-item-dimensions-hint-border-color,var(--luzmo-border-color));border-radius:var(--luzmo-grid-item-dimensions-hint-border-radius,var(--luzmo-border-radius));padding:var(--luzmo-grid-item-dimensions-hint-padding,var(--luzmo-spacing-1)var(--luzmo-spacing-2));z-index:3;background:var(--luzmo-grid-item-dimensions-hint-background,var(--luzmo-background-color));color:var(--luzmo-grid-item-dimensions-hint-color,var(--luzmo-font-color));pointer-events:none;outline:none;margin:0;position:absolute;overflow:visible}luzmo-grid-item-actions-menu{--grid-item-actions-padding:0 .75rem}luzmo-grid-item-actions-menu[placement=top-start],luzmo-grid-item-actions-menu[placement=top],luzmo-grid-item-actions-menu[placement=top-end],luzmo-grid-item-actions-menu[placement=bottom-start],luzmo-grid-item-actions-menu[placement=bottom],luzmo-grid-item-actions-menu[placement=bottom-end]{--grid-item-actions-padding:.75rem 0}.grid-stack-item:focus-visible{outline:none}.grid-stack-item:focus-visible .grid-stack-item-content:after{content:\"\";border:var(--luzmo-indicator-width)solid var(--luzmo-indicator-color,var(--luzmo-primary));box-sizing:border-box;border-radius:var(--luzmo-grid-item-border-radius,var(--grid-item-border-radius,4px));z-index:2;width:100%;height:100%;position:absolute;top:0;left:0}", getRGBA = (e, k) => k >= 1 ? `rgba(${e.r},${e.g},${e.b},1)` : k <= 0 ? `rgba(${e.r},${e.g},${e.b},0)` : `rgba(${e.r},${e.g},${e.b},${k})`, LuzmoGrid = class extends LuzmoElement {
+GridStack.renderCB = (e, k) => {
+	e && k?.content && (e.textContent = k.content);
+}, GridStack.resizeToContentParent = ".grid-stack-item-content", GridStack.Utils = Utils, GridStack.Engine = GridStackEngine, GridStack.GDRev = "12.4.2";
+const initializeGridStack = ({ gridElement: e, gridItemElements: k, items: A, columns: j, rowHeight: M, viewMode: N, fullTheme: P, onCreateOrUpdateDimensionsHint: F, onRemoveDimensionsHint: I, onChange: L }) => {
+	let [R, z] = getGridHalfMargins(P), B = {
+		column: j,
+		cellHeight: M,
+		marginTop: R,
+		marginLeft: z,
+		marginRight: z,
+		marginBottom: R,
+		animate: !0,
+		auto: !1,
+		float: !1,
+		removable: !1,
+		acceptWidgets: !0,
+		disableDrag: N,
+		disableResize: N,
+		minRow: 1,
+		resizable: { handles: [
+			"n",
+			"ne",
+			"e",
+			"se",
+			"s",
+			"sw",
+			"w",
+			"nw"
+		].join(", ") },
+		handle: ".grid-item-drag-handle"
+	}, V = GridStack.init(B, e);
+	return V.batchUpdate(), k.forEach((e) => {
+		let k = e.getAttribute("luzmo-grid-item-id"), j = buildGridWidgetOptions(A.find((e) => e.id === k), k ?? void 0);
+		V.makeWidget(e, j);
+	}), V.batchUpdate(!1), V.on("resizestart", (e, k) => {
+		F(k, k.getAttribute("gs-w") ?? "", k.getAttribute("gs-h") ?? "");
+	}), V.on("resize", (e, k) => {
+		F(k, k.getAttribute("gs-w") ?? "", k.getAttribute("gs-h") ?? "");
+	}), V.on("resizestop", (e, k) => {
+		I(k);
+	}), V.on("change", (e, k) => {
+		L(k);
+	}), V;
+}, applyGridStackChanges = (e, k) => {
+	k.forEach((k) => {
+		if (!k?.id) return;
+		let A = e.findIndex((e) => e.id === k.id);
+		A !== -1 && (e[A] = {
+			...e[A],
+			position: {
+				sizeX: k.w ?? 1,
+				sizeY: k.h ?? 1,
+				row: k.y ?? 0,
+				col: k.x ?? 0
+			}
+		});
+	});
+}, createOrUpdateDimensionsHint = ({ element: e, numberOfColumns: k, numberOfRows: A, offsetHint: j }) => {
+	let M = e.querySelector(".dimensions-hint-popover");
+	if (M) {
+		M.style.display = k.length > 0 && A.length > 0 ? "block" : "none", M.textContent = `${k} × ${A}`;
+		return;
+	}
+	let N = document.createElement("div");
+	N.className = "dimensions-hint-popover", N.setAttribute("popover", "hint"), N.style.display = k.length > 0 && A.length > 0 ? "block" : "none", N.textContent = `${k} × ${A}`, e.append(N), setPopoverCleanup(N, autoUpdate(e, N, async () => {
+		let { x: k, y: A } = await computePosition(e, N, {
+			placement: "bottom",
+			middleware: [offset(j), flip()]
+		});
+		N.style.left = `${k}px`, N.style.top = `${A}px`;
+	})), N.matches(":popover-open") || N.showPopover();
+}, removeDimensionsHint = (e) => {
+	let k = e.querySelector(".dimensions-hint-popover");
+	k && (clearPopoverCleanup(k), k.matches(":popover-open") && k.hidePopover(), k.remove());
+}, syncGridItems = ({ initialized: e, grid: k, hasItemsChanged: A, hasItemAdded: j, gridItemElements: M, items: N, gridElement: P }) => {
+	if (!e || !k || !A && !j) return j;
+	let F = M;
+	return j && (M.forEach((e) => {
+		e.hasAttribute("orphan") && e.remove();
+	}), F = P.querySelectorAll(".luzmo-grid-item")), k.setAnimation(!1), k.batchUpdate(), k.removeAll(!1), N.forEach((e) => {
+		let A = findGridItemElementById(F, e.id);
+		A && k.makeWidget(A, buildGridWidgetOptions(e, e.id));
+	}), k.batchUpdate(!1), k.setAnimation(!0), !1;
+}, applyViewModeChange = ({ initialized: e, grid: k, hasViewModeChanged: A, viewMode: j, previousViewMode: M, activeItemElement: N, gridElement: P, cleanupActiveItem: F }) => {
+	if (!e || !k || !A || j === M) return N;
+	if (j) {
+		if (k.disable(), N) {
+			F(N), P.removeAttribute("has-active-item");
+			return;
+		}
+		return N;
+	}
+	return k.enable(), N;
+};
+var LuzmoGrid = class extends LuzmoElement {
 	constructor(...e) {
 		super(...e), this.appServer = "https://app.luzmo.com/", this.apiHost = "https://api.luzmo.com", this.language = "en", this.contentLanguage = "en", this.columns = 48, this.rowHeight = 16, this.viewMode = !1, this.placementItemActionsMenu = "right-start", this.items = [], this.renderers = {}, this._initialized = !1, this.defaultRenderer = (e) => html`
       <div class="grid-item-content">
@@ -4344,306 +4913,209 @@ var grid_module_default = ":host{width:100%;display:block}.grid-stack{width:100%
       </div>
     `, this._hasItemAdded = !1, this._handleMouseout = (e) => {
 			if (this.viewMode) return;
-			let k = e.target.closest(".grid-stack-item");
-			k && (e.relatedTarget?.closest(".grid-item-actions-popover") || k.hasAttribute("active") || this._removeItemActionsMenuPopover(k));
+			let k = getGridItemElementFromTarget(e.target);
+			k && shouldRemovePopoverOnMouseout({
+				event: e,
+				gridItem: k
+			}) && this._removeItemActionsMenuPopover(k);
 		}, this._handleKeyDown = (e) => {
-			if (!this.viewMode) {
-				if (e.key === "Delete" && this._focusedItemElement) this._handleDeleteItem(new Event("delete"));
-				else if (e.key === "Escape" && this._focusedItemElement) this._focusedItemElement.removeAttribute("focused"), this._removeItemActionsMenuPopover(this._focusedItemElement), this._focusedItemElement = void 0, this._gridElement.focus();
-				else if (e.key === "Enter" && this._focusedItemElement) e.preventDefault(), e.stopPropagation(), this._activeItemElement &&= (this._activeItemElement.removeAttribute("active"), this._gridElement.removeAttribute("has-active-item"), this._removeItemActionsMenuPopover(this._activeItemElement), void 0), this._gridElement.querySelectorAll(".grid-stack-item").forEach((e) => {
-					e !== this._focusedItemElement && this._removeItemActionsMenuPopover(e);
-				}), this._createItemActionsMenuPopover(this._focusedItemElement), requestAnimationFrame(() => {
-					let e = this._focusedItemElement?.querySelector("luzmo-grid-item-actions-menu");
-					e && e.focus();
-				});
-				else if (this._focusedItemElement && this._grid && [
-					"ArrowLeft",
-					"ArrowRight",
-					"ArrowUp",
-					"ArrowDown"
-				].includes(e.key)) {
-					e.preventDefault(), e.stopPropagation();
-					let k = this._focusedItemElement.gridstackNode;
-					if (!k) return;
-					let A = this.columns ?? 48, j = {
-						ArrowLeft: {
-							move: { x: k.x - 1 },
-							resize: {
-								x: k.x - 1,
-								w: k.w + 1
-							},
-							shrink: { w: k.w - 1 },
-							canMove: k.x > 0,
-							canResize: k.x > 0,
-							canShrink: k.w > 1
-						},
-						ArrowRight: {
-							move: { x: k.x + 1 },
-							resize: { w: k.w + 1 },
-							shrink: {
-								x: k.x + 1,
-								w: k.w - 1
-							},
-							canMove: k.x < A - k.w,
-							canResize: k.x + k.w < A,
-							canShrink: k.w > 1
-						},
-						ArrowUp: {
-							move: { y: k.y - 1 },
-							resize: {
-								y: k.y - 1,
-								h: k.h + 1
-							},
-							shrink: { h: k.h - 1 },
-							canMove: k.y > 0,
-							canResize: k.y > 0,
-							canShrink: k.h > 1
-						},
-						ArrowDown: {
-							move: { y: k.y + 1 },
-							resize: { h: k.h + 1 },
-							shrink: {
-								y: k.y + 1,
-								h: k.h - 1
-							},
-							canMove: !0,
-							canResize: !0,
-							canShrink: k.h > 1
-						}
-					}[e.key], M = null;
-					e.shiftKey && j.canResize ? M = j.resize : (e.ctrlKey || e.metaKey) && j.canShrink ? M = j.shrink : j.canMove && (M = j.move), M && this._grid.update(this._focusedItemElement, M);
-				}
-			}
+			let k = handleGridKeyDown({
+				event: e,
+				viewMode: this.viewMode,
+				focusedItemElement: this._focusedItemElement,
+				activeItemElement: this._activeItemElement,
+				gridElement: this._gridElement,
+				grid: this._grid,
+				columns: this.columns ?? 48,
+				handleDeleteItem: this._handleDeleteItem,
+				removeItemActionsMenuPopover: this._removeItemActionsMenuPopover.bind(this),
+				createItemActionsMenuPopover: this._createItemActionsMenuPopover.bind(this)
+			});
+			this._focusedItemElement = k.focusedItemElement, this._activeItemElement = k.activeItemElement;
 		}, this._handleFocus = (e) => {
-			let k = e.target.closest(".grid-stack-item");
-			k && (this._focusedItemElement && this._focusedItemElement !== k && (this._focusedItemElement.removeAttribute("focused"), this._removeItemActionsMenuPopover(this._focusedItemElement)), this._focusedItemElement = k, k.setAttribute("focused", "true"));
+			this._focusedItemElement = applyGridItemFocus({
+				event: e,
+				focusedItemElement: this._focusedItemElement,
+				removeItemActionsMenuPopover: this._removeItemActionsMenuPopover.bind(this)
+			});
 		}, this._handleBlur = (e) => {
-			this._focusedItemElement && (e.relatedTarget?.closest("luzmo-grid-item-actions-menu") || (this._focusedItemElement.removeAttribute("focused"), this._removeItemActionsMenuPopover(this._focusedItemElement), this._focusedItemElement = void 0, this._gridElement.focus()));
+			let k = clearGridItemFocus({
+				event: e,
+				focusedItemElement: this._focusedItemElement,
+				removeItemActionsMenuPopover: this._removeItemActionsMenuPopover.bind(this)
+			});
+			this._focusedItemElement = k.focusedItemElement, k.shouldFocusGrid && this._gridElement.focus();
 		}, this._handleGridClick = (e) => {
-			let k = e.composedPath();
-			if (!k.includes(this._gridElement) && !k.includes(this)) return;
-			let A = this._gridElement.querySelector(".grid-stack-item[active]");
-			if (!A || k.includes(A)) return;
-			let j = A.querySelector(".grid-item-actions-popover");
-			if (j && k.includes(j)) return;
-			let M = this._activeItemActionToggle, N = A.getAttribute("gs-id"), P = this.items.find((e) => e.id === N);
-			this._cleanupActiveItem(A), M && N && this._dispatchItemActionEvent(M, "toggle", !1, A, N, P), this._activeItemActionToggle = void 0;
+			this._activeItemActionToggle = handleGridClick({
+				event: e,
+				gridElement: this._gridElement,
+				hostElement: this,
+				items: this.items,
+				activeItemActionToggle: this._activeItemActionToggle,
+				cleanupActiveItem: this._cleanupActiveItem.bind(this),
+				dispatchItemActionEvent: this._dispatchItemActionEvent.bind(this)
+			}).activeItemActionToggle;
 		}, this._handleAction = (e) => {
-			e.stopPropagation();
-			let k = e.detail, A = e.target?.closest(".grid-stack-item");
-			if (!A) return;
-			let j = A.getAttribute("gs-id"), M = this.items.find((e) => e.id === j);
-			if (k.type === "toggle" && k.action === this._activeItemActionToggle && A === this._activeItemElement) {
-				this._activeItemElement = void 0, this._activeItemActionToggle = void 0, this._gridElement?.removeAttribute("has-active-item"), A.removeAttribute("active"), this._cleanupActiveItem(A), j && this._dispatchItemActionEvent(k.action, k.type, !1, A, j, M);
-				return;
-			}
-			["delete", "clone"].includes(k.action) || (this._gridElement.querySelectorAll(".grid-stack-item").forEach((e) => {
-				e !== A && this._cleanupActiveItem(e);
-			}), k.type === "toggle" && (this._activeItemElement = A, this._activeItemActionToggle = k.action, this._gridElement.setAttribute("has-active-item", "true"), A.setAttribute("active", "true"), this._createItemActionsMenuPopover(A, k.action)), j && this._dispatchItemActionEvent(k.action, k.type, k.active, A, j, M)), k.action === "delete" ? (this._handleDeleteItem(e), j && this._dispatchItemActionEvent(k.action, k.type, k.active, A, j, M, j)) : k.action === "clone" && this._handleCloneItem(e);
+			let k = handleGridAction({
+				event: e,
+				gridElement: this._gridElement,
+				items: this.items,
+				state: {
+					activeItemElement: this._activeItemElement,
+					activeItemActionToggle: this._activeItemActionToggle
+				},
+				cleanupActiveItem: this._cleanupActiveItem.bind(this),
+				dispatchItemActionEvent: this._dispatchItemActionEvent.bind(this),
+				handleDeleteItem: this._handleDeleteItem,
+				handleCloneItem: this._handleCloneItem,
+				createItemActionsMenuPopover: this._createItemActionsMenuPopover.bind(this)
+			});
+			this._activeItemElement = k.activeItemElement, this._activeItemActionToggle = k.activeItemActionToggle;
 		}, this._handleDeleteItem = (e) => {
-			let k = e.target?.closest(".grid-stack-item") || this._focusedItemElement;
+			let k = resolveGridItemForDelete(e, this._focusedItemElement);
 			k && this.removeGridItemById(k.getAttribute("gs-id") || "");
 		}, this._handleCloneItem = (e) => {
-			let k = e.target.closest(".grid-stack-item");
-			if (!k || !this._grid) return;
-			let A = k.getAttribute("gs-id");
-			if (!A) return;
-			let j = this.items.find((e) => e.id === A);
-			if (!j) return;
-			let M = v4_default(), N = {
-				...structuredClone(j),
-				id: M
-			}, P = this.addGridItem(N), F = e.detail;
-			this._dispatchItemActionEvent("clone", F?.type ?? "button", F?.active ?? !1, P, M, N, void 0, k);
+			handleCloneItem({
+				event: e,
+				hasGrid: !!this._grid,
+				items: this.items,
+				createId: v4_default,
+				addGridItem: this.addGridItem.bind(this),
+				dispatchItemActionEvent: this._dispatchItemActionEvent.bind(this)
+			});
 		};
 	}
 	static get styles() {
 		return [unsafeCSS(gridstack_min_default), unsafeCSS(grid_module_default)];
 	}
 	async _loadTheme(e) {
-		e?.type === "custom" ? this._fullTheme = structuredClone(e) : e?.id && systemThemeIds.includes(e.id) && this._fullTheme?.id !== e.id ? (this._fullTheme = await getTheme(e.id), this._fullTheme.id = e.id) : e?.id && this._fullTheme?.id !== e.id || !e && this._fullTheme || (this._fullTheme = await getTheme("default")), this._initialized && this._updateThemeProperties(), !this._initialized && this._gridElement && await requestAnimationFrame(() => {
-			this._initializeGrid();
-		}), this._grid && this._grid?.margin([(this.theme?.margins?.[0] ?? 16) / 2, (this.theme?.margins?.[1] ?? 16) / 2].join(" ")), this.requestUpdate();
+		let k = this._initialized;
+		if (this._fullTheme = await resolveGridTheme({
+			theme: e,
+			currentTheme: this._fullTheme
+		}), this._initialized && applyThemeProperties(this.style, this._fullTheme), !this._initialized && this._gridElement && await new Promise((e) => {
+			requestAnimationFrame(() => {
+				this._initializeGrid(), e();
+			});
+		}), this._grid) {
+			let [e, k] = getGridHalfMargins(this.theme);
+			this._grid.margin([e, k].join(" "));
+		}
+		k && this.requestUpdate();
 	}
 	firstUpdated() {
-		document.addEventListener("click", this._handleGridClick), this.addEventListener("keydown", this._handleKeyDown), this._loadTheme(this.theme);
+		document.addEventListener("click", this._handleGridClick), this.addEventListener("keydown", this._handleKeyDown);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this._cleanup(), document.removeEventListener("click", this._handleGridClick), this.removeEventListener("keydown", this._handleKeyDown);
 	}
 	willUpdate(e) {
-		super.willUpdate(e), e.has("_initialized") && (this._updateThemeProperties(), this._initialized && this._grid && this._fullTheme?.margins && this._grid?.margin([(this._fullTheme?.margins?.[0] ?? 16) / 2, (this._fullTheme?.margins?.[1] ?? 16) / 2].join(" ")));
+		if (super.willUpdate(e), e.has("_initialized") && (applyThemeProperties(this.style, this._fullTheme), this._initialized && this._grid && this._fullTheme?.margins)) {
+			let [e, k] = getGridHalfMargins(this._fullTheme);
+			this._grid.margin([e, k].join(" "));
+		}
 	}
 	updated(e) {
 		super.updated(e);
 		let k = e.has("contentLanguage"), A = e.has("viewMode"), j = e.has("items"), M = e.has("theme");
-		this.items.forEach((e) => {
-			e.id = e.id ?? v4_default(), e.canFilter = e.canFilter ?? "all";
-		}), this._initialized && this._grid && (j || this._hasItemAdded) && (this._hasItemAdded && this._gridItemElements.forEach((e) => {
-			e.hasAttribute("orphan") && e.remove();
-		}), this._hasItemAdded = !1, this._grid?.setAnimation(!1), this._grid?.batchUpdate(), this._grid?.removeAll(!1), this.items.forEach((e) => {
-			let k = [...this._gridItemElements].find((k) => k.getAttribute("luzmo-grid-item-id") === e.id);
-			k && this._grid?.makeWidget(k, {
-				x: e?.position?.col ?? 0,
-				y: e?.position?.row ?? 0,
-				w: e?.position?.sizeX ?? 1,
-				h: e?.position?.sizeY ?? 1,
-				id: e.id
-			});
-		}), this._grid?.batchUpdate(!1), this._grid?.setAnimation(!0)), k && this._updateLuzmoVizItemsLanguage(), this._initialized && this._grid && A && this.viewMode !== e.get("viewMode") && (this.viewMode ? (this._grid.disable(), this._activeItemElement && (this._cleanupActiveItem(this._activeItemElement), this._activeItemElement = void 0, this._gridElement.removeAttribute("has-active-item"))) : this._grid.enable()), M && this._loadTheme(this.theme);
-	}
-	_updateLuzmoVizItemsLanguage() {
-		this._gridItemElements.forEach((e) => {
-			let k = e.querySelector("luzmo-embed-viz-item");
-			k && (k.options = {
-				...k.options,
-				locale: this.contentLanguage
-			});
-		});
+		normalizeGridItems(this.items, v4_default), this._hasItemAdded = syncGridItems({
+			initialized: this._initialized,
+			grid: this._grid,
+			hasItemsChanged: j,
+			hasItemAdded: this._hasItemAdded,
+			gridItemElements: this._gridItemElements,
+			items: this.items,
+			gridElement: this._gridElement
+		}), k && updateLuzmoVizItemsLanguage(this._gridItemElements, this.contentLanguage), this._activeItemElement = applyViewModeChange({
+			initialized: this._initialized,
+			grid: this._grid,
+			hasViewModeChanged: A,
+			viewMode: this.viewMode,
+			previousViewMode: e.get("viewMode"),
+			activeItemElement: this._activeItemElement,
+			gridElement: this._gridElement,
+			cleanupActiveItem: this._cleanupActiveItem.bind(this)
+		}), (M || !this._fullTheme && !this._initialized) && this._loadTheme(this.theme);
 	}
 	_handleMouseover(e) {
 		if (this.viewMode) return;
-		let k = e.target.closest(".grid-stack-item");
+		let k = getGridItemElementFromTarget(e.target);
 		k && this._createItemActionsMenuPopover(k);
 	}
 	_cleanupActiveItem(e) {
-		e.removeAttribute("active"), this._activeItemElement === e && (this._activeItemElement = void 0, this._gridElement.removeAttribute("has-active-item")), this._removeItemActionsMenuPopover(e);
+		this._activeItemElement = cleanupActiveGridItem({
+			item: e,
+			activeItemElement: this._activeItemElement,
+			gridElement: this._gridElement,
+			removeItemActionsMenuPopover: this._removeItemActionsMenuPopover.bind(this)
+		});
 	}
 	_dispatchItemActionEvent(e, k, A, j, M, N, P, F) {
-		this.dispatchEvent(new CustomEvent("luzmo-grid-item-action", {
-			detail: {
-				action: e,
-				actionType: k,
-				active: A,
-				items: this.items,
-				element: j,
-				id: M,
-				type: N?.type,
-				slots: N?.slots,
-				options: N?.options,
-				filters: N?.filters ?? [],
-				...P && { deletedId: P },
-				...F && { originalElement: F }
-			},
-			bubbles: !0,
-			composed: !0,
-			cancelable: !0
-		}));
+		dispatchGridItemActionEvent({
+			target: this,
+			action: e,
+			actionType: k,
+			active: A,
+			items: this.items,
+			element: j,
+			itemId: M,
+			item: N,
+			deletedId: P,
+			originalElement: F
+		});
 	}
 	_cleanup() {
 		for (let e of this._gridItemElements) this._cleanupActiveItem(e);
 		this._grid &&= (this._grid.destroy(), void 0), this._initialized = !1;
 	}
 	_initializeGrid() {
-		if (this._initialized || !this._gridElement) return;
-		let e = {
-			column: this.columns ?? 48,
-			cellHeight: this.rowHeight ?? 16,
-			marginTop: (this._fullTheme?.margins?.[0] ?? 16) / 2,
-			marginLeft: (this._fullTheme?.margins?.[1] ?? 16) / 2,
-			marginRight: (this._fullTheme?.margins?.[1] ?? 16) / 2,
-			marginBottom: (this._fullTheme?.margins?.[0] ?? 16) / 2,
-			animate: !0,
-			auto: !1,
-			float: !1,
-			removable: !1,
-			acceptWidgets: !0,
-			disableDrag: this.viewMode,
-			disableResize: this.viewMode,
-			minRow: 1,
-			resizable: { handles: [
-				"n",
-				"ne",
-				"e",
-				"se",
-				"s",
-				"sw",
-				"w",
-				"nw"
-			].join(", ") },
-			handle: ".grid-item-drag-handle"
-		};
-		this._grid = GridStack.init(e, this._gridElement), this._grid.batchUpdate(), this._gridItemElements.forEach((e) => {
-			let k = e.getAttribute("luzmo-grid-item-id"), A = this.items.find((e) => e.id === k), j = {
-				id: k,
-				x: A?.position?.col ?? 0,
-				y: A?.position?.row ?? 0,
-				w: A?.position?.sizeX ?? 1,
-				h: A?.position?.sizeY ?? 1
-			};
-			this._grid?.makeWidget(e, j);
-		}), this._grid.batchUpdate(!1), this._initialized = !0, this._grid.on("resizestart", (e, k) => {
-			let A = k.getAttribute("gs-w") ?? "", j = k.getAttribute("gs-h") ?? "";
-			this._createOrUpdateDimensionsHint(k, A, j);
-		}), this._grid.on("resize", (e, k) => {
-			let A = k.getAttribute("gs-w") ?? "", j = k.getAttribute("gs-h") ?? "";
-			this._createOrUpdateDimensionsHint(k, A, j);
-		}), this._grid.on("resizestop", (e, k) => {
-			this._removeDimensionsHint(k);
-		}), this._grid.on("change", (e, k) => {
-			k.forEach((e) => {
-				if (!e?.id) return;
-				let k = this.items.findIndex((k) => k.id === e.id);
-				k !== -1 && (this.items[k] = {
-					...this.items[k],
-					position: {
-						sizeX: e.w ?? 1,
-						sizeY: e.h ?? 1,
-						row: e.y ?? 0,
-						col: e.x ?? 0
+		this._initialized || !this._gridElement || (this._grid = initializeGridStack({
+			gridElement: this._gridElement,
+			gridItemElements: this._gridItemElements,
+			items: this.items,
+			columns: this.columns ?? 48,
+			rowHeight: this.rowHeight ?? 16,
+			viewMode: this.viewMode,
+			fullTheme: this._fullTheme,
+			onCreateOrUpdateDimensionsHint: this._createOrUpdateDimensionsHint.bind(this),
+			onRemoveDimensionsHint: this._removeDimensionsHint.bind(this),
+			onChange: (e) => {
+				applyGridStackChanges(this.items, e), dispatchGridLifecycleEvent({
+					target: this,
+					eventName: "luzmo-grid-changed",
+					detail: {
+						element: this._gridElement,
+						grid: this._grid,
+						items: this.items
 					}
 				});
-			}), this.dispatchEvent(new CustomEvent("luzmo-grid-changed", {
-				detail: {
-					element: this._gridElement,
-					grid: this._grid,
-					items: this.items
-				},
-				bubbles: !0,
-				composed: !0
-			}));
-		}), this.dispatchEvent(new CustomEvent("luzmo-grid-ready", {
+			}
+		}), this._initialized = !0, dispatchGridLifecycleEvent({
+			target: this,
+			eventName: "luzmo-grid-ready",
 			detail: {
 				element: this._gridElement,
 				grid: this._grid,
 				items: this.items
-			},
-			bubbles: !0,
-			composed: !0
+			}
 		}));
 	}
 	_createOrUpdateDimensionsHint(e, k, A) {
-		let j = e.querySelector(".dimensions-hint-popover");
-		if (j) {
-			j.style.display = k.length > 0 && A.length > 0 ? "block" : "none", j.textContent = `${k} × ${A}`;
-			return;
-		}
-		let M = document.createElement("div");
-		M.className = "dimensions-hint-popover", M.setAttribute("popover", "hint"), M.style.display = k.length > 0 && A.length > 0 ? "block" : "none", M.textContent = `${k} × ${A}`, e.append(M);
-		let N = 10 - (this.theme?.margins?.[0] ?? 10);
-		M._cleanup = autoUpdate(e, M, async () => {
-			let { x: k, y: A } = await computePosition(e, M, {
-				placement: "bottom",
-				middleware: [offset(N), flip()]
-			});
-			M.style.left = `${k}px`, M.style.top = `${A}px`;
-		}), M.matches(":popover-open") || M.showPopover();
+		createOrUpdateDimensionsHint({
+			element: e,
+			numberOfColumns: k,
+			numberOfRows: A,
+			offsetHint: getDimensionsHintOffset(this.theme)
+		});
 	}
 	_removeDimensionsHint(e) {
-		let k = e.querySelector(".dimensions-hint-popover");
-		k && (k._cleanup && (k._cleanup(), delete k._cleanup), k.matches(":popover-open") && k.hidePopover(), k.remove());
+		removeDimensionsHint(e);
 	}
 	get grid() {
 		return this._grid;
 	}
 	get gridItems() {
-		return this.items.map((e) => {
-			let k = {
-				item: e,
-				element: this._gridElement.querySelector(`[gs-id="${e.id}"]`)
-			}, A = k.element?.querySelector("luzmo-embed-viz-item");
-			return A && (k.luzmoElement = A), k;
-		});
+		return mapGridItems(this.items, this._gridElement);
 	}
 	registerRenderer(e, k) {
 		this.renderers = {
@@ -4652,124 +5124,61 @@ var grid_module_default = ":host{width:100%;display:block}.grid-stack{width:100%
 		};
 	}
 	_renderOverlayContent(e, k) {
-		let A = generateActionsMenu(e?.actionsMenu) ?? generateActionsMenu(this.defaultItemActionsMenu) ?? defaultActionsMenu();
-		return !itemTypes.find((k) => k.type === e?.type)?.containsData && !e?.actionsMenu && !this.defaultItemActionsMenu && (A = A.map((e) => ({
-			...e,
-			actions: e.actions?.filter((e) => e.action !== "edit-data")
-		}))), k && (A = A.map((e) => ({
-			...e,
-			actions: e.actions?.map((e) => ({
-				...e,
-				active: e.action === k ? !0 : e.active
-			}))
-		}))), html`
-      <div class="grid-item-actions-popover" popover="manual">
-        <luzmo-grid-item-actions-menu
-          .actions=${A}
-          placement=${e?.placementActionsMenu ?? this.placementItemActionsMenu ?? "right-start"}
-          .language=${this.language}
-          @luzmo-grid-item-action=${this._handleAction}
-        >
-        </luzmo-grid-item-actions-menu>
-      </div>
-    `;
+		return renderOverlayContent({
+			item: e,
+			activeAction: k,
+			defaultItemActionsMenu: this.defaultItemActionsMenu,
+			placementItemActionsMenu: this.placementItemActionsMenu,
+			language: this.language,
+			handleAction: this._handleAction
+		});
 	}
 	_createItemActionsMenuPopover(e, k) {
-		let A = e.querySelector(".grid-item-actions-popover"), j = e.querySelector(".grid-stack-item-content"), M = this.getGridItemById(e.getAttribute("gs-id") ?? "");
-		if (k && A && (this._removeItemActionsMenuPopover(e), A = null), !A) {
-			let j = document.createDocumentFragment();
-			render(this._renderOverlayContent(M?.item, k), j), A = j.querySelector(".grid-item-actions-popover"), e.append(A);
-		}
-		let N = autoUpdate(j, A, async () => {
-			let { x: e, y: k } = await computePosition(j, A, {
-				placement: M?.item?.placementActionsMenu ?? this.placementItemActionsMenu ?? "right-start",
-				middleware: [offset(0), flip({ crossAxis: !1 })]
-			});
-			A.style.left = `${e}px`, A.style.top = `${k}px`;
+		createItemActionsMenuPopover({
+			element: e,
+			activeAction: k,
+			getGridItemById: this.getGridItemById.bind(this),
+			placementItemActionsMenu: this.placementItemActionsMenu,
+			renderOverlayContent: this._renderOverlayContent.bind(this),
+			removeItemActionsMenuPopover: this._removeItemActionsMenuPopover.bind(this)
 		});
-		A._cleanup = N, A.matches(":popover-open") || A.showPopover();
 	}
 	_removeItemActionsMenuPopover(e) {
-		let k = e.querySelector(".grid-item-actions-popover");
-		k && (k._cleanup && (k._cleanup(), delete k._cleanup), k.matches(":popover-open") && k.hidePopover(), k.remove());
-	}
-	_updateThemeProperties() {
-		if (!this._fullTheme) return;
-		let e = this._fullTheme.boxShadow, k = "";
-		if (e) {
-			let j = new Color(e.color), M = {
-				r: Math.round(j.srgb.r * 255),
-				g: Math.round(j.srgb.g * 255),
-				b: Math.round(j.srgb.b * 255)
-			}, N = this._fullTheme.margins?.[0] ?? 16, P = Math.min(N / 10, 2);
-			e.size === "none" ? k = "none" : e.size === "S" ? k = `0 ${P * 2}px ${P * 4}px ${getRGBA(M, .16)}, 0 ${P * 2}px ${P * 4}px ${getRGBA(M, .23)}` : e.size === "M" ? k = `0 ${P * 8}px ${P * 16}px ${getRGBA(M, .19)}, 0 ${P * 4}px ${P * 4}px ${getRGBA(M, .23)}` : e.size === "L" && (k = `0 ${P * 12}px ${P * 24}px ${getRGBA(M, .25)}, 0 ${P * 8}px ${P * 8}px ${getRGBA(M, .22)}`);
-		}
-		new Map([
-			["--grid-font-family", this._fullTheme?.font?.fontFamily],
-			["--grid-background", this._fullTheme?.background],
-			["--grid-item-box-shadow", k],
-			["--grid-item-background", this._fullTheme?.itemsBackground],
-			["--grid-item-border-color", this._fullTheme?.borders?.["border-color"]],
-			["--grid-item-border-style", this._fullTheme?.borders?.["border-style"]],
-			["--grid-item-border-radius", this._fullTheme?.borders?.["border-radius"]],
-			["--grid-item-border-width", `${this._fullTheme?.borders?.["border-top-width"]}`],
-			["--grid-item-border-top-width", this._fullTheme?.borders?.["border-top-width"]],
-			["--grid-item-border-right-width", this._fullTheme?.borders?.["border-right-width"]],
-			["--grid-item-border-bottom-width", this._fullTheme?.borders?.["border-bottom-width"]],
-			["--grid-item-border-left-width", this._fullTheme?.borders?.["border-left-width"]]
-		]).forEach((e, k) => {
-			e ? this.style.setProperty(k, e) : this.style.removeProperty(k);
-		});
+		removeItemActionsMenuPopover(e);
 	}
 	getGridItemById(e) {
 		return this.gridItems.find((k) => k.item.id === e);
 	}
 	addGridItem(e) {
 		!this._initialized && this._gridElement && console.warn("Grid is not initialized, wait for grid-ready event");
-		let k = v4_default(), A = {
-			...structuredClone(e),
-			id: k,
-			position: structuredClone(e?.position) ?? {
-				sizeX: 1,
-				sizeY: 1,
-				col: 0,
-				row: 0
-			},
-			canFilter: e.canFilter ?? "all"
-		}, j = this._renderItem(A, this.items.length), M = document.createDocumentFragment();
-		render(j, M, { host: this }), this._gridElement.append(M);
-		let N = this._gridElement.querySelector(`[luzmo-grid-item-id="${A.id}"]`);
-		N.setAttribute("orphan", "true");
-		let P = {
-			x: A.position?.col ?? 0,
-			y: A.position?.row ?? 0,
-			w: A.position?.sizeX ?? 1,
-			h: A.position?.sizeY ?? 1,
-			autoPosition: !0,
-			id: A.id
-		}, F = this._grid?.makeWidget(N, P);
-		return F && (A.position = {
-			sizeX: Number.parseInt(F.getAttribute("gs-w") ?? "1", 10),
-			sizeY: Number.parseInt(F.getAttribute("gs-h") ?? "1", 10),
-			col: Number.parseInt(F.getAttribute("gs-x") ?? "0", 10),
-			row: Number.parseInt(F.getAttribute("gs-y") ?? "0", 10)
-		}), this.items.push(A), this._hasItemAdded = !0, this._activeItemElement && this._cleanupActiveItem(this._activeItemElement), requestAnimationFrame(() => {
-			let e = N.getBoundingClientRect();
-			(e.bottom > window.innerHeight || e.top < 0) && N.scrollIntoView({
+		let { item: k, element: A } = addGridItem({
+			newItem: e,
+			gridElement: this._gridElement,
+			grid: this._grid,
+			createId: v4_default
+		});
+		return this.items.push(k), this._hasItemAdded = !0, this._activeItemElement && this._cleanupActiveItem(this._activeItemElement), this.requestUpdate(), requestAnimationFrame(() => {
+			let e = A.getBoundingClientRect();
+			(e.bottom > window.innerHeight || e.top < 0) && A.scrollIntoView({
 				behavior: "smooth",
 				block: "center"
 			});
-		}), N;
+		}), A;
 	}
 	removeGridItem(e) {
 		this.removeGridItemById(e?.id ?? "");
 	}
 	removeGridItemById(e) {
-		if (!e) return;
-		let k = this.getGridItemById(e)?.element;
-		k && this._grid && (this._grid.removeWidget(k), this._focusedItemElement = void 0);
-		let A = this.items.findIndex((k) => k.id === e);
-		A !== -1 && this.items.splice(A, 1), this._removeItemActionsMenuPopover(k), k && this._activeItemElement === k && this._cleanupActiveItem(k);
+		let k = removeGridItemById({
+			id: e,
+			grid: this._grid,
+			items: this.items,
+			getGridItemById: this.getGridItemById.bind(this),
+			removeItemActionsMenuPopover: this._removeItemActionsMenuPopover.bind(this),
+			activeItemElement: this._activeItemElement,
+			cleanupActiveItem: this._cleanupActiveItem.bind(this)
+		});
+		this._activeItemElement = k.activeItemElement, this._focusedItemElement = k.focusedItemElement;
 	}
 	async triggerItemAction(e, k, A) {
 		await this.updateComplete;
@@ -4778,87 +5187,54 @@ var grid_module_default = ":host{width:100%;display:block}.grid-stack{width:100%
 			console.warn(`Grid item with id "${e}" not found`);
 			return;
 		}
-		let M = j.element, N = j.item, P = k === this._activeItemActionToggle && M === this._activeItemElement, F = A?.active ?? !P;
-		if (A?.active !== void 0 && F === P) return P;
-		if (!F) return this._activeItemElement = void 0, this._activeItemActionToggle = void 0, this._gridElement?.removeAttribute("has-active-item"), M.removeAttribute("active"), this._cleanupActiveItem(M), this._dispatchItemActionEvent(k, "toggle", !1, M, e, N), !1;
-		if (this._activeItemElement && this._activeItemElement !== M) {
-			let e = this._activeItemElement.getAttribute("gs-id"), k = this.items.find((k) => k.id === e), A = this._activeItemActionToggle, j = this._activeItemElement;
-			this._cleanupActiveItem(this._activeItemElement), this._activeItemElement = void 0, this._activeItemActionToggle = void 0, A && e && k && this._dispatchItemActionEvent(A, "toggle", !1, j, e, k);
-		}
-		return this._activeItemElement = M, this._activeItemActionToggle = k, this._gridElement.setAttribute("has-active-item", "true"), M.setAttribute("active", "true"), this._createItemActionsMenuPopover(M, k), this._dispatchItemActionEvent(k, "toggle", !0, M, e, N), !0;
+		let M = triggerGridItemAction({
+			gridElement: this._gridElement,
+			items: this.items,
+			gridItemData: j,
+			itemId: e,
+			action: k,
+			options: A,
+			state: {
+				activeItemElement: this._activeItemElement,
+				activeItemActionToggle: this._activeItemActionToggle
+			},
+			cleanupActiveItem: this._cleanupActiveItem.bind(this),
+			dispatchItemActionEvent: this._dispatchItemActionEvent.bind(this),
+			createItemActionsMenuPopover: this._createItemActionsMenuPopover.bind(this)
+		});
+		return this._activeItemElement = M.state.activeItemElement, this._activeItemActionToggle = M.state.activeItemActionToggle, M.result;
 	}
 	deactivateItems() {
-		let e = 0;
-		if (this._activeItemElement && this._activeItemActionToggle) {
-			let k = this._activeItemElement.getAttribute("gs-id"), A = this.items.find((e) => e.id === k), j = this._activeItemActionToggle, M = this._activeItemElement;
-			this._cleanupActiveItem(this._activeItemElement), this._activeItemElement = void 0, this._activeItemActionToggle = void 0, this._gridElement?.removeAttribute("has-active-item"), j && k && A && (this._dispatchItemActionEvent(j, "toggle", !1, M, k, A), e++);
-		}
-		return e;
-	}
-	_renderItem(e, k) {
-		let A = {
-			...e.options,
-			locale: this.contentLanguage
-		};
-		A.theme ||= this._fullTheme?.id ? { id: this._fullTheme.id } : structuredClone(this._fullTheme);
-		let j = !this.viewMode;
-		return html`
-      <div
-        class="luzmo-grid-item has-luzmo-viz-item"
-        luzmo-grid-item-id=${e.id ?? v4_default()}
-        tabindex="0"
-        role="row"
-        @mouseover=${this._handleMouseover}
-        @mouseout=${this._handleMouseout}
-        @focus=${this._handleFocus}
-        @blur=${this._handleBlur}
-      >
-        <div
-          class="grid-stack-item-content"
-          role="gridcell"
-          aria-label="Grid item ${k + 1}"
-        >
-          ${this._initialized ? html` ${j ? html`
-                      <div class="grid-item-drag-handle">
-                        <luzmo-icon .icon=${luzmoArrows} size="s"></luzmo-icon>
-                      </div>
-                    ` : html`
-                        
-                      `}
-                <luzmo-embed-viz-item
-                  .appServer=${this.appServer}
-                  .apiHost=${this.apiHost}
-                  .authKey=${this.authKey}
-                  .authToken=${this.authToken}
-                  .type=${e.type}
-                  .slots=${e.slots}
-                  .options=${A}
-                  .filters=${e.filters}
-                  .language=${this.contentLanguage}
-                  .canFilter=${e.canFilter ?? "all"}
-                ></luzmo-embed-viz-item>` : html`
-                  
-                `}
-        </div>
-      </div>
-    `;
+		let e = deactivateGridItems({
+			gridElement: this._gridElement,
+			items: this.items,
+			state: {
+				activeItemElement: this._activeItemElement,
+				activeItemActionToggle: this._activeItemActionToggle
+			},
+			cleanupActiveItem: this._cleanupActiveItem.bind(this),
+			dispatchItemActionEvent: this._dispatchItemActionEvent.bind(this)
+		});
+		return this._activeItemElement = e.state.activeItemElement, this._activeItemActionToggle = e.state.activeItemActionToggle, e.deactivatedCount;
 	}
 	_renderGrid() {
-		this.items.forEach((e) => {
-			e.id = e.id ?? v4_default();
+		return renderGrid({
+			items: this.items,
+			initialized: this._initialized,
+			viewMode: this.viewMode,
+			contentLanguage: this.contentLanguage,
+			fullTheme: this._fullTheme,
+			appServer: this.appServer,
+			apiHost: this.apiHost,
+			authKey: this.authKey,
+			authToken: this.authToken,
+			columns: this.columns ?? 48,
+			ensureGridItemId: (e) => ensureGridItemId(e, v4_default),
+			handleMouseover: this._handleMouseover.bind(this),
+			handleMouseout: this._handleMouseout,
+			handleFocus: this._handleFocus,
+			handleBlur: this._handleBlur
 		});
-		let e = repeat(this.items, (e) => e.id, (e, k) => this._renderItem(e, k)), k = !1;
-		return this._initialized && (this._fullTheme?.itemsBackground || this._fullTheme?.background) && (k = new Color(this._fullTheme.itemsBackground ?? this._fullTheme.background).luminance < .5), html`
-      <div
-        ?dark-background=${k}
-        class="grid-stack"
-        data-grid-columns=${this.columns ?? 48}
-        role="grid"
-        aria-label="Dashboard grid"
-      >
-        ${e}
-      </div>
-    `;
 	}
 	render() {
 		return this._renderGrid();