@softheon/armature 10.34.3 → 10.36.0

package/README.md

@@ -1775,3 +1775,75 @@ The selector indicates how the dom will be searched for html elements
 | -------- | -------- | ----------------- | ------------------------------------------------------------------- |
 | name     | `string` | any css attribute | The name of the css attribute to modify on returned elements styles |
 | value    | `string` | any string        | The value to set for the css attribute                              |
+
+## Saving/Printing a specified component
+
+This section will describe how any component for an application can be saved/printed
+
+### Setup
+
+There are few steps that must be done in order to use this functionality
+
+__First__: In the module that will be using this functionality include the following import
+
+```javascript
+import { SofArComponentSavePrintModule } from '@softheon/armature';
+
+@ngModule({
+  declarations: [...],
+  imports: [
+    ...
+    SofArComponentSavePrintModule
+    ...
+  ]
+})
+
+```
+
+__Last__: Include the following component in a component that will be on the page at the time the user will select to save/print. This can be done in the app.component.ts or in a specific route in the application.
+
+```html
+<sof-ar-component-save-print></sof-ar-component-save-print>
+```
+
+### Usage
+
+In this example, the print command will be executed by an application defined button in a component. The save/print functionality is not limited to a component, it can be executed from a service/directive/pipe etc.
+
+```javascript
+import { Component, OnInit } from '@angular/core';
+import { ComponentSavePrintService } from '@softheon/armature';
+import { SomeOtherComponent } from './some/local/component/location';
+
+/** The save print component */
+@Component({
+  selector: 'app-save-print',
+  templateUrl: './save-print.component.html',
+  styleUrls: ['./save-print.component.scss']
+})
+export class SavePrintComponent implements OnInit {
+
+  /**
+   * The constructor
+   * @param componentSavePrintService The save/print component service
+   */
+  constructor(
+    private readonly componentSavePrintService: ComponentSavePrintService
+  ) { }
+
+  /** Angular life cycle hook for component initialization */
+  public ngOnInit(): void {
+  }
+
+  /** Downloads the pdf of the page */
+  public downloadPdf(): void {
+    this.componentSavePrintService.savePrintComponent(SomeOtherComponent);
+  }
+}
+```
+
+The `savePrintComponent` function takes the type of component that will be saved/printed as the only argument. This component does not have to be the same as the component executing the save/print function, it can be any component in the application including routes.
+
+### Limitations
+
+There is currently no way to pass in custom inputs to the component being save/printed. This can be prevented by having a component host the component in question with the correct default inputs and providing the host component to the function rather the desired component.

package/assets/styles/sof-styles.scss

@@ -16,21 +16,17 @@ body {
   margin: 0 !important;
 }
 
