@luzmo/analytics-components-kit 1.0.9-beta.1 → 1.0.9-beta.11

package/components/item-grid/types.d.ts

@@ -1,57 +1 @@
-import type { ItemFilterGroup, VizItemOptions, VizItemSlot, VizItemType } from '@luzmo/dashboard-contents-types';
-import type { IconDefinition } from '@luzmo/icons';
-import type { Placement } from '@luzmo/lucero';
-import type { TemplateResult } from 'lit';
-export type DefaultActionType = 'lock' | 'filters' | 'edit' | 'edit-data' | 'item-options' | 'delete' | 'clone';
-export interface Action {
-    icon?: IconDefinition;
-    label?: string;
-    action?: string | DefaultActionType;
-    type?: 'toggle' | 'button';
-    active?: boolean;
-    tooltip?: string;
-}
-export interface InputActionGroup {
-    type: 'group';
-    actions: (string | Action)[];
-}
-export interface ActionGroup {
-    type: 'group';
-    actions?: Action[];
-}
-export interface GridItemData {
-    id: string;
-    type: VizItemType;
-    placementActionsMenu?: Placement;
-    actionsMenu?: InputActionGroup[];
-    position?: {
-        sizeX: number;
-        sizeY: number;
-        row: number;
-        col: number;
-    };
-    options?: VizItemOptions;
-    slots?: VizItemSlot[];
-    filters?: ItemFilterGroup[];
-    contextId?: string;
-    canFilter?: string | string[];
-    renderer?: string;
-}
-export type ClonedItemPositioning = 'auto-position' | 'below-item';
-export type GridItemPosition = NonNullable<GridItemData['position']>;
-export type GridItemPositionPatch = Partial<Pick<GridItemPosition, 'col' | 'row'>>;
-export type GridItemSizePatch = Partial<Pick<GridItemPosition, 'sizeX' | 'sizeY'>>;
-export type GridItemPositionInput = Partial<GridItemPosition>;
-export type AddGridItemInput = Omit<GridItemData, 'position'> & {
-    position?: GridItemPositionInput;
-};
-export type GridItemPatch = Partial<Omit<GridItemData, 'id' | 'position'>> & {
-    position?: Partial<GridItemPosition>;
-};
-export type GridItemRenderer = (item: GridItemData, index: number) => TemplateResult;
-export type ItemStates = Record<string, string[]>;
-export interface GridItemStatesChangedEventDetail {
-    itemStates: ItemStates;
-    updatedItemStates: ItemStates;
-    changedItemStates: ItemStates;
-}
+export type * from '../../grid-core';

package/components/item-grid-CbXKsQm4.js

