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

package/components/add-to-dashboard/add-to-dashboard.d.ts

@@ -0,0 +1,134 @@
+import type { Placement } from '@luzmo/lucero';
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/button';
+import '@luzmo/lucero/checkbox';
+import '@luzmo/lucero/divider';
+import '@luzmo/lucero/field-group';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/menu';
+import '@luzmo/lucero/notice';
+import '@luzmo/lucero/overlay';
+import '@luzmo/lucero/popover';
+import '@luzmo/lucero/progress-circle';
+import '@luzmo/lucero/search';
+import '@luzmo/lucero/tooltip';
+import { CSSResultArray, nothing, PropertyValues, TemplateResult } from 'lit';
+import type { DashboardActions } from '../../types/add-to-dashboard.types';
+import { LuzmoElement } from '../../utils/base';
+import type { FlexChartConfig } from '../interactive-viz-item/types';
+declare const LuzmoAddToDashboard_base: (new (...args: any[]) => {
+    language: string;
+}) & typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-add-to-dashboard
+ * @description "Add to dashboard" button and picker for one chart: search and page through the dashboards the
+ * credentials can modify, create a new dashboard, drill into the variants of a use-only dashboard, and pick screen
+ * modes for a dashboard that does not sync them. Saves through `dashboardActions` when set, otherwise through the
+ * built-in adapter on `authKey`/`authToken`/`apiUrl`, otherwise renders nothing.
+ * @fires {CustomEvent<AddToDashboardChartAddedEventDetail>} luzmo-chart-added - Fired after the chart was saved to a dashboard, a new dashboard or a variant.
+ * @fires {CustomEvent<AddToDashboardChartAddFailedEventDetail>} luzmo-chart-add-failed - Fired when saving the chart failed.
+ * @attr auth-key - Auth key for the built-in adapter (`authKey`).
+ * @attr auth-token - Auth token for the built-in adapter (`authToken`).
+ * @attr api-url - API URL for the built-in adapter (`apiUrl`).
+ * @cssprop --luzmo-add-to-dashboard-picker-width - Width of the picker popover.
+ * @cssprop --luzmo-add-to-dashboard-list-max-height - Maximum height of the scrolling dashboard list.
+ */
+export declare class LuzmoAddToDashboard extends LuzmoAddToDashboard_base {
+    static get styles(): CSSResultArray;
+    /** Chart to save; `options.theme` is removed before it reaches the adapter. */
+    chart: FlexChartConfig | null;
+    /** Host data operations. When unset, the built-in adapter on the auth properties is used. */
+    dashboardActions: DashboardActions | null;
+    /** Auth key for the built-in adapter. */
+    authKey: string;
+    /** Auth token for the built-in adapter. */
+    authToken: string;
+    /**
+     * API URL for the built-in adapter.
+     * @default https://api.luzmo.com
+     */
+    apiUrl: string;
+    /** Placement of the picker relative to the button. */
+    placement: Placement;
+    /** When present, the button is disabled. */
+    disabled: boolean;
+    private _open;
+    private _actions;
+    private _step;
+    private _rows;
+    private _hasMore;
+    private _loading;
+    private _listFailed;
+    private _original;
+    private _variants;
+    private _variantsLoading;
+    private _variantsFailed;
+    private _pending;
+    private _screenModes;
+    private _saving;
+    private _status;
+    private _triggerElement;
+    private _searchElement;
+    private _backElement;
+    private _noticeElement;
+    private readonly _triggerId;
+    private _search;
+    private _searchTimer?;
+    private _listAbort?;
+    private _variantsAbort?;
+    private _saveAbort?;
+    private _alertResizeObserver?;
+    private _actionsGeneration;
+    private _reloadOnUpdate;
+    private get _hasSource();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changes: PropertyValues<this>): void;
+    protected updated(changes: PropertyValues): void;
+    private get _alertContainer();
+    private _startFittingAlert;
+    private _stopFittingAlert;
+    private _fitAlert;
+    private _resolveActions;
+    private _dispatch;
+    private _displayName;
+    private _variantName;
+    private _screenModeChoices;
+    private _handleOpened;
+    private _loadList;
+    private _handleClosed;
+    private _loadPage;
+    private _handleSearchInput;
+    private _handleListScroll;
+    private _menuValue;
+    private _handleListChange;
+    private _handleVariantChange;
+    private _selectTarget;
+    private _loadVariants;
+    private _handleBack;
+    private _toggleScreenMode;
+    private _handleConfirmScreenModes;
+    private _save;
+    private _setStatus;
+    private _focusTrigger;
+    private _isFocusLost;
+    private _handleNoticeClose;
+    private _focusStep;
+    private _renderRow;
+    private _renderCreateRow;
+    private _renderLoading;
+    private _handleRetry;
+    private _renderEmpty;
+    private _renderHeader;
+    private _renderList;
+    private _renderVariants;
+    private _renderScreenModes;
+    private _renderPicker;
+    private _noticeLabels;
+    private _renderStatus;
+    protected render(): TemplateResult | typeof nothing;
+}
+export {};

