npm - @softheon/armature - Versions diffs - 10.31.2 → 10.33.2 - Mend

@softheon/armature 10.31.2 → 10.33.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (200) hide show

package/bundles/softheon-armature.umd.js CHANGED Viewed

@@ -1,8 +1,31 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/common/http'), require('@angular/core'), require('@angular/flex-layout'), require('@angular/router'), require('@angular/material/icon'), require('@ngx-translate/core'), require('rxjs'), require('angular-oauth2-oidc'), require('angular-oauth2-oidc-jwks'), require('lodash'), require('rxjs/operators'), require('@angular/material/button'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/snack-bar'), require('@angular/material/button-toggle'), require('@angular/material/list'), require('@angular/material/menu'), require('@angular/material/sidenav'), require('@angular/material/slide-toggle'), require('@angular/material/toolbar'), require('@angular/cdk/layout'), require('angular-oauth2-oidc/'), require('@angular/material/progress-bar'), require('@angular/material/slider'), require('@angular/material/stepper'), require('@angular/material/tooltip'), require('@angular/material/expansion'), require('@angular/cdk/stepper'), require('@angular/material/checkbox'), require('@angular/material/core'), require('@angular/material/dialog'), require('@angular/animations'), require('@angular/material/card')) :
-    typeof define === 'function' && define.amd ? define('@softheon/armature', ['exports', '@angular/common', '@angular/common/http', '@angular/core', '@angular/flex-layout', '@angular/router', '@angular/material/icon', '@ngx-translate/core', 'rxjs', 'angular-oauth2-oidc', 'angular-oauth2-oidc-jwks', 'lodash', 'rxjs/operators', '@angular/material/button', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/snack-bar', '@angular/material/button-toggle', '@angular/material/list', '@angular/material/menu', '@angular/material/sidenav', '@angular/material/slide-toggle', '@angular/material/toolbar', '@angular/cdk/layout', 'angular-oauth2-oidc/', '@angular/material/progress-bar', '@angular/material/slider', '@angular/material/stepper', '@angular/material/tooltip', '@angular/material/expansion', '@angular/cdk/stepper', '@angular/material/checkbox', '@angular/material/core', '@angular/material/dialog', '@angular/animations', '@angular/material/card'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.softheon = global.softheon || {}, global.softheon.armature = {}), global.ng.common, global.ng.common.http, global.ng.core, global.ng.flexLayout, global.ng.router, global.ng.material.icon, global.i2, global.rxjs, global.i1, global.angularOauth2OidcJwks, global._, global.rxjs.operators, global.ng.material.button, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.snackBar, global.ng.material.buttonToggle, global.ng.material.list, global.ng.material.menu, global.ng.material.sidenav, global.ng.material.slideToggle, global.ng.material.toolbar, global.ng.cdk.layout, global._$1, global.ng.material.progressBar, global.ng.material.slider, global.ng.material.stepper, global.ng.material.tooltip, global.ng.material.expansion, global.ng.cdk.stepper, global.ng.material.checkbox, global.ng.material.core, global.ng.material.dialog, global.ng.animations, global.ng.material.card));
-}(this, (function (exports, common, i2$1, i0, flexLayout, i1$1, icon, i2, rxjs, i1, angularOauth2OidcJwks, _, operators, button, forms, formField, input, select, i1$2, buttonToggle, list, menu, sidenav, slideToggle, toolbar, layout, _$1, progressBar, slider, stepper$1, tooltip, expansion, stepper, checkbox, core, dialog, animations, card) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/common/http'), require('@angular/core'), require('@angular/flex-layout'), require('@angular/router'), require('@angular/material/icon'), require('@ngx-translate/core'), require('rxjs'), require('angular-oauth2-oidc'), require('angular-oauth2-oidc-jwks'), require('lodash'), require('rxjs/operators'), require('@angular/material/button'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/snack-bar'), require('@angular/material/button-toggle'), require('@angular/material/list'), require('@angular/material/menu'), require('@angular/material/sidenav'), require('@angular/material/slide-toggle'), require('@angular/material/toolbar'), require('@angular/cdk/layout'), require('angular-oauth2-oidc/'), require('@angular/material/progress-bar'), require('@angular/material/slider'), require('@angular/material/stepper'), require('@angular/material/tooltip'), require('@angular/material/expansion'), require('@angular/cdk/stepper'), require('@angular/material/checkbox'), require('@angular/material/core'), require('@angular/material/dialog'), require('@angular/animations'), require('@angular/material/card'), require('moment')) :
+    typeof define === 'function' && define.amd ? define('@softheon/armature', ['exports', '@angular/common', '@angular/common/http', '@angular/core', '@angular/flex-layout', '@angular/router', '@angular/material/icon', '@ngx-translate/core', 'rxjs', 'angular-oauth2-oidc', 'angular-oauth2-oidc-jwks', 'lodash', 'rxjs/operators', '@angular/material/button', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/snack-bar', '@angular/material/button-toggle', '@angular/material/list', '@angular/material/menu', '@angular/material/sidenav', '@angular/material/slide-toggle', '@angular/material/toolbar', '@angular/cdk/layout', 'angular-oauth2-oidc/', '@angular/material/progress-bar', '@angular/material/slider', '@angular/material/stepper', '@angular/material/tooltip', '@angular/material/expansion', '@angular/cdk/stepper', '@angular/material/checkbox', '@angular/material/core', '@angular/material/dialog', '@angular/animations', '@angular/material/card', 'moment'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.softheon = global.softheon || {}, global.softheon.armature = {}), global.ng.common, global.ng.common.http, global.ng.core, global.ng.flexLayout, global.ng.router, global.ng.material.icon, global.i2, global.rxjs, global.i1, global.angularOauth2OidcJwks, global._, global.rxjs.operators, global.ng.material.button, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.snackBar, global.ng.material.buttonToggle, global.ng.material.list, global.ng.material.menu, global.ng.material.sidenav, global.ng.material.slideToggle, global.ng.material.toolbar, global.ng.cdk.layout, global._$1, global.ng.material.progressBar, global.ng.material.slider, global.ng.material.stepper, global.ng.material.tooltip, global.ng.material.expansion, global.ng.cdk.stepper, global.ng.material.checkbox, global.ng.material.core, global.ng.material.dialog, global.ng.animations, global.ng.material.card, global.moment));
+}(this, (function (exports, common, i2$1, i0, flexLayout, i1$1, icon, i2, rxjs, i1, angularOauth2OidcJwks, _, operators, button, forms, formField, input, select, i1$2, buttonToggle, list, menu, sidenav, slideToggle, toolbar, layout, _$1, progressBar, slider, stepper$1, tooltip, expansion, stepper, checkbox, core, dialog, animations, card, moment) { 'use strict';
+    function _interopNamespace(e) {
+        if (e && e.__esModule) { return e; } else {
+            var n = Object.create(null);
+            if (e) {
+                Object.keys(e).forEach(function (k) {
+                    if (k !== 'default') {
+                        var d = Object.getOwnPropertyDescriptor(e, k);
+                        Object.defineProperty(n, k, d.get ? d : {
+                            enumerable: true,
+                            get: function () {
+                                return e[k];
+                            }
+                        });
+                    }
+                });
+            }
+            n['default'] = e;
+            return Object.freeze(n);
+        }
+    }
+    var moment__namespace = /*#__PURE__*/_interopNamespace(moment);
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -1347,7 +1370,7 @@
                                             ])];
                                     case 2:
                                         _d = __read.apply(void 0, [_e.sent(), 5]), baseConfig = _d[0], overrideConfig = _d[1], baseLang = _d[2], overrideLang = _d[3], theme = _d[4];
-                                        this.configService.config = _.merge(baseConfig, overrideConfig);
+                                        this.configService.config = _.mergeWith(baseConfig, overrideConfig, this.mergeCustomizer);
                                         configSnapShot = this.configService.config;
                                         configSnapShot.theme = theme;
                                         this.configService.config = configSnapShot;
@@ -1470,6 +1493,17 @@
                 });
             });
         };
+        /**
+         * Merges the two config objects ignoring the array type
+         * @param objValue The default config value
+         * @param srcValue The target switchboard config value
+         * @returns The merge of the two configs provided
+         */
+        Initializer.prototype.mergeCustomizer = function (objValue, srcValue) {
+            if (_.isArray(objValue) && srcValue) {
+                return srcValue;
+            }
+        };
         return Initializer;
     }());
     Initializer.ɵprov = i0.ɵɵdefineInjectable({ factory: function Initializer_Factory() { return new Initializer(i0.ɵɵinject(i2$1.HttpClient), i0.ɵɵinject(i2.TranslateService), i0.ɵɵinject(ThemeService), i0.ɵɵinject(BaseConfigService), i0.ɵɵinject(i1.OAuthService), i0.ɵɵinject(CustomAuthConfigService, 8)); }, token: Initializer, providedIn: "root" });
@@ -3729,6 +3763,8 @@
             this.languageSettings = {};
             /** Sets language **/
             this.setLanguage$ = new i0.EventEmitter();
+            /** Whether side nav is open or not */
+            this.isNavOpen = false;
             /** Mobile SubNav - whether or not the mobile SubNav is open */
             this.isMobileSubNavOpen = false;
             /** The selected parent index */
@@ -3751,6 +3787,8 @@
             this.bannerSubscription = new rxjs.Subscription();
             /** The config subscription */
             this.configSubscription = new rxjs.Subscription();
+            /** The sidenav subscription */
+            this.sideNavSub = new rxjs.Subscription();
             this.mobileQuery = media.matchMedia('(max-width: 959px)');
             this._mobileQueryListener = function () {
                 changeDetectorRef.detectChanges();
@@ -3909,6 +3947,9 @@
                     });
                 });
             }
