Data entry

apps/sam-design-system-site/src/app/app.component.html

@@ -230,6 +230,11 @@
                   File Input
                 </a>
               </li>
+              <li class="usa-sidenav__item">
+                <a [routerLink]="['documentation/components/formly-stepper']" routerLinkActive="usa-current">
+                  Stepper
+                </a>
+              </li>
             </ul>
           </li>
           <li class="margin-y-2">

libs/documentation/src/lib/components/formly-stepper/demos/advanced/custom-stepper.component.html

@@ -0,0 +1,132 @@
+<div class="grid-row">
+  <div class="desktop:grid-col-4 tablet-lg:grid-col-12 mobile-lg:grid-col-12 margin-bottom-3 margin-right-2">
+    <sds-side-toolbar [responsiveButtonText]="'Select Step'" (responsiveDialog)="onDialogOpen($event)">
+      <ng-template #toolbarContent>
+        <div class="sds-card" *ngIf="!!responseDialog">
+          <div class="sds-card__header sds-card__header--accent-cool grid-row">
+            <button id="cancelButton" class="sds-button sds-button--circular sds-button--white"
+              (click)="onCancelClicked()" aria-label="Cancel Select Step">
+              <sds-icon [icon]="'chevron-left'"></sds-icon>
+            </button>
+            <div class="margin-x-auto">
+              <h2 class="sds-card__title margin-top-1 margin-left-neg-2">Select Step</h2>
+            </div>
+          </div>
+        </div>
+
+        <div class="sds-card">
+          <div class="sds-card__body sds-card__body--accent-cool">
+
+            <ul class="usa-sidenav usa-sidenav--styled">
+              <li *ngFor="let step of stepTemplates; let i = index;" class="usa-sidenav__item" [ngClass]="{
+                  'usa-current':  selectedStep?.id === step.id
+                }">
+                <ng-container [ngTemplateOutlet]="sidenavItem" [ngTemplateOutletContext]="{$implicit: step}">
+                </ng-container>
+                <ng-container [ngTemplateOutlet]="subPanelTemplate" [ngTemplateOutletContext]="{$implicit:step}">
+                </ng-container>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </ng-template>
+    </sds-side-toolbar>
+  </div>
+  <div class="grid-col-fill">
+    <div [ngTemplateOutlet]="selectedStep ? selectedStep.content : null"></div>
+
+    <div class="grid-row grid-gap flex-justify-center margin-top-4">
+      <div class="margin-right-1">
+        <button class="usa-button sds-button--circle usa-button--base usa-button--big padding-2" sdsStepperPrevious
+          [attr.id]="id + '-prevBtn'">
+          <sds-icon [icon]="'chevron-left'"></sds-icon>
+        </button>
+
+        <label [attr.for]="id + '-prevBtn'" class="text-right usa-link cursor-pointer display-block margin-top-2">
+          Go Back
+        </label>
+      </div>
+
+      <div class="margin-right-1">
+        <button class="usa-button sds-button--circle usa-button--big usa-button--base padding-2"
+          [attr.id]="id + '-closeBtn'">
+          <sds-icon [icon]="'x'"></sds-icon>
+        </button>
+        <label [attr.for]="id + '-closeBtn'" class="text-center usa-link cursor-pointer display-block margin-top-2">
+          Close
+        </label>
+      </div>
+
+      <div class="margin-right-1">
+        <button class="usa-button sds-button--circle usa-button--big usa-button--base padding-2"
+          [attr.id]="id + '-helpBtn'">
+          <sds-icon [icon]="'question'"></sds-icon>
+        </button>
+        <label [attr.for]="id + '-helpBtn'" class="text-center usa-link cursor-pointer display-block margin-top-2">
+          Help
+        </label>
+      </div>
+
+      <div class="margin-right-1">
+        <button class="usa-button sds-button--circle usa-button--big usa-button--base padding-2" sdsStepperSave
+          [attr.id]="id + '-saveBtn'">
+          <sds-icon [icon]="'save'"></sds-icon>
+        </button>
+        <label [attr.for]="id + '-saveBtn'" class="text-center usa-link cursor-pointer display-block margin-top-2">
+          Save
+        </label>
+      </div>
+
+      <div class="margin-right-1">
+        <button #saveAndContinueBtn 
+          class="usa-button sds-button--circle usa-button--base usa-button--big usa-button--active padding-2"
+          sdsStepperNext [attr.id]="id + '-nextBtn'">
+          <sds-icon [icon]="'chevron-right'"></sds-icon>
+        </button>
+        <label [attr.for]="id + '-nextBtn'" class="text-left usa-link cursor-pointer display-block margin-top-2">
+          Save and Continue
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #subPanelTemplate let-panelItem>
+  <div *ngFor="let pItem of getDisplayedSteps(panelItem.children); let i = index;">
+    <ul class="usa-sidenav usa-sidenav--styled bg-base-lighter margin-x-0">
+      <li class="usa-sidenav__item  padding-left-3" [ngClass]="{'usa-current':  selectedStep?.id === pItem.id }">
+        <ng-container [ngTemplateOutlet]="sidenavItem" [ngTemplateOutletContext]="{$implicit: pItem}"></ng-container>
+      </li>
+    </ul>
+  </div>
+</ng-template>
+
+<ng-template #sidenavItem let-step>
+  <ng-container [ngSwitch]="step.editable">
+    <span *ngSwitchCase="false">
+      <span class="padding-x-2 padding-y-1 display-block text-bold">
+        {{step.text}}
+      </span>
+    </span>
+    <a *ngSwitchDefault href="javascript:void(0);" [sdsStepperNav]="step"
+      (click)="onSideNavClick()"
+      class="display-flex justify-content-space-between"
+      [ngClass]="{'usa-sidenav__item--disabled': step.disabled || (step.isReview && _isReviewAndSubmitDisabled)}"
+    >
+      <span>
+        {{step.text}}
+      </span>
+      <ng-container [ngTemplateOutlet]="sidenavIcon" [ngTemplateOutletContext]="{$implicit: step}"></ng-container>
+    </a>
+  </ng-container>
+</ng-template>
+
+<ng-template #sidenavIcon let-step>
+  <span>
+    <ng-container [ngSwitch]="step.valid">
+      <sds-icon *ngSwitchCase="true" [icon]="'check-circle-fill'" class="text-primary"></sds-icon>
+      <sds-icon *ngSwitchCase="false" [icon]="'slash-circle-fill'" class="text-error"></sds-icon>
+      <sds-icon *ngSwitchDefault [icon]="'circle'"></sds-icon>
+    </ng-container>
+  </span>
+</ng-template>

