@argus-table/angular 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Joessst-Dev and Argus Table 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,107 @@
-# Temporary Holding Version
+# @argus-table/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 components for [`<argus-table>`](https://www.npmjs.com/package/argus-table): `ArgusTableComponent` and `ArgusColumnComponent`, with typed inputs, typed outputs and two-way binding. The row type is inferred from `[data]`, and strict templates check your bindings against it.
+
+**[Docs and live examples](https://joessst-dev.github.io/argus-table/)** · [GitHub](https://github.com/Joessst-Dev/argus-table)
+
+## Install
+
+```bash
+npm i @argus-table/angular @argus-table/themes
+```
+
+`argus-table` comes with it. Angular 20, 21 or 22.
+
+## A first table
+
+The components sit on the element's own tag, so you write `<argus-table>` as usual, with no `CUSTOM_ELEMENTS_SCHEMA`:
+
+```ts
+import { Component, input, signal } from '@angular/core';
+import { ArgusTableComponent, type ColumnDef, type SortState } from '@argus-table/angular';
+
+interface Order {
+  id: string;
+  customer: string;
+  total: number;
+}
+
+@Component({
+  selector: 'app-orders',
+  imports: [ArgusTableComponent],
+  template: `
+    <argus-table
+      aria-label="Orders"
+      style="height: 400px"
+      [columns]="columns"
+      [data]="orders()"
+      [(sorting)]="sorting"
+      (rowClick)="open($event.detail.row)"
+    />
+  `,
+})
+export class OrdersComponent {
+  readonly orders = input.required<Order[]>();
+  readonly sorting = signal<SortState>([]);
+  readonly columns: ColumnDef<Order>[] = [
+    { id: 'id', header: 'Order', accessor: 'id', width: 90, pin: 'start' },
+    {
+      id: 'customer',
+      header: 'Customer',
+      accessor: 'customer',
+      width: { flex: 1 },
+      sortable: true,
+    },
+    { id: 'total', header: 'Total', accessor: 'total', width: 110, align: 'end', sortable: true },
+  ];
+
+  open(order: Order) {}
+}
+```
+
+Add `@import '@argus-table/themes/default.css';` to your global styles for the default theme.
+
+- **Inputs** set the element's properties: `columns`, `data`, `dataSource`, `pinnedRows`, `getRowId`, `rowHeight`, `density`, `overscan`, `sorting`, `columnSizing` and `columnOrder`. Other attributes (`aria-label`, `class`, `style`, …) stay on the element. `null`, as from the `async` pipe, means unset.
+- **Outputs** emit the element's `CustomEvent`: `sortChange`, `columnResize`, `columnReorder`, `cellClick`, `rowClick`, `rangeChange` and `loadError`. In `(rowClick)`, `$event.detail.row` has your row type. The details are in the [`argus-table` README](https://www.npmjs.com/package/argus-table).
+- **Cells:** a column's `cell` function returns a string, a number, a DOM node or a Lit template. Angular templates in cells are planned.
+- **Height:** the table virtualizes its rows, so it needs a bounded height. Its default is 400 px.
+
+## Two-way binding
+
+`[(sorting)]`, `[(columnSizing)]` and `[(columnOrder)]` keep a value in sync with the table; `sortingChange`, `columnSizingChange` and `columnOrderChange` emit the new value. Leave one unbound and the table keeps that state itself. A one-way `[sorting]` is controlled: a header click only emits the proposed order, and nothing changes until you set it.
+
+## Methods
+
+A view query gives the component, with `refresh()`, `scrollToRow(index)`, `autosizeColumns(ids?)` and the `element`:
+
+```ts
+readonly table = viewChild.required(ArgusTableComponent);
+
+top() {
+  void this.table().scrollToRow(0);
+}
+```
+
+## Columns as children
+
+`ArgusColumnComponent` sits on `<argus-column>`, so columns can come from `@for`. Attributes work as in HTML (`width="90"`, `sortable`, `resizable="false"`), and inputs take values:
+
+```ts
+@Component({
+  imports: [ArgusTableComponent, ArgusColumnComponent],
+  template: `
+    <argus-table [data]="orders">
+      <argus-column column-id="id" header="Order" accessor="id" width="90" pin="start" />
+      @for (c of extra; track c.id) {
+        <argus-column [columnId]="c.id" [header]="c.label" [accessor]="c.id" sortable />
+      }
+    </argus-table>
+  `,
+})
+```
+
+A non-empty `columns` input wins over the children.
+
+## License
+
+MIT

package/dist/README.md

@@ -0,0 +1,107 @@
+# @argus-table/angular
+
+Angular components for [`<argus-table>`](https://www.npmjs.com/package/argus-table): `ArgusTableComponent` and `ArgusColumnComponent`, with typed inputs, typed outputs and two-way binding. The row type is inferred from `[data]`, and strict templates check your bindings against it.
+
+**[Docs and live examples](https://joessst-dev.github.io/argus-table/)** · [GitHub](https://github.com/Joessst-Dev/argus-table)
+
+## Install
+
+```bash
+npm i @argus-table/angular @argus-table/themes
+```
+
+`argus-table` comes with it. Angular 20, 21 or 22.
+
+## A first table
+
+The components sit on the element's own tag, so you write `<argus-table>` as usual, with no `CUSTOM_ELEMENTS_SCHEMA`:
+
+```ts
+import { Component, input, signal } from '@angular/core';
+import { ArgusTableComponent, type ColumnDef, type SortState } from '@argus-table/angular';
+
+interface Order {
+  id: string;
+  customer: string;
+  total: number;
+}
+
+@Component({
+  selector: 'app-orders',
+  imports: [ArgusTableComponent],
+  template: `
+    <argus-table
+      aria-label="Orders"
+      style="height: 400px"
+      [columns]="columns"
+      [data]="orders()"
+      [(sorting)]="sorting"
+      (rowClick)="open($event.detail.row)"
+    />
+  `,
+})
+export class OrdersComponent {
+  readonly orders = input.required<Order[]>();
+  readonly sorting = signal<SortState>([]);
+  readonly columns: ColumnDef<Order>[] = [
+    { id: 'id', header: 'Order', accessor: 'id', width: 90, pin: 'start' },
+    {
+      id: 'customer',
+      header: 'Customer',
+      accessor: 'customer',
+      width: { flex: 1 },
+      sortable: true,
+    },
+    { id: 'total', header: 'Total', accessor: 'total', width: 110, align: 'end', sortable: true },
+  ];
+
+  open(order: Order) {}
+}
+```
+
+Add `@import '@argus-table/themes/default.css';` to your global styles for the default theme.
+
+- **Inputs** set the element's properties: `columns`, `data`, `dataSource`, `pinnedRows`, `getRowId`, `rowHeight`, `density`, `overscan`, `sorting`, `columnSizing` and `columnOrder`. Other attributes (`aria-label`, `class`, `style`, …) stay on the element. `null`, as from the `async` pipe, means unset.
+- **Outputs** emit the element's `CustomEvent`: `sortChange`, `columnResize`, `columnReorder`, `cellClick`, `rowClick`, `rangeChange` and `loadError`. In `(rowClick)`, `$event.detail.row` has your row type. The details are in the [`argus-table` README](https://www.npmjs.com/package/argus-table).
+- **Cells:** a column's `cell` function returns a string, a number, a DOM node or a Lit template. Angular templates in cells are planned.
+- **Height:** the table virtualizes its rows, so it needs a bounded height. Its default is 400 px.
+
+## Two-way binding
+
+`[(sorting)]`, `[(columnSizing)]` and `[(columnOrder)]` keep a value in sync with the table; `sortingChange`, `columnSizingChange` and `columnOrderChange` emit the new value. Leave one unbound and the table keeps that state itself. A one-way `[sorting]` is controlled: a header click only emits the proposed order, and nothing changes until you set it.
+
+## Methods
+
+A view query gives the component, with `refresh()`, `scrollToRow(index)`, `autosizeColumns(ids?)` and the `element`:
+
+```ts
+readonly table = viewChild.required(ArgusTableComponent);
+
+top() {
+  void this.table().scrollToRow(0);
+}
+```
+
+## Columns as children
+
+`ArgusColumnComponent` sits on `<argus-column>`, so columns can come from `@for`. Attributes work as in HTML (`width="90"`, `sortable`, `resizable="false"`), and inputs take values:
+
+```ts
+@Component({
+  imports: [ArgusTableComponent, ArgusColumnComponent],
+  template: `
+    <argus-table [data]="orders">
+      <argus-column column-id="id" header="Order" accessor="id" width="90" pin="start" />
+      @for (c of extra; track c.id) {
+        <argus-column [columnId]="c.id" [header]="c.label" [accessor]="c.id" sortable />
+      }
+    </argus-table>
+  `,
+})
+```
+
+A non-empty `columns` input wins over the children.
+
+## License
+
+MIT

package/dist/fesm2022/argus-table-angular.mjs

@@ -0,0 +1,324 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation, inject } from "@angular/core";
+import "argus-table";
+function setProperty(element, property, attribute, value) {
+	if (attribute !== void 0) {
+		if (typeof value === "string") {
+			element.setAttribute(attribute, value);
+			return;
+		}
+		if (value == null) element.removeAttribute(attribute);
+	}
+	element[property] = value ?? void 0;
+}
+var ArgusTableComponent = class ArgusTableComponent {
+	constructor() {
+		this.element = inject(ElementRef).nativeElement;
+		this.sortChange = new EventEmitter();
+		this.sortingChange = new EventEmitter();
+		this.columnResize = new EventEmitter();
+		this.columnSizingChange = new EventEmitter();
+		this.columnReorder = new EventEmitter();
+		this.columnOrderChange = new EventEmitter();
+		this.cellClick = new EventEmitter();
+		this.rowClick = new EventEmitter();
+		this.rangeChange = new EventEmitter();
+		this.loadError = new EventEmitter();
+	}
+	set columns(value) {
+		setProperty(this.element, "columns", void 0, value);
+	}
+	set data(value) {
+		setProperty(this.element, "data", void 0, value);
+	}
+	set dataSource(value) {
+		setProperty(this.element, "dataSource", void 0, value);
+	}
+	set pinnedRows(value) {
+		setProperty(this.element, "pinnedRows", void 0, value);
+	}
+	set getRowId(value) {
+		setProperty(this.element, "getRowId", void 0, value);
+	}
+	set rowHeight(value) {
+		setProperty(this.element, "rowHeight", "row-height", value);
+	}
+	set density(value) {
+		setProperty(this.element, "density", "density", value);
+	}
+	set overscan(value) {
+		setProperty(this.element, "overscan", "overscan", value);
+	}
+	set sorting(value) {
+		setProperty(this.element, "sorting", void 0, value);
+	}
+	set columnSizing(value) {
+		setProperty(this.element, "columnSizing", void 0, value);
+	}
+	set columnOrder(value) {
+		setProperty(this.element, "columnOrder", void 0, value);
+	}
+	refresh(...args) {
+		return this.element.refresh(...args);
+	}
+	autosizeColumns(...args) {
+		return this.element.autosizeColumns(...args);
+	}
+	scrollToRow(...args) {
+		return this.element.scrollToRow(...args);
+	}
+	handleSortChange(event) {
+		if (event.target !== this.element) return;
+		const e = event;
+		this.sortChange.emit(e);
+		this.sortingChange.emit(e.detail.sorting);
+	}
+	handleColumnResize(event) {
+		if (event.target !== this.element) return;
+		const e = event;
+		this.columnResize.emit(e);
+		this.columnSizingChange.emit(e.detail.sizing);
+	}
+	handleColumnReorder(event) {
+		if (event.target !== this.element) return;
+		const e = event;
+		this.columnReorder.emit(e);
+		this.columnOrderChange.emit(e.detail.order);
+	}
+	handleCellClick(event) {
+		if (event.target !== this.element) return;
+		const e = event;
+		this.cellClick.emit(e);
+	}
+	handleRowClick(event) {
+		if (event.target !== this.element) return;
+		const e = event;
+		this.rowClick.emit(e);
+	}
+	handleRangeChange(event) {
+		if (event.target !== this.element) return;
+		const e = event;
+		this.rangeChange.emit(e);
+	}
+	handleLoadError(event) {
+		if (event.target !== this.element) return;
+		const e = event;
+		this.loadError.emit(e);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.5",
+			ngImport: i0,
+			type: ArgusTableComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.5",
+			type: ArgusTableComponent,
+			isStandalone: true,
+			selector: "argus-table",
+			inputs: {
+				columns: "columns",
+				data: "data",
+				dataSource: "dataSource",
+				pinnedRows: "pinnedRows",
+				getRowId: "getRowId",
+				rowHeight: "rowHeight",
+				density: "density",
+				overscan: "overscan",
+				sorting: "sorting",
+				columnSizing: "columnSizing",
+				columnOrder: "columnOrder"
+			},
+			outputs: {
+				sortChange: "sortChange",
+				sortingChange: "sortingChange",
+				columnResize: "columnResize",
+				columnSizingChange: "columnSizingChange",
+				columnReorder: "columnReorder",
+				columnOrderChange: "columnOrderChange",
+				cellClick: "cellClick",
+				rowClick: "rowClick",
+				rangeChange: "rangeChange",
+				loadError: "loadError"
+			},
+			host: { listeners: {
+				"argus-sort-change": "handleSortChange($event)",
+				"argus-column-resize": "handleColumnResize($event)",
+				"argus-column-reorder": "handleColumnReorder($event)",
+				"argus-cell-click": "handleCellClick($event)",
+				"argus-row-click": "handleRowClick($event)",
+				"argus-range-change": "handleRangeChange($event)",
+				"argus-load-error": "handleLoadError($event)"
+			} },
+			ngImport: i0,
+			template: "<ng-content />",
+			isInline: true,
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ArgusTableComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "argus-table",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"(argus-sort-change)": "handleSortChange($event)",
+				"(argus-column-resize)": "handleColumnResize($event)",
+				"(argus-column-reorder)": "handleColumnReorder($event)",
+				"(argus-cell-click)": "handleCellClick($event)",
+				"(argus-row-click)": "handleRowClick($event)",
+				"(argus-range-change)": "handleRangeChange($event)",
+				"(argus-load-error)": "handleLoadError($event)"
+			}
+		}]
+	}],
+	propDecorators: {
+		columns: [{ type: Input }],
+		data: [{ type: Input }],
+		dataSource: [{ type: Input }],
+		pinnedRows: [{ type: Input }],
+		getRowId: [{ type: Input }],
+		rowHeight: [{ type: Input }],
+		density: [{ type: Input }],
+		overscan: [{ type: Input }],
+		sorting: [{ type: Input }],
+		columnSizing: [{ type: Input }],
+		columnOrder: [{ type: Input }],
+		sortChange: [{ type: Output }],
+		sortingChange: [{ type: Output }],
+		columnResize: [{ type: Output }],
+		columnSizingChange: [{ type: Output }],
+		columnReorder: [{ type: Output }],
+		columnOrderChange: [{ type: Output }],
+		cellClick: [{ type: Output }],
+		rowClick: [{ type: Output }],
+		rangeChange: [{ type: Output }],
+		loadError: [{ type: Output }]
+	}
+});
+var ArgusColumnComponent = class ArgusColumnComponent {
+	constructor() {
+		this.element = inject(ElementRef).nativeElement;
+	}
+	set columnId(value) {
+		setProperty(this.element, "columnId", "column-id", value);
+	}
+	set header(value) {
+		setProperty(this.element, "header", "header", value);
+	}
+	set accessor(value) {
+		setProperty(this.element, "accessor", "accessor", value);
+	}
+	set cell(value) {
+		setProperty(this.element, "cell", void 0, value);
+	}
+	set width(value) {
+		setProperty(this.element, "width", "width", value);
+	}
+	set minWidth(value) {
+		setProperty(this.element, "minWidth", "min-width", value);
+	}
+	set maxWidth(value) {
+		setProperty(this.element, "maxWidth", "max-width", value);
+	}
+	set pin(value) {
+		setProperty(this.element, "pin", "pin", value);
+	}
+	set align(value) {
+		setProperty(this.element, "align", "align", value);
+	}
+	set sortable(value) {
+		setProperty(this.element, "sortable", "sortable", value);
+	}
+	set resizable(value) {
+		setProperty(this.element, "resizable", "resizable", value);
+	}
+	set reorderable(value) {
+		setProperty(this.element, "reorderable", "reorderable", value);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.5",
+			ngImport: i0,
+			type: ArgusColumnComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.5",
+			type: ArgusColumnComponent,
+			isStandalone: true,
+			selector: "argus-column",
+			inputs: {
+				columnId: "columnId",
+				header: "header",
+				accessor: "accessor",
+				cell: "cell",
+				width: "width",
+				minWidth: "minWidth",
+				maxWidth: "maxWidth",
+				pin: "pin",
+				align: "align",
+				sortable: "sortable",
+				resizable: "resizable",
+				reorderable: "reorderable"
+			},
+			ngImport: i0,
+			template: "<ng-content />",
+			isInline: true,
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ArgusColumnComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "argus-column",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		columnId: [{ type: Input }],
+		header: [{ type: Input }],
+		accessor: [{ type: Input }],
+		cell: [{ type: Input }],
+		width: [{ type: Input }],
+		minWidth: [{ type: Input }],
+		maxWidth: [{ type: Input }],
+		pin: [{ type: Input }],
+		align: [{ type: Input }],
+		sortable: [{ type: Input }],
+		resizable: [{ type: Input }],
+		reorderable: [{ type: Input }]
+	}
+});
+export { ArgusColumnComponent, ArgusTableComponent };
+
+//# sourceMappingURL=argus-table-angular.mjs.map

