@forgeroute/ui 0.4.35 → 0.4.36

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -4348,6 +4348,94 @@ export declare class ImportSourceGridComponent {
     "sourceSelect": "sourceSelect";
   }, never, never, true, never>;
 }
+/**
+ * One option the user can pick or connect: a coloured tile (a letter, or a library icon), a title, a short description and a small action button.
+ * The same card is used for the source cards of an import step, the provider cards of the setup wizard (calendar, email, tools) and a CRM
+ * live-sync option, so they all look and behave alike. Anything inside the tag is shown under the row (an expanding form, a result).
+ *
+ *   <ui-option-card title="Gmail" letter="G" color="#ea4335" description="Connect your Google account" actionLabel="Connect" (action)="connect()" />
+ *   <ui-option-card title="Follow Up Boss" letter="F" actionLabel="Sync live" (action)="open()"> <form>…</form> </ui-option-card>
+ *
+ * Inputs: `title` (required), `description`, `letter` (one character in the tile) or `icon` (a library icon name, used when there is no letter),
+ * `color` (tile background, default slate), `actionLabel` (no label = no button), `actionVariant` (default secondary), `actionAriaLabel`,
+ * `actionTestId`, `actionLoading`, `disabled`. Output: `action`.
+ */
+export declare class OptionCardComponent {
+  readonly title: import("@angular/core").InputSignal<string>;
+  readonly description: import("@angular/core").InputSignal<string>;
+  readonly letter: import("@angular/core").InputSignal<string>;
+  readonly icon: import("@angular/core").InputSignal<string>;
+  readonly color: import("@angular/core").InputSignal<string>;
+  readonly actionLabel: import("@angular/core").InputSignal<string>;
+  readonly actionVariant: import("@angular/core").InputSignal<"primary" | "secondary">;
+  readonly actionAriaLabel: import("@angular/core").InputSignal<string>;
+  readonly actionTestId: import("@angular/core").InputSignal<string>;
+  readonly actionLoading: import("@angular/core").InputSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** The action button was pressed. */
+  readonly action: import("@angular/core").OutputEmitterRef<void>;
+  protected iconD(): string | null;
+  static ɵfac: i0.ɵɵFactoryDeclaration<OptionCardComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<OptionCardComponent, "ui-option-card", never, {
+    "title": {
+      "alias": "title";
+      "required": true;
+      "isSignal": true;
+    };
+    "description": {
+      "alias": "description";
+      "required": false;
+      "isSignal": true;
+    };
+    "letter": {
+      "alias": "letter";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionLabel": {
+      "alias": "actionLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionVariant": {
+      "alias": "actionVariant";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionAriaLabel": {
+      "alias": "actionAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionTestId": {
+      "alias": "actionTestId";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionLoading": {
+      "alias": "actionLoading";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "action": "action";
+  }, never, ["*"], true, never>;
+}
 export interface ActiveConfirm {
   title: string;
   message: string;
@@ -11169,6 +11257,11 @@ export interface SetupIntegration {
   /** The "Connected — …" detail built from the status payload (default: just "Connected"). */
   connectedDetail?: (status: Record<string, unknown>) => string;
   connect: SetupIntegrationConnect;
+  /**
+   * Runs when the user presses Connect, before anything else (before the redirect to the provider, or before the area-code box opens): save what the
+   * step collected so the redirect does not lose it. Resolve to go on; throw / error to stop (the message is shown in the step's alert).
+   */
+  beforeConnect?: () => Observable<unknown> | Promise<unknown> | void;
 }
 /** Texts of the built-in controls; every one has an English default and every one can be replaced by the app. */
 export interface SetupWizardTexts {
@@ -11239,6 +11332,9 @@ export interface SetupStep {
    * template receives the wizard as `let-wizard` and calls `wizard.saveAndContinue()` (runs `save`, then moves on) and reads `wizard.busy()`.
    * Back / Skip stay the wizard's.
    */
+  /** Import / integrations steps with app content: show that content in its own card (titled `extraTitle`) beside the step card on a wide screen, stacked on a phone. */
+  splitLayout?: boolean;
+  extraTitle?: string;
   ownActions?: boolean;
   import?: SetupImportStep;
   integrations?: SetupIntegration[];
@@ -11343,6 +11439,10 @@ export declare class SetupWizardComponent {
   private readonly http;
   private readonly apiBase;
   private readonly destroyRef;
+  /** Phone layout: the step's Back / Skip / Continue buttons fill the width and stack (primary on top). */
+  protected readonly narrow: import("@angular/core").WritableSignal<boolean>;
+  /** A step with `splitLayout`: the app's own content gets its own card, side by side with the step card on a wide screen. */
+  protected readonly split: import("@angular/core").Signal<boolean>;
   /** The steps in walking order. A `done` summary step is appended automatically. */
   readonly steps: import("@angular/core").InputSignal<SetupStep[]>;
   /** Replaces any of the built-in texts. */
@@ -11355,6 +11455,8 @@ export declare class SetupWizardComponent {
   readonly stepChange: import("@angular/core").OutputEmitterRef<string>;
   protected readonly stepTemplates: import("@angular/core").Signal<readonly SetupWizardStepDirective[]>;
   protected readonly headerTemplates: import("@angular/core").Signal<readonly SetupWizardStepHeaderDirective[]>;
+  private readonly injector;
+  private readonly stepTitle;
   protected readonly importers: import("@angular/core").Signal<readonly ImportExportComponent[]>;
   protected readonly t: import("@angular/core").Signal<SetupWizardTexts>;
   protected readonly currentKey: import("@angular/core").WritableSignal<string>;
@@ -11416,6 +11518,7 @@ export declare class SetupWizardComponent {
   protected isConnected(i: SetupIntegration): boolean;
   protected detailFor(i: SetupIntegration): string;
   protected connect(i: SetupIntegration): void;
+  private startConnect;
   /** SVG path of a library icon (the buttons' leading / trailing glyph). */
   protected iconD(name: string): string;
   protected areaCodeLabelFor(i: SetupIntegration): string;
@@ -11492,6 +11595,8 @@ export interface EmailTemplateVariable {
   key: string;
   label: string;
   example: string;
+  /** Optional one-line explanation of what the variable is filled with; shown under the example. */
+  description?: string;
 }
 export interface EmailTemplateVariableGroup {
   name: string;