From 5b3a6099632da678aae324ba9fd3d49e8013852d Mon Sep 17 00:00:00 2001 From: shayan-roshan Date: Mon, 10 Jun 2024 11:05:18 -0500 Subject: [PATCH 1/7] stepper demo --- .../custom-stepper.component.html | 111 +++++ .../custom-stepper.component.ts | 58 +++ .../formly-stepper-advanced.component.html | 160 +++++++ .../formly-stepper-advanced.component.ts | 83 ++++ .../formly-stepper-advanced.module.ts | 47 +++ .../stepper-advanced.service.ts | 392 ++++++++++++++++++ .../subawardee.component.html | 172 ++++++++ .../subawardee.component.ts | 77 ++++ ...formly-stepper-basic-uneven.component.html | 52 +++ .../formly-stepper-basic-uneven.component.ts | 64 +++ .../formly-stepper-basic.component.html | 18 + .../formly-stepper-basic.component.ts | 196 +++++++++ .../formly-stepper-basic.module.ts | 51 +++ ...formly-stepper-introduction.component.html | 3 + .../formly-stepper-introduction.component.ts | 9 + .../formly-stepper-introduction.module.ts | 11 + ...formly-stepper-uswds-custom.component.html | 52 +++ .../formly-stepper-uswds-custom.component.ts | 66 +++ .../formly-stepper-uswds.component.html | 15 + .../formly-stepper-uswds.component.ts | 237 +++++++++++ .../formly-stepper-uswds.module.ts | 45 ++ .../formly-stepper/formly-stepper.stories.ts | 163 ++++++++ 22 files changed, 2082 insertions(+) create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.module.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/subawardee.component.html create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/subawardee.component.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.html create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.component.html create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.component.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.module.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.component.html create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.component.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.module.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds-custom.component.html create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds-custom.component.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.component.html create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.component.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.module.ts create mode 100644 libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html new file mode 100644 index 0000000000..46d0d40ff2 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html @@ -0,0 +1,111 @@ +
+
+ + +
+
+ +
+

Select Step

+
+
+
+ +
+
+
    +
  • + + + + +
    • +
+
+
+ + +
+ +
+
+
+
+
+
+
+ +
+
+ + + + +
+
+ + +
+
    +
  • + +
    • +
+
+ + + + + + + {{ step.text }} + + + + + {{ step.text }} + + + + + + + + + + + + + + + diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.ts new file mode 100644 index 0000000000..ff50cf4e7e --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.ts @@ -0,0 +1,58 @@ +import { Component, EventEmitter, Output } from '@angular/core'; +import { SdsDialogRef } from '@gsa-sam/components'; +import { SdsStepper } from '@gsa-sam/sam-formly'; +import { FormlyForm } from '@ngx-formly/core'; + +@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 { + @Output() + submittedData = new EventEmitter(); + + responseDialog: SdsDialogRef; + + onDialogOpen($event) { + this.responseDialog = $event; + } + + onCancelClicked() { + this.responseDialog.close(); + this.responseDialog = undefined; + } + + onSideNavClick() { + if (!this.responseDialog) { + return; + } + this.responseDialog.close(); + this.responseDialog = undefined; + } + + showReviewButton() { + const nextStep = this.flatSteps[this.selectedStepIndex + 1]; + + return nextStep && nextStep.isReview; + } + + showSubmitButton() { + const lastStepIndex = this.flatSteps.length - 1; + const isLastStep = this.selectedStepIndex == lastStepIndex; + + return isLastStep; + } + + showNextButton() { + return !this.showReviewButton() && !this.showSubmitButton(); + } + + submitClicked() { + this.submittedData.emit(this.model); + } +} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html new file mode 100644 index 0000000000..67687d147e --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html @@ -0,0 +1,160 @@ + + + + + + + + +

+ permission +
+

+ + + +

+ Purpose of Registration +
+

+ + + +

+ Enter Entity Information +
+

+ + + +

+ Report Details +
+

+ + + + +

+ Enter Taxpayer Details +
+

+ + + + + + + + + + + +

+ Gather Your Information +

+
+
+

+ U.S. REGISTRANTS: +

+
+
+
    +
  • +

    Entity Details

    +
      +
    • Purpose of Registration
      • +
    • Legal Business Name
      • +
    • Physical Address
      • +
    +
    • +
  • +

    Taxpayer Information

    +
      +
    • Taxpayer Identification Number (TIN)
      • +
    • Taxpayer Name
      • +
    + + Review your tax documents from the IRS (such as a 1099 or w2 form) to find your Taxpayer information. + +
    • +
  • +

    Banking Information

    +
      +
    • Routing Number
      • +
    • Account Number
      • +
    + + Account type (checking or savings) to set up Electronic Funds Transfer (ETF) + +
    • +
+
+
+ + + + +

+ Subawardee Data +
+

+ + + +
+
+
+
+
+
+
+
+
+
+
+ + + + +

+ Review and Submit +
+

+ + + + diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.ts new file mode 100644 index 0000000000..a22eeafed0 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.ts @@ -0,0 +1,83 @@ +import { Component } from '@angular/core'; +import { FormlyUtilsService, SdsStepper } from '@gsa-sam/sam-formly'; +import { StepperAdvancedService } from './stepper-advanced.service'; +import { FormlyForm } from '@ngx-formly/core'; + +@Component({ + selector: `stepper-advanced-demo`, + templateUrl: `./formly-stepper-advanced.component.html`, + providers: [StepperAdvancedService, SdsStepper], +}) +export class StepperAdvancedDemoComponent { + model = { subawardee: [], reportDetails: { report: { month: '03', year: '03' } } }; + validateStepsOnInit = true; + showLoading = false; + + stepMap = { + welcome: { + validationFn: () => true, + }, + permission: { + fieldConfig: this.stepperAdvancedService.getPermission(), + }, + registrationPurpose: { + fieldConfig: this.stepperAdvancedService.getRegistrationPurpose(), + }, + enitityInformation: { + fieldConfig: this.stepperAdvancedService.getEntityInformation(), + }, + reportDetails: { + fieldConfig: this.stepperAdvancedService.getReportDetails(), + }, + taxpayerInformation: { + fieldConfig: this.stepperAdvancedService.getTaxpayerForm(), + }, + subawardee: { + validationFn: (model: any) => { + return model.subawardee.length ? true : undefined; + }, + }, + review: { + fieldConfig: { + fieldGroup: [ + this.stepperAdvancedService.getRegistrationPurpose(), + this.stepperAdvancedService.getEntityInformation(), + this.stepperAdvancedService.getReportDetails(), + this.stepperAdvancedService.getTaxpayerForm(), + ], + }, + validationFn: () => true, + }, + }; + + currentStepId: string; + stepValidityMap = {}; + + linear = false; + reinitializeComponents = false; + constructor(private stepperAdvancedService: StepperAdvancedService) {} + + onStepChange($event) { + this.currentStepId = $event.id; + + if (this.currentStepId === 'review') { + FormlyUtilsService.setReadonlyMode(true, this.stepMap.review.fieldConfig.fieldGroup as any); + } + } + + onSaveData(data: { model: any; metadata: any }) { + console.log(data); + } + + updateSubawardee($event) { + this.model.subawardee = $event; + } + + toggleLinearMode() { + this.linear = !this.linear; + } + + handleSubmit(form: FormlyForm) { + console.log(form); + } +} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.module.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.module.ts new file mode 100644 index 0000000000..cd11aa8c65 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.module.ts @@ -0,0 +1,47 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { StepperAdvancedDemoComponent } from './formly-stepper-advanced.component'; +import { SdsFormlyModule, SdsStepperModule } from '@gsa-sam/sam-formly'; +import { AddSubawardeeDialogDemo, SubawardeeDemoComponent } from './subawardee.component'; +import { FormlyModule } from '@ngx-formly/core'; +import { CustomStepperDemo } from './custom-stepper.component'; +import { SdsSideToolbarModule } from '@gsa-sam/components'; +import { + NgxBootstrapIconsModule, + chevronLeft, + chevronRight, + slashCircleFill, + checkCircleFill, + circle, + question, + save, + x, +} from 'ngx-bootstrap-icons'; +import { IconModule } from '@gsa-sam/ngx-uswds-icons'; +import { RouterTestingModule } from '@angular/router/testing'; + +@NgModule({ + imports: [ + CommonModule, + SdsFormlyModule, + SdsStepperModule, + FormlyModule, + IconModule, + NgxBootstrapIconsModule.pick({ + chevronLeft, + chevronRight, + circle, + slashCircleFill, + checkCircleFill, + question, + save, + x, + }), + SdsSideToolbarModule, + RouterTestingModule, + ], + declarations: [StepperAdvancedDemoComponent, SubawardeeDemoComponent, AddSubawardeeDialogDemo, CustomStepperDemo], + exports: [StepperAdvancedDemoComponent, SubawardeeDemoComponent, AddSubawardeeDialogDemo, CustomStepperDemo], + bootstrap: [StepperAdvancedDemoComponent], +}) +export class FormlyStepperAdvancedModule {} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts new file mode 100644 index 0000000000..581b77e29e --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts @@ -0,0 +1,392 @@ +import { Injectable } from '@angular/core'; +import { SdsFormlyTypes } from '@gsa-sam/sam-formly'; +import { FormlyFieldConfig } from '@ngx-formly/core'; + +@Injectable() +export class StepperAdvancedService { + getPermission(): FormlyFieldConfig { + return { + key: 'permissions', + fieldGroupClassName: 'grid-row', + fieldGroup: [ + { + key: 'permissionsNeeded', + template: '

what permission


Select the specfific
', + }, + { + key: 'typeOfEntity', + className: 'desktop: grid-col-12 tablet: grid-col-12', + type: SdsFormlyTypes.RADIO, + templateOptions: { + label: 'What type of entity are you registering?', + hideOptions: true, + options: [ + { + label: 'Business Or Organization', + value: 'business', + }, + { + label: 'U.S. State Government', + value: 'stateGovt', + }, + { + label: 'U.S. Local Government', + value: 'localGovt', + }, + { + label: 'Tribal Government', + value: 'tribal', + }, + { + label: 'Foreign Government', + value: 'foreign', + }, + ], + }, + }, + { + key: 'contractOpp', + type: SdsFormlyTypes.MULTICHECKBOX, + className: 'desktop: grid-col-12 tablet: grid-col-12', + templateOptions: { + label: 'Contract Opportunities', + group: 'panel', + options: [ + { + key: 'read-public', + value: 'Read Public', + }, + { + key: 'read-sensitive', + value: 'Read sensitive', + }, + { + key: 'write', + value: 'Write public', + }, + { + key: 'write-sensitive', + value: 'Write sensitive', + }, + ], + }, + }, + ], + }; + } + + getRegistrationPurpose(): FormlyFieldConfig { + return { + key: 'purposeOfRegistration', + fieldGroup: [ + { + key: 'typeOfEntity', + type: SdsFormlyTypes.RADIO, + templateOptions: { + label: 'What type of entity are you registering?', + hideOptions: true, + options: [ + { + label: 'Business Or Organization', + value: 'business', + }, + { + label: 'U.S. State Government', + value: 'stateGovt', + }, + { + label: 'U.S. Local Government', + value: 'localGovt', + }, + { + label: 'Tribal Government', + value: 'tribal', + }, + { + label: 'Foreign Government', + value: 'foreign', + }, + ], + }, + }, + { + key: 'purposeOfRegistration', + type: SdsFormlyTypes.RADIO, + templateOptions: { + hideOptions: true, + label: 'Why are you registering this entity to do business with the U.S. government?', + options: [ + { + label: `I want to be able to bid on federal contracts or other procurement opportunities. + I also want to be able to apply for financial assistance programs`, + value: 'bidContracts', + }, + { + label: + 'I want to apply for federal assistance opportunities like grants, loans, and other financial assistance programs', + value: 'assistanceOpportunities', + }, + ], + }, + }, + ], + }; + } + + getEntityInformation(): FormlyFieldConfig { + return { + key: 'entityInformation', + fieldGroupClassName: 'grid-row grid-gap-4', + fieldGroup: [ + { + key: 'legalBusinessName', + type: SdsFormlyTypes.INPUT, + templateOptions: { + hideOptions: true, + label: 'Legal Business Name', + description: `If you are acting on behalf of a limited partnershil, LLC, or corporation, + your legal business name is the name you registered with your state filing office.`, + }, + }, + { + template: ` + Physical Address + + Your physical address is the street address of the primary office or other building where + your entity is located. A post office box may not be used as your physical address. + + `, + }, + { + className: 'grid-col-7', + key: 'country', + type: 'select', + templateOptions: { + label: 'Country', + hideOptional: true, + options: [ + { label: 'United States (USA)', value: 'united_states' }, + { label: 'Canada', value: 'canada' }, + ], + }, + }, + { + className: 'grid-col-7', + key: 'streetAddress', + type: 'input', + templateOptions: { + label: 'Street Address', + hideOptional: true, + }, + }, + { + className: 'grid-col-4', + type: 'input', + key: 'zip', + + templateOptions: { + hideOptional: true, + type: 'number', + label: 'Zip', + maxLength: 5, + minLength: 5, + min: 0, + }, + }, + { + className: 'grid-col-7', + type: 'input', + key: 'cityName', + templateOptions: { + label: 'City', + hideOptional: true, + }, + }, + { + className: 'grid-col-4', + key: 'state', + type: 'select', + hideExpression: (model) => model.country === 'canada', + templateOptions: { + label: 'State', + hideOptional: true, + options: [ + { id: '0', label: '--Select--', value: 'Select' }, + { id: '1', label: 'Alabama', value: 'Alabama' }, + { id: '2', label: 'Alaska', value: 'Alaska' }, + { id: '3', label: 'Arizona', value: 'Arizona' }, + { id: '4', label: 'Arkansas', value: 'Arkansas' }, + { id: '5', label: 'California', value: 'California' }, + { id: '6', label: 'Colorado', value: 'Colorado' }, + { id: '7', label: 'Connecticut', value: 'Connecticut' }, + { id: '8', label: 'Delaware', value: 'Delaware' }, + ], + }, + }, + ], + }; + } + + getTaxpayerForm(): FormlyFieldConfig { + return { + key: 'taxpayerDetails', + fieldGroup: [ + { + template: ` + + Please refer to your taxpayer documnets from IRS to find your taxpayer information + + `, + }, + { + type: 'input', + key: 'taxpayerName', + templateOptions: { + label: 'Taxpayer Name', + hideOptional: true, + }, + }, + { + type: 'input', + key: 'tinNumber', + templateOptions: { + label: 'TIN Number', + hideOptional: true, + }, + }, + ], + }; + } + + getSubawardeeForm() { + return { + key: 'subawardee', + fieldGroup: [ + { + templateOptions: { label: 'Input Details' }, + fieldGroup: [ + { + key: 'globalDunsNumber', + type: 'input', + templateOptions: { + label: 'Subawardee Number', + }, + }, + { + key: 'globalName', + type: 'input', + templateOptions: { + label: 'Subawardee Name', + }, + }, + { + key: 'date', + type: 'datepicker', + templateOptions: { + label: 'Subawardee Date', + placeholder: + 'eg: ' + + new Date().toLocaleString('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric', + }), + }, + }, + { + key: 'description', + type: 'textarea', + templateOptions: { + label: + 'Description of the overall purpose and expected outcomes, OR results of the contract, including significant deliverables and, if appropriate, associated units of measure. (Optional)', + }, + }, + { + key: 'subcontract', + type: 'radio', + templateOptions: { + label: + "As provided to you by your subcontractor, in your subcontractor's business or organization's preceding completed fiscal year, did its business or organization (the legal entity to which the DUNS number it provided belongs) receive (1) 80 percent or more of its annual gross revenues in U.S. federal contracts, subcontracts, loans, grants, subgrants, and/or cooperative agreements; and (2) $25,000,000 or more in annual gross revenues from U.S. federal contracts, subcontracts, loans, grants, subgrants, and/or cooperative agreements?*:", + options: [ + { + value: 'yes', + label: 'Yes', + }, + { + value: 'no', + label: 'No', + }, + ], + }, + }, + ], + }, + ], + }; + } + + getReportDetails() { + return { + key: 'reportDetails', + templateOptions: { + placeholder: 'Input Unique Entity ID', + }, + fieldGroup: [ + { + key: 'report', + fieldGroupClassName: 'grid-row grid-gap-4', + fieldGroup: [ + { + className: 'grid-col-5', + key: 'month', + type: 'select', + templateOptions: { + label: 'Report Month', + hideOptional: true, + options: [ + { label: 'Jan', value: '01' }, + { label: 'Feb', value: '02' }, + { label: 'Mar', value: '03' }, + { label: 'Apr', value: '04' }, + ], + required: true, + }, + }, + { + className: 'grid-col-4', + key: 'year', + type: 'select', + templateOptions: { + label: 'Report Year', + hideOptional: true, + options: [ + { label: '2001', value: '01' }, + { label: '2002', value: '02' }, + { label: '2003', value: '03' }, + { label: '2004', value: '04' }, + ], + required: true, + showError: false, + }, + }, + ], + }, + + { + className: 'desktop:grid-col-12 tablet:grid-col-12', + type: 'input', + key: 'title', + + templateOptions: { + label: 'Program or Project Title', + required: true, + showError: false, + }, + modelOptions: { + updateOn: 'blur' as 'blur', + }, + }, + ], + }; + } +} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/subawardee.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/subawardee.component.html new file mode 100644 index 0000000000..85588eea0f --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/subawardee.component.html @@ -0,0 +1,172 @@ +
+
+
+

Add Subawardee

+ +
+
+ +
+
+
+ +
+
+

No Subawardees

+
+
+

+ To add a subawardee, begin by entering a subawardee Unique Entity ID above. +

+
+
+ + +
+
+
+ +
+
+
+
Subaward Number:
+
543
+
+
+
+ +
+ +
+ +
+
DUNS
+
Unique Entity ID:
+
902930291
+
+
+
+ + +
+
+
+
Subaward Amount:
+
6811525.00
+
+
+
+ + +
+
+
+
Subaward Date:
+
Feb 20, 2019
+
+
+
+
+
+ +
+
+
+
Doing Business As Name:
+
Simplicity Corperation
+
+
+
+
+
Physical Address:
+
+
123456 George Washington Boulevard, Suite 4a
+
Ashburn, VA 20147 United States
+
+
+
+
+ +
+ +
+ +
+
SAM
+
Unique Entity ID:
+
1A23B45C67D89E
+
+
+
+
+
Principal Place of Performance:
+
+
1401 ROCKVILLE PIKE
+
ROCKVILLE, Virginia 10, USA
+
20852
+
+
+
+
+ + +
+
+
+
Primary Contract NAICS Code:
+
+
237310 -- Highway, Street, and Bridge Construction
+
+
+
+
+ + +
+
+
+
Organization / Business Type(s):
+
+ Contracts, SBA Certified Small Disadvantaged Business, SBA Certified 8(a) Program +
+
+
+
+
+ +
+
+

Desciption of Requirement

+
+ Preservation of adaptive immunity leads to HIV control upon treatment cessation. +
+ +
+ +

Executive Compensation Data Certification(s)

+ +
+
+
+ As provided to you by your subcontractor, in your subcontractor's business or organization's preceding + completed fiscal year, did its business or organization (the legal entity to which the DUNS number it + provided belongs) receive (1) 80 percent or more of its annual gross revenues in U.S. federal contracts, + subcontracts, loans, grants, subgrants, and/or cooperative agreements; and (2) $25,000,000 or more in annual + gross revenues from U.S. federal contracts, subcontracts, loans, grants, subgrants, and/or cooperative + agreements?*: +
+
No
+
+
+
+
+
diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/subawardee.component.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/subawardee.component.ts new file mode 100644 index 0000000000..89dd5919f9 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/subawardee.component.ts @@ -0,0 +1,77 @@ +import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core'; +import { SdsDialogRef, SdsDialogService, SDS_DIALOG_DATA } from '@gsa-sam/components'; +import { SdsFormlyDialogData } from '@gsa-sam/sam-formly'; +import { FormlyFieldConfig } from '@ngx-formly/core'; +import { StepperAdvancedService } from './stepper-advanced.service'; + +@Component({ + selector: `subawardee-demo`, + templateUrl: './subawardee.component.html', +}) +export class SubawardeeDemoComponent { + @Input() displayInput = true; + @Input() subawardees: any[] = []; + + @Output() subawardeeUpdate = new EventEmitter(); + + awardDialogRef: SdsDialogRef; + + constructor(public dialog: SdsDialogService) {} + + onAddSubawardee() { + this.awardDialogRef = this.dialog.open(AddSubawardeeDialogDemo, { + width: 'medium', + }); + + this.awardDialogRef.afterClosed().subscribe((result: any[]) => { + if (!result) { + return; + } + this.subawardees = [...this.subawardees, result]; + this.subawardeeUpdate.emit(this.subawardees); + }); + } +} + +@Component({ + selector: `add-subawardee-dialog-demo`, + template: ` +
+

Add Subawardee

+
+
+ +
+
+ + +
+ `, + providers: [StepperAdvancedService], +}) +export class AddSubawardeeDialogDemo implements OnInit { + subawardeeFields: FormlyFieldConfig[]; + model = {}; + + constructor( + public dialogRef: SdsDialogRef, + @Inject(SDS_DIALOG_DATA) public data: SdsFormlyDialogData, + private stepperAdvancedService: StepperAdvancedService + ) {} + + ngOnInit() { + this.subawardeeFields = [this.stepperAdvancedService.getSubawardeeForm()]; + } + + onFormSubmit() { + if (Object.keys(this.model).length) { + this.dialogRef.close(this.model); + } else { + this.cancel(); + } + } + + cancel() { + this.dialogRef.close(); + } +} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.html new file mode 100644 index 0000000000..cdbdb939e8 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.html @@ -0,0 +1,52 @@ + +

+ + + +

+ + +
+ +
+
+ + + +
+ +
+ + +
+ +
+ + +
+
diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.ts new file mode 100644 index 0000000000..95f473d2c1 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.ts @@ -0,0 +1,64 @@ +import { AfterContentInit, Component, Input } from '@angular/core'; +import { SdsStepComponent, SdsStepper } from '@gsa-sam/sam-formly'; + +@Component({ + selector: `sds-formly-stepper-basic-uneven`, + templateUrl: './formly-stepper-basic-uneven.component.html', + providers: [{ provide: SdsStepper, useExisting: USWDSCustomStepperComponent }], +}) +export class USWDSCustomStepperComponent extends SdsStepper implements AfterContentInit { + stepLabels = []; + currentStepIndex = 0; + + ngAfterContentInit() { + super.ngAfterContentInit(); + this.stepLabels = this.stepTemplates.map((stepTemplate, index) => { + if (stepTemplate.id === this.currentStepId) { + this.currentStepIndex = index; + } + + return { ...stepTemplate, label: stepTemplate.text }; + }); + } + + async changeStep(stepId: string, incrementor?: 1 | -1) { + const startingStep: SdsStepComponent = this.flatSteps.find((step) => step.id === stepId); + await super.changeStep(stepId, incrementor); + //NOTE: After this point, this.selectedStep is the step that is being rendered for the user, i.e. the next/prev step + + // Afterwards, update the indicator at the top to show the expected completion percent + let mainStepIndex = (this.stepTemplates.toArray() as Array).findIndex((step) => step === this.selectedStep); + // If sub-step + if (mainStepIndex === -1) { + let subStepIndex = -1; + this.stepTemplates.toArray().forEach((mainStep, index) => { + const tempIndex = this.getSubStepIndex(mainStep); + const selectedStepIsChild = tempIndex !== -1; + if (selectedStepIsChild) { + mainStepIndex = index; + subStepIndex = tempIndex; + } + }); + + if (incrementor === 1) { + this.stepLabels[mainStepIndex].completionPercent = startingStep.fieldConfig.templateOptions.completedValue ?? 0; + } else { + // Need to get previous step to know what it's completedValue is. + const currentFlatStepsIndex = this.flatSteps.findIndex((step) => step.id === this.selectedStep.id); + this.stepLabels[mainStepIndex].completionPercent = + this.flatSteps[currentFlatStepsIndex - 1].fieldConfig.templateOptions.completedValue ?? 0; + } + // If main step + } else { + this.stepLabels[mainStepIndex].completionPercent = 0; + } + this.currentStepIndex = mainStepIndex; + } + + /** + * Returns the index of the selected step within the given mainStep's children + */ + getSubStepIndex(mainStep: SdsStepComponent): number { + return mainStep.children.toArray().indexOf(this.selectedStep); + } +} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.component.html new file mode 100644 index 0000000000..8209084a3f --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.component.html @@ -0,0 +1,18 @@ +
+ + + + + + + + +
diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.component.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.component.ts new file mode 100644 index 0000000000..5bc1ee64aa --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.component.ts @@ -0,0 +1,196 @@ +import { Component } from '@angular/core'; +import { SdsFormlyTypes } from '@gsa-sam/sam-formly'; +import { FormlyFieldConfig } from '@ngx-formly/core'; + +@Component({ + selector: 'sds-formly-stepper-basic', + templateUrl: './formly-stepper-basic.component.html', +}) +export class FormlyStepperBasicComponent { + stepOne: FormlyFieldConfig = { + key: 'entityOne', + fieldGroup: [ + { + key: 'name', + type: 'input', + templateOptions: { + label: 'Entity Name', + placeholder: 'eg: Acme Corporation', + description: 'Enter the name of your entity.', + required: true, + }, + modelOptions: { + updateOn: 'blur', + }, + }, + { + className: 'desktop:grid-col-12 tablet:grid-col-12', + type: 'input', + key: 'title', + + templateOptions: { + label: 'Program or Project Title', + required: true, + showError: false, + }, + }, + ], + templateOptions: { + completedValue: 75, + }, + }; + stepOneSubstepOne: FormlyFieldConfig = { + key: 'entityOneSubstepOne', + fieldGroup: [ + { + key: 'name', + type: 'input', + templateOptions: { + label: 'Entity Name - Substep One', + placeholder: 'eg: Acme Corporation', + description: 'Enter the name of your entity.', + required: true, + }, + modelOptions: { + updateOn: 'blur', + }, + }, + { + className: 'desktop:grid-col-12 tablet:grid-col-12', + type: 'input', + key: 'title', + + templateOptions: { + label: 'Program or Project Title', + required: true, + showError: false, + }, + }, + ], + templateOptions: { + completedValue: 85, + }, + }; + stepOneSubstepTwo: FormlyFieldConfig = { + key: 'entityOneSubstepTwo', + fieldGroup: [ + { + key: 'name', + type: 'input', + templateOptions: { + label: 'Entity Name - Substep Two', + placeholder: 'eg: Acme Corporation', + description: 'Enter the name of your entity.', + required: true, + }, + modelOptions: { + updateOn: 'blur', + }, + }, + { + className: 'desktop:grid-col-12 tablet:grid-col-12', + type: 'input', + key: 'title', + + templateOptions: { + label: 'Program or Project Title', + required: true, + showError: false, + }, + }, + ], + templateOptions: { + completedValue: 100, + }, + }; + + stepTwo = { + key: 'purposeOfRegistration', + fieldGroup: [ + { + key: 'typeOfEntity', + type: SdsFormlyTypes.RADIO, + templateOptions: { + label: 'What type of entity are you registering?', + hideOptions: true, + options: [ + { + label: 'Business Or Organization', + value: 'business', + }, + { + label: 'U.S. State Government', + value: 'stateGovt', + }, + { + label: 'U.S. Local Government', + value: 'localGovt', + }, + { + label: 'Tribal Government', + value: 'tribal', + }, + { + label: 'Foreign Government', + value: 'foreign', + }, + ], + }, + }, + { + key: 'purposeOfRegistration', + type: SdsFormlyTypes.RADIO, + templateOptions: { + hideOptions: true, + label: 'Why are you registering this entity to do business with the U.S. government?', + options: [ + { + label: `Bid on federal contracts or other procurement opportunities.`, + value: 'bidContracts', + }, + { + label: 'Apply for federal assistance opportunities.', + value: 'assistanceOpportunities', + }, + ], + }, + }, + ], + }; + + stepThree = { + key: 'taxpayerDetails', + fieldGroup: [ + { + template: ` + + Please refer to your taxpayer documnets from IRS to find your taxpayer information + + `, + }, + { + type: 'input', + key: 'taxpayerName', + templateOptions: { + label: 'Taxpayer Name', + hideOptional: true, + }, + }, + { + type: 'input', + key: 'tinNumber', + templateOptions: { + label: 'TIN Number', + hideOptional: true, + }, + }, + ], + }; + + model = {}; + stepValidityMap = {}; + + onSaveData($event) { + console.log($event); + } +} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.module.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.module.ts new file mode 100644 index 0000000000..e4c6f27b42 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.module.ts @@ -0,0 +1,51 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { UsaStepIndicatorModule } from '@gsa-sam/ngx-uswds'; +import { SdsStepperModule } from '@gsa-sam/sam-formly'; +import { RouterTestingModule } from '@angular/router/testing'; +import { + NgxBootstrapIconsModule, + chevronLeft, + chevronRight, + slashCircleFill, + checkCircleFill, + circle, + question, + save, + x, +} from 'ngx-bootstrap-icons'; +import { IconModule } from '@gsa-sam/ngx-uswds-icons'; +import { SdsStepArrowModule } from '@gsa-sam/components'; +import { FormlyStepperBasicComponent } from './formly-stepper-basic.component'; +import { USWDSCustomStepperComponent } from './formly-stepper-basic-uneven.component'; +import { HttpClientModule } from '@angular/common/http'; +import { FormsModule } from '@angular/forms'; +//import { BrowserModule } from '@angular/platform-browser'; + +@NgModule({ + imports: [ + CommonModule, + UsaStepIndicatorModule, + SdsStepperModule, + NgxBootstrapIconsModule.pick({ + chevronLeft, + chevronRight, + circle, + slashCircleFill, + checkCircleFill, + question, + save, + x, + }), + IconModule, + SdsStepArrowModule, + //BrowserModule, + HttpClientModule, + FormsModule, + RouterTestingModule, + ], + declarations: [FormlyStepperBasicComponent, USWDSCustomStepperComponent], + bootstrap: [FormlyStepperBasicComponent], + exports: [FormlyStepperBasicComponent, USWDSCustomStepperComponent], +}) +export class FormlyStepperBasicModule {} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.component.html new file mode 100644 index 0000000000..4d4134c057 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.component.html @@ -0,0 +1,3 @@ +

+ Formly Stepper provides an Stepper behaviour using formly form. +

diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.component.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.component.ts new file mode 100644 index 0000000000..318941a807 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sds-formly-stepper-introduction', + templateUrl: './formly-stepper-introduction.component.html', +}) +export class FormlyStepperIntroductionComponent { + constructor() {} +} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.module.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.module.ts new file mode 100644 index 0000000000..2b1fede9d9 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-introduction/formly-stepper-introduction.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormlyStepperIntroductionComponent } from './formly-stepper-introduction.component'; + +@NgModule({ + imports: [CommonModule], + declarations: [FormlyStepperIntroductionComponent], + exports: [FormlyStepperIntroductionComponent], + bootstrap: [FormlyStepperIntroductionComponent], +}) +export class FormlyStepperIntroductionModule {} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds-custom.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds-custom.component.html new file mode 100644 index 0000000000..b5bb436cd2 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds-custom.component.html @@ -0,0 +1,52 @@ + +

+ + + +

+ + +
+ +
+
+ + + +
+ +
+ + +
+ +
+ + +
+
diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds-custom.component.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds-custom.component.ts new file mode 100644 index 0000000000..c5304f968c --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds-custom.component.ts @@ -0,0 +1,66 @@ +import { AfterContentInit, Component, Input } from '@angular/core'; +import { SdsStepComponent, SdsStepper } from '@gsa-sam/sam-formly'; + +@Component({ + selector: `uswds-custom-stepper-demo`, + templateUrl: './formly-stepper-uswds-custom.component.html', + providers: [{ provide: SdsStepper, useExisting: USWDSCustomStepperComponent }], +}) +export class USWDSCustomStepperComponent extends SdsStepper implements AfterContentInit { + stepLabels = []; + currentStepIndex = 0; + + ngAfterContentInit() { + super.ngAfterContentInit(); + this.stepLabels = this.stepTemplates.map((stepTemplate, index) => { + if (stepTemplate.id === this.currentStepId) { + this.currentStepIndex = index; + } + + return { ...stepTemplate, label: stepTemplate.text }; + }); + } + async changeStep(stepId: string, incrementor?: 1 | -1) { + await super.changeStep(stepId, incrementor); + + //NOTE: After this point, this.selectedStep is the step that is being rendered for the user, i.e. the next/prev step + + // Afterwards, update the indicator at the top to show the expected completion percent + let mainStepIndex = (this.stepTemplates.toArray() as Array).findIndex((step) => step === this.selectedStep); + // If sub-step + if (mainStepIndex === -1) { + let subStepIndex = -1; + this.stepTemplates.toArray().forEach((mainStep, index) => { + const tempIndex = this.getSubStepIndex(mainStep); + const selectedStepIsChild = tempIndex !== -1; + if (selectedStepIsChild) { + mainStepIndex = index; + subStepIndex = tempIndex; + } + }); + + /** + * With index of first child being 0, need to increment both the child's + * index and total length to ensure getting a valid percent. + * + * For example, with one sub-step step indicator should show 50% completion + * Without incrementing input values you'd get 0 / 1 = 0% + * With incrementing you'd get 1 / 2 = 50% + */ + this.stepLabels[mainStepIndex].completionPercent = Math.round( + ((subStepIndex + 1) / (this.stepTemplates.get(mainStepIndex).children.length + 1)) * 100 + ); + // If main step + } else { + this.stepLabels[mainStepIndex].completionPercent = 0; + } + this.currentStepIndex = mainStepIndex; + } + + /** + * Returns the index of the selected step within the given mainStep's children + */ + getSubStepIndex(mainStep: SdsStepComponent): number { + return mainStep.children.toArray().indexOf(this.selectedStep); + } +} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.component.html new file mode 100644 index 0000000000..668a69dbc9 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.component.html @@ -0,0 +1,15 @@ +
+ + + + + + + + + +
diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.component.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.component.ts new file mode 100644 index 0000000000..898d2e16f2 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.component.ts @@ -0,0 +1,237 @@ +import { Component } from '@angular/core'; +import { SdsFormlyTypes } from '@gsa-sam/sam-formly'; +import { FormlyFieldConfig } from '@ngx-formly/core'; + +@Component({ + selector: 'gsa-sam-uswds-stepper', + templateUrl: './formly-stepper-uswds.component.html', +}) +export class UswdsStepperComponent { + stepOne: FormlyFieldConfig = { + key: 'enitityOne', + fieldGroup: [ + { + key: 'stepIndicator', + type: 'step-arrow', + templateOptions: { + number: 1, + stepTitle: 'Entity Step one', + status: 'active', + }, + }, + { + key: 'name', + type: 'input', + templateOptions: { + label: 'Entity Name', + placeholder: 'eg: Acme Corporation', + description: 'Enter the name of your entity.', + required: true, + }, + modelOptions: { + updateOn: 'blur', + }, + }, + { + className: 'desktop:grid-col-12 tablet:grid-col-12', + type: 'input', + key: 'title', + + templateOptions: { + label: 'Program or Project Title', + required: true, + showError: false, + }, + }, + ], + }; + + stepOnePointTwoFive: FormlyFieldConfig = { + key: 'enitityOnePointTwoFive', + fieldGroup: [ + { + key: 'stepIndicator2', + type: 'step-arrow', + templateOptions: { + number: 2, + stepTitle: 'Entity Step two', + status: 'inactive', + }, + }, + { + key: 'name', + type: 'input', + templateOptions: { + label: 'Entity Name - PointTwoFive', + placeholder: 'eg: Acme Corporation', + description: 'Enter the name of your entity.', + required: true, + }, + modelOptions: { + updateOn: 'blur', + }, + }, + { + className: 'desktop:grid-col-12 tablet:grid-col-12', + type: 'input', + key: 'title', + + templateOptions: { + label: 'Program or Project Title', + required: true, + showError: false, + }, + }, + ], + }; + + stepOnePointFive: FormlyFieldConfig = { + key: 'enitityOnePointFive', + fieldGroup: [ + { + key: 'name', + type: 'input', + templateOptions: { + label: 'Entity Name - PointFive', + placeholder: 'eg: Acme Corporation', + description: 'Enter the name of your entity.', + required: true, + }, + modelOptions: { + updateOn: 'blur', + }, + }, + { + className: 'desktop:grid-col-12 tablet:grid-col-12', + type: 'input', + key: 'title', + + templateOptions: { + label: 'Program or Project Title', + required: true, + showError: false, + }, + }, + ], + }; + + stepOnePointSevenFive: FormlyFieldConfig = { + key: 'enitityOnePointSevenFive', + fieldGroup: [ + { + key: 'name', + type: 'input', + templateOptions: { + label: 'Entity Name - PointSevenFive', + placeholder: 'eg: Acme Corporation', + description: 'Enter the name of your entity.', + required: true, + }, + modelOptions: { + updateOn: 'blur', + }, + }, + { + className: 'desktop:grid-col-12 tablet:grid-col-12', + type: 'input', + key: 'title', + + templateOptions: { + label: 'Program or Project Title', + required: true, + showError: false, + }, + }, + ], + }; + + stepTwo = { + key: 'purposeOfRegistration', + fieldGroup: [ + { + key: 'typeOfEntity', + type: SdsFormlyTypes.RADIO, + templateOptions: { + label: 'What type of entity are you registering?', + hideOptions: true, + options: [ + { + label: 'Business Or Organization', + value: 'business', + }, + { + label: 'U.S. State Government', + value: 'stateGovt', + }, + { + label: 'U.S. Local Government', + value: 'localGovt', + }, + { + label: 'Tribal Government', + value: 'tribal', + }, + { + label: 'Foreign Government', + value: 'foreign', + }, + ], + }, + }, + { + key: 'purposeOfRegistration', + type: SdsFormlyTypes.RADIO, + templateOptions: { + hideOptions: true, + label: 'Why are you registering this entity to do business with the U.S. government?', + options: [ + { + label: `Bid on federal contracts or other procurement opportunities.`, + value: 'bidContracts', + }, + { + label: 'Apply for federal assistance opportunities.', + value: 'assistanceOpportunities', + }, + ], + }, + }, + ], + }; + + stepThree = { + key: 'taxpayerDetails', + fieldGroup: [ + { + template: ` + + Please refer to your taxpayer documnets from IRS to find your taxpayer information + + `, + }, + { + type: 'input', + key: 'taxpayerName', + templateOptions: { + label: 'Taxpayer Name', + hideOptional: true, + }, + }, + { + type: 'input', + key: 'tinNumber', + templateOptions: { + label: 'TIN Number', + hideOptional: true, + }, + }, + ], + }; + + model = {}; + stepValidityMap = {}; + + onSaveData($event) { + console.log($event); + } +} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.module.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.module.ts new file mode 100644 index 0000000000..c74bb3dda6 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds.module.ts @@ -0,0 +1,45 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { UswdsStepperComponent } from './formly-stepper-uswds.component'; +import { USWDSCustomStepperComponent } from './formly-stepper-uswds-custom.component'; +import { UsaStepIndicatorModule } from '@gsa-sam/ngx-uswds'; +import { SdsStepperModule } from '@gsa-sam/sam-formly'; +import { + NgxBootstrapIconsModule, + chevronLeft, + chevronRight, + slashCircleFill, + checkCircleFill, + circle, + question, + save, + x, +} from 'ngx-bootstrap-icons'; +import { IconModule } from '@gsa-sam/ngx-uswds-icons'; +import { SdsStepArrowModule } from '@gsa-sam/components'; +import { RouterTestingModule } from '@angular/router/testing'; + +@NgModule({ + declarations: [UswdsStepperComponent, USWDSCustomStepperComponent], + imports: [ + CommonModule, + UsaStepIndicatorModule, + SdsStepperModule, + NgxBootstrapIconsModule.pick({ + chevronLeft, + chevronRight, + circle, + slashCircleFill, + checkCircleFill, + question, + save, + x, + }), + IconModule, + SdsStepArrowModule, + RouterTestingModule, + ], + exports: [UswdsStepperComponent, USWDSCustomStepperComponent], + bootstrap: [UswdsStepperComponent], +}) +export class UswdsStepperModule {} diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts new file mode 100644 index 0000000000..70d76ca834 --- /dev/null +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts @@ -0,0 +1,163 @@ +import { CommonModule } from '@angular/common'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { SdsFormlyModule } from '@gsa-sam/sam-formly'; +import { FormlyModule } from '@ngx-formly/core'; +import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular'; +import { createCodePreviewTabData, generateConfig, generateStackblitzLink } from 'libs/documentation/src/sandbox/sandbox-utils'; +import { FormlyStepperIntroductionModule } from './formly-stepper-introduction/formly-stepper-introduction.module'; +import { FormlyStepperBasicModule } from './formly-stepper-basic/formly-stepper-basic.module'; +import { FormlyStepperAdvancedModule } from './formly-stepper-advanced/formly-stepper-advanced.module'; +import { UswdsStepperModule } from './formly-stepper-uswds/formly-stepper-uswds.module'; +import { importProvidersFrom } from '@angular/core'; + + +const disable = { + table: { + disable: true, + }, +}; +const props = { + table: { + category: 'template-options', + }, +}; + +export default { + title: 'Formly/Stepper', + decorators: [ + moduleMetadata({ + imports: [ + CommonModule, + ReactiveFormsModule, + SdsFormlyModule, + FormsModule, + FormlyStepperIntroductionModule, + FormlyStepperBasicModule, + FormlyStepperAdvancedModule, + UswdsStepperModule, + ], + }), + applicationConfig({ + providers: [provideAnimations(), importProvidersFrom(FormlyModule.forRoot())], + }), + ], + argTypes: { + label: props, + placeholder: props, + description: props, + required: props, + disabled: props, + tooltipText: props, + }, +} as Meta; + +export const Introduction: StoryObj = (args) => ({ + template: '', + props: args, +}); +Introduction.parameters = { + controls: { disable: true }, + actions: { disable: true }, + sdsCodePreview: { disable: true }, +}; + +export const Uneven: StoryObj = (args) => ({ + template: '', + props: args, +}); +Uneven.parameters = { + controls: { + disabled: true, + hideNoControlsWarning: true, + }, + actions: { disabled: true }, + preview: generateConfig( + 'storybook/formly/formly-stepper/formly-stepper-basic', + 'FormlyStepperBasicModule', + 'sds-formly-stepper-basic', + [ + createCodePreviewTabData( + 'storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.ts', + 'ts', + false + ), + createCodePreviewTabData( + 'storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic-uneven.component.html', + 'html', + false + ), + ] + ), + stackblitzLink: generateStackblitzLink('formly-stepper', 'basic'), +}; + +export const USWDS: StoryObj = (args) => ({ + template: '', + props: args, +}); +USWDS.parameters = { + controls: { + disabled: true, + hideNoControlsWarning: true, + }, + actions: { disabled: true }, + preview: generateConfig( + 'storybook/formly/formly-stepper/formly-stepper-uswds', + 'UswdsStepperModule', + 'gsa-sam-uswds-stepper', + [ + createCodePreviewTabData( + 'storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds-custom.component.ts', + 'ts', + false + ), + createCodePreviewTabData( + 'storybook/formly/formly-stepper/formly-stepper-uswds/formly-stepper-uswds-custom.component.html', + 'html', + false + ), + ] + ), + stackblitzLink: generateStackblitzLink('formly-stepper', 'uswds'), +}; + +export const Advanced: StoryObj = (args) => ({ + template: '', + props: args, +}); +Advanced.parameters = { + controls: { + disabled: true, + hideNoControlsWarning: true, + }, + actions: { disabled: true }, + preview: generateConfig( + 'storybook/formly/formly-stepper/formly-stepper-advanced', + 'FormlyStepperAdvancedModule', + 'stepper-advanced-demo', + [ + createCodePreviewTabData( + 'storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.ts', + 'ts', + false + ), + createCodePreviewTabData( + 'storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html', + 'html', + false + ), + createCodePreviewTabData( + 'storybook/formly/formly-stepper/formly-stepper-advanced/subawardee.component.ts', + 'ts', + false + ), + createCodePreviewTabData( + 'storybook/formly/formly-stepper/formly-stepper-advanced/subawardee.component.html', + 'html', + false + ), + ] + ), + stackblitzLink: generateStackblitzLink('formly-stepper', 'advanced'), +}; From 2d067efa42662dc74a79279bd0875747644ac624 Mon Sep 17 00:00:00 2001 From: shayan-roshan Date: Mon, 10 Jun 2024 11:37:54 -0500 Subject: [PATCH 2/7] lint fix --- .../formly-stepper-advanced/custom-stepper.component.html | 7 ++++++- .../formly/formly-stepper/formly-stepper.stories.ts | 7 +++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html index 46d0d40ff2..f0861bc901 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html @@ -61,7 +61,12 @@

Select Step

- diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts index 70d76ca834..4711e50662 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts @@ -4,14 +4,17 @@ import { provideAnimations } from '@angular/platform-browser/animations'; import { SdsFormlyModule } from '@gsa-sam/sam-formly'; import { FormlyModule } from '@ngx-formly/core'; import { moduleMetadata, Meta, StoryObj, applicationConfig } from '@storybook/angular'; -import { createCodePreviewTabData, generateConfig, generateStackblitzLink } from 'libs/documentation/src/sandbox/sandbox-utils'; +import { + createCodePreviewTabData, + generateConfig, + generateStackblitzLink, +} from 'libs/documentation/src/sandbox/sandbox-utils'; import { FormlyStepperIntroductionModule } from './formly-stepper-introduction/formly-stepper-introduction.module'; import { FormlyStepperBasicModule } from './formly-stepper-basic/formly-stepper-basic.module'; import { FormlyStepperAdvancedModule } from './formly-stepper-advanced/formly-stepper-advanced.module'; import { UswdsStepperModule } from './formly-stepper-uswds/formly-stepper-uswds.module'; import { importProvidersFrom } from '@angular/core'; - const disable = { table: { disable: true, From bcdd8a4011ac396b68e8760fca23184070d1a170 Mon Sep 17 00:00:00 2001 From: shayan-roshan Date: Mon, 10 Jun 2024 12:14:35 -0500 Subject: [PATCH 3/7] removed comment --- .../formly-stepper-basic.module.ts | 2 -- .../formly-stepper/formly-stepper.stories.ts | 19 +++---------------- 2 files changed, 3 insertions(+), 18 deletions(-) diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.module.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.module.ts index e4c6f27b42..59c9552d51 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.module.ts +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-basic/formly-stepper-basic.module.ts @@ -20,7 +20,6 @@ import { FormlyStepperBasicComponent } from './formly-stepper-basic.component'; import { USWDSCustomStepperComponent } from './formly-stepper-basic-uneven.component'; import { HttpClientModule } from '@angular/common/http'; import { FormsModule } from '@angular/forms'; -//import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ @@ -39,7 +38,6 @@ import { FormsModule } from '@angular/forms'; }), IconModule, SdsStepArrowModule, - //BrowserModule, HttpClientModule, FormsModule, RouterTestingModule, diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts index 4711e50662..34fd525fe0 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts @@ -15,11 +15,6 @@ import { FormlyStepperAdvancedModule } from './formly-stepper-advanced/formly-st import { UswdsStepperModule } from './formly-stepper-uswds/formly-stepper-uswds.module'; import { importProvidersFrom } from '@angular/core'; -const disable = { - table: { - disable: true, - }, -}; const props = { table: { category: 'template-options', @@ -45,14 +40,6 @@ export default { providers: [provideAnimations(), importProvidersFrom(FormlyModule.forRoot())], }), ], - argTypes: { - label: props, - placeholder: props, - description: props, - required: props, - disabled: props, - tooltipText: props, - }, } as Meta; export const Introduction: StoryObj = (args) => ({ @@ -71,7 +58,7 @@ export const Uneven: StoryObj = (args) => ({ }); Uneven.parameters = { controls: { - disabled: true, + disable: true, hideNoControlsWarning: true, }, actions: { disabled: true }, @@ -101,7 +88,7 @@ export const USWDS: StoryObj = (args) => ({ }); USWDS.parameters = { controls: { - disabled: true, + disable: true, hideNoControlsWarning: true, }, actions: { disabled: true }, @@ -131,7 +118,7 @@ export const Advanced: StoryObj = (args) => ({ }); Advanced.parameters = { controls: { - disabled: true, + disable: true, hideNoControlsWarning: true, }, actions: { disabled: true }, From 1fdc4af21cb40b238cfb7781d3d662fb2216a9fd Mon Sep 17 00:00:00 2001 From: shayan-roshan Date: Mon, 10 Jun 2024 13:15:11 -0500 Subject: [PATCH 4/7] update actions key --- .../formly/formly-stepper/formly-stepper.stories.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts index 34fd525fe0..0337e60e0d 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper.stories.ts @@ -61,7 +61,7 @@ Uneven.parameters = { disable: true, hideNoControlsWarning: true, }, - actions: { disabled: true }, + actions: { disable: true }, preview: generateConfig( 'storybook/formly/formly-stepper/formly-stepper-basic', 'FormlyStepperBasicModule', @@ -91,7 +91,7 @@ USWDS.parameters = { disable: true, hideNoControlsWarning: true, }, - actions: { disabled: true }, + actions: { disable: true }, preview: generateConfig( 'storybook/formly/formly-stepper/formly-stepper-uswds', 'UswdsStepperModule', @@ -121,7 +121,7 @@ Advanced.parameters = { disable: true, hideNoControlsWarning: true, }, - actions: { disabled: true }, + actions: { disable: true }, preview: generateConfig( 'storybook/formly/formly-stepper/formly-stepper-advanced', 'FormlyStepperAdvancedModule', From 732ba0952b84da013377edddb3c68683270b34c8 Mon Sep 17 00:00:00 2001 From: shayan-roshan Date: Tue, 23 Jul 2024 12:30:24 -0500 Subject: [PATCH 5/7] fix formly label and 'X' Icon --- .../custom-stepper.component.html | 4 ++-- .../custom-stepper.component.ts | 1 + .../formly-stepper-advanced.component.html | 2 +- .../formly-stepper-advanced.module.ts | 4 ++-- .../stepper-advanced.service.ts | 10 +++++----- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html index f0861bc901..c4ee7efc8b 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html @@ -44,11 +44,11 @@

Select Step

-
+
diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.ts index ff50cf4e7e..5911af9276 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.ts +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.ts @@ -10,6 +10,7 @@ import { FormlyForm } from '@ngx-formly/core'; styles: [ '.justify-content-space-between {justify-content: space-between; }', '.usa-sidenav__item--disabled {cursor: default; hover:none; opacity: 60%; pointer-events: none}', + '.hr {width: 100%; }', ], }) export class CustomStepperDemo extends SdsStepper { diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html index 67687d147e..f73f9ffa5d 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html @@ -24,7 +24,7 @@

- permission + Permission

diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.module.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.module.ts index cd11aa8c65..6e15505362 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.module.ts +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.module.ts @@ -15,7 +15,7 @@ import { circle, question, save, - x, + xLg, } from 'ngx-bootstrap-icons'; import { IconModule } from '@gsa-sam/ngx-uswds-icons'; import { RouterTestingModule } from '@angular/router/testing'; @@ -35,7 +35,7 @@ import { RouterTestingModule } from '@angular/router/testing'; checkCircleFill, question, save, - x, + xLg, }), SdsSideToolbarModule, RouterTestingModule, diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts index 581b77e29e..d571880c22 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts @@ -11,7 +11,7 @@ export class StepperAdvancedService { fieldGroup: [ { key: 'permissionsNeeded', - template: '

what permission


Select the specfific
', + template: '

What permission


Select the specfific
', }, { key: 'typeOfEntity', @@ -53,19 +53,19 @@ export class StepperAdvancedService { group: 'panel', options: [ { - key: 'read-public', + label: 'read-public', value: 'Read Public', }, { - key: 'read-sensitive', + label: 'read-sensitive', value: 'Read sensitive', }, { - key: 'write', + label: 'write', value: 'Write public', }, { - key: 'write-sensitive', + label: 'write-sensitive', value: 'Write sensitive', }, ], From adf6a8466769720047bb1afadc4ada1034e302d2 Mon Sep 17 00:00:00 2001 From: shayan-roshan Date: Tue, 23 Jul 2024 20:39:09 -0500 Subject: [PATCH 6/7] fixed label value --- .../formly-stepper-advanced.component.html | 2 +- .../stepper-advanced.service.ts | 20 ++++++++----------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html index f73f9ffa5d..ea66b0d7d7 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/formly-stepper-advanced.component.html @@ -22,7 +22,7 @@ - +

Permission
diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts index d571880c22..31b170e250 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/stepper-advanced.service.ts @@ -9,10 +9,6 @@ export class StepperAdvancedService { key: 'permissions', fieldGroupClassName: 'grid-row', fieldGroup: [ - { - key: 'permissionsNeeded', - template: '

What permission


Select the specfific
', - }, { key: 'typeOfEntity', className: 'desktop: grid-col-12 tablet: grid-col-12', @@ -53,20 +49,20 @@ export class StepperAdvancedService { group: 'panel', options: [ { - label: 'read-public', - value: 'Read Public', + label: 'Read Public', + value: 'read-public', }, { - label: 'read-sensitive', - value: 'Read sensitive', + label: 'Read sensitive', + value: 'read-sensitive', }, { - label: 'write', - value: 'Write public', + label: 'Write public', + value: 'write', }, { - label: 'write-sensitive', - value: 'Write sensitive', + label: 'Write sensitive', + value: 'write-sensitive', }, ], }, From ff7e228deea0f76eb2a93403a0fdef882c13529b Mon Sep 17 00:00:00 2001 From: shayan-roshan Date: Thu, 25 Jul 2024 09:09:12 -0500 Subject: [PATCH 7/7] removed double negative --- .../formly-stepper-advanced/custom-stepper.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html index c4ee7efc8b..f64aa5992f 100644 --- a/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html +++ b/libs/documentation/src/lib/storybook/formly/formly-stepper/formly-stepper-advanced/custom-stepper.component.html @@ -2,7 +2,7 @@
-
+