#Components

Generated by website/scripts/generate-api.ts from packages/gridla/src. Do not edit by hand; run bun run generate in website/.

Headless building blocks. <gridla-canvas> measures itself and wires input; [gridlaItem] positions one item and renders built-in resize handles; <gridla-preview-outline> shows where the active item will land; <gridla-transfer-scope> lets items move between providers.

import { GRID_DATA, GridCanvasComponent, GridDragHandleDirective, GridItemDirective, GridPreviewOutlineComponent, GridResizeHandleDirective, GridTransferScopeComponent } from 'gridla/angular'

#Components

#GridCanvasComponent

The element items are positioned in. Measures itself, feeds the size to the controller, and wires pointer and keyboard handling. Renders with position: relative; give it a height (or let it follow the layout with responsive="false" on the provider). Server rendering: the element renders empty of gesture wiring and measures itself after the first client render.

export class GridCanvasComponent // selector: gridla-canvas

#GridDragHandleDirective

Marks an element inside a [gridlaItem] as the surface that starts a move. Pair it with draggable="false" on the item so the rest of the item is inert. The bound value is optional and ignored.

export class GridDragHandleDirective // selector: [gridlaDragHandle]

#GridItemDirective

Positions one item inside \<gridla-canvas\>. Headless: it sets geometry styles and data attributes on its host and leaves appearance to you. [gridlaItem] is the item id. With resizeEdges, built-in handles are appended to the host; gridlaResizeHandle and gridlaDragHandle mark your own instead.

export class GridItemDirective // selector: [gridlaItem]

#GridPreviewOutlineComponent

A box where the active item will land when released. Hidden (display: none) when no gesture is in progress. Style it through the data-gridla-preview attribute.

export class GridPreviewOutlineComponent // selector: gridla-preview-outline

#GridResizeHandleDirective

Marks an element inside a [gridlaItem] as a resize handle for one edge: \<div gridlaResizeHandle="se"\>\</div\>. Position and style it yourself.

export class GridResizeHandleDirective // selector: [gridlaResizeHandle]

#GridTransferScopeComponent

Lets items move between every provider rendered inside it. The pointer decides the target: the deepest registered canvas under the pointer that accepts the item previews the drop; releasing there commits it. Use it as an element (\<gridla-transfer-scope\>) or an attribute ([gridlaTransferScope]); it renders no box of its own.

class export class GridTransferScopeComponent // selector: gridla-transfer-scope, [gridlaTransferScope]

#Constants

#GRID_DATA

Data attributes the pointer gesture looks for on pointer down. Adapters emit them on their elements: item carries the item id, dragHandle marks a surface that starts a move, resizeHandle plus edge mark a resize handle.

export const GRID_DATA: { readonly item: "data-gridla-item"; readonly dragHandle: "data-gridla-drag-handle"; readonly resizeHandle: "data-gridla-resize-handle"; readonly edge: "data-gridla-edge"; }