libs/documentation/src/lib/components/formly-stepper/demos/advanced/custom-stepper.component.ts

@@ -0,0 +1,35 @@
+import { Component } from "@angular/core";
+import { SdsDialogRef } from "@gsa-sam/components";
+import { SdsStepper } from '@gsa-sam/sam-formly';
+
+@Component({
+  selector: `custom-stepper-demo`,
+  templateUrl: `./custom-stepper.component.html`,
+  providers: [{provide: SdsStepper, useExisting: CustomStepperDemo}],
+  styles: [
+    '.justify-content-space-between {justify-content: space-between; }',
+    '.usa-sidenav__item--disabled {cursor: default; hover:none; opacity: 60%; pointer-events: none}',
+  ]
+})
+export class CustomStepperDemo extends SdsStepper {
+  responseDialog: SdsDialogRef<any>;
+
+  onDialogOpen($event) {
+    this.responseDialog = $event;
+  }
+
+  onCancelClicked() {
+    this.responseDialog.close();
+    this.responseDialog = undefined;
+  }
+
+  onSideNavClick() {
+    if (!this.responseDialog) {
+      return;
+    }
+    this.responseDialog.close();
+    this.responseDialog = undefined;
+  }
+
+
+}

libs/documentation/src/lib/components/formly-stepper/demos/advanced/stepper-advanced.component.html

