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

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

@@ -1,805 +0,0 @@
-/*! * 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-Ov1pCR4Y.js";
-import { i as e, n as t, t as n } from "./base-ClbyBq3g.js";
-import { t as r } from "./decorate-DyMgX_Uh.js";
-import { t as i } from "./localized-mixin-Dv4dT_Qo.js";
-import { t as a } from "./data-broker-DNfq_8Lg.js";
-import { t as o } from "./localize-BT7REYBY.js";
-import { o as s } from "./chart-helpers-DQS2iqSd.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";
-//#region 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-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("The dashboard was not found.");
-			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
-			});
-		} } : {}
-	};
-}
-//#endregion
-//#region 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;
-}
-//#endregion
-//#region 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) {
-		return D(O`${this._displayName(e)} (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);
-		if (n) {
-			if (n.requiresVariant) {
-				this._original = n, this._step = "variants", this._loadVariants();
-				return;
-			}
-			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) {
-		if (t.syncScreenModes !== !1 || !t.screenModes?.length) {
-			this._save(e);
-			return;
-		}
-		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" }), 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() {
-		return b`<div class="loading"><luzmo-progress-circle size="s" indeterminate .label=${D("Loading", { desc: "Loading spinner label" })}></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">${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>
-    `;
-	}
-};
-//#endregion
-//#region 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", $);
-//#endregion
-export { U as n, $ as t };