dees-catalog/ts_web/elements/dees-dashboardgrid

dees-dashboardgrid

<dees-dashboardgrid> renders a configurable dashboard layout with draggable and resizable tiles. The component is now grouped in its own folder alongside supporting utilities and styles.

Key Features

• Pointer-driven drag and resize interactions with keyboard fallbacks (arrow keys to move, Shift + arrows to resize).
• Collision-aware placement that swaps compatible tiles or displaces blocking tiles into the next free slot.
• Context menu (right-click on a tile header) that exposes destructive actions such as tile removal via dees-contextmenu.
• Layout persistence helpers via getLayout(), setLayout(...), and the layout-change event.
• Responsive presets through the layouts map and applyBreakpointLayout(...) helper to hydrate per-breakpoint arrangements.

Public API Highlights

Property	Description
widgets	Array of tile descriptors (DashboardWidget).
columns	Number of grid columns.
layouts	Optional record of named layout definitions.
activeBreakpoint	Name of the currently applied breakpoint layout.
editable	Toggles drag/resize affordances.

Method	Description
addWidget(widget, autoPosition?)	Adds a tile, optionally auto-placing it into the next free slot.
removeWidget(id)	Removes a tile and emits widget-remove.
applyBreakpointLayout(name)	Applies a layout from the layouts map.
getLayout() / setLayout(layout)	Retrieve or apply persisted layouts.
compact(direction?)	Densifies the grid vertically (default) or horizontally.

Event	Detail payload
widget-move	{ widget, displaced, swappedWith }
widget-resize	{ widget, displaced, swappedWith }
widget-remove	{ widget }
layout-change	{ layout }

Usage Notes

• Right-click a tile header to open the contextual menu and delete the tile.
• When resizing, blocking tiles will automatically reflow into free space once the interaction completes.
• Listen to layout-change to persist layouts to storage; rehydrate using setLayout or the layouts map.
• For responsive dashboards, populate grid.layouts = { base: [...], mobile: [...] } and call applyBreakpointLayout based on your own breakpoint logic (see the co-located demo for an example).

Demo

The updated dees-dashboardgrid.demo.ts showcases live breakpoint switching, layout persistence, and the context menu. Run the demo gallery to explore the interactions end-to-end.