# GrafloriaDashboardComponent

Import it from `@grafloria/angular`.

`<grafloria-dashboard>` — the dashboard kit, the Angular way.

The kit is DATA-FIRST: `[views]` (or `[widgets]` for a single unnamed view)
declare the whole board, the kit wires the pack grid, gestures, and undo. This component adds the Angular idioms on top:

```html
<grafloria-dashboard [views]="views" [(activeView)]="tab"
    (ready)="handle = $event" (layoutChange)="persist($event)">
  <ng-template grafloriaWidget="orders" let-data="data">…</ng-template>
</grafloria-dashboard>
```

`snapshot()` returns `toJSON()` — feed it back to `[views]`/`[options]` to
rebuild the identical board (the kit's round-trip contract).

```ts
@Component({
  selector: 'grafloria-dashboard',
  template: '',
  styles: [':host { display: block; position: relative; }'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GrafloriaDashboardComponent implements AfterViewInit, OnDestroy
```

Use it as `<grafloria-dashboard>` in a template.

**Inputs**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `views?` | `DashboardViewSpec[] \| undefined` |  | Multi-view (tabbed) board. Mutually exclusive with `widgets`. |
| `widgets?` | `DashboardWidgetSpec[] \| undefined` |  | Single-view shorthand. |
| `options?` | `Partial<DashboardOptions>` |  | Board options: columns, gap, sizing, rtl, responsive, binder… |
| `activeView?` | `string \| undefined` |  | Two-way active view id — the tab pattern. Two-way: also emits its change. |
| `layout?` | `'grid' \| 'split' \| undefined` |  | LIVE SWITCHES — the toolbar toggles as inputs: applied at mount (over |
| `sizing?` | `'fit' \| 'grow' \| undefined` |  |  |
| `static?` | `boolean \| undefined` |  | Static board: the viewer's mode — no drag, no resize, no handles. |

**Outputs**

- `activeViewChange`
- `ready` — The typed DashboardHandle, once the board is live.
- `layoutChange` — Mirrors the kit's committed gestures (drag, resize, add, remove).

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `views` |  |  | Multi-view (tabbed) board. Mutually exclusive with `widgets`. |
| `widgets` |  |  | Single-view shorthand. |
| `options` |  |  | Board options: columns, gap, sizing, rtl, responsive, binder… |
| `activeView` |  |  | Two-way active view id — the tab pattern. |
| `layout` |  |  | LIVE SWITCHES — the toolbar toggles as inputs: applied at mount (over `[options]`) and, when they change, through the handle (`setLayout` / `setSizing` / `setStatic`), never by remounting. 'split' is the DevExpress splitter tree; 'grid' the cell grid. |
| `sizing` |  |  |  |
| `static` |  |  | Static board: the viewer's mode — no drag, no resize, no handles. |
| `ready` |  |  | The typed DashboardHandle, once the board is live. |
| `layoutChange` |  |  | Mirrors the kit's committed gestures (drag, resize, add, remove). |

**Methods**

- `constructor()`
- `ngAfterViewInit(): void`
- `getHandle(): DashboardHandle | undefined` — The live handle (undefined before the first paint).
- `snapshot(): DashboardSnapshot | null` — `toJSON()` — the whole board as plain data, ready to feed back in.
- `ngOnDestroy(): void`