@gravionlabs/helix-ui 22.2.6 → 22.2.8

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

@@ -1,7 +1,7 @@
 import * as i1 from "@angular/cdk/accordion";
 import { CdkAccordionItem } from "@angular/cdk/accordion";
 import * as i0 from "@angular/core";
-import { EnvironmentProviders, InjectionToken, OnInit, TemplateRef, Type } from "@angular/core";
+import { ElementRef, EnvironmentProviders, InjectionToken, OnInit, TemplateRef, Type } from "@angular/core";
 import { ConnectedOverlayPositionChange, ConnectedPosition } from "@angular/cdk/overlay";
 import { ControlValueAccessor } from "@angular/forms";
 import { FormValueControl } from "@angular/forms/signals";
@@ -857,137 +857,6 @@ export declare class HxCarousel<T = unknown> {
     "page": "pageChange";
   }, ["itemTemplate"], ["[hxCarouselHeader]", "[hxCarouselFooter]"], true, never>;
 }
-type HxChartType = 'bar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'polarArea' | 'radar';
-/** What `(dataSelect)` carries: the click and what chart.js found under it. */
-interface HxChartSelectEvent {
-  originalEvent: Event;
-  /** The nearest element under the pointer (chart.js `{ datasetIndex, index, element }`). */
-  element: unknown;
-  /** The elements of that dataset. */
-  dataset: unknown[];
-}
-/** The part of chart.js this component uses; the real module is `chart.js/auto`. */
-interface HxChartModule {
-  default: new (canvas: HTMLCanvasElement, config: unknown) => HxChartInstance;
-}
-interface HxChartInstance {
-  data: unknown;
-  options: unknown;
-  update(mode?: string): void;
-  destroy(): void;
-  getElementsAtEventForMode(event: Event, mode: string, options: object, useFinalPosition: boolean): unknown[];
-}
-/**
- * Loads chart.js. The default is a dynamic `import('chart.js/auto')`, so chart.js is only fetched by apps that show
- * a chart; provide another function to register a smaller set of chart.js parts or to replace it in tests.
- */
-export declare const HX_CHART_LOADER: InjectionToken<() => Promise<HxChartModule>>;
-type Json = Record<string, unknown>;
-/** The parts of chart.js data and datasets that are read here; everything else is passed on untouched. */
-interface ChartDataLike extends Json {
-  datasets?: unknown;
-}
-/**
- * A chart.js chart whose colours, grid and font come from the Helix tokens.
- *
- * ```html
- * <hx-chart type="bar" [data]="data" [options]="options" height="20rem" ariaLabel="Sales per month">
- *   <table hxChartFallback>…the same numbers as text…</table>
- * </hx-chart>
- * ```
- *
- * chart.js is an optional peer dependency, loaded with a dynamic import (see `HX_CHART_LOADER`) the first time a
- * chart is shown. Datasets without colours get the Helix palette; text, grid and legend colours come from
- * `--h-text-muted-color` and `--h-content-border-color` of the element. Your `options` win over these defaults.
- * The chart is redrawn when `class` or `style` of `<html>` change (dark mode, the primary colour).
- *
- * The canvas is an `img` named by `ariaLabel` / `ariaLabelledBy`; content marked `hxChartFallback` becomes the
- * canvas fallback content, which assistive technology reads: put the numbers there as text or as a table.
- */
-export declare class HxChart {
-  #private;
-  private readonly canvas;
-  readonly type: import("@angular/core").InputSignal<HxChartType>;
-  /** chart.js data: `{ labels, datasets }`. Pass a new object to update the chart. */
-  readonly data: import("@angular/core").InputSignal<ChartDataLike>;
-  /** chart.js options, on top of the token defaults. Pass a new object to update the chart. */
-  readonly options: import("@angular/core").InputSignal<Json>;
-  /** Extra chart.js plugins for this chart. */
-  readonly plugins: import("@angular/core").InputSignal<readonly unknown[]>;
-  /** CSS width of the frame, e.g. `30rem`; the chart fills its container by default. */
-  readonly width: import("@angular/core").InputSignal<string | undefined>;
-  /** CSS height of the frame; without it chart.js keeps its aspect ratio. */
-  readonly height: import("@angular/core").InputSignal<string | undefined>;
-  /** Resize with the container. */
-  readonly responsive: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
-  readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
-  /** Delay of a redraw after the theme changed, in ms; the style change is usually followed by more. */
-  readonly themeDelay: import("@angular/core").InputSignalWithTransform<number, unknown>;
-  /** A data point or dataset was clicked. */
-  readonly dataSelect: import("@angular/core").OutputEmitterRef<HxChartSelectEvent>;
-  constructor();
-  /** The chart.js instance, once it exists; `undefined` before chart.js has loaded. */
-  get chart(): HxChartInstance | undefined;
-  /** Redraws the chart, e.g. after the theme changed in a way the component cannot see. */
-  refresh(): void;
-  protected onClick(event: MouseEvent): void;
-  static ɵfac: i0.ɵɵFactoryDeclaration<HxChart, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<HxChart, "hx-chart", never, {
-    "type": {
-      "alias": "type";
-      "required": false;
-      "isSignal": true;
-    };
-    "data": {
-      "alias": "data";
-      "required": false;
-      "isSignal": true;
-    };
-    "options": {
-      "alias": "options";
-      "required": false;
-      "isSignal": true;
-    };
-    "plugins": {
-      "alias": "plugins";
-      "required": false;
-      "isSignal": true;
-    };
-    "width": {
-      "alias": "width";
-      "required": false;
-      "isSignal": true;
-    };
-    "height": {
-      "alias": "height";
-      "required": false;
-      "isSignal": true;
-    };
-    "responsive": {
-      "alias": "responsive";
-      "required": false;
-      "isSignal": true;
-    };
-    "ariaLabel": {
-      "alias": "ariaLabel";
-      "required": false;
-      "isSignal": true;
-    };
-    "ariaLabelledBy": {
-      "alias": "ariaLabelledBy";
-      "required": false;
-      "isSignal": true;
-    };
-    "themeDelay": {
-      "alias": "themeDelay";
-      "required": false;
-      "isSignal": true;
-    };
-  }, {
-    "dataSelect": "dataSelect";
-  }, never, ["[hxChartFallback]"], true, never>;
-}
 type HxCheckboxSize = 'small' | 'medium' | 'large';
 /**
  * A native `<input type="checkbox">` drawn as a Helix checkbox (CSS only). It is a real checkbox: `checked`,
@@ -1156,6 +1025,8 @@ interface HxPageEvent {
   /** The page, 0-based. */
   page: number;
   pageCount: number;
