import{type TemplateResult,type PropertyValues}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import{type LyraDashboardCell,type LyraDashboardCollisionPolicy}from'./layout.js';export interface LyraDashboardCellMoveDetail{readonly cellId:string;readonly position:Readonly<{x:number;y:number;}>;readonly previous:Readonly<{x:number;y:number;}>;}export interface LyraDashboardCellResizeDetail{readonly cellId:string;readonly size:Readonly<{w:number;h:number;}>;readonly previous:Readonly<{w:number;h:number;}>;}export interface LyraDashboardCollisionDetail{readonly cellId:string;readonly collidedCellIds:readonly string[];readonly policy:LyraDashboardCollisionPolicy;readonly accepted:boolean;}export interface LyraDashboardLayoutChangeDetail{readonly layout:readonly LyraDashboardCell[];}export interface LyraDashboardGridEventMap{'lr-cell-move':CustomEvent;'lr-cell-resize':CustomEvent;'lr-collision':CustomEvent;'lr-layout-change':CustomEvent;} /** * `` — a responsive, keyboard-accessible widget grid: positions `layout` * entries (`LyraDashboardCell`: `x`/`y`/`w`/`h` grid units + a widget descriptor) on a CSS Grid, * composing `` + `` for each cell's default content, and owns all * drag/resize/collision interaction as controlled events -- it never mutates `layout` itself, nor * ever touches `localStorage`/network; the host applies (or ignores) every emitted event and owns * persistence entirely, mirroring `lr-flow-canvas`/`lr-table`'s own controlled-component * convention. Readonly (viewer) by default; opt into editor gestures individually via * `cells-draggable`/`cells-resizable`, or lock the whole grid via `locked`. * * Cell content: a `layout` entry with no matching light-DOM child (matched by `cell-id`) gets a * default `` wrapping a version-two `` document * auto-created and adopted into `slot="cell-{cellId}"` -- this component's own job is the grid * layout/drag/resize/collision/persistence-event mechanics *around* that content, not widget * rendering itself (see `lr-widget-renderer`'s own doc for its declarative-tree contract). A * consumer wanting full control over one cell's markup can instead author * `
...
` as a direct child; it is adopted in place of the default cell. * * Keyboard: cells share one roving tabindex in row-major spatial order. Arrow * keys/Home/End move the roving focus (RTL-aware: physical Left/Right always match what the * cursor visually does, matching `lr-flow-canvas`'s own convention). While a cell has focus, * Ctrl/Cmd+Arrow moves it by one grid unit and Ctrl/Cmd+Shift+Arrow resizes it by one grid unit * (Right/Down grow, Left/Up shrink) -- the full keyboard-operable equivalent of the pointer * drag/resize gestures below, per this library's accessibility bar (no pointer-only interaction). * * Collision: every move/resize request -- pointer or keyboard -- is resolved through `collision` * (`'reject'` the default, `'push'`, or `'overlap'`; see `resolveLyraDashboardPlacement()` for * the exact rule). A rejected request leaves `layout` untouched and announces immediately. An * accepted request emits `lr-cell-move`/`lr-cell-resize` plus a `lr-layout-change` snapshot of the full * proposed layout (including any `'push'` cascade) -- the host's one persistence hook: listen for * it and persist `event.detail.layout` however it likes (`localStorage`, a network call, neither). * Success is announced only after a controlled `layout` assignment applies the requested target * geometry; a host that ignores a request produces no false move/resize confirmation. * Pointer movement snaps to the rendered track-plus-gutter pitch, including public CSS column, * row-height, and gap overrides in either text direction. * * Responsive: below a ~40rem container allocation (`@container`, not the viewport -- a dashboard * grid is commonly embedded in a panel of varying width), cells stack into a single flowing * column in the same row-major order the grid itself renders them in, instead of overflowing or * shrinking columns unreadably. A cell that currently owns a resize handle retains the shared * interactive-action block-size floor, so the absolute handle cannot overlap the preceding cell * or gap when consumer-authored content is shorter than the handle. Host, grid, cell, and slotted * custom-content boundaries all permit intrinsic shrinkage and inherit `overflow-wrap: anywhere`, * so an unbroken direct text run cannot widen the stack; a consumer-owned scrollport can still * opt into `overflow: auto`/`white-space: nowrap` and contains its own extent. * * @customElement lr-dashboard-grid * @slot cell-{cellId} - A `layout` entry's cell content; auto-populated by a default composed * ``/`` pair unless a light-DOM `[cell-id="{cellId}"]` child is * authored instead. * @event lr-cell-move - `detail: { cellId, position, previous }` — an accepted move request. * @event lr-cell-resize - `detail: { cellId, size, previous }` — an accepted resize request. * @event lr-collision - `detail: { cellId, collidedCellIds, policy, accepted }` — a move/resize request * overlapped at least one other cell, regardless of whether `policy` ultimately accepted it. * @event lr-layout-change - `detail: { layout }` — the full proposed layout after any accepted * move/resize (including a `'push'` cascade); the host's persistence hook. * @csspart base - The grid root. * @csspart empty - The `lr-empty` shown when `layout` is empty. * @csspart cell - A single cell's positioned wrapper. * @csspart resize-handle - The pointer resize grip in a cell's trailing/bottom corner (only * rendered while `cells-resizable`); the Ctrl/Cmd+Shift+Arrow keyboard path is the resize * handle's full accessible equivalent, so the handle itself is `aria-hidden`. * @csspart live-region - The `aria-hidden` mirror of the current move/resize/collision * announcement. Rejections announce immediately; accepted moves/resizes announce after the * host applies matching controlled `layout`. Spoken copy reaches the shared light-DOM polite * sink only while the grid and all composed ancestors remain exposed to the accessibility tree. * @cssprop [--lr-dashboard-grid-columns=12] - Author override for the column count; otherwise the * normalized `columns` property supplies the computed value. * @cssprop [--lr-dashboard-grid-row-height=80px] - Author override for row track * height; otherwise the normalized `rowHeight` property supplies a pixel value. * @cssprop [--lr-dashboard-grid-gap=8px] - Author override for the gap between cells; * otherwise the normalized `gap` property supplies a pixel value. * @cssprop [--lr-dashboard-grid-cell-hover-outline-color=var(--lr-color-border-strong)] - Outline * color of a cell's mouse-hover preview of its own `:focus-visible` ring (shown because every * cell is a real focusable, draggable/resizable target). Set to `transparent` to opt out. * @cssprop [--lr-dashboard-grid-collision-outline-color=var(--lr-color-danger)] - Outline color * of a cell whose current drag/resize preview collides with another cell. * @cssprop [--lr-dashboard-grid-interaction-shadow=var(--lr-shadow-m)] - Box shadow applied to a * cell for the duration of its pointer drag or resize interaction. * @status stable * @since 4.1.0 */ export declare class LyraDashboardGrid extends LyraElement{protected static readonly immutableEventDetails:readonly string[];static styles:import("lit").CSSResultGroup[];private authoredLayout;private effectiveLayout; /** The grid's immutable, bounded cell snapshot. Assign a new readonly collection to update it; * every move/resize remains a request event that the host applies or ignores, and success is * announced only when this controlled round trip contains the requested target geometry. * Invalid records are skipped and duplicate ids use the first valid occurrence. */ get layout():readonly LyraDashboardCell[];set layout(value:readonly LyraDashboardCell[]); /** Column count of the underlying CSS Grid. */ columns:number; /** Row track height, in px (also the pointer-resize/drag row snap pitch, together with `gap`). */ rowHeight:number; /** Gap between cells, in px, on both axes. */ gap:number;private collisionValue; /** How a move/resize that would overlap another cell is resolved. Foreign runtime values * normalize to the safe `reject` policy. */ get collision():LyraDashboardCollisionPolicy;set collision(value:LyraDashboardCollisionPolicy); /** Opts into pointer-drag + Ctrl/Cmd+Arrow keyboard move for unlocked cells. */ cellsDraggable:boolean; /** Opts into the pointer resize handle + Ctrl/Cmd+Shift+Arrow keyboard resize for unlocked cells. */ cellsResizable:boolean; /** Disables every drag/resize gesture grid-wide, regardless of `cells-draggable`/ * `cells-resizable` or a cell's own `locked`. */ locked:boolean; /** Overrides the grid region's accessible name; falls back to a generic localized label. Fed * only by a host `aria-label`, matching `lr-flow-canvas`'s own host-override pattern. */ accessibleLabel:string|null;private get safeColumns();private get safeRowHeight();private get safeGap();private get sortedLayout();private announcementSink?;private readonly announcer;private liveText;private activeCellIndex;private activeCellId;private cellDrag?;private cellResize?;private rehomeCellFocus;private childObserver?;private childObserverDocument?;private defaultCellSyncQueued;private readonly ownedDefaultCells;private readonly warnedUnmatchedCells;private readonly authoredSlotBaselines;private readonly managedAuthoredCells;private suppressedClickCellId;private suppressedClickTimer?;private suppressedClickWindow?;private pendingPlacementAnnouncement?;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private bindOwnerRealmResources;private scheduleDefaultCellSync;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private cellLabel;private restoreAuthoredSlot;private restoreManagedAuthoredSlots; /** Reconciles direct light-DOM children by live `cell-id`. The first authored child owns a * cell; library defaults are tracked by identity rather than by a forgeable attribute. */ private syncDefaultCells;private createDefaultCell;private updateDefaultCell;private onCellFocus;private cellElement;private focusCellAt;private onCellKeyDown;private keyboardMove;private keyboardResize;private announceAppliedPlacement;private commitPlacement;private cellStyle; /** Column/row pixel pitch, measured once per gesture (not re-measured on every pointermove -- * matches `lr-flow-canvas`'s own once-per-gesture rect-measurement convention). */ private measurePitch;private resetCellInlineStyle;private canDragCell;private canResizeCell; /** Capability revocation can end a gesture before the native pointerup/pointercancel that would * normally release capture. Ignore the browser's NotFoundError when a synthetic event, a * disconnect, or an implicit native release already ended capture. */ private releaseGesturePointerCapture;private cancelCellDrag;private cancelCellResize; /** Whether the pointer landed on an interactive control inside `wrapper` rather than on the * cell's own drag surface. */ private hasInteractiveTarget;private onCellPointerDown;private onCellPointerMove;private applyDragPreview;private flushDragPreview;private onCellPointerUp;private onResizeHandlePointerDown;private onResizeHandlePointerMove;private applyResizePreview;private flushResizePreview;private onResizeHandlePointerUp;private clearSuppressedClick;private armClickSuppression;private onCellClick;private renderCell;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-dashboard-grid':LyraDashboardGrid;}}