package/components/add-to-dashboard/dashboard-actions.d.ts

@@ -0,0 +1,14 @@
+import type { BuiltInDashboardActionsConfig, DashboardActions, DashboardListPage, DashboardOption } from '../../types/add-to-dashboard.types';
+type DashboardSource = (offset: number, limit: number) => Promise<{
+    count: number;
+    rows: DashboardOption[];
+}>;
+export declare function pageAcrossSources(sources: DashboardSource[], offset: number, limit: number): Promise<DashboardListPage>;
+/**
+ * Built-in `DashboardActions` on the public API with the given credentials. Rights come from the token: an
+ * embed token's `access.dashboards` grants plus the user's own access rights. `create` is only present for
+ * an embed token with a designer or owner role or for any other token type. With the `flag_dashboard_variants`
+ * user flag, use-only dashboards and their variants are listed, and `addToVariant` follows the `create` rule.
+ */
+export declare function createDashboardActions(config: BuiltInDashboardActionsConfig): Promise<DashboardActions>;
+export {};

package/components/add-to-dashboard/helpers/add-to-dashboard-helpers.d.ts

@@ -0,0 +1,3 @@
+import type { FlexChartConfig, NormalizedChartConfig } from '../../interactive-viz-item/types';
+export declare function toDashboardChart(chart: FlexChartConfig): NormalizedChartConfig;
+export declare function nextVariantNumber(takenNames: string[], nameFor: (number: number) => string): number;

package/components/add-to-dashboard/index.cjs

@@ -0,0 +1,20 @@
+/*! * 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.
+ * */
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../add-to-dashboard-hx-THahq.cjs");Object.defineProperty(exports,"LuzmoAddToDashboard",{enumerable:!0,get:function(){return e.t}}),exports.createDashboardActions=e.n;

package/components/add-to-dashboard/index.d.ts

@@ -0,0 +1,11 @@
+import { LuzmoAddToDashboard } from './add-to-dashboard';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-add-to-dashboard': LuzmoAddToDashboard;
+    }
+}
+export { LuzmoAddToDashboard } from './add-to-dashboard';
+export { createDashboardActions } from './dashboard-actions';
+export type { AddToDashboardChartAddedEventDetail, AddToDashboardChartAddFailedEventDetail } from './types';
+export type { FlexChartConfig } from '../interactive-viz-item/types';
+export type { AddToDashboardSettings, BuiltInDashboardActionsConfig, DashboardActionCallOptions, DashboardActions, DashboardListPage, DashboardListRequest, DashboardOption } from '../../types/add-to-dashboard.types';

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

