@dash-builder/angular 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @dash-builder/angular
+
+## 0.1.0
+
+### Minor Changes
+
+- 37f3acf: First public release: a dashboard grid where widgets flow into a fixed number of columns and can be dragged and resized, with four drop modes (insert, block, shrink, swap), drag handles, locked widgets, a row limit and a narrow (stacked) view. `@dash-builder/core` works on its own; `@dash-builder/angular` and `@dash-builder/react` wrap it.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dash-builder contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.

package/README.md

@@ -1,3 +1,119 @@
-# Temporary Holding Version
+# @dash-builder/angular
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Angular bindings for [`@dash-builder/core`](https://www.npmjs.com/package/@dash-builder/core), a dashboard grid where widgets flow left to right into a fixed number of columns and can be dragged and resized. The layout is an ordered list: array order is position, there are no x/y coordinates.
+
+Requires Angular 22. Works with and without zone.js: the grid's DOM listeners run outside the Angular zone, and state flows through signals.
+
+## Install
+
+`@dash-builder/core` is a peer dependency, so install both:
+
+```sh
+pnpm add @dash-builder/angular @dash-builder/core
+# or: npm install @dash-builder/angular @dash-builder/core
+```
+
+## Styles
+
+Import the grid stylesheet once, in your global `styles.css`:
+
+```css
+@import '@dash-builder/core/grid.css';
+```
+
+## Usage
+
+```ts
+import { Component, signal } from '@angular/core';
+import { DashGrid, DashHandle, DashWidget, type LayoutItem } from '@dash-builder/angular';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [DashGrid, DashWidget, DashHandle],
+  template: `
+    <dash-grid [columns]="4" dropMode="insert" [(layout)]="layout" (layoutChange)="save($event)">
+      @for (item of layout(); track item.id) {
+        <div [dashWidget]="item.id">
+          <header dashHandle>{{ item.id }}</header>
+          <p>Widget content</p>
+        </div>
+      }
+    </dash-grid>
+  `,
+})
+export class Dashboard {
+  readonly layout = signal<LayoutItem[]>([
+    { id: 'a', w: 2, h: 2 },
+    { id: 'b', w: 1, h: 1 },
+    { id: 'c', w: 1, h: 1, locked: true },
+  ]);
+
+  save(layout: LayoutItem[]) {
+    localStorage.setItem('dashboard-layout', JSON.stringify(layout));
+  }
+}
+```
+
+- `<dash-grid>` is the grid container. Each projected element with `[dashWidget]="id"` is a widget; the id must match a layout entry. Widgets must be direct children of `<dash-grid>` (an `@for` block directly inside it is fine). Widgets rendered through `ngTemplateOutlet`, or inside a wrapper component's own template, are not direct children (Angular content projection only sees what the template using `<dash-grid>` places directly in it) and are not picked up.
+- `dashHandle` marks the only element a widget can be dragged by. Without one, the whole widget is the drag surface.
+- Render widgets from the layout with `@for (item of layout(); track item.id)`. Widgets that are added, removed, reordered or given a new id are picked up after Angular updates the DOM. Don't use `track item` (object identity): the grid emits copies of the items, so every widget would be destroyed and recreated after each drop.
+
+## API
+
+### `DashGrid` (`<dash-grid>`)
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `layout` | `LayoutItem[]` | required | Two-way: `[(layout)]` or `[layout]` + `(layoutChange)`. |
+| `columns` | `number` | required | Number of columns. |
+| `dropMode` | `'insert' \| 'block' \| 'shrink' \| 'swap'` | `'insert'` | Changeable at runtime. |
+| `maxRows` | `number \| undefined` | none | Hard row limit for drops, resizes and `addItem`. |
+| `rowHeight` | `number` | `80` | Row height in px. |
+| `gap` | `number` | `8` | Gap between cells in px. |
+| `breakpoint` | `number` | `640` | Container width in px below which the narrow view is used. |
+| `ghost` | `(el: HTMLElement) => HTMLElement` | sanitized clone | Builds the drag ghost (see the core README). |
+
+The numeric inputs (`columns`, `maxRows`, `rowHeight`, `gap`, `breakpoint`) also accept static attributes, e.g. `columns="4"`.
+
+| Output | Payload | When |
+| --- | --- | --- |
+| `layoutChange` | `LayoutItem[]` | A drop or resize is released, `addItem` / `removeItem` succeed, or a `columns` change normalizes widths. Setting `layout` from outside never emits. |
+| `reject` | `RejectReason` | An `addItem` is refused (`'max-rows'`, `'duplicate'` or `'invalid'`). |
+
+| Method | Description |
+| --- | --- |
+| `addItem(item: LayoutItem, index?: number): DropResult` | Inserts at `index` (default: append). On success updates `layout` and emits `layoutChange`; otherwise emits `reject` and returns `{ ok: false, reason }`. |
+| `removeItem(id: string): void` | Removes the item and emits `layoutChange`; an unknown id does nothing. |
+
+Get the instance with `viewChild.required(DashGrid)`.
+
+### `DashWidget` (`[dashWidget]`) and `DashHandle` (`[dashHandle]`)
+
+`dashWidget` takes the widget id (required) and sets `data-grid-id`; `dashHandle` sets `data-grid-handle`.
+
+### Adding widgets: use `addItem`
+
+Prefer `grid.addItem(item)` over pushing to the layout yourself:
+
+```ts
+readonly grid = viewChild.required(DashGrid);
+
+add() {
+  const result = this.grid().addItem({ id: crypto.randomUUID(), w: 1, h: 1 });
+  if (!result.ok) console.warn('not added:', result.reason);
+}
+```
+
+`addItem` enforces `maxRows`, refuses duplicate ids and reports the refusal through `reject`. A plain `layout.update((l) => [...l, item])` bypasses all of that: the grid shows whatever layout it is given.
+
+## Narrow view
+
+When `<dash-grid>` is narrower than `breakpoint` (default 640 px), widgets stack in a single column in list order and resizing is disabled. Dragging still reorders them, but only temporarily: a narrow-view reorder never emits `layoutChange`, so the saved layout is untouched. Set `[breakpoint]="0"` to turn the narrow view off.
+
+## Drop modes
+
+`insert`, `block`, `shrink` and `swap` are described in the [core README](https://www.npmjs.com/package/@dash-builder/core#drop-modes), together with locked widgets, `maxRows` and the layout JSON format.
+
+## License
+
+MIT

package/fesm2022/dash-builder-angular.mjs

@@ -0,0 +1,367 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, NgZone, afterNextRender, afterRenderEffect, computed, contentChildren, effect, inject, input, model, numberAttribute, output, untracked } from "@angular/core";
+import { addItem, createGrid, normalizeLayout, removeItem } from "@dash-builder/core";
+var DashWidget = class DashWidget {
+	dashWidget = input.required(...ngDevMode ? [{ debugName: "dashWidget" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: DashWidget,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: DashWidget,
+		isStandalone: true,
+		selector: "[dashWidget]",
+		inputs: { dashWidget: {
+			classPropertyName: "dashWidget",
+			publicName: "dashWidget",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: { properties: { "attr.data-grid-id": "dashWidget()" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: DashWidget,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[dashWidget]",
+			host: { "[attr.data-grid-id]": "dashWidget()" }
+		}]
+	}],
+	propDecorators: { dashWidget: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "dashWidget",
+			required: true
+		}]
+	}] }
+});
+var DashHandle = class DashHandle {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: DashHandle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: DashHandle,
+		isStandalone: true,
+		selector: "[dashHandle]",
+		host: { attributes: { "data-grid-handle": "" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: DashHandle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[dashHandle]",
+			host: { "data-grid-handle": "" }
+		}]
+	}]
+});
+function optionalNumber(value) {
+	return value == null || value === "" ? void 0 : numberAttribute(value);
+}
+var DashGrid = class DashGrid {
+	layout = model.required(...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	columns = input.required({
+		...ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	dropMode = input("insert", ...ngDevMode ? [{ debugName: "dropMode" }] : /* istanbul ignore next */ []);
+	maxRows = input(void 0, {
+		...ngDevMode ? { debugName: "maxRows" } : /* istanbul ignore next */ {},
+		transform: optionalNumber
+	});
+	rowHeight = input(80, {
+		...ngDevMode ? { debugName: "rowHeight" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	gap = input(8, {
+		...ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	breakpoint = input(640, {
+		...ngDevMode ? { debugName: "breakpoint" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	ghost = input(...ngDevMode ? [void 0, { debugName: "ghost" }] : /* istanbul ignore next */ []);
+	reject = output();
+	zone = inject(NgZone);
+	host = inject(ElementRef).nativeElement;
+	widgets = contentChildren(DashWidget, ...ngDevMode ? [{ debugName: "widgets" }] : /* istanbul ignore next */ []);
+	grid;
+	applied;
+	superseded = false;
+	options = computed(() => ({
+		columns: this.columns(),
+		dropMode: this.dropMode(),
+		maxRows: this.maxRows(),
+		rowHeight: this.rowHeight(),
+		gap: this.gap(),
+		breakpoint: this.breakpoint(),
+		ghost: this.ghost()
+	}), ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => {
+			const layout = this.applied = untracked(this.layout);
+			this.grid = this.zone.runOutsideAngular(() => createGrid(this.host, {
+				...untracked(this.options),
+				layout,
+				onLayoutChange: (l) => {
+					if (!this.superseded) this.zone.run(() => this.layout.set(l));
+				},
+				onReject: (r) => this.zone.run(() => this.reject.emit(r))
+			}));
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.grid?.destroy();
+			this.grid = void 0;
+		});
+		effect(() => {
+			const opts = this.options();
+			const layout = this.layout();
+			this.outside((g) => {
+				if (layout === this.applied) {
+					g.setOptions(opts);
+					return;
+				}
+				this.applied = layout;
+				this.superseded = true;
+				try {
+					g.setOptions(opts);
+				} finally {
+					this.superseded = false;
+				}
+				g.setLayout(layout);
+			});
+		});
+		afterRenderEffect(() => {
+			this.widgets().forEach((w) => w.dashWidget());
+			this.outside((g) => g.refresh());
+		});
+	}
+	addItem(item, index) {
+		const config = {
+			columns: this.columns(),
+			maxRows: this.maxRows(),
+			mode: this.dropMode()
+		};
+		const result = addItem(normalizeLayout(this.layout(), config.columns), config, item, index);
+		if (result.ok) this.layout.set(result.layout);
+		else this.reject.emit(result.reason);
+		return result;
+	}
+	removeItem(id) {
+		const current = this.layout();
+		const next = removeItem(current, id);
+		if (next !== current) this.layout.set(next);
+	}
+	outside(fn) {
+		const grid = this.grid;
+		if (grid) this.zone.runOutsideAngular(() => fn(grid));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: DashGrid,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.3",
+		type: DashGrid,
+		isStandalone: true,
+		selector: "dash-grid",
+		inputs: {
+			layout: {
+				classPropertyName: "layout",
+				publicName: "layout",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			columns: {
+				classPropertyName: "columns",
+				publicName: "columns",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			dropMode: {
+				classPropertyName: "dropMode",
+				publicName: "dropMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxRows: {
+				classPropertyName: "maxRows",
+				publicName: "maxRows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rowHeight: {
+				classPropertyName: "rowHeight",
+				publicName: "rowHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			gap: {
+				classPropertyName: "gap",
+				publicName: "gap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			breakpoint: {
+				classPropertyName: "breakpoint",
+				publicName: "breakpoint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ghost: {
+				classPropertyName: "ghost",
+				publicName: "ghost",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			layout: "layoutChange",
+			reject: "reject"
+		},
+		queries: [{
+			propertyName: "widgets",
+			predicate: DashWidget,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: DashGrid,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "dash-grid",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["layoutChange"]
+		}],
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: true
+			}]
+		}],
+		dropMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dropMode",
+				required: false
+			}]
+		}],
+		maxRows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxRows",
+				required: false
+			}]
+		}],
+		rowHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowHeight",
+				required: false
+			}]
+		}],
+		gap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gap",
+				required: false
+			}]
+		}],
+		breakpoint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "breakpoint",
+				required: false
+			}]
+		}],
+		ghost: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ghost",
+				required: false
+			}]
+		}],
+		reject: [{
+			type: i0.Output,
+			args: ["reject"]
+		}],
+		widgets: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => DashWidget), { isSignal: true }]
+		}]
+	}
+});
+export { DashGrid, DashHandle, DashWidget };
+
+//# sourceMappingURL=dash-builder-angular.mjs.map

