@gravionlabs/helix-ui 22.1.30 → 22.2.1

package/types/gravionlabs-helix-ui.d.ts

@@ -115,7 +115,7 @@ interface HxOption<V = unknown> {
   disabled: boolean;
 }
 /** How values are compared to find the chosen option: `Object.is` unless the app passes its own. */
-declare const compareValues: (a: unknown, b: unknown) => boolean;
+declare const compareValues$1: (a: unknown, b: unknown) => boolean;
 /**
  * Turns the `options` input of a component into `{ label, value, disabled }` entries. A primitive is its own
  * label and value; an object is read through the accessors (a property name or a function). A missing label is
@@ -973,6 +973,657 @@ export declare class HxConfirmPopup {
   static ɵfac: i0.ɵɵFactoryDeclaration<HxConfirmPopup, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<HxConfirmPopup, "hx-confirm-popup", never, {}, {}, never, never, true, never>;
 }
+/** What `pageChange` carries. */
+interface HxPageEvent {
+  /** Index of the first record of the page (0-based). */
+  first: number;
+  /** Records per page. */
+  rows: number;
+  /** The page, 0-based. */
+  page: number;
+  pageCount: number;
+}
+/**
+ * Page navigation for a list or table: first, previous, page links, next, last, and a rows-per-page select.
+ *
+ * ```html
+ * <hx-paginator [rows]="10" [totalRecords]="120" [(first)]="first" [rowsPerPageOptions]="[10, 20, 50]"
+ *   showCurrentPageReport (pageChange)="load($event)" />
+ * ```
+ *
+ * `first` is the index of the first record shown, so the page is `first / rows`. A change of the rows per page keeps
+ * the first record on screen. The paginator is a `nav`; the current page link has `aria-current="page"`. Labels are
+ * inputs, for translation.
+ */
+export declare class HxPaginator {
+  /** Records per page. */
+  readonly rows: import("@angular/core").ModelSignal<number>;
+  readonly totalRecords: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Index of the first record shown. */
+  readonly first: import("@angular/core").ModelSignal<number>;
+  /** Offers a rows-per-page select when given. */
+  readonly rowsPerPageOptions: import("@angular/core").InputSignal<readonly number[] | undefined>;
+  /** Page links shown at most (the current page stays in the middle). */
+  readonly pageLinkSize: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly showCurrentPageReport: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** `{first}`, `{last}`, `{totalRecords}`, `{page}` and `{pageCount}` are replaced. */
+  readonly currentPageReportTemplate: import("@angular/core").InputSignal<string>;
+  readonly showFirstLastButtons: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly firstPageLabel: import("@angular/core").InputSignal<string>;
+  readonly previousPageLabel: import("@angular/core").InputSignal<string>;
+  readonly nextPageLabel: import("@angular/core").InputSignal<string>;
+  readonly lastPageLabel: import("@angular/core").InputSignal<string>;
+  /** `{page}` is replaced by the page number (1-based). */
+  readonly pageLabelTemplate: import("@angular/core").InputSignal<string>;
+  readonly rowsPerPageLabel: import("@angular/core").InputSignal<string>;
+  readonly pageChange: import("@angular/core").OutputEmitterRef<HxPageEvent>;
+  protected readonly pageCount: import("@angular/core").Signal<number>;
+  protected readonly page: import("@angular/core").Signal<number>;
+  protected readonly isFirst: import("@angular/core").Signal<boolean>;
+  protected readonly isLast: import("@angular/core").Signal<boolean>;
+  /** The page numbers (0-based) of the links: a window of `pageLinkSize` around the current page. */
+  protected readonly links: import("@angular/core").Signal<number[]>;
+  protected readonly rowsOptions: import("@angular/core").Signal<{
+    label: string;
+    value: number;
+  }[]>;
+  protected readonly report: import("@angular/core").Signal<string>;
+  protected pageLabel(page: number): string;
+  /** Goes to a page (0-based); an out-of-range page is clamped. */
+  goTo(page: number): void;
+  protected setRows(value: unknown): void;
+  private emit;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxPaginator, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxPaginator, "hx-paginator", never, {
+    "rows": {
+      "alias": "rows";
+      "required": false;
+      "isSignal": true;
+    };
+    "totalRecords": {
+      "alias": "totalRecords";
+      "required": false;
+      "isSignal": true;
+    };
+    "first": {
+      "alias": "first";
+      "required": false;
+      "isSignal": true;
+    };
+    "rowsPerPageOptions": {
+      "alias": "rowsPerPageOptions";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageLinkSize": {
+      "alias": "pageLinkSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCurrentPageReport": {
+      "alias": "showCurrentPageReport";
+      "required": false;
+      "isSignal": true;
+    };
+    "currentPageReportTemplate": {
+      "alias": "currentPageReportTemplate";
+      "required": false;
+      "isSignal": true;
+    };
+    "showFirstLastButtons": {
+      "alias": "showFirstLastButtons";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "firstPageLabel": {
+      "alias": "firstPageLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "previousPageLabel": {
+      "alias": "previousPageLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextPageLabel": {
+      "alias": "nextPageLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "lastPageLabel": {
+      "alias": "lastPageLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "pageLabelTemplate": {
+      "alias": "pageLabelTemplate";
+      "required": false;
+      "isSignal": true;
+    };
+    "rowsPerPageLabel": {
+      "alias": "rowsPerPageLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "rows": "rowsChange";
+    "first": "firstChange";
+    "pageChange": "pageChange";
+  }, never, never, true, never>;
+}
+type HxTableSize = 'small' | 'medium' | 'large';
+/**
+ * A native `<table>` drawn as a Helix table (CSS only): header, body and footer rows, hover, stripes and gridlines
+ * from the `--h-datatable-*` tokens. For small static tables; there is no sorting, paging or selection here: data grids
+ * use AG Grid through `helix-ag-grid`.
+ *
+ * ```html
+ * <div class="hx-table-scroll">
+ *   <table hx-table striped hoverable>
+ *     <caption>Invoices</caption>
+ *     <thead><tr><th scope="col">No.</th><th scope="col">Amount</th></tr></thead>
+ *     <tbody><tr><th scope="row">1001</th><td>€ 120</td></tr></tbody>
+ *   </table>
+ * </div>
+ * ```
+ *
+ * The table keeps its native semantics: nothing is added to the roles. Give it a `<caption>` (it is drawn as the table
+ * header), mark header cells with `<th scope="col">` / `<th scope="row">`, and mark a selected row with
+ * `aria-selected="true"`, which is also what is styled. Wrap a wide table in `.hx-table-scroll` for horizontal
+ * scrolling; with `stickyHeader` and a `max-height` on the wrapper the header stays in view. The wrapper is a scroll
+ * container, so give it `tabindex="0"` and a name (`role="region"` with `aria-label`) when it scrolls.
+ */
+export declare class HxTable {
+  readonly size: import("@angular/core").InputSignal<HxTableSize>;
+  /** Alternate rows get a background. */
+  readonly striped: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Borders around every cell. */
+  readonly gridlines: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Rows of the body change colour under the pointer. */
+  readonly hoverable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The header stays at the top of its scroll container (`.hx-table-scroll` with a `max-height`). */
+  readonly stickyHeader: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxTable, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxTable, "table[hx-table]", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "striped": {
+      "alias": "striped";
+      "required": false;
+      "isSignal": true;
+    };
+    "gridlines": {
+      "alias": "gridlines";
+      "required": false;
+      "isSignal": true;
+    };
+    "hoverable": {
+      "alias": "hoverable";
+      "required": false;
+      "isSignal": true;
+    };
+    "stickyHeader": {
+      "alias": "stickyHeader";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+type HxColumnAlign = 'left' | 'center' | 'right';
+/** One column of an `hx-data-table`. */
+interface HxColumn {
+  /** The property of the row shown in the column; a path (`address.city`) reads nested properties. */
+  field: string;
+  /** The header text. */
+  header: string;
+  /** CSS width of the column (`8rem`, `20%`). */
+  width?: string;
+  /** Horizontal alignment of header and cells (the start edge by default). */
+  align?: HxColumnAlign;
+  /** The header is a button that sorts by the column. */
+  sortable?: boolean;
+  /** The column gets a text filter in the filter row (`filterDisplay="row"`). */
+  filter?: boolean;
+}
+/** One sorted column: `order` 1 is ascending, -1 descending. */
+interface HxSortMeta {
+  field: string;
+  order: 1 | -1;
+}
+type HxSortMode = 'single' | 'multiple';
+/** What `lazyLoad` carries: the state the data has to be loaded for. */
+interface HxLazyLoadEvent {
+  first: number;
+  rows: number;
+  sortField: string | null;
+  sortOrder: 1 | -1;
+  multiSortMeta: HxSortMeta[];
+  /** The text of each column filter, by field (empty filters are left out). */
+  filters: Record<string, string>;
+  /** The text of the global filter. */
+  globalFilter: string;
+}
+/** Replaces the client-side sort: gets the rows and the sort state, returns the sorted rows. */
+type HxSortFunction = (rows: readonly unknown[], meta: readonly HxSortMeta[]) => readonly unknown[];
+/** The default order of two values: empty values last, numbers and dates by value, text by locale. */
+export declare function compareValues(a: unknown, b: unknown): number;
+/** The value of a (nested) property of a row. */
+export declare function resolveField(row: unknown, field: string): unknown;
+/**
+ * The template of the cells of one column: `<ng-template hxCell="price" let-row let-value="value">`. The context
+ * has the row (`$implicit`), the `value` of the column's field and the `index` of the row.
+ */
+export declare class HxCell {
+  /** The `field` of the column. */
+  readonly field: import("@angular/core").InputSignal<string>;
+  readonly template: TemplateRef<HxCellContext>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxCell, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxCell, "ng-template[hxCell]", never, {
+    "field": {
+      "alias": "hxCell";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+interface HxCellContext {
+  $implicit: unknown;
+  value: unknown;
+  index: number;
+}
+/** Cells of the header row, replacing the generated headers: `<ng-template hxTableHeader let-columns>…<th>`. */
+export declare class HxTableHeader {
+  readonly template: TemplateRef<HxTableColumnsContext>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxTableHeader, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxTableHeader, "ng-template[hxTableHeader]", never, {}, {}, never, never, true, never>;
+}
+/** Cells of every body row, replacing the generated cells: `<ng-template hxTableBody let-row>…<td>`. */
+export declare class HxTableBody {
+  readonly template: TemplateRef<HxTableRowContext>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxTableBody, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxTableBody, "ng-template[hxTableBody]", never, {}, {}, never, never, true, never>;
+}
+/** Cells of the footer row: `<ng-template hxTableFooter let-columns>…<td>`; without it there is no footer. */
+export declare class HxTableFooter {
+  readonly template: TemplateRef<HxTableColumnsContext>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxTableFooter, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxTableFooter, "ng-template[hxTableFooter]", never, {}, {}, never, never, true, never>;
+}
+/** The content of the table's caption (the visible header above the table). */
+export declare class HxTableCaption {
+  readonly template: TemplateRef<unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxTableCaption, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxTableCaption, "ng-template[hxTableCaption]", never, {}, {}, never, never, true, never>;
+}
+/** The content of the empty row, replacing `emptyMessage`: `<ng-template hxTableEmpty>`. */
+export declare class HxTableEmpty {
+  readonly template: TemplateRef<unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxTableEmpty, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxTableEmpty, "ng-template[hxTableEmpty]", never, {}, {}, never, never, true, never>;
+}
+/** The content of the row that opens below a row: `<ng-template hxRowExpansion let-row>`. */
+export declare class HxRowExpansion {
+  readonly template: TemplateRef<HxTableRowContext>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxRowExpansion, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxRowExpansion, "ng-template[hxRowExpansion]", never, {}, {}, never, never, true, never>;
+}
+type HxSelectionMode = 'single' | 'multiple';
+interface HxTableColumnsContext {
+  $implicit: readonly HxColumn[];
+}
+interface HxTableRowContext {
+  $implicit: unknown;
+  index: number;
+  columns: readonly HxColumn[];
+}
+/**
+ * A data table on a native `<table>`: a column model, cell templates, caption, empty and loading state, striped
+ * rows, gridlines, sizes and a scrolling body with a sticky header. It draws with the CSS of `table[hx-table]`.
+ *
+ * ```html
+ * <hx-data-table [value]="invoices" [columns]="columns" dataKey="id" caption="Invoices" stripedRows>
+ *   <ng-template hxCell="amount" let-value>{{ value | currency: 'EUR' }}</ng-template>
+ * </hx-data-table>
+ * ```
+ *
+ * The table keeps the native semantics: a `<caption>` (drawn as the table header; visually hidden when only
+ * `ariaLabel` is set), `<th scope="col">` cells and `aria-busy` while `loading`. A scrolling table is a labelled,
+ * focusable `region`.
+ */
+export declare class HxDataTable implements OnInit {
+  /** The rows. */
+  readonly value: import("@angular/core").InputSignal<readonly unknown[]>;
+  readonly columns: import("@angular/core").InputSignal<readonly HxColumn[]>;
+  /** The property that identifies a row (keeps the DOM of a row when the rows change). */
+  readonly dataKey: import("@angular/core").InputSignal<string | undefined>;
+  readonly size: import("@angular/core").InputSignal<HxTableSize>;
+  readonly stripedRows: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly showGridlines: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Rows change colour under the pointer (default on). */
+  readonly hoverRows: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  /** Covers the table with a spinner and sets `aria-busy`. */
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Visible caption text above the table. */
+  readonly caption: import("@angular/core").InputSignal<string | undefined>;
+  /** The accessible name of the table; with no `caption` it becomes a visually hidden caption. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** The body scrolls inside this height (`300px`, `50vh`) and the header stays in view. */
+  readonly scrollHeight: import("@angular/core").InputSignal<string | undefined>;
+  /** A wide table scrolls horizontally instead of overflowing. */
+  readonly scrollable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** `single`: one sorted column; `multiple`: a click adds the column to the sort order. */
+  readonly sortMode: import("@angular/core").InputSignal<HxSortMode>;
+  /** The sorted column in `single` mode. */
+  readonly sortField: import("@angular/core").ModelSignal<string | null>;
+  /** 1 ascending, -1 descending (`single` mode). */
+  readonly sortOrder: import("@angular/core").ModelSignal<1 | -1>;
+  /** The sorted columns in `multiple` mode, most important first. */
+  readonly multiSortMeta: import("@angular/core").ModelSignal<HxSortMeta[]>;
+  /** Replaces the client-side sort. */
+  readonly sortFunction: import("@angular/core").InputSignal<HxSortFunction | undefined>;
+  /** Shows a paginator below the table. */
+  readonly paginator: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly rows: import("@angular/core").ModelSignal<number>;
+  readonly first: import("@angular/core").ModelSignal<number>;
+  readonly rowsPerPageOptions: import("@angular/core").InputSignal<readonly number[] | undefined>;
+  readonly showCurrentPageReport: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The rows are paged and sorted elsewhere: the table only shows `value` and emits `lazyLoad`. */
+  readonly lazy: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The number of all records when `lazy` (otherwise the length of `value`). */
+  readonly totalRecords: import("@angular/core").InputSignal<number | undefined>;
+  /** Emits `lazyLoad` once on init (default on). */
+  readonly lazyLoadOnInit: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Sort, page or rows-per-page changed while `lazy`: load the data for this state. */
+  readonly lazyLoad: import("@angular/core").OutputEmitterRef<HxLazyLoadEvent>;
+  /** `single`: a click selects a row; `multiple`: a checkbox column (or, with `metaKeySelection`, Ctrl/Cmd+click). */
+  readonly selectionMode: import("@angular/core").InputSignal<HxSelectionMode | undefined>;
+  /** The selected row (`single`) or rows (`multiple`). Rows are compared by `dataKey` when set. */
+  readonly selection: import("@angular/core").ModelSignal<unknown>;
+  /** `multiple`: no checkbox column; a click selects only that row, Ctrl/Cmd+click adds or removes one. */
+  readonly metaKeySelection: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly selectAllLabel: import("@angular/core").InputSignal<string>;
+  /** `{row}` is replaced by the row number (1-based). */
+  readonly selectRowLabel: import("@angular/core").InputSignal<string>;
+  /** The properties of a row the global filter looks in (`filterGlobal`). */
+  readonly globalFilterFields: import("@angular/core").InputSignal<readonly string[]>;
+  /** `row`: a filter row with a text input under the headers of columns with `filter: true`. */
+  readonly filterDisplay: import("@angular/core").InputSignal<"row" | undefined>;
+  /** The text of the column filters, by field. */
+  readonly filters: import("@angular/core").ModelSignal<Record<string, string>>;
+  readonly filterLabel: import("@angular/core").InputSignal<string>;
+  /** The rows that are open (by `dataKey`, or the row index without one); needs a `hxRowExpansion` template. */
+  readonly expandedRowKeys: import("@angular/core").ModelSignal<Record<string, boolean>>;
+  readonly expandLabel: import("@angular/core").InputSignal<string>;
+  readonly collapseLabel: import("@angular/core").InputSignal<string>;
+  protected readonly announcement: import("@angular/core").WritableSignal<string>;
+  private readonly globalText;
+  protected readonly cellTemplates: import("@angular/core").Signal<readonly HxCell[]>;
+  protected readonly headerTemplate: import("@angular/core").Signal<HxTableHeader | undefined>;
+  protected readonly bodyTemplate: import("@angular/core").Signal<HxTableBody | undefined>;
+  protected readonly footerTemplate: import("@angular/core").Signal<HxTableFooter | undefined>;
+  protected readonly captionTemplate: import("@angular/core").Signal<HxTableCaption | undefined>;
+  protected readonly expansionTemplate: import("@angular/core").Signal<HxRowExpansion | undefined>;
+  protected readonly emptyTemplate: import("@angular/core").Signal<HxTableEmpty | undefined>;
+  /** The sort state as a list, whichever the mode. */
+  protected readonly sortMeta: import("@angular/core").Signal<HxSortMeta[]>;
+  private readonly filtered;
+  private readonly sorted;
+  /** The number of records the paginator pages over. */
+  protected readonly total: import("@angular/core").Signal<number>;
+  /** The rows the table draws: sorted, then the current page. */
+  protected readonly visibleRows: import("@angular/core").Signal<readonly unknown[]>;
+  protected readonly cells: import("@angular/core").Signal<Map<string, TemplateRef<HxCellContext>>>;
+  protected readonly scrolls: import("@angular/core").Signal<boolean>;
+  protected readonly hasCaption: import("@angular/core").Signal<boolean>;
+  protected readonly captionHidden: import("@angular/core").Signal<boolean>;
+  protected readonly checkboxColumn: import("@angular/core").Signal<boolean>;
+  protected readonly expanderColumn: import("@angular/core").Signal<boolean>;
+  protected readonly selectable: import("@angular/core").Signal<boolean>;
+  protected readonly filterRow: import("@angular/core").Signal<boolean>;
+  protected readonly colspan: import("@angular/core").Signal<number>;
+  private selectedRows;
+  private keyOf;
+  protected isSelected(row: unknown): boolean;
+  /** All filtered rows (of every page) are selected / some are. */
+  protected readonly allSelected: import("@angular/core").Signal<boolean>;
+  protected readonly someSelected: import("@angular/core").Signal<boolean>;
+  protected toggleSelectAll(checked: boolean): void;
+  protected toggleRowCheckbox(row: unknown, checked: boolean): void;
+  /** A click or Enter/Space on a row selects it (single mode, or multiple with `metaKeySelection`). */
+  protected selectRow(row: unknown, event: Event): void;
+  protected onRowKey(row: unknown, event: Event): void;
+  /** Filters every column in `globalFilterFields` for a text (case-insensitive, contains). */
+  filterGlobal(text: string): void;
+  protected setFilter(column: HxColumn, text: string): void;
+  protected rowKey(row: unknown, index: number): string;
+  protected isExpanded(row: unknown, index: number): boolean;
+  protected toggleExpansion(row: unknown, index: number): void;
+  ngOnInit(): void;
+  /** The order of a column (1, -1) or 0 when it is not sorted. */
+  protected orderOf(column: HxColumn): 0 | 1 | -1;
+  protected ariaSort(column: HxColumn): 'ascending' | 'descending' | 'none' | null;
+  /** The position (1-based) of a column in a multi-column sort, when more than one column is sorted. */
+  protected sortRank(column: HxColumn): number | null;
+  /** Sorts by a column: ascending, then descending, then not at all. */
+  sort(column: HxColumn): void;
+  protected onPage(event: HxPageEvent): void;
+  private emitLazy;
+  protected trackRow(row: unknown, index: number): unknown;
+  protected valueOf(row: unknown, column: HxColumn): unknown;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxDataTable, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxDataTable, "hx-data-table", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "columns": {
+      "alias": "columns";
+      "required": false;
+      "isSignal": true;
+    };
+    "dataKey": {
+      "alias": "dataKey";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "stripedRows": {
+      "alias": "stripedRows";
+      "required": false;
+      "isSignal": true;
+    };
+    "showGridlines": {
+      "alias": "showGridlines";
+      "required": false;
+      "isSignal": true;
+    };
+    "hoverRows": {
+      "alias": "hoverRows";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyMessage": {
+      "alias": "emptyMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "caption": {
+      "alias": "caption";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "scrollHeight": {
+      "alias": "scrollHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "scrollable": {
+      "alias": "scrollable";
+      "required": false;
+      "isSignal": true;
+    };
+    "sortMode": {
+      "alias": "sortMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "sortField": {
+      "alias": "sortField";
+      "required": false;
+      "isSignal": true;
+    };
+    "sortOrder": {
+      "alias": "sortOrder";
+      "required": false;
+      "isSignal": true;
+    };
+    "multiSortMeta": {
+      "alias": "multiSortMeta";
+      "required": false;
+      "isSignal": true;
+    };
+    "sortFunction": {
+      "alias": "sortFunction";
+      "required": false;
+      "isSignal": true;
+    };
+    "paginator": {
+      "alias": "paginator";
+      "required": false;
+      "isSignal": true;
+    };
+    "rows": {
+      "alias": "rows";
+      "required": false;
+      "isSignal": true;
+    };
+    "first": {
+      "alias": "first";
+      "required": false;
+      "isSignal": true;
+    };
+    "rowsPerPageOptions": {
+      "alias": "rowsPerPageOptions";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCurrentPageReport": {
+      "alias": "showCurrentPageReport";
+      "required": false;
+      "isSignal": true;
+    };
+    "lazy": {
+      "alias": "lazy";
+      "required": false;
+      "isSignal": true;
+    };
+    "totalRecords": {
+      "alias": "totalRecords";
+      "required": false;
+      "isSignal": true;
+    };
+    "lazyLoadOnInit": {
+      "alias": "lazyLoadOnInit";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectionMode": {
+      "alias": "selectionMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "selection": {
+      "alias": "selection";
+      "required": false;
+      "isSignal": true;
+    };
+    "metaKeySelection": {
+      "alias": "metaKeySelection";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectAllLabel": {
+      "alias": "selectAllLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectRowLabel": {
+      "alias": "selectRowLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "globalFilterFields": {
+      "alias": "globalFilterFields";
+      "required": false;
+      "isSignal": true;
+    };
+    "filterDisplay": {
+      "alias": "filterDisplay";
+      "required": false;
+      "isSignal": true;
+    };
+    "filters": {
+      "alias": "filters";
+      "required": false;
+      "isSignal": true;
+    };
+    "filterLabel": {
+      "alias": "filterLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "expandedRowKeys": {
+      "alias": "expandedRowKeys";
+      "required": false;
+      "isSignal": true;
+    };
+    "expandLabel": {
+      "alias": "expandLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapseLabel": {
+      "alias": "collapseLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "sortField": "sortFieldChange";
+    "sortOrder": "sortOrderChange";
+    "multiSortMeta": "multiSortMetaChange";
+    "rows": "rowsChange";
+    "first": "firstChange";
+    "lazyLoad": "lazyLoad";
+    "selection": "selectionChange";
+    "filters": "filtersChange";
+    "expandedRowKeys": "expandedRowKeysChange";
+  }, ["cellTemplates", "headerTemplate", "bodyTemplate", "footerTemplate", "captionTemplate", "expansionTemplate", "emptyTemplate"], never, true, never>;
+}
 type HxDatePickerSelectionMode = 'single' | 'range' | 'multiple';
 type HxDatePickerValue = Date | Date[] | null;
 type CalendarView = 'day' | 'month' | 'year';
@@ -3794,67 +4445,6 @@ export declare class HxSwitch {
   static ɵfac: i0.ɵɵFactoryDeclaration<HxSwitch, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<HxSwitch, "input[hx-switch]", ["hx-switch"], {}, {}, never, never, true, never>;
 }
-type HxTableSize = 'small' | 'medium' | 'large';
-/**
- * A native `<table>` drawn as a Helix table (CSS only): header, body and footer rows, hover, stripes and gridlines
- * from the `--h-datatable-*` tokens. For small static tables; there is no sorting, paging or selection here: data grids
- * use AG Grid through `helix-ag-grid`.
- *
- * ```html
- * <div class="hx-table-scroll">
- *   <table hx-table striped hoverable>
- *     <caption>Invoices</caption>
- *     <thead><tr><th scope="col">No.</th><th scope="col">Amount</th></tr></thead>
- *     <tbody><tr><th scope="row">1001</th><td>€ 120</td></tr></tbody>
- *   </table>
- * </div>
- * ```
- *
- * The table keeps its native semantics: nothing is added to the roles. Give it a `<caption>` (it is drawn as the table
- * header), mark header cells with `<th scope="col">` / `<th scope="row">`, and mark a selected row with
- * `aria-selected="true"`, which is also what is styled. Wrap a wide table in `.hx-table-scroll` for horizontal
- * scrolling; with `stickyHeader` and a `max-height` on the wrapper the header stays in view. The wrapper is a scroll
- * container, so give it `tabindex="0"` and a name (`role="region"` with `aria-label`) when it scrolls.
- */
-export declare class HxTable {
-  readonly size: import("@angular/core").InputSignal<HxTableSize>;
-  /** Alternate rows get a background. */
-  readonly striped: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Borders around every cell. */
-  readonly gridlines: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Rows of the body change colour under the pointer. */
-  readonly hoverable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** The header stays at the top of its scroll container (`.hx-table-scroll` with a `max-height`). */
-  readonly stickyHeader: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  static ɵfac: i0.ɵɵFactoryDeclaration<HxTable, never>;
-  static ɵdir: i0.ɵɵDirectiveDeclaration<HxTable, "table[hx-table]", never, {
-    "size": {
-      "alias": "size";
-      "required": false;
-      "isSignal": true;
-    };
-    "striped": {
-      "alias": "striped";
-      "required": false;
-      "isSignal": true;
-    };
-    "gridlines": {
-      "alias": "gridlines";
-      "required": false;
-      "isSignal": true;
-    };
-    "hoverable": {
-      "alias": "hoverable";
-      "required": false;
-      "isSignal": true;
-    };
-    "stickyHeader": {
-      "alias": "stickyHeader";
-      "required": false;
-      "isSignal": true;
-    };
-  }, {}, never, never, true, never>;
-}
 /**
  * Tabs with panels, in the WAI-ARIA tabs pattern.
  *
@@ -4717,4 +5307,4 @@ export declare class HxTree {
     "nodeCollapse": "nodeCollapse";
   }, ["template"], never, true, never>;
 }
-export type { HxAccordionValue, HxAutoCompleteEvent, HxAutoCompleteSize, HxAvatarShape, HxAvatarSize, HxBadgeSeverity, HxBadgeSize, HxBreadcrumbItem, HxButtonSeverity, HxButtonSize, HxButtonVariant, HxChartInstance, HxChartModule, HxChartSelectEvent, HxChartType, HxCheckboxSize, HxConfirmation, HxDatePickerSelectionMode, HxDatePickerValue, HxDialogConfig, HxDialogPosition, HxDividerAlign, HxDividerLayout, HxDividerType, HxDrawerPosition, HxFileUploadMode, HxFloatLabelVariant, HxIconPosition, HxInputNumberButtonLayout, HxInputNumberMode, HxInputNumberSize, HxInputNumberVariant, HxInputSize, HxInputVariant, HxMenuItem, HxMenuItemCommandEvent, HxMessageSeverity, HxMessageSize, HxMessageVariant, HxMultiSelectDisplay, HxMultiSelectSize, HxMultiSelectVariant, HxPrimaryColor, HxProgressMode, HxRadioSize, HxSelectButtonSize, HxSelectItem, HxSelectSize, HxSelectVariant, HxSkeletonAnimation, HxSkeletonShape, HxSliderOrientation, HxSliderValue, HxStepContentContext, HxStepValue, HxSurface, HxTableSize, HxTagSeverity, HxThemeOptions, HxTimelineAlign, HxTimelineContext, HxTimelineLayout, HxToastMessage, HxToastMessageInput, HxToastPosition, HxToastSeverity, HxToggleButtonSize, HxTooltipEvent, HxTooltipPosition, HxTreeFilterMode, HxTreeNode, HxTreeNodeContext, HxTreeNodeEvent, HxTreeSelection, HxTreeSelectionMode };
+export type { HxAccordionValue, HxAutoCompleteEvent, HxAutoCompleteSize, HxAvatarShape, HxAvatarSize, HxBadgeSeverity, HxBadgeSize, HxBreadcrumbItem, HxButtonSeverity, HxButtonSize, HxButtonVariant, HxCellContext, HxChartInstance, HxChartModule, HxChartSelectEvent, HxChartType, HxCheckboxSize, HxColumn, HxColumnAlign, HxConfirmation, HxDatePickerSelectionMode, HxDatePickerValue, HxDialogConfig, HxDialogPosition, HxDividerAlign, HxDividerLayout, HxDividerType, HxDrawerPosition, HxFileUploadMode, HxFloatLabelVariant, HxIconPosition, HxInputNumberButtonLayout, HxInputNumberMode, HxInputNumberSize, HxInputNumberVariant, HxInputSize, HxInputVariant, HxLazyLoadEvent, HxMenuItem, HxMenuItemCommandEvent, HxMessageSeverity, HxMessageSize, HxMessageVariant, HxMultiSelectDisplay, HxMultiSelectSize, HxMultiSelectVariant, HxPageEvent, HxPrimaryColor, HxProgressMode, HxRadioSize, HxSelectButtonSize, HxSelectItem, HxSelectSize, HxSelectVariant, HxSelectionMode, HxSkeletonAnimation, HxSkeletonShape, HxSliderOrientation, HxSliderValue, HxSortFunction, HxSortMeta, HxSortMode, HxStepContentContext, HxStepValue, HxSurface, HxTableColumnsContext, HxTableRowContext, HxTableSize, HxTagSeverity, HxThemeOptions, HxTimelineAlign, HxTimelineContext, HxTimelineLayout, HxToastMessage, HxToastMessageInput, HxToastPosition, HxToastSeverity, HxToggleButtonSize, HxTooltipEvent, HxTooltipPosition, HxTreeFilterMode, HxTreeNode, HxTreeNodeContext, HxTreeNodeEvent, HxTreeSelection, HxTreeSelectionMode };