@daltonr/pathwrite-angular 0.11.0 → 0.12.0

package/README.md

@@ -113,6 +113,7 @@ export class MyWizardComponent { }
 | `setData(key, value)` | Update a single data field. Type-safe when `TData` is specified. |
 | `startSubPath(definition, data?, meta?)` | Push a sub-path. `meta` is returned to `onSubPathComplete`/`onSubPathCancel`. |
 | `adoptEngine(engine)` | Adopt an externally-managed `PathEngine` (e.g. from `restoreOrStart()`). |
+| `validate()` | Set `snapshot().hasValidated` without navigating. Triggers all inline field errors simultaneously. Used to validate all tabs in a nested shell at once. |
 
 ## `<pw-shell>` inputs/outputs
 
@@ -128,13 +129,16 @@ Step content is provided via `<ng-template pwStep="stepId">` directives inside `
 | `autoStart` | `boolean` | `true` | Start the path on `ngOnInit`. Ignored when `engine` is provided. |
 | `validationDisplay` | `"summary" \| "inline" \| "both"` | `"summary"` | Where `fieldErrors` are rendered. Use `"inline"` so step components render their own errors. |
 | `loadingLabel` | `string` | — | Label shown while the path is navigating. |
-| `footerLayout` | `"wizard" \| "form" \| "auto"` | `"auto"` | `"wizard"`: Back on left, Cancel+Submit on right. `"form"`: Cancel on left, Submit on right, no Back. `"auto"` picks `"form"` for single-step paths. |
+| `layout` | `"wizard" \| "form" \| "auto" \| "tabs"` | `"auto"` | `"wizard"`: Back on left, Cancel+Submit on right. `"form"`: Cancel on left, Submit on right, no Back. `"tabs"`: No progress header or footer — for tabbed interfaces. `"auto"` picks `"form"` for single-step paths. |
 | `hideProgress` | `boolean` | `false` | Hide the progress indicator. Also hidden automatically for single-step paths. |
 | `backLabel` | `string` | `"Previous"` | Previous button label. |
 | `nextLabel` | `string` | `"Next"` | Next button label. |
 | `completeLabel` | `string` | `"Complete"` | Complete button label (last step). |
 | `cancelLabel` | `string` | `"Cancel"` | Cancel button label. |
 | `hideCancel` | `boolean` | `false` | Hide the Cancel button. |
+| `services` | `unknown` | `null` | Arbitrary services object available to step components via `usePathContext<TData, TServices>().services`. |
+| `validateWhen` | `boolean` | `false` | When it becomes `true`, calls `validate()` on the engine. Bind to the outer snapshot's `hasAttemptedNext` when this shell is nested inside a step of an outer shell. |
+| `restoreKey` | `string` | — | When set, the shell automatically saves its full state (data + active step) into the nearest outer `<pw-shell>`'s data under this key on every change, and restores from it on remount. No-op on a top-level shell. |
 
 ### Outputs
 
@@ -144,21 +148,103 @@ Step content is provided via `<ng-template pwStep="stepId">` directives inside `
 | `(cancel)` | `PathData` | Emitted when the path is cancelled. |
 | `(event)` | `PathEvent` | Emitted for every engine event. |
 
-## `injectPath()`
+### Completion content
 
