@forgeroute/ui 0.4.17 → 0.4.19

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -973,7 +973,7 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
   readonly error: import("@angular/core").InputSignal<string>;
   /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
   readonly showErrors: import("@angular/core").InputSignal<boolean>;
-  readonly size: import("@angular/core").InputSignal<"sm" | "default">;
+  readonly size: import("@angular/core").InputSignal<"default" | "sm">;
   readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
@@ -1237,6 +1237,13 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    * 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. */
@@ -1765,6 +1772,11 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
       "required": false;
       "isSignal": true;
     };
+    "showQuickTabs": {
+      "alias": "showQuickTabs";
+      "required": false;
+      "isSignal": true;
+    };
     "countsEndpoint": {
       "alias": "countsEndpoint";
       "required": false;
@@ -1990,7 +2002,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<"auto" | "visible" | "hidden">;
+  readonly bodyOverflow: import("@angular/core").InputSignal<"hidden" | "auto" | "visible">;
   /** `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. */
@@ -2374,7 +2386,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<"auto" | "none" | "metadata">;
+  readonly preload: import("@angular/core").InputSignal<"none" | "auto" | "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>;
@@ -2624,7 +2636,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<5 | 3 | 1 | 2 | 4 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6 | null>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
   /**
@@ -3017,6 +3029,14 @@ export declare class StepperComponent {
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** Horizontal, <= 480px: show only the current step's label (`'current'`, default) or every label (`'all'`). */
   readonly labelsOnSmallScreens: import("@angular/core").InputSignal<"all" | "current">;
+  /**
+   * Horizontal only. `'beside'` (default): the label sits to the right of its circle. `'below'`: equal-width columns, the label centred under
+   * its circle, one continuous line behind the circles that fills as steps complete; a complete step shows a check, the current step an
+   * accent ring with a dot, an upcoming step an empty circle (no numbers). Circles are 40px (32px with `size="sm"`).
+   */
+  readonly labelPosition: import("@angular/core").InputSignal<"beside" | "below">;
+  /** Viewport width in px below which a horizontal stepper is drawn vertical (labels beside the circles), e.g. `640`. null (default) = never. */
+  readonly stackBelow: import("@angular/core").InputSignal<number | null>;
   /** CSS length (e.g. `10.5rem`): horizontal only - the list gets `min-width: calc(<step count> * <value>)`. Empty (default) = no minimum. */
   readonly minStepWidth: import("@angular/core").InputSignal<string>;
   /** true = the list scrolls sideways (`overflow-x: auto`, 4px top / bottom padding so focus rings are not clipped) instead of squeezing. Default false. */
@@ -3029,6 +3049,9 @@ export declare class StepperComponent {
   readonly stepClick: import("@angular/core").OutputEmitterRef<string>;
   private readonly _win;
   private readonly _narrow;
+  private readonly _stacked;
+  /** The orientation actually drawn: `orientation`, or vertical while the viewport is below `stackBelow`. */
+  protected readonly orient: import("@angular/core").Signal<StepperOrientation>;
   /** True when `compact` is a pixel number and the viewport is below it (tokens use CSS media queries instead). */
   protected readonly compactPx: import("@angular/core").Signal<boolean>;
   private readonly _id;
@@ -3113,6 +3136,16 @@ export declare class StepperComponent {
       "required": false;
       "isSignal": true;
     };
+    "labelPosition": {
+      "alias": "labelPosition";
+      "required": false;
+      "isSignal": true;
+    };
+    "stackBelow": {
+      "alias": "stackBelow";
+      "required": false;
+      "isSignal": true;
+    };
     "minStepWidth": {
       "alias": "minStepWidth";
       "required": false;
@@ -3514,7 +3547,7 @@ export declare class PhoneNumberPickerComponent {
   protected readonly modeCtl: FormControl<string>;
   protected readonly zipCtl: FormControl<string>;
   protected readonly areaCtl: FormControl<string>;
-  protected readonly step: import("@angular/core").WritableSignal<3 | 1 | 2>;
+  protected readonly step: import("@angular/core").WritableSignal<1 | 2 | 3>;
   protected readonly mode: import("@angular/core").WritableSignal<PhoneNumberSearchMode>;
   private readonly _zip;
   private readonly _area;
@@ -3628,7 +3661,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<"primary" | "danger" | "warning" | "link" | "secondary" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
+  readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "link" | "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' }`). */
@@ -3674,7 +3707,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" | "submit" | "reset">;
+  readonly type: import("@angular/core").InputSignal<"reset" | "submit" | "button">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
   readonly fullWidth: import("@angular/core").InputSignal<boolean>;
@@ -4069,7 +4102,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<"email" | "text">;
+  readonly channel: import("@angular/core").WritableSignal<"text" | "email">;
   private readonly _subject;
   private readonly _body;
   get subject(): string;
@@ -4278,7 +4311,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   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 type: import("@angular/core").InputSignal<"number" | "text" | "email" | "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>;
@@ -4287,7 +4320,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<"" | "email" | "text" | "none" | "search" | "tel" | "url" | "decimal" | "numeric">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "email" | "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>;
@@ -4351,7 +4384,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   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 _inputType: import("@angular/core").Signal<"number" | "text" | "email" | "tel" | "password" | "url">;
   protected readonly _eyePath: string;
   protected readonly _eyeOffPath: string;
   protected readonly _showRequirements: import("@angular/core").Signal<boolean>;
@@ -5875,7 +5908,7 @@ export declare class FormSectionComponent {
   }, {}, never, ["*"], true, never>;
 }
 export declare class FormRowComponent {
-  readonly cols: import("@angular/core").InputSignal<3 | 1 | 2 | 4>;
+  readonly cols: import("@angular/core").InputSignal<1 | 2 | 3 | 4>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormRowComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FormRowComponent, "ui-form-row", never, {
     "cols": {
@@ -5892,7 +5925,7 @@ export declare class FormRowComponent {
  * child simply takes the full width. Keep a numeric span within the row's `cols` (use `all` for the whole row).
  */
 export declare class FormColSpanDirective {
-  readonly uiColSpan: import("@angular/core").InputSignal<"" | 3 | 2 | "2" | "3" | "all">;
+  readonly uiColSpan: import("@angular/core").InputSignal<"" | "2" | "3" | 2 | 3 | "all">;
   protected readonly _class: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormColSpanDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<FormColSpanDirective, "[uiColSpan]", never, {
@@ -5932,6 +5965,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">;
@@ -5970,10 +6011,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": {
@@ -6041,6 +6091,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>;
@@ -6174,6 +6234,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>>;
@@ -6202,6 +6266,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;
@@ -6301,7 +6367,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>;
@@ -6924,7 +6996,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, …).
@@ -7527,7 +7599,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" />
@@ -8483,7 +8555,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<5 | 3 | 1 | 2 | 4 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 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. */
@@ -8506,7 +8578,7 @@ export declare class DetailCardComponent {
   readonly showEdit: import("@angular/core").InputSignal<boolean>;
   readonly editLabel: import("@angular/core").InputSignal<string>;
   readonly editClick: import("@angular/core").OutputEmitterRef<void>;
-  /** `data-testid` of the built-in Edit button (on the `ui-button` host); none when empty. */
+  /** `data-testid` of the built-in Edit button (on the Edit `<button>`); none when empty. */
   readonly editTestId: import("@angular/core").InputSignal<string>;
   /** false = no pencil icon in the Edit button (text only). Default true: unchanged. */
   readonly editIcon: import("@angular/core").InputSignal<boolean>;
@@ -8941,7 +9013,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.
@@ -8974,6 +9047,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>;
@@ -9030,6 +9109,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>;
 }
 /**