@forgeroute/ui 0.4.16 → 0.4.18

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -1225,12 +1225,25 @@ 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
    * toolbar are all off, the header row above the table is not rendered at all.
    */
   readonly showSearch: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Show the quick-filter tabs ("All / Active / ..."), which the table builds from the `/counts` endpoint. Defaults true:
+   * with correct `/counts` data the tabs show. Set false for a table where the tabs add nothing (a small breakdown table in a
+   * side panel); search, toolbar, column filters and the counts requests are unaffected. When the search box, the toolbar and the
+   * tabs are all off, the header row is not rendered at all.
+   */
+  readonly showQuickTabs: import("@angular/core").InputSignal<boolean>;
   /** False when the header row would be empty (no search box, no toolbar, no quick-filter tabs). */
   protected readonly _showHeader: Signal<boolean>;
   /** Optional endpoint that returns Record<string,number> counts per quick-filter value. */
@@ -1426,7 +1439,8 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   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>;
-  protected readonly _reorderHint: Signal<"There is nothing to reorder" | "Clear the sort, search and filters to change the order">;
+  /** 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>;
@@ -1748,11 +1762,21 @@ 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;
       "isSignal": true;
     };
+    "showQuickTabs": {
+      "alias": "showQuickTabs";
+      "required": false;
+      "isSignal": true;
+    };
     "countsEndpoint": {
       "alias": "countsEndpoint";
       "required": false;
@@ -1877,6 +1901,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;
@@ -1886,8 +1915,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;
@@ -1954,6 +1987,11 @@ export declare class SidePanelComponent implements OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "returnFocusTo": {
+      "alias": "returnFocusTo";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "closed": "closed";
     "primaryClick": "primaryClick";
@@ -1975,6 +2013,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;
@@ -1983,8 +2026,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;
@@ -2032,6 +2079,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>;
@@ -2797,7 +2849,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. */
@@ -2806,6 +2858,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). */
@@ -2816,6 +2870,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;
@@ -2841,6 +2897,11 @@ export declare class ToggleComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "ariaDescribedBy": {
+      "alias": "ariaDescribedBy";
+      "required": false;
+      "isSignal": true;
+    };
     "checked": {
       "alias": "checked";
       "required": false;
@@ -5883,6 +5944,14 @@ export declare class FormColSpanDirective {
  *     <ui-button list-item-action variant="icon" ariaLabel="Remove" (click)="remove(d)">…</ui-button>
  *   </ui-list-item>
  */
+/** One secondary line under the title: plain text, or text with a small icon and a tone (`danger` red, `warning` amber). */
+export type ListItemDetail = string | {
+  text: string;
+  icon?: string;
+  tone?: 'default' | 'warning' | 'danger';
+};
+/** Colour of the optional leading icon tile. */
+export type ListItemIconColor = 'slate' | 'amber' | 'red' | 'blue' | 'green' | 'purple' | 'teal' | 'orange';
 export declare class ListItemComponent {
   /** Show a radio button, checkbox, or nothing on the left. */
   readonly leading: import("@angular/core").InputSignal<"none" | "checkbox" | "radio">;
@@ -5921,10 +5990,19 @@ export declare class ListItemComponent {
    * Pass whatever is relevant — email, phone, date, role, address, etc.
    * Falsy entries (null, undefined, '') are filtered out automatically.
    */
-  readonly details: import("@angular/core").InputSignal<(string | null | undefined)[]>;
+  readonly details: import("@angular/core").InputSignal<(ListItemDetail | null | undefined)[]>;
+  /** Optional leading icon: an icon key of `<ui-icon>` (e.g. `bell`, `task`, `email`) drawn in a tinted tile before the text. Default none. */
+  readonly icon: import("@angular/core").InputSignal<string>;
+  /** Colour of the icon tile. */
+  readonly iconColor: import("@angular/core").InputSignal<ListItemIconColor>;
+  protected readonly iconD: () => string | null;
   /** Emitted when the radio/checkbox changes. */
   readonly select: import("@angular/core").OutputEmitterRef<void>;
-  protected readonly visibleDetails: () => string[];
+  protected readonly visibleDetails: () => {
+    text: string;
+    d: string | null;
+    tone: "default" | "warning" | "danger";
+  }[];
   static ɵfac: i0.ɵɵFactoryDeclaration<ListItemComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ListItemComponent, "ui-list-item", never, {
     "leading": {
@@ -5992,6 +6070,16 @@ export declare class ListItemComponent {
       "required": false;
       "isSignal": true;
     };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconColor": {
+      "alias": "iconColor";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "select": "select";
   }, never, ["[list-item-action], [li-action]"], true, never>;
@@ -6125,6 +6213,10 @@ export declare class ListComponent<T = unknown> {
   /** Announcement after a move; receives the row label, the new position (1-based) and the list size. */
   readonly moveAnnouncement: import("@angular/core").InputSignal<(label: string, position: number, total: number) => string>;
   /** Fires with the new array when the user moves a row (`[(items)]`). The list does not change `items` itself. */
+  /** Shows an arrow at the end of every row and makes the row open something: a click or Enter on the row (not on a button or link inside it) emits `itemClick`. Default false: no arrow, rows are not clickable. */
+  readonly navigable: import("@angular/core").InputSignal<boolean>;
+  /** The row of `[navigable]` that was clicked (or Enter was pressed on). */
+  readonly itemClick: import("@angular/core").OutputEmitterRef<T>;
   readonly itemsChange: import("@angular/core").OutputEmitterRef<T[]>;
   /** Fires when the user moves a row. The host applies it (or uses `[(items)]`) and passes the new `items`. */
   readonly reorder: import("@angular/core").OutputEmitterRef<ListReorderEvent<T>>;
@@ -6153,6 +6245,8 @@ export declare class ListComponent<T = unknown> {
    * reordering is off or disabled, `from` is out of range, or nothing would change. Does not touch focus.
    */
   move(from: number, to: number): boolean;
+  /** `[navigable]`: a click / Enter on the row itself emits the item; clicks on a control inside the row (button, link, field) are theirs. */
+  private emitItemClick;
   protected onKeydown(e: KeyboardEvent): void;
   protected onClick(e: Event): void;
   protected onFocusOut(e: FocusEvent): void;
@@ -6252,7 +6346,13 @@ export declare class ListComponent<T = unknown> {
       "required": false;
       "isSignal": true;
     };
+    "navigable": {
+      "alias": "navigable";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
+    "itemClick": "itemClick";
     "itemsChange": "itemsChange";
     "reorder": "reorder";
   }, ["rowTemplate"], ["[list-empty]"], true, never>;
@@ -6875,7 +6975,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' | 'view-off' | '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' | 'refund' | 'chevron-right';
 /**
  * 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, …).
@@ -7478,7 +7578,7 @@ export type KpiCardValueColor = 'default' | 'green' | 'blue' | 'red';
  *   Optional background: `background="#fef2f2"` fills the card with any CSS colour (default white), e.g. a soft red for money going out; the
  *   text keeps its own colours, so pick a light shade.
  *
- *   Optional ring: `[progress]="67"` (+ `progressMax`, `progressVariant`, `progressSize`) draws a ui-progress-ring beside the label; extra lines
+ *   Optional ring (top-right corner, level with the icon when the card has one — no extra height; beside the label otherwise): `[progress]="67"` (+ `progressMax`, `progressVariant`, `progressSize`) draws a ui-progress-ring beside the label; extra lines
  *   (a pace badge, a projection…) go in an element with the `kpi-footer` attribute.
  *
  *   <ui-kpi-card label="Deals Closed" [value]="'' + deals" subtitle="Year to Date" icon="check-circle" color="blue" />
@@ -7611,7 +7711,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)" />
@@ -7627,9 +7729,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>;
@@ -8880,7 +8992,8 @@ export declare class ColorInputComponent implements ControlValueAccessor, Valida
  *      'md'  (default) 1rem (16px) title, 0.8125rem description, 28px tile, 16px icon; padding 14px 18px (12px 14px at 480px and narrower)
  *      'lg'  1.25rem (20px) title, 0.9375rem description, 36px tile, 20px icon; padding 18px 22px (14px 16px at 480px and narrower)
  *      'xl'  1.5rem (24px) title (1.375rem at 480px and narrower), 1rem description, 44px tile, 24px icon; padding 22px 26px (16px 18px at 480px and narrower)
- *  Padding is built in per size - there is no padding input.
+ *  Padding is built in per size. To drop one side of it use `noPaddingTop`, `noPaddingLeft` or `noPaddingBottom` (booleans, default
+ *  false; combine freely). Only that side becomes 0 at every size and screen width; the other sides keep their padding.
  *
  * Content slots:
  *  - `[section-header-icon]`: your own icon (an `<svg>`, an `<img>` ...) shown in the tile instead of the `icon` input.
@@ -8913,6 +9026,12 @@ export declare class SectionHeaderComponent {
   readonly bordered: import("@angular/core").InputSignal<boolean>;
   /** Visual size: 'sm', 'md' (default), 'lg' or 'xl'. Independent of `level`; anything else renders as 'md'. */
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xl">;
+  /** Remove the built-in top padding. */
+  readonly noPaddingTop: import("@angular/core").InputSignal<boolean>;
+  /** Remove the built-in left padding. */
+  readonly noPaddingLeft: import("@angular/core").InputSignal<boolean>;
+  /** Remove the built-in bottom padding. */
+  readonly noPaddingBottom: import("@angular/core").InputSignal<boolean>;
   protected readonly titleId: string;
   protected readonly descriptionId: string;
   protected readonly headingLevel: import("@angular/core").Signal<number>;
@@ -8969,6 +9088,21 @@ export declare class SectionHeaderComponent {
       "required": false;
       "isSignal": true;
     };
+    "noPaddingTop": {
+      "alias": "noPaddingTop";
+      "required": false;
+      "isSignal": true;
+    };
+    "noPaddingLeft": {
+      "alias": "noPaddingLeft";
+      "required": false;
+      "isSignal": true;
+    };
+    "noPaddingBottom": {
+      "alias": "noPaddingBottom";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["[section-header-icon]", "[section-header-actions]"], true, never>;
 }
 /**