@luzmo/analytics-components-kit 1.3.0 → 2.0.0

package/components/{add-to-dashboard-DGC0_hRB.js → add-to-dashboard-B5egTFre.js}

@@ -18,22 +18,22 @@
  * SOFTWARE.
  * */
 import "./tokens-6HmQYnEP.js";
-import { i as e, n as t, t as n } from "./base-rAte-QzM.js";
+import { i as e, n as t, t as n } from "./base-BqwRKT4V.js";
 import { t as r } from "./decorate-B2TzfnLZ.js";
-import { t as i } from "./localized-mixin-FPDNaZhb.js";
+import { t as i } from "./localized-mixin-BdXrQldH.js";
 import { t as a } from "./data-broker-C1Iz71TN.js";
 import { t as o } from "./localize-BNystXyK.js";
-import { o as s } from "./chart-helpers-Cbl3sRra.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 { s } from "./chart-helpers-BKeMLhov.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 y, luzmoPlus as b, luzmoTablet as x } 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 { html as S, nothing as C, unsafeCSS as ee } from "lit";
+import { property as w, query as T, state as E } from "lit/decorators.js";
+import { localized as D, msg as O, str as k } from "@lit/localize";
 import "@luzmo/lucero/progress-circle";
 import "@luzmo/lucero/checkbox";
 import "@luzmo/lucero/divider";
