@softheon/armature 10.31.2 → 10.31.3

package/bundles/softheon-armature.umd.js

@@ -3729,6 +3729,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 +3753,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 +3913,9 @@
                     });
                 });
             }
+            this.sideNavSub = this.sidenav.openedChange.subscribe(function (drawerState) {
+                _this.isNavOpen = drawerState;
+            });
         };
         /** On Destroy */
         ArmatureNavigationComponent.prototype.ngOnDestroy = function () {
@@ -3917,6 +3924,7 @@
             this.logInSubscription.unsubscribe();
             this.bannerSubscription.unsubscribe();
             this.configSubscription.unsubscribe();
+            this.sideNavSub.unsubscribe();
         };
         /**
          * Mobile SubNav - open the SubNav
@@ -4192,7 +4200,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