package/fesm2022/dash-builder-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dash-builder-angular.mjs","names":["planAdd","planRemove"],"sources":["../../../projects/grid-angular/src/lib/widget.directive.ts","../../../projects/grid-angular/src/lib/handle.directive.ts","../../../projects/grid-angular/src/lib/grid.component.ts"],"sourcesContent":["import { Directive, input } from '@angular/core';\n\n/** Marks an element as a grid widget; the id is read by the core via `data-grid-id`. */\n@Directive({\n  selector: '[dashWidget]',\n  host: { '[attr.data-grid-id]': 'dashWidget()' },\n})\nexport class DashWidget {\n  readonly dashWidget = input.required<string>();\n}\n","import { Directive } from '@angular/core';\n\n/** Restricts drag start to this element within a widget (`data-grid-handle`). */\n@Directive({\n  selector: '[dashHandle]',\n  host: { 'data-grid-handle': '' },\n})\nexport class DashHandle {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  NgZone,\n  afterNextRender,\n  afterRenderEffect,\n  computed,\n  contentChildren,\n  effect,\n  inject,\n  input,\n  model,\n  numberAttribute,\n  output,\n  untracked,\n} from '@angular/core';\nimport { addItem as planAdd, createGrid, normalizeLayout, removeItem as planRemove } from '@dash-builder/core';\nimport type { DropMode, DropResult, GridController, GridOptions, LayoutItem, RejectReason } from '@dash-builder/core';\nimport { DashWidget } from './widget.directive';\n\n/** `numberAttribute`, but unset (`undefined`, `null` or an empty attribute) stays `undefined`. */\nfunction optionalNumber(value: unknown): number | undefined {\n  return value == null || value === '' ? undefined : numberAttribute(value);\n}\n\n/**\n * A dashboard grid around the `@dash-builder/core` controller. The host element is\n * the grid container; projected `[dashWidget]` elements are its widgets.\n */\n@Component({\n  selector: 'dash-grid',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DashGrid {\n  readonly layout = model.required<LayoutItem[]>();\n  readonly columns = input.required<number, unknown>({ transform: numberAttribute });\n  readonly dropMode = input<DropMode>('insert');\n  readonly maxRows = input<number | undefined, unknown>(undefined, { transform: optionalNumber });\n  readonly rowHeight = input<number, unknown>(80, { transform: numberAttribute });\n  readonly gap = input<number, unknown>(8, { transform: numberAttribute });\n  readonly breakpoint = input<number, unknown>(640, { transform: numberAttribute });\n  readonly ghost = input<GridOptions['ghost']>();\n\n  readonly reject = output<RejectReason>();\n\n  private readonly zone = inject(NgZone);\n  private readonly host: HTMLElement = inject(ElementRef).nativeElement;\n  private readonly widgets = contentChildren(DashWidget);\n  private grid?: GridController;\n  /** The layout last handed to the controller. */\n  private applied?: LayoutItem[];\n  /** Set while setOptions runs before a new layout replaces the current one. */\n  private superseded = false;\n\n  private readonly options = computed(() => ({\n    columns: this.columns(),\n    dropMode: this.dropMode(),\n    maxRows: this.maxRows(),\n    rowHeight: this.rowHeight(),\n    gap: this.gap(),\n    breakpoint: this.breakpoint(),\n    ghost: this.ghost(),\n  }));\n\n  constructor() {\n    afterNextRender(() => {\n      const layout = (this.applied = untracked(this.layout));\n      this.grid = this.zone.runOutsideAngular(() =>\n        createGrid(this.host, {\n          ...untracked(this.options),\n          layout,\n          onLayoutChange: (l) => {\n            if (!this.superseded) this.zone.run(() => this.layout.set(l));\n          },\n          onReject: (r) => this.zone.run(() => this.reject.emit(r)),\n        }),\n      );\n    });\n    inject(DestroyRef).onDestroy(() => {\n      this.grid?.destroy();\n      this.grid = undefined;\n    });\n\n    // Options and layout in one effect, so a columns change and a new layout from the\n    // same tick are applied together. Every controller call binds or unbinds DOM\n    // listeners, so all of them run outside the zone.\n    effect(() => {\n      const opts = this.options();\n      const layout = this.layout();\n      this.outside((g) => {\n        if (layout === this.applied) {\n          g.setOptions(opts); // a columns change may normalize the layout and emit\n          return;\n        }\n        this.applied = layout;\n        // The layout re-normalized for new columns is about to be replaced: don't emit it.\n        this.superseded = true;\n        try {\n          g.setOptions(opts);\n        } finally {\n          this.superseded = false;\n        }\n        g.setLayout(layout); // normalized against the new columns; no-op on our own echo\n      });\n    });\n    // After the DOM update: bind added, re-id'd or reordered widgets, release removed ones.\n    afterRenderEffect(() => {\n      this.widgets().forEach((w) => w.dashWidget()); // tracks every widget id\n      this.outside((g) => g.refresh());\n    });\n  }\n\n  /**\n   * Adds `item` at `index` (default: append), enforcing `maxRows`. On success the\n   * layout is updated and `layoutChange` emits; otherwise `reject` emits the reason.\n   */\n  addItem(item: LayoutItem, index?: number): DropResult {\n    const config = { columns: this.columns(), maxRows: this.maxRows(), mode: this.dropMode() };\n    // Plan on what the core renders (normalized), so maxRows holds for e.g. minH > h.\n    const result = planAdd(normalizeLayout(this.layout(), config.columns), config, item, index);\n    if (result.ok) this.layout.set(result.layout);\n    else this.reject.emit(result.reason);\n    return result;\n  }\n\n  /** Removes the item with `id`; an unknown id changes nothing and emits nothing. */\n  removeItem(id: string): void {\n    const current = this.layout();\n    const next = planRemove(current, id);\n    if (next !== current) this.layout.set(next);\n  }\n\n  private outside(fn: (grid: GridController) => void): void {\n    const grid = this.grid;\n    if (grid) this.zone.runOutsideAngular(() => fn(grid));\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@dash-builder/angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Angular bindings for @dash-builder/core: a dashboard grid with draggable, resizable widgets in a fixed number of columns.",
+  "license": "MIT",
+  "author": "Konstantin Penzin",
+  "homepage": "https://constantine-24.github.io/dash-builder/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Constantine-24/dash-builder.git",
+    "directory": "packages/angular/projects/grid-angular"
+  },
+  "bugs": {
+    "url": "https://github.com/Constantine-24/dash-builder/issues"
+  },
+  "keywords": [
+    "dashboard",
+    "grid",
+    "layout",
+    "widgets",
+    "drag-and-drop",
+    "resizable",
+    "draggable",
+    "angular"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@dash-builder/core": "0.x"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "directory": "../../dist/grid-angular",
+    "linkDirectory": false
+  },
+  "module": "fesm2022/dash-builder-angular.mjs",
+  "typings": "types/dash-builder-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/dash-builder-angular.d.ts",
+      "default": "./fesm2022/dash-builder-angular.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }

package/types/dash-builder-angular.d.ts

@@ -0,0 +1,99 @@
+import * as i0 from "@angular/core";
+import { DropMode, DropMode as DropMode$1, DropResult, DropResult as DropResult$1, LayoutItem, LayoutItem as LayoutItem$1, RejectReason, RejectReason as RejectReason$1 } from "@dash-builder/core";
+/** Marks an element as a grid widget; the id is read by the core via `data-grid-id`. */
+export declare class DashWidget {
+  readonly dashWidget: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DashWidget, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<DashWidget, "[dashWidget]", never, {
+    "dashWidget": {
+      "alias": "dashWidget";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** Restricts drag start to this element within a widget (`data-grid-handle`). */
+export declare class DashHandle {
+  static ɵfac: i0.ɵɵFactoryDeclaration<DashHandle, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<DashHandle, "[dashHandle]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * A dashboard grid around the `@dash-builder/core` controller. The host element is
+ * the grid container; projected `[dashWidget]` elements are its widgets.
+ */
+export declare class DashGrid {
+  readonly layout: import("@angular/core").ModelSignal<LayoutItem$1[]>;
+  readonly columns: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly dropMode: import("@angular/core").InputSignal<DropMode$1>;
+  readonly maxRows: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+  readonly rowHeight: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly gap: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly breakpoint: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly ghost: import("@angular/core").InputSignal<((el: HTMLElement) => HTMLElement) | undefined>;
+  readonly reject: import("@angular/core").OutputEmitterRef<RejectReason$1>;
+  private readonly zone;
+  private readonly host;
+  private readonly widgets;
+  private grid?;
+  /** The layout last handed to the controller. */
+  private applied?;
+  /** Set while setOptions runs before a new layout replaces the current one. */
+  private superseded;
+  private readonly options;
+  constructor();
+  /**
+   * Adds `item` at `index` (default: append), enforcing `maxRows`. On success the
+   * layout is updated and `layoutChange` emits; otherwise `reject` emits the reason.
+   */
+  addItem(item: LayoutItem$1, index?: number): DropResult$1;
+  /** Removes the item with `id`; an unknown id changes nothing and emits nothing. */
+  removeItem(id: string): void;
+  private outside;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DashGrid, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DashGrid, "dash-grid", never, {
+    "layout": {
+      "alias": "layout";
+      "required": true;
+      "isSignal": true;
+    };
+    "columns": {
+      "alias": "columns";
+      "required": true;
+      "isSignal": true;
+    };
+    "dropMode": {
+      "alias": "dropMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxRows": {
+      "alias": "maxRows";
+      "required": false;
+      "isSignal": true;
+    };
+    "rowHeight": {
+      "alias": "rowHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "breakpoint": {
+      "alias": "breakpoint";
+      "required": false;
+      "isSignal": true;
+    };
+    "ghost": {
+      "alias": "ghost";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "layout": "layoutChange";
+    "reject": "reject";
+  }, ["widgets"], ["*"], true, never>;
+}
+export type { DropMode, DropResult, LayoutItem, RejectReason };