-h1.merriweather {
-  font-family: "Merriweather", serif;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 34px;
-  line-height: 48px;
-  letter-spacing: normal;
-  margin: 0px;
-  padding: 0px;
-  @media only screen and (max-width: $screen-sm-end) {
-    font-size: 28px;
-  }
+.merriweather {
+  font-family: "Merriweather", serif !important;
+}
+
+.poppins {
+  font-family: "Poppins", sans-serif !important;
 }
 
-h1.poppins {
+.h1,
+[h1],
+h1 {
   font-family: "Poppins", sans-serif;
   font-style: normal;
   font-weight: normal;

package/bundles/softheon-armature.umd.js

@@ -983,7 +983,6 @@
                 logOutText: 'SIGN OUT',
                 redirectUri: 'http://localhost:4200/',
                 skipIssuerCheck: true,
-                authBtnAriaText: 'aria button text',
                 postLogOutUrl: 'http://localhost:4200/',
                 loginUrl: '',
                 returnRoute: '',
@@ -2229,7 +2228,7 @@
     ArmatureFooterComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'sof-ar-footer',
-                    template: "<footer role=\"contentinfo\" class=\"sof-ar-footer-container\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\" style=\"width: 100%\" fxLayoutGap=\"10px\">\r\n    <div fxFlex=\"100%\" style=\"width: 100%\" fxLayoutAlign=\"center center\" *ngIf=\"footerConfig.showPreContent1\">\r\n      <ng-content select=\"[sof-ar-footer-pre-content-1]\"></ng-content>\r\n    </div>\r\n    <div fxFlex=\"100%\" style=\"width: 100%\" *ngIf=\"footerConfig.showPreContent1\">\r\n      <hr />\r\n    </div>\r\n    <div fxFlex=\"100%\" style=\"width: 100%\" fxLayoutAlign=\"center center\" *ngIf=\"footerConfig.showPreContent2\">\r\n      <ng-content select=\"[sof-ar-footer-pre-content-2]\"></ng-content>\r\n    </div>\r\n    <div fxFlex=\"100%\" style=\"width: 100%\" *ngIf=\"footerConfig.showPreContent2\">\r\n      <hr />\r\n    </div>\r\n  </div>\r\n  <ng-content select=\"[sof-ar-footer-content]\"></ng-content>\r\n</footer>\r\n",
+                    template: "<footer role=\"contentinfo\" class=\"sof-ar-footer-container\">\r\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\" style=\"width: 100%\" fxLayoutGap=\"10px\">\r\n    <div fxFlex=\"100%\" style=\"width: 100%\" fxLayoutAlign=\"center center\" fxLayoutAlign.lt-md=\"start start\" *ngIf=\"footerConfig.showPreContent1\">\r\n      <ng-content select=\"[sof-ar-footer-pre-content-1]\"></ng-content>\r\n    </div>\r\n    <div fxFlex=\"100%\" style=\"width: 100%\" *ngIf=\"footerConfig.showPreContent1\">\r\n      <hr />\r\n    </div>\r\n    <div fxFlex=\"100%\" style=\"width: 100%\" fxLayoutAlign=\"center center\" *ngIf=\"footerConfig.showPreContent2\">\r\n      <ng-content select=\"[sof-ar-footer-pre-content-2]\"></ng-content>\r\n    </div>\r\n    <div fxFlex=\"100%\" style=\"width: 100%\" *ngIf=\"footerConfig.showPreContent2\">\r\n      <hr />\r\n    </div>\r\n  </div>\r\n  <ng-content select=\"[sof-ar-footer-content]\"></ng-content>\r\n</footer>\r\n",
                     styles: [".sof-ar-footer-container{align-items:center;background:#f5f5f5;box-sizing:border-box;display:inline-flex;flex-wrap:wrap;justify-content:center;padding:30px 0;width:100%}::ng-deep .sof-ar-footer-container button:not(:last-child),sof-ar-footer{position:relative}::ng-deep .sof-ar-footer-container button:not(:last-child):after{background:rgba(0,0,0,.3);content:\"\";height:100%;position:absolute;right:0;top:0;width:1px}::ng-deep .flex-full-width{flex:0 0 100%;text-align:center}hr{border:1px solid #e4e4e4}"]
                 },] }
     ];
@@ -3483,6 +3482,7 @@
             this.setLanguage$ = new i0.EventEmitter();
             /** Event Emitter for if user is logged in. */
             this.isLoggedInEE = new i0.EventEmitter();
+            /** AUTH SETTINGS */
             /** Flag if user is logged in. */
             this.isLoggedIn = false;
             /** The header language settings */
