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

package/components/add-to-dashboard-NwsCPIlg.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-CGDNY_7v.cjs"),t=require("./decorate-DCJt-2rt.cjs"),n=require("./localized-mixin-EoNvtTBG.cjs"),r=require("./data-broker-DCghLjhq.cjs"),i=require("./localize-D3i4Epy_.cjs"),a=require("./chart-helpers-ufZ6VbXs.cjs");let o=require("@luzmo/icons");require("@luzmo/lucero/action-button"),require("@luzmo/lucero/button"),require("@luzmo/lucero/icon"),require("@luzmo/lucero/overlay"),require("@luzmo/lucero/popover"),require("@luzmo/lucero/tooltip");let s=require("lit"),c=require("lit/decorators.js"),l=require("@lit/localize");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[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}`,f=`0.1.107`,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),u=[...o.modifyIds,...c?o.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,name:i.t(t.name??{},e.language),syncScreenModes:t.contents?.syncScreenModes!==!1,screenModes:r.length>0?r:[`desktop`],...n?{requiresVariant:n}:{}}},_,E=(e,n)=>async(r,i)=>{if(u.length===0)return{count:0,rows:[]};let a=r>0&&_?.search===e?_.rows:void 0;return a||(a=(await x(t,{where:{is_variant:!1,archived_at:null,id:{in:u}},attributes:m,...w(e)},n)).rows.map(e=>f(e,!o.modifyIds.has(e.id))).sort((e,t)=>e.name.localeCompare(t.name)),_={search:e,rows:a}),{count:a.length,rows:a.slice(r,r+i)}},D=(e,r,i,a)=>async(o,s)=>{let c=await x(t,{where:{is_variant:!1,archived_at:null,...d},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=>f(e,a))}},O=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})},k=async(e,n,r)=>{try{await O(e.id,n,r)}catch(n){throw await t.fetchApi(`/securable`,{action:`delete`,version:p,id:e.id}).catch(()=>void 0),n}},A=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(e.search,t.signal),...c?[D(e.search,t.signal,{flagUse:!0,flagModify:!1},!0)]:[],D(e.search,t.signal,{flagModify:!0},!1)],e.offset,e.limit):{rows:[],total:0}},async add(e,t,n,r){await O(e.id,t,n.screenModes,r.signal)},...s?{async create(t,n){let r=await A({name:n.name?{[e.language]:n.name}:{},contents:C()});return await k(r,t,void 0),f(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=>f(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((0,l.msg)(`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 A({name:i.name?{...o,[e.language]:i.name}:o,contents:a.contents},[{role:`original`,id:n.id}]);return await k(s,r,i.screenModes),f({...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){let n=this._displayName(e);return(0,l.msg)(l.str`${n} (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(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),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);n&&(n.requiresVariant?(this._original=n,this._step=`variants`,this._loadVariants()):this._selectTarget({kind:`add`,dashboard:n,isVariant:!1},n))}_handleVariantChange(e){let t=this._menuValue(e),n=this._original;if(!n)return;if(t===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){t.syncScreenModes!==!1||!t.screenModes?.length?this._save(e):(this._pending=e,this._screenModes=[...t.screenModes??[]],this._step=`screenModes`)}async _loadVariants(){let e=this._actions,t=this._original;if(this._variantsAbort?.abort(),this._variants=[],this._variantsLoading=!1,this._variantsFailed=!1,!e?.listVariants||!t)return;let n=new AbortController;this._variantsAbort=n,this._variantsLoading=!0;try{let r=await e.listVariants(t,{signal:n.signal});n.signal.aborted||(this._variants=r)}catch(e){n.signal.aborted||(console.error(`Failed to load dashboard variants:`,e),this._variantsFailed=!0)}finally{n.signal.aborted||(this._variantsLoading=!1)}}_handleBack(){this._step===`screenModes`&&this._original?this._step=`variants`:(this._step=`list`,this._original=null),this._pending=null}_toggleScreenMode(e){this._screenModes=this._screenModes.includes(e)?this._screenModes.filter(t=>t!==e):[...this._screenModes,e]}_handleConfirmScreenModes(){this._pending&&this._screenModes.length>0&&this._save(this._pending,{screenModes:[...this._screenModes]})}async _save(e,t={}){let n=this._actions;if(!n||!this.chart||this._saving)return;this._open=!1,this._saving=!0,this._setStatus(null),this._saveAbort=new AbortController;let r=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`,message:e instanceof Error&&e.message?e.message:void 0}),this._dispatch(`luzmo-chart-add-failed`,{error:e})}finally{this._saving=!1}await this.updateComplete,this.isConnected&&this._isFocusLost()&&this._focusTrigger()}_setStatus(e){this._status=e}_focusTrigger(){this._triggerElement?.focus()}_isFocusLost(){return!document.activeElement||document.activeElement===document.body}async _handleNoticeClose(e){e.stopPropagation();let t=e.currentTarget.matches(`:focus-within`);this._setStatus(null),await this.updateComplete,t&&this._isFocusLost()&&this._focusTrigger()}async _focusStep(){let e=this._step===`list`?this._searchElement:this._backElement;await e?.updateComplete,e?.focus()}_renderRow(e){return 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(){let e=(0,l.msg)(`Loading`,{desc:`Loading spinner label`});return s.html`<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 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" dir="auto">${e.message??(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}});

