@forgeroute/ui 0.4.18 → 0.4.20

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -3029,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. */
@@ -3041,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;
@@ -3125,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;
@@ -4271,6 +4292,12 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   readonly label: import("@angular/core").InputSignal<string>;
   /** Accessible name for a field with no visible label (e.g. an inline cell or title input). */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * `data-testid` placed on the inner `<input>` (the host `<ui-text-input>` keeps its own attributes). Lets e2e tests `fill()` / `blur()` the
+   * field directly instead of `getByTestId('x').locator('input')`. Pass a different id than the host's, e.g. host `data-testid="email"`
+   * and `inputTestId="email-input"`. Omitted = no attribute.
+   */
+  readonly inputTestId: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   /**
    * An optional leading mark shown inside the field, left of the text (e.g. `prefix="$"` for a dollar amount). Hidden unless set; it is
@@ -4416,6 +4443,11 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
       "required": false;
       "isSignal": true;
     };
+    "inputTestId": {
+      "alias": "inputTestId";
+      "required": false;
+      "isSignal": true;
+    };
     "placeholder": {
       "alias": "placeholder";
       "required": false;
@@ -4536,7 +4568,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
     "focused": "focused";
     "blurred": "blurred";
     "invalidChange": "invalidChange";
-  }, never, never, true, never>;
+  }, never, ["[uiLabelEnd]"], true, never>;
 }
 export declare class TextareaInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
@@ -8557,7 +8589,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>;
@@ -8739,6 +8771,204 @@ export declare class DividerComponent {
     };
   }, {}, never, never, true, never>;
 }
+/** One column (stage) of a [ui-board]. `items` are the host's own records; the board never reads their fields. */
+export interface BoardColumn<T = unknown> {
+  /** Unique id of the column (the stage key); reported in `from` / `to` of a move. */
+  key: string;
+  /** Column title (shown uppercase). */
+  label: string;
+  items: T[];
+  /** Dot colour: a CSS colour, or one of blue / cyan / green / teal / amber / orange / red / pink / slate / gray. */
+  color?: string;
+  /** Small line under the title, e.g. a pre-formatted total ("$120,000"). */
+  summary?: string;
+  /** Spoken version of `summary` (aria-label). Defaults to the summary text. */
+  summaryLabel?: string;
+  /** 'success' = green column and green card edge (a won / done stage). */
+  tone?: 'default' | 'success';
+  /** true = display-only column: items can't be dropped into it. */
+  dropDisabled?: boolean;
+  /** Text of the empty column; defaults to the board's `emptyColumnText`. */
+  emptyText?: string;
+}
+/** Fired when the user moves a card to another column (drag and drop, or Shift + Arrow keys on a focused card). */
+export interface BoardMoveEvent<T = unknown> {
+  item: T;
+  from: string;
+  to: string;
+  /** The board has ALREADY moved the card on screen. Call this if the host's save fails to put it back. */
+  revert: () => void;
+}
+export interface BoardCardActionEvent<T = unknown> {
+  type: string;
+  item: T;
+}
+/** Context of the card template: `<ng-template uiBoardCard let-item let-column="column" let-menu="menu">`. */
+export interface BoardCardContext<T = unknown> {
+  $implicit: T;
+  column: BoardColumn<T>;
+  /** Template of the card's "⋮" menu (renders nothing without `cardActions`). Output it with `{ $implicit: item }` in the card's top row. */
+  menu: TemplateRef<{
+    $implicit: T;
+  }>;
+}
+/** Marks the template that renders the INSIDE of a card (the board draws the card frame, menu and drag handling). */
+export declare class BoardCardDirective<T = unknown> {
+  readonly template: TemplateRef<BoardCardContext<T>>;
+  static ngTemplateContextGuard<T>(_dir: BoardCardDirective<T>, _ctx: unknown): _ctx is BoardCardContext<T>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BoardCardDirective<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<BoardCardDirective<any>, "ng-template[uiBoardCard]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Kanban board: columns of cards that can be dragged between columns. Data and saving stay with the host.
+ *
+ *   <ui-board [columns]="columns()" [itemKey]="key" [itemLabel]="label" [cardActions]="actions" [readOnly]="perm() !== 'full'"
+ *             [loading]="loading()" [error]="error()" (retry)="load()"
+ *             (cardClick)="open($event)" (cardAction)="onAction($event)" (itemMove)="onMove($event)">
+ *     <ng-template uiBoardCard let-deal let-menu="menu">
+ *       <div class="ub-card__top"><span class="ub-card__title">{{ deal.title }}</span>
+ *         <ng-container [ngTemplateOutlet]="menu" [ngTemplateOutletContext]="{ $implicit: deal }" /></div>
+ *       <div class="ub-card__contact">{{ deal.contactName }}</div>
+ *     </ng-template>
+ *   </ui-board>
+ *
+ * - A drop moves the card on screen at once and emits `itemMove`; the host saves it and calls `event.revert()` if that fails.
+ * - Keyboard: Enter / Space opens a card; Shift + ← / → moves it to the neighbouring column (announced to screen readers).
+ * - `readOnly` removes dragging and keyboard moves. On phones (≤640px) the columns stack.
+ */
+export declare class BoardComponent<T = unknown> {
+  /** The columns in display order, each with its items. A new value replaces the board's content (and any on-screen move). */
+  readonly columns: import("@angular/core").InputSignal<BoardColumn<T>[]>;
+  /** Stable unique id of a card (used to track cards between renders). */
+  readonly itemKey: import("@angular/core").InputSignal<(item: T) => string>;
+  /** Spoken name of a card: title, who, status, value... The card's visible content is the `uiBoardCard` template. */
+  readonly itemLabel: import("@angular/core").InputSignal<(item: T) => string>;
+  /** Menu on every card (the "⋮" button). Empty = no menu. Handle the pick in `(cardAction)`. */
+  readonly cardActions: import("@angular/core").InputSignal<RowAction[]>;
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  /** Error text: replaces the board with the message and a Retry button. */
+  readonly error: import("@angular/core").InputSignal<string | null>;
+  /** true = no dragging, no keyboard moves. */
+  readonly readOnly: import("@angular/core").InputSignal<boolean>;
+  /** true = moves are paused (e.g. a save is running) so a second card can't be moved before the first is saved. */
+  readonly moveDisabled: import("@angular/core").InputSignal<boolean>;
+  /** Optional rule: may this card go from this column to that one? A refused drop does nothing. */
+  readonly canMove: import("@angular/core").InputSignal<((item: T, from: string, to: string) => boolean) | null>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  readonly emptyColumnText: import("@angular/core").InputSignal<string>;
+  /** Singular / plural noun for the column's spoken count ("3 deals"). */
+  readonly itemNoun: import("@angular/core").InputSignal<string>;
+  readonly itemNounPlural: import("@angular/core").InputSignal<string>;
+  readonly retryLabel: import("@angular/core").InputSignal<string>;
+  readonly cardClick: import("@angular/core").OutputEmitterRef<T>;
+  readonly cardAction: import("@angular/core").OutputEmitterRef<BoardCardActionEvent<T>>;
+  readonly itemMove: import("@angular/core").OutputEmitterRef<BoardMoveEvent<T>>;
+  readonly retry: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly card: import("@angular/core").Signal<BoardCardDirective<any> | undefined>;
+  /** The columns as shown: the host's value, plus any move not yet replaced by new data. */
+  protected readonly cols: import("@angular/core").WritableSignal<BoardColumn<T>[]>;
+  protected readonly overKey: import("@angular/core").WritableSignal<string | null>;
+  protected readonly draggingKey: import("@angular/core").WritableSignal<string | null>;
+  protected readonly announcement: import("@angular/core").WritableSignal<string>;
+  private readonly host;
+  private drag;
+  protected readonly skeletonColumns: import("@angular/core").Signal<number[]>;
+  protected readonly canDrag: import("@angular/core").Signal<boolean>;
+  protected readonly canMoveAny: import("@angular/core").Signal<boolean>;
+  protected dot(color?: string): string;
+  protected onDragStart(event: DragEvent, item: T, col: BoardColumn<T>): void;
+  protected onDragEnd(): void;
+  protected onDragOver(event: DragEvent, col: BoardColumn<T>): void;
+  protected onDragLeave(event: DragEvent, col: BoardColumn<T>): void;
+  protected onDrop(event: DragEvent, col: BoardColumn<T>): void;
+  protected onCardKey(event: KeyboardEvent, item: T, col: BoardColumn<T>): void;
+  private accepts;
+  private move;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BoardComponent<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BoardComponent<any>, "ui-board", never, {
+    "columns": {
+      "alias": "columns";
+      "required": true;
+      "isSignal": true;
+    };
+    "itemKey": {
+      "alias": "itemKey";
+      "required": true;
+      "isSignal": true;
+    };
+    "itemLabel": {
+      "alias": "itemLabel";
+      "required": true;
+      "isSignal": true;
+    };
+    "cardActions": {
+      "alias": "cardActions";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "readOnly": {
+      "alias": "readOnly";
+      "required": false;
+      "isSignal": true;
+    };
+    "moveDisabled": {
+      "alias": "moveDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "canMove": {
+      "alias": "canMove";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyMessage": {
+      "alias": "emptyMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyColumnText": {
+      "alias": "emptyColumnText";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemNoun": {
+      "alias": "itemNoun";
+      "required": false;
+      "isSignal": true;
+    };
+    "itemNounPlural": {
+      "alias": "itemNounPlural";
+      "required": false;
+      "isSignal": true;
+    };
+    "retryLabel": {
+      "alias": "retryLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "cardClick": "cardClick";
+    "cardAction": "cardAction";
+    "itemMove": "itemMove";
+    "retry": "retry";
+  }, ["card"], never, true, never>;
+}
 /**
  * Wraps a block of form controls (a settings page, a configuration card) so a view-only user can look at the current
  * values but change nothing. While `readOnly` is true the wrapper's native `<fieldset>` is `disabled`, and the browser