+            this.sideNavSub = this.sidenav.openedChange.subscribe(function (drawerState) {
+                _this.isNavOpen = drawerState;
+            });
         };
         /** On Destroy */
         ArmatureNavigationComponent.prototype.ngOnDestroy = function () {
@@ -3917,6 +3958,7 @@
             this.logInSubscription.unsubscribe();
             this.bannerSubscription.unsubscribe();
             this.configSubscription.unsubscribe();
+            this.sideNavSub.unsubscribe();
         };
         /**
          * Mobile SubNav - open the SubNav
@@ -4192,7 +4234,7 @@
     ArmatureNavigationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'sof-ar-navigation',
-                    template: "<div class=\"sof-ar-nav-container\"\r\n     [style.top]=\"mobileQuery.matches && advancedSettings.topGapMobile ? advancedSettings.topGapMobile + 'px' : settings.headerHeight + 'px'\"\r\n     [class.sof-ar-nav-mobile]=\"mobileQuery.matches\">\r\n  <div *ngIf=\"showMessage\" m-a-0 fxLayout=\"row\" fxLayoutAlign=\"space-between center\" sws-alert--secondary role=\"alert\">\r\n    <div fxLayout=\"row\" aria-hidden=\"true\">\r\n      <i *ngIf=\"showCheckMark\" m-r-5 m-l-5 class=\"fas fa-check-circle icon-container\"></i>\r\n      <p class=\"message-container\" m-r-5 m-l-5 [innerHtml]=\"message | translate\"></p>\r\n    </div>\r\n    <div fxLayout=\"column\">\r\n      <button id=\"btnClose\" (click)=\"hide()\" mat-icon-button [attr.aria-label]=\"'common.close' | translate\">\r\n        <span aria-hidden=\"true\">\r\n          <i class=\"fal fa-times fa-lg\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <button id=\"sof-ar-nav-btn-menu\" aria-label=\"Menu Button\" mat-icon-button [disableRipple]=\"true\"\r\n          (click)=\"snav.toggle()\" class=\"sof-ar-nav-menu-btn\"\r\n          [class.hidden]=\"!(mobileQuery.matches || settings.allowNavToggle) || settings.hideNavigation\">\r\n    <span aria-hidden=\"true\" class=\"sof-ar-nav-menu-icon\">\r\n      <ng-container *ngIf=\"snav.opened\">\r\n        <i class=\"{{settings.fontAwesomeMenuIcon}} menu-icon\"></i>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!snav.opened\">\r\n        <i class=\"{{settings.fontAwesomeMenuIconClosed}} menu-icon\"></i>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"sr-only\">{{settings.menuButtonSRText | translate}}</span>\r\n  </button>\r\n\r\n  <mat-sidenav-container autosize class=\"sof-ar-nav-sidenav-container\" [style.marginTop.px]=\"\r\n      mobileQuery.matches ? advancedSettings.marginTopMobile : advancedSettings.marginTopDesktop\">\r\n    <mat-sidenav [disableClose]=\"!mobileQuery.matches\" class=\"sof-ar-nav-sidenav\" #snav [mode]=\"mobileQuery.matches ? 'over' : 'side'\"\r\n                 [fixedInViewport]=\"mobileQuery.matches\" [fixedTopGap]=\"mobileQuery.matches ? advancedSettings.topGapMobile : advancedSettings.topGapDesktop\"\r\n                 [opened]=\"!mobileQuery.matches && !settings.hideNavigation && settings.menuStyle!='progress' \"\r\n                 [style.width]=\"mobileQuery.matches ? setNavWidth(settings.sideNavWidthMobile) : setNavWidth(settings.sideNavWidthDesktop)\"\r\n                 [ngStyle]=\"{background:mobileQuery.matches ? themeSettings?.mobileBgColor : undefined}\">\r\n      <ng-container *ngIf=\"mobileQuery.matches && userName && !settings.customUserName\">\r\n        <span class=\"user-name\">\r\n          {{userName}}\r\n        </span>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"mobileQuery.matches && settings.customUserName\">\r\n        <span class=\"user-name\">\r\n          {{settings.customUserName | translate}}\r\n        </span>\r\n      </ng-container>\r\n      <!-- Nav Header Content -->\r\n      <ng-content select=\"[sof-ar-nav-header]\"> </ng-content>\r\n\r\n      <!-- Static Navigation -->\r\n      <div class=\"nav-content-item sidenav-background\" *ngIf=\"settings.menuStyle === 'static'\" [ngStyle]=\"{'padding-bottom.px': (footerItemCount*64)+128}\">\r\n        <ng-container *ngIf=\"settings.menuStyle === 'static'\">\r\n          <ng-container *ngFor=\"let nav of navigationData\">\r\n            <ng-container *ngIf=\"nav?.subNodes?.length && !nav.hidden\">\r\n              <mat-accordion>\r\n                <mat-expansion-panel [expanded]=\"nav.expanded\">\r\n                  <mat-expansion-panel-header [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(nav) }\">\r\n                    <!-- Desktop Nav -->\r\n                    <ng-container>\r\n                      <!-- If there is a route -->\r\n                      <ng-container *ngIf=\"nav?.route\">\r\n                        <mat-nav-list [disableRipple]=\"true\">\r\n                          <a class=\"nav-item\" mat-list-item [routerLink]=\"nav?.route\"\r\n                             [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                            <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                              <span aria-hidden=\"true\" class=\"icon-styling\">\r\n                                <i class=\"{{nav?.fontAwesomeIcon}}\"></i>\r\n                              </span>\r\n                            </ng-container>\r\n                            <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                          </a>\r\n                        </mat-nav-list>\r\n                      </ng-container>\r\n                      <!-- If there is not a route -->\r\n                      <ng-container *ngIf=\"!nav?.route\">\r\n                        <mat-nav-list [disableRipple]=\"true\">\r\n                          <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                                  [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                            <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                              <span aria-hidden=\"true\" class=\"icon-styling\">\r\n                                <i class=\"{{nav?.fontAwesomeIcon}}\"></i>\r\n                              </span>\r\n                            </ng-container>\r\n                            <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                          </button>\r\n                        </mat-nav-list>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </mat-expansion-panel-header>\r\n                  <!-- Desktop SubNav -->\r\n                  <ng-container>\r\n                    <mat-nav-list [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(subnav) }\" class=\"subnav-content\"\r\n                                  [disableRipple]=\"true\" *ngFor=\"let subnav of nav?.subNodes\">\r\n                      <a mat-list-item [routerLinkActive]=\"['sof-ar-nav-sub-active-route']\" [routerLink]=\"subnav.route\">\r\n                        {{subnav.text | translate}}\r\n                      </a>\r\n                    </mat-nav-list>\r\n                  </ng-container>\r\n                </mat-expansion-panel>\r\n              </mat-accordion>\r\n            </ng-container>\r\n            <!-- If subnodes are not there -->\r\n            <ng-container>\r\n              <!-- Desktop Nav -->\r\n              <ng-container *ngIf=\"!nav?.subNodes?.length && !nav?.hidden\">\r\n                <!-- If there is a route -->\r\n                <ng-container *ngIf=\"nav?.route\">\r\n                  <mat-nav-list \r\n                                [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(nav) }\" class=\"nav-header\"\r\n                                [disableRipple]=\"true\">\r\n                    <a class=\"nav-item nav-item-margin\" mat-list-item [routerLink]=\"nav?.route\"\r\n                       [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                    </a>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n                <!-- If there is not a route -->\r\n                <ng-container *ngIf=\"!nav?.route\">\r\n                  <mat-nav-list [disableRipple]=\"true\">\r\n                    <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                            [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                    </button>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Stepper -->\r\n      <mat-vertical-stepper *ngIf=\"settings.menuStyle === 'stepper'\" [selectedIndex]=\"selectedParentIndex\" #vertStepper\r\n                            [linear]=\"false\" class=\"sidenav-background\">\r\n        <!-- Alternate step states for nav, icaons should always be white only worked with styles -->\r\n        <ng-template matStepperIcon=\"create\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"edit\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"active\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"done\">\r\n          <span>\r\n            <i class=\"fas fa-check\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n\r\n        <!-- nav steps -->\r\n        <ng-container *ngFor=\"let nav of navigationData; let i = index\">\r\n          <mat-step *ngIf=\"!nav?.hidden\" state=\"{{ determineStepState(i, -1) }}\">\r\n            <ng-template matStepLabel *ngIf=\"!nav.hidden\">\r\n              <div id=\"divStep{{ i }}\" style=\"height: 72px\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\r\n                   matTooltip=\"{{ nav.text | translate }}\" [matTooltipPosition]=\"'after'\" fxFlex=\"100%\">\r\n                <a id=\"step{{ i }}\" fxFlex=\"100%\" class=\"mat-button step-link\" [routerLink]=\"nav.route\"\r\n                   [ngStyle]=\"{ color: themeSettings?.fontColor }\" [routerLinkActive]=\"['step-active']\">\r\n                  {{ nav.text | translate }}\r\n                </a>\r\n              </div>\r\n            </ng-template>\r\n            <p [innerHTML]=\"nav.stepContent | translate\"></p>\r\n            <!-- sub nav -->\r\n            <mat-vertical-stepper *ngIf=\"nav?.subNodes\" [selectedIndex]=\"selectedChildIndexes[i]\" [linear]=\"false\"\r\n                                  #vertStepperInner>\r\n              <!-- Alternate step states for sub nav, icons should always be white only worked with styles -->\r\n              <ng-template matStepperIcon=\"create\">\r\n                <span>\r\n                  <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"edit\">\r\n                <span>\r\n                  <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"done\">\r\n                <span>\r\n                  <i class=\"fas fa-check\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"active\">\r\n                <span>\r\n                  <i class=\"fas fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"none\">\r\n                <span></span>\r\n              </ng-template>\r\n              <!-- sub nav steps -->\r\n              <ng-container *ngFor=\"let subnav of nav?.subNodes; let j = index\">\r\n                <mat-step state=\"{{ determineStepState(i, j) }}\" *ngIf=\"!subnav.hidden\" >\r\n                  <ng-template matStepLabel>\r\n                    <div id=\"divSubStep{{ i }}-{{ j }}\" style=\"height: 72px\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\r\n                         matTooltip=\"{{ subnav.text | translate }}\" [matTooltipPosition]=\"'after'\" fxFlex=\"100%\">\r\n                      <a id=\"subStep{{ i }}-{{ j }}\" class=\"mat-button step-link\"\r\n                         [ngStyle]=\"{ color: themeSettings?.fontColor }\" [routerLink]=\"subnav.route\"\r\n                         [routerLinkActive]=\"['step-active']\">{{ subnav.text | translate }}</a>\r\n                    </div>\r\n                  </ng-template>\r\n                  <p [innerHTML]=\"subnav.stepContent | translate\"></p>\r\n                </mat-step>\r\n              </ng-container>\r\n              \r\n            </mat-vertical-stepper>\r\n          </mat-step>\r\n        </ng-container>\r\n        \r\n      </mat-vertical-stepper>\r\n\r\n      <!-- Nav Footer -->\r\n      <div class=\"nav-footer-item\">\r\n        <ng-container *ngIf=\"settings.menuStyle === 'static'\">\r\n          <ng-container *ngFor=\"let nav of footerNavigationData\">\r\n            <ng-container>\r\n              <!-- Desktop Nav -->\r\n              <ng-container *ngIf=\"!nav?.subNodes?.length\">\r\n                <!-- If there is a route -->\r\n                <ng-container *ngIf=\"nav?.route\">\r\n                  <mat-nav-list  class=\"nav-header\" [disableRipple]=\"true\">\r\n                    <a class=\"nav-item\" mat-list-item [routerLink]=\"nav?.route\"\r\n                       [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      {{nav.text | translate}}\r\n                    </a>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n                <!-- If there is not a route -->\r\n                <ng-container *ngIf=\"!nav?.route\">\r\n                  <mat-nav-list>\r\n                    <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                            [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      {{nav.text | translate}}\r\n                    </button>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-template [ngTemplateOutlet]=\"navigationFooter\">\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- the mobile progress menu-->\r\n      <ng-container *ngIf=\"settings?.menuStyle === 'progress'\">\r\n        <div class=\"sidenav-background\" [ngStyle]=\"{'padding-bottom.px': (footerItemCount*64)+128}\">\r\n          <mat-accordion>\r\n            <div *ngFor=\"let step of navigationData; let i = index\">\r\n              <ng-container *ngIf=\"step.subNodes && step.subNodes.length > 0 && !step.hidden\">\r\n                <mat-expansion-panel hideToggle class=\"progress-mobile-expansion-panel\"\r\n                                     [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" (opened)=\"panelOpenState = true\"\r\n                                     (closed)=\"panelOpenState = false\">\r\n                  <mat-expansion-panel-header>\r\n                    <mat-panel-title class=\"progress-mobile-panel-title\">\r\n                      <div style=\"width: -webkit-fill-available;\"\r\n                           [ngClass]=\"{'disabled':(!step.visited || step.isDisabled) && !settings.overrideNavigation && !step.complete,'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                        <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                        </ng-template>\r\n                        <span *ngIf=\"settings?.displayNumbers\">\r\n                          {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \" }}\r\n                        </span>\r\n                        <span class=\"nav-btn-text\">\r\n                          {{ step.text | translate }}\r\n                        </span>\r\n                        <span *ngIf=\"!panelOpenState\">\r\n                          <i class=\"fas fa-chevron-down panel-icon\"></i>\r\n                        </span>\r\n                        <span *ngIf=\"panelOpenState\">\r\n                          <i class=\"fas fa-chevron-up panel-icon\"></i>\r\n                        </span>\r\n                      </div>\r\n                    </mat-panel-title>\r\n                    <mat-panel-description>\r\n                    </mat-panel-description>\r\n                  </mat-expansion-panel-header>\r\n                  <!-- mobile sub menu -->\r\n                  <div class=\"progress-nav-menu\" *ngFor=\"let subNode of step.subNodes; let idx = index;\" [hidden]=\"step.subNodes[idx].hidden\">\r\n                    <button id=\"mobileMenu{{ idx }}\" mat-button class=\"step-link progress-menu-mobile-btn\"\r\n                            [ngClass]=\"{'color-primary':subNode.complete && subNode!=activeSubNode}\"\r\n                            [routerLinkActive]=\"['progress-menu-active']\" [ngStyle]=\"{ ' color': themeSettings?.fontColor }\"\r\n                            [routerLink]=\"subNode.route\" [disabled]=\"!subNode.visited && !settings.overrideNavigation\">\r\n                      <ng-template [ngTemplateOutlet]=\"progressSubNodeIcons\"\r\n                                   [ngTemplateOutletContext]=\"{subNode:subNode}\">\r\n                      </ng-template>\r\n                      <span class=\"nav-menu-btn-text\" [ngClass]=\"{'disabled':(!subNode.visited) && !settings.overrideNavigation && !subNode.complete,'color-primary':subNode.complete,'progress-menu-active':subNode===activeSubNode}\">{{ subNode.text | translate }}</span>\r\n                    </button>\r\n                  </div>\r\n                </mat-expansion-panel>\r\n              </ng-container>\r\n              <!-- if there are no subNodes -->\r\n              <ng-container *ngIf=\"(!step.subNodes || step.subNodes.length==0) && !step.hidden\">\r\n                <mat-expansion-panel #panel hideToggle (opened)=\"disablePanel(panel,i)\" class=\"progress-mobile-expansion-panel\"\r\n                                     [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\">\r\n                  <mat-expansion-panel-header>\r\n                    <mat-panel-title class=\"progress-mobile-panel-title\">\r\n                      <div [ngClass]=\"{'disabled':(!step.visited || step.isDisabled) && !settings.overrideNavigation && !step.complete,'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                        <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                        </ng-template>\r\n                        <span *ngIf=\"settings?.displayNumbers\">\r\n                          {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \" }}\r\n                        </span>\r\n                        <span class=\"nav-btn-text\">\r\n                          {{ step.text | translate }}\r\n                        </span>\r\n                      </div>\r\n                    </mat-panel-title>\r\n                    <mat-panel-description>\r\n                    </mat-panel-description>\r\n                  </mat-expansion-panel-header>\r\n                </mat-expansion-panel>\r\n              </ng-container>\r\n            </div>\r\n          </mat-accordion>\r\n        </div>\r\n\r\n        <!-- the progress menu language and logout buttons-->\r\n        <div class=\"nav-footer-item progress-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"navigationFooter\">\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- Horizontal Progress -->\r\n      <ng-container *ngIf=\"settings?.menuStyle === 'progress'\">\r\n        <mat-progress-bar *ngIf=\"settings?.showProgressBar\" mode=\"determinate\" [value]=\"navProgressCount\"\r\n                          style=\"height: 9px\" color=\"accent\">\r\n        </mat-progress-bar>\r\n        <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" style=\"justify-content:center !important\" [class.hidden]=\"settings.hideNavigation\">\r\n          <div *ngFor=\"let step of navigationData; let i = index\" class=\"horizontal-progress-div\">\r\n            <ng-container *ngIf=\"!step.subNodes?.length && !step.hidden\">\r\n              <button mat-button [routerLink]=\"step.route\"\r\n                      [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" class=\"progress-menu-btn\"\r\n                      [ngClass]=\"{'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                </ng-template>\r\n                <span *ngIf=\"settings?.displayNumbers\">\r\n                  {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \"}}\r\n                </span>\r\n                <span class=\"nav-btn-text\">{{ step.text | translate }}</span>\r\n              </button>\r\n            </ng-container>\r\n            <!-- if there are subnodes create menus for each step -->\r\n            <ng-container *ngIf=\"step.subNodes && step.subNodes.length && !step.hidden\">\r\n              <button [ngClass]=\"{'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\"\r\n                      mat-button [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" class=\"progress-menu-btn\"\r\n                      [matMenuTriggerFor]=\"menu\">\r\n                <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                </ng-template>\r\n                <span *ngIf=\"settings?.displayNumbers\">\r\n                  {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \"}}\r\n                </span>\r\n                <span class=\"nav-btn-text\">{{ step.text | translate }}</span>\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\" class=\"sof-ar-mat-menu progress-menu-panel\">\r\n                <div class=\"progress-nav-menu\" *ngFor=\"let subNode of step.subNodes; let idx = index;\" [ngStyle]=\"{width:settings.progressMenuWidth+'px'}\" [hidden]=\"step.subNodes[idx].hidden\">\r\n                  <button id=\"submenu{{ idx }}\" mat-button class=\"step-link progress-menu-btn\"\r\n                          [ngClass]=\"{'color-primary':subNode.complete && subNode!=activeSubNode,'disabled':!subNode.visited && !settings.overrideNavigation}\"\r\n                          [routerLinkActive]=\"['progress-menu-active']\" [ngStyle]=\"{ ' color': themeSettings?.fontColor }\"\r\n                          [routerLink]=\"subNode.route\" [disabled]=\"!subNode.visited && !settings.overrideNavigation\">\r\n                    <ng-template [ngTemplateOutlet]=\"progressSubNodeIcons\"\r\n                                 [ngTemplateOutletContext]=\"{subNode:subNode}\">\r\n                    </ng-template>\r\n                    <span class=\"nav-menu-btn-text\">{{ subNode.text |translate }}</span>\r\n                  </button>\r\n                </div>\r\n              </mat-menu>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"mobile-progress-container\" fxHide.gt-sm>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-content sof-ar-nav-content></ng-content>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n  <!-- The progress menu parent node icon template-->\r\n  <ng-template #progressParentNodeIcons let-step='step'>\r\n    <span *ngIf=\"step.complete && step != activeParentNode\">\r\n      <i class=\"{{ settings.progressSectionCompleteIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"step === activeParentNode\">\r\n      <i class=\"{{ settings.progressSectionCurrentIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"!step.complete && step != activeParentNode\" [ngClass]=\"{'disabled':!step.visited && !settings.overrideNavigation}\">\r\n      <i class=\"{{ settings.progressSectionFutureIcon }} progress-nav-icon\"></i>\r\n    </span>\r\n  </ng-template>\r\n  <!-- The progress menu sub node icon template-->\r\n  <ng-template #progressSubNodeIcons let-subNode='subNode'>\r\n    <span *ngIf=\"subNode.complete &&activeSubNode !=subNode\">\r\n      <i class=\"{{settings.progressMenuCompleteIcon}} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"activeSubNode ===subNode\">\r\n      <i class=\"{{ settings.progressSectionCurrentIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"!subNode.complete &&activeSubNode !=subNode\" [ngClass]=\"{'disabled':!subNode.visited && !settings.overrideNavigation}\">\r\n      <i class=\"{{ settings.progressSectionFutureIcon }} progress-nav-icon\"></i>\r\n    </span>\r\n  </ng-template>\r\n  <!-- The navigation footer template for language and logout buttons -->\r\n  <ng-template #navigationFooter>\r\n    <ng-content select=\"[sof-ar-nav-mobile-footer]\"> </ng-content>\r\n    <ng-container *ngIf=\"!settings.useCustomMobileFooter\">\r\n    <!-- The language button -->\r\n    <ng-container *ngIf=\"languageSettings?.displayLanguageOptions && languageSettings?.languages.length > 2 && mobileQuery.matches\">\r\n      <button id=\"sof-ar-nav-lang-dropdown\" mat-stroked-button\r\n              class=\"faded-button-50 language-button navigationFooter\" [matMenuTriggerFor]=\"headerLanguageMenu\"\r\n              [attr.aria-label]=\"languageSettings.buttonText | translate\">\r\n        <span aria-hidden=\"true\" class=\"icon-styling\">\r\n          <i class=\"far fa-globe language-globe\"></i>\r\n        </span>\r\n        {{languageSettings.buttonText | translate}}\r\n      </button>\r\n      <mat-menu #headerLanguageMenu=\"matMenu\" class=\"sof-ar-mat-menu\">\r\n        <button mat-menu-item *ngFor=\"let lang of languageSettings.languages\" (click)=\"setLanguage$.emit(lang)\"\r\n                id=\"apply-lang-btn-{{lang}}\">\r\n          <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\">\r\n            <div fxFlex=\"auto\">\r\n              {{ lang | translate }}\r\n            </div>\r\n            <div fxFlex=\"auto\" fxLayoutAlign=\"end end\">\r\n              <i *ngIf=\"currentLang === lang\" class=\"fad fa-check selected-language-icon\"></i>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"languageSettings?.displayLanguageOptions && languageSettings?.languages.length === 2 && mobileQuery.matches\">\r\n      <button *ngIf=\"languageSettings?.languages.length === 2\" id=\"sof-ar-nav-lang-button\" mat-stroked-button\r\n              class=\"faded-button-50 language-button navigationFooter\"\r\n              [attr.aria-label]=\"languageSettings.buttonText | translate\" (click)=\"setLanguage$.emit()\">\r\n        <span aria-hidden=\"true\" class=\"icon-styling\">\r\n          <i class=\"far fa-globe language-globe\"></i>\r\n        </span>\r\n        {{otherLangText | translate}}\r\n      </button>\r\n    </ng-container>\r\n    <!-- The logout button-->\r\n    <ng-container *ngIf=\"mobileQuery.matches && userName\">\r\n      <button id=\"sof-ar-header-lang-button\" mat-stroked-button class=\"navigationFooter\" (click)=\"logOut()\">\r\n        <span aria-hidden=\"true\" class=\"icon-styling\">\r\n          <i class=\"fas fa-sign-out-alt\"></i>\r\n        </span>\r\n        {{logOutText | translate}}\r\n      </button>\r\n    </ng-container>\r\n  </ng-container>\r\n  </ng-template>\r\n</div>\r\n",
+                    template: "<div class=\"sof-ar-nav-container\"\r\n     [style.top]=\"mobileQuery.matches && advancedSettings.topGapMobile ? advancedSettings.topGapMobile + 'px' : settings.headerHeight + 'px'\"\r\n     [class.sof-ar-nav-mobile]=\"mobileQuery.matches\">\r\n  <div *ngIf=\"showMessage\" m-a-0 fxLayout=\"row\" fxLayoutAlign=\"space-between center\" sws-alert--secondary role=\"alert\">\r\n    <div fxLayout=\"row\" aria-hidden=\"true\">\r\n      <i *ngIf=\"showCheckMark\" m-r-5 m-l-5 class=\"fas fa-check-circle icon-container\"></i>\r\n      <p class=\"message-container\" m-r-5 m-l-5 [innerHtml]=\"message | translate\"></p>\r\n    </div>\r\n    <div fxLayout=\"column\">\r\n      <button id=\"btnClose\" (click)=\"hide()\" mat-icon-button [attr.aria-label]=\"'common.close' | translate\">\r\n        <span aria-hidden=\"true\">\r\n          <i class=\"fal fa-times fa-lg\"></i>\r\n        </span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <button id=\"sof-ar-nav-btn-menu\" aria-label=\"Menu Button\" mat-icon-button [disableRipple]=\"true\"\r\n          (click)=\"snav.toggle()\" class=\"sof-ar-nav-menu-btn\"\r\n          [class.hidden]=\"!(mobileQuery.matches || settings.allowNavToggle) || settings.hideNavigation\">\r\n    <span *ngIf=\"isNavOpen; else closedIcon\" aria-hidden=\"true\" class=\"sof-ar-nav-menu-icon\">\r\n      <i class=\"{{settings.fontAwesomeMenuIcon}} menu-icon\"></i>\r\n    </span>\r\n    <ng-template #closedIcon>\r\n      <span aria-hidden=\"true\" class=\"sof-ar-nav-menu-icon\">\r\n        <i class=\"{{settings.fontAwesomeMenuIconClosed}} menu-icon\"></i>\r\n      </span>\r\n    </ng-template>\r\n    <span class=\"sr-only\">{{settings.menuButtonSRText | translate}}</span>\r\n  </button>\r\n\r\n  <mat-sidenav-container autosize class=\"sof-ar-nav-sidenav-container\" [style.marginTop.px]=\"\r\n      mobileQuery.matches ? advancedSettings.marginTopMobile : advancedSettings.marginTopDesktop\">\r\n    <mat-sidenav [disableClose]=\"!mobileQuery.matches\" class=\"sof-ar-nav-sidenav\" #snav [mode]=\"mobileQuery.matches ? 'over' : 'side'\"\r\n                 [fixedInViewport]=\"mobileQuery.matches\" [fixedTopGap]=\"mobileQuery.matches ? advancedSettings.topGapMobile : advancedSettings.topGapDesktop\"\r\n                 [opened]=\"!mobileQuery.matches && !settings.hideNavigation && settings.menuStyle!='progress' \"\r\n                 [style.width]=\"mobileQuery.matches ? setNavWidth(settings.sideNavWidthMobile) : setNavWidth(settings.sideNavWidthDesktop)\"\r\n                 [ngStyle]=\"{background:mobileQuery.matches ? themeSettings?.mobileBgColor : undefined}\">\r\n      <ng-container *ngIf=\"mobileQuery.matches && userName && !settings.customUserName\">\r\n        <span class=\"user-name\">\r\n          {{userName}}\r\n        </span>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"mobileQuery.matches && settings.customUserName\">\r\n        <span class=\"user-name\">\r\n          {{settings.customUserName | translate}}\r\n        </span>\r\n      </ng-container>\r\n      <!-- Nav Header Content -->\r\n      <ng-content select=\"[sof-ar-nav-header]\"> </ng-content>\r\n\r\n      <!-- Static Navigation -->\r\n      <div class=\"nav-content-item sidenav-background\" *ngIf=\"settings.menuStyle === 'static'\" [ngStyle]=\"{'padding-bottom.px': (footerItemCount*64)+128}\">\r\n        <ng-container *ngIf=\"settings.menuStyle === 'static'\">\r\n          <ng-container *ngFor=\"let nav of navigationData\">\r\n            <ng-container *ngIf=\"nav?.subNodes?.length && !nav.hidden\">\r\n              <mat-accordion>\r\n                <mat-expansion-panel [expanded]=\"nav.expanded\">\r\n                  <mat-expansion-panel-header [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(nav) }\">\r\n                    <!-- Desktop Nav -->\r\n                    <ng-container>\r\n                      <!-- If there is a route -->\r\n                      <ng-container *ngIf=\"nav?.route\">\r\n                        <mat-nav-list [disableRipple]=\"true\">\r\n                          <a class=\"nav-item\" mat-list-item [routerLink]=\"nav?.route\"\r\n                             [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                            <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                              <span aria-hidden=\"true\" class=\"icon-styling\">\r\n                                <i class=\"{{nav?.fontAwesomeIcon}}\"></i>\r\n                              </span>\r\n                            </ng-container>\r\n                            <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                          </a>\r\n                        </mat-nav-list>\r\n                      </ng-container>\r\n                      <!-- If there is not a route -->\r\n                      <ng-container *ngIf=\"!nav?.route\">\r\n                        <mat-nav-list [disableRipple]=\"true\">\r\n                          <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                                  [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                            <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                              <span aria-hidden=\"true\" class=\"icon-styling\">\r\n                                <i class=\"{{nav?.fontAwesomeIcon}}\"></i>\r\n                              </span>\r\n                            </ng-container>\r\n                            <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                          </button>\r\n                        </mat-nav-list>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </mat-expansion-panel-header>\r\n                  <!-- Desktop SubNav -->\r\n                  <ng-container>\r\n                    <mat-nav-list [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(subnav) }\" class=\"subnav-content\"\r\n                                  [disableRipple]=\"true\" *ngFor=\"let subnav of nav?.subNodes\">\r\n                      <a mat-list-item [routerLinkActive]=\"['sof-ar-nav-sub-active-route']\" [routerLink]=\"subnav.route\">\r\n                        {{subnav.text | translate}}\r\n                      </a>\r\n                    </mat-nav-list>\r\n                  </ng-container>\r\n                </mat-expansion-panel>\r\n              </mat-accordion>\r\n            </ng-container>\r\n            <!-- If subnodes are not there -->\r\n            <ng-container>\r\n              <!-- Desktop Nav -->\r\n              <ng-container *ngIf=\"!nav?.subNodes?.length && !nav?.hidden\">\r\n                <!-- If there is a route -->\r\n                <ng-container *ngIf=\"nav?.route\">\r\n                  <mat-nav-list \r\n                                [ngClass]=\"{ 'sof-ar-nav-selected': isNavSelected(nav) }\" class=\"nav-header\"\r\n                                [disableRipple]=\"true\">\r\n                    <a class=\"nav-item nav-item-margin\" mat-list-item [routerLink]=\"nav?.route\"\r\n                       [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                    </a>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n                <!-- If there is not a route -->\r\n                <ng-container *ngIf=\"!nav?.route\">\r\n                  <mat-nav-list [disableRipple]=\"true\">\r\n                    <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                            [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      <span class=\"sof-ar-nav-header-text\">{{nav.text | translate}}</span>\r\n                    </button>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Stepper -->\r\n      <mat-vertical-stepper *ngIf=\"settings.menuStyle === 'stepper'\" [selectedIndex]=\"selectedParentIndex\" #vertStepper\r\n                            [linear]=\"false\" class=\"sidenav-background\">\r\n        <!-- Alternate step states for nav, icaons should always be white only worked with styles -->\r\n        <ng-template matStepperIcon=\"create\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"edit\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"active\">\r\n          <span>\r\n            <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n        <ng-template matStepperIcon=\"done\">\r\n          <span>\r\n            <i class=\"fas fa-check\" style=\"color: white !important\"></i>\r\n          </span>\r\n        </ng-template>\r\n\r\n        <!-- nav steps -->\r\n        <ng-container *ngFor=\"let nav of navigationData; let i = index\">\r\n          <mat-step *ngIf=\"!nav?.hidden\" state=\"{{ determineStepState(i, -1) }}\">\r\n            <ng-template matStepLabel *ngIf=\"!nav.hidden\">\r\n              <div id=\"divStep{{ i }}\" style=\"height: 72px\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\r\n                   matTooltip=\"{{ nav.text | translate }}\" [matTooltipPosition]=\"'after'\" fxFlex=\"100%\">\r\n                <a id=\"step{{ i }}\" fxFlex=\"100%\" class=\"mat-button step-link\" [routerLink]=\"nav.route\"\r\n                   [ngStyle]=\"{ color: themeSettings?.fontColor }\" [routerLinkActive]=\"['step-active']\">\r\n                  {{ nav.text | translate }}\r\n                </a>\r\n              </div>\r\n            </ng-template>\r\n            <p [innerHTML]=\"nav.stepContent | translate\"></p>\r\n            <!-- sub nav -->\r\n            <mat-vertical-stepper *ngIf=\"nav?.subNodes\" [selectedIndex]=\"selectedChildIndexes[i]\" [linear]=\"false\"\r\n                                  #vertStepperInner>\r\n              <!-- Alternate step states for sub nav, icons should always be white only worked with styles -->\r\n              <ng-template matStepperIcon=\"create\">\r\n                <span>\r\n                  <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"edit\">\r\n                <span>\r\n                  <i class=\"fad fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"done\">\r\n                <span>\r\n                  <i class=\"fas fa-check\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"active\">\r\n                <span>\r\n                  <i class=\"fas fa-pencil-alt\" style=\"color: white !important\"></i>\r\n                </span>\r\n              </ng-template>\r\n              <ng-template matStepperIcon=\"none\">\r\n                <span></span>\r\n              </ng-template>\r\n              <!-- sub nav steps -->\r\n              <ng-container *ngFor=\"let subnav of nav?.subNodes; let j = index\">\r\n                <mat-step state=\"{{ determineStepState(i, j) }}\" *ngIf=\"!subnav.hidden\" >\r\n                  <ng-template matStepLabel>\r\n                    <div id=\"divSubStep{{ i }}-{{ j }}\" style=\"height: 72px\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\r\n                         matTooltip=\"{{ subnav.text | translate }}\" [matTooltipPosition]=\"'after'\" fxFlex=\"100%\">\r\n                      <a id=\"subStep{{ i }}-{{ j }}\" class=\"mat-button step-link\"\r\n                         [ngStyle]=\"{ color: themeSettings?.fontColor }\" [routerLink]=\"subnav.route\"\r\n                         [routerLinkActive]=\"['step-active']\">{{ subnav.text | translate }}</a>\r\n                    </div>\r\n                  </ng-template>\r\n                  <p [innerHTML]=\"subnav.stepContent | translate\"></p>\r\n                </mat-step>\r\n              </ng-container>\r\n              \r\n            </mat-vertical-stepper>\r\n          </mat-step>\r\n        </ng-container>\r\n        \r\n      </mat-vertical-stepper>\r\n\r\n      <!-- Nav Footer -->\r\n      <div class=\"nav-footer-item\">\r\n        <ng-container *ngIf=\"settings.menuStyle === 'static'\">\r\n          <ng-container *ngFor=\"let nav of footerNavigationData\">\r\n            <ng-container>\r\n              <!-- Desktop Nav -->\r\n              <ng-container *ngIf=\"!nav?.subNodes?.length\">\r\n                <!-- If there is a route -->\r\n                <ng-container *ngIf=\"nav?.route\">\r\n                  <mat-nav-list  class=\"nav-header\" [disableRipple]=\"true\">\r\n                    <a class=\"nav-item\" mat-list-item [routerLink]=\"nav?.route\"\r\n                       [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      {{nav.text | translate}}\r\n                    </a>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n                <!-- If there is not a route -->\r\n                <ng-container *ngIf=\"!nav?.route\">\r\n                  <mat-nav-list>\r\n                    <button id=\"sof-ar-nav-btn-node\" class=\"nav-item\" mat-list-item\r\n                            [routerLinkActive]=\"['sof-ar-nav-active-route']\">\r\n                      <ng-container *ngIf=\"nav?.fontAwesomeIcon\">\r\n                        <span aria-hidden=\"true\" class=\"icon-styling\"><i class=\"{{nav?.fontAwesomeIcon}}\"></i></span>\r\n                      </ng-container>\r\n                      {{nav.text | translate}}\r\n                    </button>\r\n                  </mat-nav-list>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-template [ngTemplateOutlet]=\"navigationFooter\">\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- the mobile progress menu-->\r\n      <ng-container *ngIf=\"settings?.menuStyle === 'progress'\">\r\n        <div class=\"sidenav-background\" [ngStyle]=\"{'padding-bottom.px': (footerItemCount*64)+128}\">\r\n          <mat-accordion>\r\n            <div *ngFor=\"let step of navigationData; let i = index\">\r\n              <ng-container *ngIf=\"step.subNodes && step.subNodes.length > 0 && !step.hidden\">\r\n                <mat-expansion-panel hideToggle class=\"progress-mobile-expansion-panel\"\r\n                                     [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" (opened)=\"panelOpenState = true\"\r\n                                     (closed)=\"panelOpenState = false\">\r\n                  <mat-expansion-panel-header>\r\n                    <mat-panel-title class=\"progress-mobile-panel-title\">\r\n                      <div style=\"width: -webkit-fill-available;\"\r\n                           [ngClass]=\"{'disabled':(!step.visited || step.isDisabled) && !settings.overrideNavigation && !step.complete,'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                        <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                        </ng-template>\r\n                        <span *ngIf=\"settings?.displayNumbers\">\r\n                          {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \" }}\r\n                        </span>\r\n                        <span class=\"nav-btn-text\">\r\n                          {{ step.text | translate }}\r\n                        </span>\r\n                        <span *ngIf=\"!panelOpenState\">\r\n                          <i class=\"fas fa-chevron-down panel-icon\"></i>\r\n                        </span>\r\n                        <span *ngIf=\"panelOpenState\">\r\n                          <i class=\"fas fa-chevron-up panel-icon\"></i>\r\n                        </span>\r\n                      </div>\r\n                    </mat-panel-title>\r\n                    <mat-panel-description>\r\n                    </mat-panel-description>\r\n                  </mat-expansion-panel-header>\r\n                  <!-- mobile sub menu -->\r\n                  <div class=\"progress-nav-menu\" *ngFor=\"let subNode of step.subNodes; let idx = index;\" [hidden]=\"step.subNodes[idx].hidden\">\r\n                    <button id=\"mobileMenu{{ idx }}\" mat-button class=\"step-link progress-menu-mobile-btn\"\r\n                            [ngClass]=\"{'color-primary':subNode.complete && subNode!=activeSubNode}\"\r\n                            [routerLinkActive]=\"['progress-menu-active']\" [ngStyle]=\"{ ' color': themeSettings?.fontColor }\"\r\n                            [routerLink]=\"subNode.route\" [disabled]=\"!subNode.visited && !settings.overrideNavigation\">\r\n                      <ng-template [ngTemplateOutlet]=\"progressSubNodeIcons\"\r\n                                   [ngTemplateOutletContext]=\"{subNode:subNode}\">\r\n                      </ng-template>\r\n                      <span class=\"nav-menu-btn-text\" [ngClass]=\"{'disabled':(!subNode.visited) && !settings.overrideNavigation && !subNode.complete,'color-primary':subNode.complete,'progress-menu-active':subNode===activeSubNode}\">{{ subNode.text | translate }}</span>\r\n                    </button>\r\n                  </div>\r\n                </mat-expansion-panel>\r\n              </ng-container>\r\n              <!-- if there are no subNodes -->\r\n              <ng-container *ngIf=\"(!step.subNodes || step.subNodes.length==0) && !step.hidden\">\r\n                <mat-expansion-panel #panel hideToggle (opened)=\"disablePanel(panel,i)\" class=\"progress-mobile-expansion-panel\"\r\n                                     [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\">\r\n                  <mat-expansion-panel-header>\r\n                    <mat-panel-title class=\"progress-mobile-panel-title\">\r\n                      <div [ngClass]=\"{'disabled':(!step.visited || step.isDisabled) && !settings.overrideNavigation && !step.complete,'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                        <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                        </ng-template>\r\n                        <span *ngIf=\"settings?.displayNumbers\">\r\n                          {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \" }}\r\n                        </span>\r\n                        <span class=\"nav-btn-text\">\r\n                          {{ step.text | translate }}\r\n                        </span>\r\n                      </div>\r\n                    </mat-panel-title>\r\n                    <mat-panel-description>\r\n                    </mat-panel-description>\r\n                  </mat-expansion-panel-header>\r\n                </mat-expansion-panel>\r\n              </ng-container>\r\n            </div>\r\n          </mat-accordion>\r\n        </div>\r\n\r\n        <!-- the progress menu language and logout buttons-->\r\n        <div class=\"nav-footer-item progress-footer\">\r\n          <ng-template [ngTemplateOutlet]=\"navigationFooter\">\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <!-- Horizontal Progress -->\r\n      <ng-container *ngIf=\"settings?.menuStyle === 'progress'\">\r\n        <mat-progress-bar *ngIf=\"settings?.showProgressBar\" mode=\"determinate\" [value]=\"navProgressCount\"\r\n                          style=\"height: 9px\" color=\"accent\">\r\n        </mat-progress-bar>\r\n        <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" style=\"justify-content:center !important\" [class.hidden]=\"settings.hideNavigation\">\r\n          <div *ngFor=\"let step of navigationData; let i = index\" class=\"horizontal-progress-div\">\r\n            <ng-container *ngIf=\"!step.subNodes?.length && !step.hidden\">\r\n              <button mat-button [routerLink]=\"step.route\"\r\n                      [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" class=\"progress-menu-btn\"\r\n                      [ngClass]=\"{'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\">\r\n                <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                </ng-template>\r\n                <span *ngIf=\"settings?.displayNumbers\">\r\n                  {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \"}}\r\n                </span>\r\n                <span class=\"nav-btn-text\">{{ step.text | translate }}</span>\r\n              </button>\r\n            </ng-container>\r\n            <!-- if there are subnodes create menus for each step -->\r\n            <ng-container *ngIf=\"step.subNodes && step.subNodes.length && !step.hidden\">\r\n              <button [ngClass]=\"{'color-primary':step.complete && step!=activeParentNode,'progress-menu-active':step===activeParentNode}\"\r\n                      mat-button [disabled]=\"(!step.visited || step.isDisabled) && !settings.overrideNavigation\" class=\"progress-menu-btn\"\r\n                      [matMenuTriggerFor]=\"menu\">\r\n                <ng-template [ngTemplateOutlet]=\"progressParentNodeIcons\" [ngTemplateOutletContext]=\"{step:step}\">\r\n                </ng-template>\r\n                <span *ngIf=\"settings?.displayNumbers\">\r\n                  {{i < 10 ? \"0\" + (i + 1) + \". \" : i + \" . \"}}\r\n                </span>\r\n                <span class=\"nav-btn-text\">{{ step.text | translate }}</span>\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\" class=\"sof-ar-mat-menu progress-menu-panel\">\r\n                <div class=\"progress-nav-menu\" *ngFor=\"let subNode of step.subNodes; let idx = index;\" [ngStyle]=\"{width:settings.progressMenuWidth+'px'}\" [hidden]=\"step.subNodes[idx].hidden\">\r\n                  <button id=\"submenu{{ idx }}\" mat-button class=\"step-link progress-menu-btn\"\r\n                          [ngClass]=\"{'color-primary':subNode.complete && subNode!=activeSubNode,'disabled':!subNode.visited && !settings.overrideNavigation}\"\r\n                          [routerLinkActive]=\"['progress-menu-active']\" [ngStyle]=\"{ ' color': themeSettings?.fontColor }\"\r\n                          [routerLink]=\"subNode.route\" [disabled]=\"!subNode.visited && !settings.overrideNavigation\">\r\n                    <ng-template [ngTemplateOutlet]=\"progressSubNodeIcons\"\r\n                                 [ngTemplateOutletContext]=\"{subNode:subNode}\">\r\n                    </ng-template>\r\n                    <span class=\"nav-menu-btn-text\">{{ subNode.text |translate }}</span>\r\n                  </button>\r\n                </div>\r\n              </mat-menu>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"mobile-progress-container\" fxHide.gt-sm>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-content sof-ar-nav-content></ng-content>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n  <!-- The progress menu parent node icon template-->\r\n  <ng-template #progressParentNodeIcons let-step='step'>\r\n    <span *ngIf=\"step.complete && step != activeParentNode\">\r\n      <i class=\"{{ settings.progressSectionCompleteIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"step === activeParentNode\">\r\n      <i class=\"{{ settings.progressSectionCurrentIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"!step.complete && step != activeParentNode\" [ngClass]=\"{'disabled':!step.visited && !settings.overrideNavigation}\">\r\n      <i class=\"{{ settings.progressSectionFutureIcon }} progress-nav-icon\"></i>\r\n    </span>\r\n  </ng-template>\r\n  <!-- The progress menu sub node icon template-->\r\n  <ng-template #progressSubNodeIcons let-subNode='subNode'>\r\n    <span *ngIf=\"subNode.complete &&activeSubNode !=subNode\">\r\n      <i class=\"{{settings.progressMenuCompleteIcon}} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"activeSubNode ===subNode\">\r\n      <i class=\"{{ settings.progressSectionCurrentIcon }} color-primary progress-nav-icon\"></i>\r\n    </span>\r\n    <span *ngIf=\"!subNode.complete &&activeSubNode !=subNode\" [ngClass]=\"{'disabled':!subNode.visited && !settings.overrideNavigation}\">\r\n      <i class=\"{{ settings.progressSectionFutureIcon }} progress-nav-icon\"></i>\r\n    </span>\r\n  </ng-template>\r\n  <!-- The navigation footer template for language and logout buttons -->\r\n  <ng-template #navigationFooter>\r\n    <ng-content select=\"[sof-ar-nav-mobile-footer]\"> </ng-content>\r\n    <ng-container *ngIf=\"!settings.useCustomMobileFooter\">\r\n    <!-- The language button -->\r\n    <ng-container *ngIf=\"languageSettings?.displayLanguageOptions && languageSettings?.languages.length > 2 && mobileQuery.matches\">\r\n      <button id=\"sof-ar-nav-lang-dropdown\" mat-stroked-button\r\n              class=\"faded-button-50 language-button navigationFooter\" [matMenuTriggerFor]=\"headerLanguageMenu\"\r\n              [attr.aria-label]=\"languageSettings.buttonText | translate\">\r\n        <span aria-hidden=\"true\" class=\"icon-styling\">\r\n          <i class=\"far fa-globe language-globe\"></i>\r\n        </span>\r\n        {{languageSettings.buttonText | translate}}\r\n      </button>\r\n      <mat-menu #headerLanguageMenu=\"matMenu\" class=\"sof-ar-mat-menu\">\r\n        <button mat-menu-item *ngFor=\"let lang of languageSettings.languages\" (click)=\"setLanguage$.emit(lang)\"\r\n                id=\"apply-lang-btn-{{lang}}\">\r\n          <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\">\r\n            <div fxFlex=\"auto\">\r\n              {{ lang | translate }}\r\n            </div>\r\n            <div fxFlex=\"auto\" fxLayoutAlign=\"end end\">\r\n              <i *ngIf=\"currentLang === lang\" class=\"fad fa-check selected-language-icon\"></i>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"languageSettings?.displayLanguageOptions && languageSettings?.languages.length === 2 && mobileQuery.matches\">\r\n      <button *ngIf=\"languageSettings?.languages.length === 2\" id=\"sof-ar-nav-lang-button\" mat-stroked-button\r\n              class=\"faded-button-50 language-button navigationFooter\"\r\n              [attr.aria-label]=\"languageSettings.buttonText | translate\" (click)=\"setLanguage$.emit()\">\r\n        <span aria-hidden=\"true\" class=\"icon-styling\">\r\n          <i class=\"far fa-globe language-globe\"></i>\r\n        </span>\r\n        {{otherLangText | translate}}\r\n      </button>\r\n    </ng-container>\r\n    <!-- The logout button-->\r\n    <ng-container *ngIf=\"mobileQuery.matches && userName\">\r\n      <button id=\"sof-ar-header-lang-button\" mat-stroked-button class=\"navigationFooter\" (click)=\"logOut()\">\r\n        <span aria-hidden=\"true\" class=\"icon-styling\">\r\n          <i class=\"fas fa-sign-out-alt\"></i>\r\n        </span>\r\n        {{logOutText | translate}}\r\n      </button>\r\n    </ng-container>\r\n  </ng-container>\r\n  </ng-template>\r\n</div>\r\n",
                     providers: [{
                             provide: stepper.STEPPER_GLOBAL_OPTIONS,
                             useValue: ɵ0
@@ -4369,11 +4411,9 @@
         /**
          * Constructs the component
          * @param router The router
-         * @param translateService The translate service
          */