@@ -41,16 +41,16 @@ 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";
+import { ifDefined as A } 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 = [
+var j = ":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}", M = "0.1.108", N = "0.1.0", P = [
 	"id",
 	"name",
 	"contents",
 	"modified_at",
 	"is_variant",
 	"original_id"
-], ne = /* @__PURE__ */ new Set(["designer", "owner"]), re = "flag_dashboard_variants", P = [
+], te = /* @__PURE__ */ new Set(["designer", "owner"]), ne = "flag_dashboard_variants", re = [
 	"desktop",
 	"tablet",
 	"mobile"
@@ -66,24 +66,29 @@ async function F(e, t, n) {
 		total: a
 	};
 }
-async function I(e) {
-	let t = await e.fetchApi("/user", {
+async function I(e, t) {
+	let n = (await e.fetchApi("/user", {
 		action: "get",
-		version: M,
+		version: N,
 		find: {
 			where: { id: "me" },
-			attributes: ["id", "flags"]
+			attributes: ["id", "flags"],
+			...t ? { include: [{
+				model: "Organization",
+				attributes: ["id"]
+			}] } : {}
 		}
-	});
+	})).rows?.[0];
 	return {
-		id: t.rows?.[0]?.id ?? "",
-		flags: t.rows?.[0]?.flags ?? []
+		id: n?.id ?? "",
+		flags: n?.flags ?? [],
+		organizations: n?.organizations
 	};
 }
 async function L(e, t) {
 	return (await e.fetchApi("/authorization", {
 		action: "get",
-		version: M,
+		version: N,
 		find: { where: { id: t } }
 	})).rows?.[0];
 }
@@ -96,7 +101,7 @@ async function R(e, t, n) {
 		}
 	}, i = await e.fetchApi("/securable", {
 		action: "get",
-		version: M,
+		version: N,
 		find: r
 	}, { signal: n });
 	return {
@@ -114,9 +119,9 @@ function z(e) {
 }
 function B() {
 	return {
-		version: j,
+		version: M,
 		syncScreenModes: !0,
-		views: P.map((e) => ({
+		views: re.map((e) => ({
 			screenModus: e,
 			options: { theme: { id: "default" } },
 			filterGroups: [],
@@ -153,7 +158,7 @@ async function U(e) {
 		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) => {
+	}), n = await L(t, e.authKey), r = n?.type === "embed", i = await I(t, !r), s = z(n), c = r ? te.has(n.role ?? "") : i.organizations?.[0]?.organizationRole?.flagEditor !== !1, l = !!i.id && i.flags.includes(ne), u = [...s.modifyIds, ...l ? s.useOnlyIds : []], d = u.length > 0 ? { id: { notIn: u } } : {}, f = (t, n = !1) => {
 		let r = [...new Set((t.contents?.views ?? []).map((e) => e.screenModus))];
 		return {
 			id: t.id,
@@ -162,68 +167,68 @@ async function U(e) {
 			screenModes: r.length > 0 ? r : ["desktop"],
 			...n ? { requiresVariant: n } : {}
 		};
-	}, f, p = (e, n) => async (r, a) => {
-		if (l.length === 0) return {
+	}, p, m = (e, n) => async (r, i) => {
+		if (u.length === 0) return {
 			count: 0,
 			rows: []
 		};
-		let o = r > 0 && f?.search === e ? f.rows : void 0;
-		return o || (o = (await R(t, {
+		let a = r > 0 && p?.search === e ? p.rows : void 0;
+		return a || (a = (await R(t, {
 			where: {
 				is_variant: !1,
 				archived_at: null,
-				id: { in: l }
+				id: { in: u }
 			},
-			attributes: N,
+			attributes: P,
 			...V(e)
-		}, n)).rows.map((e) => d(e, !i.modifyIds.has(e.id))).sort((e, t) => e.name.localeCompare(t.name)), f = {
+		}, n)).rows.map((e) => f(e, !s.modifyIds.has(e.id))).sort((e, t) => e.name.localeCompare(t.name)), p = {
 			search: e,
-			rows: o
+			rows: a
 		}), {
-			count: o.length,
-			rows: o.slice(r, r + a)
+			count: a.length,
+			rows: a.slice(r, r + i)
 		};
-	}, m = (e, r, i, a) => async (o, s) => {
+	}, h = (e, n, r, a) => async (o, s) => {
 		let c = await R(t, {
 			where: {
 				is_variant: !1,
 				archived_at: null,
-				...u
+				...d
 			},
-			attributes: N,
-			...H(n.id, i),
+			attributes: P,
+			...H(i.id, r),
 			...V(e),
 			limit: s,
 			offset: o,
 			order: [["modified_at", "desc"]]
-		}, r);
+		}, n);
 		return {
 			count: c.count,
-			rows: c.rows.map((e) => d(e, a))
+			rows: c.rows.map((e) => f(e, a))
 		};
-	}, h = async (e, n, r, i) => {
+	}, g = async (e, n, r, i) => {
 		await t.fetchApi("/securable", {
 			action: "update",
-			version: M,
+			version: N,
 			id: e,
 			properties: { append_item: {
 				item: n,
 				...r?.length ? { screenModes: r } : {}
 			} }
 		}, { signal: i });
-	}, g = async (e, n, r) => {
+	}, _ = async (e, n, r) => {
 		try {
-			await h(e.id, n, r);
+			await g(e.id, n, r);
 		} catch (n) {
 			throw await t.fetchApi("/securable", {
 				action: "delete",
-				version: M,
+				version: N,
 				id: e.id
 			}).catch(() => void 0), n;
 		}
-	}, _ = async (e, n) => await t.fetchApi("/securable", {
+	}, v = async (e, n) => await t.fetchApi("/securable", {
 		action: "create",
-		version: M,
+		version: N,
 		properties: {
 			...e,
 			type: "dashboard"
@@ -232,41 +237,41 @@ async function U(e) {
 	});
 	return {
 		async list(e, t) {
-			return n.id ? await F([
-				p(e.search, t.signal),
-				...c ? [m(e.search, t.signal, {
+			return i.id ? await F([
+				m(e.search, t.signal),
+				...l ? [h(e.search, t.signal, {
 					flagUse: !0,
 					flagModify: !1
 				}, !0)] : [],
-				m(e.search, t.signal, { flagModify: !0 }, !1)
+				h(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);
+			await g(e.id, t, n.screenModes, r.signal);
 		},
-		...s ? { async create(t, n) {
-			let r = await _({
+		...c ? { async create(t, n) {
+			let r = await v({
 				name: n.name ? { [e.language]: n.name } : {},
 				contents: B()
 			});
-			return await g(r, t, void 0), d(r);
+			return await _(r, t, void 0), f(r);
 		} } : {},
-		...c ? { async listVariants(e, r) {
+		...l ? { async listVariants(e, n) {
 			return (await R(t, {
 				where: {
 					is_variant: !0,
 					original_id: e.id,
 					archived_at: null
 				},
-				attributes: N,
-				...H(n.id, { flagModify: !0 }),
+				attributes: P,
+				...H(i.id, { flagModify: !0 }),
 				order: [["modified_at", "desc"]]
-			}, r.signal)).rows.map((e) => d(e));
+			}, n.signal)).rows.map((e) => f(e));
 		} } : {},
-		...c && s ? { async addToVariant(n, r, i) {
+		...l && c ? { async addToVariant(n, r, i) {
 			let a = (await R(t, {
 				where: { id: n.id },
 				attributes: [
@@ -275,8 +280,8 @@ async function U(e) {
 					"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 _({
+			if (!a?.contents) throw Error(O("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 v({
 				name: i.name ? {
 					...o,
 					[e.language]: i.name
@@ -286,7 +291,7 @@ async function U(e) {
 				role: "original",
 				id: n.id
 			}]);
-			return await g(s, r, i.screenModes), d({
+			return await _(s, r, i.screenModes), f({
 				...s,
 				contents: s.contents ?? a.contents
 			});
@@ -313,7 +318,7 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
 	}
 	static get styles() {
 		let e = super.styles ?? [];
-		return [...Array.isArray(e) ? e : [e], S(A)];
+		return [...Array.isArray(e) ? e : [e], ee(j)];
 	}
 	get _hasSource() {
 		return !!this.dashboardActions || !!(this.authKey && this.authToken);
@@ -367,41 +372,41 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
 		this.dispatchEvent(n);
 	}
 	_displayName(e) {
-		return e.name.trim() || D("Untitled dashboard", { desc: "Fallback name of a dashboard without a name" });
+		return e.name.trim() || O("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" });
+		return O(k`${n} (variant ${t})`, { desc: "Name of a new dashboard variant" });
 	}
 	_screenModeChoices() {
 		return [
 			{
 				name: "mobile",
-				label: D("Smartphone", { desc: "Screen mode name" }),
+				label: O("Smartphone", { desc: "Screen mode name" }),
 				size: "< 768px",
-				icon: ee
+				icon: y
 			},
 			{
 				name: "tablet",
-				label: D("Tablet", { desc: "Screen mode name" }),
+				label: O("Tablet", { desc: "Screen mode name" }),
 				size: "≥ 768px",
-				icon: te
+				icon: x
 			},
 			{
 				name: "desktop",
-				label: D("Desktop", { desc: "Screen mode name" }),
+				label: O("Desktop", { desc: "Screen mode name" }),
 				size: "≥ 1200px",
 				icon: _
 			},
 			{
 				name: "largeScreen",
-				label: D("Large screen", { desc: "Screen mode name" }),
+				label: O("Large screen", { desc: "Screen mode name" }),
 				size: "≥ 1600px",
 				icon: g
 			},
 			{
 				name: "fixed",
-				label: D("Fixed width", { desc: "Screen mode name" }),
+				label: O("Fixed width", { desc: "Screen mode name" }),
 				icon: m
 			}
 		];
@@ -567,50 +572,50 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
 		await e?.updateComplete, e?.focus();
 	}
 	_renderRow(e) {
-		return b`
+		return S`
       <luzmo-menu-item value=${e.id} no-wrap ?disabled=${this._saving}>
-        ${e.thumbnailUrl ? b`<img slot="icon" class="thumbnail" alt="" src=${e.thumbnailUrl} />` : x}
+        ${e.thumbnailUrl ? S`<img slot="icon" class="thumbnail" alt="" src=${e.thumbnailUrl} />` : C}
         ${this._displayName(e)}
-        ${e.requiresVariant ? b`<luzmo-icon slot="value" class="drill-in" size="xs" block .icon=${this.isLTR ? d : u}></luzmo-icon>` : x}
+        ${e.requiresVariant ? S`<luzmo-icon slot="value" class="drill-in" size="xs" block .icon=${this.isLTR ? d : u}></luzmo-icon>` : C}
       </luzmo-menu-item>
     `;
 	}
 	_renderCreateRow(e, t, n, r = !1) {
 		let i = `${this._triggerId}-${e}-reason`;
-		return b`
+		return S`
       <luzmo-menu-item
         class="create-row"
         value=${e}
         label=${t}
-        aria-describedby=${k(n ? i : void 0)}
+        aria-describedby=${A(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-icon slot="icon" size="s" .icon=${b}></luzmo-icon>
+        ${t} ${n ? S`<span slot="description" id=${i}>${n}</span>` : C}
       </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>`;
+		let e = O("Loading", { desc: "Loading spinner label" });
+		return S`<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`
+		return S`
       <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}
+        ${t ? S`<luzmo-button size="s" treatment="outline" @click=${() => this._handleRetry(t)}>${O("Retry", { desc: "Retry a failed request" })}</luzmo-button>` : C}
       </div>
     `;
 	}
 	_renderHeader(e) {
-		return b`
+		return S`
       <div class="header">
-        <luzmo-action-button size="s" quiet label=${D("Back", { desc: "Go back to the previous step" })} @click=${this._handleBack}>
+        <luzmo-action-button size="s" quiet label=${O("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"
@@ -620,16 +625,16 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
     `;
 	}
 	_renderList() {
-		let e = this._actions && !this._actions.create ? D("These credentials cannot create dashboards", {
+		let e = this._actions && !this._actions.create ? O("These credentials cannot create dashboards", {
 			id: "add-to-dashboard-cannot-create",
 			desc: "Why a new dashboard cannot be created"
 		}) : void 0;
-		return b`
+		return S`
       <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" })}
+        label=${O("Search dashboards", { desc: "Label of the dashboard search field" })}
+        placeholder=${O("Search dashboards", { desc: "Label of the dashboard search field" })}
         .value=${this._search}
         @input=${this._handleSearchInput}
         @submit=${(e) => e.preventDefault()}
@@ -637,42 +642,42 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
       <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._renderCreateRow(X, O("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}
+          ${this._listFailed ? this._renderEmpty(O("Failed to load dashboards", { desc: "Dashboard list failed to load" }), () => this._loadList()) : !this._loading && this._rows.length === 0 ? this._renderEmpty(O("No dashboards found", { desc: "Dashboard list is empty" })) : C}
+          ${this._loading ? this._renderLoading() : C}
         </div>
       </div>
     `;
 	}
 	_renderVariants(e) {
-		let t = this._actions?.addToVariant ? void 0 : D("These credentials cannot create variants", {
+		let t = this._actions?.addToVariant ? void 0 : O("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`
+		return S`
       ${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._renderCreateRow(Z, O("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}
+          ${this._variantsFailed ? this._renderEmpty(O("Failed to load variants", { desc: "Variant list failed to load" }), () => this._loadVariants()) : !this._variantsLoading && this._variants.length === 0 ? this._renderEmpty(O("No variants yet", { desc: "Variant list is empty" })) : C}
+          ${this._variantsLoading ? this._renderLoading() : C}
         </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`
+		return S`
       ${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-field-group class="screen-modes" vertical label=${O("Screen modes", { desc: "Label of the group of screen-mode checkboxes" })}>
+        ${this._screenModeChoices().filter((e) => r.includes(e.name)).map((e) => S`
               <luzmo-checkbox
                 size="s"
                 ?checked=${this._screenModes.includes(e.name)}
@@ -681,14 +686,14 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
                 <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}
+                  ${e.size ? S`<span class="screen-mode-size" dir="ltr">${e.size}</span>` : C}
                 </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" })}
+          ${O("Confirm", { desc: "Confirm the selected screen modes" })}
         </luzmo-button>
       </div>
     `;
@@ -697,15 +702,15 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
 		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", {
+		return { close: O("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`
+		if (!e) return C;
+		if (e.kind === "error") return S`
         <luzmo-notice
           class="alert"
           size="s"
@@ -715,11 +720,11 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
           @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>
+          <span class="alert-text" dir="auto">${e.message ?? O("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`
+		let t = this._displayName(e.dashboard), n = S`<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 S`
       <luzmo-notice
         class="alert"
         size="s"
@@ -730,24 +735,24 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
       >
         <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`
+          <span class="alert-text" dir="auto">${O(S`Item copied to ${n}`, { desc: "The chart was saved to a dashboard" })}</span>
+          ${r && !e.isVariant ? S`
                   <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", {
+                    ${O("Open", {
 			id: "add-to-dashboard-open",
 			desc: "Open the dashboard the chart was saved to"
 		})}
                   </luzmo-action-button>
-                ` : x}
+                ` : C}
         </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`
+		if (!this.chart || !this._hasSource) return C;
+		let e = this._saving ? O("Adding to dashboard", { desc: "The chart is being saved to a dashboard" }) : O("Add to dashboard", { desc: "Button that opens the add to dashboard picker" });
+		return S`
       <luzmo-action-button
         id=${this._triggerId}
         class="trigger"
@@ -756,7 +761,7 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
         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>`}
+        ${this._saving ? S`<luzmo-progress-circle class="trigger-spinner" slot="icon" indeterminate .label=${e}></luzmo-progress-circle>` : S`<luzmo-icon slot="icon" size="xs" .icon=${b}></luzmo-icon>`}
         ${e}
         <luzmo-icon class="trigger-chevron" size="xs" .icon=${l}></luzmo-icon>
       </luzmo-action-button>
@@ -769,7 +774,7 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
         @luzmo-closed=${this._handleClosed}
       >
         <luzmo-popover>
-          <div class="picker">${this._open ? this._renderPicker() : x}</div>
+          <div class="picker">${this._open ? this._renderPicker() : C}</div>
         </luzmo-popover>
       </luzmo-overlay>
       <div class="status">${this._renderStatus()}</div>
@@ -777,20 +782,20 @@ var K = 20, q = 300, J = 8, Y = 48, X = "__luzmo-new-dashboard", Z = "__luzmo-ne
 	}
 };
 // 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({
+r([w({ attribute: !1 })], $.prototype, "chart", void 0), r([w({ attribute: !1 })], $.prototype, "dashboardActions", void 0), r([w({
 	type: String,
 	attribute: "auth-key"
-})], $.prototype, "authKey", void 0), r([C({
+})], $.prototype, "authKey", void 0), r([w({
 	type: String,
 	attribute: "auth-token"
-})], $.prototype, "authToken", void 0), r([C({
+})], $.prototype, "authToken", void 0), r([w({
 	type: String,
 	attribute: "api-url"
-})], $.prototype, "apiUrl", void 0), r([C({
+})], $.prototype, "apiUrl", void 0), r([w({
 	type: String,
 	reflect: !0
-})], $.prototype, "placement", void 0), r([C({
+})], $.prototype, "placement", void 0), r([w({
 	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", $);
+})], $.prototype, "disabled", void 0), r([E()], $.prototype, "_open", void 0), r([E()], $.prototype, "_actions", void 0), r([E()], $.prototype, "_step", void 0), r([E()], $.prototype, "_rows", void 0), r([E()], $.prototype, "_hasMore", void 0), r([E()], $.prototype, "_loading", void 0), r([E()], $.prototype, "_listFailed", void 0), r([E()], $.prototype, "_original", void 0), r([E()], $.prototype, "_variants", void 0), r([E()], $.prototype, "_variantsLoading", void 0), r([E()], $.prototype, "_variantsFailed", void 0), r([E()], $.prototype, "_pending", void 0), r([E()], $.prototype, "_screenModes", void 0), r([E()], $.prototype, "_saving", void 0), r([E()], $.prototype, "_status", void 0), r([T(".trigger")], $.prototype, "_triggerElement", void 0), r([T("luzmo-search")], $.prototype, "_searchElement", void 0), r([T(".header luzmo-action-button")], $.prototype, "_backElement", void 0), r([T("luzmo-notice")], $.prototype, "_noticeElement", void 0), $ = r([D()], $), typeof customElements < "u" && !customElements.get("luzmo-add-to-dashboard") && customElements.define("luzmo-add-to-dashboard", $);
 export { U as n, $ as t };