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

package/components/add-to-dashboard-NcVHlqrc.js

@@ -0,0 +1,796 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import "./tokens-6HmQYnEP.js";
+import { i as e, n as t, t as n } from "./base-rAte-QzM.js";
+import { t as r } from "./decorate-B2TzfnLZ.js";
+import { t as i } from "./localized-mixin-FPDNaZhb.js";
+import { t as a } from "./data-broker-C1Iz71TN.js";
+import { t as o } from "./localize-BNystXyK.js";
+import { o as s } from "./chart-helpers-Dng_LGfq.js";
+import { luzmoAlertOutline as c, luzmoAngleDown as l, luzmoAngleLeft as u, luzmoAngleRight as d, luzmoArrowLeft as f, luzmoArrowRight as p, luzmoArrowsHorizontal as m, luzmoCheckCircleOutline as h, luzmoDesktop as g, luzmoLaptop as _, luzmoLink as v, luzmoMobile as ee, luzmoPlus as y, luzmoTablet as te } from "@luzmo/icons";
+import "@luzmo/lucero/action-button";
+import "@luzmo/lucero/button";
+import "@luzmo/lucero/icon";
+import "@luzmo/lucero/overlay";
+import "@luzmo/lucero/popover";
+import "@luzmo/lucero/tooltip";
+import { html as b, nothing as x, unsafeCSS as S } from "lit";
+import { property as C, query as w, state as T } from "lit/decorators.js";
+import { localized as E, msg as D, str as O } from "@lit/localize";
+import "@luzmo/lucero/progress-circle";
+import "@luzmo/lucero/checkbox";
+import "@luzmo/lucero/divider";
+import "@luzmo/lucero/field-group";
+import "@luzmo/lucero/menu";
+import "@luzmo/lucero/notice";
+import "@luzmo/lucero/search";
+import { ifDefined as k } from "lit/directives/if-defined.js";
+// src/components/add-to-dashboard/add-to-dashboard.module.scss?inline
+var A = ":host{align-items:flex-end;gap:var(--luzmo-spacing-2);font-family:var(--luzmo-font-family);flex-direction:column;display:inline-flex}.trigger-spinner{--luzmo-progress-circle-size:var(--luzmo-icon-size-xs)}.trigger-chevron{margin-inline-start:var(--luzmo-spacing-1)}.picker{gap:var(--luzmo-spacing-3);width:var(--luzmo-add-to-dashboard-picker-width,var(--add-to-dashboard-picker-width));max-width:90vw;padding:var(--luzmo-spacing-2);color:var(--luzmo-font-color);font-size:var(--luzmo-font-size-s);flex-direction:column;display:flex}luzmo-search{width:100%}.list{max-height:var(--luzmo-add-to-dashboard-list-max-height,var(--add-to-dashboard-list-max-height));flex-direction:column;display:flex;overflow-y:auto}.menu{--luzmo-menu-max-height:none;flex:none;width:100%;overflow:visible}.create-row{--luzmo-menu-item-label-icon-color-default:var(--luzmo-primary)}.thumbnail{object-fit:cover;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-radius:var(--luzmo-border-radius);width:2.75rem;height:2rem}.drill-in{color:var(--luzmo-font-color-extra-dimmed)}.header{align-items:center;gap:var(--luzmo-spacing-2);display:flex}.header-title{font-weight:var(--luzmo-font-weight-bold);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.empty{align-items:center;gap:var(--luzmo-spacing-3);padding:var(--luzmo-spacing-4);text-align:center;flex-direction:column;display:flex}.loading{padding:var(--luzmo-spacing-3);justify-content:center;display:flex}.screen-modes{gap:var(--luzmo-spacing-2);flex-direction:column;display:flex}.screen-mode{align-items:center;gap:var(--luzmo-spacing-2);display:flex}.screen-mode-size{color:var(--luzmo-font-color-extra-dimmed)}.footer{justify-content:flex-end;display:flex}.status{justify-content:flex-end;width:0;min-width:100%;display:flex}.status:empty{display:none}.alert{flex:none;inline-size:max-content}.alert-body{align-items:center;gap:var(--luzmo-spacing-3);block-size:1lh;min-inline-size:0;display:flex}.alert-text{min-inline-size:0;font-weight:var(--luzmo-font-weight-semibold);white-space:pre;display:flex}.alert[variant=negative] .alert-text{white-space:normal}.alert-name{min-inline-size:0;font-weight:var(--luzmo-font-weight-bold);text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext;overflow:hidden}.alert-open{flex:none}:host{--add-to-dashboard-picker-width:18rem;--add-to-dashboard-list-max-height:16rem}", j = "0.1.107", M = "0.1.0", N = [
+	"id",
+	"name",
+	"contents",
+	"modified_at",
+	"is_variant",
+	"original_id"
+], ne = /* @__PURE__ */ new Set(["designer", "owner"]), re = "flag_dashboard_variants", P = [
+	"desktop",
+	"tablet",
+	"mobile"
+];
+async function F(e, t, n) {
+	let r = [], i = t, a = 0;
+	for (let t of e) {
+		let e = n - r.length, o = await t(i, Math.max(e, 1));
+		e > 0 && r.push(...o.rows.slice(0, e)), i = Math.max(0, i - o.count), a += o.count;
+	}
+	return {
+		rows: r,
+		total: a
+	};
+}
+async function I(e) {
+	let t = await e.fetchApi("/user", {
+		action: "get",
+		version: M,
+		find: {
+			where: { id: "me" },
+			attributes: ["id", "flags"]
+		}
+	});
+	return {
+		id: t.rows?.[0]?.id ?? "",
+		flags: t.rows?.[0]?.flags ?? []
+	};
+}
+async function L(e, t) {
+	return (await e.fetchApi("/authorization", {
+		action: "get",
+		version: M,
+		find: { where: { id: t } }
+	})).rows?.[0];
+}
+async function R(e, t, n) {
+	let r = {
+		...t,
+		where: {
+			...t.where,
+			type: "dashboard"
+		}
+	}, i = await e.fetchApi("/securable", {
+		action: "get",
+		version: M,
+		find: r
+	}, { signal: n });
+	return {
+		rows: i.rows ?? [],
+		count: i.count ?? i.rows?.length ?? 0
+	};
+}
+function z(e) {
+	let t = {
+		modifyIds: /* @__PURE__ */ new Set(),
+		useOnlyIds: /* @__PURE__ */ new Set()
+	};
+	for (let n of e?.access?.dashboards ?? []) n.rights?.Modify ? t.modifyIds.add(n.id) : n.rights?.Use && t.useOnlyIds.add(n.id);
+	return t;
+}
+function B() {
+	return {
+		version: j,
+		syncScreenModes: !0,
+		views: P.map((e) => ({
+			screenModus: e,
+			options: { theme: { id: "default" } },
+			filterGroups: [],
+			items: []
+		})),
+		timezone: {
+			type: "fixed",
+			id: "UTC"
+		}
+	};
+}
+function V(e) {
+	return e ? { search: {
+		match_types: ["name", "description"],
+		keyphrase: e,
+		securable_types: ["dashboard"]
+	} } : {};
+}
+function H(e, t) {
+	return { include: [{
+		model: "User",
+		as: "allUsers",
+		attributes: [],
+		required: !0,
+		where: {
+			id: e,
+			...Object.fromEntries(Object.entries(t).map(([e, t]) => [`securableAccessRight.${e}`, t]))
+		}
+	}] };
+}
+async function U(e) {
+	let t = new a({
+		apiUrl: e.apiUrl,
+		authKey: e.authKey,
+		authToken: e.authToken,
+		skipNetworkListeners: !0
+	}), [n, r] = await Promise.all([I(t), L(t, e.authKey)]), i = z(r), s = r?.type !== "embed" || ne.has(r.role ?? ""), c = !!n.id && n.flags.includes(re), l = [...i.modifyIds, ...c ? i.useOnlyIds : []], u = l.length > 0 ? { id: { notIn: l } } : {}, d = (t, n = !1) => {
+		let r = [...new Set((t.contents?.views ?? []).map((e) => e.screenModus))];
+		return {
+			id: t.id,
+			name: o(t.name ?? {}, e.language),
+			syncScreenModes: t.contents?.syncScreenModes !== !1,
+			screenModes: r.length > 0 ? r : ["desktop"],
+			...n ? { requiresVariant: n } : {}
+		};
+	}, f, p = (e, n) => async (r, a) => {
+		if (l.length === 0) return {
+			count: 0,
+			rows: []
+		};
+		let o = r > 0 && f?.search === e ? f.rows : void 0;
+		return o || (o = (await R(t, {
+			where: {
+				is_variant: !1,
+				archived_at: null,
+				id: { in: l }
+			},
+			attributes: N,
+			...V(e)
+		}, n)).rows.map((e) => d(e, !i.modifyIds.has(e.id))).sort((e, t) => e.name.localeCompare(t.name)), f = {
+			search: e,
+			rows: o
+		}), {
+			count: o.length,
+			rows: o.slice(r, r + a)
+		};
+	}, m = (e, r, i, a) => async (o, s) => {
+		let c = await R(t, {
+			where: {
+				is_variant: !1,
+				archived_at: null,
+				...u
+			},
+			attributes: N,
+			...H(n.id, i),
+			...V(e),
+			limit: s,
+			offset: o,
+			order: [["modified_at", "desc"]]
+		}, r);
+		return {
+			count: c.count,
+			rows: c.rows.map((e) => d(e, a))
+		};
+	}, h = async (e, n, r, i) => {
+		await t.fetchApi("/securable", {
+			action: "update",
+			version: M,
+			id: e,
+			properties: { append_item: {
+				item: n,
+				...r?.length ? { screenModes: r } : {}
+			} }
+		}, { signal: i });
+	}, g = async (e, n, r) => {
+		try {
+			await h(e.id, n, r);
+		} catch (n) {
+			throw await t.fetchApi("/securable", {
+				action: "delete",
+				version: M,
+				id: e.id
+			}).catch(() => void 0), n;
+		}
+	}, _ = async (e, n) => await t.fetchApi("/securable", {
+		action: "create",
+		version: M,
+		properties: {
+			...e,
+			type: "dashboard"
+		},
+		associations: n
+	});
+	return {
+		async list(e, t) {
+			return n.id ? await F([
+				p(e.search, t.signal),
+				...c ? [m(e.search, t.signal, {
+					flagUse: !0,
+					flagModify: !1
+				}, !0)] : [],
+				m(e.search, t.signal, { flagModify: !0 }, !1)
+			], e.offset, e.limit) : {
+				rows: [],
+				total: 0
+			};
+		},
+		async add(e, t, n, r) {
+			await h(e.id, t, n.screenModes, r.signal);
+		},
+		...s ? { async create(t, n) {
+			let r = await _({
+				name: n.name ? { [e.language]: n.name } : {},
+				contents: B()
+			});
+			return await g(r, t, void 0), d(r);
+		} } : {},
+		...c ? { async listVariants(e, r) {
+			return (await R(t, {
+				where: {
+					is_variant: !0,
+					original_id: e.id,
+					archived_at: null
+				},
+				attributes: N,
+				...H(n.id, { flagModify: !0 }),
+				order: [["modified_at", "desc"]]
+			}, r.signal)).rows.map((e) => d(e));
+		} } : {},
+		...c && s ? { async addToVariant(n, r, i) {
+			let a = (await R(t, {
+				where: { id: n.id },
+				attributes: [
+					"id",
+					"name",
+					"contents"
+				]
+			})).rows[0];
+			if (!a?.contents) throw Error(D("The dashboard was not found.", { desc: "Adding the chart to a variant failed because the original dashboard could not be loaded" }));
+			let o = a.name ?? {}, s = await _({
+				name: i.name ? {
+					...o,
+					[e.language]: i.name
+				} : o,
+				contents: a.contents
+			}, [{
+				role: "original",
+				id: n.id
+			}]);
+			return await g(s, r, i.screenModes), d({
+				...s,
+				contents: s.contents ?? a.contents
+			});
+		} } : {}
+	};
+}
+// src/components/add-to-dashboard/helpers/add-to-dashboard-helpers.ts
+function W(e) {
+	let { theme: t, ...n } = e.options ?? {};
+	return {
+		...s(e),
+		options: n
+	};
+}
+function G(e, t) {
+	let n = new Set(e), r = e.length + 1;
+	for (; n.has(t(r));) r += 1;
+	return r;
+}
+// src/components/add-to-dashboard/add-to-dashboard.ts
+var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-new-variant", Q = /* @__PURE__ */ new Map(), ie = 0, $ = class extends i(t(e, { validSizes: Object.values(n) })) {
+	constructor(...e) {
+		super(...e), this.chart = null, this.dashboardActions = null, this.authKey = "", this.authToken = "", this.apiUrl = "https://api.luzmo.com", this.placement = "bottom-end", this.disabled = !1, this._open = !1, this._actions = null, this._step = "list", this._rows = [], this._hasMore = !1, this._loading = !1, this._listFailed = !1, this._original = null, this._variants = [], this._variantsLoading = !1, this._variantsFailed = !1, this._pending = null, this._screenModes = [], this._saving = !1, this._status = null, this._triggerId = `add-to-dashboard-trigger-${++ie}`, this._search = "", this._actionsGeneration = 0, this._reloadOnUpdate = !1;
+	}
+	static get styles() {
+		let e = super.styles ?? [];
+		return [...Array.isArray(e) ? e : [e], S(A)];
+	}
+	get _hasSource() {
+		return !!this.dashboardActions || !!(this.authKey && this.authToken);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._status && this._startFittingAlert();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._handleClosed(), this._actionsGeneration += 1, this._saveAbort?.abort(), this._stopFittingAlert();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("dashboardActions") || e.has("authKey") || e.has("authToken") || e.has("apiUrl") || e.has("language")) && (this._actions = null, this._actionsGeneration += 1, this._open && (this._listAbort?.abort(), this._variantsAbort?.abort(), this._step = "list", this._original = null, this._pending = null, this._rows = [], this._open = this._hasSource, this._reloadOnUpdate = this._hasSource)), e.has("disabled") && this.disabled && (this._open = !1), e.has("chart") && !this.chart && this._handleClosed();
+	}
+	updated(e) {
+		super.updated(e), this._reloadOnUpdate && (this._reloadOnUpdate = !1, this._loadList()), e.has("_step") && this._open && this._focusStep(), e.has("_status") && (this._status ? this._startFittingAlert() : this._stopFittingAlert());
+	}
+	get _alertContainer() {
+		let e = this.getRootNode();
+		return this.parentElement ?? (e instanceof ShadowRoot ? e.host : null);
+	}
+	_startFittingAlert() {
+		this._fitAlert();
+		let e = this._alertContainer;
+		!this._alertResizeObserver && e && (this._alertResizeObserver = new ResizeObserver(() => this._fitAlert()), this._alertResizeObserver.observe(this), this._alertResizeObserver.observe(e));
+	}
+	_stopFittingAlert() {
+		this._alertResizeObserver?.disconnect(), this._alertResizeObserver = void 0;
+	}
+	_fitAlert() {
+		let e = this._noticeElement, t = this._alertContainer;
+		if (!e || !t) return;
+		let n = this.getBoundingClientRect(), r = t.getBoundingClientRect(), i = Number.parseFloat(getComputedStyle(t).paddingInlineStart) || 0, a = (this.isLTR ? n.right - r.left : r.right - n.left) - i;
+		e.style.setProperty("--luzmo-notice-max-inline-size", `${Math.max(0, a)}px`);
+	}
+	async _resolveActions() {
+		if (this.dashboardActions) return this.dashboardActions;
+		let e = {
+			apiUrl: this.apiUrl,
+			authKey: this.authKey,
+			authToken: this.authToken,
+			language: this.language
+		}, t = JSON.stringify(e), n = Q.get(t);
+		return n || (Q.clear(), n = U(e), Q.set(t, n), n.catch(() => Q.delete(t))), await n;
+	}
+	_dispatch(e, t) {
+		let n = new CustomEvent(e, {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		});
+		this.dispatchEvent(n);
+	}
+	_displayName(e) {
+		return e.name.trim() || D("Untitled dashboard", { desc: "Fallback name of a dashboard without a name" });
+	}
+	_variantName(e, t) {
+		let n = this._displayName(e);
+		return D(O`${n} (variant ${t})`, { desc: "Name of a new dashboard variant" });
+	}
+	_screenModeChoices() {
+		return [
+			{
+				name: "mobile",
+				label: D("Smartphone", { desc: "Screen mode name" }),
+				size: "< 768px",
+				icon: ee
+			},
+			{
+				name: "tablet",
+				label: D("Tablet", { desc: "Screen mode name" }),
+				size: "≥ 768px",
+				icon: te
+			},
+			{
+				name: "desktop",
+				label: D("Desktop", { desc: "Screen mode name" }),
+				size: "≥ 1200px",
+				icon: _
+			},
+			{
+				name: "largeScreen",
+				label: D("Large screen", { desc: "Screen mode name" }),
+				size: "≥ 1600px",
+				icon: g
+			},
+			{
+				name: "fixed",
+				label: D("Fixed width", { desc: "Screen mode name" }),
+				icon: m
+			}
+		];
+	}
+	async _handleOpened(e) {
+		e.target === e.currentTarget && (this._open = !0, this._step = "list", this._search = "", this._original = null, this._pending = null, this._rows = [], await this.updateComplete, this._searchElement?.focus(), await this._loadList());
+	}
+	async _loadList() {
+		let e = this._actionsGeneration;
+		this._loading = !0, this._listFailed = !1;
+		try {
+			let t = this._actions ?? await this._resolveActions();
+			if (e !== this._actionsGeneration) return;
+			this._actions = t;
+		} catch (t) {
+			if (!this.isConnected || e !== this._actionsGeneration) return;
+			console.error("Failed to resolve the add to dashboard actions:", t), this._loading = !1, this._listFailed = !0;
+			return;
+		}
+		this.isConnected && this._open && await this._loadPage(!1);
+	}
+	_handleClosed(e) {
+		e && e.target !== e.currentTarget || (this._open = !1, clearTimeout(this._searchTimer), this._listAbort?.abort(), this._variantsAbort?.abort());
+	}
+	async _loadPage(e) {
+		let t = this._actions;
+		if (!t) return;
+		this._listAbort?.abort();
+		let n = new AbortController();
+		this._listAbort = n, this._loading = !0, this._listFailed = !1, e || (this._rows = []);
+		try {
+			let e = await t.list({
+				search: this._search,
+				offset: this._rows.length,
+				limit: K
+			}, { signal: n.signal });
+			if (n.signal.aborted) return;
+			this._rows = [...this._rows, ...e.rows], this._hasMore = e.total === void 0 ? e.rows.length === K : this._rows.length < e.total;
+		} catch (e) {
+			if (n.signal.aborted) return;
+			console.error("Failed to load dashboards:", e), this._listFailed = !0;
+		} finally {
+			n.signal.aborted || (this._loading = !1);
+		}
+	}
+	_handleSearchInput(e) {
+		this._search = String(e.target?.value ?? ""), clearTimeout(this._searchTimer), this._searchTimer = setTimeout(() => void this._loadPage(!1), q);
+	}
+	_handleListScroll(e) {
+		let t = e.target;
+		this._hasMore && !this._loading && t.scrollHeight - t.scrollTop - t.clientHeight <= Y && this._loadPage(!0);
+	}
+	_menuValue(e) {
+		return e.stopPropagation(), e.target.value ?? "";
+	}
+	_handleListChange(e) {
+		let t = this._menuValue(e);
+		if (t === X) {
+			this._actions?.create && this._save({ kind: "create" });
+			return;
+		}
+		let n = this._rows.find((e) => e.id === t);
+		n && (n.requiresVariant ? (this._original = n, this._step = "variants", this._loadVariants()) : this._selectTarget({
+			kind: "add",
+			dashboard: n,
+			isVariant: !1
+		}, n));
+	}
+	_handleVariantChange(e) {
+		let t = this._menuValue(e), n = this._original;
+		if (!n) return;
+		if (t === Z) {
+			if (!this._actions?.addToVariant) return;
+			let e = this._variants.map((e) => this._displayName(e)), t = this._variantName(n, G(e, (e) => this._variantName(n, e)));
+			this._selectTarget({
+				kind: "variant",
+				original: n,
+				name: t
+			}, n);
+			return;
+		}
+		let r = this._variants.find((e) => e.id === t);
+		r && this._selectTarget({
+			kind: "add",
+			dashboard: r,
+			isVariant: !0
+		}, r);
+	}
+	_selectTarget(e, t) {
+		t.syncScreenModes !== !1 || !t.screenModes?.length ? this._save(e) : (this._pending = e, this._screenModes = [...t.screenModes ?? []], this._step = "screenModes");
+	}
+	async _loadVariants() {
+		let e = this._actions, t = this._original;
+		if (this._variantsAbort?.abort(), this._variants = [], this._variantsLoading = !1, this._variantsFailed = !1, !e?.listVariants || !t) return;
+		let n = new AbortController();
+		this._variantsAbort = n, this._variantsLoading = !0;
+		try {
+			let r = await e.listVariants(t, { signal: n.signal });
+			n.signal.aborted || (this._variants = r);
+		} catch (e) {
+			n.signal.aborted || (console.error("Failed to load dashboard variants:", e), this._variantsFailed = !0);
+		} finally {
+			n.signal.aborted || (this._variantsLoading = !1);
+		}
+	}
+	_handleBack() {
+		this._step === "screenModes" && this._original ? this._step = "variants" : (this._step = "list", this._original = null), this._pending = null;
+	}
+	_toggleScreenMode(e) {
+		this._screenModes = this._screenModes.includes(e) ? this._screenModes.filter((t) => t !== e) : [...this._screenModes, e];
+	}
+	_handleConfirmScreenModes() {
+		this._pending && this._screenModes.length > 0 && this._save(this._pending, { screenModes: [...this._screenModes] });
+	}
+	async _save(e, t = {}) {
+		let n = this._actions;
+		if (!n || !this.chart || this._saving) return;
+		this._open = !1, this._saving = !0, this._setStatus(null), this._saveAbort = new AbortController();
+		let r = W(this.chart), i = { signal: this._saveAbort.signal };
+		try {
+			let a;
+			if (e.kind === "create" && n.create) a = await n.create(r, t, i);
+			else if (e.kind === "variant" && n.addToVariant) a = await n.addToVariant(e.original, r, {
+				...t,
+				name: e.name
+			}, i);
+			else if (e.kind === "add") a = await n.add(e.dashboard, r, t, i) || e.dashboard;
+			else return;
+			if (i.signal.aborted) return;
+			this._setStatus({
+				kind: "success",
+				dashboard: a,
+				isVariant: e.kind === "variant" || e.kind === "add" && e.isVariant,
+				openDashboard: n.openDashboard?.bind(n)
+			}), this._dispatch("luzmo-chart-added", { dashboard: a });
+		} catch (e) {
+			if (i.signal.aborted) return;
+			console.error("Failed to add the chart to a dashboard:", e), this._setStatus({
+				kind: "error",
+				message: e instanceof Error && e.message ? e.message : void 0
+			}), this._dispatch("luzmo-chart-add-failed", { error: e });
+		} finally {
+			this._saving = !1;
+		}
+		await this.updateComplete, this.isConnected && this._isFocusLost() && this._focusTrigger();
+	}
+	_setStatus(e) {
+		this._status = e;
+	}
+	_focusTrigger() {
+		this._triggerElement?.focus();
+	}
+	_isFocusLost() {
+		return !document.activeElement || document.activeElement === document.body;
+	}
+	async _handleNoticeClose(e) {
+		e.stopPropagation();
+		let t = e.currentTarget.matches(":focus-within");
+		this._setStatus(null), await this.updateComplete, t && this._isFocusLost() && this._focusTrigger();
+	}
+	async _focusStep() {
+		let e = this._step === "list" ? this._searchElement : this._backElement;
+		await e?.updateComplete, e?.focus();
+	}
+	_renderRow(e) {
+		return b`
+      <luzmo-menu-item value=${e.id} no-wrap ?disabled=${this._saving}>
+        ${e.thumbnailUrl ? b`<img slot="icon" class="thumbnail" alt="" src=${e.thumbnailUrl} />` : x}
+        ${this._displayName(e)}
+        ${e.requiresVariant ? b`<luzmo-icon slot="value" class="drill-in" size="xs" block .icon=${this.isLTR ? d : u}></luzmo-icon>` : x}
+      </luzmo-menu-item>
+    `;
+	}
+	_renderCreateRow(e, t, n, r = !1) {
+		let i = `${this._triggerId}-${e}-reason`;
+		return b`
+      <luzmo-menu-item
+        class="create-row"
+        value=${e}
+        label=${t}
+        aria-describedby=${k(n ? i : void 0)}
+        no-wrap
+        ?disabled=${this._saving || r || !!n}
+      >
+        <luzmo-icon slot="icon" size="s" .icon=${y}></luzmo-icon>
+        ${t} ${n ? b`<span slot="description" id=${i}>${n}</span>` : x}
+      </luzmo-menu-item>
+    `;
+	}
+	_renderLoading() {
+		let e = D("Loading", { desc: "Loading spinner label" });
+		return b`<div class="loading"><luzmo-progress-circle size="s" indeterminate .label=${e}></luzmo-progress-circle></div>`;
+	}
+	async _handleRetry(e) {
+		let t = e();
+		await this.updateComplete, this._isFocusLost() && await this._focusStep(), await t;
+	}
+	_renderEmpty(e, t) {
+		return b`
+      <div class="empty">
+        <span>${e}</span>
+        ${t ? b`<luzmo-button size="s" treatment="outline" @click=${() => this._handleRetry(t)}>${D("Retry", { desc: "Retry a failed request" })}</luzmo-button>` : x}
+      </div>
+    `;
+	}
+	_renderHeader(e) {
+		return b`
+      <div class="header">
+        <luzmo-action-button size="s" quiet label=${D("Back", { desc: "Go back to the previous step" })} @click=${this._handleBack}>
+          <luzmo-icon slot="icon" size="xs" .icon=${this.isLTR ? f : p}></luzmo-icon>
+        </luzmo-action-button>
+        <span class="header-title" tabindex="-1"
+          >${e}<luzmo-tooltip self-managed show-only-if-truncated placement="top" .size=${this.size}>${e}</luzmo-tooltip></span
+        >
+      </div>
+    `;
+	}
+	_renderList() {
+		let e = this._actions && !this._actions.create ? D("These credentials cannot create dashboards", {
+			id: "add-to-dashboard-cannot-create",
+			desc: "Why a new dashboard cannot be created"
+		}) : void 0;
+		return b`
+      <luzmo-search
+        size="s"
+        border="none"
+        label=${D("Search dashboards", { desc: "Label of the dashboard search field" })}
+        placeholder=${D("Search dashboards", { desc: "Label of the dashboard search field" })}
+        .value=${this._search}
+        @input=${this._handleSearchInput}
+        @submit=${(e) => e.preventDefault()}
+      ></luzmo-search>
+      <luzmo-divider size="s"></luzmo-divider>
+      <div class="list" @scroll=${this._handleListScroll}>
+        <luzmo-menu class="menu" size="s" @change=${this._handleListChange} @close=${(e) => e.stopPropagation()}>
+          ${this._renderCreateRow(X, D("New dashboard", { desc: "Create a new dashboard for the chart" }), e, !this._actions)}
+          ${this._rows.map((e) => this._renderRow(e))}
+        </luzmo-menu>
+        <div class="list-state" role="status" aria-live="polite">
+          ${this._listFailed ? this._renderEmpty(D("Failed to load dashboards", { desc: "Dashboard list failed to load" }), () => this._loadList()) : !this._loading && this._rows.length === 0 ? this._renderEmpty(D("No dashboards found", { desc: "Dashboard list is empty" })) : x}
+          ${this._loading ? this._renderLoading() : x}
+        </div>
+      </div>
+    `;
+	}
+	_renderVariants(e) {
+		let t = this._actions?.addToVariant ? void 0 : D("These credentials cannot create variants", {
+			id: "add-to-dashboard-cannot-create-variant",
+			desc: "Why a new dashboard variant cannot be created"
+		}), n = !this._variantsLoading && !this._variantsFailed;
+		return b`
+      ${this._renderHeader(this._displayName(e))}
+      <luzmo-divider size="s"></luzmo-divider>
+      <div class="list">
+        <luzmo-menu class="menu" size="s" @change=${this._handleVariantChange} @close=${(e) => e.stopPropagation()}>
+          ${this._renderCreateRow(Z, D("New variant", { desc: "Create a new variant of a dashboard" }), t, !n)}
+          ${this._variants.map((e) => this._renderRow(e))}
+        </luzmo-menu>
+        <div class="list-state" role="status" aria-live="polite">
+          ${this._variantsFailed ? this._renderEmpty(D("Failed to load variants", { desc: "Variant list failed to load" }), () => this._loadVariants()) : !this._variantsLoading && this._variants.length === 0 ? this._renderEmpty(D("No variants yet", { desc: "Variant list is empty" })) : x}
+          ${this._variantsLoading ? this._renderLoading() : x}
+        </div>
+      </div>
+    `;
+	}
+	_renderScreenModes(e) {
+		let t = e.kind === "variant" ? e.original : e.dashboard, n = e.kind === "variant" ? e.name : this._displayName(t), r = t.screenModes ?? [];
+		return b`
+      ${this._renderHeader(n)}
+      <luzmo-field-group class="screen-modes" vertical label=${D("Screen modes", { desc: "Label of the group of screen-mode checkboxes" })}>
+        ${this._screenModeChoices().filter((e) => r.includes(e.name)).map((e) => b`
+              <luzmo-checkbox
+                size="s"
+                ?checked=${this._screenModes.includes(e.name)}
+                @change=${() => this._toggleScreenMode(e.name)}
+              >
+                <span class="screen-mode">
+                  <luzmo-icon size="xs" block .icon=${e.icon}></luzmo-icon>
+                  ${e.label}
+                  ${e.size ? b`<span class="screen-mode-size" dir="ltr">${e.size}</span>` : x}
+                </span>
+              </luzmo-checkbox>
+            `)}
+      </luzmo-field-group>
+      <div class="footer">
+        <luzmo-button size="s" variant="primary" ?disabled=${this._screenModes.length === 0 || this._saving} @click=${this._handleConfirmScreenModes}>
+          ${D("Confirm", { desc: "Confirm the selected screen modes" })}
+        </luzmo-button>
+      </div>
+    `;
+	}
+	_renderPicker() {
+		return this._step === "screenModes" && this._pending ? this._renderScreenModes(this._pending) : this._step === "variants" && this._original ? this._renderVariants(this._original) : this._renderList();
+	}
+	_noticeLabels() {
+		return { close: D("Close", {
+			id: "add-to-dashboard-close",
+			desc: "Close the save result notice"
+		}) };
+	}
+	_renderStatus() {
+		let e = this._status;
+		if (!e) return x;
+		if (e.kind === "error") return b`
+        <luzmo-notice
+          class="alert"
+          size="s"
+          variant="negative"
+          .duration=${J}
+          .labels=${this._noticeLabels()}
+          @luzmo-notice-close=${this._handleNoticeClose}
+        >
+          <luzmo-icon slot="icon" .icon=${c}></luzmo-icon>
+          <span class="alert-text" dir="auto">${e.message ?? D("Failed to copy item", { desc: "Saving the chart to a dashboard failed" })}</span>
+        </luzmo-notice>
+      `;
+		let t = this._displayName(e.dashboard), n = b`<strong class="alert-name" tabindex="-1">${t}<luzmo-tooltip self-managed show-only-if-truncated placement="top" .size=${this.size}>${t}</luzmo-tooltip></strong>`, r = e.openDashboard;
+		return b`
+      <luzmo-notice
+        class="alert"
+        size="s"
+        variant="positive"
+        .duration=${J}
+        .labels=${this._noticeLabels()}
+        @luzmo-notice-close=${this._handleNoticeClose}
+      >
+        <luzmo-icon slot="icon" .icon=${h}></luzmo-icon>
+        <div class="alert-body">
+          <span class="alert-text" dir="auto">${D(b`Item copied to ${n}`, { desc: "The chart was saved to a dashboard" })}</span>
+          ${r && !e.isVariant ? b`
+                  <luzmo-action-button class="alert-open" size="s" quiet @click=${() => r(e.dashboard)}>
+                    <luzmo-icon slot="icon" size="xs" .icon=${v}></luzmo-icon>
+                    ${D("Open", {
+			id: "add-to-dashboard-open",
+			desc: "Open the dashboard the chart was saved to"
+		})}
+                  </luzmo-action-button>
+                ` : x}
+        </div>
+      </luzmo-notice>
+    `;
+	}
+	render() {
+		if (!this.chart || !this._hasSource) return x;
+		let e = this._saving ? D("Adding to dashboard", { desc: "The chart is being saved to a dashboard" }) : D("Add to dashboard", { desc: "Button that opens the add to dashboard picker" });
+		return b`
+      <luzmo-action-button
+        id=${this._triggerId}
+        class="trigger"
+        size=${this.size}
+        aria-haspopup="true"
+        aria-expanded=${this._open ? "true" : "false"}
+        ?disabled=${this.disabled || this._saving}
+      >
+        ${this._saving ? b`<luzmo-progress-circle class="trigger-spinner" slot="icon" indeterminate .label=${e}></luzmo-progress-circle>` : b`<luzmo-icon slot="icon" size="xs" .icon=${y}></luzmo-icon>`}
+        ${e}
+        <luzmo-icon class="trigger-chevron" size="xs" .icon=${l}></luzmo-icon>
+      </luzmo-action-button>
+      <luzmo-overlay
+        type="auto"
+        placement=${this.placement}
+        trigger=${`${this._triggerId}@click`}
+        .open=${this._open}
+        @luzmo-opened=${this._handleOpened}
+        @luzmo-closed=${this._handleClosed}
+      >
+        <luzmo-popover>
+          <div class="picker">${this._open ? this._renderPicker() : x}</div>
+        </luzmo-popover>
+      </luzmo-overlay>
+      <div class="status">${this._renderStatus()}</div>
+    `;
+	}
+};
+// src/components/add-to-dashboard/index.ts
+r([C({ attribute: !1 })], $.prototype, "chart", void 0), r([C({ attribute: !1 })], $.prototype, "dashboardActions", void 0), r([C({
+	type: String,
+	attribute: "auth-key"
+})], $.prototype, "authKey", void 0), r([C({
+	type: String,
+	attribute: "auth-token"
+})], $.prototype, "authToken", void 0), r([C({
+	type: String,
+	attribute: "api-url"
+})], $.prototype, "apiUrl", void 0), r([C({
+	type: String,
+	reflect: !0
+})], $.prototype, "placement", void 0), r([C({
+	type: Boolean,
+	reflect: !0
+})], $.prototype, "disabled", void 0), r([T()], $.prototype, "_open", void 0), r([T()], $.prototype, "_actions", void 0), r([T()], $.prototype, "_step", void 0), r([T()], $.prototype, "_rows", void 0), r([T()], $.prototype, "_hasMore", void 0), r([T()], $.prototype, "_loading", void 0), r([T()], $.prototype, "_listFailed", void 0), r([T()], $.prototype, "_original", void 0), r([T()], $.prototype, "_variants", void 0), r([T()], $.prototype, "_variantsLoading", void 0), r([T()], $.prototype, "_variantsFailed", void 0), r([T()], $.prototype, "_pending", void 0), r([T()], $.prototype, "_screenModes", void 0), r([T()], $.prototype, "_saving", void 0), r([T()], $.prototype, "_status", void 0), r([w(".trigger")], $.prototype, "_triggerElement", void 0), r([w("luzmo-search")], $.prototype, "_searchElement", void 0), r([w(".header luzmo-action-button")], $.prototype, "_backElement", void 0), r([w("luzmo-notice")], $.prototype, "_noticeElement", void 0), $ = r([E()], $), typeof customElements < "u" && !customElements.get("luzmo-add-to-dashboard") && customElements.define("luzmo-add-to-dashboard", $);
+export { U as n, $ as t };