@@ -0,0 +1,245 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import "./tokens-Ov1pCR4Y.js";
+import { t as e } from "./decorate-DyMgX_Uh.js";
+import { n as t, t as n } from "./themes-CQZd578_.js";
+import { n as r, t as i } from "./grid-core-BFNgmaGk.js";
+import { itemTypes as a } from "./item-list.js";
+import "./item-grid-item-actions-menu-B7ylgTwO.js";
+import { luzmoCircle as o, luzmoClone as s, luzmoCog as c, luzmoFilterOutline as l, luzmoLockOutline as u, luzmoPencil as d, luzmoTable as f, luzmoTrashOutline as p } from "@luzmo/icons";
+import { html as m, nothing as h } from "lit";
+import { property as g } from "lit/decorators.js";
+import "@luzmo/lucero/action-button";
+import "@luzmo/embed";
+import "@luzmo/lucero/action-group";
+//#region src/components/item-grid/helpers/grid-chart-rendering.ts
+var _ = (e, { appServer: t, apiHost: n, authKey: r, authToken: i, contentLanguage: a, fullTheme: o }) => {
+	let s = {
+		...e.options,
+		locale: a
+	};
+	return s.theme ||= o?.id ? { id: o.id } : structuredClone(o), m`              <luzmo-embed-viz-item
+                .appServer=${t}
+                .apiHost=${n}
+                .authKey=${r}
+                .authToken=${i}
+                .type=${e.type}
+                .slots=${e.slots}
+                .options=${s}
+                .filters=${e.filters}
+                .language=${a}
+                .canFilter=${e.canFilter ?? "all"}
+              ></luzmo-embed-viz-item>`;
+}, v = (e, t) => {
+	e.forEach((e) => {
+		let n = e.querySelector("luzmo-embed-viz-item");
+		n && (n.options = {
+			...n.options,
+			locale: t
+		});
+	});
+}, y = (e, t) => r(e, t).map((e) => {
+	let t = e.element?.querySelector("luzmo-embed-viz-item");
+	return t ? {
+		...e,
+		luzmoElement: t
+	} : e;
+}), b = {
+	lock: {
+		icon: u,
+		label: "Lock",
+		tooltip: "Lock",
+		action: "lock",
+		type: "toggle"
+	},
+	edit: {
+		icon: d,
+		label: "Edit",
+		tooltip: "Edit",
+		action: "edit",
+		type: "toggle"
+	},
+	"edit-data": {
+		icon: f,
+		label: "Edit data",
+		tooltip: "Data",
+		action: "edit-data",
+		type: "toggle"
+	},
+	"item-options": {
+		icon: c,
+		label: "Item options",
+		tooltip: "Options",
+		action: "item-options",
+		type: "toggle"
+	},
+	filters: {
+		icon: l,
+		label: "Filters",
+		tooltip: "Filters",
+		action: "filters",
+		type: "toggle"
+	},
+	clone: {
+		icon: s,
+		label: "Clone",
+		tooltip: "Clone",
+		action: "clone",
+		type: "button"
+	},
+	delete: {
+		icon: p,
+		label: "Delete",
+		tooltip: "Delete",
+		action: "delete",
+		type: "button"
+	}
+}, x = (e) => {
+	if (e) return structuredClone(e).map((e) => {
+		if (e.type === "group") return e.actions = e.actions ?? [], e.actions = e.actions.map((e) => {
+			if (typeof e == "string" && Object.hasOwn(b, e)) return { ...b[e] };
+			if (typeof e == "object") return e.icon = e.icon ?? o, e.label = e.label ?? e.action, e.tooltip = e.tooltip ?? e.label ?? e.action, e.type = ["toggle", "button"].includes(e.type ?? "") ? e.type : "button", e;
+		}).filter(Boolean), e;
+	}).filter(Boolean);
+}, S = () => [{
+	type: "group",
+	actions: [
+		{ ...b["edit-data"] },
+		{ ...b["item-options"] },
+		{ ...b.clone }
+	]
+}, {
+	type: "group",
+	actions: [{ ...b.delete }]
+}], C = ({ item: e, defaultItemActionsMenu: t, activeActions: n }) => {
+	let r = x(e?.actionsMenu) ?? x(t) ?? S();
+	if (!a.find((t) => t.type === e?.type)?.containsData && !e?.actionsMenu && !t && (r = r.map((e) => ({
+		...e,
+		actions: e.actions?.filter((e) => e.action !== "edit-data")
+	}))), n && n.length > 0) {
+		let e = new Set(n);
+		r = r.map((t) => ({
+			...t,
+			actions: t.actions?.map((t) => ({
+				...t,
+				active: t.action && e.has(t.action) ? !0 : t.active
+			}))
+		}));
+	}
+	return r;
+}, w = ({ item: e, activeActions: t, defaultItemActionsMenu: n, placementItemActionsMenu: r, language: i, handleAction: a, itemActionsDocumentPopover: o = !0 }) => {
+	let s = C({
+		item: e,
+		defaultItemActionsMenu: n,
+		activeActions: t
+	});
+	return m`
+    <div class="grid-item-actions-popover" popover=${o ? "manual" : h}>
+      <luzmo-item-grid-item-actions-menu
+        .actions=${s}
+        placement=${e?.placementActionsMenu ?? r ?? "right-start"}
+        .language=${i}
+        @luzmo-item-grid-item-action=${a}
+      >
+      </luzmo-item-grid-item-actions-menu>
+    </div>
+  `;
+}, T = async ({ theme: e, currentTheme: r }) => e?.type === "custom" ? structuredClone(e) : e?.id && e.id === r?.id ? r : e?.id && t.includes(e.id) && r?.id !== e.id ? {
+	...await n(e.id),
+	id: e.id
+} : e?.id && r?.id !== e.id || !e && r ? r : await n("default"), E = class extends i {
+	constructor(...e) {
+		super(...e), this.appServer = "https://app.luzmo.com/", this.apiHost = "https://api.luzmo.com";
+	}
+	renderItemContent(e) {
+		return _(e, {
+			appServer: this.appServer,
+			apiHost: this.apiHost,
+			authKey: this.authKey,
+			authToken: this.authToken,
+			contentLanguage: this.contentLanguage,
+			fullTheme: this.resolvedTheme
+		});
+	}
+	getItemRenderDependencies() {
+		return [
+			this.appServer,
+			this.apiHost,
+			this.authKey,
+			this.authToken,
+			this.contentLanguage
+		];
+	}
+	resolveTheme(e, t) {
+		return T({
+			theme: e,
+			currentTheme: t
+		});
+	}
+	renderOverlayContent(e, t) {
+		return w({
+			item: e,
+			activeActions: t,
+			defaultItemActionsMenu: this.defaultItemActionsMenu,
+			placementItemActionsMenu: this.placementItemActionsMenu,
+			language: this.language,
+			handleAction: this.handleItemAction,
+			itemActionsDocumentPopover: this.itemActionsDocumentPopover
+		});
+	}
+	firstUpdated(e = /* @__PURE__ */ new Map()) {
+		super.firstUpdated(e);
+	}
+	updated(e) {
+		super.updated(e), e.has("contentLanguage") && v(this.renderRoot.querySelectorAll(".luzmo-item-grid-item"), this.contentLanguage);
+	}
+	get gridItems() {
+		let e = this.renderRoot.querySelector(".grid-stack");
+		return e ? y(this.items, e) : [];
+	}
+	getGridItemById(e) {
+		return this.gridItems.find((t) => t.item.id === e);
+	}
+};
+//#endregion
+//#region src/components/item-grid/index.ts
+e([g({
+	type: String,
+	attribute: "app-server",
+	reflect: !0
+})], E.prototype, "appServer", void 0), e([g({
+	type: String,
+	attribute: "api-host",
+	reflect: !0
+})], E.prototype, "apiHost", void 0), e([g({
+	type: String,
+	attribute: "auth-key",
+	reflect: !0
+})], E.prototype, "authKey", void 0), e([g({
+	type: String,
+	attribute: "auth-token",
+	reflect: !0
+})], E.prototype, "authToken", void 0), e([g({
+	type: Number,
+	attribute: "cache-time",
+	reflect: !0
+})], E.prototype, "cacheTime", void 0), customElements.get("luzmo-item-grid") || customElements.define("luzmo-item-grid", E);
+//#endregion
+export { E as t };

