@forgeroute/ui 0.4.46 → 0.4.47

package/package.json

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

package/types/forgeroute-ui-stripe.d.ts

@@ -1266,6 +1266,8 @@ export declare function stripeConnectNotice(outcome: StripeConnectOutcome): {
  */
 export declare class StripeConnectComponent {
   private readonly destroyRef;
+  private readonly injector;
+  private readonly host;
   /** The call that creates the organization's Stripe account (or resumes it) and answers its id and the onboarding address. Needed for `start()`. */
   readonly createAccount: import("@angular/core").InputSignal<(() => Observable<StripeConnectAccount>) | null>;
   /** The call that reads the account's state. Needed for `check()`, `resume()` and `refreshOnReturn`. */
@@ -1297,6 +1299,13 @@ export declare class StripeConnectComponent {
   /** How the current tab is sent to Stripe when the browser refused the new tab (default: `window.location.href = url`); a host can route it through its own method. */
   readonly navigateTab: import("@angular/core").InputSignal<((url: string) => void) | null>;
   protected readonly visible: import("@angular/core").Signal<boolean>;
+  /** Which screen the card shows. */
+  protected readonly state: import("@angular/core").Signal<"none" | "complete" | "verifying" | "incomplete">;
+  /** What the persistent status region says: the current state, plus "Loading." while a request runs. Empty while nothing is shown. */
+  protected readonly liveText: import("@angular/core").Signal<string>;
+  /** The user pressed a button that started a request: when the screen then changes, focus moves to the new screen (the pressed button is gone). */
+  private acted;
+  private lastState;
   private readonly flow;
   constructor();
   /** Creates (or resumes) the account and opens Stripe's onboarding page in a new tab. */
@@ -1305,6 +1314,8 @@ export declare class StripeConnectComponent {
   check(): void;
   /** "Complete Setup": reads the state and opens the onboarding address of an unfinished account in a new tab. */
   resume(): void;
+  /** The flow will really send a request (the host gave the call, nothing is running, the card is not read-only). */
+  private canRun;
   /** Opens the Stripe dashboard in a new tab. */
   openDashboard(): void;
   /** The browser refused the new tab: Stripe opens in this one (through the host's `navigateTab` when it gave one). */

package/types/forgeroute-ui.d.ts

@@ -1088,7 +1088,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<"default" | "sm">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "default">;
   readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
@@ -1264,6 +1264,10 @@ export declare class ImportExportComponent {
   readonly finished: import("@angular/core").OutputEmitterRef<ImportSubmitResult>;
   readonly imported: import("@angular/core").OutputEmitterRef<void>;
   config: ImportExportConfig;
+  private static nextUid;
+  /** Unique prefix for the ids this window links with aria-describedby / aria-labelledby. */
+  readonly uid: string;
+  private readonly resultBox;
   private readonly http;
   /** API root from FORGEROUTE_CONFIG (e.g. a cross-origin prod API); falls back to same-origin `/api`. */
   private readonly apiBase;
@@ -1293,6 +1297,16 @@ export declare class ImportExportComponent {
     warnings: ImportError[];
   } | null;
   get stepIndex(): number;
+  /** The progress list: one entry per step with its number, label and whether it is the current / a finished step. */
+  get stepItems(): {
+    key: ImportStep;
+    num: number;
+    label: string;
+    current: boolean;
+    done: boolean;
+  }[];
+  /** What the persistent status region says once the import has finished (empty before). */
+  get resultAnnouncement(): string;
   get modalTitle(): string;
   openImport(): void;
   onSourceSelected(value: string): void;
@@ -1312,6 +1326,8 @@ export declare class ImportExportComponent {
   goToPreview(): void;
   get mappedFields(): ImportFieldDef[];
   get previewRows(): Record<string, string>[];
+  /** Moves focus to the result summary (the button that had it is gone), so keyboard and screen reader users land on the outcome. */
+  private focusResult;
   private stopImportTimer;
   submitImport(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<ImportExportComponent, never>;
@@ -2206,7 +2222,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" | "hidden" | "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. */
@@ -2590,7 +2606,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" | "auto" | "metadata">;
+  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>;
@@ -2844,7 +2860,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<1 | 2 | 3 | 4 | 5 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 4 | 2 | 3 | 5 | 6 | null>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
   /**
@@ -3869,7 +3885,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" | "secondary" | "danger" | "warning" | "link" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
+  readonly variant: import("@angular/core").InputSignal<"link" | "primary" | "secondary" | "danger" | "warning" | "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' }`). */
@@ -3915,7 +3931,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<"reset" | "submit" | "button">;
+  readonly type: import("@angular/core").InputSignal<"button" | "reset" | "submit">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
   readonly fullWidth: import("@angular/core").InputSignal<boolean>;
@@ -4347,7 +4363,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;
@@ -4402,7 +4418,7 @@ export declare class ImportSourceGridComponent {
   /** The `value` of the picked source (highlighted). `tile` only: the `card` appearance does not keep a selection. */
   readonly selected: import("@angular/core").InputSignal<string>;
   /** `tile`: the compact buttons of the import window. `card`: one `ui-detail-card` per source with its own select button (used on a page). */
-  readonly appearance: import("@angular/core").InputSignal<"card" | "tile">;
+  readonly appearance: import("@angular/core").InputSignal<"tile" | "card">;
   /** `card`: disables every card's button (for example while the page is saving). */
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   /** `card`: the text of each card's button. */
@@ -4711,7 +4727,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" | "text" | "email" | "tel" | "password" | "url">;
+  readonly type: import("@angular/core").InputSignal<"number" | "email" | "text" | "password" | "tel" | "url">;
   readonly maxlength: import("@angular/core").InputSignal<number | undefined>;
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
@@ -4720,7 +4736,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" | "search" | "none" | "text" | "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>;
@@ -4784,7 +4800,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" | "text" | "email" | "tel" | "password" | "url">;
+  protected readonly _inputType: import("@angular/core").Signal<"number" | "email" | "text" | "password" | "tel" | "url">;
   protected readonly _eyePath: string;
   protected readonly _eyeOffPath: string;
   protected readonly _showRequirements: import("@angular/core").Signal<boolean>;
@@ -4816,6 +4832,12 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   registerOnTouched(fn: () => void): void;
   setDisabledState(d: boolean): void;
   protected onInput(event: Event): void;
+  /**
+   * Position in `formatted` for a caret that was at `caret` in `raw`: right after the same number of digits (the leading country-code 1 of an
+   * 11-digit number is dropped by the formatting). When the character before the caret was a separator, the caret also moves over the separators
+   * that follow that digit, so deleting the first digit of a group does not throw the caret back in front of ") ".
+   */
+  private static _caretAfterDigits;
   /** Typed text -> number, or null when blank / not a finite number. */
   private static _parse;
   protected onFocus(): void;
@@ -6136,7 +6158,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<"badge" | "button">;
+  readonly variant: import("@angular/core").InputSignal<"button" | "badge">;
   readonly menuWidth: import("@angular/core").InputSignal<string>;
   /**
    * Accessible name. Set it when the trigger has no meaningful visible text. Applied as `aria-label` on the
@@ -6335,7 +6357,7 @@ export declare class FormSectionComponent {
   }, {}, never, ["*"], true, never>;
 }
 export declare class FormRowComponent {
-  readonly cols: import("@angular/core").InputSignal<1 | 2 | 3 | 4>;
+  readonly cols: import("@angular/core").InputSignal<1 | 4 | 2 | 3>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormRowComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FormRowComponent, "ui-form-row", never, {
     "cols": {
@@ -6352,7 +6374,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, {
@@ -7379,7 +7401,7 @@ export declare class ChipGroupComponent {
   readonly spaceAbove: import("@angular/core").InputSignal<"none" | "sm" | "md">;
   /** Space below the chip group. */
   readonly spaceBelow: import("@angular/core").InputSignal<"none" | "sm" | "md">;
-  protected readonly _gap: import("@angular/core").Signal<"6px" | "12px" | "8px">;
+  protected readonly _gap: import("@angular/core").Signal<"8px" | "6px" | "12px">;
   protected readonly _spaceAbove: import("@angular/core").Signal<"0" | "6px" | "12px">;
   protected readonly _spaceBelow: import("@angular/core").Signal<"0" | "6px" | "12px">;
   static ɵfac: i0.ɵɵFactoryDeclaration<ChipGroupComponent, never>;
@@ -9293,7 +9315,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<1 | 2 | 3 | 4 | 5 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 4 | 2 | 3 | 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. */
@@ -11449,6 +11471,8 @@ export interface SetupIntegration {
 export interface SetupWizardTexts {
   brand: string;
   stepperLabel: string;
+  /** Accessible name of the sidebar landmark (default "Setup steps"). Separate from `brand`, which may be empty or a logo-only heading. */
+  asideLabel: string;
   progress: (done: number, total: number) => string;
   back: string;
   skip: string;
@@ -11480,6 +11504,8 @@ export interface SetupWizardTexts {
   summarySkipped: string;
   summaryPending: string;
   areaCode: string;
+  /** Helper text under the area-code field; also what a disabled Connect button there is described by. */
+  areaCodeHint: string;
   connectIntegrationFailed: (title: string) => string;
 }
 /** An import step: the library import window (CSV / pasted data / competitor sources) with the step's own words around it. */
@@ -11519,6 +11545,17 @@ export interface SetupStep {
   save?: () => Observable<unknown> | Promise<unknown> | void;
   /** `custom` and `integrations`: false disables "Save & Continue" (read on every render, so it can follow signals). */
   canContinue?: () => boolean;
+  /**
+   * `custom`: id of an element in the app's own step content that explains why "Save & Continue" is off. While `canContinue` is false the button
+   * carries `aria-describedby="<id>"`, so a screen reader announces the reason with the disabled button (the attribute is absent otherwise).
+   */
+  continueHintId?: string;
+  /**
+   * `custom` and `integrations`: read AFTER the step's hook succeeded. When it returns true, "Save & Continue" still runs the hook and moves on, but the step is NOT
+   * marked complete: the progress count leaves it out, the side nav keeps it `upcoming` and the summary shows it as pending (not Done, not Skipped). Use it when the
+   * user has done their part but the result is not usable yet (e.g. a bank account that still has to be verified). Absent / false: the step is marked complete as usual.
+   */
+  continueWithoutComplete?: () => boolean;
   /** `custom`: text of the continue button (default "Save & Continue"). */
   saveLabel?: string;
   /**
@@ -11635,6 +11672,8 @@ export declare const SETUP_DONE_KEY = "done";
  *  - `kind: 'integrations'` steps list integrations with Connect / Reconnect — QuickBooks, Twilio, Slack, email and calendar come ready made
  *    (`SETUP_INTEGRATIONS` / `setupIntegrations(...)`); an app can add its own;
  *  - `kind: 'custom'` steps show the app's own content (`<ng-template uiSetupStep="key">`) with the step's `save` / `canContinue` hooks.
+ *    `continueHintId` points the disabled Save & Continue at the app's own hint element (`aria-describedby`); `continueWithoutComplete` lets a step continue
+ *    without being marked complete (progress and side nav leave it out, the summary shows it as Pending).
  *
  *   <ui-setup-wizard [steps]="steps()" [texts]="{ brand: 'My App Setup' }" (finished)="goToDashboard()" (exited)="goToDashboard()">
  *     <ng-template uiSetupStep="profile"> … </ng-template>
@@ -11652,6 +11691,8 @@ export declare class SetupWizardComponent {
   /** An import step with `requireImport` keeps Continue off until something came in (a CSV import or `markCompleted`, e.g. a live sync). */
   /** An integrations step with `requireConnection` keeps Save & Continue off until at least one of its integrations is connected (Skip stays the way past). */
   protected readonly connectBlocked: import("@angular/core").Signal<boolean>;
+  /** A custom step whose Save & Continue is off (`canContinue` false) and that names its hint element (`continueHintId`): the button is described by it. */
+  protected customHintId(): string;
   protected readonly importBlocked: import("@angular/core").Signal<boolean>;
   /** The step's own two parts (`splitLayout`) show as two tabs, one card at a time; this is the open one (it starts on the app's part on every visit). */
   protected readonly splitTab: import("@angular/core").WritableSignal<"main" | "extra">;
@@ -11675,6 +11716,7 @@ export declare class SetupWizardComponent {
   protected readonly stepTemplates: import("@angular/core").Signal<readonly SetupWizardStepDirective[]>;
   protected readonly headerTemplates: import("@angular/core").Signal<readonly SetupWizardStepHeaderDirective[]>;
   private readonly injector;
+  private readonly host;
   private readonly stepTitle;
   protected readonly importers: import("@angular/core").Signal<readonly ImportExportComponent[]>;
   protected readonly t: import("@angular/core").Signal<SetupWizardTexts>;
@@ -11733,6 +11775,8 @@ export declare class SetupWizardComponent {
   private markCompleted;
   /** "Save & Continue" of a custom or integrations step: runs the step's hook, then moves on. */
   saveAndContinue(): Promise<void>;
+  /** `continueWithoutComplete` of a step whose hook just succeeded. A hook that throws counts as false (the save already ran: it is not reported as a failed save). */
+  private withholdsMark;
   private run;
   /** The message to show for a failure: the server's own `{ message }` (or a thrown error's message); never the HTTP client's technical text. */
   private messageOf;