npm - @softheon/armature - Versions diffs - 21.3.1 → 21.6.0 - Mend

@softheon/armature 21.3.1 → 21.6.0

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

Files changed (4) hide show

package/fesm2022/softheon-armature.mjs +266 -27
package/fesm2022/softheon-armature.mjs.map +1 -1
package/package.json +1 -1
package/types/softheon-armature.d.ts +151 -27

package/fesm2022/softheon-armature.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 import * as i1 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule, NgStyle, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders, provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, ViewChild, Input, Optional, Inject, Component, NgModule, EventEmitter, Output, ViewChildren, signal, inject, ChangeDetectionStrategy, DOCUMENT, isDevMode, HostListener, Directive, Renderer2, ElementRef, Pipe, ViewEncapsulation, Self, Host, APP_INITIALIZER, Injector, computed, DestroyRef, effect, ChangeDetectorRef, ErrorHandler, NgZone } from '@angular/core';
+import { InjectionToken, Injectable, ViewChild, Input, Optional, Inject, Component, NgModule, EventEmitter, Output, ViewChildren, signal, inject, ChangeDetectionStrategy, DOCUMENT, isDevMode, HostListener, Directive, Renderer2, ElementRef, Pipe, ViewEncapsulation, Self, Host, APP_INITIALIZER, Injector, computed, DestroyRef, effect, ChangeDetectorRef, ErrorHandler, input, NgZone } from '@angular/core';
 import * as i1$4 from '@angular/router';
 import { NavigationEnd, Router, RouterModule, NavigationStart, NavigationError } from '@angular/router';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