package/components/item-grid-DTishUCb.cjs

@@ -0,0 +1,41 @@
+/*! * 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("./decorate-DCJt-2rt.cjs"),t=require("./themes-kvrISOTz.cjs"),n=require("./grid-core-DY0vyroD.cjs"),r=require("./item-list.cjs");require("./item-grid-item-actions-menu-C3BUxZJc.cjs");let i=require("@luzmo/icons"),a=require("lit"),o=require("lit/decorators.js");require("@luzmo/lucero/action-button"),require("@luzmo/embed"),require("@luzmo/lucero/action-group");var s=(e,{appServer:t,apiHost:n,authKey:r,authToken:i,contentLanguage:o,fullTheme:s})=>{let c={...e.options,locale:o};return c.theme||=s?.id?{id:s.id}:structuredClone(s),a.html`              <luzmo-embed-viz-item
+                .appServer=${t}
+                .apiHost=${n}
+                .authKey=${r}
+                .authToken=${i}
+                .type=${e.type}
+                .slots=${e.slots}
+                .options=${c}
+                .filters=${e.filters}
+                .language=${o}
+                .canFilter=${e.canFilter??`all`}
+              ></luzmo-embed-viz-item>`},c=(e,t)=>{e.forEach(e=>{let n=e.querySelector(`luzmo-embed-viz-item`);n&&(n.options={...n.options,locale:t})})},l=(e,t)=>n.n(e,t).map(e=>{let t=e.element?.querySelector(`luzmo-embed-viz-item`);return t?{...e,luzmoElement:t}:e}),u={lock:{icon:i.luzmoLockOutline,label:`Lock`,tooltip:`Lock`,action:`lock`,type:`toggle`},edit:{icon:i.luzmoPencil,label:`Edit`,tooltip:`Edit`,action:`edit`,type:`toggle`},"edit-data":{icon:i.luzmoTable,label:`Edit data`,tooltip:`Data`,action:`edit-data`,type:`toggle`},"item-options":{icon:i.luzmoCog,label:`Item options`,tooltip:`Options`,action:`item-options`,type:`toggle`},filters:{icon:i.luzmoFilterOutline,label:`Filters`,tooltip:`Filters`,action:`filters`,type:`toggle`},clone:{icon:i.luzmoClone,label:`Clone`,tooltip:`Clone`,action:`clone`,type:`button`},delete:{icon:i.luzmoTrashOutline,label:`Delete`,tooltip:`Delete`,action:`delete`,type:`button`}},d=e=>{if(e)return structuredClone(e).map(e=>{if(e.type===`group`)return e.actions=e.actions??[],e.actions=e.actions.map(e=>{if(typeof e==`string`&&Object.hasOwn(u,e))return{...u[e]};if(typeof e==`object`)return e.icon=e.icon??i.luzmoCircle,e.label=e.label??e.action,e.tooltip=e.tooltip??e.label??e.action,e.type=[`toggle`,`button`].includes(e.type??``)?e.type:`button`,e}).filter(Boolean),e}).filter(Boolean)},f=()=>[{type:`group`,actions:[{...u[`edit-data`]},{...u[`item-options`]},{...u.clone}]},{type:`group`,actions:[{...u.delete}]}],p=({item:e,defaultItemActionsMenu:t,activeActions:n})=>{let i=d(e?.actionsMenu)??d(t)??f();if(!r.itemTypes.find(t=>t.type===e?.type)?.containsData&&!e?.actionsMenu&&!t&&(i=i.map(e=>({...e,actions:e.actions?.filter(e=>e.action!==`edit-data`)}))),n&&n.length>0){let e=new Set(n);i=i.map(t=>({...t,actions:t.actions?.map(t=>({...t,active:t.action&&e.has(t.action)?!0:t.active}))}))}return i},m=({item:e,activeActions:t,defaultItemActionsMenu:n,placementItemActionsMenu:r,language:i,handleAction:o,itemActionsDocumentPopover:s=!0})=>{let c=p({item:e,defaultItemActionsMenu:n,activeActions:t});return a.html`
+    <div class="grid-item-actions-popover" popover=${s?`manual`:a.nothing}>
+      <luzmo-item-grid-item-actions-menu
+        .actions=${c}
+        placement=${e?.placementActionsMenu??r??`right-start`}
+        .language=${i}
+        @luzmo-item-grid-item-action=${o}
+      >
+      </luzmo-item-grid-item-actions-menu>
+    </div>
+  `},h=async({theme:e,currentTheme:n})=>e?.type===`custom`?structuredClone(e):e?.id&&e.id===n?.id?n:e?.id&&t.n.includes(e.id)&&n?.id!==e.id?{...await t.t(e.id),id:e.id}:e?.id&&n?.id!==e.id||!e&&n?n:await t.t(`default`),g=class extends n.t{constructor(...e){super(...e),this.appServer=`https://app.luzmo.com/`,this.apiHost=`https://api.luzmo.com`}renderItemContent(e){return s(e,{appServer:this.appServer,apiHost:this.apiHost,authKey:this.authKey,authToken:this.authToken,contentLanguage:this.contentLanguage,fullTheme:this.resolvedTheme})}getItemRenderDependencies(){return[this.appServer,this.apiHost,this.authKey,this.authToken,this.contentLanguage]}resolveTheme(e,t){return h({theme:e,currentTheme:t})}renderOverlayContent(e,t){return m({item:e,activeActions:t,defaultItemActionsMenu:this.defaultItemActionsMenu,placementItemActionsMenu:this.placementItemActionsMenu,language:this.language,handleAction:this.handleItemAction,itemActionsDocumentPopover:this.itemActionsDocumentPopover})}firstUpdated(e=new Map){super.firstUpdated(e)}updated(e){super.updated(e),e.has(`contentLanguage`)&&c(this.renderRoot.querySelectorAll(`.luzmo-item-grid-item`),this.contentLanguage)}get gridItems(){let e=this.renderRoot.querySelector(`.grid-stack`);return e?l(this.items,e):[]}getGridItemById(e){return this.gridItems.find(t=>t.item.id===e)}};e.t([(0,o.property)({type:String,attribute:`app-server`,reflect:!0})],g.prototype,`appServer`,void 0),e.t([(0,o.property)({type:String,attribute:`api-host`,reflect:!0})],g.prototype,`apiHost`,void 0),e.t([(0,o.property)({type:String,attribute:`auth-key`,reflect:!0})],g.prototype,`authKey`,void 0),e.t([(0,o.property)({type:String,attribute:`auth-token`,reflect:!0})],g.prototype,`authToken`,void 0),e.t([(0,o.property)({type:Number,attribute:`cache-time`,reflect:!0})],g.prototype,`cacheTime`,void 0),customElements.get(`luzmo-item-grid`)||customElements.define(`luzmo-item-grid`,g),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return g}});

package/components/item-grid-item-actions-menu/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("../item-grid-item-actions-menu-C3BUxZJc.cjs");Object.defineProperty(exports,"LuzmoItemGridItemActionsMenu",{enumerable:!0,get:function(){return e.t}});

package/components/item-grid-item-actions-menu/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoItemGridItemActionsMenu } from './item-grid-item-actions-menu';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-grid-item-actions-menu': LuzmoItemGridItemActionsMenu;
+    }
+}
+export { LuzmoItemGridItemActionsMenu } from './item-grid-item-actions-menu';
+export type { Action, ActionGroup, ItemGridItemActionEventDetail, ItemGridItemActionHoverEventDetail } from './types';

package/components/item-grid-item-actions-menu/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 { t as e } from "../item-grid-item-actions-menu-B7ylgTwO.js";
+export { e as LuzmoItemGridItemActionsMenu };

package/components/item-grid-item-actions-menu/item-grid-item-actions-menu.d.ts

@@ -0,0 +1,70 @@
+import type { Placement } from '@luzmo/lucero';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/tooltip';
+import { LuzmoElement } from '@luzmo/lucero/utils';
+import { CSSResultArray, type PropertyValues, type TemplateResult } from 'lit';
+import type { ActionGroup } from './types';
+declare const LuzmoItemGridItemActionsMenu_base: (new (...args: any[]) => {
+    language: string;
+}) & typeof LuzmoElement;
+/**
+ * @customElement luzmo-item-grid-item-actions-menu
+ * @summary A configurable toolbar for item-grid actions.
+ * @fires {CustomEvent<ItemGridItemActionEventDetail>} luzmo-item-grid-item-action - Fired when the user activates an action.
+ * @fires {CustomEvent<ItemGridItemActionHoverEventDetail>} luzmo-item-grid-item-action-hover - Fired when the pointer enters an action, for example to preload what it opens.
+ * @cssprop --luzmo-item-grid-item-actions-menu-group-gap - Gap between action groups.
+ * @cssprop --luzmo-item-grid-item-actions-menu-flex-direction - Direction of action groups and buttons.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-padding - Padding around each action icon.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-border-radius - Border radius at the ends of each action group.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-background - Default action-button background.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-background-hover - Hovered action-button background.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-background-active - Pressed action-button background.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-background-focus - Focused action-button background.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-background-selected - Selected toggle background.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-icon-color - Default action icon color.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-icon-color-hover - Hovered action icon color.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-icon-color-active - Pressed action icon color.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-icon-color-focus - Focused action icon color.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-icon-color-selected - Selected toggle icon color.
+ * @cssprop --luzmo-item-grid-item-actions-menu-delete-background-hover - Delete action background on hover.
+ * @cssprop --luzmo-item-grid-item-actions-menu-delete-background-active - Delete action background while pressed.
+ * @cssprop --luzmo-item-grid-item-actions-menu-delete-background-focus - Delete action background while focused.
+ * @cssprop --luzmo-item-grid-item-actions-menu-delete-icon-color-hover - Delete action icon color on hover.
+ * @cssprop --luzmo-item-grid-item-actions-menu-delete-icon-color-active - Delete action icon color while pressed.
+ * @cssprop --luzmo-item-grid-item-actions-menu-delete-icon-color-focus - Delete action icon color while focused.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-focus-outline-width - Width of the keyboard focus outline on action buttons. Defaults to `--luzmo-indicator-width`.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-focus-outline-color - Color of the keyboard focus outline on action buttons. Defaults to `--luzmo-indicator-color`.
+ * @cssprop --luzmo-item-grid-item-actions-menu-button-focus-outline-offset - Offset of the keyboard focus outline on action buttons. Defaults to `--luzmo-indicator-gap` (2px), outside the button.
+ * @cssprop --luzmo-item-grid-item-actions-menu-transition - Action-button transition.
+ * @cssprop --luzmo-item-grid-item-actions-menu-font-size - Menu font size.
+ * @cssprop --luzmo-item-grid-item-actions-menu-box-shadow - Shadow around each action group.
+ * @cssprop --luzmo-item-grid-item-actions-menu-tooltip-font-family - Tooltip font family.
+ */
+export declare class LuzmoItemGridItemActionsMenu extends LuzmoItemGridItemActionsMenu_base {
+    static get styles(): CSSResultArray;
+    /** The preferred placement, which determines the toolbar orientation. */
+    placement: Placement;
+    /** The grouped actions displayed in the toolbar. */
+    actions: ActionGroup[];
+    private _focusedActionIndex;
+    private get isVertical();
+    private get actionCount();
+    protected willUpdate(changes: PropertyValues<this>): void;
+    /** Clears every active toggle action. */
+    clearActiveToggles(): void;
+    /** Focuses the first toggle action, or the first available action. */
+    focus(): void;
+    private _getActionButtons;
+    private _setFocusedButton;
+    private _dispatchAction;
+    private _handleActionPointerEnter;
+    private _handleActionClick;
+    private _handleActionFocus;
+    private _handleActionKeydown;
+    private _getActionLabel;
+    private _getActionTooltip;
+    private _renderAction;
+    private _getTooltipPlacement;
+    protected render(): TemplateResult;
+}
+export {};

package/components/item-grid-item-actions-menu/types.d.ts

@@ -0,0 +1,11 @@
+import type { Action } from '../../grid-core/types';
+export type { Action, ActionGroup } from '../../grid-core/types';
+export interface ItemGridItemActionEventDetail {
+    action?: string;
+    type?: Action['type'];
+    active: boolean;
+}
+export interface ItemGridItemActionHoverEventDetail {
+    action?: string;
+    type?: Action['type'];
+}