@daltonr/pathwrite-angular 0.1.4 → 0.2.0

package/README.md

@@ -28,11 +28,12 @@ export class MyComponent {
 
 ## PathFacade API
 
-### Observables
+### Observables and signals
 
 | Member | Type | Description |
 |--------|------|-------------|
 | `state$` | `Observable<PathSnapshot \| null>` | Current snapshot. `null` when no path is active. Backed by a `BehaviorSubject` — late subscribers receive the current value immediately. |
+| `stateSignal` | `Signal<PathSnapshot \| null>` | Signal version of `state$`. Same value, updated synchronously. Use directly in signal-based components without `toSignal()`. |
 | `events$` | `Observable<PathEvent>` | All engine events: `stateChanged`, `completed`, `cancelled`, `resumed`. |
 
 ### Methods
@@ -42,12 +43,106 @@ export class MyComponent {
 | `start(definition, data?)` | Start or re-start a path. |
 | `startSubPath(definition, data?)` | Push a sub-path. Requires an active path. |
 | `next()` | Advance one step. Completes the path on the last step. |
-| `previous()` | Go back one step. Cancels the path from the first step. |
+| `previous()` | Go back one step. No-op when already on the first step of a top-level path. |
 | `cancel()` | Cancel the active path (or sub-path). |
-| `setData(key, value)` | Update a single data value; emits `stateChanged`. |
-| `goToStep(stepId)` | Jump directly to a step by ID. |
+| `setData(key, value)` | Update a single data value; emits `stateChanged`. When `TData` is specified, `key` and `value` are type-checked against your data shape. |
+| `goToStep(stepId)` | Jump directly to a step by ID. Calls `onLeave`/`onEnter`; bypasses guards and `shouldSkip`. |
+| `goToStepChecked(stepId)` | Jump to a step by ID, checking `canMoveNext` (forward) or `canMovePrevious` (backward) first. Blocked if the guard returns false. |
 | `snapshot()` | Synchronous read of the current `PathSnapshot \| null`. |
 
+`PathFacade` accepts an optional generic `PathFacade<TData>`. Because Angular's DI cannot carry generics at runtime, narrow it with a cast at the injection site:
+
+```typescript
+protected readonly facade = inject(PathFacade) as PathFacade<MyData>;
+facade.snapshot()?.data.name; // typed as string (or whatever MyData defines)
+```
+
+---
+
+## Angular Forms integration — `syncFormGroup`
+
+`syncFormGroup` eliminates the boilerplate of manually wiring an Angular
+`FormGroup` to the path engine. Call it once (typically in `ngOnInit`) and every
+form value change is automatically propagated to the engine via `setData`, keeping
+`canMoveNext` guards reactive without any manual plumbing.
+
+```typescript
+import { PathFacade, syncFormGroup } from "@daltonr/pathwrite-angular";
+
+@Component({
+  providers: [PathFacade],
+  template: `
+    <form [formGroup]="form">
+      <input formControlName="name" />
+      <input formControlName="email" />
+    </form>
+    <button [disabled]="!(snapshot()?.canMoveNext)" (click)="facade.next()">Next</button>
+  `
+})
+export class DetailsStepComponent implements OnInit {
+  protected readonly facade  = inject(PathFacade);
+  protected readonly snapshot = toSignal(this.facade.state$, { initialValue: null });
+
+  protected readonly form = new FormGroup({
+    name:  new FormControl('', Validators.required),
+    email: new FormControl('', [Validators.required, Validators.email]),
+  });
+
+  async ngOnInit() {
+    await this.facade.start(myPath, { name: '', email: '' });
+    // Immediately syncs current form values and keeps them in sync on every change.
+    // Cleanup is automatic when the component is destroyed.
+    syncFormGroup(this.facade, this.form, inject(DestroyRef));
+  }
+}
+```
+
+The corresponding path definition can now use a clean `canMoveNext` guard with no
+manual sync code in the template:
+
+```typescript
+const myPath: PathDefinition = {
+  id: 'registration',
+  steps: [
+    {
+      id: 'details',
+      canMoveNext: (ctx) =>
+        typeof ctx.data.name  === 'string' && ctx.data.name.trim().length > 0 &&
+        typeof ctx.data.email === 'string' && ctx.data.email.includes('@'),
+    },
+    { id: 'review' },
+  ],
+};
+```
+
+### `syncFormGroup` signature
+
+```typescript
+function syncFormGroup(
+  facade:     PathFacade,
+  formGroup:  FormGroupLike,
+  destroyRef?: DestroyRef
+): () => void
+```
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `facade` | `PathFacade` | The facade to write values into. |
+| `formGroup` | `FormGroupLike` | Any Angular `FormGroup` (or any object satisfying the duck interface). |
+| `destroyRef` | `DestroyRef` *(optional)* | Pass `inject(DestroyRef)` to auto-unsubscribe on component destroy. |
+| **returns** | `() => void` | Cleanup function — call manually if not using `DestroyRef`. |
+
+#### Behaviour details
+
+- **Immediate sync** — current `getRawValue()` is written on the first call, so
+  guards evaluate against the real form state from the first snapshot.
+- **Disabled controls included** — uses `getRawValue()` (not `formGroup.value`)
+  so disabled controls are always synced.
+- **Safe before `start()`** — if no path is active when a change fires, the call
+  is silently ignored (no error).
+- **`FormGroupLike` duck interface** — `@angular/forms` is not a required import;
+  any object with `getRawValue()` and `valueChanges` works.
+
 ### Lifecycle
 
 `PathFacade` implements `OnDestroy`. When Angular destroys the providing component, `ngOnDestroy` is called automatically, which:
@@ -56,12 +151,28 @@ export class MyComponent {
 
 ## Using with signals (Angular 16+)
 
+`PathFacade` ships a pre-wired `stateSignal` so no manual `toSignal()` call is
+needed:
+
 ```typescript
-public readonly snapshot = toSignal(this.facade.state$, { initialValue: null });
+@Component({ providers: [PathFacade] })
+export class MyComponent {
+  protected readonly facade = inject(PathFacade);
+
+  // Use stateSignal directly — no toSignal() required
+  protected readonly snapshot = this.facade.stateSignal;
 
-// Derive computed values from the snapshot signal
-public readonly isActive    = computed(() => this.snapshot() !== null);
-public readonly currentStep = computed(() => this.snapshot()?.stepId ?? null);
+  // Derive computed values
+  public readonly isActive    = computed(() => this.snapshot() !== null);
+  public readonly currentStep = computed(() => this.snapshot()?.stepId ?? null);
+  public readonly canAdvance  = computed(() => this.snapshot()?.canMoveNext ?? false);
+}
+```
+
+If you prefer the Observable-based approach, `toSignal()` still works as before:
+
+```typescript
+public readonly snapshot = toSignal(this.facade.state$, { initialValue: null });
 ```
 
 ## Using with the async pipe
@@ -113,18 +224,40 @@ Each `<ng-template pwStep="<stepId>">` is rendered when the active step matches
 
 ### Context sharing
 
-`PathShellComponent` provides a `PathFacade` instance at the component level. Step content components can inject it directly without a separate provider:
+`PathShellComponent` provides a `PathFacade` instance in its own `providers` array
+and passes its component-level `Injector` to every step template via
+`ngTemplateOutletInjector`. Step components can therefore resolve the shell's
+`PathFacade` directly via `inject()` — no extra provider setup required:
 
 ```typescript
+// Step component — inject(PathFacade) resolves the shell's instance automatically
 @Component({
   template: `
-    <input [value]="snapshot()?.data?.name ?? ''"
+    <input [value]="snapshot()?.data?.['name'] ?? ''"
            (input)="facade.setData('name', $event.target.value)" />
   `
 })
 export class DetailsFormComponent {
-  protected readonly facade = inject(PathFacade);
-  protected readonly snapshot = toSignal(this.facade.state$, { initialValue: null });
+  protected readonly facade   = inject(PathFacade);
+  protected readonly snapshot = this.facade.stateSignal;
+}
+```
+
+The parent component hosting `<pw-shell>` does **not** need its own
+`PathFacade` provider. To access the facade from the parent, use `@ViewChild`:
+
+```typescript
+@Component({
+  imports: [PathShellComponent, PathStepDirective],
+  template: `
+    <pw-shell #shell [path]="myPath" (completed)="onDone($event)">
+      <ng-template pwStep="details"><app-details-form /></ng-template>
+    </pw-shell>
+  `
+})
+export class MyComponent {
+  @ViewChild('shell', { read: PathShellComponent }) shell!: PathShellComponent;
+  protected onDone(data: PathData) { console.log('done', data); }
 }
 ```
 

package/dist/index.css

@@ -6,11 +6,11 @@
  * Every visual value is a CSS custom property (--pw-*) so you can
  * theme the shell without overriding selectors.
  *
- * Usage:
- *   import "@daltonr/pathwrite-react/styles.css";    // React
- *   import "@daltonr/pathwrite-vue/styles.css";      // Vue
- *   // Angular: add "node_modules/@daltonr/pathwrite-angular/dist/index.css"
- *   //          to the styles array in angular.json
+ * Usage (React / Vue):
+ *   import "adapter-package/styles.css";
+ *
+ * Usage (Angular) — add to the styles array in angular.json:
+ *   "node_modules/@daltonr/pathwrite-angular/dist/index.css"
  */
 
 /* ------------------------------------------------------------------ */
@@ -170,6 +170,40 @@
   min-height: 120px;
 }
 
+/* ------------------------------------------------------------------ */
+/* Validation messages                                                */
+/* ------------------------------------------------------------------ */
+:root {
+  --pw-color-error: #dc2626;
+  --pw-color-error-bg: #fef2f2;
+  --pw-color-error-border: #fecaca;
+}
+
+.pw-shell__validation {
+  list-style: none;
+  margin: 0;
+  padding: 12px 16px;
+  background: var(--pw-color-error-bg);
+  border: 1px solid var(--pw-color-error-border);
+  border-radius: var(--pw-shell-radius);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pw-shell__validation-item {
+  font-size: 13px;
+  color: var(--pw-color-error);
+  padding-left: 16px;
+  position: relative;
+}
+
+.pw-shell__validation-item::before {
+  content: "•";
+  position: absolute;
+  left: 4px;
+}
+
 /* ------------------------------------------------------------------ */
 /* Footer — navigation buttons                                        */
 /* ------------------------------------------------------------------ */

package/dist/index.d.ts

@@ -1,13 +1,31 @@
-import { OnDestroy } from "@angular/core";
+import { OnDestroy, DestroyRef, Signal } from "@angular/core";
 import { Observable } from "rxjs";
 import { PathData, PathDefinition, PathEvent, PathSnapshot } from "@daltonr/pathwrite-core";
-export declare class PathFacade implements OnDestroy {
+import * as i0 from "@angular/core";
+/**
+ * Angular facade over PathEngine. Provide at component level for an isolated
+ * instance per component; Angular handles cleanup via ngOnDestroy.
+ *
+ * The optional generic `TData` narrows `state$`, `stateSignal`, `snapshot()`,
+ * and `setData()` to your data shape. It is a **type-level assertion** — no
+ * runtime validation is performed. Inject as `PathFacade` (untyped default)
+ * then cast:
+ *
+ * ```typescript
+ * const facade = inject(PathFacade) as PathFacade<MyData>;
+ * facade.snapshot()?.data.name; // typed as string (or whatever MyData defines)
+ * ```
+ */
+export declare class PathFacade<TData extends PathData = PathData> implements OnDestroy {
     private readonly engine;
     private readonly _state$;
     private readonly _events$;
     private readonly unsubscribeFromEngine;
-    readonly state$: Observable<PathSnapshot | null>;
+    private readonly _stateSignal;
+    readonly state$: Observable<PathSnapshot<TData> | null>;
     readonly events$: Observable<PathEvent>;
+    /** Signal version of state$. Updates on every path state change. Requires Angular 16+. */
+    readonly stateSignal: Signal<PathSnapshot<TData> | null>;
     constructor();
     ngOnDestroy(): void;
     start(path: PathDefinition, initialData?: PathData): Promise<void>;
@@ -15,7 +33,54 @@ export declare class PathFacade implements OnDestroy {
     next(): Promise<void>;
     previous(): Promise<void>;
     cancel(): Promise<void>;
-    setData(key: string, value: unknown): Promise<void>;
+    setData<K extends string & keyof TData>(key: K, value: TData[K]): Promise<void>;
     goToStep(stepId: string): Promise<void>;
-    snapshot(): PathSnapshot | null;
+    /** 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>;
+    snapshot(): PathSnapshot<TData> | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PathFacade<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PathFacade<any>>;
 }
+/**
+ * Minimal interface describing what syncFormGroup needs from an Angular
+ * FormGroup. Typed as a duck interface so that @angular/forms is not a
+ * required import — any object with getRawValue() and valueChanges works.
+ *
+ * Angular's FormGroup satisfies this interface automatically.
+ */
+export interface FormGroupLike {
+    /** Returns all control values including disabled ones (FormGroup.getRawValue()). */
+    getRawValue(): Record<string, unknown>;
+    /** Observable that emits whenever any control value changes. */
+    readonly valueChanges: Observable<unknown>;
+}
+/**
+ * Syncs every key of an Angular FormGroup to the path engine via setData.
+ *
+ * - Immediately writes getRawValue() to the facade so canMoveNext guards
+ *   evaluate against the current form state on the very first snapshot.
+ * - Subscribes to valueChanges and re-applies getRawValue() on every emission
+ *   so disabled controls are always included.
+ * - Guards against calling setData when no path is active, so it is safe to
+ *   call syncFormGroup before or after facade.start().
+ * - Returns a cleanup function that unsubscribes from the observable.
+ *   Pass a DestroyRef to wire cleanup automatically to the component lifecycle.
+ *
+ * @example
+ * ```typescript
+ * export class MyStepComponent implements OnInit {
+ *   private readonly facade = inject(PathFacade) as PathFacade<MyData>;
+ *   protected readonly form = new FormGroup({
+ *     name:  new FormControl('', Validators.required),
+ *     email: new FormControl(''),
+ *   });
+ *
+ *   ngOnInit() {
+ *     syncFormGroup(this.facade, this.form, inject(DestroyRef));
+ *   }
+ * }
+ * ```
+ */
+export declare function syncFormGroup<TData extends PathData = PathData>(facade: PathFacade<TData>, formGroup: FormGroupLike, destroyRef?: DestroyRef): () => void;

package/dist/index.js

@@ -1,102 +1,125 @@
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-import { Injectable } from "@angular/core";
+import { Injectable, signal } from "@angular/core";
 import { BehaviorSubject, Subject } from "rxjs";
 import { PathEngine } from "@daltonr/pathwrite-core";
-let PathFacade = (() => {
-    let _classDecorators = [Injectable()];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    var PathFacade = class {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            PathFacade = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        engine = new PathEngine();
-        _state$ = new BehaviorSubject(null);
-        _events$ = new Subject();
-        unsubscribeFromEngine;
-        state$ = this._state$.asObservable();
-        events$ = this._events$.asObservable();
-        constructor() {
-            this.unsubscribeFromEngine = this.engine.subscribe((event) => {
-                this._events$.next(event);
-                if (event.type === "stateChanged" || event.type === "resumed") {
-                    this._state$.next(event.snapshot);
-                }
-                else if (event.type === "completed" || event.type === "cancelled") {
-                    this._state$.next(null);
-                }
-            });
-        }
-        ngOnDestroy() {
-            this.unsubscribeFromEngine();
-            this._events$.complete();
-            this._state$.complete();
-        }
-        start(path, initialData = {}) {
-            return this.engine.start(path, initialData);
-        }
-        startSubPath(path, initialData = {}) {
-            return this.engine.startSubPath(path, initialData);
-        }
-        next() {
-            return this.engine.next();
-        }
-        previous() {
-            return this.engine.previous();
-        }
-        cancel() {
-            return this.engine.cancel();
-        }
-        setData(key, value) {
-            return this.engine.setData(key, value);
-        }
-        goToStep(stepId) {
-            return this.engine.goToStep(stepId);
-        }
-        snapshot() {
-            return this._state$.getValue();
+import * as i0 from "@angular/core";
+/**
+ * Angular facade over PathEngine. Provide at component level for an isolated
+ * instance per component; Angular handles cleanup via ngOnDestroy.
+ *
+ * The optional generic `TData` narrows `state$`, `stateSignal`, `snapshot()`,
+ * and `setData()` to your data shape. It is a **type-level assertion** — no
+ * runtime validation is performed. Inject as `PathFacade` (untyped default)
+ * then cast:
+ *
+ * ```typescript
+ * const facade = inject(PathFacade) as PathFacade<MyData>;
+ * facade.snapshot()?.data.name; // typed as string (or whatever MyData defines)
+ * ```
+ */
+export class PathFacade {
+    constructor() {
+        this.engine = new PathEngine();
+        this._state$ = new BehaviorSubject(null);
+        this._events$ = new Subject();
+        this._stateSignal = signal(null);
+        this.state$ = this._state$.asObservable();
+        this.events$ = this._events$.asObservable();
+        /** Signal version of state$. Updates on every path state change. Requires Angular 16+. */
+        this.stateSignal = this._stateSignal.asReadonly();
+        this.unsubscribeFromEngine = this.engine.subscribe((event) => {
+            this._events$.next(event);
+            if (event.type === "stateChanged" || event.type === "resumed") {
+                this._state$.next(event.snapshot);
+                this._stateSignal.set(event.snapshot);
+            }
+            else if (event.type === "completed" || event.type === "cancelled") {
+                this._state$.next(null);
+                this._stateSignal.set(null);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribeFromEngine();
+        this._events$.complete();
+        this._state$.complete();
+    }
+    start(path, initialData = {}) {
+        return this.engine.start(path, initialData);
+    }
+    startSubPath(path, initialData = {}) {
+        return this.engine.startSubPath(path, initialData);
+    }
+    next() {
+        return this.engine.next();
+    }
+    previous() {
+        return this.engine.previous();
+    }
+    cancel() {
+        return this.engine.cancel();
+    }
+    setData(key, value) {
+        return this.engine.setData(key, value);
+    }
+    goToStep(stepId) {
+        return this.engine.goToStep(stepId);
+    }
+    /** 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);
+    }
+    snapshot() {
+        return this._state$.getValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PathFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PathFacade }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PathFacade, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+/**
+ * Syncs every key of an Angular FormGroup to the path engine via setData.
+ *
+ * - Immediately writes getRawValue() to the facade so canMoveNext guards
+ *   evaluate against the current form state on the very first snapshot.
+ * - Subscribes to valueChanges and re-applies getRawValue() on every emission
+ *   so disabled controls are always included.
+ * - Guards against calling setData when no path is active, so it is safe to
+ *   call syncFormGroup before or after facade.start().
+ * - Returns a cleanup function that unsubscribes from the observable.
+ *   Pass a DestroyRef to wire cleanup automatically to the component lifecycle.
+ *
+ * @example
+ * ```typescript
+ * export class MyStepComponent implements OnInit {
+ *   private readonly facade = inject(PathFacade) as PathFacade<MyData>;
+ *   protected readonly form = new FormGroup({
+ *     name:  new FormControl('', Validators.required),
+ *     email: new FormControl(''),
+ *   });
+ *
+ *   ngOnInit() {
+ *     syncFormGroup(this.facade, this.form, inject(DestroyRef));
+ *   }
+ * }
+ * ```
+ */
+export function syncFormGroup(facade, formGroup, destroyRef) {
+    const baseFacade = facade;
+    function applyValues() {
+        if (baseFacade.snapshot() === null)
+            return; // no active path — nothing to sync
+        for (const [key, value] of Object.entries(formGroup.getRawValue())) {
+            void baseFacade.setData(key, value);
         }
-    };
-    return PathFacade = _classThis;
-})();
-export { PathFacade };
+    }
+    // Write current form values immediately so guards see the initial state.
+    applyValues();
+    const subscription = formGroup.valueChanges.subscribe(() => applyValues());
+    const cleanup = () => subscription.unsubscribe();
+    destroyRef?.onDestroy(cleanup);
+    return cleanup;
+}
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,eAAe,EAAc,OAAO,EAAE,MAAM,MAAM,CAAC;AAC5D,OAAO,EAGL,UAAU,EAGX,MAAM,yBAAyB,CAAC;IAGpB,UAAU;4BADtB,UAAU,EAAE;;;;;;;;YACb,6KAyDC;;;YAzDY,uDAAU;;QACJ,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAC1B,OAAO,GAAG,IAAI,eAAe,CAAsB,IAAI,CAAC,CAAC;QACzD,QAAQ,GAAG,IAAI,OAAO,EAAa,CAAC;QACpC,qBAAqB,CAAa;QAEnC,MAAM,GAAoC,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;QACtE,OAAO,GAA0B,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC;QAE9E;YACE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC3D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC1B,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;oBAC9D,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACpC,CAAC;qBAAM,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;oBACpE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC1B,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAEM,WAAW;YAChB,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QAC1B,CAAC;QAEM,KAAK,CAAC,IAAoB,EAAE,cAAwB,EAAE;YAC3D,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAC9C,CAAC;QAEM,YAAY,CAAC,IAAoB,EAAE,cAAwB,EAAE;YAClE,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACrD,CAAC;QAEM,IAAI;YACT,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QAC5B,CAAC;QAEM,QAAQ;YACb,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;QAChC,CAAC;QAEM,MAAM;YACX,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QAC9B,CAAC;QAEM,OAAO,CAAC,GAAW,EAAE,KAAc;YACxC,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC;QAEM,QAAQ,CAAC,MAAc;YAC5B,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACtC,CAAC;QAEM,QAAQ;YACb,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QACjC,CAAC;;;;SAxDU,UAAU"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/shell.d.ts

@@ -1,6 +1,7 @@
-import { TemplateRef, EventEmitter, QueryList, OnInit, OnDestroy } from "@angular/core";
+import { TemplateRef, EventEmitter, QueryList, OnInit, OnDestroy, Injector } from "@angular/core";
 import { PathData, PathDefinition, PathEvent } from "@daltonr/pathwrite-core";
 import { PathFacade } from "./index";
+import * as i0 from "@angular/core";
 /**
  * Structural directive that associates a template with a step ID.
  * Used inside `<pw-shell>` to define per-step content.
@@ -16,6 +17,8 @@ export declare class PathStepDirective {
     readonly templateRef: TemplateRef<unknown>;
     stepId: string;
     constructor(templateRef: TemplateRef<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PathStepDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PathStepDirective, "[pwStep]", never, { "stepId": { "alias": "pwStep"; "required": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Default UI shell component. Renders a progress indicator, step content,
@@ -29,23 +32,37 @@ export declare class PathStepDirective {
  * ```
  */
 export declare class PathShellComponent implements OnInit, OnDestroy {
+    /** The path definition to run. Required. */
     path: PathDefinition;
+    /** Initial data merged into the path engine on start. */
     initialData: PathData;
+    /** Start the path automatically on ngOnInit. Set to false to call doStart() manually. */
     autoStart: boolean;
+    /** Label for the Back navigation button. */
     backLabel: string;
+    /** Label for the Next navigation button. */
     nextLabel: string;
+    /** Label for the Next button when on the last step. */
     finishLabel: string;
+    /** Label for the Cancel button. */
     cancelLabel: string;
+    /** Hide the Cancel button entirely. */
     hideCancel: boolean;
+    /** Hide the step progress indicator in the header. */
     hideProgress: boolean;
     completed: EventEmitter<PathData>;
     cancelled: EventEmitter<PathData>;
     pathEvent: EventEmitter<PathEvent>;
     stepDirectives: QueryList<PathStepDirective>;
-    readonly facade: PathFacade;
+    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;
     started: boolean;
     private readonly destroy$;
     ngOnInit(): void;
     ngOnDestroy(): void;
     doStart(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PathShellComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PathShellComponent, "pw-shell", never, { "path": { "alias": "path"; "required": true; }; "initialData": { "alias": "initialData"; "required": false; }; "autoStart": { "alias": "autoStart"; "required": false; }; "backLabel": { "alias": "backLabel"; "required": false; }; "nextLabel": { "alias": "nextLabel"; "required": false; }; "finishLabel": { "alias": "finishLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "hideCancel": { "alias": "hideCancel"; "required": false; }; "hideProgress": { "alias": "hideProgress"; "required": false; }; }, { "completed": "completed"; "cancelled": "cancelled"; "pathEvent": "pathEvent"; }, ["stepDirectives"], never, true, never>;
 }