Merge pull request #99 from GSA/ng15-uswds

Ng15 uswds

Author: shayan-roshan

.circleci/config.yml

@@ -7,7 +7,7 @@ jobs:
   build:
     working_directory: ~/project/ngx-uswds
     docker:
-      - image: circleci/node:14.18.2-bullseye-browsers
+      - image: circleci/node:16.13-browsers
     steps:
       - checkout
       - run: npm install

angular.json

@@ -172,7 +172,10 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/uswds-components/src/test.ts",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],        
             "tsConfig": "projects/uswds-components/tsconfig.spec.json",
             "karmaConfig": "projects/uswds-components/karma.conf.js"
           }

documentation.json

@@ -37605,7 +37605,7 @@
             "assetsDirs": [],
             "styleUrlsData": [
                 {
-                    "data": "$theme-step-indicator-segment-color-pending: #dfe1e2;\n$theme-step-indicator-segment-color-current: #005ea2;\n\n@for $i from 1 through 8 {\n  $scale-percentage: calc(($i * 100) / 2);\n  .usa-step-indicator__segment.scale-percent-#{$scale-percentage} {\n    max-width: 15rem * calc($scale-percentage / 100);\n    flex-grow: calc($scale-percentage / 100);\n  }\n}\n\n/** Mixin to allow partial step completion */\n@mixin gradient($color, $fill-percentage, $color-remaining) {\n  background: linear-gradient(to right, $color $fill-percentage, $color-remaining $fill-percentage);\n}\n\n/** Define styles for partial step completion in multiples of 10 */\n@for $i from 0 through 10 {\n  .fill-#{$i * 10}.usa-step-indicator__segment--current:after {\n    @include gradient($theme-step-indicator-segment-color-current, $i * 10%, $theme-step-indicator-segment-color-pending);\n  }\n}\n\n/** Define styles for partial step completion in multiples of 33 */\n@for $i from 1 through 3 {\n  .fill-#{$i * 33}.usa-step-indicator__segment--current:after {\n    @include gradient($theme-step-indicator-segment-color-current, $i * 33%, $theme-step-indicator-segment-color-pending);\n  }\n}\n\n/** Manually add partial step completion for 25% and 75% */\n.fill-25.usa-step-indicator__segment--current:after {\n  @include gradient($theme-step-indicator-segment-color-current, 25%, $theme-step-indicator-segment-color-pending);\n}\n\n.fill-75.usa-step-indicator__segment--current:after {\n  @include gradient($theme-step-indicator-segment-color-current, 75%, $theme-step-indicator-segment-color-pending);\n}\n\n/** \n  Add css to hide counter if step label is not defined. Normally used to indicate last step in\n  step indicator with counter variation\n*/\n.usa-step-indicator__segment--no-counter:before {\n  content: '';\n  box-shadow: inset 0 0 0 0.25rem #f5f5f0, 0 0 0 0.25rem #fff !important;\n}\n\n.usa-step-indicator__segment:before {\n  box-shadow: inset 0 0 0 0.25rem #f5f5f0, 0 0 0 0.25rem #fff !important;\n}\n",
+                    "data": "$theme-step-indicator-segment-color-pending: #dfe1e2;\n$theme-step-indicator-segment-color-current: #005ea2;\n\n@for $i from 1 through 8 {\n  $scale-percentage: calc(($i * 100) / 2);\n\n  .usa-step-indicator__segment.scale-percent-#{$scale-percentage} {\n    max-width: 15rem * calc($scale-percentage / 100);\n    flex-grow: calc($scale-percentage / 100);\n  }\n}\n\n/** Mixin to allow partial step completion */\n@mixin gradient($color, $fill-percentage, $color-remaining) {\n  background: linear-gradient(to right, $color $fill-percentage, $color-remaining $fill-percentage);\n}\n\n/** Define styles for partial step completion in multiples of 10 */\n@for $i from 0 through 10 {\n  .fill-#{$i * 10}.usa-step-indicator__segment--current:after {\n    @include gradient($theme-step-indicator-segment-color-current, $i * 10%, $theme-step-indicator-segment-color-pending);\n  }\n}\n\n/** Define styles for partial step completion in multiples of 33 */\n@for $i from 1 through 3 {\n  .fill-#{$i * 33}.usa-step-indicator__segment--current:after {\n    @include gradient($theme-step-indicator-segment-color-current, $i * 33%, $theme-step-indicator-segment-color-pending);\n  }\n}\n\n/** Manually add partial step completion for 25% and 75% */\n.fill-25.usa-step-indicator__segment--current:after {\n  @include gradient($theme-step-indicator-segment-color-current, 25%, $theme-step-indicator-segment-color-pending);\n}\n\n.fill-75.usa-step-indicator__segment--current:after {\n  @include gradient($theme-step-indicator-segment-color-current, 75%, $theme-step-indicator-segment-color-pending);\n}\n\n/** \n  Add css to hide counter if step label is not defined. Normally used to indicate last step in\n  step indicator with counter variation\n*/\n.usa-step-indicator__segment--no-counter:before {\n  content: '';\n  box-shadow: inset 0 0 0 0.25rem #f5f5f0, 0 0 0 0.25rem #ffff !important;\n}\n\n.usa-step-indicator__segment:before {\n  box-shadow: inset 0 0 0 0.25rem #f5f5f0, 0 0 0 0.25rem #ffff !important;\n}\n\n.usa-step-indicator__segment--current:before {\n  box-shadow: inset 0 0 0 0.25rem #2672de, 0 0 0 0.25rem  #ffff !important;\n}\n\n.usa-step-indicator__segment--complete:before {\n  box-shadow: inset 0 0 0 0.25rem #1a4480, 0 0 0 0.25rem  #ffff !important;\n}\n",
                     "styleUrl": "./step-indicator.component.scss"
                 }
             ],