-        function SofProgressBarComponent(router, translateService) {
+        function SofProgressBarComponent(router) {
             this.router = router;
-            this.translateService = translateService;
             /** The navigation route keys */
             this.navbarStepKeys = [];
             /** The current active step */
@@ -4385,6 +4425,13 @@
         SofProgressBarComponent.prototype.ngOnInit = function () {
             this.setNavbarTitles();
         };
+        /**
+         * On component @Input() changes
+         * @param changes the changes
+         */
+        SofProgressBarComponent.prototype.ngOnChanges = function (changes) {
+            this.setNavbarTitles();
+        };
         /** Navigates to given step
          * @param stepNumber The step number to navigate to
          */
@@ -4396,12 +4443,16 @@
         /** Sets the progress navigation bar step titles
          */
         SofProgressBarComponent.prototype.setNavbarTitles = function () {
-            var _this = this;
             var tempTitlesArray = [];
             this.navbarStepKeys.forEach(function (key) {
-                var stepKey = key.split("/");
-                var title = _this.translateService.instant('progressBarTitle.' + stepKey[1] + '.' + stepKey[2]);
-                tempTitlesArray.push(title);
+                var stepPath = key.split("/");
+                var stepLanguageKey = "armature.sof-progress-bar.titles";
+                stepPath.forEach(function (step, i) {
+                    if (i !== 0) {
+                        stepLanguageKey = stepLanguageKey + "." + step;
+                    }
+                });
+                tempTitlesArray.push(stepLanguageKey);
             });
             this.navbarTitles = tempTitlesArray;
         };
@@ -4410,13 +4461,13 @@
     SofProgressBarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'sof-progress-bar',
-                    template: "<ng-container *ngIf=\"progressBarType =='slider'\">\r\n  <div class=\"shopping-navbar\"\r\n    [ngStyle]=\"{'background': 'linear-gradient(to right, #407BFF ' \r\n      + (stepActive + 1) / navbarStepKeys.length * 100 + '%, #f0f0f0 ' + (stepActive + 1) / navbarStepKeys.length * 100 + '%)'}\">\r\n  </div>\r\n  <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" fxLayoutAlign=\"center\" fxLayoutGap=\"12%\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"3px\" *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n      [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\">\r\n      <div class=\"step-title\"\r\n        [ngClass]=\"{ 'step-title-active': i == stepActive, 'step-title-done': i < stepActive, 'step-title-not-reached': i > stepActive}\">\r\n        {{ navbarTitles[i] }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div fxHide.gt-sm>\r\n    <mat-select class=\"step-titles-mobile\" disableOptionCentering panelClass=\"step-option\"\r\n      [value]=\"navbarStepKeys[stepActive]\">\r\n      <mat-option *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n        [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\" [disabled]=\"i > stepActive\"\r\n        [value]=\"step\">\r\n        {{ navbarTitles[i] }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"progressBarType =='dot'\">\r\n  <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" fxLayoutAlign=\"center\" fxLayoutGap=\"5%\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"3px\" *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n      [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\">\r\n      <div class=\"dot\" [ngClass]=\"{ 'dot-active': i == stepActive, 'dot-done': i < stepActive}\"></div>\r\n      <div class=\"step-title\"\r\n        [ngClass]=\"{ 'step-title-active': i == stepActive, 'step-title-done': i < stepActive, 'step-title-not-reached': i > stepActive}\">\r\n        {{ navbarTitles[i] }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div fxHide.gt-sm fxLayout=\"row\">\r\n    <div class=\"dot-mobile\"></div>\r\n    <mat-select class=\"sof-stepper step-titles-mobile\" disableOptionCentering panelClass=\"step-option\"\r\n      [value]=\"navbarStepKeys[stepActive]\">\r\n      <mat-option fxHide.gt-sm *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n        [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\" [disabled]=\"i > stepActive\"\r\n        [value]=\"step\">\r\n        <div class=\"dot\" [ngClass]=\"{ 'dot-active': i == stepActive, 'dot-done': i < stepActive}\"></div>\r\n        {{ navbarTitles[i] }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </div>\r\n</ng-container>",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: "<ng-container *ngIf=\"progressBarType =='slider'\">\r\n  <div class=\"shopping-navbar\"\r\n    [ngStyle]=\"{'background': 'linear-gradient(to right, #407BFF ' \r\n      + (stepActive + 1) / navbarStepKeys.length * 100 + '%, #f0f0f0 ' + (stepActive + 1) / navbarStepKeys.length * 100 + '%)'}\">\r\n  </div>\r\n  <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" fxLayoutAlign=\"center\" fxLayoutGap=\"12%\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"3px\" *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n      [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\">\r\n      <div class=\"step-title\"\r\n        [ngClass]=\"{ 'step-title-active': i == stepActive, 'step-title-done': i < stepActive, 'step-title-not-reached': i > stepActive}\">\r\n        {{ navbarTitles[i] | translate }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div fxHide.gt-sm>\r\n    <mat-select class=\"step-titles-mobile\" disableOptionCentering panelClass=\"step-option\"\r\n      [value]=\"navbarStepKeys[stepActive]\">\r\n      <mat-option *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n        [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\" [disabled]=\"i > stepActive\"\r\n        [value]=\"step\">\r\n        {{ navbarTitles[i] | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"progressBarType =='dot'\">\r\n  <div fxHide.lt-md class=\"step-titles center\" fxLayout=\"row\" fxLayoutAlign=\"center\" fxLayoutGap=\"5%\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"3px\" *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n      [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\">\r\n      <div class=\"dot\" [ngClass]=\"{ 'dot-active': i == stepActive, 'dot-done': i < stepActive}\"></div>\r\n      <div class=\"step-title\"\r\n        [ngClass]=\"{ 'step-title-active': i == stepActive, 'step-title-done': i < stepActive, 'step-title-not-reached': i > stepActive}\">\r\n        {{ navbarTitles[i] | translate }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div fxHide.gt-sm fxLayout=\"row\">\r\n    <div class=\"dot-mobile\"></div>\r\n    <mat-select class=\"sof-stepper step-titles-mobile\" disableOptionCentering panelClass=\"step-option\"\r\n      [value]=\"navbarStepKeys[stepActive]\">\r\n      <mat-option fxHide.gt-sm *ngFor=\"let step of navbarStepKeys; let i = index\" (click)=\"navigateToStep(i)\"\r\n        [ngClass]=\"{ 'step-active': i == stepActive, 'step-done': i < stepActive}\" [disabled]=\"i > stepActive\"\r\n        [value]=\"step\">\r\n        <div class=\"dot\" [ngClass]=\"{ 'dot-active': i == stepActive, 'dot-done': i < stepActive}\"></div>\r\n        {{ navbarTitles[i] | translate }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </div>\r\n</ng-container>",
                     styles: ["@charset \"UTF-8\";:root{--accent-color-100-parts:#b2dfdb;--accent-color-100-parts-rgb:178,223,219;--accent-color-200-parts:#80cbc4;--accent-color-200-parts-rgb:128,203,196;--accent-color-300-parts:#4db6ac;--accent-color-300-parts-rgb:77,182,172;--accent-color-400-parts:#26a69a;--accent-color-400-parts-rgb:38,166,154;--accent-color-50-parts:#e0f2f1;--accent-color-50-parts-rgb:224,242,241;--accent-color-500-parts:#009688;--accent-color-500-parts-rgb:0,150,136;--accent-color-600-parts:#00897b;--accent-color-600-parts-rgb:0,137,123;--accent-color-700-parts:#00796b;--accent-color-700-parts-rgb:0,121,107;--accent-color-800-parts:#00695c;--accent-color-800-parts-rgb:0,105,92;--accent-color-900-parts:#004d40;--accent-color-900-parts-rgb:0,77,64;--accent-color-A100-parts:#a7ffeb;--accent-color-A100-parts-rgb:167,255,235;--accent-color-A200-parts:#64ffda;--accent-color-A200-parts-rgb:100,255,218;--accent-color-A400-parts:#1de9b6;--accent-color-A400-parts-rgb:29,233,182;--accent-color-A700-parts:#00bfa5;--accent-color-A700-parts-rgb:0,191,165;--accent-color-contrast-100-parts:#000;--accent-color-contrast-200-parts:#000;--accent-color-contrast-300-parts:#000;--accent-color-contrast-400-parts:#000;--accent-color-contrast-50-parts:#000;--accent-color-contrast-500-parts:#fff;--accent-color-contrast-600-parts:#fff;--accent-color-contrast-700-parts:#fff;--accent-color-contrast-800-parts:#fff;--accent-color-contrast-900-parts:#fff;--accent-color-contrast-A100-parts:#000;--accent-color-contrast-A200-parts:#000;--accent-color-contrast-A400-parts:#000;--accent-color-contrast-A700-parts:#000;--error-color-100-parts:#f8c9c5;--error-color-100-parts-rgb:248,201,197;--error-color-200-parts:#f3a69e;--error-color-200-parts-rgb:248,201,197;--error-color-300-parts:#ee8277;--error-color-300-parts-rgb:238,130,119;--error-color-400-parts:#eb6759;--error-color-400-parts-rgb:235,103,89;--error-color-50-parts:#fceae8;--error-color-50-parts-rgb:252,234,232;--error-color-500-parts:#e74c3c;--error-color-500-parts-rgb:231,76,60;--error-color-600-parts:#e44536;--error-color-600-parts-rgb:228,69,54;--error-color-700-parts:#e03c2e;--error-color-700-parts-rgb:224,60,46;--error-color-800-parts:#dd3327;--error-color-800-parts-rgb:221,51,39;--error-color-900-parts:#d7241a;--error-color-900-parts-rgb:215,36,26;--error-color-A100-parts:#fff;--error-color-A100-parts-rgb:255,255,255;--error-color-A200-parts:#ffd9d7;--error-color-A200-parts-rgb:255,217,215;--error-color-A400-parts:#ffa8a4;--error-color-A400-parts-rgb:255,168,164;--error-color-A700-parts:#ff8f8b;--error-color-A700-parts-rgb:255,143,139;--error-color-contrast-100-parts:rgba(0,0,0,0.87);--error-color-contrast-200-parts:rgba(0,0,0,0.87);--error-color-contrast-300-parts:rgba(0,0,0,0.87);--error-color-contrast-400-parts:rgba(0,0,0,0.87);--error-color-contrast-50-parts:rgba(0,0,0,0.87);--error-color-contrast-500-parts:#fff;--error-color-contrast-600-parts:#fff;--error-color-contrast-700-parts:#fff;--error-color-contrast-800-parts:#fff;--error-color-contrast-900-parts:#fff;--error-color-contrast-A100-parts:rgba(0,0,0,0.87);--error-color-contrast-A200-parts:rgba(0,0,0,0.87);--error-color-contrast-A400-parts:rgba(0,0,0,0.87);--error-color-contrast-A700-parts:rgba(0,0,0,0.87);--info-color-100-parts:#c2e0f4;--info-color-100-parts-rgb:194,224,244;--info-color-200-parts:#9acced;--info-color-200-parts-rgb:154,204,237;--info-color-300-parts:#71b7e6;--info-color-300-parts-rgb:113,183,230;--info-color-400-parts:#52a7e0;--info-color-400-parts-rgb:82,167,224;--info-color-50-parts:#e7f3fb;--info-color-50-parts-rgb:231,243,251;--info-color-500-parts:#3498db;--info-color-500-parts-rgb:52,152,219;--info-color-600-parts:#2f90d7;--info-color-600-parts-rgb:47,144,215;--info-color-700-parts:#2785d2;--info-color-700-parts-rgb:39,133,210;--info-color-800-parts:#217bcd;--info-color-800-parts-rgb:33,123,205;--info-color-900-parts:#156ac4;--info-color-900-parts-rgb:21,106,196;--info-color-A100-parts:#f5f9ff;--info-color-A100-parts-rgb:245,249,255;--info-color-A200-parts:#c2ddff;--info-color-A200-parts-rgb:194,221,255;--info-color-A400-parts:#8fc1ff;--info-color-A400-parts-rgb:143,193,255;--info-color-A700-parts:#75b3ff;--info-color-A700-parts-rgb:117,179,255;--info-color-contrast-100-parts:rgba(0,0,0,0.87);--info-color-contrast-200-parts:rgba(0,0,0,0.87);--info-color-contrast-300-parts:rgba(0,0,0,0.87);--info-color-contrast-400-parts:#fff;--info-color-contrast-50-parts:rgba(0,0,0,0.87);--info-color-contrast-500-parts:#fff;--info-color-contrast-600-parts:#fff;--info-color-contrast-700-parts:#fff;--info-color-contrast-800-parts:#fff;--info-color-contrast-900-parts:#fff;--info-color-contrast-A100-parts:rgba(0,0,0,0.87);--info-color-contrast-A200-parts:rgba(0,0,0,0.87);--info-color-contrast-A400-parts:rgba(0,0,0,0.87);--info-color-contrast-A700-parts:rgba(0,0,0,0.87);--neutral-color-100-parts:#f5f5f5;--neutral-color-100-parts-rgb:245,245,245;--neutral-color-200-parts:#eee;--neutral-color-200-parts-rgb:238,238,238;--neutral-color-300-parts:#e0e0e0;--neutral-color-300-parts-rgb:224,224,224;--neutral-color-400-parts:#bdbdbd;--neutral-color-400-parts-rgb:189,189,189;--neutral-color-50-parts:#fafafa;--neutral-color-50-parts-rgb:250,250,250;--neutral-color-500-parts:#9e9e9e;--neutral-color-500-parts-rgb:158,158,158;--neutral-color-600-parts:#757575;--neutral-color-600-parts-rgb:117,117,117;--neutral-color-700-parts:#616161;--neutral-color-700-parts-rgb:97,97,97;--neutral-color-800-parts:#424242;--neutral-color-800-parts-rgb:66,66,66;--neutral-color-900-parts:#212121;--neutral-color-900-parts-rgb:33,33,33;--neutral-color-A100-parts:#fff;--neutral-color-A100-parts-rgb:255,255,255;--neutral-color-A200-parts:#fff;--neutral-color-A200-parts-rgb:255,255,255;--neutral-color-A400-parts:#fff;--neutral-color-A400-parts-rgb:255,255,255;--neutral-color-A700-parts:#fff;--neutral-color-A700-parts-rgb:255,255,255;--neutral-color-contrast-100-parts:rgba(0,0,0,0.87);--neutral-color-contrast-200-parts:rgba(0,0,0,0.87);--neutral-color-contrast-300-parts:rgba(0,0,0,0.87);--neutral-color-contrast-400-parts:rgba(0,0,0,0.87);--neutral-color-contrast-50-parts:rgba(0,0,0,0.87);--neutral-color-contrast-500-parts:#fff;--neutral-color-contrast-600-parts:#fff;--neutral-color-contrast-700-parts:#fff;--neutral-color-contrast-800-parts:#fff;--neutral-color-contrast-900-parts:#fff;--neutral-color-contrast-A100-parts:rgba(0,0,0,0.87);--neutral-color-contrast-A200-parts:rgba(0,0,0,0.87);--neutral-color-contrast-A400-parts:rgba(0,0,0,0.87);--neutral-color-contrast-A700-parts:rgba(0,0,0,0.87);--primary-color-100-parts:#b9d4fc;--primary-color-100-parts-rgb:185,212,252;--primary-color-200-parts:#8ab7fb;--primary-color-200-parts-rgb:138,183,251;--primary-color-300-parts:#5b9af9;--primary-color-300-parts-rgb:91,154,249;--primary-color-400-parts:#3784f7;--primary-color-400-parts-rgb:55,132,247;--primary-color-50-parts:#edf4ff;--primary-color-50-parts-rgb:237,244,255;--primary-color-500-parts:#146ef6;--primary-color-500-parts-rgb:20,110,246;--primary-color-600-parts:#1266f5;--primary-color-600-parts-rgb:18,102,245;--primary-color-700-parts:#0e5bf3;--primary-color-700-parts-rgb:14,91,243;--primary-color-800-parts:#0b51f2;--primary-color-800-parts-rgb:11,81,242;--primary-color-900-parts:#063fef;--primary-color-900-parts-rgb:6,63,239;--primary-color-A100-parts:#fff;--primary-color-A100-parts-rgb:255,255,255;--primary-color-A200-parts:#e4e9ff;--primary-color-A200-parts-rgb:228,233,255;--primary-color-A400-parts:#b1c0ff;--primary-color-A400-parts-rgb:177,192,255;--primary-color-A700-parts:#97acff;--primary-color-A700-parts-rgb:151,172,255;--primary-color-contrast-100-parts:rgba(0,0,0,0.87);--primary-color-contrast-200-parts:rgba(0,0,0,0.87);--primary-color-contrast-300-parts:rgba(0,0,0,0.87);--primary-color-contrast-400-parts:#fff;--primary-color-contrast-50-parts:rgba(0,0,0,0.87);--primary-color-contrast-500-parts:#fff;--primary-color-contrast-600-parts:#fff;--primary-color-contrast-700-parts:#fff;--primary-color-contrast-800-parts:#fff;--primary-color-contrast-900-parts:#fff;--primary-color-contrast-A100-parts:rgba(0,0,0,0.87);--primary-color-contrast-A200-parts:rgba(0,0,0,0.87);--primary-color-contrast-A400-parts:rgba(0,0,0,0.87);--primary-color-contrast-A700-parts:rgba(0,0,0,0.87);--success-color-100-parts:#d1e6ce;--success-color-100-parts-rgb:209,230,206;--success-color-200-parts:#b3d6ae;--success-color-200-parts-rgb:179,214,174;--success-color-300-parts:#95c58d;--success-color-300-parts-rgb:149,197,141;--success-color-400-parts:#7eb874;--success-color-400-parts-rgb:126,184,116;--success-color-50-parts:#edf5eb;--success-color-50-parts-rgb:237,245,235;--success-color-500-parts:#67ac5c;--success-color-500-parts-rgb:103,172,92;--success-color-600-parts:#5fa554;--success-color-600-parts-rgb:95,165,84;--success-color-700-parts:#549b4a;--success-color-700-parts-rgb:84,155,74;--success-color-800-parts:#4a9241;--success-color-800-parts-rgb:74,146,65;--success-color-900-parts:#398230;--success-color-900-parts-rgb:57,130,48;--success-color-A100-parts:#d0ffcb;--success-color-A100-parts-rgb:208,255,203;--success-color-A200-parts:#a2ff98;--success-color-A200-parts-rgb:162,255,152;--success-color-A400-parts:#74ff65;--success-color-A400-parts-rgb:116,255,101;--success-color-A700-parts:#5dff4c;--success-color-A700-parts-rgb:93,255,76;--success-color-contrast-100-parts:rgba(0,0,0,0.87);--success-color-contrast-200-parts:rgba(0,0,0,0.87);--success-color-contrast-300-parts:rgba(0,0,0,0.87);--success-color-contrast-400-parts:rgba(0,0,0,0.87);--success-color-contrast-50-parts:rgba(0,0,0,0.87);--success-color-contrast-500-parts:rgba(0,0,0,0.87);--success-color-contrast-600-parts:rgba(0,0,0,0.87);--success-color-contrast-700-parts:#fff;--success-color-contrast-800-parts:#fff;--success-color-contrast-900-parts:#fff;--success-color-contrast-A100-parts:rgba(0,0,0,0.87);--success-color-contrast-A200-parts:rgba(0,0,0,0.87);--success-color-contrast-A400-parts:rgba(0,0,0,0.87);--success-color-contrast-A700-parts:rgba(0,0,0,0.87);--warn-color-100-parts:#fbe1c3;--warn-color-100-parts-rgb:251,225,195;--warn-color-200-parts:#f9ce9c;--warn-color-200-parts-rgb:249,206,156;--warn-color-300-parts:#f6ba74;--warn-color-300-parts-rgb:246,186,116;--warn-color-400-parts:#f4ab56;--warn-color-400-parts-rgb:244,171,86;--warn-color-50-parts:#fdf3e7;--warn-color-50-parts-rgb:253,243,231;--warn-color-500-parts:#f29c38;--warn-color-500-parts-rgb:242,156,56;--warn-color-600-parts:#f09432;--warn-color-600-parts-rgb:240,148,50;--warn-color-700-parts:#ee8a2b;--warn-color-700-parts-rgb:238,138,43;--warn-color-800-parts:#ec8024;--warn-color-800-parts-rgb:236,128,36;--warn-color-900-parts:#e86e17;--warn-color-900-parts-rgb:232,110,23;--warn-color-A100-parts:#fff;--warn-color-A100-parts-rgb:255,255,255;--warn-color-A200-parts:#fff0e6;--warn-color-A200-parts-rgb:255,240,230;--warn-color-A400-parts:#ffd0b3;--warn-color-A400-parts-rgb:255,208,179;--warn-color-A700-parts:#ffc19a;--warn-color-A700-parts-rgb:255,193,154;--warn-color-contrast-100-parts:rgba(0,0,0,0.87);--warn-color-contrast-200-parts:rgba(0,0,0,0.87);--warn-color-contrast-300-parts:rgba(0,0,0,0.87);--warn-color-contrast-400-parts:rgba(0,0,0,0.87);--warn-color-contrast-50-parts:rgba(0,0,0,0.87);--warn-color-contrast-500-parts:rgba(0,0,0,0.87);--warn-color-contrast-600-parts:rgba(0,0,0,0.87);--warn-color-contrast-700-parts:rgba(0,0,0,0.87);--warn-color-contrast-800-parts:rgba(0,0,0,0.87);--warn-color-contrast-900-parts:rgba(0,0,0,0.87);--warn-color-contrast-A100-parts:rgba(0,0,0,0.87);--warn-color-contrast-A200-parts:rgba(0,0,0,0.87);--warn-color-contrast-A400-parts:rgba(0,0,0,0.87);--warn-color-contrast-A700-parts:rgba(0,0,0,0.87)}.mat-badge-content{font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;font-weight:600}.mat-badge-small .mat-badge-content{font-size:9px}.mat-badge-large .mat-badge-content{font-size:24px}.mat-h1,.mat-headline,.mat-typography h1{font:400 24px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h2,.mat-title,.mat-typography h2{font:500 20px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h3,.mat-subheading-2,.mat-typography h3{font:400 16px/28px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h4,.mat-subheading-1,.mat-typography h4{font:400 15px/24px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h5,.mat-typography h5{font:400 11.62px/20px Roboto,Helvetica Neue,sans-serif;margin:0 0 12px}.mat-h6,.mat-typography h6{font:400 9.38px/20px Roboto,Helvetica Neue,sans-serif;margin:0 0 12px}.mat-body-2,.mat-body-strong{font:500 14px/24px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-body,.mat-body-1,.mat-typography{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-body-1 p,.mat-body p,.mat-typography p{margin:0 0 12px}.mat-caption,.mat-small{font:400 12px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-display-4,.mat-typography .mat-display-4{font:300 112px/112px Roboto,Helvetica Neue,sans-serif;letter-spacing:-.05em;margin:0 0 56px}.mat-display-3,.mat-typography .mat-display-3{font:400 56px/56px Roboto,Helvetica Neue,sans-serif;letter-spacing:-.02em;margin:0 0 64px}.mat-display-2,.mat-typography .mat-display-2{font:400 45px/48px Roboto,Helvetica Neue,sans-serif;letter-spacing:-.005em;margin:0 0 64px}.mat-display-1,.mat-typography .mat-display-1{font:400 34px/40px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0 0 64px}.mat-bottom-sheet-container{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-button,.mat-fab,.mat-flat-button,.mat-icon-button,.mat-mini-fab,.mat-raised-button,.mat-stroked-button{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:500}.mat-button-toggle,.mat-card{font-family:Roboto,Helvetica Neue,sans-serif}.mat-card-title{font-size:24px;font-weight:500}.mat-card-header .mat-card-title{font-size:20px}.mat-card-content,.mat-card-subtitle{font-size:14px}.mat-checkbox{font-family:Roboto,Helvetica Neue,sans-serif}.mat-checkbox-layout .mat-checkbox-label{line-height:24px}.mat-chip{font-size:14px;font-weight:500}.mat-chip .mat-chip-remove.mat-icon,.mat-chip .mat-chip-trailing-icon.mat-icon{font-size:18px}.mat-table{font-family:Roboto,Helvetica Neue,sans-serif}.mat-header-cell{font-size:12px;font-weight:500}.mat-cell,.mat-footer-cell{font-size:14px}.mat-calendar{font-family:Roboto,Helvetica Neue,sans-serif}.mat-calendar-body{font-size:13px}.mat-calendar-body-label,.mat-calendar-period-button{font-size:14px;font-weight:500}.mat-calendar-table-header th{font-size:11px;font-weight:400}.mat-dialog-title{font:500 20px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-expansion-panel-header{font-family:Roboto,Helvetica Neue,sans-serif;font-size:15px;font-weight:400}.mat-expansion-panel-content{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-form-field{font-family:Roboto,Helvetica Neue,sans-serif;font-size:inherit;font-weight:400;letter-spacing:normal;line-height:1.125}.mat-form-field-wrapper{padding-bottom:1.34375em}.mat-form-field-prefix .mat-icon,.mat-form-field-suffix .mat-icon{font-size:150%;line-height:1.125}.mat-form-field-prefix .mat-icon-button,.mat-form-field-suffix .mat-icon-button{height:1.5em;width:1.5em}.mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field-suffix .mat-icon-button .mat-icon{height:1.125em;line-height:1.125}.mat-form-field-infix{border-top:.84375em solid transparent;padding:.5em 0}.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.34375em) scale(.75);width:133.3333333333%}.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.34374em) scale(.75);width:133.3333433333%}.mat-form-field-label-wrapper{padding-top:.84375em;top:-.84375em}.mat-form-field-label{top:1.34375em}.mat-form-field-underline{bottom:1.34375em}.mat-form-field-subscript-wrapper{font-size:75%;margin-top:.6666666667em;top:calc(100% - 1.79167em)}.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:1.25em}.mat-form-field-appearance-legacy .mat-form-field-infix{padding:.4375em 0}.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{-ms-transform:translateY(-1.28125em) scale(.75);transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.001px);width:133.3333333333%}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{-ms-transform:translateY(-1.28124em) scale(.75);transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00101px);width:133.3333433333%}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{-ms-transform:translateY(-1.28123em) scale(.75);transform:translateY(-1.28125em) scale(.75) perspective(100px) translateZ(.00102px);width:133.3333533333%}.mat-form-field-appearance-legacy .mat-form-field-label{top:1.28125em}.mat-form-field-appearance-legacy .mat-form-field-underline{bottom:1.25em}.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper{margin-top:.5416666667em;top:calc(100% - 1.66667em)}@media print{.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28122em) scale(.75)}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28121em) scale(.75)}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.2812em) scale(.75)}}.mat-form-field-appearance-fill .mat-form-field-infix{padding:.25em 0 .75em}.mat-form-field-appearance-fill .mat-form-field-label{margin-top:-.5em;top:1.09375em}.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-.59375em) scale(.75);width:133.3333333333%}.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-.59374em) scale(.75);width:133.3333433333%}.mat-form-field-appearance-outline .mat-form-field-infix{padding:1em 0}.mat-form-field-appearance-outline .mat-form-field-label{margin-top:-.25em;top:1.84375em}.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.59375em) scale(.75);width:133.3333333333%}.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.59374em) scale(.75);width:133.3333433333%}.mat-grid-tile-footer,.mat-grid-tile-header{font-size:14px}.mat-grid-tile-footer .mat-line,.mat-grid-tile-header .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-grid-tile-footer .mat-line:nth-child(n+2),.mat-grid-tile-header .mat-line:nth-child(n+2){font-size:12px}input.mat-input-element{margin-top:-.0625em}.mat-menu-item{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.mat-paginator,.mat-paginator-page-size .mat-select-trigger{font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px}.mat-radio-button,.mat-select{font-family:Roboto,Helvetica Neue,sans-serif}.mat-select-trigger{height:1.125em}.mat-slide-toggle-content,.mat-slider-thumb-label-text{font-family:Roboto,Helvetica Neue,sans-serif}.mat-slider-thumb-label-text{font-size:12px;font-weight:500}.mat-stepper-horizontal,.mat-stepper-vertical{font-family:Roboto,Helvetica Neue,sans-serif}.mat-step-label{font-size:14px;font-weight:400}.mat-step-sub-label-error{font-weight:400}.mat-step-label-error{font-size:14px}.mat-step-label-selected{font-size:14px;font-weight:500}.mat-tab-group,.mat-tab-label,.mat-tab-link{font-family:Roboto,Helvetica Neue,sans-serif}.mat-tab-label,.mat-tab-link{font-size:14px;font-weight:500}.mat-toolbar,.mat-toolbar h1,.mat-toolbar h2,.mat-toolbar h3,.mat-toolbar h4,.mat-toolbar h5,.mat-toolbar h6{font:500 20px/32px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;margin:0}.mat-tooltip{font-family:Roboto,Helvetica Neue,sans-serif;font-size:10px;padding-bottom:6px;padding-top:6px}.mat-tooltip-handset{font-size:14px;padding-bottom:8px;padding-top:8px}.mat-list-item,.mat-list-option{font-family:Roboto,Helvetica Neue,sans-serif}.mat-list-base .mat-list-item{font-size:16px}.mat-list-base .mat-list-item .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base .mat-list-item .mat-line:nth-child(n+2){font-size:14px}.mat-list-base .mat-list-option{font-size:16px}.mat-list-base .mat-list-option .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base .mat-list-option .mat-line:nth-child(n+2){font-size:14px}.mat-list-base .mat-subheader{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:500}.mat-list-base[dense] .mat-list-item{font-size:12px}.mat-list-base[dense] .mat-list-item .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base[dense] .mat-list-item .mat-line:nth-child(n+2),.mat-list-base[dense] .mat-list-option{font-size:12px}.mat-list-base[dense] .mat-list-option .mat-line{box-sizing:border-box;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-list-base[dense] .mat-list-option .mat-line:nth-child(n+2){font-size:12px}.mat-list-base[dense] .mat-subheader{font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;font-weight:500}.mat-option{font-family:Roboto,Helvetica Neue,sans-serif;font-size:16px}.mat-optgroup-label{font:500 14px/24px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal}.mat-simple-snackbar{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px}.mat-simple-snackbar-action{font-family:inherit;font-size:inherit;font-weight:500;line-height:1}.mat-tree{font-family:Roboto,Helvetica Neue,sans-serif}.mat-nested-tree-node,.mat-tree-node{font-size:14px;font-weight:400}.mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{border-radius:50%;pointer-events:none;position:absolute;transform:scale(0);transition:opacity,transform 0ms cubic-bezier(0,0,.2,1)}.cdk-high-contrast-active .mat-ripple-element{display:none}.cdk-visually-hidden{-moz-appearance:none;-webkit-appearance:none;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;outline:0;overflow:hidden;padding:0;position:absolute;width:1px}.cdk-global-overlay-wrapper,.cdk-overlay-container{height:100%;left:0;pointer-events:none;top:0;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper,.cdk-overlay-pane{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{box-sizing:border-box;max-height:100%;max-width:100%;pointer-events:auto}.cdk-overlay-backdrop{-webkit-tap-highlight-color:transparent;bottom:0;left:0;opacity:0;pointer-events:auto;position:absolute;right:0;top:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1);z-index:1000}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}@media screen and (-ms-high-contrast:active){.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{display:flex;flex-direction:column;min-height:1px;min-width:1px;position:absolute;z-index:1000}.cdk-global-scrollblock{overflow-y:scroll;position:fixed;width:100%}@-webkit-keyframes cdk-text-field-autofill-start{\n  /*!*/}@keyframes cdk-text-field-autofill-start{\n  /*!*/}@-webkit-keyframes cdk-text-field-autofill-end{\n  /*!*/}@keyframes cdk-text-field-autofill-end{\n  /*!*/}.cdk-text-field-autofill-monitored:-webkit-autofill{-webkit-animation:cdk-text-field-autofill-start 0s 1ms;animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){-webkit-animation:cdk-text-field-autofill-end 0s 1ms;animation:cdk-text-field-autofill-end 0s 1ms}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{box-sizing:content-box!important;height:auto!important;overflow:hidden!important;padding:2px 0!important}textarea.cdk-textarea-autosize-measuring-firefox{box-sizing:content-box!important;height:0!important;padding:2px 0!important}.mat-focus-indicator,.mat-mdc-focus-indicator{position:relative}@media not screen and (max-width:959px){.shopping-navbar{height:8px}}.step-titles{font-family:Poppins,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:600!important;letter-spacing:.25px!important;line-height:24px!important;margin-left:16px!important;padding-bottom:20px;padding-top:20px}.step-titles-mobile{background-color:var(--primary-color-50-parts);height:48px!important;padding-bottom:10px;padding-top:10px}.step-titles-mobile ::ng-deep .mat-select-trigger{font-weight:700;padding-left:50px;padding-right:20px}.step-active,.step-done{font-weight:700}.step-done{color:#000;cursor:pointer}::ng-deep .cdk-overlay-container .cdk-overlay-pane{transform:none!important}::ng-deep .cdk-overlay-container .cdk-overlay-pane .step-option{background:#edf4ff!important;margin-top:58px!important}::ng-deep .cdk-overlay-container .cdk-overlay-pane .step-option .mat-option-disabled{color:#000;opacity:1%}::ng-deep mat-select.sof-stepper div.mat-select-value span.mat-select-value-text{color:rgba(0,0,0,.87)!important;font-family:Poppins,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:600!important;letter-spacing:.25px!important;line-height:24px!important}::ng-deep mat-select.sof-stepper div.mat-select-value{padding-top:12px!important}.dot{align-self:center;background-color:#fff;border:2px solid #979797;border-radius:50%;display:inline-block;height:6px;width:6px}@media only screen and (max-width:959px){.dot{margin-right:20px}}.dot-mobile{border:none;border-radius:50%;display:inline-block;margin-left:17px;margin-top:30px;position:absolute}.dot-active,.dot-mobile{background-color:var(--primary-color-500-parts);height:8px;width:8px}.dot-active,.dot-done{align-self:center;border:none}.dot-done{background-color:var(--primary-color-500-parts);color:#fff;font-size:12px;font-weight:900;height:16px;line-height:16px;margin-left:3px;position:relative;text-align:center;vertical-align:top;width:16px}.dot-done:before{content:\"\uF00C\";display:none;font:var(--fa-font-solid)}.dot-done:after{content:\"\";z-index:-1}@media only screen and (max-width:959px){.dot-done{background-color:var(--primary-color-500-parts);border:none;height:10px;width:10px}.dot-done:before{content:\"\"}.dot-done:after{content:\"\";z-index:-1}}.step-title{font-family:Poppins,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:600!important;letter-spacing:.25px!important;line-height:24px!important;margin-left:16px!important}.step-title-active{color:rgba(0,0,0,.87)!important}.step-title-not-reached{color:rgba(0,0,0,.6)!important}.step-title-done{color:var(--primary-color-500-parts)!important}"]
                 },] }
     ];
     SofProgressBarComponent.ctorParameters = function () { return [
-        { type: i1$1.Router },
-        { type: i2.TranslateService }
+        { type: i1$1.Router }
     ]; };
     SofProgressBarComponent.propDecorators = {
         navbarStepKeys: [{ type: i0.Input }],
@@ -6254,6 +6305,173 @@
     /** Public API surfce for components */
+    /** SSN Pipe */
+    var SofSsnPipe = /** @class */ (function () {
+        function SofSsnPipe() {
+        }
+        /**
+         * Transform
+         * @param ssn SSN
+         */
+        SofSsnPipe.prototype.transform = function (ssn, maskedCharacter) {
+            // If input is undefined, then return itself
+            if (!ssn || ssn.length !== 9) {
+                return null;
+            }
+            if (!maskedCharacter) {
+                return ssn.substring(0, 3) + "-" + ssn.substring(3, 5) + "-" + ssn.substring(5);
+            }
+            return "" + maskedCharacter + maskedCharacter + maskedCharacter + "-" + maskedCharacter + maskedCharacter + "-" + ssn.substring(5);
+        };
+        return SofSsnPipe;
+    }());
+    SofSsnPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'sofArSsn'
+                },] }
+    ];
+    /** The override for blank langauge */
+    var SOF_BLANK_LANGUAGE_OVERRIDE = new i0.InjectionToken('SofBlankLanguageOverride');
+    /** Sof Date Pipe Formats */
+    var SOF_DATE_PIPE_FORMATS = new i0.InjectionToken('SofDatePipeFormats');
+    /** Default Sof Date Pipe Formats */
+    var DEFAULT_SOF_DATE_PIPE_FORMATS = [{
+            format: 'MM/DD/YYYY',
+            matchRegExp: '^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$'
+        }, {
+            format: 'YYYY-MM-DD',
+            matchRegExp: '^[0-9]{4}-[0-9]{2}-[0-9]{2}'
+        }, {
+            format: 'YYYYMMDD',
+            matchRegExp: '^[0-9]{8}$'
+        }];
+    /** Date Pipe */
+    var SofDatePipe = /** @class */ (function () {
+        /** Constructor */
+        function SofDatePipe(datePipe, datePipeFormats) {
+            if (datePipeFormats === void 0) { datePipeFormats = []; }
+            this.datePipe = datePipe;
+            this.datePipeFormats = datePipeFormats;
+            this.datePipeFormats = (datePipeFormats || []).concat(DEFAULT_SOF_DATE_PIPE_FORMATS);
+        }
+        /** Transform */
+        SofDatePipe.prototype.transform = function (date, transformFormat, timezone, locale) {
+            if (transformFormat === void 0) { transformFormat = 'M/d/yyyy'; }
+            if (!date) {
+                return '';
+            }
+            if (moment.isMoment(date)) {
+                date = date.toDate();
+            }
+            if (typeof date === 'string') {
+                date = this.parseDate(date) || date;
+            }
+            return this.datePipe.transform(date, transformFormat, timezone, locale);
+        };
+        /**
+         * Parses a date to a string
+         * @param dateStr Date string
+        */
+        SofDatePipe.prototype.parseDate = function (dateStr) {
+            var e_1, _a;
+            if (!dateStr || dateStr === '') {
+                return undefined;
+            }
+            try {
+                for (var _b = __values(this.datePipeFormats), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var datePipeFormat = _c.value;
+                    if (dateStr.match(datePipeFormat.matchRegExp)) {
+                        var momentDate = moment__namespace(dateStr, datePipeFormat.format);
+                        if (momentDate.isValid()) {
+                            return momentDate.toDate();
+                        }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            console.warn("Unable to parse " + dateStr + " to date using sof-date-pipe.");
+        };
+        return SofDatePipe;
+    }());
+    SofDatePipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'sofArDate'
+                },] }
+    ];
+    SofDatePipe.ctorParameters = function () { return [
+        { type: common.DatePipe },
+        { type: Array, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [SOF_DATE_PIPE_FORMATS,] }] }
+    ]; };
+    /** Blank Pipe for strings when its blank */
+    var SofBlankPipe = /** @class */ (function () {
+        /**
+         * Constructor
+         * @param blankLanguage The language to replace with when given value is blank
+         */
+        function SofBlankPipe(blankLanguage) {
+            if (blankLanguage === void 0) { blankLanguage = ''; }
+            this.blankLanguage = blankLanguage;
+            this.blankLanguage = blankLanguage || 'common.default-blank';
+        }
+        /**
+         * Transform
+         * @param value Value
+         * @returns
+         */
+        SofBlankPipe.prototype.transform = function (value) {
+            if (value == '0' || value === 0) {
+                return value;
+            }
+            return value || this.blankLanguage;
+        };
+        return SofBlankPipe;
+    }());
+    SofBlankPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'sofArBlank'
+                },] }
+    ];
+    SofBlankPipe.ctorParameters = function () { return [
+        { type: String, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [SOF_BLANK_LANGUAGE_OVERRIDE,] }] }
+    ]; };
+    var SofPipeModule = /** @class */ (function () {
+        function SofPipeModule() {
+        }
+        return SofPipeModule;
+    }());
+    SofPipeModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        SofBlankPipe,
+                        SofDatePipe,
+                        SofSsnPipe
+                    ],
+                    imports: [
+                        common.CommonModule
+                    ],
+                    exports: [
+                        SofBlankPipe,
+                        SofDatePipe,
+                        SofSsnPipe
+                    ],
+                    providers: [
+                        common.DatePipe
+                    ]
+                },] }
+    ];
+    /** Public API surface for the forms */
     /** Public API Surface of armature */
     /**
@@ -6329,6 +6547,8 @@
     exports.RumModule = RumModule;
     exports.RumService = RumService;
     exports.SESSION_CONFIG = SESSION_CONFIG;
+    exports.SOF_BLANK_LANGUAGE_OVERRIDE = SOF_BLANK_LANGUAGE_OVERRIDE;
+    exports.SOF_DATE_PIPE_FORMATS = SOF_DATE_PIPE_FORMATS;
     exports.SamlModule = SamlModule;
     exports.SamlService = SamlService;
     exports.ServerCacheService = ServerCacheService;
@@ -6339,8 +6559,12 @@
     exports.SofAddressComponent = SofAddressComponent;
     exports.SofAlertComponent = SofAlertComponent;
     exports.SofBannerComponent = SofBannerComponent;
+    exports.SofBlankPipe = SofBlankPipe;
+    exports.SofDatePipe = SofDatePipe;
     exports.SofModalComponent = SofModalComponent;
+    exports.SofPipeModule = SofPipeModule;
     exports.SofProgressBarComponent = SofProgressBarComponent;
+    exports.SofSsnPipe = SofSsnPipe;
     exports.SoftheonErrorHandlerService = SoftheonErrorHandlerService;
     exports.SsoGatewayEntryService = SsoGatewayEntryService;
     exports.SsoGatewayModel = SsoGatewayModel;