@forgeroute/ui 0.4.51 → 0.4.53

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -2233,7 +2233,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" | "visible" | "auto">;
+  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. */
@@ -2617,7 +2617,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<"metadata" | "none" | "auto">;
+  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>;
@@ -2871,7 +2871,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 | 6 | 4 | 5 | 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>;
   /**
@@ -3782,7 +3782,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;
@@ -3815,6 +3815,8 @@ export declare class PhoneNumberPickerComponent {
   constructor();
   protected onPrimary(): void;
   protected onEnter(event: Event): void;
+  /** A field that was swapped out by a mode switch blurs while it is removed: that late blur must not mark the new field touched. */
+  protected onFieldBlur(from: PhoneNumberSearchMode): void;
   /** Typing a non-digit is blocked before it reaches the field. */
   protected onBeforeInput(event: Event): void;
   /** A pasted ZIP+4 / formatted text keeps its first 5 (or 3) digits and replaces the field's text. */
@@ -3896,7 +3898,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" | "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' }`). */
@@ -4158,6 +4160,9 @@ export declare class PillTabsComponent {
   readonly name: import("@angular/core").InputSignal<string>;
   /** Keep every pill at its own width on one line (default false: pills may shrink and wrap their text). On a phone the row scrolls sideways, as it always does. */
   readonly noWrap: import("@angular/core").InputSignal<boolean>;
+  /** 'vertical' stacks the tabs in a column (Up/Down arrows move between them, `aria-orientation="vertical"`). Default 'horizontal' = unchanged. */
+  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+  protected readonly vertical: () => boolean;
   readonly tabChange: import("@angular/core").OutputEmitterRef<string>;
   /** True while pills are hidden past the start / end edge of the scroll area (drives the fade hints). */
   protected readonly canScrollStart: import("@angular/core").WritableSignal<boolean>;
@@ -4195,6 +4200,11 @@ export declare class PillTabsComponent {
       "required": false;
       "isSignal": true;
     };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "tabChange": "tabChange";
   }, never, never, true, never>;
@@ -4758,7 +4768,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<"" | "numeric" | "search" | "text" | "none" | "email" | "tel" | "url" | "decimal">;
+  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>;
@@ -5134,7 +5144,7 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
     };
   }, {
     "invalidChange": "invalidChange";
-  }, never, never, true, never>;
+  }, never, ["[uiLabelEnd]"], true, never>;
 }
 export type TextSize = 'sm' | 'md' | 'lg';
 export type TextTone = 'default' | 'muted' | 'accent';
