@daltonr/pathwrite-angular 0.4.0 → 0.6.0

package/src/shell.ts

@@ -153,7 +153,7 @@ export class PathShellFooterDirective {
         <ng-container *ngTemplateOutlet="customHeader.templateRef; context: { $implicit: s }"></ng-container>
       </ng-container>
       <ng-template #defaultHeader>
-        <div class="pw-shell__header" *ngIf="!hideProgress">
+        <div class="pw-shell__header" *ngIf="!hideProgress && (s.stepCount > 1 || s.nestingLevel > 0)">
           <div class="pw-shell__steps">
             <div
               *ngFor="let step of s.steps; let i = index"
@@ -179,9 +179,11 @@ export class PathShellFooterDirective {
         </ng-container>
       </div>
 
-      <!-- Validation messages -->
-      <ul class="pw-shell__validation" *ngIf="s.validationMessages.length > 0">
-        <li *ngFor="let msg of s.validationMessages" class="pw-shell__validation-item">{{ msg }}</li>
+      <!-- Validation messages — labeled by field name -->
+      <ul class="pw-shell__validation" *ngIf="s.hasAttemptedNext && fieldEntries(s).length > 0">
+        <li *ngFor="let entry of fieldEntries(s)" class="pw-shell__validation-item">
+          <span *ngIf="entry[0] !== '_'" class="pw-shell__validation-label">{{ formatFieldKey(entry[0]) }}</span>{{ entry[1] }}
+        </li>
       </ul>
 
       <!-- Footer — custom or default navigation buttons -->
@@ -191,8 +193,17 @@ export class PathShellFooterDirective {
       <ng-template #defaultFooter>
         <div class="pw-shell__footer">
           <div class="pw-shell__footer-left">
+            <!-- Form mode: Cancel on the left -->
             <button
-              *ngIf="!s.isFirstStep"
+              *ngIf="getResolvedFooterLayout(s) === 'form' && !hideCancel"
+              type="button"
+              class="pw-shell__btn pw-shell__btn--cancel"
+              [disabled]="s.isNavigating"
+              (click)="facade.cancel()"
+            >{{ cancelLabel }}</button>
+            <!-- Wizard mode: Back on the left -->
+            <button
+              *ngIf="getResolvedFooterLayout(s) === 'wizard' && !s.isFirstStep"
               type="button"
               class="pw-shell__btn pw-shell__btn--back"
               [disabled]="s.isNavigating || !s.canMovePrevious"
@@ -200,19 +211,21 @@ export class PathShellFooterDirective {
             >{{ backLabel }}</button>
           </div>
           <div class="pw-shell__footer-right">
+            <!-- Wizard mode: Cancel on the right -->
             <button
-              *ngIf="!hideCancel"
+              *ngIf="getResolvedFooterLayout(s) === 'wizard' && !hideCancel"
               type="button"
               class="pw-shell__btn pw-shell__btn--cancel"
               [disabled]="s.isNavigating"
               (click)="facade.cancel()"
             >{{ cancelLabel }}</button>
+            <!-- Both modes: Submit on the right -->
             <button
               type="button"
               class="pw-shell__btn pw-shell__btn--next"
-              [disabled]="s.isNavigating || !s.canMoveNext"
+              [disabled]="s.isNavigating"
               (click)="facade.next()"
-            >{{ s.isLastStep ? finishLabel : nextLabel }}</button>
+            >{{ s.isLastStep ? completeLabel : nextLabel }}</button>
           </div>
         </div>
       </ng-template>
@@ -227,17 +240,24 @@ export class PathShellComponent implements OnInit, OnDestroy {
   /** Start the path automatically on ngOnInit. Set to false to call doStart() manually. */
   @Input() autoStart = true;
   /** Label for the Back navigation button. */
-  @Input() backLabel = "Back";
+  @Input() backLabel = "Previous";
   /** Label for the Next navigation button. */
   @Input() nextLabel = "Next";
   /** Label for the Next button when on the last step. */
-  @Input() finishLabel = "Finish";
+  @Input() completeLabel = "Complete";
   /** Label for the Cancel button. */
   @Input() cancelLabel = "Cancel";
   /** Hide the Cancel button entirely. */
   @Input() hideCancel = false;
-  /** Hide the step progress indicator in the header. */
+  /** Hide the step progress indicator in the header. Also hidden automatically when the path has only one step. */
   @Input() hideProgress = false;
+  /**
+   * Footer 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.
+   */
+  @Input() footerLayout: "wizard" | "form" | "auto" = "auto";
 
   @Output() completed = new EventEmitter<PathData>();
   @Output() cancelled = new EventEmitter<PathData>();
@@ -287,4 +307,35 @@ export class PathShellComponent implements OnInit, OnDestroy {
     this.started = true;
     this.facade.start(this.path, this.initialData);
   }
+
+  /**
+   * Restart the active path from step 1 with the original `initialData`,
+   * without unmounting the shell. Call this via a `#shell` template reference:
+   *
+   * ```html
+   * <pw-shell #shell [path]="myPath" ...></pw-shell>
+   * <button (click)="shell.restart()">Try Again</button>
+   * ```
+   */
+  public restart(): Promise<void> {
+    return this.facade.restart(this.path, this.initialData);
+  }
+
+  /** Returns Object.entries(s.fieldMessages) for use in *ngFor. */
+  protected fieldEntries(s: PathSnapshot): [string, string][] {
+    return Object.entries(s.fieldMessages) as [string, string][];
+  }
+
+  /** Resolves "auto" footerLayout based on snapshot. Single-step top-level → "form", otherwise → "wizard". */
+  protected getResolvedFooterLayout(s: PathSnapshot): "wizard" | "form" {
+    return this.footerLayout === "auto"
+      ? (s.stepCount === 1 && s.nestingLevel === 0 ? "form" : "wizard")
+      : this.footerLayout;
+  }
+
+  /** Converts a camelCase or lowercase field key to a display label.
+   *  e.g. "firstName" → "First Name", "email" → "Email" */
+  protected formatFieldKey(key: string): string {
+    return key.replace(/([A-Z])/g, " $1").replace(/^./, c => c.toUpperCase()).trim();
+  }
 }