@@ -0,0 +1,143 @@
+<button class="usa-button margin-bottom-3" (click)="toggleLinearMode()">Toggle Linear Mode</button>
+
+<div *ngIf="reinitializeComponents"></div>
+<custom-stepper-demo #stepper [queryParamKey]="'sdsAdvancedStepper'" [model]="model"
+  [stepValidityMap]="stepValidityMap" (stepChange)="onStepChange($event)"
+  [linear]="linear"
+  (saveData)="onSaveData($event)"
+  *ngIf="!reinitializeComponents"
+>
+
+  <sds-step id="welcome" text="Welcome" 
+    [stepTemplate]="gatherInformation"
+    [stepValidationFn]="stepMap.welcome.validationFn">
+  </sds-step>
+
+  <sds-step id="entityDetails" text="Entity Details" [editable]="false">
+    <sds-step id="registrationPurpose" text="Purpose of Registration"
+      [fieldConfig]="stepMap.registrationPurpose.fieldConfig">
+      <h1 sdsStepHeader class="margin-top-0">
+        Purpose of Registration
+        <hr>
+      </h1>
+    </sds-step>
+
+    <sds-step id="entityInformation" text="Entity Information"
+      [fieldConfig]="stepMap.enitityInformation.fieldConfig">
+      <h1 sdsStepHeader class="margin-top-0">
+        Enter Entity Information
+        <hr>
+      </h1>
+    </sds-step>
+
+    <sds-step id="reportDetails" text="Report Details"
+    [fieldConfig]="stepMap.reportDetails.fieldConfig">
+    <h1 sdsStepHeader class="margin-top-0">
+      Report Details
+      <hr>
+    </h1>
+  </sds-step>
+  </sds-step>
+
+
+  <sds-step id="taxPayerInfoForm" text="Taxpayer Details"
+    [fieldConfig]="stepMap.taxpayerInformation.fieldConfig">
+    <h1 sdsStepHeader class="margin-top-0">
+      Enter Taxpayer Details
+      <hr>
+    </h1>
+  </sds-step>
+
+
+  <sds-step id="addSubawardee" text="Add Subawardee"
+    [stepTemplate]="subawardeeStep" 
+    [stepValidationFn]="stepMap.subawardee.validationFn">
+  </sds-step>
+
+  <sds-step id="review" text="Review and Submit"
+    [isReview]="true"
+    [stepTemplate]="reviewTemplate" 
+    [stepValidationFn]="stepMap.review.validationFn">
+  </sds-step>
+
+</custom-stepper-demo>
+
+<!-- Custom Templates -->
+<ng-template #gatherInformation>
+  <h1 class="margin-top-0">
+    Gather Your Information
+  </h1>
+  <div class="sds-card">
+    <div class="sds-card__header">
+      <h2>
+        U.S. REGISTRANTS:
+      </h2>
+    </div>
+    <div class="sds-card__body">
+      <ul class="usa-list usa-list--unstyled">
+        <li class="margin-bottom-4">
+          <h3>Entity Details</h3>
+          <ul class="usa-list">
+            <li>Purpose of Registration</li>
+            <li>Legal Business Name</li>
+            <li>Physical Address</li>
+          </ul>
+        </li>
+        <li class="margin-bottom-4">
+          <h3>Taxpayer Information</h3>
+          <ul class="usa-list">
+            <li>Taxpayer Identification Number (TIN)</li>
+            <li>Taxpayer Name</li>
+          </ul>
+          <span class="display-block text-small">
+            Review your tax documents from the IRS (such as a 1099 or w2 form)
+            to find your Taxpayer information.
+          </span>
+        </li>
+        <li class="margin-bottom-4">
+          <h3>Banking Information</h3>
+          <ul class="usa-list">
+            <li>Routing Number</li>
+            <li>Account Number</li>
+          </ul>
+          <span class="display-block text-small">
+            Account type (checking or savings) to set up Electronic Funds Transfer (ETF)
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #subawardeeStep>
+  <ng-container *ngIf="!showLoading; else loading">
+    <h1 class="margin-top-0">
+      Subawardee Data
+      <hr>
+    </h1>
+    <subawardee-demo (subawardeeUpdate)="updateSubawardee($event)" [subawardees]="model.subawardee"></subawardee-demo>
+  </ng-container>
+  <ng-template #loading>
+    <div class="grid-container">
+      <div class="sds-load grid-row">
+        <div class="grid-col-5 sds-load__title"></div>
+        <div class="grid-col-auto sds-load__circle"></div>
+      </div>
+      <div class="sds-load grid-row">
+        <div class="tablet:grid-col-fill sds-load__content"></div>
+        <div class="tablet:grid-col-fill sds-load__content"></div>
+        <div class="tablet:grid-col-2 grid-col sds-load__element"></div>
+        <div class="tablet:grid-col-2 grid-col sds-load__element"></div>
+      </div>
+    </div>
+  </ng-template>
+</ng-template>
+
+<ng-template #reviewTemplate>
+  <h1 class="margin-top-0">
+    Review and Submit
+    <hr>
+  </h1>
+  <formly-form [fields]="[stepMap.review.fieldConfig]" [model]="model"></formly-form>
+  <subawardee-demo [displayInput]="false" [subawardees]="model.subawardee"></subawardee-demo>
+</ng-template>