@luzmo/analytics-components-kit 1.0.1-alpha.43 → 1.0.1-alpha.45

package/components/grid/grid.d.ts

@@ -96,7 +96,7 @@ export declare class LuzmoGrid extends LuzmoElement {
      * The default item actions menu.
      * @default [{ type: 'group', actions: ['edit-data', 'edit-options', 'clone'] }, { type: 'group', actions: ['delete'] }]
      */
-    defaultItemActionsMenu: InputActionGroup[];
+    defaultItemActionsMenu?: InputActionGroup[];
     /**
      * Grid options configuration
      */

package/components/grid/index.cjs

@@ -264,7 +264,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
           >
         `:f.x``}willUpdate(e){e.has("language")&&this.language!==ge.getLocale()&&([...ge.targetLocales].includes(this.language??"en")||this.language==="en")&&ge.setLocale(this.language)}render(){const e=this.actions.map(t=>this._generateActionGroup(t));return f.x`
       <div class="action-buttons" tabindex="0">${e}</div>
-    `}};ti([f.n({type:String,reflect:!0})],exports.LuzmoGridItemActionsMenu.prototype,"placement",2);ti([f.n({type:Array})],exports.LuzmoGridItemActionsMenu.prototype,"actions",2);ti([f.n({type:String})],exports.LuzmoGridItemActionsMenu.prototype,"language",2);exports.LuzmoGridItemActionsMenu=ti([On.localized()],exports.LuzmoGridItemActionsMenu);const ld=':host{display:block;width:100%;height:100%}.grid-stack{width:100%;height:100%;position:relative;background:var(--luzmo-grid-background, var(--grid-background, var(--luzmo-background-color)))}.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-stack-item-content,.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-item-actions-popover{opacity:.5}.grid-stack .grid-stack-item[active]>.ui-resizable-handle,.grid-stack .grid-stack-item[active].ui-resizable-autohide>.ui-resizable-handle{display:block}.grid-stack .grid-stack-item.ui-resizable-resizing,.grid-stack .grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{opacity:var(--luzmo-grid-item-resizing-opacity, .8)!important}.grid-item-drag-handle{position:absolute;color:var(--luzmo-grid-item-drag-handle-color, #000);top:var(--luzmo-grid-item-drag-handle-position-top, 0);left:var(--luzmo-grid-item-drag-handle-position-left, 0);right:var(--luzmo-grid-item-drag-handle-position-right, auto);bottom:var(--luzmo-grid-item-drag-handle-position-bottom, auto);padding:var(--luzmo-grid-item-drag-handle-padding, .5rem);z-index:var(--luzmo-grid-item-drag-handle-z-index, 3);cursor:var(--luzmo-grid-item-drag-handle-cursor, move)}.grid-stack[dark-background] .grid-item-drag-handle{color:var(--luzmo-grid-item-drag-handle-color, #fff)}.grid-stack .grid-stack-item .grid-stack-item-content{overflow:hidden;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));background:var(--luzmo-grid-item-background, var(--grid-item-background, transparent));box-shadow:var(--luzmo-grid-item-box-shadow, var(--grid-item-box-shadow, none));border-style:var(--luzmo-grid-item-border-style, none);border-color:var(--luzmo-grid-item-border-color, transparent);-webkit-backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none);backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none)}.grid-stack .grid-stack-item:not(.has-luzmo-viz-item) .grid-stack-item-content{border-style:var(--luzmo-grid-item-border-style, var(--grid-item-border-style, none));border-color:var(--luzmo-grid-item-border-color, var(--grid-item-border-color, transparent));border-width:var(--luzmo-grid-item-border-width, var(--grid-item-border-width, 0));border-top-width:var(--luzmo-grid-item-border-top-width, var(--grid-item-border-top-width, 0));border-right-width:var(--luzmo-grid-item-border-right-width, var(--grid-item-border-right-width, 0));border-bottom-width:var(--luzmo-grid-item-border-bottom-width, var(--grid-item-border-bottom-width, 0));border-left-width:var(--luzmo-grid-item-border-left-width, var(--grid-item-border-left-width, 0))}.grid-stack .grid-stack-placeholder>.placeholder-content{border-radius:var(--grid-item-border-radius, 4px)}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{display:block!important;position:absolute!important;z-index:var(--luzmo-grid-resize-handle-z-index, 100);background:var(--luzmo-grid-resize-handle-background, #fff);border-radius:var(--luzmo-grid-resize-handle-border-radius, 3px);opacity:var(--luzmo-grid-resize-handle-opacity, 0);transition:var(--luzmo-grid-resize-handle-transition, opacity .2s ease);box-shadow:0 0 6px #0000001a,0 0 2px #000000bf}:host .grid-stack[dark-background]>.grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack[dark-background]>.grid-stack-item:hover>.ui-resizable-handle{background:var(--luzmo-grid-resize-handle-background, #333);box-shadow:0 0 6px #ffffff1a,0 0 2px #ffffffbf}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{opacity:var(--luzmo-grid-resize-handle-opacity-hover, 1)}:host .grid-stack-item>.ui-resizable-handle:hover{opacity:var(--luzmo-grid-resize-handle-opacity-active, 1);background:var(--luzmo-grid-resize-handle-background-hover, var(--luzmo-background-color-highlight))}:host .grid-stack-item>.ui-resizable-n,:host .grid-stack-item>.ui-resizable-s{height:var(--luzmo-grid-resize-handle-edge-size, 8px);width:var(--luzmo-grid-resize-handle-side-size, 18px);left:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-n{cursor:n-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-top, 0px))}:host .grid-stack-item>.ui-resizable-s{cursor:s-resize;bottom:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-e,:host .grid-stack-item>.ui-resizable-w{width:var(--luzmo-grid-resize-handle-edge-size, 8px);height:var(--luzmo-grid-resize-handle-side-size, 18px);top:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-e{cursor:e-resize;right:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-w{cursor:w-resize;left:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-ne,:host .grid-stack-item>.ui-resizable-nw,:host .grid-stack-item>.ui-resizable-se,:host .grid-stack-item>.ui-resizable-sw{transform:none;background-image:none;width:var(--luzmo-grid-resize-handle-corner-size, 12px);height:var(--luzmo-grid-resize-handle-corner-size, 12px)}:host .grid-stack-item>.ui-resizable-ne{cursor:ne-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));right:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-nw{cursor:nw-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));left:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-se{cursor:se-resize;right:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-right, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-sw{cursor:sw-resize;left:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-left, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-resizing .ui-resizable-handle{opacity:1!important;background:var(--luzmo-grid-resize-handle-background-active, var(--luzmo-background-color-highlight))}.grid-item-actions-popover{position:absolute;outline:none;border:none;padding:0;margin:0;z-index:2;overflow:visible;background:transparent}luzmo-grid-item-actions-menu{padding:var(--luzmo-grid-item-actions-padding, var(--grid-item-actions-padding))}.dimensions-hint-popover{font-size:var(--luzmo-grid-item-dimensions-hint-font-size, var(--luzmo-font-size-xs, 10px));font-family:var(--luzmo-grid-item-dimensions-hint-font-family, var(--luzmo-font-family, inherit));position:absolute;outline:none;border-width:var(--luzmo-grid-item-dimensions-hint-border-width, var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-grid-item-dimensions-hint-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-grid-item-dimensions-hint-border-radius, var(--luzmo-border-radius));padding:var(--luzmo-grid-item-dimensions-hint-padding, var(--luzmo-spacing-1) var(--luzmo-spacing-2));margin:0;z-index:3;overflow:visible;background:var(--luzmo-grid-item-dimensions-hint-background, var(--luzmo-background-color));color:var(--luzmo-grid-item-dimensions-hint-color, var(--luzmo-font-color));pointer-events:none}luzmo-grid-item-actions-menu{--grid-item-actions-padding: 0 .75rem}luzmo-grid-item-actions-menu[placement=top-start],luzmo-grid-item-actions-menu[placement=top],luzmo-grid-item-actions-menu[placement=top-end],luzmo-grid-item-actions-menu[placement=bottom-start],luzmo-grid-item-actions-menu[placement=bottom],luzmo-grid-item-actions-menu[placement=bottom-end]{--grid-item-actions-padding: .75rem 0}.grid-stack-item:focus-visible{outline:none}.grid-stack-item:focus-visible .grid-stack-item-content:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color, var(--luzmo-primary));box-sizing:border-box;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));z-index:2}';var dd=Object.defineProperty,B=(s,e,t,i)=>{for(var r=void 0,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=o(e,t,r)||r);return r&&dd(e,t,r),r};class N extends kr.It{constructor(){super(...arguments),this.appServer="https://app.luzmo.com/",this.apiHost="https://api.luzmo.com",this.language="en",this.contentLanguage="en",this.columns=48,this.rowHeight=16,this.viewMode=!1,this.placementItemActionsMenu="right-start",this.defaultItemActionsMenu=[],this.theme={},this.items=[],this.renderers={},this._initialized=!1,this.defaultRenderer=(e,t)=>f.x`
+    `}};ti([f.n({type:String,reflect:!0})],exports.LuzmoGridItemActionsMenu.prototype,"placement",2);ti([f.n({type:Array})],exports.LuzmoGridItemActionsMenu.prototype,"actions",2);ti([f.n({type:String})],exports.LuzmoGridItemActionsMenu.prototype,"language",2);exports.LuzmoGridItemActionsMenu=ti([On.localized()],exports.LuzmoGridItemActionsMenu);const ld=':host{display:block;width:100%;height:100%}.grid-stack{width:100%;height:100%;position:relative;background:var(--luzmo-grid-background, var(--grid-background, var(--luzmo-background-color)))}.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-stack-item-content,.grid-stack[has-active-item] .grid-stack-item:not([active])>.grid-item-actions-popover{opacity:.5}.grid-stack .grid-stack-item[active]>.ui-resizable-handle,.grid-stack .grid-stack-item[active].ui-resizable-autohide>.ui-resizable-handle{display:block}.grid-stack .grid-stack-item.ui-resizable-resizing,.grid-stack .grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{opacity:var(--luzmo-grid-item-resizing-opacity, .8)!important}.grid-item-drag-handle{position:absolute;color:var(--luzmo-grid-item-drag-handle-color, #000);top:var(--luzmo-grid-item-drag-handle-position-top, 0);left:var(--luzmo-grid-item-drag-handle-position-left, 0);right:var(--luzmo-grid-item-drag-handle-position-right, auto);bottom:var(--luzmo-grid-item-drag-handle-position-bottom, auto);padding:var(--luzmo-grid-item-drag-handle-padding, .5rem);z-index:var(--luzmo-grid-item-drag-handle-z-index, 3);cursor:var(--luzmo-grid-item-drag-handle-cursor, move)}.grid-stack[dark-background] .grid-item-drag-handle{color:var(--luzmo-grid-item-drag-handle-color, #fff)}.grid-stack .grid-stack-item .grid-stack-item-content{overflow:hidden;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));background:var(--luzmo-grid-item-background, var(--grid-item-background, transparent));box-shadow:var(--luzmo-grid-item-box-shadow, var(--grid-item-box-shadow, none));border-style:var(--luzmo-grid-item-border-style, none);border-color:var(--luzmo-grid-item-border-color, transparent);-webkit-backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none);backdrop-filter:var(--luzmo-grid-item-backdrop-filter, none)}.grid-stack .grid-stack-item:not(.has-luzmo-viz-item) .grid-stack-item-content{border-style:var(--luzmo-grid-item-border-style, var(--grid-item-border-style, none));border-color:var(--luzmo-grid-item-border-color, var(--grid-item-border-color, transparent));border-width:var(--luzmo-grid-item-border-width, var(--grid-item-border-width, 0));border-top-width:var(--luzmo-grid-item-border-top-width, var(--grid-item-border-top-width, 0));border-right-width:var(--luzmo-grid-item-border-right-width, var(--grid-item-border-right-width, 0));border-bottom-width:var(--luzmo-grid-item-border-bottom-width, var(--grid-item-border-bottom-width, 0));border-left-width:var(--luzmo-grid-item-border-left-width, var(--grid-item-border-left-width, 0))}.grid-stack .grid-stack-placeholder>.placeholder-content{border-radius:var(--grid-item-border-radius, 4px)}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{display:block!important;position:absolute!important;z-index:var(--luzmo-grid-resize-handle-z-index, 100);background:var(--luzmo-grid-resize-handle-background, #fff);border-radius:var(--luzmo-grid-resize-handle-border-radius, 3px);opacity:var(--luzmo-grid-resize-handle-opacity, 0);transition:var(--luzmo-grid-resize-handle-transition, opacity .2s ease);box-shadow:0 0 6px #0000001a,0 0 2px #000000bf}:host .grid-stack[dark-background]>.grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack[dark-background]>.grid-stack-item:hover>.ui-resizable-handle{background:var(--luzmo-grid-resize-handle-background, #333);box-shadow:0 0 6px #ffffff1a,0 0 2px #ffffffbf}:host .grid-stack-item[active]>.ui-resizable-handle,:host .grid-stack-item:hover>.ui-resizable-handle{opacity:var(--luzmo-grid-resize-handle-opacity-hover, 1)}:host .grid-stack-item>.ui-resizable-handle:hover{opacity:var(--luzmo-grid-resize-handle-opacity-active, 1);background:var(--luzmo-grid-resize-handle-background-hover, var(--luzmo-background-color-highlight))}:host .grid-stack-item>.ui-resizable-n,:host .grid-stack-item>.ui-resizable-s{height:var(--luzmo-grid-resize-handle-edge-size, 8px);width:var(--luzmo-grid-resize-handle-side-size, 18px);left:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-n{cursor:n-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-top, 0px))}:host .grid-stack-item>.ui-resizable-s{cursor:s-resize;bottom:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-e,:host .grid-stack-item>.ui-resizable-w{width:var(--luzmo-grid-resize-handle-edge-size, 8px);height:var(--luzmo-grid-resize-handle-side-size, 18px);top:calc(50% - var(--luzmo-grid-resize-handle-side-size, 18px) / 2)}:host .grid-stack-item>.ui-resizable-e{cursor:e-resize;right:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-w{cursor:w-resize;left:calc(var(--luzmo-grid-resize-handle-edge-offset, -4px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-ne,:host .grid-stack-item>.ui-resizable-nw,:host .grid-stack-item>.ui-resizable-se,:host .grid-stack-item>.ui-resizable-sw{transform:none;background-image:none;width:var(--luzmo-grid-resize-handle-corner-size, 12px);height:var(--luzmo-grid-resize-handle-corner-size, 12px)}:host .grid-stack-item>.ui-resizable-ne{cursor:ne-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));right:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-right, 0px))}:host .grid-stack-item>.ui-resizable-nw{cursor:nw-resize;top:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-top, 0px));left:calc(var(--luzmo-grid-resize-handle-edge-offset, -6px) + var(--gs-item-margin-left, 0px))}:host .grid-stack-item>.ui-resizable-se{cursor:se-resize;right:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-right, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-sw{cursor:sw-resize;left:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-left, 0px));bottom:calc(var(--luzmo-grid-resize-handle-corner-offset, -4px) + var(--gs-item-margin-bottom, 0px))}:host .grid-stack-item>.ui-resizable-resizing .ui-resizable-handle{opacity:1!important;background:var(--luzmo-grid-resize-handle-background-active, var(--luzmo-background-color-highlight))}.grid-item-actions-popover{position:absolute;outline:none;border:none;padding:0;margin:0;z-index:2;overflow:visible;background:transparent}luzmo-grid-item-actions-menu{padding:var(--luzmo-grid-item-actions-padding, var(--grid-item-actions-padding))}.dimensions-hint-popover{font-size:var(--luzmo-grid-item-dimensions-hint-font-size, var(--luzmo-font-size-xs, 10px));font-family:var(--luzmo-grid-item-dimensions-hint-font-family, var(--luzmo-font-family, inherit));position:absolute;outline:none;border-width:var(--luzmo-grid-item-dimensions-hint-border-width, var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-grid-item-dimensions-hint-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-grid-item-dimensions-hint-border-radius, var(--luzmo-border-radius));padding:var(--luzmo-grid-item-dimensions-hint-padding, var(--luzmo-spacing-1) var(--luzmo-spacing-2));margin:0;z-index:3;overflow:visible;background:var(--luzmo-grid-item-dimensions-hint-background, var(--luzmo-background-color));color:var(--luzmo-grid-item-dimensions-hint-color, var(--luzmo-font-color));pointer-events:none}luzmo-grid-item-actions-menu{--grid-item-actions-padding: 0 .75rem}luzmo-grid-item-actions-menu[placement=top-start],luzmo-grid-item-actions-menu[placement=top],luzmo-grid-item-actions-menu[placement=top-end],luzmo-grid-item-actions-menu[placement=bottom-start],luzmo-grid-item-actions-menu[placement=bottom],luzmo-grid-item-actions-menu[placement=bottom-end]{--grid-item-actions-padding: .75rem 0}.grid-stack-item:focus-visible{outline:none}.grid-stack-item:focus-visible .grid-stack-item-content:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color, var(--luzmo-primary));box-sizing:border-box;border-radius:var(--luzmo-grid-item-border-radius, var(--grid-item-border-radius, 4px));z-index:2}';var dd=Object.defineProperty,B=(s,e,t,i)=>{for(var r=void 0,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=o(e,t,r)||r);return r&&dd(e,t,r),r};class N extends kr.It{constructor(){super(...arguments),this.appServer="https://app.luzmo.com/",this.apiHost="https://api.luzmo.com",this.language="en",this.contentLanguage="en",this.columns=48,this.rowHeight=16,this.viewMode=!1,this.placementItemActionsMenu="right-start",this.theme={},this.items=[],this.renderers={},this._initialized=!1,this.defaultRenderer=(e,t)=>f.x`
       <div class="grid-item-content">
         <div class="grid-item-type">${e.type}</div>
       </div>
@@ -278,7 +278,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         >
         </luzmo-grid-item-actions-menu>
       </div>
-    `}_createItemActionsMenuPopover(e){let t=e.querySelector(".grid-item-actions-popover");const i=e.querySelector(".grid-stack-item-content"),r=this.getGridItemById(e.getAttribute("gs-id")??"");if(!t){const o=document.createDocumentFragment();f.B(this._renderOverlayContent(r==null?void 0:r.item),o),t=o.querySelector(".grid-item-actions-popover"),e.append(t)}const n=ts(i,t,async()=>{var l;const{x:o,y:a}=await rs(i,t,{placement:((l=r==null?void 0:r.item)==null?void 0:l.placementActionsMenu)??this.placementItemActionsMenu??"right-start",middleware:[is(0),ss({crossAxis:!1})]});t.style.left=`${o}px`,t.style.top=`${a}px`});t._cleanup=n,t.matches(":popover-open")||t.showPopover()}_removeItemActionsMenuPopover(e){const t=e.querySelector(".grid-item-actions-popover");t&&(t._cleanup&&(t._cleanup(),delete t._cleanup),t.matches(":popover-open")&&t.hidePopover(),t.remove())}_updateThemeProperties(){var r,n,o,a,l,d,c,h,u,g,m,b,y,w,_,x,R,A,j,W,H;if(!this._fullTheme)return;const e=this._fullTheme.boxShadow;let t="";if(e){const G=new C(e.color),O={r:Math.round(G.srgb.r*255),g:Math.round(G.srgb.g*255),b:Math.round(G.srgb.b*255)},ue=((r=this._fullTheme.margins)==null?void 0:r[0])??16,$=Math.min(ue/10,2),oe=(I,me)=>me>=1?`rgba(${I.r},${I.g},${I.b},1)`:me<=0?`rgba(${I.r},${I.g},${I.b},0)`:`rgba(${I.r},${I.g},${I.b},${me})`;e.size==="none"?t="none":e.size==="S"?t=`0 ${$*2}px ${$*4}px ${oe(O,.16)}, 0 ${$*2}px ${$*4}px ${oe(O,.23)}`:e.size==="M"?t=`0 ${$*8}px ${$*16}px ${oe(O,.19)}, 0 ${$*4}px ${$*4}px ${oe(O,.23)}`:e.size==="L"&&(t=`0 ${$*12}px ${$*24}px ${oe(O,.25)}, 0 ${$*8}px ${$*8}px ${oe(O,.22)}`)}new Map([["--grid-font-family",(o=(n=this._fullTheme)==null?void 0:n.font)==null?void 0:o.fontFamily],["--grid-background",(a=this._fullTheme)==null?void 0:a.background],["--grid-item-box-shadow",t],["--grid-item-background",(l=this._fullTheme)==null?void 0:l.itemsBackground],["--grid-item-border-color",(c=(d=this._fullTheme)==null?void 0:d.borders)==null?void 0:c["border-color"]],["--grid-item-border-style",(u=(h=this._fullTheme)==null?void 0:h.borders)==null?void 0:u["border-style"]],["--grid-item-border-radius",(m=(g=this._fullTheme)==null?void 0:g.borders)==null?void 0:m["border-radius"]],["--grid-item-border-width",`${(y=(b=this._fullTheme)==null?void 0:b.borders)==null?void 0:y["border-top-width"]}`],["--grid-item-border-top-width",(_=(w=this._fullTheme)==null?void 0:w.borders)==null?void 0:_["border-top-width"]],["--grid-item-border-right-width",(R=(x=this._fullTheme)==null?void 0:x.borders)==null?void 0:R["border-right-width"]],["--grid-item-border-bottom-width",(j=(A=this._fullTheme)==null?void 0:A.borders)==null?void 0:j["border-bottom-width"]],["--grid-item-border-left-width",(H=(W=this._fullTheme)==null?void 0:W.borders)==null?void 0:H["border-left-width"]]]).forEach((G,O)=>{G?this.style.setProperty(O,G):this.style.removeProperty(O)})}getGridItemById(e){return this.gridItems.find(t=>t.item.id===e)}addGridItem(e){var a,l,d,c,h;const t={...structuredClone(e),id:nt(),position:structuredClone(e==null?void 0:e.position)??{sizeX:1,sizeY:1,col:0,row:0}};this.items.push(t);const i=this._renderItem(t,this.items.length),r=document.createDocumentFragment();f.B(i,r,{host:this}),this._gridElement.append(r);const n=this._gridElement.querySelector(`[luzmo-grid-item-id="${t.id}"]`),o={x:((a=t.position)==null?void 0:a.col)??0,y:((l=t.position)==null?void 0:l.row)??0,w:((d=t.position)==null?void 0:d.sizeX)??1,h:((c=t.position)==null?void 0:c.sizeY)??1,autoPosition:!0,id:t.id};return(h=this._grid)==null||h.makeWidget(n,o),this._activeItemElement&&this._cleanupActiveItem(this._activeItemElement),requestAnimationFrame(()=>{const u=n.getBoundingClientRect();(u.bottom>window.innerHeight||u.top<0)&&n.scrollIntoView({behavior:"smooth",block:"center"})}),n}removeGridItem(e){this.removeGridItemById((e==null?void 0:e.id)??"")}removeGridItemById(e){var r;if(!e)return;const t=(r=this.getGridItemById(e))==null?void 0:r.element;t&&this._grid&&(this._grid.removeWidget(t),this._focusedItemElement=void 0);const i=this.items.findIndex(n=>n.id===e);i!==-1&&this.items.splice(i,1),this._removeItemActionsMenuPopover(t),t&&this._activeItemElement===t&&this._cleanupActiveItem(t)}_renderItem(e,t){var n;const i={...e.options,locale:this.contentLanguage};i.theme||(i.theme=(n=this._fullTheme)!=null&&n.id?{id:this._fullTheme.id}:structuredClone(this._fullTheme));const r=!this.viewMode;return f.x`
+    `}_createItemActionsMenuPopover(e){let t=e.querySelector(".grid-item-actions-popover");const i=e.querySelector(".grid-stack-item-content"),r=this.getGridItemById(e.getAttribute("gs-id")??"");if(!t){const o=document.createDocumentFragment();f.B(this._renderOverlayContent(r==null?void 0:r.item),o),t=o.querySelector(".grid-item-actions-popover"),e.append(t)}const n=ts(i,t,async()=>{var l;const{x:o,y:a}=await rs(i,t,{placement:((l=r==null?void 0:r.item)==null?void 0:l.placementActionsMenu)??this.placementItemActionsMenu??"right-start",middleware:[is(0),ss({crossAxis:!1})]});t.style.left=`${o}px`,t.style.top=`${a}px`});t._cleanup=n,t.matches(":popover-open")||t.showPopover()}_removeItemActionsMenuPopover(e){const t=e.querySelector(".grid-item-actions-popover");t&&(t._cleanup&&(t._cleanup(),delete t._cleanup),t.matches(":popover-open")&&t.hidePopover(),t.remove())}_updateThemeProperties(){var r,n,o,a,l,d,c,h,u,g,m,b,y,w,_,x,R,A,j,W,H;if(!this._fullTheme)return;const e=this._fullTheme.boxShadow;let t="";if(e){const G=new C(e.color),O={r:Math.round(G.srgb.r*255),g:Math.round(G.srgb.g*255),b:Math.round(G.srgb.b*255)},ue=((r=this._fullTheme.margins)==null?void 0:r[0])??16,$=Math.min(ue/10,2),oe=(I,me)=>me>=1?`rgba(${I.r},${I.g},${I.b},1)`:me<=0?`rgba(${I.r},${I.g},${I.b},0)`:`rgba(${I.r},${I.g},${I.b},${me})`;e.size==="none"?t="none":e.size==="S"?t=`0 ${$*2}px ${$*4}px ${oe(O,.16)}, 0 ${$*2}px ${$*4}px ${oe(O,.23)}`:e.size==="M"?t=`0 ${$*8}px ${$*16}px ${oe(O,.19)}, 0 ${$*4}px ${$*4}px ${oe(O,.23)}`:e.size==="L"&&(t=`0 ${$*12}px ${$*24}px ${oe(O,.25)}, 0 ${$*8}px ${$*8}px ${oe(O,.22)}`)}new Map([["--grid-font-family",(o=(n=this._fullTheme)==null?void 0:n.font)==null?void 0:o.fontFamily],["--grid-background",(a=this._fullTheme)==null?void 0:a.background],["--grid-item-box-shadow",t],["--grid-item-background",(l=this._fullTheme)==null?void 0:l.itemsBackground],["--grid-item-border-color",(c=(d=this._fullTheme)==null?void 0:d.borders)==null?void 0:c["border-color"]],["--grid-item-border-style",(u=(h=this._fullTheme)==null?void 0:h.borders)==null?void 0:u["border-style"]],["--grid-item-border-radius",(m=(g=this._fullTheme)==null?void 0:g.borders)==null?void 0:m["border-radius"]],["--grid-item-border-width",`${(y=(b=this._fullTheme)==null?void 0:b.borders)==null?void 0:y["border-top-width"]}`],["--grid-item-border-top-width",(_=(w=this._fullTheme)==null?void 0:w.borders)==null?void 0:_["border-top-width"]],["--grid-item-border-right-width",(R=(x=this._fullTheme)==null?void 0:x.borders)==null?void 0:R["border-right-width"]],["--grid-item-border-bottom-width",(j=(A=this._fullTheme)==null?void 0:A.borders)==null?void 0:j["border-bottom-width"]],["--grid-item-border-left-width",(H=(W=this._fullTheme)==null?void 0:W.borders)==null?void 0:H["border-left-width"]]]).forEach((G,O)=>{G?this.style.setProperty(O,G):this.style.removeProperty(O)})}getGridItemById(e){return this.gridItems.find(t=>t.item.id===e)}addGridItem(e){var a,l,d,c,h;!this._initialized&&this._gridElement&&this._initializeGrid();const t={...structuredClone(e),id:nt(),position:structuredClone(e==null?void 0:e.position)??{sizeX:1,sizeY:1,col:0,row:0}};this.items.push(t);const i=this._renderItem(t,this.items.length),r=document.createDocumentFragment();f.B(i,r,{host:this}),this._gridElement.append(r);const n=this._gridElement.querySelector(`[luzmo-grid-item-id="${t.id}"]`),o={x:((a=t.position)==null?void 0:a.col)??0,y:((l=t.position)==null?void 0:l.row)??0,w:((d=t.position)==null?void 0:d.sizeX)??1,h:((c=t.position)==null?void 0:c.sizeY)??1,autoPosition:!0,id:t.id};return(h=this._grid)==null||h.makeWidget(n,o),this._activeItemElement&&this._cleanupActiveItem(this._activeItemElement),requestAnimationFrame(()=>{const u=n.getBoundingClientRect();(u.bottom>window.innerHeight||u.top<0)&&n.scrollIntoView({behavior:"smooth",block:"center"})}),n}removeGridItem(e){this.removeGridItemById((e==null?void 0:e.id)??"")}removeGridItemById(e){var r;if(!e)return;const t=(r=this.getGridItemById(e))==null?void 0:r.element;t&&this._grid&&(this._grid.removeWidget(t),this._focusedItemElement=void 0);const i=this.items.findIndex(n=>n.id===e);i!==-1&&this.items.splice(i,1),this._removeItemActionsMenuPopover(t),t&&this._activeItemElement===t&&this._cleanupActiveItem(t)}_renderItem(e,t){var n;const i={...e.options,locale:this.contentLanguage};i.theme||(i.theme=(n=this._fullTheme)!=null&&n.id?{id:this._fullTheme.id}:structuredClone(this._fullTheme));const r=!this.viewMode;return f.x`
       <div
         class="luzmo-grid-item has-luzmo-viz-item"
         luzmo-grid-item-id=${e.id??nt()}

package/components/grid/index.js

@@ -8313,7 +8313,7 @@ var Cd = Object.defineProperty, W = (i, e, t, s) => {
 };
 class $ extends Dr {
   constructor() {
-    super(...arguments), this.appServer = "https://app.luzmo.com/", this.apiHost = "https://api.luzmo.com", this.language = "en", this.contentLanguage = "en", this.columns = 48, this.rowHeight = 16, this.viewMode = !1, this.placementItemActionsMenu = "right-start", this.defaultItemActionsMenu = [], this.theme = {}, this.items = [], this.renderers = {}, this._initialized = !1, this.defaultRenderer = (e, t) => D`
+    super(...arguments), this.appServer = "https://app.luzmo.com/", this.apiHost = "https://api.luzmo.com", this.language = "en", this.contentLanguage = "en", this.columns = 48, this.rowHeight = 16, this.viewMode = !1, this.placementItemActionsMenu = "right-start", this.theme = {}, this.items = [], this.renderers = {}, this._initialized = !1, this.defaultRenderer = (e, t) => D`
       <div class="grid-item-content">
         <div class="grid-item-type">${e.type}</div>
       </div>
@@ -8791,6 +8791,7 @@ class $ extends Dr {
   }
   addGridItem(e) {
     var a, l, d, c, h;
+    !this._initialized && this._gridElement && this._initializeGrid();
     const t = {
       ...structuredClone(e),
       id: nt(),

package/custom-elements.json

@@ -5758,10 +5758,10 @@
               "kind": "field",
               "name": "defaultItemActionsMenu",
               "type": {
-                "text": "InputActionGroup[]"
+                "text": "InputActionGroup[] | undefined"
               },
-              "default": "[]",
               "description": "The default item actions menu.",
+              "default": "[{ type: 'group', actions: ['edit-data', 'edit-options', 'clone'] }, { type: 'group', actions: ['delete'] }]",
               "attribute": "default-item-actions-menu",
               "reflects": true
             },
@@ -5918,10 +5918,10 @@
             {
               "name": "default-item-actions-menu",
               "type": {
-                "text": "InputActionGroup[]"
+                "text": "InputActionGroup[] | undefined"
               },
-              "default": "[]",
               "description": "The default item actions menu.",
+              "default": "[{ type: 'group', actions: ['edit-data', 'edit-options', 'clone'] }, { type: 'group', actions: ['delete'] }]",
               "fieldName": "defaultItemActionsMenu"
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.1-alpha.43",
+  "version": "1.0.1-alpha.45",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",