package/dist/fesm2022/argus-table-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"argus-table-angular.mjs","names":[],"sources":["../../src/set-property.ts","../../src/generated/elements.ts"],"sourcesContent":["// Registers the elements, and writes inputs to them.\nimport 'argus-table';\n\n/**\n * Sets an element property from an input. A string for a property that has an\n * attribute goes to the attribute instead, so the element converts it as it\n * would in HTML: Angular passes `<argus-column width=\"90\">` to the `width`\n * input as `'90'`, which the element reads as 90 px. `null` (say from the\n * `async` pipe) means `undefined`, which hands state back to the element.\n */\nexport function setProperty(\n  element: HTMLElement,\n  property: string,\n  attribute: string | undefined,\n  value: unknown,\n): void {\n  if (attribute !== undefined) {\n    if (typeof value === 'string') {\n      element.setAttribute(attribute, value);\n      return;\n    }\n    // A value set as a string earlier stays in the attribute; clear it so the\n    // attribute and the property agree.\n    if (value == null) element.removeAttribute(attribute);\n  }\n  (element as unknown as Record<string, unknown>)[property] = value ?? undefined;\n}\n","// Generated by tools/generate-wrappers from argus-table's Custom Elements Manifest.\n// Don't edit by hand: run `pnpm --filter @argus-table/angular generate`.\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  Output,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport type {\n  ArgusTable as ArgusTableElement,\n  ArgusColumn as ArgusColumnElement,\n  CellClickDetail,\n  ColumnReorderDetail,\n  ColumnResizeDetail,\n  LoadErrorDetail,\n  RangeChangeDetail,\n  RowClickDetail,\n  SortChangeDetail,\n} from 'argus-table';\nimport { setProperty } from '../set-property.js';\n\n/** `<argus-table>` as an Angular component, on the element's own tag. */\n@Component({\n  selector: 'argus-table',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '(argus-sort-change)': 'handleSortChange($event)',\n    '(argus-column-resize)': 'handleColumnResize($event)',\n    '(argus-column-reorder)': 'handleColumnReorder($event)',\n    '(argus-cell-click)': 'handleCellClick($event)',\n    '(argus-row-click)': 'handleRowClick($event)',\n    '(argus-range-change)': 'handleRangeChange($event)',\n    '(argus-load-error)': 'handleLoadError($event)',\n  },\n})\nexport class ArgusTableComponent<T = unknown> {\n  /** The `<argus-table>` element. */\n  readonly element: ArgusTableElement<T> =\n    inject<ElementRef<ArgusTableElement<T>>>(ElementRef).nativeElement;\n\n  /** Column definitions. Property only: functions can't be attributes. While empty, the table reads its `<argus-column>` children instead. `null` or `undefined` means `[]`. */\n  @Input() set columns(value: ArgusTableElement<T>['columns'] | null | undefined) {\n    setProperty(this.element, 'columns', undefined, value);\n  }\n\n  /** The rows to show. Replace the array to update; changes inside it aren't detected. `null` or `undefined` means `[]`. */\n  @Input() set data(value: ArgusTableElement<T>['data'] | null | undefined) {\n    setProperty(this.element, 'data', undefined, value);\n  }\n\n  /** Loads rows page by page as they scroll into view, instead of `data`: `{ getRows({ start, end, sorting, signal }), pageSize? }`, where `end` is exclusive and `getRows` resolves to `{ rows, total? }`. Without a `total`, the table grows as pages arrive and a short page marks the end. Sorting happens on the server: a new order reloads from the top. While set, it wins over `data`. Replace the object to change `getRows` or `pageSize`. */\n  @Input() set dataSource(value: ArgusTableElement<T>['dataSource'] | null | undefined) {\n    setProperty(this.element, 'dataSource', undefined, value);\n  }\n\n  /** Rows fixed below the header (`top`) and at the bottom of the view (`bottom`), such as a totals row: `{ top?: T[], bottom?: T[] }`. They are separate objects, not rows of `data`: columns read them the same way, but they are never sorted and work the same with a `dataSource`. A `cell` function gets `pinned: 'top' | 'bottom'` in its context. Replace the object to update. */\n  @Input() set pinnedRows(value: ArgusTableElement<T>['pinnedRows'] | null | undefined) {\n    setProperty(this.element, 'pinnedRows', undefined, value);\n  }\n\n  /** Returns a stable id for a row. Default: the row's index (in `data`, or among all `dataSource` rows). */\n  @Input() set getRowId(value: ArgusTableElement<T>['getRowId'] | null | undefined) {\n    setProperty(this.element, 'getRowId', undefined, value);\n  }\n\n  /** Row height in px. Unset: the density (or the `--argus-row-height` token) decides. */\n  @Input() set rowHeight(\n    value: ArgusTableElement<T>['rowHeight'] | `${number}` | null | undefined,\n  ) {\n    setProperty(this.element, 'rowHeight', 'row-height', value);\n  }\n\n  /** Row density: `compact`, `comfortable` or `spacious`. */\n  @Input() set density(value: ArgusTableElement<T>['density'] | null | undefined) {\n    setProperty(this.element, 'density', 'density', value);\n  }\n\n  /** Rows rendered above and below the visible ones. `null` or `undefined` means the default, 6. */\n  @Input() set overscan(value: ArgusTableElement<T>['overscan'] | `${number}` | null | undefined) {\n    setProperty(this.element, 'overscan', 'overscan', value);\n  }\n\n  /** The sort order, e.g. `[{ id: 'total', desc: true }]`; `[]` when unsorted. Unset, the table keeps it itself and header clicks change it. Once set, it is controlled: a click only fires `argus-sort-change` with the proposed order, and nothing changes until you set the property. Set `undefined` to hand it back. */\n  @Input() set sorting(value: ArgusTableElement<T>['sorting'] | null | undefined) {\n    setProperty(this.element, 'sorting', undefined, value);\n  }\n\n  /** Resized widths in px by column id, e.g. `{ name: 240 }`. A resized flex column becomes fixed. Uncontrolled until set, like `sorting`: once set, a resize only fires `argus-column-resize` with the proposed widths. `undefined` hands it back. */\n  @Input() set columnSizing(value: ArgusTableElement<T>['columnSizing'] | null | undefined) {\n    setProperty(this.element, 'columnSizing', undefined, value);\n  }\n\n  /** The column order: column ids as the table shows them, e.g. `['id', 'total', 'customer']`. `[]` (the default) keeps the order of `columns`. Each pin group (start-pinned, scrolling, end-pinned) takes its columns in this order; unknown ids are ignored and columns it doesn't list follow the listed ones of their group. After a move it holds every column id. Uncontrolled until set, like `sorting`: once set, a move only fires `argus-column-reorder` with the proposed order. `undefined` hands it back. */\n  @Input() set columnOrder(value: ArgusTableElement<T>['columnOrder'] | null | undefined) {\n    setProperty(this.element, 'columnOrder', undefined, value);\n  }\n\n  /** `argus-sort-change`: A sortable header was clicked, or activated with Enter or Space. `detail: { sorting }`: the new order, or the proposed one when `sorting` is controlled. */\n  @Output() readonly sortChange = new EventEmitter<CustomEvent<SortChangeDetail>>();\n\n  /** The new `sorting` from `argus-sort-change`, for `[(sorting)]`. */\n  @Output() readonly sortingChange = new EventEmitter<ArgusTableElement<T>['sorting']>();\n\n  /** `argus-column-resize`: A column was resized: by dragging its handle, with Alt+Arrow on its header, by a double-click on its handle (fit to content) or by `autosizeColumns()`. `detail: { columnId, width, sizing }`: the new widths, or the proposed ones when `columnSizing` is controlled. Fires on every frame of a drag, and once per column that `autosizeColumns()` changes. */\n  @Output() readonly columnResize = new EventEmitter<CustomEvent<ColumnResizeDetail>>();\n\n  /** The new `columnSizing` from `argus-column-resize`, for `[(columnSizing)]`. */\n  @Output() readonly columnSizingChange = new EventEmitter<ArgusTableElement<T>['columnSizing']>();\n\n  /** `argus-column-reorder`: A column was moved: by dragging its header, or with Alt+Shift+Arrow on its focused header. Columns move within their own group (start-pinned, scrolling, end-pinned). `detail: { columnId, order }`: the new order, or the proposed one when `columnOrder` is controlled. Fires once per move, on drop. */\n  @Output() readonly columnReorder = new EventEmitter<CustomEvent<ColumnReorderDetail>>();\n\n  /** The new `columnOrder` from `argus-column-reorder`, for `[(columnOrder)]`. */\n  @Output() readonly columnOrderChange = new EventEmitter<ArgusTableElement<T>['columnOrder']>();\n\n  /** `argus-cell-click`: A body or pinned-row cell was clicked, or Enter was pressed on it. `detail: { row, columnId, value, pinned? }`; `pinned` is `'top'` or `'bottom'` for a pinned row. Fires before `argus-row-click`. */\n  @Output() readonly cellClick = new EventEmitter<CustomEvent<CellClickDetail<T>>>();\n\n  /** `argus-row-click`: A body or pinned row was clicked, or Enter was pressed on one of its cells. `detail: { row, rowId, index, pinned? }`; for a pinned row, `index` is its index in its list. */\n  @Output() readonly rowClick = new EventEmitter<CustomEvent<RowClickDetail<T>>>();\n\n  /** `argus-range-change`: The visible rows changed. `detail: { start, end }` (row indices, inclusive). */\n  @Output() readonly rangeChange = new EventEmitter<CustomEvent<RangeChangeDetail>>();\n\n  /** `argus-load-error`: A `dataSource` page failed to load: `getRows()` rejected or threw. `detail: { error, start, end }` (`end` exclusive). The rows show a Retry button. */\n  @Output() readonly loadError = new EventEmitter<CustomEvent<LoadErrorDetail>>();\n\n  /** Calls the element's `refresh()`. */\n  refresh(\n    ...args: Parameters<ArgusTableElement<T>['refresh']>\n  ): ReturnType<ArgusTableElement<T>['refresh']> {\n    return this.element.refresh(...args);\n  }\n\n  /** Calls the element's `autosizeColumns()`. */\n  autosizeColumns(\n    ...args: Parameters<ArgusTableElement<T>['autosizeColumns']>\n  ): ReturnType<ArgusTableElement<T>['autosizeColumns']> {\n    return this.element.autosizeColumns(...args);\n  }\n\n  /** Calls the element's `scrollToRow()`. */\n  scrollToRow(\n    ...args: Parameters<ArgusTableElement<T>['scrollToRow']>\n  ): ReturnType<ArgusTableElement<T>['scrollToRow']> {\n    return this.element.scrollToRow(...args);\n  }\n\n  protected handleSortChange(event: Event): void {\n    // Events bubble: skip those of a table nested in a cell.\n    if (event.target !== this.element) return;\n    const e = event as CustomEvent<SortChangeDetail>;\n    this.sortChange.emit(e);\n    this.sortingChange.emit(e.detail.sorting);\n  }\n\n  protected handleColumnResize(event: Event): void {\n    // Events bubble: skip those of a table nested in a cell.\n    if (event.target !== this.element) return;\n    const e = event as CustomEvent<ColumnResizeDetail>;\n    this.columnResize.emit(e);\n    this.columnSizingChange.emit(e.detail.sizing);\n  }\n\n  protected handleColumnReorder(event: Event): void {\n    // Events bubble: skip those of a table nested in a cell.\n    if (event.target !== this.element) return;\n    const e = event as CustomEvent<ColumnReorderDetail>;\n    this.columnReorder.emit(e);\n    this.columnOrderChange.emit(e.detail.order);\n  }\n\n  protected handleCellClick(event: Event): void {\n    // Events bubble: skip those of a table nested in a cell.\n    if (event.target !== this.element) return;\n    const e = event as CustomEvent<CellClickDetail<T>>;\n    this.cellClick.emit(e);\n  }\n\n  protected handleRowClick(event: Event): void {\n    // Events bubble: skip those of a table nested in a cell.\n    if (event.target !== this.element) return;\n    const e = event as CustomEvent<RowClickDetail<T>>;\n    this.rowClick.emit(e);\n  }\n\n  protected handleRangeChange(event: Event): void {\n    // Events bubble: skip those of a table nested in a cell.\n    if (event.target !== this.element) return;\n    const e = event as CustomEvent<RangeChangeDetail>;\n    this.rangeChange.emit(e);\n  }\n\n  protected handleLoadError(event: Event): void {\n    // Events bubble: skip those of a table nested in a cell.\n    if (event.target !== this.element) return;\n    const e = event as CustomEvent<LoadErrorDetail>;\n    this.loadError.emit(e);\n  }\n}\n\n/** `<argus-column>` as an Angular component, on the element's own tag. */\n@Component({\n  selector: 'argus-column',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ArgusColumnComponent<T = unknown> {\n  /** The `<argus-column>` element. */\n  readonly element: ArgusColumnElement<T> =\n    inject<ElementRef<ArgusColumnElement<T>>>(ElementRef).nativeElement;\n\n  /** Stable key, used in state objects, events and persistence. Must be unique within the table. */\n  @Input() set columnId(value: ArgusColumnElement<T>['columnId'] | null | undefined) {\n    setProperty(this.element, 'columnId', 'column-id', value);\n  }\n\n  /** Header content: text as an attribute; a Lit template, a node or a function as a property. */\n  @Input() set header(value: ArgusColumnElement<T>['header'] | null | undefined) {\n    setProperty(this.element, 'header', 'header', value);\n  }\n\n  /** How to read the cell value: a property path such as `customer.name`, or (as a property) a function of the row and its index. */\n  @Input() set accessor(value: ArgusColumnElement<T>['accessor'] | null | undefined) {\n    setProperty(this.element, 'accessor', 'accessor', value);\n  }\n\n  /** Cell content from the row: `(row, context) => content`. Property only; wins over a `<template>` child. */\n  @Input() set cell(value: ArgusColumnElement<T>['cell'] | null | undefined) {\n    setProperty(this.element, 'cell', undefined, value);\n  }\n\n  /** Width: `90` (px), `auto` to fit the content, or `2fr` for a share of the free space. Default: 150 px. */\n  @Input() set width(\n    value:\n      | ArgusColumnElement<T>['width']\n      | `${number}`\n      | `${number}px`\n      | `${number}fr`\n      | null\n      | undefined,\n  ) {\n    setProperty(this.element, 'width', 'width', value);\n  }\n\n  /** Lower bound for resizing and for flex columns, in px. Default: 40. */\n  @Input() set minWidth(value: ArgusColumnElement<T>['minWidth'] | `${number}` | null | undefined) {\n    setProperty(this.element, 'minWidth', 'min-width', value);\n  }\n\n  /** Upper bound for resizing, in px. Default: no limit. */\n  @Input() set maxWidth(value: ArgusColumnElement<T>['maxWidth'] | `${number}` | null | undefined) {\n    setProperty(this.element, 'maxWidth', 'max-width', value);\n  }\n\n  /** Pins the column to the `start` or `end` side. */\n  @Input() set pin(value: ArgusColumnElement<T>['pin'] | null | undefined) {\n    setProperty(this.element, 'pin', 'pin', value);\n  }\n\n  /** Text alignment: `start`, `center` or `end`. Default: `start`. */\n  @Input() set align(value: ArgusColumnElement<T>['align'] | null | undefined) {\n    setProperty(this.element, 'align', 'align', value);\n  }\n\n  /** Whether the header can be clicked to sort. Default: `false`. */\n  @Input() set sortable(\n    value: ArgusColumnElement<T>['sortable'] | '' | 'true' | 'false' | null | undefined,\n  ) {\n    setProperty(this.element, 'sortable', 'sortable', value);\n  }\n\n  /** Whether the column can be resized. Default: `true`; `resizable=\"false\"` turns it off. */\n  @Input() set resizable(\n    value: ArgusColumnElement<T>['resizable'] | '' | 'true' | 'false' | null | undefined,\n  ) {\n    setProperty(this.element, 'resizable', 'resizable', value);\n  }\n\n  /** Whether the column can be moved. Default: `true`; `reorderable=\"false\"` turns it off. */\n  @Input() set reorderable(\n    value: ArgusColumnElement<T>['reorderable'] | '' | 'true' | 'false' | null | undefined,\n  ) {\n    setProperty(this.element, 'reorderable', 'reorderable', value);\n  }\n}\n"],"mappings":"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"}