-`injectPath()` is the preferred API for step components and forms rendered inside `<pw-shell>`. It resolves the `PathFacade` from the nearest injector in the tree and returns a signal-based interface typed with an optional `TData` generic — no `providers: [PathFacade]` needed in step components.
+When `completionBehaviour` is `"stayOnFinal"` (the default), `<pw-shell>` renders a completion panel once `snapshot.status === "completed"`. Use the `[pwShellCompletion]` directive to replace the default "All done." panel with a custom template. The template receives the completed snapshot as its implicit context:
 
 ```typescript
-import { injectPath } from "@daltonr/pathwrite-angular";
+import { PathShellCompletionDirective } from "@daltonr/pathwrite-angular/shell";
+
+@Component({
+  imports: [PathShellComponent, PathStepDirective, PathShellCompletionDirective],
+  template: `
+    <pw-shell [path]="path" [initialData]="{ name: '' }">
+      <ng-template pwShellCompletion let-s>
+        <div class="done-panel">
+          <h2>Thanks, {{ s.data.name }}!</h2>
+          <button (click)="facade.restart()">Start over</button>
+        </div>
+      </ng-template>
+      <ng-template pwStep="details"><app-details-form /></ng-template>
+    </pw-shell>
+  `
+})
+export class MyWizardComponent {
+  protected readonly path = myPath;
+  protected readonly facade = usePathContext();
+}
+```
+
+## `usePathContext()`
+
+`usePathContext()` is the preferred API for step components and forms rendered inside `<pw-shell>`. It resolves the `PathFacade` from the nearest injector in the tree and returns a signal-based interface typed with optional `TData` and `TServices` generics — no `providers: [PathFacade]` needed in step components.
+
+```typescript
+import { usePathContext } from "@daltonr/pathwrite-angular";
 
 export class DetailsStepComponent {
-  protected readonly path = injectPath<ApplicationData>();
+  protected readonly path = usePathContext<ApplicationData>();
   // path.snapshot() — Signal<PathSnapshot | null>
   // path.setData(key, value) — type-safe with TData
   // path.next(), path.previous(), path.cancel(), etc.
+  // path.validate() — trigger inline errors on all steps simultaneously
+  // path.services — typed as TServices
 }
 ```
 
+### Passing services to step components
+
+Use the `[services]` input on `<pw-shell>` to provide shared dependencies (API clients, feature flags, etc.) to all step components without prop-drilling:
+
+```typescript
+// In the wizard host component:
+@Component({
+  template: `
+    <pw-shell [path]="path" [services]="svc">
+      <ng-template pwStep="details"><app-details /></ng-template>
+    </pw-shell>
+  `
+})
+export class WizardComponent {
+  protected readonly svc: HiringServices = { api: inject(HiringApi) };
+}
+
+// In a step component:
+export class DetailsStepComponent {
+  protected readonly path = usePathContext<HiringData, HiringServices>();
+  // this.path.services — typed as HiringServices
+}
+```
+
+### Nested shells and `validateWhen`
+
+When `<pw-shell>` is nested inside a step of an outer shell, bind `[validateWhen]` to the outer snapshot's `hasAttemptedNext`. This triggers `validate()` on the inner engine when the outer shell's user attempts to proceed, surfacing all inner field errors at once:
+
+```typescript
+@Component({
+  selector: "app-contact-step",
+  standalone: true,
+  imports: [PathShellComponent, PathStepDirective],
+  template: `
+    <pw-shell
+      [path]="contactTabsPath"
+      [layout]="'tabs'"
+      [validateWhen]="outerSnap()?.hasAttemptedNext ?? false"
+    >
+      <ng-template pwStep="name"><app-name-tab /></ng-template>
+      <ng-template pwStep="address"><app-address-tab /></ng-template>
+    </pw-shell>
+  `
+})
+export class ContactStepComponent {
+  protected readonly outerPath = usePathContext<ApplicationData>();
+  protected readonly outerSnap = this.outerPath.snapshot;
+  protected readonly contactTabsPath = contactTabsPath;
+}
+```
+
+> **Do NOT add `providers: [PathFacade]` to step components.** Doing so creates a second, disconnected `PathFacade` instance scoped to that component — `snapshot()` will always be `null` inside it. `usePathContext()` resolves the shell's instance automatically via DI; no extra provider needed.
+
 ## Further reading
 
 - [Angular getting started guide](../../docs/getting-started/frameworks/angular.md)
@@ -167,4 +253,4 @@ export class DetailsStepComponent {
 
 ---
 
-MIT — © 2026 Devjoy Ltd.
+© 2026 Devjoy Ltd. MIT License.

package/dist/index.css

@@ -77,6 +77,31 @@
   font-size: 14px;
 }
 