@@ -3549,7 +3549,6 @@
             // set up oauth only when configs and issuer are provided
             if (this.authSettings && this.authSettings.issuer) {
                 this.authorizationService.initializeAuthSettings(this.authSettings);
-                this.authBtnAriaText = this.authSettings.authBtnAriaText;
                 this.authorizationService.isLoggedIn$.subscribe(function (value) {
                     _this.isLoggedIn = value;
                     if (value) {
@@ -3600,7 +3599,7 @@
     ArmatureHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'sof-ar-header',
-                    template: "<ng-container *ngIf=\"displaySuperHeader\">\r\n  <div class=\"sof-super-header\" [ngStyle]=\"{'background-color' : superHeaderColor}\">\r\n    <ng-content select=\"[sof-ar-super-header]\"></ng-content>\r\n  </div>\r\n</ng-container>\r\n<mat-toolbar class=\"sof-ar-header\" [class.sof-ar-header-shadow]=\"headerDropShadow\"\r\n  [ngStyle]=\"{'height.px': settings?.headerStyles?.height, background: headerColor, 'border-bottom': themeSettings.borderBottomSize + ' solid ' + themeSettings.borderBottomColor }\"\r\n  [ngStyle.lt-sm]=\"{'height.px': settings?.headerStyles?.heightMobile || 64, background: headerColor, 'border-bottom': themeSettings.borderBottomSize + ' solid ' + themeSettings.borderBottomColor }\">\r\n  <div class=\"sof-ar-header--left\" [class.sof-ar-toggle-navigation]=\"(mobileQuery.matches && (armatureNavigation || armatureHeaderOverlay)) || settings?.createSpaceForNavToggle\">\r\n    <!-- Logo Image -->\r\n    <ng-container *ngIf=\"displayLogo\">\r\n      <ng-container *ngIf=\"settings?.logoRouterLinkPath === 'internal'; else external\">\r\n        <a [routerLink]=\"settings?.logoRouterLink\">\r\n          <img class=\"sof-ar-header-logo\" [src]=\"logoUrl\" alt=\"{{logoAltText | translate}}\"\r\n            [ngStyle]=\"{'height.px': settings?.logoStyles?.height, 'width.px': settings?.logoStyles?.width, 'max-width': settings?.logoStyles?.width + 'px' || '100%'}\"\r\n            [ngStyle.lt-sm]=\"{'height.px': settings?.logoStyles?.heightMobile, 'width.px': settings?.logoStyles?.widthMobile, 'max-width': settings?.logoStyles?.widthMobile + 'px' || '100%'}\" />\r\n        </a>\r\n      </ng-container>\r\n      <ng-template #external>\r\n        <a [href]=\"settings?.logoRouterLink\"><img class=\"sof-ar-header-logo\" [src]=\"logoUrl\"\r\n            alt=\"{{logoAltText | translate}}\"\r\n            [ngStyle]=\"{'height.px': settings?.logoStyles?.height, 'width.px': settings?.logoStyles?.width, 'max-width': settings?.logoStyles?.width + 'px' || '100%'}\"\r\n            [ngStyle.lt-sm]=\"{'height.px': settings?.logoStyles?.heightMobile, 'width.px': settings?.logoStyles?.widthMobile, 'max-width': settings?.logoStyles?.widthMobile + 'px' || '100%'}\" />\r\n        </a>\r\n      </ng-template>\r\n    </ng-container>\r\n    <!-- Logo Text -->\r\n    <ng-container *ngIf=\"displayLogoText\">\r\n      <p class=\"sof-ar-header-logo-text\">{{headerLogoText}}</p>\r\n    </ng-container>\r\n    <!-- NG-Content Left -->\r\n    <ng-content select=\"[sof-ar-header-left]\"></ng-content>\r\n  </div>\r\n  <div class=\"sof-ar-header--center\">\r\n    <!-- NG-Content Center -->\r\n    <ng-content select=\"[sof-ar-header-center]\"></ng-content>\r\n  </div>\r\n  <div class=\"sof-ar-header--right\" fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\">\r\n    <!-- NG-Content Right -->\r\n    <span fxFlex=\"auto 0 1\" [fxHide.lt-sm]=\"!armatureNavigation && armatureHeaderOverlay\">\r\n      <ng-content select=\"[sof-ar-header-right]\"></ng-content>\r\n    </span>\r\n    <div fxFlex=\"auto 0 1\" *ngIf=\"displayDropDownMenu\">\r\n      <button id=\"sof-ar-header-btn-dropdown\" mat-icon-button [disableRipple]=\"true\"\r\n        [matMenuTriggerFor]=\"sofArHeaderMenu\" [attr.aria-label]=\"dropDownAriaText | translate\">\r\n        <span [style.color]=\"iconColor\">\r\n          <i class=\"{{headerDropDownIcon}}\"></i>\r\n          <span class=\"sr-only\">{{dropDownMenuSRText | translate}}</span>\r\n        </span>\r\n      </button>\r\n      <mat-menu #sofArHeaderMenu=\"matMenu\" class=\"sof-ar-mat-menu\">\r\n        <!-- NG-Content Menu -->\r\n        <ng-content select=\"[sof-ar-header-menu]\"></ng-content>\r\n      </mat-menu>\r\n    </div>\r\n    <!-- Language button -->\r\n    <div fxFlex=\"auto 0 1\"\r\n      *ngIf=\"headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length > 2 &&  !mobileQuery.matches\">\r\n      <button id=\"sof-ar-header-lang-dropdown\" mat-stroked-button class=\"faded-button-50 language-button\"\r\n        [matMenuTriggerFor]=\"headerLanguageMenu\" [attr.aria-label]=\"headerLanguageSettings.buttonText | translate\">\r\n        <span>\r\n          <i class=\"far fa-globe language-globe\"></i>\r\n          {{headerLanguageSettings.buttonText | translate}}\r\n        </span>\r\n      </button>\r\n      <mat-menu #headerLanguageMenu=\"matMenu\" class=\"sof-ar-mat-menu\">\r\n        <button mat-menu-item *ngFor=\"let lang of headerLanguageSettings.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    </div>\r\n    <div\r\n      *ngIf=\"headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length === 2 &&  !mobileQuery.matches\">\r\n      <button *ngIf=\"headerLanguageSettings.languages.length === 2\" id=\"sof-ar-header-lang-button\" mat-stroked-button\r\n        class=\"faded-button-50 language-button\" [attr.aria-label]=\"headerLanguageSettings.buttonText | translate\"\r\n        (click)=\"setLanguage$.emit()\">\r\n        <span>\r\n          <i class=\"far fa-globe language-globe\"></i>\r\n          {{otherLangText | translate}}\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <!-- Authorization button -->\r\n    <div fxFlex=\"auto 0 1\" *ngIf=\"settings?.displayAuthInfo\">\r\n      <button *ngIf=\"!isLoggedIn;else loggedIn\" id=\"sof-ar-header-btn-auth\" mat-flat-button (click)=\"authorizeUser()\"\r\n        [attr.aria-label]=\"authBtnAriaText | translate\" class=\"sign-in-button\">\r\n        {{ authBtnText | translate }}\r\n      </button>\r\n      <ng-template #loggedIn>\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\">\r\n          <div fxFlex=\"auto 0 1\">\r\n            <button id=\"sof-ar-logged-in-btn-dropdown\" [matMenuTriggerFor]=\"sofArLoginMenu\"\r\n              [attr.aria-label]=\"dropDownAriaText | translate\" style=\"padding-left:0px !important\"\r\n              ngClass=\"faded-button-50 left-radius-10 mat-stroked-button\" ngClass.lt-md=\"mobile-border\">\r\n\r\n              <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"15px\">\r\n                <div fxFlex=\"40px\" fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"absent-account-image\">\r\n                  <div fxFlex=\"100%\">\r\n                    {{ userName.charAt(0).toUpperCase() }}\r\n                  </div>\r\n                </div>\r\n                <div fxShow fxHide.lt-md fxFlex=\"auto\" class=\"signed-in-name\">\r\n                  {{ userName }}\r\n                </div>\r\n              </div>\r\n            </button>\r\n            <!-- Login menu -->\r\n            <mat-menu #sofArLoginMenu=\"matMenu\" class=\"sof-ar-mat-menu\" id=\"loginMenu\">\r\n              <a mat-menu-item href=\"{{manageUrl}}\" target=\"_blank\">\r\n                {{ authSettings.myAccountText | translate }}\r\n              </a>\r\n              <div *ngIf=\"settings.displayDarkTheme\" mat-menu-item (click)=\"$event.stopPropagation()\" disabled>\r\n                <mat-slide-toggle color=\"accent\" labelPosition=\"before\" [aria-label]=\"settings.darkThemeText\"\r\n                  [id]=\"'dark-theme-toggle-btn'\" (change)=\"toggleTheme($event)\">\r\n                  {{ settings.darkThemeText + '(coming soon!)' | translate }}\r\n                  <!-- TODO: determine if icon is liked <i class=\"fad fa-moon-cloud dark-theme-icon\"></i> -->\r\n                </mat-slide-toggle>\r\n              </div>\r\n              <ng-content select=\"[sof-header-user-menu]\"></ng-content>\r\n            </mat-menu>\r\n          </div>\r\n          <div fxFlex=\"auto 0 1\">\r\n            <button id=\"sof-ar-log-out-btn\" mat-stroked-button class=\"faded-button-50 sign-out-icon\"\r\n              [class.hidden]=\"mobileQuery.matches\" (click)=\"authorizeUser()\">\r\n              <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\r\n                <i fxFlex=\"100%\" class=\"fas fa-sign-out-alt\"></i>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</mat-toolbar>\r\n",
+                    template: "<ng-container *ngIf=\"displaySuperHeader\">\r\n  <div class=\"sof-super-header\" [ngStyle]=\"{'background-color' : superHeaderColor}\">\r\n    <ng-content select=\"[sof-ar-super-header]\"></ng-content>\r\n  </div>\r\n</ng-container>\r\n<mat-toolbar class=\"sof-ar-header\" [class.sof-ar-header-shadow]=\"headerDropShadow\"\r\n  [ngStyle]=\"{'height.px': settings?.headerStyles?.height, background: headerColor, 'border-bottom': themeSettings.borderBottomSize + ' solid ' + themeSettings.borderBottomColor }\"\r\n  [ngStyle.lt-sm]=\"{'height.px': settings?.headerStyles?.heightMobile || 64, background: headerColor, 'border-bottom': themeSettings.borderBottomSize + ' solid ' + themeSettings.borderBottomColor }\">\r\n  <div class=\"sof-ar-header--left\" [class.sof-ar-toggle-navigation]=\"(mobileQuery.matches && (armatureNavigation || armatureHeaderOverlay)) || settings?.createSpaceForNavToggle\">\r\n    <!-- Logo Image -->\r\n    <ng-container *ngIf=\"displayLogo\">\r\n      <ng-container *ngIf=\"settings?.logoRouterLinkPath === 'internal'; else external\">\r\n        <a [routerLink]=\"settings?.logoRouterLink\">\r\n          <img class=\"sof-ar-header-logo\" [src]=\"logoUrl\" alt=\"{{logoAltText | translate}}\"\r\n            [ngStyle]=\"{'height.px': settings?.logoStyles?.height, 'width.px': settings?.logoStyles?.width, 'max-width': settings?.logoStyles?.width + 'px' || '100%'}\"\r\n            [ngStyle.lt-sm]=\"{'height.px': settings?.logoStyles?.heightMobile, 'width.px': settings?.logoStyles?.widthMobile, 'max-width': settings?.logoStyles?.widthMobile + 'px' || '100%'}\" />\r\n        </a>\r\n      </ng-container>\r\n      <ng-template #external>\r\n        <a [href]=\"settings?.logoRouterLink\"><img class=\"sof-ar-header-logo\" [src]=\"logoUrl\"\r\n            alt=\"{{logoAltText | translate}}\"\r\n            [ngStyle]=\"{'height.px': settings?.logoStyles?.height, 'width.px': settings?.logoStyles?.width, 'max-width': settings?.logoStyles?.width + 'px' || '100%'}\"\r\n            [ngStyle.lt-sm]=\"{'height.px': settings?.logoStyles?.heightMobile, 'width.px': settings?.logoStyles?.widthMobile, 'max-width': settings?.logoStyles?.widthMobile + 'px' || '100%'}\" />\r\n        </a>\r\n      </ng-template>\r\n    </ng-container>\r\n    <!-- Logo Text -->\r\n    <ng-container *ngIf=\"displayLogoText\">\r\n      <p class=\"sof-ar-header-logo-text\">{{headerLogoText}}</p>\r\n    </ng-container>\r\n    <!-- NG-Content Left -->\r\n    <ng-content select=\"[sof-ar-header-left]\"></ng-content>\r\n  </div>\r\n  <div class=\"sof-ar-header--center\">\r\n    <!-- NG-Content Center -->\r\n    <ng-content select=\"[sof-ar-header-center]\"></ng-content>\r\n  </div>\r\n  <div class=\"sof-ar-header--right\" fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\">\r\n    <!-- NG-Content Right -->\r\n    <span fxFlex=\"auto 0 1\" [fxHide.lt-sm]=\"!armatureNavigation && armatureHeaderOverlay\">\r\n      <ng-content select=\"[sof-ar-header-right]\"></ng-content>\r\n    </span>\r\n    <div fxFlex=\"auto 0 1\" *ngIf=\"displayDropDownMenu\">\r\n      <button id=\"sof-ar-header-btn-dropdown\" mat-icon-button [disableRipple]=\"true\"\r\n        [matMenuTriggerFor]=\"sofArHeaderMenu\" [attr.aria-label]=\"dropDownAriaText | translate\">\r\n        <span [style.color]=\"iconColor\">\r\n          <i class=\"{{headerDropDownIcon}}\"></i>\r\n          <span class=\"sr-only\">{{dropDownMenuSRText | translate}}</span>\r\n        </span>\r\n      </button>\r\n      <mat-menu #sofArHeaderMenu=\"matMenu\" class=\"sof-ar-mat-menu\">\r\n        <!-- NG-Content Menu -->\r\n        <ng-content select=\"[sof-ar-header-menu]\"></ng-content>\r\n      </mat-menu>\r\n    </div>\r\n    <!-- Language button -->\r\n    <div fxFlex=\"auto 0 1\"\r\n      *ngIf=\"headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length > 2 &&  !mobileQuery.matches\">\r\n      <button id=\"sof-ar-header-lang-dropdown\" mat-stroked-button class=\"faded-button-50 language-button\"\r\n        [matMenuTriggerFor]=\"headerLanguageMenu\" [attr.aria-label]=\"headerLanguageSettings.buttonText | translate\">\r\n        <span>\r\n          <i class=\"far fa-globe language-globe\"></i>\r\n          {{headerLanguageSettings.buttonText | translate}}\r\n        </span>\r\n      </button>\r\n      <mat-menu #headerLanguageMenu=\"matMenu\" class=\"sof-ar-mat-menu\">\r\n        <button mat-menu-item *ngFor=\"let lang of headerLanguageSettings.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    </div>\r\n    <div\r\n      *ngIf=\"headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length === 2 &&  !mobileQuery.matches\">\r\n      <button *ngIf=\"headerLanguageSettings.languages.length === 2\" id=\"sof-ar-header-lang-button\" mat-stroked-button\r\n        class=\"faded-button-50 language-button\" [attr.aria-label]=\"headerLanguageSettings.buttonText | translate\"\r\n        (click)=\"setLanguage$.emit()\">\r\n        <span>\r\n          <i class=\"far fa-globe language-globe\"></i>\r\n          {{otherLangText | translate}}\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <!-- Authorization button -->\r\n    <div fxFlex=\"auto 0 1\" *ngIf=\"settings?.displayAuthInfo\">\r\n      <button *ngIf=\"!isLoggedIn;else loggedIn\" id=\"sof-ar-header-btn-auth\" mat-flat-button (click)=\"authorizeUser()\"\r\n        [attr.aria-label]=\"authBtnText | translate\" class=\"sign-in-button\">\r\n        {{ authBtnText | translate }}\r\n      </button>\r\n      <ng-template #loggedIn>\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\">\r\n          <div fxFlex=\"auto 0 1\">\r\n            <button id=\"sof-ar-logged-in-btn-dropdown\" [matMenuTriggerFor]=\"sofArLoginMenu\"\r\n              [attr.aria-label]=\"dropDownAriaText | translate\" style=\"padding-left:0px !important\"\r\n              ngClass=\"faded-button-50 left-radius-10 mat-stroked-button\" ngClass.lt-md=\"mobile-border\">\r\n\r\n              <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"15px\">\r\n                <div fxFlex=\"40px\" fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"absent-account-image\">\r\n                  <div fxFlex=\"100%\">\r\n                    {{ userName.charAt(0).toUpperCase() }}\r\n                  </div>\r\n                </div>\r\n                <div fxShow fxHide.lt-md fxFlex=\"auto\" class=\"signed-in-name\">\r\n                  {{ userName }}\r\n                </div>\r\n              </div>\r\n            </button>\r\n            <!-- Login menu -->\r\n            <mat-menu #sofArLoginMenu=\"matMenu\" class=\"sof-ar-mat-menu\" id=\"loginMenu\">\r\n              <a mat-menu-item href=\"{{manageUrl}}\" target=\"_blank\">\r\n                {{ authSettings.myAccountText | translate }}\r\n              </a>\r\n              <div *ngIf=\"settings.displayDarkTheme\" mat-menu-item (click)=\"$event.stopPropagation()\" disabled>\r\n                <mat-slide-toggle color=\"accent\" labelPosition=\"before\" [aria-label]=\"settings.darkThemeText\"\r\n                  [id]=\"'dark-theme-toggle-btn'\" (change)=\"toggleTheme($event)\">\r\n                  {{ settings.darkThemeText + '(coming soon!)' | translate }}\r\n                  <!-- TODO: determine if icon is liked <i class=\"fad fa-moon-cloud dark-theme-icon\"></i> -->\r\n                </mat-slide-toggle>\r\n              </div>\r\n              <ng-content select=\"[sof-header-user-menu]\"></ng-content>\r\n            </mat-menu>\r\n          </div>\r\n          <div fxFlex=\"auto 0 1\">\r\n            <button id=\"sof-ar-log-out-btn\" mat-stroked-button class=\"faded-button-50 sign-out-icon\"\r\n              [class.hidden]=\"mobileQuery.matches\" (click)=\"authorizeUser()\" [attr.aria-label]=\"authBtnText | translate\">\r\n              <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\r\n                <i fxFlex=\"100%\" class=\"fas fa-sign-out-alt\"></i>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</mat-toolbar>\r\n",
                     styles: [":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}.sof-super-header{align-items:center;display:flex;height:34px;justify-content:center}@media only screen and (max-width:599px){.sof-super-header{justify-content:center;padding:0}}.sof-ar-header{align-items:center;display:flex;justify-content:space-between;position:relative;z-index:2}.sof-ar-header.sof-ar-header-shadow{box-shadow:0 1px 4px rgba(0,0,0,.5)}.sof-ar-header-logo-text{display:inline-block;font-size:20px}::ng-deep .sof-ar-header-icon,::ng-deep .sof-ar-header-menu-icon{font-size:24px}::ng-deep .sof-ar-header-menu-icon{padding-right:10px}::ng-deep .sof-ar-mat-menu{border-radius:2px!important}::ng-deep .sof-ar-mat-menu .mat-menu-content{min-width:150px;padding-bottom:0!important;padding-top:0!important}::ng-deep .sof-ar-header-menu-list.sof-ar-header-menu-border{border-bottom:1px solid rgba(0,0,0,.25)!important}::ng-deep .sof-ar-header-menu-list{align-items:center;display:flex!important}::ng-deep .sof-ar-header-button-text{font-size:14px;font-weight:600;padding-left:10px;padding-right:10px}.sof-ar-header-logo{height:32px;max-width:100%}@media only screen and (max-width:599px){.sof-ar-header-logo{height:24px}}.sof-ar-header--left{align-items:center;display:flex}.sof-ar-header--left.sof-ar-toggle-navigation{margin-left:50px}.sof-ar-header--right{text-align:right}.sof-ar-header--center{text-align:center}.sof-ar-header--center,.sof-ar-header--left,.sof-ar-header--right{flex:1}.sign-in-button{background-color:var(--primary-color-50-parts);color:var(--primary-color-500-parts)!important;font-size:16px!important;font-weight:500!important}.faded-button-50,.faded-button-100{background-color:var(--primary-color-50-parts)!important;border-color:var(--primary-color-50-parts)!important}.absent-account-image{background:var(--primary-color-500-parts)!important;border-radius:6px!important;border-right:2px solid var(--primary-color-500-parts)!important;color:#fff;font-size:16px!important;font-weight:500!important;height:41px!important;margin-left:-1px!important;margin-top:-1px!important}.sign-out-icon{font-size:20px!important}.sign-out-icon,.signed-in-name{color:var(--primary-color-500-parts)!important}.signed-in-name{font-size:16px!important;font-weight:500!important}.left-radius-10{border-bottom-left-radius:11px!important;border-top-left-radius:11px!important}.language-button{color:var(--primary-color-500-parts)!important;font-size:16px!important}.language-globe{padding-right:8px}.dark-theme-icon,.language-globe,.selected-language-icon{font-size:20px!important}.selected-language-icon{color:var(--primary-color-500-parts)!important;padding-right:10px!important}.hidden{display:none}.mobile-border{border:0;border-radius:11px!important;padding:0}"]
                 },] }
     ];