@@ -0,0 +1,21 @@
+/*! * 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 { n as e, t } from "../add-to-dashboard-iOGXy8fd.js";
+export { t as LuzmoAddToDashboard, e as createDashboardActions };

package/components/add-to-dashboard/types.d.ts

@@ -0,0 +1,7 @@
+import type { DashboardOption } from '../../types/add-to-dashboard.types';
+export interface AddToDashboardChartAddedEventDetail {
+    dashboard: DashboardOption;
+}
+export interface AddToDashboardChartAddFailedEventDetail {
+    error: unknown;
+}

package/components/add-to-dashboard-hx-THahq.cjs

@@ -0,0 +1,166 @@
+/*! * 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.
+ * */
+require("./tokens-BWMfo_w4.cjs");const e=require("./base-CKmSGxB1.cjs"),t=require("./decorate-DCJt-2rt.cjs"),n=require("./localized-mixin-5ebEzU91.cjs"),r=require("./data-broker-DWgqaHoY.cjs"),i=require("./localize-D3i4Epy_.cjs"),a=require("./chart-helpers-ufZ6VbXs.cjs");let o=require("@luzmo/icons");require("@luzmo/lucero/button"),require("@luzmo/lucero/icon"),require("@luzmo/lucero/overlay"),require("@luzmo/lucero/popover");let s=require("lit"),c=require("lit/decorators.js"),l=require("@lit/localize");require("@luzmo/lucero/action-button"),require("@luzmo/lucero/tooltip"),require("@luzmo/lucero/progress-circle"),require("@luzmo/lucero/checkbox"),require("@luzmo/lucero/divider"),require("@luzmo/lucero/field-group"),require("@luzmo/lucero/menu"),require("@luzmo/lucero/notice"),require("@luzmo/lucero/search");let u=require("lit/directives/if-defined.js");var d=`: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}`,f=`0.1.104`,p=`0.1.0`,m=[`id`,`name`,`contents`,`modified_at`,`is_variant`,`original_id`],h=new Set([`designer`,`owner`]),g=`flag_dashboard_variants`,_=[`desktop`,`tablet`,`mobile`];async function v(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 y(e){let t=await e.fetchApi(`/user`,{action:`get`,version:p,find:{where:{id:`me`},attributes:[`id`,`flags`]}});return{id:t.rows?.[0]?.id??``,flags:t.rows?.[0]?.flags??[]}}async function b(e,t){return(await e.fetchApi(`/authorization`,{action:`get`,version:p,find:{where:{id:t}}})).rows?.[0]}async function x(e,t,n){let r={...t,where:{...t.where,type:`dashboard`}},i=await e.fetchApi(`/securable`,{action:`get`,version:p,find:r},{signal:n});return{rows:i.rows??[],count:i.count??i.rows?.length??0}}function S(e){let t={modifyIds:new Set,useOnlyIds: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 C(){return{version:f,syncScreenModes:!0,views:_.map(e=>({screenModus:e,options:{theme:{id:`default`}},filterGroups:[],items:[]})),timezone:{type:`fixed`,id:`UTC`}}}function w(e){return e?{search:{match_types:[`name`,`description`],keyphrase:e,securable_types:[`dashboard`]}}:{}}function T(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 E(e){let t=new r.t({apiUrl:e.apiUrl,authKey:e.authKey,authToken:e.authToken,skipNetworkListeners:!0}),[n,a]=await Promise.all([y(t),b(t,e.authKey)]),o=S(a),s=a?.type!==`embed`||h.has(a.role??``),c=!!n.id&&n.flags.includes(g),l=[...o.modifyIds,...c?o.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:i.t(t.name??{},e.language),syncScreenModes:t.contents?.syncScreenModes!==!1,screenModes:r.length>0?r:[`desktop`],...n?{requiresVariant:n}:{}}},f,_=(e,n)=>async(r,i)=>{if(l.length===0)return{count:0,rows:[]};let a=r>0&&f?.search===e?f.rows:void 0;return a||(a=(await x(t,{where:{is_variant:!1,archived_at:null,id:{in:l}},attributes:m,...w(e)},n)).rows.map(e=>d(e,!o.modifyIds.has(e.id))).sort((e,t)=>e.name.localeCompare(t.name)),f={search:e,rows:a}),{count:a.length,rows:a.slice(r,r+i)}},E=(e,r,i,a)=>async(o,s)=>{let c=await x(t,{where:{is_variant:!1,archived_at:null,...u},attributes:m,...T(n.id,i),...w(e),limit:s,offset:o,order:[[`modified_at`,`desc`]]},r);return{count:c.count,rows:c.rows.map(e=>d(e,a))}},D=async(e,n,r,i)=>{await t.fetchApi(`/securable`,{action:`update`,version:p,id:e,properties:{append_item:{item:n,...r?.length?{screenModes:r}:{}}}},{signal:i})},O=async(e,n,r)=>{try{await D(e.id,n,r)}catch(n){throw await t.fetchApi(`/securable`,{action:`delete`,version:p,id:e.id}).catch(()=>void 0),n}},k=async(e,n)=>await t.fetchApi(`/securable`,{action:`create`,version:p,properties:{...e,type:`dashboard`},associations:n});return{async list(e,t){return n.id?await v([_(e.search,t.signal),...c?[E(e.search,t.signal,{flagUse:!0,flagModify:!1},!0)]:[],E(e.search,t.signal,{flagModify:!0},!1)],e.offset,e.limit):{rows:[],total:0}},async add(e,t,n,r){await D(e.id,t,n.screenModes,r.signal)},...s?{async create(t,n){let r=await k({name:n.name?{[e.language]:n.name}:{},contents:C()});return await O(r,t,void 0),d(r)}}:{},...c?{async listVariants(e,r){return(await x(t,{where:{is_variant:!0,original_id:e.id,archived_at:null},attributes:m,...T(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 x(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 k({name:i.name?{...o,[e.language]:i.name}:o,contents:a.contents},[{role:`original`,id:n.id}]);return await O(s,r,i.screenModes),d({...s,contents:s.contents??a.contents})}}:{}}}function D(e){let{theme:t,...n}=e.options??{};return{...a.o(e),options:n}}function O(e,t){let n=new Set(e),r=e.length+1;for(;n.has(t(r));)r+=1;return r}var k=20,A=300,j=8,M=48,N=`__luzmo-new-dashboard`,P=`__luzmo-new-variant`,F=new Map,I=0,L=class extends n.t(e.n(e.i,{validSizes:Object.values(e.t)})){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-${++I}`,this._search=``,this._actionsGeneration=0,this._reloadOnUpdate=!1}static get styles(){let e=super.styles??[];return[...Array.isArray(e)?e:[e],(0,s.unsafeCSS)(d)]}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=F.get(t);return n||(F.clear(),n=E(e),F.set(t,n),n.catch(()=>F.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()||(0,l.msg)(`Untitled dashboard`,{desc:`Fallback name of a dashboard without a name`})}_variantName(e,t){return(0,l.msg)(l.str`${this._displayName(e)} (variant ${t})`,{desc:`Name of a new dashboard variant`})}_screenModeChoices(){return[{name:`mobile`,label:(0,l.msg)(`Smartphone`,{desc:`Screen mode name`}),size:`< 768px`,icon:o.luzmoMobile},{name:`tablet`,label:(0,l.msg)(`Tablet`,{desc:`Screen mode name`}),size:`≥ 768px`,icon:o.luzmoTablet},{name:`desktop`,label:(0,l.msg)(`Desktop`,{desc:`Screen mode name`}),size:`≥ 1200px`,icon:o.luzmoLaptop},{name:`largeScreen`,label:(0,l.msg)(`Large screen`,{desc:`Screen mode name`}),size:`≥ 1600px`,icon:o.luzmoDesktop},{name:`fixed`,label:(0,l.msg)(`Fixed width`,{desc:`Screen mode name`}),icon:o.luzmoArrowsHorizontal}]}async _handleOpened(){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(){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),A)}_handleListScroll(e){let t=e.target;this._hasMore&&!this._loading&&t.scrollHeight-t.scrollTop-t.clientHeight<=M&&this._loadPage(!0)}_menuValue(e){return e.stopPropagation(),e.target.value??``}_handleListChange(e){let t=this._menuValue(e);if(t===N){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===P){if(!this._actions?.addToVariant)return;let e=this._variants.map(e=>this._displayName(e)),t=this._variantName(n,O(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=D(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 s.html`
+      <luzmo-menu-item value=${e.id} no-wrap ?disabled=${this._saving}>
+        ${e.thumbnailUrl?s.html`<img slot="icon" class="thumbnail" alt="" src=${e.thumbnailUrl} />`:s.nothing}
+        ${this._displayName(e)}
+        ${e.requiresVariant?s.html`<luzmo-icon slot="value" class="drill-in" size="xs" block .icon=${this.isLTR?o.luzmoAngleRight:o.luzmoAngleLeft}></luzmo-icon>`:s.nothing}
+      </luzmo-menu-item>
+    `}_renderCreateRow(e,t,n,r=!1){let i=`${this._triggerId}-${e}-reason`;return s.html`
+      <luzmo-menu-item
+        class="create-row"
+        value=${e}
+        label=${t}
+        aria-describedby=${(0,u.ifDefined)(n?i:void 0)}
+        no-wrap
+        ?disabled=${this._saving||r||!!n}
+      >
+        <luzmo-icon slot="icon" size="s" .icon=${o.luzmoPlus}></luzmo-icon>
+        ${t} ${n?s.html`<span slot="description" id=${i}>${n}</span>`:s.nothing}
+      </luzmo-menu-item>
+    `}_renderLoading(){return s.html`<div class="loading"><luzmo-progress-circle size="s" indeterminate .label=${(0,l.msg)(`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 s.html`
+      <div class="empty">
+        <span>${e}</span>
+        ${t?s.html`<luzmo-button size="s" treatment="outline" @click=${()=>this._handleRetry(t)}>${(0,l.msg)(`Retry`,{desc:`Retry a failed request`})}</luzmo-button>`:s.nothing}
+      </div>
+    `}_renderHeader(e){return s.html`
+      <div class="header">
+        <luzmo-action-button size="s" quiet label=${(0,l.msg)(`Back`,{desc:`Go back to the previous step`})} @click=${this._handleBack}>
+          <luzmo-icon slot="icon" size="xs" .icon=${this.isLTR?o.luzmoArrowLeft:o.luzmoArrowRight}></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?(0,l.msg)(`These credentials cannot create dashboards`,{id:`add-to-dashboard-cannot-create`,desc:`Why a new dashboard cannot be created`}):void 0;return s.html`
+      <luzmo-search
+        size="s"
+        border="none"
+        label=${(0,l.msg)(`Search dashboards`,{desc:`Label of the dashboard search field`})}
+        placeholder=${(0,l.msg)(`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(N,(0,l.msg)(`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((0,l.msg)(`Failed to load dashboards`,{desc:`Dashboard list failed to load`}),()=>this._loadList()):!this._loading&&this._rows.length===0?this._renderEmpty((0,l.msg)(`No dashboards found`,{desc:`Dashboard list is empty`})):s.nothing}
+          ${this._loading?this._renderLoading():s.nothing}
+        </div>
+      </div>
+    `}_renderVariants(e){let t=this._actions?.addToVariant?void 0:(0,l.msg)(`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 s.html`
+      ${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(P,(0,l.msg)(`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((0,l.msg)(`Failed to load variants`,{desc:`Variant list failed to load`}),()=>this._loadVariants()):!this._variantsLoading&&this._variants.length===0?this._renderEmpty((0,l.msg)(`No variants yet`,{desc:`Variant list is empty`})):s.nothing}
+          ${this._variantsLoading?this._renderLoading():s.nothing}
+        </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 s.html`
+      ${this._renderHeader(n)}
+      <luzmo-field-group class="screen-modes" vertical label=${(0,l.msg)(`Screen modes`,{desc:`Label of the group of screen-mode checkboxes`})}>
+        ${this._screenModeChoices().filter(e=>r.includes(e.name)).map(e=>s.html`
+              <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?s.html`<span class="screen-mode-size" dir="ltr">${e.size}</span>`:s.nothing}
+                </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}>
+          ${(0,l.msg)(`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:(0,l.msg)(`Close`,{id:`add-to-dashboard-close`,desc:`Close the save result notice`})}}_renderStatus(){let e=this._status;if(!e)return s.nothing;if(e.kind===`error`)return s.html`
+        <luzmo-notice
+          class="alert"
+          size="s"
+          variant="negative"
+          .duration=${j}
+          .labels=${this._noticeLabels()}
+          @luzmo-notice-close=${this._handleNoticeClose}
+        >
+          <luzmo-icon slot="icon" .icon=${o.luzmoAlertOutline}></luzmo-icon>
+          <span class="alert-text">${(0,l.msg)(`Failed to copy item`,{desc:`Saving the chart to a dashboard failed`})}</span>
+        </luzmo-notice>
+      `;let t=this._displayName(e.dashboard),n=s.html`<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.html`
+      <luzmo-notice
+        class="alert"
+        size="s"
+        variant="positive"
+        .duration=${j}
+        .labels=${this._noticeLabels()}
+        @luzmo-notice-close=${this._handleNoticeClose}
+      >
+        <luzmo-icon slot="icon" .icon=${o.luzmoCheckCircleOutline}></luzmo-icon>
+        <div class="alert-body">
+          <span class="alert-text" dir="auto">${(0,l.msg)(s.html`Item copied to ${n}`,{desc:`The chart was saved to a dashboard`})}</span>
+          ${r&&!e.isVariant?s.html`
+                  <luzmo-action-button class="alert-open" size="s" quiet @click=${()=>r(e.dashboard)}>
+                    <luzmo-icon slot="icon" size="xs" .icon=${o.luzmoLink}></luzmo-icon>
+                    ${(0,l.msg)(`Open`,{id:`add-to-dashboard-open`,desc:`Open the dashboard the chart was saved to`})}
+                  </luzmo-action-button>
+                `:s.nothing}
+        </div>
+      </luzmo-notice>
+    `}render(){if(!this.chart||!this._hasSource)return s.nothing;let e=this._saving?(0,l.msg)(`Adding to dashboard`,{desc:`The chart is being saved to a dashboard`}):(0,l.msg)(`Add to dashboard`,{desc:`Button that opens the add to dashboard picker`});return s.html`
+      <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?s.html`<luzmo-progress-circle class="trigger-spinner" slot="icon" indeterminate .label=${e}></luzmo-progress-circle>`:s.html`<luzmo-icon slot="icon" size="xs" .icon=${o.luzmoPlus}></luzmo-icon>`}
+        ${e}
+        <luzmo-icon class="trigger-chevron" size="xs" .icon=${o.luzmoAngleDown}></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():s.nothing}</div>
+        </luzmo-popover>
+      </luzmo-overlay>
+      <div class="status">${this._renderStatus()}</div>
+    `}};t.t([(0,c.property)({attribute:!1})],L.prototype,`chart`,void 0),t.t([(0,c.property)({attribute:!1})],L.prototype,`dashboardActions`,void 0),t.t([(0,c.property)({type:String,attribute:`auth-key`})],L.prototype,`authKey`,void 0),t.t([(0,c.property)({type:String,attribute:`auth-token`})],L.prototype,`authToken`,void 0),t.t([(0,c.property)({type:String,attribute:`api-url`})],L.prototype,`apiUrl`,void 0),t.t([(0,c.property)({type:String,reflect:!0})],L.prototype,`placement`,void 0),t.t([(0,c.property)({type:Boolean,reflect:!0})],L.prototype,`disabled`,void 0),t.t([(0,c.state)()],L.prototype,`_open`,void 0),t.t([(0,c.state)()],L.prototype,`_actions`,void 0),t.t([(0,c.state)()],L.prototype,`_step`,void 0),t.t([(0,c.state)()],L.prototype,`_rows`,void 0),t.t([(0,c.state)()],L.prototype,`_hasMore`,void 0),t.t([(0,c.state)()],L.prototype,`_loading`,void 0),t.t([(0,c.state)()],L.prototype,`_listFailed`,void 0),t.t([(0,c.state)()],L.prototype,`_original`,void 0),t.t([(0,c.state)()],L.prototype,`_variants`,void 0),t.t([(0,c.state)()],L.prototype,`_variantsLoading`,void 0),t.t([(0,c.state)()],L.prototype,`_variantsFailed`,void 0),t.t([(0,c.state)()],L.prototype,`_pending`,void 0),t.t([(0,c.state)()],L.prototype,`_screenModes`,void 0),t.t([(0,c.state)()],L.prototype,`_saving`,void 0),t.t([(0,c.state)()],L.prototype,`_status`,void 0),t.t([(0,c.query)(`.trigger`)],L.prototype,`_triggerElement`,void 0),t.t([(0,c.query)(`luzmo-search`)],L.prototype,`_searchElement`,void 0),t.t([(0,c.query)(`.header luzmo-action-button`)],L.prototype,`_backElement`,void 0),t.t([(0,c.query)(`luzmo-notice`)],L.prototype,`_noticeElement`,void 0),L=t.t([(0,l.localized)()],L),typeof customElements<`u`&&!customElements.get(`luzmo-add-to-dashboard`)&&customElements.define(`luzmo-add-to-dashboard`,L),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return L}});