+/* ------------------------------------------------------------------ */
+/* Completion panel                                                    */
+/* ------------------------------------------------------------------ */
+.pw-shell__completion {
+  text-align: center;
+  padding: 40px 16px;
+}
+
+.pw-shell__completion-message {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--pw-color-text);
+  margin: 0 0 20px;
+}
+
+.pw-shell__completion-restart {
+  border: 1px solid var(--pw-color-btn-border);
+  background: var(--pw-color-btn-bg);
+  color: var(--pw-color-text);
+  padding: var(--pw-btn-padding);
+  border-radius: var(--pw-btn-radius);
+  cursor: pointer;
+  font-size: 14px;
+}
+
 /* ------------------------------------------------------------------ */
 /* Root progress — persistent top-level bar visible during sub-paths   */
 /* ------------------------------------------------------------------ */

package/dist/index.d.ts

@@ -22,6 +22,12 @@ export declare class PathFacade<TData extends PathData = PathData> implements On
     private readonly _events$;
     private _unsubscribeFromEngine;
     private readonly _stateSignal;
+    /**
+     * Arbitrary services object passed via `[services]` on `<pw-shell>`.
+     * Read it in step components via `usePathContext<TData, TServices>().services`.
+     * Set directly by `PathShellComponent` — do not set this manually.
+     */
+    services: unknown;
     readonly state$: Observable<PathSnapshot<TData> | null>;
     readonly events$: Observable<PathEvent>;
     /** Signal version of state$. Updates on every path state change. Requires Angular 16+. */
@@ -63,11 +69,15 @@ export declare class PathFacade<TData extends PathData = PathData> implements On
     /** Reset the current step's data to what it was when the step was entered.
      *  Useful for "Clear" or "Reset" buttons that undo changes within a step. */
     resetStep(): Promise<void>;
-    goToStep(stepId: string): Promise<void>;
+    goToStep(stepId: string, options?: {
+        validateOnLeave?: boolean;
+    }): Promise<void>;
     /** Jump to a step by ID, checking the current step's canMoveNext (forward) or
      *  canMovePrevious (backward) guard first. Navigation is blocked if the guard
      *  returns false. Throws if the step ID does not exist. */
-    goToStepChecked(stepId: string): Promise<void>;
+    goToStepChecked(stepId: string, options?: {
+        validateOnLeave?: boolean;
+    }): Promise<void>;
     validate(): void;
     snapshot(): PathSnapshot<TData> | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<PathFacade<any>, never>;
@@ -78,7 +88,7 @@ export declare class PathFacade<TData extends PathData = PathData> implements On
  * path state and strongly-typed navigation actions. Mirrors React's `usePathContext()`
  * return type for consistency across adapters.
  */