package/dist/types/argus-table-angular.d.ts

@@ -0,0 +1,202 @@
+import * as i0 from "@angular/core";
+import { EventEmitter } from "@angular/core";
+import { ArgusColumn, ArgusColumn as ArgusColumnElement, ArgusTable, ArgusTable as ArgusTableElement, CellClickDetail, CellClickDetail as CellClickDetail$1, CellContent, CellContext, ColumnAlign, ColumnDef, ColumnOrderState, ColumnPin, ColumnReorderDetail, ColumnReorderDetail as ColumnReorderDetail$1, ColumnResizeDetail, ColumnResizeDetail as ColumnResizeDetail$1, ColumnSizingState, ColumnWidth, DataSource, Density, LoadErrorDetail, LoadErrorDetail as LoadErrorDetail$1, PinnedRows, RangeChangeDetail, RangeChangeDetail as RangeChangeDetail$1, RowClickDetail, RowClickDetail as RowClickDetail$1, RowPin, RowsRequest, RowsResponse, SortChangeDetail, SortChangeDetail as SortChangeDetail$1, SortItem, SortState } from "argus-table";
+/** `<argus-table>` as an Angular component, on the element's own tag. */
+export declare class ArgusTableComponent<T = unknown> {
+  /** The `<argus-table>` element. */
+  readonly element: ArgusTable<T>;
+  /** Column definitions. Property only: functions can't be attributes. While empty, the table reads its `<argus-column>` children instead. `null` or `undefined` means `[]`. */
+  set columns(value: ArgusTable<T>['columns'] | null | undefined);
+  /** The rows to show. Replace the array to update; changes inside it aren't detected. `null` or `undefined` means `[]`. */
+  set data(value: ArgusTable<T>['data'] | null | undefined);
+  /** Loads rows page by page as they scroll into view, instead of `data`: `{ getRows({ start, end, sorting, signal }), pageSize? }`, where `end` is exclusive and `getRows` resolves to `{ rows, total? }`. Without a `total`, the table grows as pages arrive and a short page marks the end. Sorting happens on the server: a new order reloads from the top. While set, it wins over `data`. Replace the object to change `getRows` or `pageSize`. */
+  set dataSource(value: ArgusTable<T>['dataSource'] | null | undefined);
+  /** Rows fixed below the header (`top`) and at the bottom of the view (`bottom`), such as a totals row: `{ top?: T[], bottom?: T[] }`. They are separate objects, not rows of `data`: columns read them the same way, but they are never sorted and work the same with a `dataSource`. A `cell` function gets `pinned: 'top' | 'bottom'` in its context. Replace the object to update. */
+  set pinnedRows(value: ArgusTable<T>['pinnedRows'] | null | undefined);
+  /** Returns a stable id for a row. Default: the row's index (in `data`, or among all `dataSource` rows). */
+  set getRowId(value: ArgusTable<T>['getRowId'] | null | undefined);
+  /** Row height in px. Unset: the density (or the `--argus-row-height` token) decides. */
+  set rowHeight(value: ArgusTable<T>['rowHeight'] | `${number}` | null | undefined);
+  /** Row density: `compact`, `comfortable` or `spacious`. */
+  set density(value: ArgusTable<T>['density'] | null | undefined);
+  /** Rows rendered above and below the visible ones. `null` or `undefined` means the default, 6. */
+  set overscan(value: ArgusTable<T>['overscan'] | `${number}` | null | undefined);
+  /** The sort order, e.g. `[{ id: 'total', desc: true }]`; `[]` when unsorted. Unset, the table keeps it itself and header clicks change it. Once set, it is controlled: a click only fires `argus-sort-change` with the proposed order, and nothing changes until you set the property. Set `undefined` to hand it back. */
+  set sorting(value: ArgusTable<T>['sorting'] | null | undefined);
+  /** Resized widths in px by column id, e.g. `{ name: 240 }`. A resized flex column becomes fixed. Uncontrolled until set, like `sorting`: once set, a resize only fires `argus-column-resize` with the proposed widths. `undefined` hands it back. */
+  set columnSizing(value: ArgusTable<T>['columnSizing'] | null | undefined);
+  /** The column order: column ids as the table shows them, e.g. `['id', 'total', 'customer']`. `[]` (the default) keeps the order of `columns`. Each pin group (start-pinned, scrolling, end-pinned) takes its columns in this order; unknown ids are ignored and columns it doesn't list follow the listed ones of their group. After a move it holds every column id. Uncontrolled until set, like `sorting`: once set, a move only fires `argus-column-reorder` with the proposed order. `undefined` hands it back. */
+  set columnOrder(value: ArgusTable<T>['columnOrder'] | null | undefined);
+  /** `argus-sort-change`: A sortable header was clicked, or activated with Enter or Space. `detail: { sorting }`: the new order, or the proposed one when `sorting` is controlled. */
+  readonly sortChange: EventEmitter<CustomEvent<SortChangeDetail$1>>;
+  /** The new `sorting` from `argus-sort-change`, for `[(sorting)]`. */
+  readonly sortingChange: EventEmitter<import("argus-table").SortState>;
+  /** `argus-column-resize`: A column was resized: by dragging its handle, with Alt+Arrow on its header, by a double-click on its handle (fit to content) or by `autosizeColumns()`. `detail: { columnId, width, sizing }`: the new widths, or the proposed ones when `columnSizing` is controlled. Fires on every frame of a drag, and once per column that `autosizeColumns()` changes. */
+  readonly columnResize: EventEmitter<CustomEvent<ColumnResizeDetail$1>>;
+  /** The new `columnSizing` from `argus-column-resize`, for `[(columnSizing)]`. */
+  readonly columnSizingChange: EventEmitter<import("argus-table").ColumnSizingState>;
+  /** `argus-column-reorder`: A column was moved: by dragging its header, or with Alt+Shift+Arrow on its focused header. Columns move within their own group (start-pinned, scrolling, end-pinned). `detail: { columnId, order }`: the new order, or the proposed one when `columnOrder` is controlled. Fires once per move, on drop. */
+  readonly columnReorder: EventEmitter<CustomEvent<ColumnReorderDetail$1>>;
+  /** The new `columnOrder` from `argus-column-reorder`, for `[(columnOrder)]`. */
+  readonly columnOrderChange: EventEmitter<import("argus-table").ColumnOrderState>;
+  /** `argus-cell-click`: A body or pinned-row cell was clicked, or Enter was pressed on it. `detail: { row, columnId, value, pinned? }`; `pinned` is `'top'` or `'bottom'` for a pinned row. Fires before `argus-row-click`. */
+  readonly cellClick: EventEmitter<CustomEvent<CellClickDetail$1<T>>>;
+  /** `argus-row-click`: A body or pinned row was clicked, or Enter was pressed on one of its cells. `detail: { row, rowId, index, pinned? }`; for a pinned row, `index` is its index in its list. */
+  readonly rowClick: EventEmitter<CustomEvent<RowClickDetail$1<T>>>;
+  /** `argus-range-change`: The visible rows changed. `detail: { start, end }` (row indices, inclusive). */
+  readonly rangeChange: EventEmitter<CustomEvent<RangeChangeDetail$1>>;
+  /** `argus-load-error`: A `dataSource` page failed to load: `getRows()` rejected or threw. `detail: { error, start, end }` (`end` exclusive). The rows show a Retry button. */
+  readonly loadError: EventEmitter<CustomEvent<LoadErrorDetail$1>>;
+  /** Calls the element's `refresh()`. */
+  refresh(...args: Parameters<ArgusTable<T>['refresh']>): ReturnType<ArgusTable<T>['refresh']>;
+  /** Calls the element's `autosizeColumns()`. */
+  autosizeColumns(...args: Parameters<ArgusTable<T>['autosizeColumns']>): ReturnType<ArgusTable<T>['autosizeColumns']>;
+  /** Calls the element's `scrollToRow()`. */
+  scrollToRow(...args: Parameters<ArgusTable<T>['scrollToRow']>): ReturnType<ArgusTable<T>['scrollToRow']>;
+  protected handleSortChange(event: Event): void;
+  protected handleColumnResize(event: Event): void;
+  protected handleColumnReorder(event: Event): void;
+  protected handleCellClick(event: Event): void;
+  protected handleRowClick(event: Event): void;
+  protected handleRangeChange(event: Event): void;
+  protected handleLoadError(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ArgusTableComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ArgusTableComponent<any>, "argus-table", never, {
+    "columns": {
+      "alias": "columns";
+      "required": false;
+    };
+    "data": {
+      "alias": "data";
+      "required": false;
+    };
+    "dataSource": {
+      "alias": "dataSource";
+      "required": false;
+    };
+    "pinnedRows": {
+      "alias": "pinnedRows";
+      "required": false;
+    };
+    "getRowId": {
+      "alias": "getRowId";
+      "required": false;
+    };
+    "rowHeight": {
+      "alias": "rowHeight";
+      "required": false;
+    };
+    "density": {
+      "alias": "density";
+      "required": false;
+    };
+    "overscan": {
+      "alias": "overscan";
+      "required": false;
+    };
+    "sorting": {
+      "alias": "sorting";
+      "required": false;
+    };
+    "columnSizing": {
+      "alias": "columnSizing";
+      "required": false;
+    };
+    "columnOrder": {
+      "alias": "columnOrder";
+      "required": false;
+    };
+  }, {
+    "sortChange": "sortChange";
+    "sortingChange": "sortingChange";
+    "columnResize": "columnResize";
+    "columnSizingChange": "columnSizingChange";
+    "columnReorder": "columnReorder";
+    "columnOrderChange": "columnOrderChange";
+    "cellClick": "cellClick";
+    "rowClick": "rowClick";
+    "rangeChange": "rangeChange";
+    "loadError": "loadError";
+  }, never, ["*"], true, never>;
+}
+/** `<argus-column>` as an Angular component, on the element's own tag. */
+export declare class ArgusColumnComponent<T = unknown> {
+  /** The `<argus-column>` element. */
+  readonly element: ArgusColumn<T>;
+  /** Stable key, used in state objects, events and persistence. Must be unique within the table. */
+  set columnId(value: ArgusColumn<T>['columnId'] | null | undefined);
+  /** Header content: text as an attribute; a Lit template, a node or a function as a property. */
+  set header(value: ArgusColumn<T>['header'] | null | undefined);
+  /** How to read the cell value: a property path such as `customer.name`, or (as a property) a function of the row and its index. */
+  set accessor(value: ArgusColumn<T>['accessor'] | null | undefined);
+  /** Cell content from the row: `(row, context) => content`. Property only; wins over a `<template>` child. */
+  set cell(value: ArgusColumn<T>['cell'] | null | undefined);
+  /** Width: `90` (px), `auto` to fit the content, or `2fr` for a share of the free space. Default: 150 px. */
+  set width(value: ArgusColumn<T>['width'] | `${number}` | `${number}px` | `${number}fr` | null | undefined);
+  /** Lower bound for resizing and for flex columns, in px. Default: 40. */
+  set minWidth(value: ArgusColumn<T>['minWidth'] | `${number}` | null | undefined);
+  /** Upper bound for resizing, in px. Default: no limit. */
+  set maxWidth(value: ArgusColumn<T>['maxWidth'] | `${number}` | null | undefined);
+  /** Pins the column to the `start` or `end` side. */
+  set pin(value: ArgusColumn<T>['pin'] | null | undefined);
+  /** Text alignment: `start`, `center` or `end`. Default: `start`. */
+  set align(value: ArgusColumn<T>['align'] | null | undefined);
+  /** Whether the header can be clicked to sort. Default: `false`. */
+  set sortable(value: ArgusColumn<T>['sortable'] | '' | 'true' | 'false' | null | undefined);
+  /** Whether the column can be resized. Default: `true`; `resizable="false"` turns it off. */
+  set resizable(value: ArgusColumn<T>['resizable'] | '' | 'true' | 'false' | null | undefined);
+  /** Whether the column can be moved. Default: `true`; `reorderable="false"` turns it off. */
+  set reorderable(value: ArgusColumn<T>['reorderable'] | '' | 'true' | 'false' | null | undefined);
+  static ɵfac: i0.ɵɵFactoryDeclaration<ArgusColumnComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ArgusColumnComponent<any>, "argus-column", never, {
+    "columnId": {
+      "alias": "columnId";
+      "required": false;
+    };
+    "header": {
+      "alias": "header";
+      "required": false;
+    };
+    "accessor": {
+      "alias": "accessor";
+      "required": false;
+    };
+    "cell": {
+      "alias": "cell";
+      "required": false;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+    };
+    "minWidth": {
+      "alias": "minWidth";
+      "required": false;
+    };
+    "maxWidth": {
+      "alias": "maxWidth";
+      "required": false;
+    };
+    "pin": {
+      "alias": "pin";
+      "required": false;
+    };
+    "align": {
+      "alias": "align";
+      "required": false;
+    };
+    "sortable": {
+      "alias": "sortable";
+      "required": false;
+    };
+    "resizable": {
+      "alias": "resizable";
+      "required": false;
+    };
+    "reorderable": {
+      "alias": "reorderable";
+      "required": false;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export type { ArgusColumnElement, ArgusTableElement, CellClickDetail, CellContent, CellContext, ColumnAlign, ColumnDef, ColumnOrderState, ColumnPin, ColumnReorderDetail, ColumnResizeDetail, ColumnSizingState, ColumnWidth, DataSource, Density, LoadErrorDetail, PinnedRows, RangeChangeDetail, RowClickDetail, RowPin, RowsRequest, RowsResponse, SortChangeDetail, SortItem, SortState };

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@argus-table/angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "Angular components for argus-table: typed inputs, outputs and two-way binding for <argus-table> and <argus-column>.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Joessst-Dev/argus-table.git",
+    "directory": "packages/angular"
+  },
+  "type": "module",
+  "nx": {
+    "name": "angular",
+    "implicitDependencies": [
+      "generate-wrappers"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/argus-table-angular.d.ts",
+      "default": "./dist/fesm2022/argus-table-angular.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/types/argus-table-angular.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.8.1",
+    "argus-table": "0.2.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "^20.0.0 || ^21.0.0 || ^22.0.0"
+  },
+  "devDependencies": {
+    "@angular/common": "^22.2.5",
+    "@angular/compiler": "^22.2.5",
+    "@angular/compiler-cli": "^22.2.5",
+    "@angular/core": "^22.2.5",
+    "@angular/platform-browser": "^22.2.5",
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@vitest/browser-playwright": "^5.1.0",
+    "ng-packagr": "^22.2.6",
+    "playwright": "1.63.0",
+    "publint": "^0.3.25",
+    "rxjs": "^7.8.2",
+    "vite": "^8.3.5",
+    "vitest": "^5.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json -c tsconfig.lib.json && node scripts/clean-dist.mjs && publint --strict && attw --pack . --profile esm-only",
+    "generate": "node ../../tools/generate-wrappers/src/cli.ts angular",
+    "typecheck": "tsc -p tsconfig.json --noEmit && ngc -p tsconfig.types.json",
+    "lint": "node ../../tools/generate-wrappers/src/cli.ts angular --check && eslint .",
+    "test": "vitest run"
+  }
 }