@@ -41423,13 +41423,13 @@
         },
         {
             "name": "AppRoutingModule",
-            "id": "module-AppRoutingModule-2fb4c3b3b2486bc9a26ac1cdc09fcd82e2611e9a999341d44cf6640c86098e22458205a723d07da9da5125b46fb2fb0d0edbc61921cdf0270484c546089b5eca",
+            "id": "module-AppRoutingModule-b60b6ae6b4029dfc32b75081436803722daf56db22fb5bec55025c913ead2d3f5d0317dfd7e5443fc1209a31e10d83934b8e3c370b997467aee5b6a71dfcb9cb",
             "description": "",
             "deprecationMessage": "",
             "deprecated": false,
             "file": "src/app/app.routing.module.ts",
             "methods": [],
-            "sourceCode": "import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { RouterModule, Routes } from \"@angular/router\";\nimport { HomeComponent } from \"./home/home.component\";\nimport { HomeModule } from \"./home/home.module\";\n\nconst routes: Routes = [\n  {\n    path: '',\n    redirectTo: 'home',\n    pathMatch: 'full'\n  },\n  {\n    path: 'home',\n    component: HomeComponent,\n  },\n]\n\n\n@NgModule({\n  imports: [\n    CommonModule,\n    HomeModule,\n    RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' }),\n  ],\n  exports: [\n    RouterModule,\n  ]\n})\nexport class AppRoutingModule { }\n",
+            "sourceCode": "import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { RouterModule, Routes } from \"@angular/router\";\nimport { HomeComponent } from \"./home/home.component\";\nimport { HomeModule } from \"./home/home.module\";\n\nconst routes: Routes = [\n  {\n    path: '',\n    redirectTo: 'home',\n    pathMatch: 'full'\n  },\n  {\n    path: 'home',\n    component: HomeComponent,\n  },\n]\n\n\n@NgModule({\n  imports: [\n    CommonModule,\n    HomeModule,\n    RouterModule.forRoot(routes, {}),\n  ],\n  exports: [\n    RouterModule,\n  ]\n})\nexport class AppRoutingModule { }\n",
             "children": [
                 {
                     "type": "providers",