-export interface UsePathContextReturn<TData extends PathData = PathData> {
+export interface UsePathContextReturn<TData extends PathData = PathData, TServices = unknown> {
     /** Current path snapshot as a signal. Returns `null` when no path is active. */
     snapshot: Signal<PathSnapshot<TData> | null>;
     /** Start (or restart) a path. */
@@ -95,10 +105,14 @@ export interface UsePathContextReturn<TData extends PathData = PathData> {
     setData: <K extends string & keyof TData>(key: K, value: TData[K]) => Promise<void>;
     /** Reset the current step's data to what it was when the step was entered. */
     resetStep: () => Promise<void>;
-    /** Jump to a step by ID without checking guards. */
-    goToStep: (stepId: string) => Promise<void>;
+    /** Jump to a step by ID without checking guards. Pass `{ validateOnLeave: true }` to mark the departing step as attempted before navigating. */
+    goToStep: (stepId: string, options?: {
+        validateOnLeave?: boolean;
+    }) => Promise<void>;
     /** Jump to a step by ID, checking guards first. */
-    goToStepChecked: (stepId: string) => Promise<void>;
+    goToStepChecked: (stepId: string, options?: {
+        validateOnLeave?: boolean;
+    }) => Promise<void>;
     /**
      * Tears down any active path and immediately starts the given path fresh.
      * Use for "Start over" / retry flows.
@@ -108,6 +122,12 @@ export interface UsePathContextReturn<TData extends PathData = PathData> {
     retry: () => Promise<void>;
     /** Pause with intent to return, preserving all state. Emits `suspended`. */
     suspend: () => Promise<void>;
+    /**
+     * The services object passed to the nearest `<pw-shell>` via `[services]`.
+     * Typed as `TServices` — pass your services interface as the second generic:
+     * `usePathContext<MyData, MyServices>().services`.
+     */
+    services: TServices;
 }
 /**
  * Access the nearest `PathFacade`'s path instance for use in Angular step components.
@@ -145,7 +165,7 @@ export interface UsePathContextReturn<TData extends PathData = PathData> {
  *
  * @throws Error if PathFacade is not provided in the injector tree
  */
-export declare function usePathContext<TData extends PathData = PathData>(): UsePathContextReturn<TData>;
+export declare function usePathContext<TData extends PathData = PathData, TServices = unknown>(): UsePathContextReturn<TData, TServices>;
 /**
  * Minimal interface describing what syncFormGroup needs from an Angular
  * FormGroup. Typed as a duck interface so that @angular/forms is not a

package/dist/index.js

@@ -23,6 +23,12 @@ export class PathFacade {
         this._events$ = new Subject();
         this._unsubscribeFromEngine = () => { };
         this._stateSignal = signal(null);
+        /**
+         * Arbitrary services object passed via `[services]` on `<pw-shell>`.
+         * Read it in step components via `usePathContext<TData, TServices>().services`.
+         * Set directly by `PathShellComponent` — do not set this manually.
+         */
+        this.services = null;
         this.state$ = this._state$.asObservable();
         this.events$ = this._events$.asObservable();
         /** Signal version of state$. Updates on every path state change. Requires Angular 16+. */
@@ -61,8 +67,9 @@ export class PathFacade {
                 this._stateSignal.set(event.snapshot);
             }
             else if (event.type === "completed" || event.type === "cancelled") {
-                this._state$.next(null);
-                this._stateSignal.set(null);
+                const snap = engine.snapshot();
+                this._state$.next(snap);
+                this._stateSignal.set(snap);
             }
         });
     }