package/components/ai-chat/index.cjs

@@ -17,4 +17,4 @@
  * 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("../ai-interaction-textarea-IvhGBwNO.cjs"),t=require("../ai-chat-DbkKSLz7.cjs");exports.AI_PROMPT_ACCEPTED_IMAGE_MIME_TYPES=e.c,exports.AI_PROMPT_MAX_ATTACHMENTS=e.l,exports.AiChatSession=t.i,exports.AiChatSessionController=t.r,exports.LuzmoAiChat=t.n,exports.LuzmoAiChatEmptyState=t.D,exports.assertValidAiPromptAttachmentFiles=e.u,exports.assertValidAiPromptAttachmentUrls=e.d,exports.blobToBase64=e.n,exports.buildAiDictationRequest=e.r,exports.buildAiPromptDeleteRequest=t._,exports.buildAiPromptProperties=t.v,exports.buildAiPromptRequest=t.y,exports.buildAnalystAiPromptProperties=t.b,exports.buildCustomItemAiPromptProperties=t.x,exports.buildDashboardAiPromptProperties=t.S,exports.buildItemAiPromptProperties=t.C,exports.buildSavedAgentAiPromptProperties=t.w,exports.chartToItemAsset=t.T,exports.createAiChatSession=t.a,exports.createInitialProgress=t.f,exports.createInitialStreamState=t.o,exports.createStreamHandler=t.s,exports.extractChartFromChunk=t.u,exports.extractDashboardFromChunk=t.d,exports.fetchStreamingResponse=t.m,exports.getAgentStreamDefinition=t.c,exports.getAiDictationUrl=e.i,exports.getAiPromptUrl=t.E,exports.getUploadUrl=e.o,exports.hasProgressChunk=t.p,exports.isAiPromptAcceptedImageFile=e.f,exports.isAiPromptAcceptedImageMimeType=e.p,exports.isAiPromptAcceptedImageUrl=e.m,exports.isRecognizedStep=t.t,exports.parseStreamLine=t.h,exports.processStreamChunk=t.l,exports.readNdjsonStream=t.g,exports.streamAiDictation=e.a,exports.uploadAiPromptImages=e.s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../ai-interaction-textarea-BmvVVCmL.cjs"),t=require("../ai-chat-BNcSadGI.cjs");exports.AI_PROMPT_ACCEPTED_IMAGE_MIME_TYPES=e.c,exports.AI_PROMPT_MAX_ATTACHMENTS=e.l,exports.AiChatSession=t.i,exports.AiChatSessionController=t.r,exports.LuzmoAiChat=t.n,exports.LuzmoAiChatEmptyState=t.D,exports.assertValidAiPromptAttachmentFiles=e.u,exports.assertValidAiPromptAttachmentUrls=e.d,exports.blobToBase64=e.n,exports.buildAiDictationRequest=e.r,exports.buildAiPromptDeleteRequest=t._,exports.buildAiPromptProperties=t.v,exports.buildAiPromptRequest=t.y,exports.buildAnalystAiPromptProperties=t.b,exports.buildCustomItemAiPromptProperties=t.x,exports.buildDashboardAiPromptProperties=t.S,exports.buildItemAiPromptProperties=t.C,exports.buildSavedAgentAiPromptProperties=t.w,exports.chartToItemAsset=t.T,exports.createAiChatSession=t.a,exports.createInitialProgress=t.f,exports.createInitialStreamState=t.o,exports.createStreamHandler=t.s,exports.extractChartFromChunk=t.u,exports.extractDashboardFromChunk=t.d,exports.fetchStreamingResponse=t.m,exports.getAgentStreamDefinition=t.c,exports.getAiDictationUrl=e.i,exports.getAiPromptUrl=t.E,exports.getUploadUrl=e.o,exports.hasProgressChunk=t.p,exports.isAiPromptAcceptedImageFile=e.f,exports.isAiPromptAcceptedImageMimeType=e.p,exports.isAiPromptAcceptedImageUrl=e.m,exports.isRecognizedStep=t.t,exports.parseStreamLine=t.h,exports.processStreamChunk=t.l,exports.readNdjsonStream=t.g,exports.streamAiDictation=e.a,exports.uploadAiPromptImages=e.s;