@@ -6049,6 +6059,8 @@ export declare class MultiSelectComponent implements ControlValueAccessor {
   registerOnTouched(fn: () => void): void;
   setDisabledState(d: boolean): void;
   protected onDocumentClick(event: Event): void;
+  /** Escape with the list open closes ONLY the list (focus back on the trigger) and is not passed on, so a surrounding side panel / modal stays open. */
+  protected onEscape(event: Event): void;
   protected toggleOpen(): void;
   protected toggleValue(value: string): void;
   protected remove(value: string): void;
@@ -6181,7 +6193,7 @@ export declare class DropdownComponent {
   readonly loader: import("@angular/core").InputSignal<(() => Promise<DropdownItem[]>) | null>;
   readonly active: import("@angular/core").InputSignal<boolean>;
   readonly activeValue: import("@angular/core").InputSignal<string>;
-  readonly variant: import("@angular/core").InputSignal<"button" | "badge">;
+  readonly variant: import("@angular/core").InputSignal<"badge" | "button">;
   readonly menuWidth: import("@angular/core").InputSignal<string>;
   /**
    * Fixed width of the trigger as a CSS length (e.g. `'280px'`). Empty (default) = the trigger is as wide as its label. When set, the trigger keeps that
@@ -6305,6 +6317,101 @@ export declare class DropdownComponent {
     "itemClick": "itemClick";
   }, never, never, true, never>;
 }
+/** One insertable merge variable. `value` is what `(picked)` emits (e.g. `{{first_name}}`); `group` puts it under a header. */
+export interface TextTemplateVariable {
+  value: string;
+  label: string;
+  group?: string;
+}
+interface Row$1 {
+  kind: 'group' | 'option';
+  key: string;
+  text: string;
+  variable?: TextTemplateVariable;
+  index?: number;
+}
+/**
+ * "Insert variable" picker for message templates: a button that opens a searchable list of every merge variable.
+ * Type to filter by name (case and accents ignored), or scroll the list; Enter / click picks one and `(picked)` emits its `value`.
+ * The list is positioned against the viewport (never clipped by a scrolling side panel), opens above the button when there is
+ * no room below, and scrolls inside the room it has.
+ *
+ *   <ui-text-template-picker [variables]="variables" (picked)="insert($event)" />
+ */
+export declare class TextTemplatePickerComponent {
+  readonly variables: import("@angular/core").InputSignal<TextTemplateVariable[]>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly searchPlaceholder: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** The chosen variable's `value`. The list closes and focus returns to the button. */
+  readonly picked: import("@angular/core").OutputEmitterRef<string>;
+  protected readonly _id: string;
+  protected readonly _open: import("@angular/core").WritableSignal<boolean>;
+  protected readonly _query: import("@angular/core").WritableSignal<string>;
+  protected readonly _active: import("@angular/core").WritableSignal<number>;
+  protected readonly _top: import("@angular/core").WritableSignal<number | null>;
+  protected readonly _bottom: import("@angular/core").WritableSignal<number | null>;
+  protected readonly _left: import("@angular/core").WritableSignal<number>;
+  protected readonly _width: import("@angular/core").WritableSignal<number>;
+  protected readonly _maxHeight: import("@angular/core").WritableSignal<number>;
+  private readonly host;
+  private readonly injector;
+  constructor();
+  private static fold;
+  protected readonly _matches: import("@angular/core").Signal<TextTemplateVariable[]>;
+  /** Display rows: group headers (when variables carry a `group`) followed by their options, each option numbered for keyboard navigation. */
+  protected readonly _rows: import("@angular/core").Signal<Row$1[]>;
+  /** The highlighted row, kept inside the current matches (the list can shrink while open). */
+  protected readonly _activeIndex: import("@angular/core").Signal<number>;
+  protected readonly _activeId: import("@angular/core").Signal<string | null>;
+  protected readonly _status: import("@angular/core").Signal<string>;
+  protected toggle(): void;
+  protected openFromKey(event: Event): void;
+  private openList;
+  /** Measures the trigger against the viewport: the list goes below it, or above when the room below is smaller, and never grows past the room it has. */
+  private place;
+  /** A click on the list's chrome (a group header, the empty text, the padding) must not take the focus from the search box: the keys and Escape depend on it. */
+  protected onPanelMouseDown(event: MouseEvent): void;
+  protected onQuery(value: string): void;
+  protected onSearchKey(event: KeyboardEvent): void;
+  protected pick(variable: TextTemplateVariable): void;
+  /** Escape closes only the list (and is not passed on), so a surrounding side panel / modal stays open. */
+  protected onEscape(event: Event): void;
+  private close;
+  private scrollActive;
+  protected onDocumentClick(event: Event): void;
+  /** The list is fixed to the screen, so it is placed again when the page resizes or scrolls (also the soft keyboard of a phone moves the viewport, which must not close it); it closes only once its button has left the screen. */
+  protected onResize(): void;
+  private readonly onAnyScroll;
+  private readonly onViewport;
+  private unlisten;
+  private follow;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TextTemplatePickerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TextTemplatePickerComponent, "ui-text-template-picker", never, {
+    "variables": {
+      "alias": "variables";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchPlaceholder": {
+      "alias": "searchPlaceholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "picked": "picked";
+  }, never, never, true, never>;
+}
 /**
  * A real `<form>` for a group of library fields, so the browser (and assistive tech) treats it as one: it is announced as a
  * "form" landmark when it has a name, and pressing Enter in a field submits it through a `ui-button type="submit"`. Apps do not write
@@ -6390,7 +6497,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": {
@@ -6407,7 +6514,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<"" | "2" | 3 | 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, {
@@ -6501,6 +6608,10 @@ export declare class ListItemComponent {
   protected readonly iconD: () => string | null;
   /** Emitted when the radio/checkbox changes. */
   readonly select: import("@angular/core").OutputEmitterRef<void>;
+  /** A plain interactive row (no radio/checkbox) is itself clickable: click, Enter or Space emit `select`. */
+  protected readonly pressable: () => boolean;
+  protected onRowClick(e: Event): void;
+  protected onRowKey(e: Event): void;
   protected readonly visibleDetails: () => {
     text: string;
     d: string | null;
@@ -8550,6 +8661,7 @@ export declare class DateRangePickerComponent {
    * shows that applied range as the highlighted tab, it does not open an empty From / To card. Clicking the tab reopens it.
    */
   private readonly popoverDismissed;
+  /** `popoverDismissed` is read first on purpose: a linkedSignal is lazy, and its "created closed" start value must be computed before the preset ever becomes custom. */
   protected readonly popoverVisible: import("@angular/core").Signal<boolean>;
   protected readonly popTop: import("@angular/core").WritableSignal<number>;
   protected readonly popRight: import("@angular/core").WritableSignal<number>;
@@ -9362,7 +9474,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 | 6 | 4 | 5 | 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. */
@@ -11744,7 +11856,7 @@ export declare function splitIntro(description: string): {
 export declare const SETUP_DONE_KEY = "done";
 /**
  * `ui-setup-wizard` — the first-run setup wizard every app plugs into. A left stepper with progress, one step at a time on the right, Back / Skip /
- * Save & Continue, and a final summary. The app gives it the list of steps (in the order that user type walks them) and the wording; the library
+ * Save & Continue, and a final summary. The sidebar only reopens an earlier step; later steps and the summary are reached with Continue / Skip. The app gives it the list of steps (in the order that user type walks them) and the wording; the library
  * does the rest:
  *
  *  - `kind: 'import'` steps open the library import window (CSV, pasted data, competitor sources) and show the result;
@@ -11839,6 +11951,8 @@ export declare class SetupWizardComponent {
   protected templateFor(key: string): import("@angular/core").TemplateRef<{
     $implicit: SetupWizardApi;
   }> | null;
+  /** The sidebar only reopens a step BEFORE the current one (to look at it again); a later step is reached with Continue or Skip. */
+  protected goToPast(key: string): void;
   protected goTo(key: string): void;
   private enter;
   private advanceFrom;