@@ -111,14 +118,14 @@ export class PathFacade {
     resetStep() {
         return this._engine.resetStep();
     }
-    goToStep(stepId) {
-        return this._engine.goToStep(stepId);
+    goToStep(stepId, options) {
+        return this._engine.goToStep(stepId, options);
     }
     /** Jump to a step by ID, checking the current step's canMoveNext (forward) or
      *  canMovePrevious (backward) guard first. Navigation is blocked if the guard
      *  returns false. Throws if the step ID does not exist. */
-    goToStepChecked(stepId) {
-        return this._engine.goToStepChecked(stepId);
+    goToStepChecked(stepId, options) {
+        return this._engine.goToStepChecked(stepId, options);
     }
     validate() {
         this._engine.validate();
@@ -183,11 +190,12 @@ export function usePathContext() {
         cancel: () => facade.cancel(),
         setData: (key, value) => facade.setData(key, value),
         resetStep: () => facade.resetStep(),
-        goToStep: (stepId) => facade.goToStep(stepId),
-        goToStepChecked: (stepId) => facade.goToStepChecked(stepId),
+        goToStep: (stepId, options) => facade.goToStep(stepId, options),
+        goToStepChecked: (stepId, options) => facade.goToStepChecked(stepId, options),
         restart: () => facade.restart(),
         retry: () => facade.retry(),
         suspend: () => facade.suspend(),
+        services: facade.services,
     };
 }
 /**

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/shell.d.ts

@@ -11,8 +11,12 @@ export interface PathShellActions {
     next: () => Promise<void>;
     previous: () => Promise<void>;
     cancel: () => Promise<void>;
-    goToStep: (stepId: string) => Promise<void>;
-    goToStepChecked: (stepId: string) => Promise<void>;
+    goToStep: (stepId: string, options?: {
+        validateOnLeave?: boolean;
+    }) => Promise<void>;
+    goToStepChecked: (stepId: string, options?: {
+        validateOnLeave?: boolean;
+    }) => Promise<void>;
     setData: (key: string, value: unknown) => Promise<void>;
     /** Restart the shell's current path with its current `initialData`. */
     restart: () => Promise<void>;
@@ -89,6 +93,30 @@ export declare class PathShellFooterDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<PathShellFooterDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<PathShellFooterDirective, "[pwShellFooter]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Replaces the default completion panel inside `<pw-shell>` when
+ * `snapshot.status === "completed"` (`completionBehaviour: "stayOnFinal"`).
+ * The template receives the current `PathSnapshot` as the implicit context.
+ *
+ * ```html
+ * <pw-shell [path]="myPath">
+ *   <ng-template pwShellCompletion let-s>
+ *     <my-completion-screen [data]="s.data" />
+ *   </ng-template>
+ *   <ng-template pwStep="details"><app-details-form /></ng-template>
+ * </pw-shell>
+ * ```
+ */
+export declare class PathShellCompletionDirective {
+    readonly templateRef: TemplateRef<{
+        $implicit: PathSnapshot;
+    }>;
+    constructor(templateRef: TemplateRef<{
+        $implicit: PathSnapshot;
+    }>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PathShellCompletionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PathShellCompletionDirective, "[pwShellCompletion]", never, {}, {}, never, never, true, never>;
+}
 /**
  * Default UI shell component. Renders a progress indicator, step content,
  * and navigation buttons.
@@ -118,8 +146,14 @@ export declare class PathShellComponent implements OnInit, OnChanges, OnDestroy
      * ```
      */
     engine?: PathEngine;
-    /** Initial data merged into the path engine on start. */
+    /** Initial data merged into the path engine on start. Used on first visit; overridden by stored snapshot when `restoreKey` is set. */
     initialData: PathData;
+    /**
+     * When set, this shell automatically saves its state into the nearest outer `pw-shell`'s
+     * data under this key on every change, and restores from that stored state on remount.
+     * No-op when used on a top-level shell with no outer `pw-shell` ancestor.
+     */
+    restoreKey?: string;
     /** Start the path automatically on ngOnInit. Set to false to call doStart() manually. */
     autoStart: boolean;
     /** Label for the Back navigation button. */
@@ -141,12 +175,19 @@ export declare class PathShellComponent implements OnInit, OnChanges, OnDestroy
     /** When true, calls `validate()` on the facade so all steps show inline errors simultaneously. Useful when this shell is nested inside a step of an outer shell: bind to the outer snapshot's `hasAttemptedNext`. */
     validateWhen: boolean;
     /**
-     * Footer layout mode:
+     * Arbitrary services object made available to all step components via
+     * `usePathContext<TData, TServices>().services`. Pass API clients, feature
+     * flags, or any shared dependency without prop-drilling through each step.
+     */
+    services: unknown;
+    /**
+     * Shell layout mode:
      * - "auto" (default): Uses "form" for single-step top-level paths, "wizard" otherwise.
-     * - "wizard": Back button on left, Cancel and Submit together on right.
-     * - "form": Cancel on left, Submit alone on right. Back button never shown.
+     * - "wizard": Progress header + Back button on left, Cancel and Submit together on right.
+     * - "form": Progress header + Cancel on left, Submit alone on right. Back button never shown.
+     * - "tabs": No progress header, no footer. Use for tabbed interfaces with a custom tab bar inside the step body.
      */
-    footerLayout: "wizard" | "form" | "auto";
+    layout: "wizard" | "form" | "auto" | "tabs";
     /**
      * Controls whether the shell renders its auto-generated field-error summary box.
      * - `"summary"` (default): Shell renders the labeled error list below the step body.
@@ -168,10 +209,13 @@ export declare class PathShellComponent implements OnInit, OnChanges, OnDestroy
     stepDirectives: QueryList<PathStepDirective>;
     customHeader?: PathShellHeaderDirective;
     customFooter?: PathShellFooterDirective;
+    customCompletion?: PathShellCompletionDirective;
     readonly facade: PathFacade<PathData>;
     /** The shell's own component-level injector. Passed to ngTemplateOutlet so that
      *  step components can resolve PathFacade (provided by this shell) via inject(). */
     protected readonly shellInjector: Injector;
+    /** Outer shell's PathFacade — present when this shell is nested inside another pw-shell. */
+    private readonly outerFacade;
     started: boolean;
     /** Navigation actions passed to custom `pwShellFooter` templates. */
     protected readonly shellActions: PathShellActions;
@@ -194,10 +238,12 @@ export declare class PathShellComponent implements OnInit, OnChanges, OnDestroy
     protected fieldEntries(s: PathSnapshot): [string, string][];
     /** Returns Object.entries(s.fieldWarnings) for use in *ngFor. */
     protected warningEntries(s: PathSnapshot): [string, string][];
-    /** Resolves "auto" footerLayout based on snapshot. Single-step top-level → "form", otherwise → "wizard". */
-    protected getResolvedFooterLayout(s: PathSnapshot): "wizard" | "form";
+    get effectiveHideProgress(): boolean;
+    get effectiveHideFooter(): boolean;
+    /** Resolves "auto"/"tabs" layout to "wizard" or "form" for footer button arrangement. */
+    protected getResolvedLayout(s: PathSnapshot): "wizard" | "form";
     protected errorPhaseMessage: typeof errorPhaseMessage;
     protected formatFieldKey: typeof formatFieldKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<PathShellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PathShellComponent, "pw-shell", never, { "path": { "alias": "path"; "required": false; }; "engine": { "alias": "engine"; "required": false; }; "initialData": { "alias": "initialData"; "required": false; }; "autoStart": { "alias": "autoStart"; "required": false; }; "backLabel": { "alias": "backLabel"; "required": false; }; "nextLabel": { "alias": "nextLabel"; "required": false; }; "completeLabel": { "alias": "completeLabel"; "required": false; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "hideCancel": { "alias": "hideCancel"; "required": false; }; "hideProgress": { "alias": "hideProgress"; "required": false; }; "hideFooter": { "alias": "hideFooter"; "required": false; }; "validateWhen": { "alias": "validateWhen"; "required": false; }; "footerLayout": { "alias": "footerLayout"; "required": false; }; "validationDisplay": { "alias": "validationDisplay"; "required": false; }; "progressLayout": { "alias": "progressLayout"; "required": false; }; }, { "complete": "complete"; "cancel": "cancel"; "event": "event"; }, ["customHeader", "customFooter", "stepDirectives"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PathShellComponent, "pw-shell", never, { "path": { "alias": "path"; "required": false; }; "engine": { "alias": "engine"; "required": false; }; "initialData": { "alias": "initialData"; "required": false; }; "restoreKey": { "alias": "restoreKey"; "required": false; }; "autoStart": { "alias": "autoStart"; "required": false; }; "backLabel": { "alias": "backLabel"; "required": false; }; "nextLabel": { "alias": "nextLabel"; "required": false; }; "completeLabel": { "alias": "completeLabel"; "required": false; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "hideCancel": { "alias": "hideCancel"; "required": false; }; "hideProgress": { "alias": "hideProgress"; "required": false; }; "hideFooter": { "alias": "hideFooter"; "required": false; }; "validateWhen": { "alias": "validateWhen"; "required": false; }; "services": { "alias": "services"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "validationDisplay": { "alias": "validationDisplay"; "required": false; }; "progressLayout": { "alias": "progressLayout"; "required": false; }; }, { "complete": "complete"; "cancel": "cancel"; "event": "event"; }, ["customHeader", "customFooter", "customCompletion", "stepDirectives"], never, true, never>;
 }