+  /** Set when the "All" size is chosen: `rows` is then the number of all records (at least 1). */
+  all?: true;
 }
 /**
  * Page navigation for a list or table: first, previous, page links, next, last, and a rows-per-page select.
@@ -1176,7 +1047,7 @@ export declare class HxPaginator {
   /** 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>;
+  readonly rowsPerPageOptions: import("@angular/core").InputSignal<readonly (number | "all")[] | 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>;
@@ -1191,6 +1062,15 @@ export declare class HxPaginator {
   /** `{page}` is replaced by the page number (1-based). */
   readonly pageLabelTemplate: import("@angular/core").InputSignal<string>;
   readonly rowsPerPageLabel: import("@angular/core").InputSignal<string>;
+  /** The label of the `'all'` entry of `rowsPerPageOptions`. */
+  readonly allLabel: import("@angular/core").InputSignal<string>;
+  /** The "All" size is chosen: one page with every record; `rows` is left as it was. */
+  readonly showAll: import("@angular/core").ModelSignal<boolean>;
+  /** "All" is chosen and still offered by `rowsPerPageOptions`. */
+  private readonly allSelected;
+  /** The records per page in effect: all of them when "All" is chosen. */
+  private readonly perPage;
+  protected readonly rowsValue: import("@angular/core").Signal<number | "all">;
   readonly pageChange: import("@angular/core").OutputEmitterRef<HxPageEvent>;
   protected readonly pageCount: import("@angular/core").Signal<number>;
   protected readonly page: import("@angular/core").Signal<number>;