@@ -5419,9 +5418,8 @@
          * @param skipIssuerCheck Skip issuer check flag.
          * @param logInText Log In Text.
          * @param logOutText Log Out Text.
-         * @param authBtnAriaText Auth Button Aria Text.
          */
-        function HeaderAuthSettings(clientId, redirectUri, issuer, scope, skipIssuerCheck, logInText, logOutText, authBtnAriaText, timeoutFactor, returnRoute, postLogOutUrl, loginUrl, authSetOnStartup) {
+        function HeaderAuthSettings(clientId, redirectUri, issuer, scope, skipIssuerCheck, logInText, logOutText, timeoutFactor, returnRoute, postLogOutUrl, loginUrl, authSetOnStartup) {
             if (clientId === void 0) { clientId = ''; }
             if (redirectUri === void 0) { redirectUri = ''; }
             if (issuer === void 0) { issuer = ''; }
@@ -5429,7 +5427,6 @@
             if (skipIssuerCheck === void 0) { skipIssuerCheck = true; }
             if (logInText === void 0) { logInText = 'SIGN IN'; }
             if (logOutText === void 0) { logOutText = 'SIGN OUT'; }
-            if (authBtnAriaText === void 0) { authBtnAriaText = ''; }
             if (timeoutFactor === void 0) { timeoutFactor = 9; }
             if (returnRoute === void 0) { returnRoute = ''; }
             if (postLogOutUrl === void 0) { postLogOutUrl = ''; }
@@ -5442,7 +5439,6 @@
             this.skipIssuerCheck = skipIssuerCheck;
             this.logInText = logInText;
             this.logOutText = logOutText;
-            this.authBtnAriaText = authBtnAriaText;
             this.timeoutFactor = timeoutFactor;
             this.returnRoute = returnRoute;
             this.postLogOutUrl = postLogOutUrl;
@@ -6485,6 +6481,152 @@
 
     /** Public API surface for the forms */
 
+    /** The component print service */
+    var ComponentSavePrintService = /** @class */ (function () {
+        /** Constructs the service */
+        function ComponentSavePrintService() {
+            /** The component to print behavior subject */
+            this.componentSavePrintBs = new rxjs.BehaviorSubject(undefined);
+            this.savePrintComponent$ = this.componentSavePrintBs.asObservable()
+                .pipe(operators.filter(function (c) { return !!c; }));
+        }
+        /**
+         * Save/Print the provided component
+         * @param component The component to save/print
+         */
+        ComponentSavePrintService.prototype.savePrintComponent = function (component) {
+            this.componentSavePrintBs.next(component);
+        };
+        return ComponentSavePrintService;
+    }());
+    ComponentSavePrintService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ComponentSavePrintService_Factory() { return new ComponentSavePrintService(); }, token: ComponentSavePrintService, providedIn: "root" });
+    ComponentSavePrintService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    ComponentSavePrintService.ctorParameters = function () { return []; };
+
+    /** The component save and print component */
+    var ComponentSavePrintComponent = /** @class */ (function () {
+        /**
+         * Constructs the component
+         * @param cfr The component factory resolver
+         * @param vcr The view container reference
+         * @param componentSavePrintService The component save print service
+         */
+        function ComponentSavePrintComponent(cfr, vcr, componentSavePrintService) {
+            this.cfr = cfr;
+            this.vcr = vcr;
+            this.componentSavePrintService = componentSavePrintService;
+            /** The component subscription */
+            this.componentSub = new rxjs.Subscription();
+        }
+        /** Life cycle hook for component initialization */
+        ComponentSavePrintComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.componentSub.add(this.componentSavePrintService.savePrintComponent$.subscribe(function (c) {
+                _this.print(c);
+            }));
+        };
+        /** Life cycle hook for component destruction */
+        ComponentSavePrintComponent.prototype.ngOnDestroy = function () {
+            this.componentSub.unsubscribe();
+        };
+        /**
+         * Prints the component
+         * @param component The component type to print
+         */
+        ComponentSavePrintComponent.prototype.print = function (component) {
+            var _a;
+            this.attachStyles(this.iframeRef.nativeElement.contentWindow);
+            this.doc = ((_a = this.iframeRef) === null || _a === void 0 ? void 0 : _a.nativeElement.contentDocument) || this.iframeRef.nativeElement.iFrameRef.contentWindow;
+            var compFactory = this.cfr.resolveComponentFactory(component);
+            this.componentRef = this.vcr.createComponent(compFactory);
+            this.componentRef.location.nativeElement.id = 'sofArComponentSavePrintContainer';
+            this.doc.body.appendChild(this.componentRef.location.nativeElement);
+            var iframe = this.iframeRef.nativeElement;
+            iframe.contentWindow.onafterprint = function () {
+                iframe.contentDocument.body.innerHTML = '';
+            };
+            this.waitForImageToLoad(iframe, function () { iframe.contentWindow.print(); });
+        };
+        /**
+         * Helper function to execute print function on hold until images finish loading
+         * @param iframe The iframe to load images on
+         * @param done The function to wait execution
+         */
+        ComponentSavePrintComponent.prototype.waitForImageToLoad = function (iframe, done) {
+            var interval = setInterval(function () {
+                var allImages = iframe.contentDocument.body.querySelectorAll('img');
+                var loaded = Array.from({ length: allImages.length }).fill(false);
+                allImages.forEach(function (img, idx) {
+                    loaded[idx] = img.complete;
+                });
+                if (loaded.every(function (c) { return !!c; })) {
+                    clearInterval(interval);
+                    done();
+                }
+            }, 500);
+        };
+        /**
+         * Helper function to append all the styles to targe window
+         * @param targetWindow The target window
+         */
+        ComponentSavePrintComponent.prototype.attachStyles = function (targetWindow) {
+            // Copy styles from parent window
+            document.querySelectorAll('style')
+                .forEach(function (htmlElement) {
+                targetWindow.document.head.appendChild(htmlElement.cloneNode(true));
+            });
+            // Copy stylesheet link from parent window
+            document.querySelectorAll('link')
+                .forEach(function (htmlElement) {
+                targetWindow.document.head.appendChild(htmlElement.cloneNode(true));
+            });
+        };
+        return ComponentSavePrintComponent;
+    }());
+    ComponentSavePrintComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'sof-ar-component-save-print',
+                    template: "<div class=\"save-print-container\">\r\n    <iframe #iframe class=\"save-print\">\r\n    </iframe>\r\n</div>\r\n",
+                    styles: ["iframe.save-print{height:1px;opacity:0;width:1000px}.save-print-container{height:1px;overflow-x:hidden;overflow-y:hidden;width:100%}"]
+                },] }
+    ];
+    ComponentSavePrintComponent.ctorParameters = function () { return [
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ViewContainerRef },
+        { type: ComponentSavePrintService }
+    ]; };
+    ComponentSavePrintComponent.propDecorators = {
+        iframeRef: [{ type: i0.ViewChild, args: ['iframe', { static: false },] }]
+    };
+
+    /** The component save print module */
+    var SofArComponentSavePrintModule = /** @class */ (function () {
+        function SofArComponentSavePrintModule() {
+        }
+        return SofArComponentSavePrintModule;
+    }());
+    SofArComponentSavePrintModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [ComponentSavePrintComponent],
+                    imports: [
+                        common.CommonModule
+                    ],
+                    providers: [
+                        ComponentSavePrintService
+                    ],
+                    exports: [
+                        ComponentSavePrintComponent
+                    ],
+                    entryComponents: [
+                        ComponentSavePrintComponent
+                    ]
+                },] }
+    ];
+
     /** Public API Surface of armature */
 
     /**
@@ -6516,6 +6658,8 @@
     exports.BaseComponentModule = BaseComponentModule;
     exports.BaseConfigService = BaseConfigService;
     exports.CacheExpirationType = CacheExpirationType;
+    exports.ComponentSavePrintComponent = ComponentSavePrintComponent;
+    exports.ComponentSavePrintService = ComponentSavePrintService;
     exports.Configuration = Configuration$1;
     exports.CssOverride = CssOverride;
     exports.CssOverrideDirective = CssOverrideDirective;
@@ -6572,6 +6716,7 @@
     exports.SiteMapComponent = SiteMapComponent;
     exports.SofAddressComponent = SofAddressComponent;
     exports.SofAlertComponent = SofAlertComponent;
+    exports.SofArComponentSavePrintModule = SofArComponentSavePrintModule;
     exports.SofBannerComponent = SofBannerComponent;
     exports.SofBlankPipe = SofBlankPipe;
     exports.SofDatePipe = SofDatePipe;