package/components/ai-chat/index.js

@@ -17,6 +17,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, u as f } from "../ai-interaction-textarea-AKHc6-I9.js";
-import { C as p, D as m, E as h, S as g, T as _, _ as v, a as y, b, c as x, d as S, f as C, g as w, h as T, i as E, l as D, m as O, n as k, o as A, p as j, r as M, s as N, t as P, u as F, v as I, w as L, x as R, y as z } from "../ai-chat-DSUhzo6e.js";
+import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, u as f } from "../ai-interaction-textarea-CnQ2FBc7.js";
+import { C as p, D as m, E as h, S as g, T as _, _ as v, a as y, b, c as x, d as S, f as C, g as w, h as T, i as E, l as D, m as O, n as k, o as A, p as j, r as M, s as N, t as P, u as F, v as I, w as L, x as R, y as z } from "../ai-chat-CL894viH.js";
 export { t as AI_PROMPT_ACCEPTED_IMAGE_MIME_TYPES, a as AI_PROMPT_MAX_ATTACHMENTS, E as AiChatSession, M as AiChatSessionController, k as LuzmoAiChat, m as LuzmoAiChatEmptyState, f as assertValidAiPromptAttachmentFiles, n as assertValidAiPromptAttachmentUrls, s as blobToBase64, u as buildAiDictationRequest, v as buildAiPromptDeleteRequest, I as buildAiPromptProperties, z as buildAiPromptRequest, b as buildAnalystAiPromptProperties, R as buildCustomItemAiPromptProperties, g as buildDashboardAiPromptProperties, p as buildItemAiPromptProperties, L as buildSavedAgentAiPromptProperties, _ as chartToItemAsset, y as createAiChatSession, C as createInitialProgress, A as createInitialStreamState, N as createStreamHandler, F as extractChartFromChunk, S as extractDashboardFromChunk, O as fetchStreamingResponse, x as getAgentStreamDefinition, i as getAiDictationUrl, h as getAiPromptUrl, c as getUploadUrl, j as hasProgressChunk, r as isAiPromptAcceptedImageFile, l as isAiPromptAcceptedImageMimeType, o as isAiPromptAcceptedImageUrl, P as isRecognizedStep, T as parseStreamLine, D as processStreamChunk, w as readNdjsonStream, e as streamAiDictation, d as uploadAiPromptImages };