@forgeroute/ui 0.4.15 → 0.4.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.4.15",
+  "version": "0.4.17",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",

package/types/forgeroute-ui.d.ts

@@ -398,6 +398,18 @@ export interface BulkActionEvent {
   value?: string;
   skippedCount: number;
 }
+/** Emitted by (rowReorder) after the user moves a row (`reorderable`). */
+export interface TableRowReorderEvent<T = any> {
+  /** The row that was moved. */
+  item: T;
+  /** Its index on the page before and after the move (0-based). */
+  from: number;
+  to: number;
+  /** The rows on the page in their new order. */
+  items: T[];
+  /** How many rows come before this page (0 on the first page), so `offset + to` is the row's position in the whole list. */
+  offset: number;
+}
 export interface PageResponse<T> {
   content: T[];
   totalElements: number;
@@ -1213,6 +1225,12 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   readonly page: import("@angular/core").InputSignal<string>;
   /** Show column config + saved views toolbar. Defaults true. Set false to hide both. */
   readonly showToolbar: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Show the More Actions menu in the toolbar (Import, Columns, Save/Saved Views and page-defined menu items). Defaults true.
+   * Set false for a page that has nothing to offer there; Export, page-defined primary/secondary buttons and the search box
+   * are unaffected. The table still hides the menu by itself when it is empty and unfiltered.
+   */
+  readonly showMoreActions: import("@angular/core").InputSignal<boolean>;
   /**
    * Show the search box above the table. Defaults true. Set false for small fixed tables where searching is meaningless
    * (a handful of summary rows). Quick-filter tabs and the toolbar are unaffected; when the search box, the tabs and the
@@ -1307,6 +1325,16 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   readonly bulkAction: import("@angular/core").OutputEmitterRef<BulkActionEvent>;
   /** Emitted after a built-in single-row delete completes successfully. */
   readonly rowDeleted: import("@angular/core").OutputEmitterRef<T>;
+  /**
+   * Optional drag-and-drop ordering of the rows. Off by default; when `true` (and the user has full access) every row gets a grip
+   * (drag it, or focus it and use the arrow keys / Home / End; phone cards get Move up / Move down buttons). Reordering is only
+   * offered while the list is in its stored order: with a sort, search, quick tab or column filter active the grips are disabled
+   * (their tooltip says why), because the visible order is then not the stored one. The move is applied to the page on screen at
+   * once and announced as `(rowReorder)`; the host saves it (a failed save should call `refresh()` to bring back the stored order).
+   */
+  readonly reorderable: import("@angular/core").InputSignal<boolean>;
+  /** Emitted after the user moves a row: `items` is the page in its new order, `from` / `to` are page indexes, `offset` is the number of rows on earlier pages. */
+  readonly rowReorder: import("@angular/core").OutputEmitterRef<TableRowReorderEvent<T>>;
   private readonly config;
   private readonly http;
   private readonly destroyRef;
@@ -1400,6 +1428,34 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   protected readonly _toolbarButtons: Signal<ToolbarAction[]>;
   /** True while the table is empty and unfiltered but the host kept a More Actions item (`keepWhenEmpty`) — the menu stays. */
   protected readonly _keepMoreActions: Signal<boolean>;
+  /** The reorder column is part of the table (the grips may still be disabled, see `_reorderActive`). */
+  protected readonly _reorderOn: Signal<boolean>;
+  /** Moves are allowed: the list is in its stored order (no sort / search / tab / filter), loaded, and has more than one row. */
+  protected readonly _reorderActive: Signal<boolean>;
+  /** Why the grips are off: an active sort / search / tab / filter is the reason to name even when it left one row ("nothing to reorder" would hide it). */
+  protected readonly _reorderHint: Signal<"Clear the sort, search and filters to change the order" | "There is nothing to reorder" | "Reordering is not available right now">;
+  /** One id per table, so each grip can point to the instructions (aria-describedby) even with several tables on a page. */
+  protected readonly _reorderHelpId: string;
+  protected readonly _dragFrom: import("@angular/core").WritableSignal<number | null>;
+  /** Key of the row being dragged: the index can go stale if the page reloads mid-drag, the key cannot. */
+  private _dragKey;
+  protected readonly _dragOver: import("@angular/core").WritableSignal<number | null>;
+  /** Polite screen-reader message after a move. */
+  protected readonly _reorderAnnouncement: import("@angular/core").WritableSignal<string>;
+  private readonly _host;
+  protected reorderLabel(item: T): string;
+  protected onGripDragStart(e: DragEvent, index: number): void;
+  protected onGripDragEnd(): void;
+  protected onRowDragOver(e: DragEvent, index: number): void;
+  protected onRowDrop(e: DragEvent, index: number): void;
+  protected onGripKeydown(e: KeyboardEvent, index: number): void;
+  /**
+   * A Move up / Move down button (touch screens and phone cards). The pressed button can end up disabled (the row reached an end), and a
+   * focused control that gets disabled drops focus to the page, so focus goes to the row's other Move button then.
+   */
+  protected moveByButton(index: number, direction: -1 | 1): void;
+  /** Moves the row at `from` to `to` (both page indexes) in the table and tells the host. false = nothing changed. */
+  protected moveRow(from: number, to: number): boolean;
   protected readonly _hasActiveFilters: Signal<boolean>;
   /** Host `params` with empty values dropped; equal by content so a new object with the same values doesn't reload. */
   protected readonly _extraParams: Signal<Record<string, string>>;
@@ -1455,7 +1511,7 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    */
   private readonly _rowNameSuffix;
   /** A row's accessible name: its name, plus the position among rows of the same name when that name repeats on the page. */
-  private rowAccessibleName;
+  protected rowAccessibleName(item: T): string;
   /** "Select Acme Electric" — a row's selection checkbox name ("Select Acme Electric (2 of 3)" when the name repeats on the page). */
   protected selectRowLabel(item: T): string;
   /**
@@ -1699,6 +1755,11 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
       "required": false;
       "isSignal": true;
     };
+    "showMoreActions": {
+      "alias": "showMoreActions";
+      "required": false;
+      "isSignal": true;
+    };
     "showSearch": {
       "alias": "showSearch";
       "required": false;
@@ -1769,6 +1830,11 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
       "required": false;
       "isSignal": true;
     };
+    "reorderable": {
+      "alias": "reorderable";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "rowClick": "rowClick";
     "linkClick": "linkClick";
@@ -1782,6 +1848,7 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
     "tabChange": "tabChange";
     "bulkAction": "bulkAction";
     "rowDeleted": "rowDeleted";
+    "rowReorder": "rowReorder";
   }, never, never, true, never>;
 }
 /**
@@ -1822,6 +1889,11 @@ export declare class SidePanelComponent implements OnDestroy {
   readonly cancelTestId: import("@angular/core").InputSignal<string>;
   /** `data-testid` of the primary footer button; none when empty (default). */
   readonly primaryTestId: import("@angular/core").InputSignal<string>;
+  /**
+   * Element that gets focus back when the panel closes. Takes precedence over the element that was focused (or last
+   * clicked / activated) when it opened; used only if it is still in the page and visible. Default null = the opener.
+   */
+  readonly returnFocusTo: import("@angular/core").InputSignal<HTMLElement | null>;
   readonly closed: import("@angular/core").OutputEmitterRef<void>;
   readonly primaryClick: import("@angular/core").OutputEmitterRef<void>;
   protected readonly titleId: string;
@@ -1831,8 +1903,12 @@ export declare class SidePanelComponent implements OnDestroy {
   private _prevFocus;
   private _scrollLocked;
   private _stopViewport;
+  private _stopIframeKeys;
+  private readonly _interaction;
   constructor();
   onKeydown(event: KeyboardEvent): void;
+  /** A focus-guard sentinel received focus (Tab left the panel's tab order, e.g. out of an iframe): send it back inside. */
+  protected onGuardFocus(which: 'start' | 'end', event?: FocusEvent): void;
   /** Initial focus — see `focusInitial` (autofocus target → first usable field → dialog container). */
   private _focusFirst;
   private _focusable;
@@ -1899,6 +1975,11 @@ export declare class SidePanelComponent implements OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "returnFocusTo": {
+      "alias": "returnFocusTo";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "closed": "closed";
     "primaryClick": "primaryClick";
@@ -1909,7 +1990,7 @@ export declare class ModalComponent implements OnInit, OnDestroy {
   readonly title: import("@angular/core").InputSignal<string>;
   readonly description: import("@angular/core").InputSignal<string>;
   readonly maxWidth: import("@angular/core").InputSignal<string>;
-  readonly bodyOverflow: import("@angular/core").InputSignal<"hidden" | "auto" | "visible">;
+  readonly bodyOverflow: import("@angular/core").InputSignal<"auto" | "visible" | "hidden">;
   /** `data-testid` of the dialog element itself (the host `<ui-modal>` is always in the page, the dialog only while open). None when empty. */
   readonly dialogTestId: import("@angular/core").InputSignal<string>;
   /** Hides the header X button (e.g. while a request is running). Escape and a backdrop click still close unless `closable` is false. */
@@ -1920,6 +2001,11 @@ export declare class ModalComponent implements OnInit, OnDestroy {
    */
   readonly closable: import("@angular/core").InputSignal<boolean>;
   readonly close: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Element that gets focus back when the dialog closes. Takes precedence over the element that was focused (or last
+   * clicked / activated) when it opened; used only if it is still in the page and visible. Default null = the opener.
+   */
+  readonly returnFocusTo: import("@angular/core").InputSignal<HTMLElement | null>;
   protected readonly titleId: string;
   private readonly el;
   private readonly ren;
@@ -1928,8 +2014,12 @@ export declare class ModalComponent implements OnInit, OnDestroy {
   private _prevFocus;
   private _scrollLocked;
   private _stopViewport;
+  private _stopIframeKeys;
+  private readonly _interaction;
   constructor();
   onKeydown(event: KeyboardEvent): void;
+  /** A focus-guard sentinel received focus (Tab left the dialog's tab order, e.g. out of an iframe): send it back inside. */
+  protected onGuardFocus(which: 'start' | 'end', event?: FocusEvent): void;
   /** Initial focus — see `focusInitial` (autofocus target → first usable field → dialog container). */
   private _focusFirst;
   private _focusable;
@@ -1977,6 +2067,11 @@ export declare class ModalComponent implements OnInit, OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "returnFocusTo": {
+      "alias": "returnFocusTo";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "close": "close";
   }, never, ["*", "[modal-footer-left]", "[modal-footer-center]", "[modal-footer-right]"], true, never>;
@@ -2279,7 +2374,7 @@ export declare class AudioPlayerComponent {
   /** Accessible name of the player. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** How much to load before play: 'metadata' (default), 'auto' or 'none'. */
-  readonly preload: import("@angular/core").InputSignal<"none" | "metadata" | "auto">;
+  readonly preload: import("@angular/core").InputSignal<"auto" | "none" | "metadata">;
   /** Fires when the browser can't load or decode the source. */
   readonly playbackError: import("@angular/core").OutputEmitterRef<void>;
   protected readonly failed: import("@angular/core").WritableSignal<boolean>;
@@ -2529,7 +2624,7 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
    * clicking it still toggles the box - e.g. a product name that is both the heading of its card and the label of its checkbox.
    * Default null: plain label text, exactly as before. Single mode only.
    */
-  readonly headingLevel: import("@angular/core").InputSignal<3 | 1 | 2 | 5 | 6 | 4 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<5 | 3 | 1 | 2 | 4 | 6 | null>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
   /**
@@ -2742,7 +2837,7 @@ export declare class CheckboxTrailingDirective {
  *
  * Built on a native `<input type="checkbox" role="switch">`, so Space toggles it, it is focusable, and a screen reader
  * announces it as a switch (on / off). The label and hint name and describe it. `disabled` (input or form control) dims it
- * and blocks changes. On touch devices and phones the switch has a >= 44px hit area.
+ * and blocks changes. `ariaDescribedBy` adds the id of a description rendered elsewhere. On touch devices and phones the switch has a >= 44px hit area.
  */
 export declare class ToggleComponent implements ControlValueAccessor {
   /** Bold line on the left. */
@@ -2751,6 +2846,8 @@ export declare class ToggleComponent implements ControlValueAccessor {
   readonly hint: import("@angular/core").InputSignal<string>;
   /** Accessible name when there is no visible `label`. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Id of another element that describes the switch (e.g. a description rendered elsewhere); announced after the hint. Absent when empty. */
+  readonly ariaDescribedBy: import("@angular/core").InputSignal<string>;
   /** Whether the switch is on. Two-way: `[(checked)]`. */
   readonly checked: import("@angular/core").ModelSignal<boolean>;
   /** Public so a host template can bind `[disabled]` (a protected input fails strict template type-checking, TS2445). */
@@ -2761,6 +2858,8 @@ export declare class ToggleComponent implements ControlValueAccessor {
   protected readonly _inputId: string;
   protected readonly _labelId: string;
   protected readonly _hintId: string;
+  /** The hint's id (when there is a hint) followed by the host's `ariaDescribedBy`; null when neither exists. */
+  protected readonly _describedBy: import("@angular/core").Signal<string | null>;
   private _onChange;
   private _onTouched;
   writeValue(val: boolean): void;
@@ -2786,6 +2885,11 @@ export declare class ToggleComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "ariaDescribedBy": {
+      "alias": "ariaDescribedBy";
+      "required": false;
+      "isSignal": true;
+    };
     "checked": {
       "alias": "checked";
       "required": false;
@@ -3524,7 +3628,7 @@ export declare class ButtonComponent {
    * `ghost-start`: a ghost button for list / section toggles - a full-width row with its content aligned to the start, transparent
    * background, hover tint and the normal focus ring. Pair it with `ariaExpanded` / `ariaPressed`; the label may contain a heading element.
    */
-  readonly variant: import("@angular/core").InputSignal<"link" | "primary" | "secondary" | "danger" | "warning" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
+  readonly variant: import("@angular/core").InputSignal<"primary" | "danger" | "warning" | "link" | "secondary" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
   /** Renders an anchor to this route instead of a button (use with `variant="link"` for an inline text link). `['/settings']` or `'/settings'`. While `disabled` or `loading` it renders a non-clickable `<span role="link" aria-disabled>` with no href (like `href`). */
   readonly routerLink: import("@angular/core").InputSignal<string | readonly unknown[] | null>;
   /** Query params of the `routerLink` (e.g. `{ section: 'deal-defaults' }`). */
@@ -3570,7 +3674,7 @@ export declare class ButtonComponent {
   readonly color: import("@angular/core").InputSignal<string | undefined>;
   readonly active: import("@angular/core").InputSignal<boolean>;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xs">;
-  readonly type: import("@angular/core").InputSignal<"button" | "reset" | "submit">;
+  readonly type: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
   readonly fullWidth: import("@angular/core").InputSignal<boolean>;
@@ -3965,7 +4069,7 @@ export declare class BulkMessagePanelComponent {
   readonly sending: import("@angular/core").InputSignal<boolean>;
   readonly closed: import("@angular/core").OutputEmitterRef<void>;
   readonly send: import("@angular/core").OutputEmitterRef<BulkMessageSendEvent>;
-  readonly channel: import("@angular/core").WritableSignal<"text" | "email">;
+  readonly channel: import("@angular/core").WritableSignal<"email" | "text">;
   private readonly _subject;
   private readonly _body;
   get subject(): string;
@@ -4103,6 +4207,54 @@ export declare class ErrorStateComponent {
     "retry": "retry";
   }, never, never, true, never>;
 }
+/** One password rule: `test` decides whether the typed password satisfies it. */
+export interface PasswordRule {
+  id: string;
+  label: string;
+  test: (password: string) => boolean;
+}
+/** The default rules (same as the backends): 8+ characters, an uppercase letter, a lowercase letter, a digit and a special character. */
+export declare const DEFAULT_PASSWORD_RULES: readonly PasswordRule[];
+/** True when the password satisfies every rule (default: {@link DEFAULT_PASSWORD_RULES}). Use it to gate Save. */
+export declare function passwordMeetsRules(password: string, rules?: readonly PasswordRule[]): boolean;
+/**
+ * The password requirements checklist. Pass the typed password; each rule shows as a row that turns green with a check mark once it is
+ * satisfied, and stays grey with an empty circle until then. There is no "(met)" text: the state is also in `data-met` and in
+ * visually hidden text for screen readers, so it is not colour alone.
+ *
+ * Also available as `<ui-text-input type="password" [passwordRequirements]="true">`, which shows this list under the field.
+ */
+export declare class PasswordRequirementsComponent {
+  /** The password to check. */
+  readonly value: import("@angular/core").InputSignal<string>;
+  /** Rules to show; default {@link DEFAULT_PASSWORD_RULES}. */
+  readonly rules: import("@angular/core").InputSignal<readonly PasswordRule[]>;
+  readonly title: import("@angular/core").InputSignal<string>;
+  protected readonly _check: string;
+  protected readonly _results: import("@angular/core").Signal<{
+    id: string;
+    label: string;
+    met: boolean;
+  }[]>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PasswordRequirementsComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PasswordRequirementsComponent, "ui-password-requirements", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "rules": {
+      "alias": "rules";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 export declare class TextInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
   /** Accessible name for a field with no visible label (e.g. an inline cell or title input). */
@@ -4114,7 +4266,19 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
    * Meant for a short mark of 1-3 characters.
    */
   readonly prefix: import("@angular/core").InputSignal<string>;
-  readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "tel" | "password" | "url">;
+  /**
+   * `type="password"` only: puts an eye button inside the field, at its right end, that shows / hides the typed text (the eye with a slash
+   * means "hidden again"). Per field, starts hidden; the button is a toggle (`aria-pressed`) named "Show password". Ignored for other types.
+   */
+  readonly revealable: import("@angular/core").InputSignal<boolean>;
+  /**
+   * `type="password"` only: shows the password requirements checklist under the field (`ui-password-requirements`) once the user has typed
+   * (it hides again when the host clears the field, e.g. after a successful change). Each rule turns green with a check when satisfied. Off by default; ignored for other types.
+   */
+  readonly passwordRequirements: import("@angular/core").InputSignal<boolean>;
+  /** Rules for `passwordRequirements`; default = the library's five rules (8+ characters, upper, lower, digit, special). */
+  readonly passwordRules: import("@angular/core").InputSignal<readonly PasswordRule[] | undefined>;
+  readonly type: import("@angular/core").InputSignal<"number" | "email" | "text" | "tel" | "password" | "url">;
   readonly maxlength: import("@angular/core").InputSignal<number | undefined>;
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
@@ -4123,7 +4287,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
    * `search`, `text`, `none`). Empty (default) = the browser's default for the field, except `type="tel"`, which keeps `tel`.
    * It only picks the keyboard; it does not restrict what can be typed or pasted.
    */
-  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "email" | "text" | "none" | "search" | "tel" | "url" | "decimal" | "numeric">;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly error: import("@angular/core").InputSignal<string>;
@@ -4185,6 +4349,17 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   private readonly _numeric;
   /** The native `step` attribute: only for `type="number"` and only for a finite number above 0; otherwise none (the browser's step of 1). */
   protected readonly _stepAttr: import("@angular/core").Signal<string | null>;
+  protected readonly _revealable: import("@angular/core").Signal<boolean>;
+  protected readonly _shown: import("@angular/core").WritableSignal<boolean>;
+  protected readonly _inputType: import("@angular/core").Signal<"number" | "email" | "text" | "tel" | "password" | "url">;
+  protected readonly _eyePath: string;
+  protected readonly _eyeOffPath: string;
+  protected readonly _showRequirements: import("@angular/core").Signal<boolean>;
+  /** `aria-describedby`: the error / hint text and, while the requirements checklist is shown, the checklist (so a screen reader reads the rules with the field). */
+  protected readonly _describedBy: import("@angular/core").Signal<string | null>;
+  /** True once the user typed in the field; a host-written empty value (a form reset) puts it back to false. */
+  private readonly _typed;
+  protected readonly _defaultRules: readonly PasswordRule[];
   private _warned;
   private readonly _formatting;
   private readonly _issue;
@@ -4239,6 +4414,21 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
       "required": false;
       "isSignal": true;
     };
+    "revealable": {
+      "alias": "revealable";
+      "required": false;
+      "isSignal": true;
+    };
+    "passwordRequirements": {
+      "alias": "passwordRequirements";
+      "required": false;
+      "isSignal": true;
+    };
+    "passwordRules": {
+      "alias": "passwordRules";
+      "required": false;
+      "isSignal": true;
+    };
     "type": {
       "alias": "type";
       "required": false;
@@ -6734,7 +6924,7 @@ export declare class AlertComponent {
 /** The SVG path (24×24 stroke icon) for an icon key, or undefined when the key is unknown. */
 export declare function iconPath(name: string): string | undefined;
 /** Keys with an icon of their own (the data-table action keys are accepted too — see `builtInActionIcon`). */
-export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call';
+export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'view-off' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call';
 /**
  * A clickable icon. The host passes a key (`name="delete"`) and the library draws that icon; clicking it emits
  * `iconClick`, and the host does the actual work (delete the row, open a panel, …).
@@ -7470,7 +7660,9 @@ export interface DateRange {
 }
 /**
  * Date range picker: preset pills (Today … Year to Date, optional All Time, Custom Range) plus
- * From / To date inputs with an Apply button for the custom range. Emits `rangeChange` with the
+ * From / To date inputs with an Apply button for the custom range. With the presets shown, the custom range opens in a
+ * popover card under the pills (right-aligned, closes on Apply / Escape / outside click; picking Custom Range again
+ * reopens it); with `showPresets` false the From / To row is rendered inline. Emits `rangeChange` with the
  * resolved ISO dates whenever a preset is picked or a custom range is applied.
  *
  *   <ui-date-range-picker [activePreset]="preset()" [includeAllTime]="true" (rangeChange)="onRange($event)" />
@@ -7486,9 +7678,19 @@ export declare class DateRangePickerComponent {
   readonly rangeChange: import("@angular/core").OutputEmitterRef<DateRange>;
   /** Follows `activePreset` from the host, and the user's own picks in between. */
   protected readonly selectedPreset: import("@angular/core").WritableSignal<DatePreset>;
+  /** The popover was closed (Apply / Escape / outside click); any preset change reopens it. */
+  private readonly popoverDismissed;
+  protected readonly popoverVisible: import("@angular/core").Signal<boolean>;
+  protected readonly popTop: import("@angular/core").WritableSignal<number>;
+  protected readonly popRight: import("@angular/core").WritableSignal<number>;
+  private readonly host;
   protected readonly customStart: import("@angular/core").WritableSignal<string>;
   protected readonly customEnd: import("@angular/core").WritableSignal<string>;
   protected readonly presetTabs: import("@angular/core").Signal<PillTab[]>;
+  constructor();
+  private place;
+  protected onDocumentClick(e: Event): void;
+  protected onEscape(e: Event): void;
   selectPreset(key: DatePreset): void;
   applyCustom(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePickerComponent, never>;
@@ -8281,7 +8483,7 @@ export declare class DetailCardComponent {
   /** true (default) = the title is displayed in capitals (CSS only); false = shown as written. The text, aria-label and heading name are never changed. */
   readonly uppercaseTitle: import("@angular/core").InputSignal<boolean>;
   /** 1-6 makes the title a real heading for screen readers (role=heading, aria-level); null keeps it plain text. */
-  readonly headingLevel: import("@angular/core").InputSignal<3 | 1 | 2 | 5 | 6 | 4 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<5 | 3 | 1 | 2 | 4 | 6 | null>;
   /** Optional id for the title text; the card is then labelled by it. Without it the title is the card's aria-label. */
   readonly titleId: import("@angular/core").InputSignal<string>;
   /** Accessible name of the card when the header gives none (no header, or no title). A visible title wins; blank = no name. */