@@ -1200,7 +1080,7 @@ export declare class HxPaginator {
   protected readonly links: import("@angular/core").Signal<number[]>;
   protected readonly rowsOptions: import("@angular/core").Signal<{
     label: string;
-    value: number;
+    value: number | "all";
   }[]>;
   protected readonly report: import("@angular/core").Signal<string>;
   protected pageLabel(page: number): string;
@@ -1285,12 +1165,115 @@ export declare class HxPaginator {
       "required": false;
       "isSignal": true;
     };
+    "allLabel": {
+      "alias": "allLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "showAll": {
+      "alias": "showAll";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "rows": "rowsChange";
     "first": "firstChange";
+    "showAll": "showAllChange";
     "pageChange": "pageChange";
   }, never, never, true, never>;
 }
+/**
+ * A small panel anchored to an element, with arbitrary content and an arrow pointing at the element.
+ *
+ * ```html
+ * <button hx-button aria-haspopup="dialog" (click)="op.toggle($event)">Share</button>
+ * <hx-popover #op ariaLabel="Share this page">
+ *   <input hx-input aria-label="Link" value="https://…" />
+ * </hx-popover>
+ * ```
+ *
+ * `toggle(event, target?)`, `show(event, target?)` and `hide()` open it below the element of the event (or `target`),
+ * or above when there is no room. An outside click and Escape close it. It is a non-modal `role="dialog"`: the focus
+ * moves to its first control when it has one and returns to the element that opened it when it closes, and the page
+ * behind stays reachable. Name it with `ariaLabel` or `ariaLabelledBy`, and put `aria-haspopup="dialog"` on the
+ * trigger. Projected content is created with the popover, only shown while it is open.
+ */
+export declare class HxPopover {
+  #private;
+  private readonly panel;
+  /** Accessible name of the popover. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaDescribedBy: import("@angular/core").InputSignal<string | undefined>;
+  /** `alertdialog` for a question that needs an answer (the confirm popup). */
+  readonly role: import("@angular/core").InputSignal<"dialog" | "alertdialog">;
+  /** Extra CSS classes on the panel. */
+  readonly panelClass: import("@angular/core").InputSignal<string | undefined>;
+  /** A click outside closes it. */
+  readonly dismissable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly closeOnEscape: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly shown: import("@angular/core").OutputEmitterRef<void>;
+  readonly hidden: import("@angular/core").OutputEmitterRef<void>;
+  readonly open: import("@angular/core").WritableSignal<boolean>;
+  protected readonly origin: import("@angular/core").WritableSignal<Element | null>;
+  protected readonly fallbackOrigin: HTMLElement;
+  /** The popover is above the element (no room below). */
+  protected readonly above: import("@angular/core").WritableSignal<boolean>;
+  /** The popover is aligned to the end edge of the element (no room to extend to the right). */
+  protected readonly end: import("@angular/core").WritableSignal<boolean>;
+  protected readonly positions: ConnectedPosition[];
+  /** Opens it at the element of the event (or `target`), or closes it when it is open. */
+  toggle(event: Event | Element, target?: Element | null): void;
+  /** Opens it at `target`, else at the element of the event; an element can be passed instead of an event. */
+  show(event: Event | Element, target?: Element | null): void;
+  hide(refocus?: boolean): void;
+  protected onPosition(change: ConnectedOverlayPositionChange): void;
+  protected onAttach(): void;
+  protected onDetach(): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected onOutsideClick(event: MouseEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxPopover, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxPopover, "hx-popover", never, {
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledBy": {
+      "alias": "ariaLabelledBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaDescribedBy": {
+      "alias": "ariaDescribedBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "role": {
+      "alias": "role";
+      "required": false;
+      "isSignal": true;
+    };
+    "panelClass": {
+      "alias": "panelClass";
+      "required": false;
+      "isSignal": true;
+    };
+    "dismissable": {
+      "alias": "dismissable";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeOnEscape": {
+      "alias": "closeOnEscape";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "shown": "shown";
+    "hidden": "hidden";
+  }, 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
@@ -1359,15 +1342,23 @@ interface HxColumn {
   field: string;
   /** The header text. */
   header: string;
+  /** The `title` attribute of the header cell (a tooltip). */
+  title?: 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"`). */
+  /** The column gets a text filter: in the filter row (`filterDisplay="row"`) or in a popover from its header (`"menu"`). */
   filter?: boolean;
+  /** The direction of the first click on the sort button (the table's `sortFirstOrder` by default). */
+  sortFirstOrder?: HxSortFirstOrder;
 }
+/** The direction a sort starts with. */
+type HxSortFirstOrder = 'asc' | 'desc';
+/** What `rowClass` may return: anything `[class]` accepts. */
+type HxRowClass = string | readonly string[] | Record<string, boolean | null | undefined> | null | undefined;
 /** One sorted column: `order` 1 is ascending, -1 descending. */
 interface HxSortMeta {
   field: string;
@@ -1409,6 +1400,26 @@ export declare class HxCell {
     };
   }, {}, never, never, true, never>;
 }
+/**
+ * Extra content in the header of one column, beside the label and outside the sort button:
+ * `<ng-template hxColumnHeader="price" let-column>…</ng-template>`. The context has the column (`$implicit`).
+ */
+export declare class HxColumnHeader {
+  /** The `field` of the column. */
+  readonly field: import("@angular/core").InputSignal<string>;
+  readonly template: TemplateRef<HxColumnHeaderContext>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxColumnHeader, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<HxColumnHeader, "ng-template[hxColumnHeader]", never, {
+    "field": {
+      "alias": "hxColumnHeader";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+interface HxColumnHeaderContext {
+  $implicit: HxColumn;
+}
 interface HxCellContext {
   $implicit: unknown;
   value: unknown;
@@ -1465,13 +1476,13 @@ interface HxTableRowContext {
  *
  * ```html
  * <hx-data-table [value]="invoices" [columns]="columns" dataKey="id" caption="Invoices" stripedRows>
- *   <ng-template hxCell="amount" let-value>{{ value | currency: 'EUR' }}</ng-template>
+ *   <ng-template hxCell="amount" let-value="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`.
+ * focusable `region`. `filterDisplay="menu"` puts the column filters in a popover opened from the header.
  */
 export declare class HxDataTable implements OnInit {
   /** The rows. */
@@ -1485,6 +1496,12 @@ export declare class HxDataTable implements OnInit {
   /** Rows change colour under the pointer (default on). */
   readonly hoverRows: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  /** Classes for the `<tr>` of a row: a string, an array or an object, as for `[class]`. */
+  readonly rowClass: import("@angular/core").InputSignal<((row: never) => HxRowClass) | undefined>;
+  /** Text shown in a cell whose value is `null` or `undefined` (not for `0`, `false` or `''`). */
+  readonly emptyValue: import("@angular/core").InputSignal<string>;
+  /** The label of the `'all'` entry of `rowsPerPageOptions`. */
+  readonly allLabel: 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. */
@@ -1505,11 +1522,13 @@ export declare class HxDataTable implements OnInit {
   readonly multiSortMeta: import("@angular/core").ModelSignal<HxSortMeta[]>;
   /** Replaces the client-side sort. */
   readonly sortFunction: import("@angular/core").InputSignal<HxSortFunction | undefined>;
+  /** The direction of the first click on a sortable column; a column's own `sortFirstOrder` wins. */
+  readonly sortFirstOrder: import("@angular/core").InputSignal<HxSortFirstOrder>;
   /** 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 rowsPerPageOptions: import("@angular/core").InputSignal<readonly (number | "all")[] | 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>;
@@ -1530,18 +1549,34 @@ export declare class HxDataTable implements OnInit {
   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>;
+  /**
+   * `row`: a filter row with a text input under the headers of columns with `filter: true`. `menu`: a filter button in
+   * those headers that opens a popover with the text input.
+   */
+  readonly filterDisplay: import("@angular/core").InputSignal<"menu" | "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 text of the button that empties a filter in the header menu. */
+  readonly clearLabel: import("@angular/core").InputSignal<string>;
+  protected readonly filterPopover: import("@angular/core").Signal<HxPopover | undefined>;
+  protected readonly filterInput: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+  /** The column whose filter popover is open. */
+  protected readonly activeFilterColumn: import("@angular/core").WritableSignal<HxColumn | null>;
+  private readonly injector;
   /** 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;
+  /** The paginator's "All" size is chosen: every row is shown, whatever `rows` says. */
+  private readonly showAll;
+  /** A `rows` set from outside (or by the user) ends "All". */
+  private readonly resetAll;
+  private readonly allActive;
   protected readonly cellTemplates: import("@angular/core").Signal<readonly HxCell[]>;
+  protected readonly columnHeaderTemplates: import("@angular/core").Signal<readonly HxColumnHeader[]>;
   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>;
@@ -1557,6 +1592,8 @@ export declare class HxDataTable implements OnInit {
   /** 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>>>;
+  private readonly warnedFields;
+  protected readonly columnHeaders: import("@angular/core").Signal<Map<string, TemplateRef<HxColumnHeaderContext>>>;
   protected readonly scrolls: import("@angular/core").Signal<boolean>;
   protected readonly hasCaption: import("@angular/core").Signal<boolean>;
   protected readonly captionHidden: import("@angular/core").Signal<boolean>;
@@ -1578,6 +1615,9 @@ export declare class HxDataTable implements OnInit {
   protected onRowKey(row: unknown, event: Event): void;
   /** Filters every column in `globalFilterFields` for a text (case-insensitive, contains). */
   filterGlobal(text: string): void;
+  protected openFilter(event: Event, column: HxColumn): void;
+  protected filterLabelFor(column: HxColumn): string;
+  protected clearFilter(column: HxColumn): void;
   protected setFilter(column: HxColumn, text: string): void;
   protected rowKey(row: unknown, index: number): string;
   protected isExpanded(row: unknown, index: number): boolean;
@@ -1588,11 +1628,12 @@ export declare class HxDataTable implements OnInit {
   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. */
+  /** Sorts by a column: the first order, then the opposite, then not at all (ascending first by default). */
   sort(column: HxColumn): void;
   protected onPage(event: HxPageEvent): void;
   private emitLazy;
   protected trackRow(row: unknown, index: number): unknown;
+  protected rowClassOf(row: unknown): HxRowClass;
   protected valueOf(row: unknown, column: HxColumn): unknown;
   static ɵfac: i0.ɵɵFactoryDeclaration<HxDataTable, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<HxDataTable, "hx-data-table", never, {
@@ -1636,6 +1677,21 @@ export declare class HxDataTable implements OnInit {
       "required": false;
       "isSignal": true;
     };
+    "rowClass": {
+      "alias": "rowClass";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyValue": {
+      "alias": "emptyValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "allLabel": {
+      "alias": "allLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "loading": {
       "alias": "loading";
       "required": false;
@@ -1686,6 +1742,11 @@ export declare class HxDataTable implements OnInit {
       "required": false;
       "isSignal": true;
     };
+    "sortFirstOrder": {
+      "alias": "sortFirstOrder";
+      "required": false;
+      "isSignal": true;
+    };
     "paginator": {
       "alias": "paginator";
       "required": false;
@@ -1771,6 +1832,11 @@ export declare class HxDataTable implements OnInit {
       "required": false;
       "isSignal": true;
     };
+    "clearLabel": {
+      "alias": "clearLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "expandedRowKeys": {
       "alias": "expandedRowKeys";
       "required": false;
@@ -1796,7 +1862,7 @@ export declare class HxDataTable implements OnInit {
     "selection": "selectionChange";
     "filters": "filtersChange";
     "expandedRowKeys": "expandedRowKeysChange";
-  }, ["cellTemplates", "headerTemplate", "bodyTemplate", "footerTemplate", "captionTemplate", "expansionTemplate", "emptyTemplate"], never, true, never>;
+  }, ["cellTemplates", "columnHeaderTemplates", "headerTemplate", "bodyTemplate", "footerTemplate", "captionTemplate", "expansionTemplate", "emptyTemplate"], never, true, never>;
 }
 type CalendarView = 'day' | 'month' | 'year';
 interface DisabledRules {
@@ -2584,13 +2650,20 @@ interface HxDateTimeRangeValue {
   from: Date | null;
   to: Date | null;
 }
+/** A relative range in the popup's preset list; `from` and `to` are read when it is chosen (`now` stays current). */
+interface HxDateTimeRangePreset {
+  label: string;
+  from: () => Date;
+  to: () => Date;
+}
 /**
  * A from and a to date-time range in one field with one button. The field shows the range as one text
  * (`1/1/2026 00:00 - 1/2/2026 00:15`); the popup holds one calendar (an inline range `hx-date-picker`) and a time picker for each end,
  * from and to. The value is `{ from, to }` (`null` while a side is empty); `to` is never before `from`: the `to`
  * time picker starts at `from` (including the time), the `from` time picker ends at `to`, and a choice that crosses the
- * other side moves it. The field is read-only; the popup stays open until Escape, an outside click or the focus
- * leaving it.
+ * other side moves it. The field is read-only unless `typeable`, which lets the range be typed in the field's
+ * format (Enter or leaving the field commits it, an unreadable range puts the value back); the popup stays open
+ * until Escape, an outside click or the focus leaving it.
  *
  * ```html
  * <hx-date-time-range-picker [stepMinute]="15" [(ngModel)]="shift" />
@@ -2609,12 +2682,18 @@ export declare class HxDateTimeRangePicker implements ControlValueAccessor, Form
   /** The text between the two dates in the field. */
   readonly separator: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** The name of the group of preset buttons. */
+  readonly presetsLabel: import("@angular/core").InputSignal<string>;
+  /** Ready-made ranges listed in the popup; choosing one fills the draft, Submit applies it. */
+  readonly presets: import("@angular/core").InputSignal<readonly HxDateTimeRangePreset[]>;
   readonly clearLabel: import("@angular/core").InputSignal<string>;
   readonly cancelLabel: import("@angular/core").InputSignal<string>;
   readonly submitLabel: import("@angular/core").InputSignal<string>;
   readonly chooseLabel: import("@angular/core").InputSignal<string>;
   /** The `id` of the text field, for a `<label for>`. */
   readonly inputId: import("@angular/core").InputSignal<string | undefined>;
+  /** The range can be typed into the field (`from separator to`); otherwise the field is read-only. */
+  readonly typeable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** The time picker options, for both ends. */
   readonly showTime: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly timeOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -2655,6 +2734,7 @@ export declare class HxDateTimeRangePicker implements ControlValueAccessor, Form
   /** The values of the two time pickers: a fresh `Date` per draft change (midnight while a side is empty). */
   protected readonly fromValue: import("@angular/core").Signal<HxTimePickerValue>;
   protected readonly toValue: import("@angular/core").Signal<HxTimePickerValue>;
+  constructor();
   writeValue(value: HxDateTimeRangeValue | null): void;
   registerOnChange(fn: (value: HxDateTimeRangeValue) => void): void;
   registerOnTouched(fn: () => void): void;
@@ -2665,10 +2745,17 @@ export declare class HxDateTimeRangePicker implements ControlValueAccessor, Form
   protected toggle(): void;
   protected close(refocus?: boolean): void;
   protected onAttach(): void;
+  /** A typeable field opens with the button, Arrow Down or Alt+Arrow Up (click, Enter and Space are for typing). */
+  protected onFieldClick(): void;
   protected onFieldKeydown(event: KeyboardEvent): void;
+  protected onTyping(event: Event): void;
+  /** Parses the typed range; an unreadable side, a disabled day or a time outside the limits puts the value back. */
+  protected commitTyping(): void;
   protected onOverlayKeydown(event: KeyboardEvent): void;
   protected onOutsideClick(event: MouseEvent): void;
   protected clear(): void;
+  /** Puts a preset into the draft (the calendar and the time pickers show it); Submit commits it. */
+  protected applyPreset(preset: HxDateTimeRangePreset): void;
   protected submit(): void;
   /** The focus left the control (field, button and popup): the popup closes and the control is touched. */
   protected onHostFocusOut(event: FocusEvent): void;
@@ -2704,6 +2791,16 @@ export declare class HxDateTimeRangePicker implements ControlValueAccessor, Form
       "required": false;
       "isSignal": true;
     };
+    "presetsLabel": {
+      "alias": "presetsLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "presets": {
+      "alias": "presets";
+      "required": false;
+      "isSignal": true;
+    };
     "clearLabel": {
       "alias": "clearLabel";
       "required": false;
@@ -2729,6 +2826,11 @@ export declare class HxDateTimeRangePicker implements ControlValueAccessor, Form
       "required": false;
       "isSignal": true;
     };
+    "typeable": {
+      "alias": "typeable";
+      "required": false;
+      "isSignal": true;
+    };
     "showTime": {
       "alias": "showTime";
       "required": false;
@@ -4835,98 +4937,6 @@ export declare class HxPassword implements ControlValueAccessor, FormValueContro
     "touch": "touch";
   }, never, never, true, never>;
 }
-/**
- * A small panel anchored to an element, with arbitrary content and an arrow pointing at the element.
- *
- * ```html
- * <button hx-button aria-haspopup="dialog" (click)="op.toggle($event)">Share</button>
- * <hx-popover #op ariaLabel="Share this page">
- *   <input hx-input aria-label="Link" value="https://…" />
- * </hx-popover>
- * ```
- *
- * `toggle(event, target?)`, `show(event, target?)` and `hide()` open it below the element of the event (or `target`),
- * or above when there is no room. An outside click and Escape close it. It is a non-modal `role="dialog"`: the focus
- * moves to its first control when it has one and returns to the element that opened it when it closes, and the page
- * behind stays reachable. Name it with `ariaLabel` or `ariaLabelledBy`, and put `aria-haspopup="dialog"` on the
- * trigger. Projected content is created with the popover, only shown while it is open.
- */
-export declare class HxPopover {
-  #private;
-  private readonly panel;
-  /** Accessible name of the popover. */
-  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
-  readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
-  readonly ariaDescribedBy: import("@angular/core").InputSignal<string | undefined>;
-  /** `alertdialog` for a question that needs an answer (the confirm popup). */
-  readonly role: import("@angular/core").InputSignal<"dialog" | "alertdialog">;
-  /** Extra CSS classes on the panel. */
-  readonly panelClass: import("@angular/core").InputSignal<string | undefined>;
-  /** A click outside closes it. */
-  readonly dismissable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  readonly closeOnEscape: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  readonly shown: import("@angular/core").OutputEmitterRef<void>;
-  readonly hidden: import("@angular/core").OutputEmitterRef<void>;
-  readonly open: import("@angular/core").WritableSignal<boolean>;
-  protected readonly origin: import("@angular/core").WritableSignal<Element | null>;
-  protected readonly fallbackOrigin: HTMLElement;
-  /** The popover is above the element (no room below). */
-  protected readonly above: import("@angular/core").WritableSignal<boolean>;
-  /** The popover is aligned to the end edge of the element (no room to extend to the right). */
-  protected readonly end: import("@angular/core").WritableSignal<boolean>;
-  protected readonly positions: ConnectedPosition[];
-  /** Opens it at the element of the event (or `target`), or closes it when it is open. */
-  toggle(event: Event | Element, target?: Element | null): void;
-  /** Opens it at `target`, else at the element of the event; an element can be passed instead of an event. */
-  show(event: Event | Element, target?: Element | null): void;
-  hide(refocus?: boolean): void;
-  protected onPosition(change: ConnectedOverlayPositionChange): void;
-  protected onAttach(): void;
-  protected onDetach(): void;
-  protected onKeydown(event: KeyboardEvent): void;
-  protected onOutsideClick(event: MouseEvent): void;
-  static ɵfac: i0.ɵɵFactoryDeclaration<HxPopover, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<HxPopover, "hx-popover", never, {
-    "ariaLabel": {
-      "alias": "ariaLabel";
-      "required": false;
-      "isSignal": true;
-    };
-    "ariaLabelledBy": {
-      "alias": "ariaLabelledBy";
-      "required": false;
-      "isSignal": true;
-    };
-    "ariaDescribedBy": {
-      "alias": "ariaDescribedBy";
-      "required": false;
-      "isSignal": true;
-    };
-    "role": {
-      "alias": "role";
-      "required": false;
-      "isSignal": true;
-    };
-    "panelClass": {
-      "alias": "panelClass";
-      "required": false;
-      "isSignal": true;
-    };
-    "dismissable": {
-      "alias": "dismissable";
-      "required": false;
-      "isSignal": true;
-    };
-    "closeOnEscape": {
-      "alias": "closeOnEscape";
-      "required": false;
-      "isSignal": true;
-    };
-  }, {
-    "shown": "shown";
-    "hidden": "hidden";
-  }, never, ["*"], true, never>;
-}
 type HxProgressMode = 'determinate' | 'indeterminate';
 /**
  * A bar that fills from 0 to 100, or slides while the duration is unknown.
@@ -6133,6 +6143,11 @@ interface HxThemeOptions {
    * `tokens.css`) or an attribute (`[data-theme="dark"]`).
    */
   darkSelector?: string;
+  /**
+   * `false`: the host app owns the dark class/attribute (e.g. from `prefers-color-scheme`), HxTheme never writes it
+   * to `<html>`. `dark()` still follows `setDark()` for the colour overrides. Default `true`.
+   */
+  manageDark?: boolean;
   /** Where the choice is remembered (localStorage). `null` (the default) remembers nothing. */
   storageKey?: string | null;
   /** Dark mode when nothing is remembered; by default the system setting (`prefers-color-scheme`). */
@@ -6700,4 +6715,4 @@ export declare class HxTree {
     "nodeCollapse": "nodeCollapse";
   }, ["template"], never, true, never>;
 }
-export type { HxAccordionValue, HxAutoCompleteEvent, HxAutoCompleteSize, HxAvatarShape, HxAvatarSize, HxBadgeSeverity, HxBadgeSize, HxBreadcrumbItem, HxButtonSeverity, HxButtonSize, HxButtonVariant, HxCarouselItemContext, HxCarouselOrientation, HxCarouselResponsiveOption, HxCellContext, HxChartInstance, HxChartModule, HxChartSelectEvent, HxChartType, HxCheckboxSize, HxColumn, HxColumnAlign, HxConfirmation, HxDatePickerSelectionMode, HxDatePickerValue, HxDateTimePickerValue, HxDateTimeRangeValue, HxDialogConfig, HxDialogPosition, HxDividerAlign, HxDividerLayout, HxDividerType, HxDrawerPosition, HxFileUploadMode, HxFloatLabelVariant, HxGalleriaItem, HxGalleriaItemContext, HxGalleriaThumbnailsPosition, 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, HxTimePickerValue, 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, HxCarouselItemContext, HxCarouselOrientation, HxCarouselResponsiveOption, HxCellContext, HxCheckboxSize, HxColumn, HxColumnAlign, HxColumnHeaderContext, HxConfirmation, HxDatePickerSelectionMode, HxDatePickerValue, HxDateTimePickerValue, HxDateTimeRangePreset, HxDateTimeRangeValue, HxDialogConfig, HxDialogPosition, HxDividerAlign, HxDividerLayout, HxDividerType, HxDrawerPosition, HxFileUploadMode, HxFloatLabelVariant, HxGalleriaItem, HxGalleriaItemContext, HxGalleriaThumbnailsPosition, HxIconPosition, HxInputNumberButtonLayout, HxInputNumberMode, HxInputNumberSize, HxInputNumberVariant, HxInputSize, HxInputVariant, HxLazyLoadEvent, HxMenuItem, HxMenuItemCommandEvent, HxMessageSeverity, HxMessageSize, HxMessageVariant, HxMultiSelectDisplay, HxMultiSelectSize, HxMultiSelectVariant, HxPageEvent, HxPrimaryColor, HxProgressMode, HxRadioSize, HxRowClass, HxSelectButtonSize, HxSelectItem, HxSelectSize, HxSelectVariant, HxSelectionMode, HxSkeletonAnimation, HxSkeletonShape, HxSliderOrientation, HxSliderValue, HxSortFirstOrder, HxSortFunction, HxSortMeta, HxSortMode, HxStepContentContext, HxStepValue, HxSurface, HxTableColumnsContext, HxTableRowContext, HxTableSize, HxTagSeverity, HxThemeOptions, HxTimePickerValue, HxTimelineAlign, HxTimelineContext, HxTimelineLayout, HxToastMessage, HxToastMessageInput, HxToastPosition, HxToastSeverity, HxToggleButtonSize, HxTooltipEvent, HxTooltipPosition, HxTreeFilterMode, HxTreeNode, HxTreeNodeContext, HxTreeNodeEvent, HxTreeSelection, HxTreeSelectionMode };