@@ -1872,6 +1872,7 @@ class ArmatureHeaderComponent {
         this.settings.logoAltText ? this.logoAltText = this.settings.logoAltText : this.logoAltText = 'the header logo';
         this.settings.displayLogoText ? this.displayLogoText = this.settings.displayLogoText : this.displayLogoText = false;
         this.settings.headerLogoText ? this.headerLogoText = this.settings.headerLogoText : this.headerLogoText = 'Softheon';
+        this.settings.subHeaderLogoText ? this.subHeaderLogoText = this.settings.subHeaderLogoText : this.subHeaderLogoText = '';
         this.settings.displayDropDownMenu ? this.displayDropDownMenu = this.settings.displayDropDownMenu : this.displayDropDownMenu = false;
         this.settings.dropDownMenuSRText ? this.dropDownMenuSRText = this.settings.dropDownMenuSRText : this.dropDownMenuSRText = 'Header Dropdown Menu';
         this.settings.dropDownAriaText ? this.dropDownAriaText = this.settings.dropDownAriaText : this.dropDownAriaText = 'Header Dropdown Menu button icon';
@@ -1929,11 +1930,11 @@ class ArmatureHeaderComponent {
         this.themeSettings.borderBottomSize = this.themeSettings.borderBottomSize || '0px';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ArmatureHeaderComponent, deps: [{ token: i1$2.OAuthService }, { token: i1$2.OAuthStorage }, { token: i2$1.TranslateService }, { token: i1$3.MediaMatcher }, { token: i0.ChangeDetectorRef }, { token: AuthorizationService }, { token: HybridSamlOauthService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ArmatureHeaderComponent, isStandalone: false, selector: "sof-ar-header", inputs: { settings: "settings", themeSettings: "themeSettings", authSettings: "authSettings", currentLang: "currentLang" }, outputs: { setLanguage$: "setLanguage$", isLoggedInEE: "isLoggedInEE" }, ngImport: i0, template: "@if (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}\r\n<header>\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\"\r\n      [class.sof-ar-toggle-navigation]=\"(mobileQuery.matches && (armatureNavigation || armatureHeaderOverlay)) || settings?.createSpaceForNavToggle\">\r\n      <!-- external links -->\r\n      @if(externalLinks().length) {\r\n        <button class=\"external-link-button\" mat-button [matMenuTriggerFor]=\"menu\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n          <i class=\"ph ph-dots-nine external-link-button\"></i>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <div fxLayout=\"row wrap\" class=\"external-link-container\">\r\n            @for(link of externalLinks(); track link.translateKey) {\r\n              <a mat-menu-item fxLayout=\"column\" fxFlex=\"auto\" fxLayoutAlign=\"center start\" href=\"{{link.uri}}\" target=\"_blank\" [matTooltip]=\"(link.iconAltTextTranslateKey | translate)\">\r\n                @if(!!link.icon || !!link.logo) {\r\n                  <div fxFlex=\"auto\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n                    @if(!!link.icon) {\r\n                      <i class=\"{{link.icon}} external-link-icon\"></i>\r\n                    }\r\n                    @else if(!!link.logo){\r\n                    <img src=\"{{link.logo}}\" alt=\"{{link.iconAltTextTranslateKey | translate}}\" width=\"32px\" height=\"32px\" />\r\n                  }\r\n                </div>\r\n              }\r\n              @if(!!link.translateKey) {\r\n                <div fxFlex=\"auto\" class=\"link-text-container\">\r\n                  {{link.translateKey | translate}}\r\n                </div>\r\n              }\r\n            </a>\r\n          }\r\n        </div>\r\n      </mat-menu>\r\n    }\r\n    <!-- Logo Image -->\r\n    @if (displayLogo) {\r\n      @if (settings?.logoRouterLinkPath === 'internal') {\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        } @else {\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        }\r\n      }\r\n      <!-- Logo Text -->\r\n      @if (displayLogoText) {\r\n        <p class=\"sof-ar-header-logo-text\">{{headerLogoText}}</p>\r\n      }\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      @if (displayDropDownMenu) {\r\n        <div fxFlex=\"auto 0 1\">\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      }\r\n      <!-- Language button -->\r\n      @if (headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length > 2 &&  !mobileQuery.matches) {\r\n        <div fxFlex=\"auto 0 1\"\r\n          >\r\n          <button id=\"sof-ar-header-lang-dropdown\" mat-flat-button class=\"sof-flat-button\" color=\"primary\"\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            @for (lang of headerLanguageSettings.languages; track lang) {\r\n              <button mat-menu-item (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                    @if (currentLang === lang) {\r\n                      <i class=\"fad fa-check selected-language-icon\"></i>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </button>\r\n            }\r\n          </mat-menu>\r\n        </div>\r\n      }\r\n      @if (headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length === 2 &&  !mobileQuery.matches) {\r\n        <div\r\n          >\r\n          @if (headerLanguageSettings.languages.length === 2) {\r\n            <button id=\"sof-ar-header-lang-button\" mat-flat-button\r\n              class=\"sof-flat-button\" color=\"primary\" (click)=\"setLanguage$.emit()\">\r\n              <span fxLayoutAlign=\"center center\">\r\n                <i class=\"far fa-globe language-globe\"></i>\r\n                {{otherLangText | translate}}\r\n              </span>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n      <!-- Authorization button -->\r\n      @if (settings?.displayAuthInfo) {\r\n        <div fxFlex=\"auto 0 1\">\r\n          @if (!isLoggedIn) {\r\n            <button id=\"sof-ar-header-btn-auth\" mat-flat-button color=\"primary\"\r\n              (click)=\"authorizeUser()\" [attr.aria-label]=\"authBtnText | translate\" class=\"sof-flat-button\">\r\n              {{ authBtnText | translate }}\r\n            </button>\r\n          } @else {\r\n            <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\">\r\n              <div fxFlex=\"auto 0 1\" fxHide.lt-md>\r\n                <button [disabled]=\"settings?.makeUsernameUnclickable\" id=\"sof-ar-logged-in-btn-dropdown\"\r\n                  data-privacy=\"exclude\" [matMenuTriggerFor]=\"sofArLoginMenu\" mat-stroked-button\r\n                  style=\"padding-left:0px !important\" ngClass=\"left-radius-10 sof-stroked-button mobile-border\"\r\n                  color=\"primary\">\r\n                  <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"15px\">\r\n                    <div fxFlex=\"46px\" 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                  @if (settings.displayDarkTheme) {\r\n                    <div 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                  }\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-flat-button class=\"sof-flat-icon-button\" color=\"primary\" size=\"medium\"\r\n                  (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          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </mat-toolbar>\r\n</header>", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #edf4ff;--primary-color-100-parts: #b9d4fc;--primary-color-200-parts: #8ab7fb;--primary-color-300-parts: #5b9af9;--primary-color-400-parts: #3784f7;--primary-color-500-parts: #146ef6;--primary-color-600-parts: #1266f5;--primary-color-700-parts: #0e5bf3;--primary-color-800-parts: #0b51f2;--primary-color-900-parts: #063fef;--primary-color-A50-parts: rgba(20, 110, 246, .04);--primary-color-A100-parts: rgba(20, 110, 246, .08);--primary-color-A200-parts: rgba(20, 110, 246, .16);--primary-color-A300-parts: rgba(20, 110, 246, .24);--primary-color-A400-parts: rgba(20, 110, 246, .32);--primary-color-A500-parts: rgba(20, 110, 246, .4);--primary-color-A600-parts: rgba(20, 110, 246, .48);--primary-color-A700-parts: rgba(20, 110, 246, .56);--primary-color-A800-parts: rgba(20, 110, 246, .64);--primary-color-A900-parts: rgba(20, 110, 246, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 237, 244, 255;--primary-color-100-parts-rgb: 185, 212, 252;--primary-color-200-parts-rgb: 138, 183, 251;--primary-color-300-parts-rgb: 91, 154, 249;--primary-color-400-parts-rgb: 55, 132, 247;--primary-color-500-parts-rgb: 20, 110, 246;--primary-color-600-parts-rgb: 18, 102, 245;--primary-color-700-parts-rgb: 14, 91, 243;--primary-color-800-parts-rgb: 11, 81, 242;--primary-color-900-parts-rgb: 6, 63, 239;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #edf4ff;--info-color-100-parts: #b9d4fc;--info-color-200-parts: #8ab7fb;--info-color-300-parts: #5b9af9;--info-color-400-parts: #3784f7;--info-color-500-parts: #146ef6;--info-color-600-parts: #1266f5;--info-color-700-parts: #0e5bf3;--info-color-800-parts: #0b51f2;--info-color-900-parts: #063fef;--info-color-A50-parts: rgba(20, 110, 246, .04);--info-color-A100-parts: rgba(20, 110, 246, .08);--info-color-A200-parts: rgba(20, 110, 246, .16);--info-color-A300-parts: rgba(20, 110, 246, .24);--info-color-A400-parts: rgba(20, 110, 246, .32);--info-color-A500-parts: rgba(20, 110, 246, .4);--info-color-A600-parts: rgba(20, 110, 246, .48);--info-color-A700-parts: rgba(20, 110, 246, .56);--info-color-A800-parts: rgba(20, 110, 246, .64);--info-color-A900-parts: rgba(20, 110, 246, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(0, 0, 0, .87);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 237, 244, 255;--info-color-100-parts-rgb: 185, 212, 252;--info-color-200-parts-rgb: 138, 183, 251;--info-color-300-parts-rgb: 91, 154, 249;--info-color-400-parts-rgb: 55, 132, 247;--info-color-500-parts-rgb: 20, 110, 246;--info-color-600-parts-rgb: 18, 102, 245;--info-color-700-parts-rgb: 14, 91, 243;--info-color-800-parts-rgb: 11, 81, 242;--info-color-900-parts-rgb: 6, 63, 239;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}.sof-super-header{height:34px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width:599px){.sof-super-header{justify-content:center;padding:0}}.external-link-button{margin-left:-7px;min-width:44px;width:44px}.external-link-container{width:250px}.link-text-container{margin-left:8px}.external-link-button{font-size:32px}.external-link-icon{font-size:26px}.sof-ar-header{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.sof-ar-header.sof-ar-header-shadow{box-shadow:0 1px 4px #00000080}.sof-ar-header-logo-text{font-size:20px;display:inline-block}::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-mdc-menu-content{padding-top:0!important;padding-bottom:0!important;min-width:150px}::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{display:flex!important;align-items:center}::ng-deep .sof-ar-header-button-text{font-weight:600;font-size:14px;padding-left:10px;padding-right:10px}.sof-ar-header-logo{max-width:100%;height:32px}@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}.absent-account-image{border-right:2px solid var(--primary-color-500-parts)!important;border-radius:6px!important;background:var(--primary-color-500-parts)!important;color:#fff;font-weight:500!important;font-size:16px!important;height:46px!important;margin-left:-1px!important;margin-top:-1px!important}.signed-in-name{font-weight:500!important;font-size:16px!important;color:var(--primary-color-500-parts)!important}.left-radius-10{border-top-left-radius:11px!important;border-bottom-left-radius:11px!important}.language-globe{padding-right:8px;font-size:20px!important}.dark-theme-icon{font-size:20px!important}.selected-language-icon{color:var(--primary-color-500-parts)!important;font-size:20px!important;padding-right:10px!important}.hidden{display:none}@media screen and (max-width:960px){.mobile-border{padding:0;border:0px;border-radius:11px!important}}\n"], dependencies: [{ kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i13$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i1$6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ArmatureHeaderComponent, isStandalone: false, selector: "sof-ar-header", inputs: { settings: "settings", themeSettings: "themeSettings", authSettings: "authSettings", currentLang: "currentLang" }, outputs: { setLanguage$: "setLanguage$", isLoggedInEE: "isLoggedInEE" }, ngImport: i0, template: "@if (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}\r\n<header>\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\"\r\n      [class.sof-ar-toggle-navigation]=\"(mobileQuery.matches && (armatureNavigation || armatureHeaderOverlay)) || settings?.createSpaceForNavToggle\">\r\n      <!-- external links -->\r\n      @if(externalLinks().length) {\r\n      <button class=\"external-link-button\" mat-button [matMenuTriggerFor]=\"menu\" fxLayout=\"column\"\r\n        fxLayoutAlign=\"center center\">\r\n        <i class=\"ph ph-dots-nine external-link-button\"></i>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <div fxLayout=\"row wrap\" class=\"external-link-container\">\r\n          @for(link of externalLinks(); track link.translateKey) {\r\n          <a mat-menu-item fxLayout=\"column\" fxFlex=\"auto\" fxLayoutAlign=\"center start\" href=\"{{link.uri}}\"\r\n            target=\"_blank\" [matTooltip]=\"(link.iconAltTextTranslateKey | translate)\">\r\n            @if(!!link.icon || !!link.logo) {\r\n            <div fxFlex=\"auto\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n              @if(!!link.icon) {\r\n              <i class=\"{{link.icon}} external-link-icon\"></i>\r\n              }\r\n              @else if(!!link.logo){\r\n              <img src=\"{{link.logo}}\" alt=\"{{link.iconAltTextTranslateKey | translate}}\" width=\"32px\" height=\"32px\" />\r\n              }\r\n            </div>\r\n            }\r\n            @if(!!link.translateKey) {\r\n            <div fxFlex=\"auto\" class=\"link-text-container\">\r\n              {{link.translateKey | translate}}\r\n            </div>\r\n            }\r\n          </a>\r\n          }\r\n        </div>\r\n      </mat-menu>\r\n      }\r\n      <!-- Logo Image -->\r\n      @if (displayLogo) {\r\n      @if (settings?.logoRouterLinkPath === 'internal') {\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      } @else {\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      }\r\n      }\r\n      <!-- Logo Text -->\r\n      @if (displayLogoText) {\r\n      @if(!!subHeaderLogoText){\r\n      <div fxFlex fxLayout=\"column\" gap=\"2px\">\r\n        <span class=\"sof-ar-header-logo-upper-text\">{{headerLogoText}}</span>\r\n        <span class=\"sof-ar-header-logo-lower-text\">{{subHeaderLogoText}}</span>\r\n      </div>\r\n      } @else {\r\n      <p class=\"sof-ar-header-logo-text\">{{headerLogoText}}</p>\r\n      }\r\n\r\n      }\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      @if (displayDropDownMenu) {\r\n      <div fxFlex=\"auto 0 1\">\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      }\r\n      <!-- Language button -->\r\n      @if (headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length > 2 &&\r\n      !mobileQuery.matches) {\r\n      <div fxFlex=\"auto 0 1\">\r\n        <button id=\"sof-ar-header-lang-dropdown\" mat-flat-button class=\"sof-flat-button\" color=\"primary\"\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          @for (lang of headerLanguageSettings.languages; track lang) {\r\n          <button mat-menu-item (click)=\"setLanguage$.emit(lang)\" 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                @if (currentLang === lang) {\r\n                <i class=\"fad fa-check selected-language-icon\"></i>\r\n                }\r\n              </div>\r\n            </div>\r\n          </button>\r\n          }\r\n        </mat-menu>\r\n      </div>\r\n      }\r\n      @if (headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length === 2 &&\r\n      !mobileQuery.matches) {\r\n      <div>\r\n        @if (headerLanguageSettings.languages.length === 2) {\r\n        <button id=\"sof-ar-header-lang-button\" mat-flat-button class=\"sof-flat-button\" color=\"primary\"\r\n          (click)=\"setLanguage$.emit()\">\r\n          <span fxLayoutAlign=\"center center\">\r\n            <i class=\"far fa-globe language-globe\"></i>\r\n            {{otherLangText | translate}}\r\n          </span>\r\n        </button>\r\n        }\r\n      </div>\r\n      }\r\n      <!-- Authorization button -->\r\n      @if (settings?.displayAuthInfo) {\r\n      <div fxFlex=\"auto 0 1\">\r\n        @if (!isLoggedIn) {\r\n        <button id=\"sof-ar-header-btn-auth\" mat-flat-button color=\"primary\" (click)=\"authorizeUser()\"\r\n          [attr.aria-label]=\"authBtnText | translate\" class=\"sof-flat-button\">\r\n          {{ authBtnText | translate }}\r\n        </button>\r\n        } @else {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\">\r\n          <div fxFlex=\"auto 0 1\" fxHide.lt-md>\r\n            <button [disabled]=\"settings?.makeUsernameUnclickable\" id=\"sof-ar-logged-in-btn-dropdown\"\r\n              data-privacy=\"exclude\" [matMenuTriggerFor]=\"sofArLoginMenu\" mat-stroked-button\r\n              style=\"padding-left:0px !important\" ngClass=\"left-radius-10 sof-stroked-button mobile-border\"\r\n              color=\"primary\">\r\n              <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"15px\">\r\n                <div fxFlex=\"46px\" 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              @if (settings.displayDarkTheme) {\r\n              <div 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              }\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-flat-button class=\"sof-flat-icon-button\" color=\"primary\" size=\"medium\"\r\n              (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        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </mat-toolbar>\r\n</header>", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #edf4ff;--primary-color-100-parts: #b9d4fc;--primary-color-200-parts: #8ab7fb;--primary-color-300-parts: #5b9af9;--primary-color-400-parts: #3784f7;--primary-color-500-parts: #146ef6;--primary-color-600-parts: #1266f5;--primary-color-700-parts: #0e5bf3;--primary-color-800-parts: #0b51f2;--primary-color-900-parts: #063fef;--primary-color-A50-parts: rgba(20, 110, 246, .04);--primary-color-A100-parts: rgba(20, 110, 246, .08);--primary-color-A200-parts: rgba(20, 110, 246, .16);--primary-color-A300-parts: rgba(20, 110, 246, .24);--primary-color-A400-parts: rgba(20, 110, 246, .32);--primary-color-A500-parts: rgba(20, 110, 246, .4);--primary-color-A600-parts: rgba(20, 110, 246, .48);--primary-color-A700-parts: rgba(20, 110, 246, .56);--primary-color-A800-parts: rgba(20, 110, 246, .64);--primary-color-A900-parts: rgba(20, 110, 246, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 237, 244, 255;--primary-color-100-parts-rgb: 185, 212, 252;--primary-color-200-parts-rgb: 138, 183, 251;--primary-color-300-parts-rgb: 91, 154, 249;--primary-color-400-parts-rgb: 55, 132, 247;--primary-color-500-parts-rgb: 20, 110, 246;--primary-color-600-parts-rgb: 18, 102, 245;--primary-color-700-parts-rgb: 14, 91, 243;--primary-color-800-parts-rgb: 11, 81, 242;--primary-color-900-parts-rgb: 6, 63, 239;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #edf4ff;--info-color-100-parts: #b9d4fc;--info-color-200-parts: #8ab7fb;--info-color-300-parts: #5b9af9;--info-color-400-parts: #3784f7;--info-color-500-parts: #146ef6;--info-color-600-parts: #1266f5;--info-color-700-parts: #0e5bf3;--info-color-800-parts: #0b51f2;--info-color-900-parts: #063fef;--info-color-A50-parts: rgba(20, 110, 246, .04);--info-color-A100-parts: rgba(20, 110, 246, .08);--info-color-A200-parts: rgba(20, 110, 246, .16);--info-color-A300-parts: rgba(20, 110, 246, .24);--info-color-A400-parts: rgba(20, 110, 246, .32);--info-color-A500-parts: rgba(20, 110, 246, .4);--info-color-A600-parts: rgba(20, 110, 246, .48);--info-color-A700-parts: rgba(20, 110, 246, .56);--info-color-A800-parts: rgba(20, 110, 246, .64);--info-color-A900-parts: rgba(20, 110, 246, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(0, 0, 0, .87);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 237, 244, 255;--info-color-100-parts-rgb: 185, 212, 252;--info-color-200-parts-rgb: 138, 183, 251;--info-color-300-parts-rgb: 91, 154, 249;--info-color-400-parts-rgb: 55, 132, 247;--info-color-500-parts-rgb: 20, 110, 246;--info-color-600-parts-rgb: 18, 102, 245;--info-color-700-parts-rgb: 14, 91, 243;--info-color-800-parts-rgb: 11, 81, 242;--info-color-900-parts-rgb: 6, 63, 239;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}.sof-super-header{height:34px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width:599px){.sof-super-header{justify-content:center;padding:0}}.external-link-button{margin-left:-7px;min-width:44px;width:44px}.sof-ar-header-logo-upper-text{color:#0009;font-family:Poppins;font-style:normal;line-height:normal;font-size:14px;font-weight:500}.sof-ar-header-logo-lower-text{color:#0009;font-family:Poppins;font-style:normal;line-height:normal;font-size:12px;font-weight:400}.external-link-container{width:250px}.link-text-container{margin-left:8px}.external-link-button{font-size:32px}.external-link-icon{font-size:26px}.sof-ar-header{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.sof-ar-header.sof-ar-header-shadow{box-shadow:0 1px 4px #00000080}.sof-ar-header-logo-text{font-size:20px;display:inline-block}::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-mdc-menu-content{padding-top:0!important;padding-bottom:0!important;min-width:150px}::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{display:flex!important;align-items:center}::ng-deep .sof-ar-header-button-text{font-weight:600;font-size:14px;padding-left:10px;padding-right:10px}.sof-ar-header-logo{max-width:100%;height:32px}@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}.absent-account-image{border-right:2px solid var(--primary-color-500-parts)!important;border-radius:6px!important;background:var(--primary-color-500-parts)!important;color:#fff;font-weight:500!important;font-size:16px!important;height:46px!important;margin-left:-1px!important;margin-top:-1px!important}.signed-in-name{font-weight:500!important;font-size:16px!important;color:var(--primary-color-500-parts)!important}.left-radius-10{border-top-left-radius:11px!important;border-bottom-left-radius:11px!important}.language-globe{padding-right:8px;font-size:20px!important}.dark-theme-icon{font-size:20px!important}.selected-language-icon{color:var(--primary-color-500-parts)!important;font-size:20px!important;padding-right:10px!important}.hidden{display:none}@media screen and (max-width:960px){.mobile-border{padding:0;border:0px;border-radius:11px!important}}\n"], dependencies: [{ kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i13$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i1$6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ArmatureHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sof-ar-header', standalone: false, template: "@if (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}\r\n<header>\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\"\r\n      [class.sof-ar-toggle-navigation]=\"(mobileQuery.matches && (armatureNavigation || armatureHeaderOverlay)) || settings?.createSpaceForNavToggle\">\r\n      <!-- external links -->\r\n      @if(externalLinks().length) {\r\n        <button class=\"external-link-button\" mat-button [matMenuTriggerFor]=\"menu\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\r\n          <i class=\"ph ph-dots-nine external-link-button\"></i>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <div fxLayout=\"row wrap\" class=\"external-link-container\">\r\n            @for(link of externalLinks(); track link.translateKey) {\r\n              <a mat-menu-item fxLayout=\"column\" fxFlex=\"auto\" fxLayoutAlign=\"center start\" href=\"{{link.uri}}\" target=\"_blank\" [matTooltip]=\"(link.iconAltTextTranslateKey | translate)\">\r\n                @if(!!link.icon || !!link.logo) {\r\n                  <div fxFlex=\"auto\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n                    @if(!!link.icon) {\r\n                      <i class=\"{{link.icon}} external-link-icon\"></i>\r\n                    }\r\n                    @else if(!!link.logo){\r\n                    <img src=\"{{link.logo}}\" alt=\"{{link.iconAltTextTranslateKey | translate}}\" width=\"32px\" height=\"32px\" />\r\n                  }\r\n                </div>\r\n              }\r\n              @if(!!link.translateKey) {\r\n                <div fxFlex=\"auto\" class=\"link-text-container\">\r\n                  {{link.translateKey | translate}}\r\n                </div>\r\n              }\r\n            </a>\r\n          }\r\n        </div>\r\n      </mat-menu>\r\n    }\r\n    <!-- Logo Image -->\r\n    @if (displayLogo) {\r\n      @if (settings?.logoRouterLinkPath === 'internal') {\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        } @else {\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        }\r\n      }\r\n      <!-- Logo Text -->\r\n      @if (displayLogoText) {\r\n        <p class=\"sof-ar-header-logo-text\">{{headerLogoText}}</p>\r\n      }\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      @if (displayDropDownMenu) {\r\n        <div fxFlex=\"auto 0 1\">\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      }\r\n      <!-- Language button -->\r\n      @if (headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length > 2 &&  !mobileQuery.matches) {\r\n        <div fxFlex=\"auto 0 1\"\r\n          >\r\n          <button id=\"sof-ar-header-lang-dropdown\" mat-flat-button class=\"sof-flat-button\" color=\"primary\"\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            @for (lang of headerLanguageSettings.languages; track lang) {\r\n              <button mat-menu-item (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                    @if (currentLang === lang) {\r\n                      <i class=\"fad fa-check selected-language-icon\"></i>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </button>\r\n            }\r\n          </mat-menu>\r\n        </div>\r\n      }\r\n      @if (headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length === 2 &&  !mobileQuery.matches) {\r\n        <div\r\n          >\r\n          @if (headerLanguageSettings.languages.length === 2) {\r\n            <button id=\"sof-ar-header-lang-button\" mat-flat-button\r\n              class=\"sof-flat-button\" color=\"primary\" (click)=\"setLanguage$.emit()\">\r\n              <span fxLayoutAlign=\"center center\">\r\n                <i class=\"far fa-globe language-globe\"></i>\r\n                {{otherLangText | translate}}\r\n              </span>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n      <!-- Authorization button -->\r\n      @if (settings?.displayAuthInfo) {\r\n        <div fxFlex=\"auto 0 1\">\r\n          @if (!isLoggedIn) {\r\n            <button id=\"sof-ar-header-btn-auth\" mat-flat-button color=\"primary\"\r\n              (click)=\"authorizeUser()\" [attr.aria-label]=\"authBtnText | translate\" class=\"sof-flat-button\">\r\n              {{ authBtnText | translate }}\r\n            </button>\r\n          } @else {\r\n            <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\">\r\n              <div fxFlex=\"auto 0 1\" fxHide.lt-md>\r\n                <button [disabled]=\"settings?.makeUsernameUnclickable\" id=\"sof-ar-logged-in-btn-dropdown\"\r\n                  data-privacy=\"exclude\" [matMenuTriggerFor]=\"sofArLoginMenu\" mat-stroked-button\r\n                  style=\"padding-left:0px !important\" ngClass=\"left-radius-10 sof-stroked-button mobile-border\"\r\n                  color=\"primary\">\r\n                  <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"15px\">\r\n                    <div fxFlex=\"46px\" 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                  @if (settings.displayDarkTheme) {\r\n                    <div 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                  }\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-flat-button class=\"sof-flat-icon-button\" color=\"primary\" size=\"medium\"\r\n                  (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          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </mat-toolbar>\r\n</header>", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #edf4ff;--primary-color-100-parts: #b9d4fc;--primary-color-200-parts: #8ab7fb;--primary-color-300-parts: #5b9af9;--primary-color-400-parts: #3784f7;--primary-color-500-parts: #146ef6;--primary-color-600-parts: #1266f5;--primary-color-700-parts: #0e5bf3;--primary-color-800-parts: #0b51f2;--primary-color-900-parts: #063fef;--primary-color-A50-parts: rgba(20, 110, 246, .04);--primary-color-A100-parts: rgba(20, 110, 246, .08);--primary-color-A200-parts: rgba(20, 110, 246, .16);--primary-color-A300-parts: rgba(20, 110, 246, .24);--primary-color-A400-parts: rgba(20, 110, 246, .32);--primary-color-A500-parts: rgba(20, 110, 246, .4);--primary-color-A600-parts: rgba(20, 110, 246, .48);--primary-color-A700-parts: rgba(20, 110, 246, .56);--primary-color-A800-parts: rgba(20, 110, 246, .64);--primary-color-A900-parts: rgba(20, 110, 246, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 237, 244, 255;--primary-color-100-parts-rgb: 185, 212, 252;--primary-color-200-parts-rgb: 138, 183, 251;--primary-color-300-parts-rgb: 91, 154, 249;--primary-color-400-parts-rgb: 55, 132, 247;--primary-color-500-parts-rgb: 20, 110, 246;--primary-color-600-parts-rgb: 18, 102, 245;--primary-color-700-parts-rgb: 14, 91, 243;--primary-color-800-parts-rgb: 11, 81, 242;--primary-color-900-parts-rgb: 6, 63, 239;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #edf4ff;--info-color-100-parts: #b9d4fc;--info-color-200-parts: #8ab7fb;--info-color-300-parts: #5b9af9;--info-color-400-parts: #3784f7;--info-color-500-parts: #146ef6;--info-color-600-parts: #1266f5;--info-color-700-parts: #0e5bf3;--info-color-800-parts: #0b51f2;--info-color-900-parts: #063fef;--info-color-A50-parts: rgba(20, 110, 246, .04);--info-color-A100-parts: rgba(20, 110, 246, .08);--info-color-A200-parts: rgba(20, 110, 246, .16);--info-color-A300-parts: rgba(20, 110, 246, .24);--info-color-A400-parts: rgba(20, 110, 246, .32);--info-color-A500-parts: rgba(20, 110, 246, .4);--info-color-A600-parts: rgba(20, 110, 246, .48);--info-color-A700-parts: rgba(20, 110, 246, .56);--info-color-A800-parts: rgba(20, 110, 246, .64);--info-color-A900-parts: rgba(20, 110, 246, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(0, 0, 0, .87);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 237, 244, 255;--info-color-100-parts-rgb: 185, 212, 252;--info-color-200-parts-rgb: 138, 183, 251;--info-color-300-parts-rgb: 91, 154, 249;--info-color-400-parts-rgb: 55, 132, 247;--info-color-500-parts-rgb: 20, 110, 246;--info-color-600-parts-rgb: 18, 102, 245;--info-color-700-parts-rgb: 14, 91, 243;--info-color-800-parts-rgb: 11, 81, 242;--info-color-900-parts-rgb: 6, 63, 239;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}.sof-super-header{height:34px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width:599px){.sof-super-header{justify-content:center;padding:0}}.external-link-button{margin-left:-7px;min-width:44px;width:44px}.external-link-container{width:250px}.link-text-container{margin-left:8px}.external-link-button{font-size:32px}.external-link-icon{font-size:26px}.sof-ar-header{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.sof-ar-header.sof-ar-header-shadow{box-shadow:0 1px 4px #00000080}.sof-ar-header-logo-text{font-size:20px;display:inline-block}::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-mdc-menu-content{padding-top:0!important;padding-bottom:0!important;min-width:150px}::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{display:flex!important;align-items:center}::ng-deep .sof-ar-header-button-text{font-weight:600;font-size:14px;padding-left:10px;padding-right:10px}.sof-ar-header-logo{max-width:100%;height:32px}@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}.absent-account-image{border-right:2px solid var(--primary-color-500-parts)!important;border-radius:6px!important;background:var(--primary-color-500-parts)!important;color:#fff;font-weight:500!important;font-size:16px!important;height:46px!important;margin-left:-1px!important;margin-top:-1px!important}.signed-in-name{font-weight:500!important;font-size:16px!important;color:var(--primary-color-500-parts)!important}.left-radius-10{border-top-left-radius:11px!important;border-bottom-left-radius:11px!important}.language-globe{padding-right:8px;font-size:20px!important}.dark-theme-icon{font-size:20px!important}.selected-language-icon{color:var(--primary-color-500-parts)!important;font-size:20px!important;padding-right:10px!important}.hidden{display:none}@media screen and (max-width:960px){.mobile-border{padding:0;border:0px;border-radius:11px!important}}\n"] }]
+            args: [{ selector: 'sof-ar-header', standalone: false, template: "@if (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}\r\n<header>\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\"\r\n      [class.sof-ar-toggle-navigation]=\"(mobileQuery.matches && (armatureNavigation || armatureHeaderOverlay)) || settings?.createSpaceForNavToggle\">\r\n      <!-- external links -->\r\n      @if(externalLinks().length) {\r\n      <button class=\"external-link-button\" mat-button [matMenuTriggerFor]=\"menu\" fxLayout=\"column\"\r\n        fxLayoutAlign=\"center center\">\r\n        <i class=\"ph ph-dots-nine external-link-button\"></i>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <div fxLayout=\"row wrap\" class=\"external-link-container\">\r\n          @for(link of externalLinks(); track link.translateKey) {\r\n          <a mat-menu-item fxLayout=\"column\" fxFlex=\"auto\" fxLayoutAlign=\"center start\" href=\"{{link.uri}}\"\r\n            target=\"_blank\" [matTooltip]=\"(link.iconAltTextTranslateKey | translate)\">\r\n            @if(!!link.icon || !!link.logo) {\r\n            <div fxFlex=\"auto\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n              @if(!!link.icon) {\r\n              <i class=\"{{link.icon}} external-link-icon\"></i>\r\n              }\r\n              @else if(!!link.logo){\r\n              <img src=\"{{link.logo}}\" alt=\"{{link.iconAltTextTranslateKey | translate}}\" width=\"32px\" height=\"32px\" />\r\n              }\r\n            </div>\r\n            }\r\n            @if(!!link.translateKey) {\r\n            <div fxFlex=\"auto\" class=\"link-text-container\">\r\n              {{link.translateKey | translate}}\r\n            </div>\r\n            }\r\n          </a>\r\n          }\r\n        </div>\r\n      </mat-menu>\r\n      }\r\n      <!-- Logo Image -->\r\n      @if (displayLogo) {\r\n      @if (settings?.logoRouterLinkPath === 'internal') {\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      } @else {\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      }\r\n      }\r\n      <!-- Logo Text -->\r\n      @if (displayLogoText) {\r\n      @if(!!subHeaderLogoText){\r\n      <div fxFlex fxLayout=\"column\" gap=\"2px\">\r\n        <span class=\"sof-ar-header-logo-upper-text\">{{headerLogoText}}</span>\r\n        <span class=\"sof-ar-header-logo-lower-text\">{{subHeaderLogoText}}</span>\r\n      </div>\r\n      } @else {\r\n      <p class=\"sof-ar-header-logo-text\">{{headerLogoText}}</p>\r\n      }\r\n\r\n      }\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      @if (displayDropDownMenu) {\r\n      <div fxFlex=\"auto 0 1\">\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      }\r\n      <!-- Language button -->\r\n      @if (headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length > 2 &&\r\n      !mobileQuery.matches) {\r\n      <div fxFlex=\"auto 0 1\">\r\n        <button id=\"sof-ar-header-lang-dropdown\" mat-flat-button class=\"sof-flat-button\" color=\"primary\"\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          @for (lang of headerLanguageSettings.languages; track lang) {\r\n          <button mat-menu-item (click)=\"setLanguage$.emit(lang)\" 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                @if (currentLang === lang) {\r\n                <i class=\"fad fa-check selected-language-icon\"></i>\r\n                }\r\n              </div>\r\n            </div>\r\n          </button>\r\n          }\r\n        </mat-menu>\r\n      </div>\r\n      }\r\n      @if (headerLanguageSettings?.displayLanguageOptions && headerLanguageSettings?.languages?.length === 2 &&\r\n      !mobileQuery.matches) {\r\n      <div>\r\n        @if (headerLanguageSettings.languages.length === 2) {\r\n        <button id=\"sof-ar-header-lang-button\" mat-flat-button class=\"sof-flat-button\" color=\"primary\"\r\n          (click)=\"setLanguage$.emit()\">\r\n          <span fxLayoutAlign=\"center center\">\r\n            <i class=\"far fa-globe language-globe\"></i>\r\n            {{otherLangText | translate}}\r\n          </span>\r\n        </button>\r\n        }\r\n      </div>\r\n      }\r\n      <!-- Authorization button -->\r\n      @if (settings?.displayAuthInfo) {\r\n      <div fxFlex=\"auto 0 1\">\r\n        @if (!isLoggedIn) {\r\n        <button id=\"sof-ar-header-btn-auth\" mat-flat-button color=\"primary\" (click)=\"authorizeUser()\"\r\n          [attr.aria-label]=\"authBtnText | translate\" class=\"sof-flat-button\">\r\n          {{ authBtnText | translate }}\r\n        </button>\r\n        } @else {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\">\r\n          <div fxFlex=\"auto 0 1\" fxHide.lt-md>\r\n            <button [disabled]=\"settings?.makeUsernameUnclickable\" id=\"sof-ar-logged-in-btn-dropdown\"\r\n              data-privacy=\"exclude\" [matMenuTriggerFor]=\"sofArLoginMenu\" mat-stroked-button\r\n              style=\"padding-left:0px !important\" ngClass=\"left-radius-10 sof-stroked-button mobile-border\"\r\n              color=\"primary\">\r\n              <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"15px\">\r\n                <div fxFlex=\"46px\" 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              @if (settings.displayDarkTheme) {\r\n              <div 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              }\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-flat-button class=\"sof-flat-icon-button\" color=\"primary\" size=\"medium\"\r\n              (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        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </mat-toolbar>\r\n</header>", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #edf4ff;--primary-color-100-parts: #b9d4fc;--primary-color-200-parts: #8ab7fb;--primary-color-300-parts: #5b9af9;--primary-color-400-parts: #3784f7;--primary-color-500-parts: #146ef6;--primary-color-600-parts: #1266f5;--primary-color-700-parts: #0e5bf3;--primary-color-800-parts: #0b51f2;--primary-color-900-parts: #063fef;--primary-color-A50-parts: rgba(20, 110, 246, .04);--primary-color-A100-parts: rgba(20, 110, 246, .08);--primary-color-A200-parts: rgba(20, 110, 246, .16);--primary-color-A300-parts: rgba(20, 110, 246, .24);--primary-color-A400-parts: rgba(20, 110, 246, .32);--primary-color-A500-parts: rgba(20, 110, 246, .4);--primary-color-A600-parts: rgba(20, 110, 246, .48);--primary-color-A700-parts: rgba(20, 110, 246, .56);--primary-color-A800-parts: rgba(20, 110, 246, .64);--primary-color-A900-parts: rgba(20, 110, 246, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 237, 244, 255;--primary-color-100-parts-rgb: 185, 212, 252;--primary-color-200-parts-rgb: 138, 183, 251;--primary-color-300-parts-rgb: 91, 154, 249;--primary-color-400-parts-rgb: 55, 132, 247;--primary-color-500-parts-rgb: 20, 110, 246;--primary-color-600-parts-rgb: 18, 102, 245;--primary-color-700-parts-rgb: 14, 91, 243;--primary-color-800-parts-rgb: 11, 81, 242;--primary-color-900-parts-rgb: 6, 63, 239;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #edf4ff;--info-color-100-parts: #b9d4fc;--info-color-200-parts: #8ab7fb;--info-color-300-parts: #5b9af9;--info-color-400-parts: #3784f7;--info-color-500-parts: #146ef6;--info-color-600-parts: #1266f5;--info-color-700-parts: #0e5bf3;--info-color-800-parts: #0b51f2;--info-color-900-parts: #063fef;--info-color-A50-parts: rgba(20, 110, 246, .04);--info-color-A100-parts: rgba(20, 110, 246, .08);--info-color-A200-parts: rgba(20, 110, 246, .16);--info-color-A300-parts: rgba(20, 110, 246, .24);--info-color-A400-parts: rgba(20, 110, 246, .32);--info-color-A500-parts: rgba(20, 110, 246, .4);--info-color-A600-parts: rgba(20, 110, 246, .48);--info-color-A700-parts: rgba(20, 110, 246, .56);--info-color-A800-parts: rgba(20, 110, 246, .64);--info-color-A900-parts: rgba(20, 110, 246, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(0, 0, 0, .87);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 237, 244, 255;--info-color-100-parts-rgb: 185, 212, 252;--info-color-200-parts-rgb: 138, 183, 251;--info-color-300-parts-rgb: 91, 154, 249;--info-color-400-parts-rgb: 55, 132, 247;--info-color-500-parts-rgb: 20, 110, 246;--info-color-600-parts-rgb: 18, 102, 245;--info-color-700-parts-rgb: 14, 91, 243;--info-color-800-parts-rgb: 11, 81, 242;--info-color-900-parts-rgb: 6, 63, 239;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}.sof-super-header{height:34px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width:599px){.sof-super-header{justify-content:center;padding:0}}.external-link-button{margin-left:-7px;min-width:44px;width:44px}.sof-ar-header-logo-upper-text{color:#0009;font-family:Poppins;font-style:normal;line-height:normal;font-size:14px;font-weight:500}.sof-ar-header-logo-lower-text{color:#0009;font-family:Poppins;font-style:normal;line-height:normal;font-size:12px;font-weight:400}.external-link-container{width:250px}.link-text-container{margin-left:8px}.external-link-button{font-size:32px}.external-link-icon{font-size:26px}.sof-ar-header{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.sof-ar-header.sof-ar-header-shadow{box-shadow:0 1px 4px #00000080}.sof-ar-header-logo-text{font-size:20px;display:inline-block}::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-mdc-menu-content{padding-top:0!important;padding-bottom:0!important;min-width:150px}::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{display:flex!important;align-items:center}::ng-deep .sof-ar-header-button-text{font-weight:600;font-size:14px;padding-left:10px;padding-right:10px}.sof-ar-header-logo{max-width:100%;height:32px}@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}.absent-account-image{border-right:2px solid var(--primary-color-500-parts)!important;border-radius:6px!important;background:var(--primary-color-500-parts)!important;color:#fff;font-weight:500!important;font-size:16px!important;height:46px!important;margin-left:-1px!important;margin-top:-1px!important}.signed-in-name{font-weight:500!important;font-size:16px!important;color:var(--primary-color-500-parts)!important}.left-radius-10{border-top-left-radius:11px!important;border-bottom-left-radius:11px!important}.language-globe{padding-right:8px;font-size:20px!important}.dark-theme-icon{font-size:20px!important}.selected-language-icon{color:var(--primary-color-500-parts)!important;font-size:20px!important;padding-right:10px!important}.hidden{display:none}@media screen and (max-width:960px){.mobile-border{padding:0;border:0px;border-radius:11px!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.OAuthService }, { type: i1$2.OAuthStorage }, { type: i2$1.TranslateService }, { type: i1$3.MediaMatcher }, { type: i0.ChangeDetectorRef }, { type: AuthorizationService }, { type: HybridSamlOauthService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { settings: [{
@@ -7658,11 +7659,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 /**
+ * Default trackBy function for primitive values
+ */
+function defaultTrackBy(value) {
+    return value;
+}
+/**
+ * Generic select component that can work with any value type.
  * @description
  * - This component can be used as a single select or multi-select.
  * - Can be used with a reactive formControlName.
  * - Can be used with [(ngModel)] binding.
  * - Can be used without a form using the (selectionChange) output event.
+ * - Supports any value type (string, number, object) via the SelectOption<T> interface.
+ * @example
+ * // String values
+ * <sof-select
+ *   [id]="'country-select'"
+ *   [options]="countries"
+ *   label="Select Country">
+ * </sof-select>
+ *
+ * // Object values with trackBy
+ * <sof-select
+ *   [id]="'user-select'"
+ *   [options]="users"
+ *   label="Select User">
+ * </sof-select>
  */
 class SofSelectComponent {
     /** Select options */
@@ -7782,10 +7805,15 @@ class SofSelectComponent {
         this.isRequired = signal(undefined, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
         /** Destroy ref to unsubscribe */
         this._destroyRef = inject(DestroyRef);
-        /** Options input as Map */
+        /** Options input as Map using trackBy to generate keys for object comparison */
         this._valueToLabelMap = computed(() => {
             const opts = this.readOptions();
-            return new Map(opts?.map(opt => [opt?.value, opt?.label]));
+            const map = new Map();
+            opts?.forEach(opt => {
+                const key = this._getTrackByValue(opt);
+                map.set(key, opt?.label);
+            });
+            return map;
         }, ...(ngDevMode ? [{ debugName: "_valueToLabelMap" }] : []));
         /**
          * The selected item label
@@ -7794,11 +7822,13 @@ class SofSelectComponent {
         this.selectedLabelSingle = computed(() => {
             const selected = this.selected();
             const valueToLabelMap = this._valueToLabelMap();
-            if (!selected || (Array.isArray(selected) ? selected?.length === 0 : !selected?.length)) {
+            const hasSelection = Array.isArray(selected) ? selected.length > 0 : !!selected;
+            if (!hasSelection) {
                 return this.label;
             }
             const selectedValue = selected;
-            return valueToLabelMap.get(selectedValue) ?? selectedValue;
+            const key = this._getTrackByValueForValue(selectedValue);
+            return valueToLabelMap.get(key) ?? this._formatValue(selectedValue);
         }, ...(ngDevMode ? [{ debugName: "selectedLabelSingle" }] : []));
         /**
          * The selected item's [item's label's]
@@ -7807,11 +7837,15 @@ class SofSelectComponent {
         this.selectedLabelsMultiple = computed(() => {
             const selected = this.selected();
             const valueToLabelMap = this._valueToLabelMap();
-            if (!selected || (Array.isArray(selected) ? selected?.length === 0 : !selected?.length)) {
+            const hasSelection = Array.isArray(selected) ? selected.length > 0 : !!selected;
+            if (!hasSelection) {
                 return [this.label];
             }
-            const selectedArray = selected;
-            return selectedArray.map(value => valueToLabelMap.get(value) ?? value);
+            const selectedArray = Array.isArray(selected) ? selected : [selected];
+            return selectedArray.map(value => {
+                const key = this._getTrackByValueForValue(value);
+                return valueToLabelMap.get(key) ?? this._formatValue(value);
+            });
         }, ...(ngDevMode ? [{ debugName: "selectedLabelsMultiple" }] : []));
         /**
          * The selected item's [item's label's] visible chips
@@ -7821,13 +7855,55 @@ class SofSelectComponent {
         /** The number of hidden chips */
         this.hiddenChipsCount = signal(0, ...(ngDevMode ? [{ debugName: "hiddenChipsCount" }] : []));
         /** Are all items selected ? (multiple select) */
-        this.isAllSelected = computed(() => this.multiple &&
-            Array.isArray(this.selected()) &&
-            this.selected().length === this.readOptions().length, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
-        /** Is the option selected ? */
-        this.isSelected = (optionValue) => computed(() => this.multiple ?
-            (this.selected() ?? []).includes(optionValue) :
-            this.selected() === optionValue);
+        this.isAllSelected = computed(() => {
+            if (!this.multiple)
+                return false;
+            const selected = this.selected();
+            return Array.isArray(selected) && selected.length === this.readOptions().length;
+        }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+        /**
+         * Is the option selected ?
+         * @param optionValue The value of the option to check
+         */
+        this.isSelected = (optionValue) => computed(() => {
+            const selected = this.selected();
+            if (this.multiple) {
+                const selectedArray = selected ?? [];
+                return this._isValueSelected(optionValue, selectedArray);
+            }
+            return this._isValuesEqual(selected, optionValue);
+        });
+        /**
+         * Check if an option should be disabled based on maxSelections limit
+         * @param option The select option to check
+         * @returns Computed signal that returns true if option should be disabled
+         */
+        this.isOptionDisabled = (option) => computed(() => {
+            // Already disabled by option's own isDisabled property
+            if (option.isDisabled)
+                return true;
+            // No max limit set or not multiple select
+            if (!this.maxSelections || !this.multiple)
+                return false;
+            // Already selected options can always be toggled
+            if (this.isSelected(option.value)())
+                return false;
+            // Check if max selections reached
+            const selected = this.selected();
+            const selectedArray = Array.isArray(selected) ? selected : [];
+            return selectedArray.length >= this.maxSelections;
+        });
+        /**
+         * Check if max selections limit is reached
+         * @returns True if the limit is reached and no more selections can be made
+         */
+        this.isMaxSelectionsReached = computed(() => {
+            if (!this.maxSelections || !this.multiple)
+                return false;
+            const selected = this.selected();
+            const selectedArray = Array.isArray(selected) ? selected : [];
+            return selectedArray.length >= this.maxSelections;
+        }, ...(ngDevMode ? [{ debugName: "isMaxSelectionsReached" }] : []));
         /** The form control name */
         this.controlName = "";
         if (this._ngControl) {
@@ -7841,6 +7917,28 @@ class SofSelectComponent {
                 this.updateVisibleChips();
             }
         });
+        // Effect to clear selection when options change (only invalid selections)
+        effect(() => {
+            const options = this._options();
+            const currentSelected = this.selected();
+            if (this.multiple) {
+                const selectedArray = currentSelected || [];
+                const validSelections = selectedArray.filter(value => options.some(opt => this._isValuesEqual(opt.value, value)));
+                // Only update if some selections became invalid
+                if (validSelections.length !== selectedArray.length) {
+                    this.selected.set(validSelections);
+                }
+            }
+            else {
+                const singleValue = currentSelected;
+                // Only clear if the selected value is no longer in options
+                const isValid = singleValue !== null &&
+                    options.some(opt => this._isValuesEqual(opt.value, singleValue));
+                if (!isValid) {
+                    this.selected.set(null);
+                }
+            }
+        });
     }
     /** Component init */
     ngOnInit() {
@@ -7876,6 +7974,9 @@ class SofSelectComponent {
         if (this._resizeObserver) {
             this._resizeObserver.disconnect();
         }
+        if (this._typeaheadTimeout) {
+            clearTimeout(this._typeaheadTimeout);
+        }
     }
     /** Toggle the select panel open/close */
     togglePanel() {
@@ -7886,7 +7987,9 @@ class SofSelectComponent {
         this.expanded.set(false);
         this.activeIndex = -1;
         this._onTouched();
-        if ((!this.selected()?.length || this.multiple) && !!this.derivedFormControl) {
+        const selected = this.selected();
+        const hasNoSelection = Array.isArray(selected) ? selected.length === 0 : !selected;
+        if ((hasNoSelection || this.multiple) && !!this.derivedFormControl) {
             this.validate();
         }
     }
@@ -7907,7 +8010,7 @@ class SofSelectComponent {
             if (this.multiple) {
                 const arr = this.selected() || [];
                 this.selected.set(this.isSelected(option.value)() ?
-                    arr.filter(v => v !== option.value) :
+                    arr.filter(v => !this._isValuesEqual(v, option.value)) :
                     [...arr, option.value]);
             }
             else {
@@ -7956,7 +8059,9 @@ class SofSelectComponent {
             return;
         }
         const option = this.readOptions().find((option) => option.label === label);
-        this.onOptionClick(option);
+        if (option) {
+            this.onOptionClick(option);
+        }
     }
     /** Close the panel if clicked outside */
     onDocumentClick(event) {
@@ -8046,12 +8151,96 @@ class SofSelectComponent {
             listbox.setAttribute('aria-activedescendant', lastActiveId);
         }
     }
+    /**
+     * Check if selected has items (for template use)
+     * @returns true if there are selected items
+     */
+    hasSelectedItems() {
+        const selected = this.selected();
+        if (Array.isArray(selected)) {
+            return selected.length > 0;
+        }
+        return !!selected;
+    }
+    /**
+     * Get trackBy key for an option
+     * @param option The select option
+     * @returns The trackBy key for the option's value
+     */
+    _getTrackByValue(option) {
+        if (option.trackBy) {
+            return option.trackBy(option.value);
+        }
+        return defaultTrackBy(option.value);
+    }
+    /**
+     * Get trackBy key for a raw value
+     * @param value The value to get trackBy key for
+     * @returns The trackBy key for the value
+     */
+    _getTrackByValueForValue(value) {
+        const option = this.readOptions().find(opt => this._isValuesEqual(opt.value, value));
+        if (option?.trackBy) {
+            return option.trackBy(value);
+        }
+        return defaultTrackBy(value);
+    }
+    /**
+     * Check if two values are equal
+     * @param a First value
+     * @param b Second value
+     * @returns True if values are equal
+     */
+    _isValuesEqual(a, b) {
+        if (a === b)
+            return true;
+        if (a == null || b == null)
+            return false;
+        // Try to find a matching option with trackBy
+        const options = this.readOptions();
+        // Check if both values match the same option's value using trackBy
+        for (const opt of options) {
+            if (opt.trackBy) {
+                const aKey = opt.trackBy(a);
+                const bKey = opt.trackBy(b);
+                if (aKey === bKey)
+                    return true;
+            }
+        }
+        // For objects, check if any option has trackBy that matches both
+        // or if they're the same object reference
+        if (typeof a === 'object' && typeof b === 'object') {
+            return JSON.stringify(a) === JSON.stringify(b);
+        }
+        return false;
+    }
+    /**
+     * Check if a value is selected in an array
+     * @param value The value to check
+     * @param selectedArray The array of selected values
+     * @returns True if the value is in the selected array
+     */
+    _isValueSelected(value, selectedArray) {
+        return selectedArray.some(selected => this._isValuesEqual(selected, value));
+    }
+    /**
+     * Format a value for display (fallback when no label found)
+     * @param value The value to format
+     * @returns String representation of the value
+     */
+    _formatValue(value) {
+        if (typeof value === 'object' && value !== null) {
+            return JSON.stringify(value);
+        }
+        return String(value);
+    }
     /**
      * Triggered when the form control value is set outside the component
      * @param value
     */
     writeValue(value) {
-        this.selected.set(value ?? (this.multiple ? [] : null));
+        const newValue = value !== undefined ? value : (this.multiple ? [] : null);
+        this.selected.set(newValue);
     }
     /**
      * Triggered when the form control is changed
@@ -8073,11 +8262,11 @@ class SofSelectComponent {
     }
     /** Runs the form control validator */
     validate() {
-        this._errors.set(this.derivedFormControl?.errors);
-        return this.derivedFormControl?.errors;
+        this._errors.set(this.derivedFormControl?.errors ?? null);
+        return this.derivedFormControl?.errors ?? null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofSelectComponent, deps: [{ token: i1$7.NgControl, host: true, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SofSelectComponent, isStandalone: true, selector: "sof-select", inputs: { id: "id", options: "options", label: "label", helpText: "helpText", multiple: "multiple", showSelectAll: "showSelectAll", isDisabled: "isDisabled", width: "width", useWhiteBackground: "useWhiteBackground", errorMessages: "errorMessages" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.full-width": "this.width === \"full\"" } }, viewQueries: [{ propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "multiChipContainer", first: true, predicate: ["multiChipContainer"], descendants: true }], ngImport: i0, template: "<div \r\n  class=\"sof-select-field\"\r\n  [class.full-width]=\"width === 'full'\">\r\n  @if ((selected()?.length || 0) > 0) {\r\n    <label \r\n      [for]=\"id + '-select-trigger'\"\r\n      [class.text-low-emphasis]=\"isDisabled\"\r\n      [class.has-error]=\"errorMessage()?.length\">\r\n      {{label | translate}}{{isRequired() ? '*':''}}\r\n    </label>\r\n  }\r\n  <div class=\"relative-container\">\r\n    <button \r\n      [id]=\"id + '-select-trigger'\" \r\n      [name]=\"controlName\"\r\n      class=\"trigger p-v-8 p-h-16\" \r\n      [class.has-error]=\"errorMessage()?.length\"\r\n      [class.expanded]=\"expanded()\"\r\n      [class.white-bg]=\"useWhiteBackground\"\r\n      [disabled]=\"isDisabled\"\r\n      type=\"button\" \r\n      role=\"combobox\" \r\n      [attr.aria-expanded]=\"expanded()\" \r\n      [attr.aria-controls]=\"'listbox'\"\r\n      aria-haspopup=\"listbox\" \r\n      (click)=\"togglePanel()\">\r\n      @if (multiple) {\r\n        <div #multiChipContainer class=\"multi-chip-container\">\r\n          @if (selected()?.length) {\r\n            @if (isAllSelected()) {\r\n              <sof-chip \r\n                class=\"visible-chip\"\r\n                theme=\"primary\"\r\n                [label]=\"'armature.select.all'\"\r\n                [removeButtonId]=\"`${id}-select-chip-remove-all`\"\r\n                (removeEvent)=\"removeChip($event)\"\r\n              />\r\n            } @else {\r\n              @for (label of visibleChips(); let i = $index; track i) {\r\n                <sof-chip \r\n                  class=\"visible-chip\"\r\n                  theme=\"primary\"\r\n                  [label]=\"label\"\r\n                  [removeButtonId]=\"`${id}-select-chip-remove-${i}`\"\r\n                  (removeEvent)=\"removeChip($event)\"\r\n                />\r\n              }\r\n              @if (hiddenChipsCount()) {\r\n                <sof-chip \r\n                  theme=\"primary\"\r\n                  [label]=\"`+${hiddenChipsCount()}`\"\r\n                  [canRemove]=\"false\"\r\n                  m-l-auto\r\n                />\r\n              }\r\n            }\r\n          } @else {\r\n            <span class=\"body1 text-high-emphasis\">\r\n              {{selectedLabelsMultiple()[0] | translate}}{{(!selected()?.length && isRequired()) ? '*':''}}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <span class=\"body1 text-high-emphasis\">\r\n          {{selectedLabelSingle() | translate}}{{(!selected()?.length && isRequired()) ? '*':''}}\r\n        </span>\r\n      }\r\n      @if (errorMessage()?.length && !expanded()) {\r\n        <i class=\"ph-bold ph-warning-circle error-icon color-error m-l-auto\"></i>\r\n      }\r\n      <i \r\n        class=\"ph-bold ph-caret-{{expanded() ? 'up':'down'}} arrow-icon\" \r\n        [class.m-l-auto]=\"!errorMessage()?.length || (errorMessage()?.length && expanded())\">\r\n      </i>\r\n    </button>\r\n    @if (expanded()) {\r\n      <div \r\n        class=\"options-list-wrap\"\r\n        [class.white-bg]=\"useWhiteBackground\"\r\n        [class.has-error]=\"errorMessage()?.length\">\r\n        <ul \r\n          #listboxRef \r\n          id=\"listbox\" \r\n          class=\"options-list\"\r\n          role=\"listbox\" \r\n          tabindex=\"0\"\r\n          [attr.aria-multiselectable]=\"multiple\">\r\n          @if (multiple && showSelectAll) {\r\n            <li \r\n              [id]=\"id + '-list-option-all'\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isAllSelected()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"activeIndex === 0\"\r\n              [class.selected]=\"isAllSelected()\" \r\n              (click)=\"onOptionClick('ALL')\">\r\n              @if (isAllSelected()) {\r\n                <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n              } @else if (selected().length) {\r\n                <ng-container *ngTemplateOutlet=\"selectAllIndeterminateSvg\"></ng-container>\r\n              } @else {\r\n                <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis\">\r\n                {{'armature.select.all' | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n          @for (option of readOptions(); let i = $index; track i) {\r\n            <li \r\n              [id]=\"`${id}-list-option-${i}`\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isSelected(option.value)()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"i + ((multiple && showSelectAll) ? 1 : 0) === activeIndex\"\r\n              [class.selected]=\"isSelected(option.value)()\"\r\n              [class.disabled]=\"option.isDisabled\"\r\n              (click)=\"onOptionClick(option)\">\r\n              @if (multiple) {\r\n                @if (isSelected(option.value)()) {\r\n                  @if (option.isDisabled) {\r\n                    <ng-container *ngTemplateOutlet=\"checkedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n                  }\r\n                } @else {\r\n                  @if (option.isDisabled) {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n                  }\r\n                }\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis text-overflow-ellipsis\">\r\n                {{option.label | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (errorMessage()?.length) {\r\n    <span class=\"error-message color-error body3 fw-500\">\r\n      {{errorMessage() | translate}}\r\n    </span>\r\n  } @else {\r\n    @if (helpText?.length) {\r\n      <span \r\n        class=\"help-message body3 fw-400 text-medium-emphasis\"\r\n        [class.text-low-emphasis]=\"isDisabled\">\r\n        {{helpText | translate}}\r\n      </span>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #checkedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_1718)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"var(--primary-color-500-parts, #146EF6)\" stroke=\"var(--primary-color-500-parts, #146EF6)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12.75L10.5 15L15.75 9.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_1718\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #checkedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_5591)\">\r\n      <path d=\"M19.6055 3C20.5594 3 21.333 3.77359 21.333 4.72754V19.2725C21.333 20.2264 20.5594 21 19.6055 21H5.06055C4.1066 21 3.33301 20.2264 3.33301 19.2725V4.72754C3.33301 3.77359 4.1066 3 5.06055 3H19.6055Z\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.58301 12.75L10.833 15L16.083 9.75\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_5591\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.333008)\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_3289)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"var(--neutral-color-500-parts, #515151)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_3289\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3763)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"#515151\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3763\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #selectAllIndeterminateSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3054)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"#146EF6\" stroke=\"#146EF6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12H15.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3054\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #edf4ff;--primary-color-100-parts: #b9d4fc;--primary-color-200-parts: #8ab7fb;--primary-color-300-parts: #5b9af9;--primary-color-400-parts: #3784f7;--primary-color-500-parts: #146ef6;--primary-color-600-parts: #1266f5;--primary-color-700-parts: #0e5bf3;--primary-color-800-parts: #0b51f2;--primary-color-900-parts: #063fef;--primary-color-A50-parts: rgba(20, 110, 246, .04);--primary-color-A100-parts: rgba(20, 110, 246, .08);--primary-color-A200-parts: rgba(20, 110, 246, .16);--primary-color-A300-parts: rgba(20, 110, 246, .24);--primary-color-A400-parts: rgba(20, 110, 246, .32);--primary-color-A500-parts: rgba(20, 110, 246, .4);--primary-color-A600-parts: rgba(20, 110, 246, .48);--primary-color-A700-parts: rgba(20, 110, 246, .56);--primary-color-A800-parts: rgba(20, 110, 246, .64);--primary-color-A900-parts: rgba(20, 110, 246, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 237, 244, 255;--primary-color-100-parts-rgb: 185, 212, 252;--primary-color-200-parts-rgb: 138, 183, 251;--primary-color-300-parts-rgb: 91, 154, 249;--primary-color-400-parts-rgb: 55, 132, 247;--primary-color-500-parts-rgb: 20, 110, 246;--primary-color-600-parts-rgb: 18, 102, 245;--primary-color-700-parts-rgb: 14, 91, 243;--primary-color-800-parts-rgb: 11, 81, 242;--primary-color-900-parts-rgb: 6, 63, 239;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #edf4ff;--info-color-100-parts: #b9d4fc;--info-color-200-parts: #8ab7fb;--info-color-300-parts: #5b9af9;--info-color-400-parts: #3784f7;--info-color-500-parts: #146ef6;--info-color-600-parts: #1266f5;--info-color-700-parts: #0e5bf3;--info-color-800-parts: #0b51f2;--info-color-900-parts: #063fef;--info-color-A50-parts: rgba(20, 110, 246, .04);--info-color-A100-parts: rgba(20, 110, 246, .08);--info-color-A200-parts: rgba(20, 110, 246, .16);--info-color-A300-parts: rgba(20, 110, 246, .24);--info-color-A400-parts: rgba(20, 110, 246, .32);--info-color-A500-parts: rgba(20, 110, 246, .4);--info-color-A600-parts: rgba(20, 110, 246, .48);--info-color-A700-parts: rgba(20, 110, 246, .56);--info-color-A800-parts: rgba(20, 110, 246, .64);--info-color-A900-parts: rgba(20, 110, 246, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(0, 0, 0, .87);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 237, 244, 255;--info-color-100-parts-rgb: 185, 212, 252;--info-color-200-parts-rgb: 138, 183, 251;--info-color-300-parts-rgb: 91, 154, 249;--info-color-400-parts-rgb: 55, 132, 247;--info-color-500-parts-rgb: 20, 110, 246;--info-color-600-parts-rgb: 18, 102, 245;--info-color-700-parts-rgb: 14, 91, 243;--info-color-800-parts-rgb: 11, 81, 242;--info-color-900-parts-rgb: 6, 63, 239;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes floatingLabel{0%{transform:translate(16px,32px);opacity:0}to{transform:translate(0);opacity:1}}:host{display:inline-block;width:300px;min-width:300px}:host *{box-sizing:border-box}.sof-select-field{display:flex;flex-direction:column;position:relative}.sof-select-field label{position:absolute;top:-22px;display:inline-block;line-height:16px;z-index:1;font-size:12px;padding-left:2px;font-weight:500!important;color:#0009;transform:none;opacity:1;animation:floatingLabel .2s ease-in}.sof-select-field label.has-error{color:var(--error-color-500-parts)}.sof-select-field .relative-container{position:relative}.sof-select-field .relative-container .trigger{min-height:40px;height:40px;max-height:40px;display:flex;align-items:center;gap:8px;width:100%;border-radius:8px;background:#fafafa;border:2px solid transparent;cursor:pointer}.sof-select-field .relative-container .trigger.white-bg{background:#fff}.sof-select-field .relative-container .trigger.expanded{box-shadow:0 10px 10px #0000001a}.sof-select-field .relative-container .trigger:focus{outline:3px solid var(--primary-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger.has-error{border-color:var(--error-color-500-parts)}.sof-select-field .relative-container .trigger.has-error:focus{outline:3px solid var(--error-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger:disabled{cursor:default}.sof-select-field .relative-container .trigger:disabled span.body1,.sof-select-field .relative-container .trigger:disabled .arrow-icon{color:#00000061}.sof-select-field .relative-container .trigger span.body1{line-height:24px}.sof-select-field .relative-container .trigger .arrow-icon,.sof-select-field .relative-container .trigger .error-icon{pointer-events:none;font-size:20px}.sof-select-field .relative-container .trigger .error-icon{animation:fadeIn .2s ease-in}.sof-select-field .relative-container .trigger .arrow-icon{color:#333}.sof-select-field .relative-container .trigger .multi-chip-container{display:flex;gap:8px;width:100%;overflow:hidden}.sof-select-field .relative-container .options-list-wrap{position:absolute;z-index:10;top:32px;width:100%;padding-top:6px;border-radius:0 0 8px 8px;background:#fafafa}.sof-select-field .relative-container .options-list-wrap.white-bg{background:#fff}.sof-select-field .relative-container .options-list-wrap.has-error{border:2px solid var(--error-color-500-parts);border-top:none}.sof-select-field .relative-container .options-list-wrap:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list{max-height:200px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;list-style:none;border-radius:0 0 8px 8px;box-shadow:0 10px 10px #0000001a;scrollbar-color:#E9E9E9 transparent}.sof-select-field .relative-container .options-list-wrap .options-list:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list li{cursor:pointer;border-left:4px solid transparent;display:flex;align-items:center;gap:8px}.sof-select-field .relative-container .options-list-wrap .options-list li:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.active{background-color:var(--neutral-color-A50-parts);border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.selected{font-weight:500;border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled{pointer-events:none;color:#00000061}.sof-select-field .relative-container .options-list-wrap .options-list li svg{pointer-events:none;min-height:24px;min-width:24px;height:24px;width:24px;max-height:24px;max-width:24px}.sof-select-field .relative-container .options-list-wrap .options-list li .option-label{line-height:24px}.sof-select-field .help-message,.sof-select-field .error-message{display:inline-block;line-height:8px;margin-top:8px;padding-left:2px;animation:fadeIn .2s ease-in}.visible-chip{animation:fadeIn .2s ease-in}:host ::ng-deep .sof-chip span{cursor:pointer!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SofChipComponent, selector: "sof-chip", inputs: ["label", "canRemove", "theme", "iconClass", "removeButtonId"], outputs: ["removeEvent"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SofSelectComponent, isStandalone: true, selector: "sof-select", inputs: { id: "id", options: "options", label: "label", helpText: "helpText", multiple: "multiple", showSelectAll: "showSelectAll", maxSelections: "maxSelections", isDisabled: "isDisabled", width: "width", useWhiteBackground: "useWhiteBackground", errorMessages: "errorMessages" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.full-width": "this.width === \"full\"" } }, viewQueries: [{ propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "multiChipContainer", first: true, predicate: ["multiChipContainer"], descendants: true }], ngImport: i0, template: "<div \r\n  class=\"sof-select-field\"\r\n  [class.full-width]=\"width === 'full'\">\r\n  @if (hasSelectedItems()) {\r\n    <label \r\n      [for]=\"id + '-select-trigger'\"\r\n      [class.text-low-emphasis]=\"isDisabled\"\r\n      [class.has-error]=\"errorMessage()?.length\">\r\n      {{label | translate}}\r\n    </label>\r\n  }\r\n  <div class=\"relative-container\">\r\n    <button \r\n      [id]=\"id + '-select-trigger'\" \r\n      [name]=\"controlName\"\r\n      class=\"trigger p-v-8 p-h-16\" \r\n      [class.has-error]=\"errorMessage()?.length\"\r\n      [class.expanded]=\"expanded()\"\r\n      [class.white-bg]=\"useWhiteBackground\"\r\n      [disabled]=\"isDisabled\"\r\n      type=\"button\" \r\n      role=\"combobox\" \r\n      [attr.aria-expanded]=\"expanded()\" \r\n      [attr.aria-controls]=\"'listbox'\"\r\n      aria-haspopup=\"listbox\" \r\n      (click)=\"togglePanel()\">\r\n      @if (multiple) {\r\n        <div #multiChipContainer class=\"multi-chip-container\">\r\n          @if (hasSelectedItems()) {\r\n            @if (isAllSelected()) {\r\n              <sof-chip \r\n                class=\"visible-chip\"\r\n                theme=\"primary\"\r\n                [label]=\"'armature.select.all'\"\r\n                [removeButtonId]=\"`${id}-select-chip-remove-all`\"\r\n                (removeEvent)=\"removeChip($event)\"\r\n              />\r\n            } @else {\r\n              @for (label of visibleChips(); let i = $index; track i) {\r\n                <sof-chip \r\n                  class=\"visible-chip\"\r\n                  theme=\"primary\"\r\n                  [label]=\"label\"\r\n                  [removeButtonId]=\"`${id}-select-chip-remove-${i}`\"\r\n                  (removeEvent)=\"removeChip($event)\"\r\n                />\r\n              }\r\n              @if (hiddenChipsCount()) {\r\n                <sof-chip \r\n                  theme=\"primary\"\r\n                  [label]=\"`+${hiddenChipsCount()}`\"\r\n                  [canRemove]=\"false\"\r\n                  m-l-auto\r\n                />\r\n              }\r\n            }\r\n          } @else {\r\n            <span class=\"body1 text-high-emphasis\">\r\n              {{selectedLabelsMultiple()[0] | translate}}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <span class=\"body1 text-high-emphasis\">\r\n          {{selectedLabelSingle() | translate}}\r\n        </span>\r\n      }\r\n      @if (errorMessage()?.length && !expanded()) {\r\n        <i class=\"ph-bold ph-warning-circle error-icon color-error m-l-auto\"></i>\r\n      }\r\n      <i \r\n        class=\"ph-bold ph-caret-{{expanded() ? 'up':'down'}} arrow-icon\" \r\n        [class.m-l-auto]=\"!errorMessage()?.length || (errorMessage()?.length && expanded())\">\r\n      </i>\r\n    </button>\r\n    @if (expanded()) {\r\n      <div \r\n        class=\"options-list-wrap\"\r\n        [class.white-bg]=\"useWhiteBackground\"\r\n        [class.has-error]=\"errorMessage()?.length\">\r\n        <ul \r\n          #listboxRef \r\n          id=\"listbox\" \r\n          class=\"options-list\"\r\n          role=\"listbox\" \r\n          tabindex=\"0\"\r\n          [attr.aria-multiselectable]=\"multiple\">\r\n          @if (multiple && showSelectAll) {\r\n            <li \r\n              [id]=\"id + '-list-option-all'\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isAllSelected()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"activeIndex === 0\"\r\n              [class.selected]=\"isAllSelected()\" \r\n              [class.disabled]=\"isMaxSelectionsReached() && !isAllSelected()\"\r\n              (click)=\"onOptionClick('ALL')\">\r\n              @if (isAllSelected()) {\r\n                <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n              } @else if (hasSelectedItems()) {\r\n                <ng-container *ngTemplateOutlet=\"selectAllIndeterminateSvg\"></ng-container>\r\n              } @else {\r\n                <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis\">\r\n                {{'armature.select.all' | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n          @for (option of readOptions(); let i = $index; track i) {\r\n            <li \r\n              [id]=\"`${id}-list-option-${i}`\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isSelected(option.value)()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"i + ((multiple && showSelectAll) ? 1 : 0) === activeIndex\"\r\n              [class.selected]=\"isSelected(option.value)()\"\r\n              [class.disabled]=\"isOptionDisabled(option)()\"\r\n              (click)=\"onOptionClick(option)\">\r\n              @if (multiple) {\r\n                @if (isSelected(option.value)()) {\r\n                  @if (option.isDisabled) {\r\n                    <ng-container *ngTemplateOutlet=\"checkedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n                  }\r\n                } @else {\r\n                  @if (isOptionDisabled(option)()) {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n                  }\r\n                }\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis text-overflow-ellipsis\">\r\n                {{option.label | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (errorMessage()?.length) {\r\n    <span class=\"error-message color-error body3 fw-500\">\r\n      {{errorMessage() | translate}}\r\n    </span>\r\n  } @else {\r\n    @if (helpText?.length) {\r\n      <span \r\n        class=\"help-message body3 fw-400 text-medium-emphasis\"\r\n        [class.text-low-emphasis]=\"isDisabled\">\r\n        {{helpText | translate}}\r\n      </span>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #checkedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_1718)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"var(--primary-color-500-parts, #146EF6)\" stroke=\"var(--primary-color-500-parts, #146EF6)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12.75L10.5 15L15.75 9.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_1718\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #checkedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_5591)\">\r\n      <path d=\"M19.6055 3C20.5594 3 21.333 3.77359 21.333 4.72754V19.2725C21.333 20.2264 20.5594 21 19.6055 21H5.06055C4.1066 21 3.33301 20.2264 3.33301 19.2725V4.72754C3.33301 3.77359 4.1066 3 5.06055 3H19.6055Z\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.58301 12.75L10.833 15L16.083 9.75\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_5591\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.333008)\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_3289)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"var(--neutral-color-500-parts, #515151)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_3289\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3763)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"#515151\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3763\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #selectAllIndeterminateSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3054)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"#146EF6\" stroke=\"#146EF6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12H15.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3054\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #edf4ff;--primary-color-100-parts: #b9d4fc;--primary-color-200-parts: #8ab7fb;--primary-color-300-parts: #5b9af9;--primary-color-400-parts: #3784f7;--primary-color-500-parts: #146ef6;--primary-color-600-parts: #1266f5;--primary-color-700-parts: #0e5bf3;--primary-color-800-parts: #0b51f2;--primary-color-900-parts: #063fef;--primary-color-A50-parts: rgba(20, 110, 246, .04);--primary-color-A100-parts: rgba(20, 110, 246, .08);--primary-color-A200-parts: rgba(20, 110, 246, .16);--primary-color-A300-parts: rgba(20, 110, 246, .24);--primary-color-A400-parts: rgba(20, 110, 246, .32);--primary-color-A500-parts: rgba(20, 110, 246, .4);--primary-color-A600-parts: rgba(20, 110, 246, .48);--primary-color-A700-parts: rgba(20, 110, 246, .56);--primary-color-A800-parts: rgba(20, 110, 246, .64);--primary-color-A900-parts: rgba(20, 110, 246, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 237, 244, 255;--primary-color-100-parts-rgb: 185, 212, 252;--primary-color-200-parts-rgb: 138, 183, 251;--primary-color-300-parts-rgb: 91, 154, 249;--primary-color-400-parts-rgb: 55, 132, 247;--primary-color-500-parts-rgb: 20, 110, 246;--primary-color-600-parts-rgb: 18, 102, 245;--primary-color-700-parts-rgb: 14, 91, 243;--primary-color-800-parts-rgb: 11, 81, 242;--primary-color-900-parts-rgb: 6, 63, 239;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #edf4ff;--info-color-100-parts: #b9d4fc;--info-color-200-parts: #8ab7fb;--info-color-300-parts: #5b9af9;--info-color-400-parts: #3784f7;--info-color-500-parts: #146ef6;--info-color-600-parts: #1266f5;--info-color-700-parts: #0e5bf3;--info-color-800-parts: #0b51f2;--info-color-900-parts: #063fef;--info-color-A50-parts: rgba(20, 110, 246, .04);--info-color-A100-parts: rgba(20, 110, 246, .08);--info-color-A200-parts: rgba(20, 110, 246, .16);--info-color-A300-parts: rgba(20, 110, 246, .24);--info-color-A400-parts: rgba(20, 110, 246, .32);--info-color-A500-parts: rgba(20, 110, 246, .4);--info-color-A600-parts: rgba(20, 110, 246, .48);--info-color-A700-parts: rgba(20, 110, 246, .56);--info-color-A800-parts: rgba(20, 110, 246, .64);--info-color-A900-parts: rgba(20, 110, 246, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(0, 0, 0, .87);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 237, 244, 255;--info-color-100-parts-rgb: 185, 212, 252;--info-color-200-parts-rgb: 138, 183, 251;--info-color-300-parts-rgb: 91, 154, 249;--info-color-400-parts-rgb: 55, 132, 247;--info-color-500-parts-rgb: 20, 110, 246;--info-color-600-parts-rgb: 18, 102, 245;--info-color-700-parts-rgb: 14, 91, 243;--info-color-800-parts-rgb: 11, 81, 242;--info-color-900-parts-rgb: 6, 63, 239;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes floatingLabel{0%{transform:translate(16px,32px);opacity:0}to{transform:translate(0);opacity:1}}:host{display:inline-block;width:300px;min-width:300px}:host *{box-sizing:border-box}.sof-select-field{display:flex;flex-direction:column;position:relative}.sof-select-field label{position:absolute;top:-22px;display:inline-block;line-height:16px;z-index:1;font-size:12px;padding-left:2px;font-weight:500!important;color:#0009;transform:none;opacity:1;animation:floatingLabel .2s ease-in}.sof-select-field label.has-error{color:var(--error-color-500-parts)}.sof-select-field .relative-container{position:relative}.sof-select-field .relative-container .trigger{min-height:40px;height:40px;max-height:40px;display:flex;align-items:center;gap:8px;width:100%;border-radius:8px;background:#fafafa;border:2px solid transparent;cursor:pointer}.sof-select-field .relative-container .trigger.white-bg{background:#fff}.sof-select-field .relative-container .trigger.expanded{box-shadow:0 10px 10px #0000001a}.sof-select-field .relative-container .trigger:focus{outline:3px solid var(--primary-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger.has-error{border-color:var(--error-color-500-parts)}.sof-select-field .relative-container .trigger.has-error:focus{outline:3px solid var(--error-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger:disabled{cursor:default}.sof-select-field .relative-container .trigger:disabled span.body1,.sof-select-field .relative-container .trigger:disabled .arrow-icon{color:#00000061}.sof-select-field .relative-container .trigger span.body1{line-height:24px}.sof-select-field .relative-container .trigger .arrow-icon,.sof-select-field .relative-container .trigger .error-icon{pointer-events:none;font-size:20px}.sof-select-field .relative-container .trigger .error-icon{animation:fadeIn .2s ease-in}.sof-select-field .relative-container .trigger .arrow-icon{color:#333}.sof-select-field .relative-container .trigger .multi-chip-container{display:flex;gap:8px;width:100%;overflow:hidden}.sof-select-field .relative-container .options-list-wrap{position:absolute;z-index:10;top:32px;width:100%;padding-top:6px;border-radius:0 0 8px 8px;background:#fafafa}.sof-select-field .relative-container .options-list-wrap.white-bg{background:#fff}.sof-select-field .relative-container .options-list-wrap.has-error{border:2px solid var(--error-color-500-parts);border-top:none}.sof-select-field .relative-container .options-list-wrap:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list{max-height:200px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;list-style:none;border-radius:0 0 8px 8px;box-shadow:0 10px 10px #0000001a;scrollbar-color:#E9E9E9 transparent}.sof-select-field .relative-container .options-list-wrap .options-list:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list li{cursor:pointer;border-left:4px solid transparent;display:flex;align-items:center;gap:8px}.sof-select-field .relative-container .options-list-wrap .options-list li:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.active{background-color:var(--neutral-color-A50-parts);border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.selected{font-weight:500;border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled{pointer-events:none;cursor:not-allowed;color:#00000061;opacity:.6}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled .option-label{color:#00000061}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled svg{opacity:.5}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.disabled.active{background-color:transparent;border-color:transparent}.sof-select-field .relative-container .options-list-wrap .options-list li svg{pointer-events:none;min-height:24px;min-width:24px;height:24px;width:24px;max-height:24px;max-width:24px}.sof-select-field .relative-container .options-list-wrap .options-list li .option-label{line-height:24px}.sof-select-field .help-message,.sof-select-field .error-message{display:inline-block;line-height:8px;margin-top:8px;padding-left:2px;animation:fadeIn .2s ease-in}.visible-chip{animation:fadeIn .2s ease-in}:host ::ng-deep .sof-chip span{cursor:pointer!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SofChipComponent, selector: "sof-chip", inputs: ["label", "canRemove", "theme", "iconClass", "removeButtonId"], outputs: ["removeEvent"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofSelectComponent, decorators: [{
             type: Component,
@@ -8089,7 +8278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         SofChipComponent
                     ], host: {
                         '[class.full-width]': 'this.width === "full"'
-                    }, template: "<div \r\n  class=\"sof-select-field\"\r\n  [class.full-width]=\"width === 'full'\">\r\n  @if ((selected()?.length || 0) > 0) {\r\n    <label \r\n      [for]=\"id + '-select-trigger'\"\r\n      [class.text-low-emphasis]=\"isDisabled\"\r\n      [class.has-error]=\"errorMessage()?.length\">\r\n      {{label | translate}}{{isRequired() ? '*':''}}\r\n    </label>\r\n  }\r\n  <div class=\"relative-container\">\r\n    <button \r\n      [id]=\"id + '-select-trigger'\" \r\n      [name]=\"controlName\"\r\n      class=\"trigger p-v-8 p-h-16\" \r\n      [class.has-error]=\"errorMessage()?.length\"\r\n      [class.expanded]=\"expanded()\"\r\n      [class.white-bg]=\"useWhiteBackground\"\r\n      [disabled]=\"isDisabled\"\r\n      type=\"button\" \r\n      role=\"combobox\" \r\n      [attr.aria-expanded]=\"expanded()\" \r\n      [attr.aria-controls]=\"'listbox'\"\r\n      aria-haspopup=\"listbox\" \r\n      (click)=\"togglePanel()\">\r\n      @if (multiple) {\r\n        <div #multiChipContainer class=\"multi-chip-container\">\r\n          @if (selected()?.length) {\r\n            @if (isAllSelected()) {\r\n              <sof-chip \r\n                class=\"visible-chip\"\r\n                theme=\"primary\"\r\n                [label]=\"'armature.select.all'\"\r\n                [removeButtonId]=\"`${id}-select-chip-remove-all`\"\r\n                (removeEvent)=\"removeChip($event)\"\r\n              />\r\n            } @else {\r\n              @for (label of visibleChips(); let i = $index; track i) {\r\n                <sof-chip \r\n                  class=\"visible-chip\"\r\n                  theme=\"primary\"\r\n                  [label]=\"label\"\r\n                  [removeButtonId]=\"`${id}-select-chip-remove-${i}`\"\r\n                  (removeEvent)=\"removeChip($event)\"\r\n                />\r\n              }\r\n              @if (hiddenChipsCount()) {\r\n                <sof-chip \r\n                  theme=\"primary\"\r\n                  [label]=\"`+${hiddenChipsCount()}`\"\r\n                  [canRemove]=\"false\"\r\n                  m-l-auto\r\n                />\r\n              }\r\n            }\r\n          } @else {\r\n            <span class=\"body1 text-high-emphasis\">\r\n              {{selectedLabelsMultiple()[0] | translate}}{{(!selected()?.length && isRequired()) ? '*':''}}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <span class=\"body1 text-high-emphasis\">\r\n          {{selectedLabelSingle() | translate}}{{(!selected()?.length && isRequired()) ? '*':''}}\r\n        </span>\r\n      }\r\n      @if (errorMessage()?.length && !expanded()) {\r\n        <i class=\"ph-bold ph-warning-circle error-icon color-error m-l-auto\"></i>\r\n      }\r\n      <i \r\n        class=\"ph-bold ph-caret-{{expanded() ? 'up':'down'}} arrow-icon\" \r\n        [class.m-l-auto]=\"!errorMessage()?.length || (errorMessage()?.length && expanded())\">\r\n      </i>\r\n    </button>\r\n    @if (expanded()) {\r\n      <div \r\n        class=\"options-list-wrap\"\r\n        [class.white-bg]=\"useWhiteBackground\"\r\n        [class.has-error]=\"errorMessage()?.length\">\r\n        <ul \r\n          #listboxRef \r\n          id=\"listbox\" \r\n          class=\"options-list\"\r\n          role=\"listbox\" \r\n          tabindex=\"0\"\r\n          [attr.aria-multiselectable]=\"multiple\">\r\n          @if (multiple && showSelectAll) {\r\n            <li \r\n              [id]=\"id + '-list-option-all'\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isAllSelected()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"activeIndex === 0\"\r\n              [class.selected]=\"isAllSelected()\" \r\n              (click)=\"onOptionClick('ALL')\">\r\n              @if (isAllSelected()) {\r\n                <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n              } @else if (selected().length) {\r\n                <ng-container *ngTemplateOutlet=\"selectAllIndeterminateSvg\"></ng-container>\r\n              } @else {\r\n                <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis\">\r\n                {{'armature.select.all' | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n          @for (option of readOptions(); let i = $index; track i) {\r\n            <li \r\n              [id]=\"`${id}-list-option-${i}`\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isSelected(option.value)()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"i + ((multiple && showSelectAll) ? 1 : 0) === activeIndex\"\r\n              [class.selected]=\"isSelected(option.value)()\"\r\n              [class.disabled]=\"option.isDisabled\"\r\n              (click)=\"onOptionClick(option)\">\r\n              @if (multiple) {\r\n                @if (isSelected(option.value)()) {\r\n                  @if (option.isDisabled) {\r\n                    <ng-container *ngTemplateOutlet=\"checkedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n                  }\r\n                } @else {\r\n                  @if (option.isDisabled) {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n                  }\r\n                }\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis text-overflow-ellipsis\">\r\n                {{option.label | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (errorMessage()?.length) {\r\n    <span class=\"error-message color-error body3 fw-500\">\r\n      {{errorMessage() | translate}}\r\n    </span>\r\n  } @else {\r\n    @if (helpText?.length) {\r\n      <span \r\n        class=\"help-message body3 fw-400 text-medium-emphasis\"\r\n        [class.text-low-emphasis]=\"isDisabled\">\r\n        {{helpText | translate}}\r\n      </span>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #checkedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_1718)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"var(--primary-color-500-parts, #146EF6)\" stroke=\"var(--primary-color-500-parts, #146EF6)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12.75L10.5 15L15.75 9.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_1718\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #checkedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_5591)\">\r\n      <path d=\"M19.6055 3C20.5594 3 21.333 3.77359 21.333 4.72754V19.2725C21.333 20.2264 20.5594 21 19.6055 21H5.06055C4.1066 21 3.33301 20.2264 3.33301 19.2725V4.72754C3.33301 3.77359 4.1066 3 5.06055 3H19.6055Z\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.58301 12.75L10.833 15L16.083 9.75\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_5591\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.333008)\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_3289)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"var(--neutral-color-500-parts, #515151)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_3289\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3763)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"#515151\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3763\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #selectAllIndeterminateSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3054)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"#146EF6\" stroke=\"#146EF6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12H15.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3054\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #edf4ff;--primary-color-100-parts: #b9d4fc;--primary-color-200-parts: #8ab7fb;--primary-color-300-parts: #5b9af9;--primary-color-400-parts: #3784f7;--primary-color-500-parts: #146ef6;--primary-color-600-parts: #1266f5;--primary-color-700-parts: #0e5bf3;--primary-color-800-parts: #0b51f2;--primary-color-900-parts: #063fef;--primary-color-A50-parts: rgba(20, 110, 246, .04);--primary-color-A100-parts: rgba(20, 110, 246, .08);--primary-color-A200-parts: rgba(20, 110, 246, .16);--primary-color-A300-parts: rgba(20, 110, 246, .24);--primary-color-A400-parts: rgba(20, 110, 246, .32);--primary-color-A500-parts: rgba(20, 110, 246, .4);--primary-color-A600-parts: rgba(20, 110, 246, .48);--primary-color-A700-parts: rgba(20, 110, 246, .56);--primary-color-A800-parts: rgba(20, 110, 246, .64);--primary-color-A900-parts: rgba(20, 110, 246, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 237, 244, 255;--primary-color-100-parts-rgb: 185, 212, 252;--primary-color-200-parts-rgb: 138, 183, 251;--primary-color-300-parts-rgb: 91, 154, 249;--primary-color-400-parts-rgb: 55, 132, 247;--primary-color-500-parts-rgb: 20, 110, 246;--primary-color-600-parts-rgb: 18, 102, 245;--primary-color-700-parts-rgb: 14, 91, 243;--primary-color-800-parts-rgb: 11, 81, 242;--primary-color-900-parts-rgb: 6, 63, 239;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #edf4ff;--info-color-100-parts: #b9d4fc;--info-color-200-parts: #8ab7fb;--info-color-300-parts: #5b9af9;--info-color-400-parts: #3784f7;--info-color-500-parts: #146ef6;--info-color-600-parts: #1266f5;--info-color-700-parts: #0e5bf3;--info-color-800-parts: #0b51f2;--info-color-900-parts: #063fef;--info-color-A50-parts: rgba(20, 110, 246, .04);--info-color-A100-parts: rgba(20, 110, 246, .08);--info-color-A200-parts: rgba(20, 110, 246, .16);--info-color-A300-parts: rgba(20, 110, 246, .24);--info-color-A400-parts: rgba(20, 110, 246, .32);--info-color-A500-parts: rgba(20, 110, 246, .4);--info-color-A600-parts: rgba(20, 110, 246, .48);--info-color-A700-parts: rgba(20, 110, 246, .56);--info-color-A800-parts: rgba(20, 110, 246, .64);--info-color-A900-parts: rgba(20, 110, 246, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(0, 0, 0, .87);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 237, 244, 255;--info-color-100-parts-rgb: 185, 212, 252;--info-color-200-parts-rgb: 138, 183, 251;--info-color-300-parts-rgb: 91, 154, 249;--info-color-400-parts-rgb: 55, 132, 247;--info-color-500-parts-rgb: 20, 110, 246;--info-color-600-parts-rgb: 18, 102, 245;--info-color-700-parts-rgb: 14, 91, 243;--info-color-800-parts-rgb: 11, 81, 242;--info-color-900-parts-rgb: 6, 63, 239;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes floatingLabel{0%{transform:translate(16px,32px);opacity:0}to{transform:translate(0);opacity:1}}:host{display:inline-block;width:300px;min-width:300px}:host *{box-sizing:border-box}.sof-select-field{display:flex;flex-direction:column;position:relative}.sof-select-field label{position:absolute;top:-22px;display:inline-block;line-height:16px;z-index:1;font-size:12px;padding-left:2px;font-weight:500!important;color:#0009;transform:none;opacity:1;animation:floatingLabel .2s ease-in}.sof-select-field label.has-error{color:var(--error-color-500-parts)}.sof-select-field .relative-container{position:relative}.sof-select-field .relative-container .trigger{min-height:40px;height:40px;max-height:40px;display:flex;align-items:center;gap:8px;width:100%;border-radius:8px;background:#fafafa;border:2px solid transparent;cursor:pointer}.sof-select-field .relative-container .trigger.white-bg{background:#fff}.sof-select-field .relative-container .trigger.expanded{box-shadow:0 10px 10px #0000001a}.sof-select-field .relative-container .trigger:focus{outline:3px solid var(--primary-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger.has-error{border-color:var(--error-color-500-parts)}.sof-select-field .relative-container .trigger.has-error:focus{outline:3px solid var(--error-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger:disabled{cursor:default}.sof-select-field .relative-container .trigger:disabled span.body1,.sof-select-field .relative-container .trigger:disabled .arrow-icon{color:#00000061}.sof-select-field .relative-container .trigger span.body1{line-height:24px}.sof-select-field .relative-container .trigger .arrow-icon,.sof-select-field .relative-container .trigger .error-icon{pointer-events:none;font-size:20px}.sof-select-field .relative-container .trigger .error-icon{animation:fadeIn .2s ease-in}.sof-select-field .relative-container .trigger .arrow-icon{color:#333}.sof-select-field .relative-container .trigger .multi-chip-container{display:flex;gap:8px;width:100%;overflow:hidden}.sof-select-field .relative-container .options-list-wrap{position:absolute;z-index:10;top:32px;width:100%;padding-top:6px;border-radius:0 0 8px 8px;background:#fafafa}.sof-select-field .relative-container .options-list-wrap.white-bg{background:#fff}.sof-select-field .relative-container .options-list-wrap.has-error{border:2px solid var(--error-color-500-parts);border-top:none}.sof-select-field .relative-container .options-list-wrap:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list{max-height:200px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;list-style:none;border-radius:0 0 8px 8px;box-shadow:0 10px 10px #0000001a;scrollbar-color:#E9E9E9 transparent}.sof-select-field .relative-container .options-list-wrap .options-list:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list li{cursor:pointer;border-left:4px solid transparent;display:flex;align-items:center;gap:8px}.sof-select-field .relative-container .options-list-wrap .options-list li:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.active{background-color:var(--neutral-color-A50-parts);border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.selected{font-weight:500;border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled{pointer-events:none;color:#00000061}.sof-select-field .relative-container .options-list-wrap .options-list li svg{pointer-events:none;min-height:24px;min-width:24px;height:24px;width:24px;max-height:24px;max-width:24px}.sof-select-field .relative-container .options-list-wrap .options-list li .option-label{line-height:24px}.sof-select-field .help-message,.sof-select-field .error-message{display:inline-block;line-height:8px;margin-top:8px;padding-left:2px;animation:fadeIn .2s ease-in}.visible-chip{animation:fadeIn .2s ease-in}:host ::ng-deep .sof-chip span{cursor:pointer!important}\n"] }]
+                    }, template: "<div \r\n  class=\"sof-select-field\"\r\n  [class.full-width]=\"width === 'full'\">\r\n  @if (hasSelectedItems()) {\r\n    <label \r\n      [for]=\"id + '-select-trigger'\"\r\n      [class.text-low-emphasis]=\"isDisabled\"\r\n      [class.has-error]=\"errorMessage()?.length\">\r\n      {{label | translate}}\r\n    </label>\r\n  }\r\n  <div class=\"relative-container\">\r\n    <button \r\n      [id]=\"id + '-select-trigger'\" \r\n      [name]=\"controlName\"\r\n      class=\"trigger p-v-8 p-h-16\" \r\n      [class.has-error]=\"errorMessage()?.length\"\r\n      [class.expanded]=\"expanded()\"\r\n      [class.white-bg]=\"useWhiteBackground\"\r\n      [disabled]=\"isDisabled\"\r\n      type=\"button\" \r\n      role=\"combobox\" \r\n      [attr.aria-expanded]=\"expanded()\" \r\n      [attr.aria-controls]=\"'listbox'\"\r\n      aria-haspopup=\"listbox\" \r\n      (click)=\"togglePanel()\">\r\n      @if (multiple) {\r\n        <div #multiChipContainer class=\"multi-chip-container\">\r\n          @if (hasSelectedItems()) {\r\n            @if (isAllSelected()) {\r\n              <sof-chip \r\n                class=\"visible-chip\"\r\n                theme=\"primary\"\r\n                [label]=\"'armature.select.all'\"\r\n                [removeButtonId]=\"`${id}-select-chip-remove-all`\"\r\n                (removeEvent)=\"removeChip($event)\"\r\n              />\r\n            } @else {\r\n              @for (label of visibleChips(); let i = $index; track i) {\r\n                <sof-chip \r\n                  class=\"visible-chip\"\r\n                  theme=\"primary\"\r\n                  [label]=\"label\"\r\n                  [removeButtonId]=\"`${id}-select-chip-remove-${i}`\"\r\n                  (removeEvent)=\"removeChip($event)\"\r\n                />\r\n              }\r\n              @if (hiddenChipsCount()) {\r\n                <sof-chip \r\n                  theme=\"primary\"\r\n                  [label]=\"`+${hiddenChipsCount()}`\"\r\n                  [canRemove]=\"false\"\r\n                  m-l-auto\r\n                />\r\n              }\r\n            }\r\n          } @else {\r\n            <span class=\"body1 text-high-emphasis\">\r\n              {{selectedLabelsMultiple()[0] | translate}}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <span class=\"body1 text-high-emphasis\">\r\n          {{selectedLabelSingle() | translate}}\r\n        </span>\r\n      }\r\n      @if (errorMessage()?.length && !expanded()) {\r\n        <i class=\"ph-bold ph-warning-circle error-icon color-error m-l-auto\"></i>\r\n      }\r\n      <i \r\n        class=\"ph-bold ph-caret-{{expanded() ? 'up':'down'}} arrow-icon\" \r\n        [class.m-l-auto]=\"!errorMessage()?.length || (errorMessage()?.length && expanded())\">\r\n      </i>\r\n    </button>\r\n    @if (expanded()) {\r\n      <div \r\n        class=\"options-list-wrap\"\r\n        [class.white-bg]=\"useWhiteBackground\"\r\n        [class.has-error]=\"errorMessage()?.length\">\r\n        <ul \r\n          #listboxRef \r\n          id=\"listbox\" \r\n          class=\"options-list\"\r\n          role=\"listbox\" \r\n          tabindex=\"0\"\r\n          [attr.aria-multiselectable]=\"multiple\">\r\n          @if (multiple && showSelectAll) {\r\n            <li \r\n              [id]=\"id + '-list-option-all'\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isAllSelected()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"activeIndex === 0\"\r\n              [class.selected]=\"isAllSelected()\" \r\n              [class.disabled]=\"isMaxSelectionsReached() && !isAllSelected()\"\r\n              (click)=\"onOptionClick('ALL')\">\r\n              @if (isAllSelected()) {\r\n                <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n              } @else if (hasSelectedItems()) {\r\n                <ng-container *ngTemplateOutlet=\"selectAllIndeterminateSvg\"></ng-container>\r\n              } @else {\r\n                <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis\">\r\n                {{'armature.select.all' | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n          @for (option of readOptions(); let i = $index; track i) {\r\n            <li \r\n              [id]=\"`${id}-list-option-${i}`\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isSelected(option.value)()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"i + ((multiple && showSelectAll) ? 1 : 0) === activeIndex\"\r\n              [class.selected]=\"isSelected(option.value)()\"\r\n              [class.disabled]=\"isOptionDisabled(option)()\"\r\n              (click)=\"onOptionClick(option)\">\r\n              @if (multiple) {\r\n                @if (isSelected(option.value)()) {\r\n                  @if (option.isDisabled) {\r\n                    <ng-container *ngTemplateOutlet=\"checkedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n                  }\r\n                } @else {\r\n                  @if (isOptionDisabled(option)()) {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n                  }\r\n                }\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis text-overflow-ellipsis\">\r\n                {{option.label | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (errorMessage()?.length) {\r\n    <span class=\"error-message color-error body3 fw-500\">\r\n      {{errorMessage() | translate}}\r\n    </span>\r\n  } @else {\r\n    @if (helpText?.length) {\r\n      <span \r\n        class=\"help-message body3 fw-400 text-medium-emphasis\"\r\n        [class.text-low-emphasis]=\"isDisabled\">\r\n        {{helpText | translate}}\r\n      </span>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #checkedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_1718)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"var(--primary-color-500-parts, #146EF6)\" stroke=\"var(--primary-color-500-parts, #146EF6)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12.75L10.5 15L15.75 9.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_1718\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #checkedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_5591)\">\r\n      <path d=\"M19.6055 3C20.5594 3 21.333 3.77359 21.333 4.72754V19.2725C21.333 20.2264 20.5594 21 19.6055 21H5.06055C4.1066 21 3.33301 20.2264 3.33301 19.2725V4.72754C3.33301 3.77359 4.1066 3 5.06055 3H19.6055Z\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.58301 12.75L10.833 15L16.083 9.75\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_5591\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.333008)\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_3289)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"var(--neutral-color-500-parts, #515151)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_3289\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3763)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"#515151\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3763\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #selectAllIndeterminateSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3054)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"#146EF6\" stroke=\"#146EF6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12H15.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3054\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #edf4ff;--primary-color-100-parts: #b9d4fc;--primary-color-200-parts: #8ab7fb;--primary-color-300-parts: #5b9af9;--primary-color-400-parts: #3784f7;--primary-color-500-parts: #146ef6;--primary-color-600-parts: #1266f5;--primary-color-700-parts: #0e5bf3;--primary-color-800-parts: #0b51f2;--primary-color-900-parts: #063fef;--primary-color-A50-parts: rgba(20, 110, 246, .04);--primary-color-A100-parts: rgba(20, 110, 246, .08);--primary-color-A200-parts: rgba(20, 110, 246, .16);--primary-color-A300-parts: rgba(20, 110, 246, .24);--primary-color-A400-parts: rgba(20, 110, 246, .32);--primary-color-A500-parts: rgba(20, 110, 246, .4);--primary-color-A600-parts: rgba(20, 110, 246, .48);--primary-color-A700-parts: rgba(20, 110, 246, .56);--primary-color-A800-parts: rgba(20, 110, 246, .64);--primary-color-A900-parts: rgba(20, 110, 246, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 237, 244, 255;--primary-color-100-parts-rgb: 185, 212, 252;--primary-color-200-parts-rgb: 138, 183, 251;--primary-color-300-parts-rgb: 91, 154, 249;--primary-color-400-parts-rgb: 55, 132, 247;--primary-color-500-parts-rgb: 20, 110, 246;--primary-color-600-parts-rgb: 18, 102, 245;--primary-color-700-parts-rgb: 14, 91, 243;--primary-color-800-parts-rgb: 11, 81, 242;--primary-color-900-parts-rgb: 6, 63, 239;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #edf4ff;--info-color-100-parts: #b9d4fc;--info-color-200-parts: #8ab7fb;--info-color-300-parts: #5b9af9;--info-color-400-parts: #3784f7;--info-color-500-parts: #146ef6;--info-color-600-parts: #1266f5;--info-color-700-parts: #0e5bf3;--info-color-800-parts: #0b51f2;--info-color-900-parts: #063fef;--info-color-A50-parts: rgba(20, 110, 246, .04);--info-color-A100-parts: rgba(20, 110, 246, .08);--info-color-A200-parts: rgba(20, 110, 246, .16);--info-color-A300-parts: rgba(20, 110, 246, .24);--info-color-A400-parts: rgba(20, 110, 246, .32);--info-color-A500-parts: rgba(20, 110, 246, .4);--info-color-A600-parts: rgba(20, 110, 246, .48);--info-color-A700-parts: rgba(20, 110, 246, .56);--info-color-A800-parts: rgba(20, 110, 246, .64);--info-color-A900-parts: rgba(20, 110, 246, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(0, 0, 0, .87);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 237, 244, 255;--info-color-100-parts-rgb: 185, 212, 252;--info-color-200-parts-rgb: 138, 183, 251;--info-color-300-parts-rgb: 91, 154, 249;--info-color-400-parts-rgb: 55, 132, 247;--info-color-500-parts-rgb: 20, 110, 246;--info-color-600-parts-rgb: 18, 102, 245;--info-color-700-parts-rgb: 14, 91, 243;--info-color-800-parts-rgb: 11, 81, 242;--info-color-900-parts-rgb: 6, 63, 239;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes floatingLabel{0%{transform:translate(16px,32px);opacity:0}to{transform:translate(0);opacity:1}}:host{display:inline-block;width:300px;min-width:300px}:host *{box-sizing:border-box}.sof-select-field{display:flex;flex-direction:column;position:relative}.sof-select-field label{position:absolute;top:-22px;display:inline-block;line-height:16px;z-index:1;font-size:12px;padding-left:2px;font-weight:500!important;color:#0009;transform:none;opacity:1;animation:floatingLabel .2s ease-in}.sof-select-field label.has-error{color:var(--error-color-500-parts)}.sof-select-field .relative-container{position:relative}.sof-select-field .relative-container .trigger{min-height:40px;height:40px;max-height:40px;display:flex;align-items:center;gap:8px;width:100%;border-radius:8px;background:#fafafa;border:2px solid transparent;cursor:pointer}.sof-select-field .relative-container .trigger.white-bg{background:#fff}.sof-select-field .relative-container .trigger.expanded{box-shadow:0 10px 10px #0000001a}.sof-select-field .relative-container .trigger:focus{outline:3px solid var(--primary-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger.has-error{border-color:var(--error-color-500-parts)}.sof-select-field .relative-container .trigger.has-error:focus{outline:3px solid var(--error-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger:disabled{cursor:default}.sof-select-field .relative-container .trigger:disabled span.body1,.sof-select-field .relative-container .trigger:disabled .arrow-icon{color:#00000061}.sof-select-field .relative-container .trigger span.body1{line-height:24px}.sof-select-field .relative-container .trigger .arrow-icon,.sof-select-field .relative-container .trigger .error-icon{pointer-events:none;font-size:20px}.sof-select-field .relative-container .trigger .error-icon{animation:fadeIn .2s ease-in}.sof-select-field .relative-container .trigger .arrow-icon{color:#333}.sof-select-field .relative-container .trigger .multi-chip-container{display:flex;gap:8px;width:100%;overflow:hidden}.sof-select-field .relative-container .options-list-wrap{position:absolute;z-index:10;top:32px;width:100%;padding-top:6px;border-radius:0 0 8px 8px;background:#fafafa}.sof-select-field .relative-container .options-list-wrap.white-bg{background:#fff}.sof-select-field .relative-container .options-list-wrap.has-error{border:2px solid var(--error-color-500-parts);border-top:none}.sof-select-field .relative-container .options-list-wrap:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list{max-height:200px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;list-style:none;border-radius:0 0 8px 8px;box-shadow:0 10px 10px #0000001a;scrollbar-color:#E9E9E9 transparent}.sof-select-field .relative-container .options-list-wrap .options-list:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list li{cursor:pointer;border-left:4px solid transparent;display:flex;align-items:center;gap:8px}.sof-select-field .relative-container .options-list-wrap .options-list li:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.active{background-color:var(--neutral-color-A50-parts);border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.selected{font-weight:500;border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled{pointer-events:none;cursor:not-allowed;color:#00000061;opacity:.6}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled .option-label{color:#00000061}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled svg{opacity:.5}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.disabled.active{background-color:transparent;border-color:transparent}.sof-select-field .relative-container .options-list-wrap .options-list li svg{pointer-events:none;min-height:24px;min-width:24px;height:24px;width:24px;max-height:24px;max-width:24px}.sof-select-field .relative-container .options-list-wrap .options-list li .option-label{line-height:24px}.sof-select-field .help-message,.sof-select-field .error-message{display:inline-block;line-height:8px;margin-top:8px;padding-left:2px;animation:fadeIn .2s ease-in}.visible-chip{animation:fadeIn .2s ease-in}:host ::ng-deep .sof-chip span{cursor:pointer!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$7.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -8111,6 +8300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Input
             }], showSelectAll: [{
                 type: Input
+            }], maxSelections: [{
+                type: Input
             }], isDisabled: [{
                 type: Input
             }], width: [{
@@ -9989,6 +10180,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: ['window:resize']
             }] } });
+/** sof-skeleton-loader component */
+class SofSkeletonLoaderComponent {
+    constructor() {
+        /** Number of skeleton items to render. Default: 1 */
+        this.count = input(1, ...(ngDevMode ? [{ debugName: "count" }] : []));
+        /** Shape of skeleton items: 'line' for text placeholders, 'circle' for avatars. Default: 'line' */
+        this.shape = input('line', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+        /** Animation type: 'shimmer' for gradient effect, 'pulse' for opacity fade, or false for no animation. Default: 'shimmer' */
+        this.animation = input('shimmer', ...(ngDevMode ? [{ debugName: "animation" }] : []));
+        /** Width for line shape. Accepts CSS units (px, %, etc). Default: '100%' */
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        /** Height for line shape. Should match the line-height of content being replaced. Default: '20px' */
+        this.height = input('20px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        /** Size for circle shape (applies to both width and height). Default: '40px' */
+        this.circleSize = input('40px', ...(ngDevMode ? [{ debugName: "circleSize" }] : []));
+        /** Border radius for line shape. Default: '8px' */
+        this.borderRadius = input('8px', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+        /** Gap between skeleton items. Accepts CSS units. Default: '8px' */
+        this.gap = input('8px', ...(ngDevMode ? [{ debugName: "gap" }] : []));
+        /** Accessible text for screen readers. Announces the loading state. Default: 'Loading' */
+        this.loadingText = input('Loading', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
+        /** ARIA label for the component. Used by screen readers to identify the loading region. Default: 'loading' */
+        this.ariaLabel = input('loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+        /** Computed array of item indices based on count input */
+        this.items = computed(() => Array.from({ length: this.count() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "items" }] : []));
+    }
+    getItemWidth() {
+        return this.shape() === 'circle' ? String(this.circleSize()) : String(this.width());
+    }
+    getItemHeight() {
+        return this.shape() === 'circle' ? String(this.circleSize()) : String(this.height());
+    }
+    getContainerStyle() {
+        return { 'gap': this.gap() };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SofSkeletonLoaderComponent, isStandalone: true, selector: "sof-skeleton-loader", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, circleSize: { classPropertyName: "circleSize", publicName: "circleSize", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "true", "attr.aria-label": "ariaLabel()", "attr.role": "\"status\"", "class.line": "shape() === \"line\"" } }, ngImport: i0, template: "<div class=\"skeleton-container\" [ngStyle]=\"getContainerStyle()\">\r\n  @for (item of items(); track item) {\r\n    <div \r\n      class=\"skeleton-item\"\r\n      [class.line]=\"shape() === 'line'\"\r\n      [class.circle]=\"shape() === 'circle'\"\r\n      [class.shimmer]=\"animation() === 'shimmer'\"\r\n      [class.pulse]=\"animation() === 'pulse'\"\r\n      [style.width]=\"getItemWidth()\"\r\n      [style.height]=\"getItemHeight()\"\r\n      [style.border-radius]=\"shape() === 'line' ? borderRadius() : null\"\r\n    >\r\n      <span class=\"visually-hidden\">{{ loadingText() }}</span>\r\n    </div>\r\n  }\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block}:host.line{flex:1}.skeleton-container{display:flex;flex-direction:column}.skeleton-item{position:relative;overflow:hidden;background-color:#f5f5f5}.skeleton-item.circle{border-radius:50%!important;flex-shrink:0}.skeleton-item:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);will-change:transform;background:linear-gradient(270deg,#f5f5f5,#fff 40%,#f5f5f5)}.skeleton-item.shimmer:after{animation:skeleton-shimmer 1.5s ease-in-out infinite}.skeleton-item.pulse{will-change:background-color;animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-item.pulse:after{display:none}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes skeleton-pulse{0%,to{background-color:#f5f5f5}50%{background-color:#e9e9e9}}@media(prefers-reduced-motion:reduce){.skeleton-item:after{animation:none}.skeleton-item.pulse{animation:none}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofSkeletonLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sof-skeleton-loader', standalone: true, imports: [NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.aria-busy]': 'true',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.role]': '"status"',
+                        '[class.line]': 'shape() === "line"'
+                    }, template: "<div class=\"skeleton-container\" [ngStyle]=\"getContainerStyle()\">\r\n  @for (item of items(); track item) {\r\n    <div \r\n      class=\"skeleton-item\"\r\n      [class.line]=\"shape() === 'line'\"\r\n      [class.circle]=\"shape() === 'circle'\"\r\n      [class.shimmer]=\"animation() === 'shimmer'\"\r\n      [class.pulse]=\"animation() === 'pulse'\"\r\n      [style.width]=\"getItemWidth()\"\r\n      [style.height]=\"getItemHeight()\"\r\n      [style.border-radius]=\"shape() === 'line' ? borderRadius() : null\"\r\n    >\r\n      <span class=\"visually-hidden\">{{ loadingText() }}</span>\r\n    </div>\r\n  }\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block}:host.line{flex:1}.skeleton-container{display:flex;flex-direction:column}.skeleton-item{position:relative;overflow:hidden;background-color:#f5f5f5}.skeleton-item.circle{border-radius:50%!important;flex-shrink:0}.skeleton-item:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);will-change:transform;background:linear-gradient(270deg,#f5f5f5,#fff 40%,#f5f5f5)}.skeleton-item.shimmer:after{animation:skeleton-shimmer 1.5s ease-in-out infinite}.skeleton-item.pulse{will-change:background-color;animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-item.pulse:after{display:none}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes skeleton-pulse{0%,to{background-color:#f5f5f5}50%{background-color:#e9e9e9}}@media(prefers-reduced-motion:reduce){.skeleton-item:after{animation:none}.skeleton-item.pulse{animation:none}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], circleSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "circleSize", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 /** SSN Pipe */
 class SofSsnPipe {
     /**
@@ -11359,5 +11598,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { ALERT_BANNER_CONFIG, AbstractSamlEntryService, AbstractSamlService, AbstractStartupService, AccessTokenClaims, AlertBannerComponent, AlertBannerModule, AlertBannerService, AlertService, AlphaNumericDirective, AppTemplateComponent, ApplicationUserModel, ArRoleNavService, ArmError, ArmatureFooterComponent, ArmatureFooterModule, ArmatureHeaderComponent, ArmatureHeaderModule, ArmatureModule, ArmatureNavigationComponent, ArmatureResizePanelsModule, Attribute, AuthorizationService, B2bNavComponent, BannerService, BannerType, BaseComponentModule, BaseConfigService, CacheExpirationType, ComponentSavePrintComponent, ComponentSavePrintService, Configuration, ConfirmAddressData, CoverageDetail, CssOverride, CssOverrideDirective, CustomAuthConfigService, DISABLE_ACCESS_FOR_NO_PAGES_ROLE, DISTRIBUTED_CACHE_BASE_PATH, DataStoreConfig, DateInputFilterDirective, DecodedAccessToken, DefaultConfigService, DialogResult, DistributedCacheModule, ENTITY_SESSION_STORAGE_PREFIX, ENTITY_SS_CONFIG_PREFIX, EntityBaseComponent, EntityHelperService, EntityInjectWrapperComponent, FAQ, FAQConfig, FEDERATED_MODULE_ID, FaqComponent, FaqModule, FeedbackToolComponent, FeedbackToolModule, FooterConfig, FormsModule, HYBRID_SAML_OAUTH_CONFIG, HeaderAuthSettings, HybridSamlOAuthConfig, HybridSamlOauthService, InputTrimDirective, LINE_OF_COVERAGE, LettersCharactersDirective, LettersOnlyDirective, MarketSelectionConfig, MarketSelectionService, MfeModule, MobileHeaderMenuComponent, ModalData, NavigationModule, NumbersOnlyDirective, Oauth2RoleService, OauthModule, PhoneFormatPipe, PolicyPerson, RBAC_CONFIG, RbacActionDirective, RbacConfig, RbacModule, RedirectSamlComponent, RedirectSamlRequest, RedirectSessionConfigs, ResizePanelsComponent, RoleAccess, RoleNavService, RoutePath, RumConfig, RumModule, RumService, SESSION_CONFIG, SOF_BLANK_LANGUAGE_OVERRIDE, SOF_DATE_PIPE_FORMATS, STATUS, SamlModule, SamlService, SelectedMarketContext, ServerCacheService, SessionConfig, SessionService, SharedErrorService, SiteMapComponent, SiteMapDirection, SnackbarService, SofAddressComponent, SofAlertComponent, SofArComponentSavePrintModule, SofBadgeComponent, SofBannerComponent, SofBlankPipe, SofBottomSheetComponent, SofBreadcrumbsHierarchyComponent, SofBreadcrumbsHistoryComponent, SofButtonToggleGroupComponent, SofCalloutComponent, SofChipComponent, SofCompareAddressPipe, SofConfirmAddressComponent, SofConfirmAddressCountyChangeComponent, SofContextComponent, SofDatePipe, SofDropdownButtonComponent, SofErrorCommonComponent, SofHandleComponent, SofHeaderComponent, SofImageCheckboxComponent, SofInputStepperComponent, SofModalComponent, SofNavPanelComponent, SofPipeModule, SofProgressBarComponent, SofRadioCardComponent, SofSegmentedControlComponent, SofSelectComponent, SofSimpleAlertComponent, SofSnackbarComponent, SofSsnPipe, SofStarRatingComponent, SofSubNavigationComponent, SofTabsComponent, SofToastComponent, SofUtilityButtonComponent, SoftheonErrorHandlerService, SsoGatewayEntryService, SsoGatewayModel, States, TextOverflowEllipsisTooltipDirective, ThemeModule, ThemeService, ToastService, TypedSession, USER_ENTITY_SERVICE_CONFIG, UserEntityService, UserEntityServiceConfig, ValidationKeys, WINDOW, httpVerb, initializerFactory, keyPathPrefix, languageStorageKey, newGuid, pascalToCamel, preSignInRouteStorageKey, removeMenuRole, routeToPreLoginRoute, sessionBasePathFactory, userInitialsPipe };
+export { ALERT_BANNER_CONFIG, AbstractSamlEntryService, AbstractSamlService, AbstractStartupService, AccessTokenClaims, AlertBannerComponent, AlertBannerModule, AlertBannerService, AlertService, AlphaNumericDirective, AppTemplateComponent, ApplicationUserModel, ArRoleNavService, ArmError, ArmatureFooterComponent, ArmatureFooterModule, ArmatureHeaderComponent, ArmatureHeaderModule, ArmatureModule, ArmatureNavigationComponent, ArmatureResizePanelsModule, Attribute, AuthorizationService, B2bNavComponent, BannerService, BannerType, BaseComponentModule, BaseConfigService, CacheExpirationType, ComponentSavePrintComponent, ComponentSavePrintService, Configuration, ConfirmAddressData, CoverageDetail, CssOverride, CssOverrideDirective, CustomAuthConfigService, DISABLE_ACCESS_FOR_NO_PAGES_ROLE, DISTRIBUTED_CACHE_BASE_PATH, DataStoreConfig, DateInputFilterDirective, DecodedAccessToken, DefaultConfigService, DialogResult, DistributedCacheModule, ENTITY_SESSION_STORAGE_PREFIX, ENTITY_SS_CONFIG_PREFIX, EntityBaseComponent, EntityHelperService, EntityInjectWrapperComponent, FAQ, FAQConfig, FEDERATED_MODULE_ID, FaqComponent, FaqModule, FeedbackToolComponent, FeedbackToolModule, FooterConfig, FormsModule, HYBRID_SAML_OAUTH_CONFIG, HeaderAuthSettings, HybridSamlOAuthConfig, HybridSamlOauthService, InputTrimDirective, LINE_OF_COVERAGE, LettersCharactersDirective, LettersOnlyDirective, MarketSelectionConfig, MarketSelectionService, MfeModule, MobileHeaderMenuComponent, ModalData, NavigationModule, NumbersOnlyDirective, Oauth2RoleService, OauthModule, PhoneFormatPipe, PolicyPerson, RBAC_CONFIG, RbacActionDirective, RbacConfig, RbacModule, RedirectSamlComponent, RedirectSamlRequest, RedirectSessionConfigs, ResizePanelsComponent, RoleAccess, RoleNavService, RoutePath, RumConfig, RumModule, RumService, SESSION_CONFIG, SOF_BLANK_LANGUAGE_OVERRIDE, SOF_DATE_PIPE_FORMATS, STATUS, SamlModule, SamlService, SelectedMarketContext, ServerCacheService, SessionConfig, SessionService, SharedErrorService, SiteMapComponent, SiteMapDirection, SnackbarService, SofAddressComponent, SofAlertComponent, SofArComponentSavePrintModule, SofBadgeComponent, SofBannerComponent, SofBlankPipe, SofBottomSheetComponent, SofBreadcrumbsHierarchyComponent, SofBreadcrumbsHistoryComponent, SofButtonToggleGroupComponent, SofCalloutComponent, SofChipComponent, SofCompareAddressPipe, SofConfirmAddressComponent, SofConfirmAddressCountyChangeComponent, SofContextComponent, SofDatePipe, SofDropdownButtonComponent, SofErrorCommonComponent, SofHandleComponent, SofHeaderComponent, SofImageCheckboxComponent, SofInputStepperComponent, SofModalComponent, SofNavPanelComponent, SofPipeModule, SofProgressBarComponent, SofRadioCardComponent, SofSegmentedControlComponent, SofSelectComponent, SofSimpleAlertComponent, SofSkeletonLoaderComponent, SofSnackbarComponent, SofSsnPipe, SofStarRatingComponent, SofSubNavigationComponent, SofTabsComponent, SofToastComponent, SofUtilityButtonComponent, SoftheonErrorHandlerService, SsoGatewayEntryService, SsoGatewayModel, States, TextOverflowEllipsisTooltipDirective, ThemeModule, ThemeService, ToastService, TypedSession, USER_ENTITY_SERVICE_CONFIG, UserEntityService, UserEntityServiceConfig, ValidationKeys, WINDOW, httpVerb, initializerFactory, keyPathPrefix, languageStorageKey, newGuid, pascalToCamel, preSignInRouteStorageKey, removeMenuRole, routeToPreLoginRoute, sessionBasePathFactory, userInitialsPipe };
 //# sourceMappingURL=softheon-armature.mjs.map