af-connect-components 0.0.18 → 0.0.20

package/fesm2020/af-connect-components.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, Host, Optional, Input, Pipe, EventEmitter, Output, HostListener, Directive, ContentChild, ContentChildren, forwardRef, ViewChild, ElementRef, ViewChildren, NgModule } from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, Host, Optional, Input, EventEmitter, forwardRef, Output, ContentChildren, ViewChild, HostListener, Pipe, Directive, ContentChild, ElementRef, ViewChildren, NgModule } from '@angular/core';
 import { map, BehaviorSubject, take, fromEvent, Subscription, interval, debounceTime } from 'rxjs';
 import * as i1 from '@angular/cdk/layout';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { trigger, state, style, transition, animate, query, stagger, sequence, group, animateChild } from '@angular/animations';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { first } from 'rxjs/operators';
-import * as i2 from '@angular/forms';
-import { NgControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/router';
 
 class AfConnectComponentsService {
@@ -366,6 +366,10 @@ class AfConnectFooterComponent {
             twitter: {
                 link: 'https://twitter.com/alexforbes',
                 isHidden: false,
+            },
+            whatsapp: {
+                link: 'https://api.whatsapp.com/send/?phone=27600439601&text=help&type=phone_number&app_absent=0',
+                isHidden: false,
             }
         };
     }
@@ -388,10 +392,10 @@ class AfConnectFooterComponent {
     }
 }
 AfConnectFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectFooterComponent, deps: [{ token: BreakpointLibService }], target: i0.ɵɵFactoryTarget.Component });
-AfConnectFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectFooterComponent, selector: "lib-af-connect-footer", inputs: { config: "config", isBottomBannerHidden: "isBottomBannerHidden", isFooterContentHidden: "isFooterContentHidden" }, ngImport: i0, template: "\r\n<ng-container *ngIf=\"!isFooterContentHidden\">  \r\n<div *ngIf=\"breakpointService.isMobile$ | async\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <h2 class=\"section-title\">\r\n            {{section.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                <a class=\"section-link\" [href]=\"link.link\" target=\"_blank\">{{link.title}}</a>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" class=\"sections-container address-container\">\r\n        <h2 class=\"section-title address-title\">\r\n            {{address.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                <span class=\"section-link address-link\">{{link.title}}</span>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!(breakpointService.isMobile$ | async)\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <afc-expandable-wrapper>\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title\">\r\n                    {{section.title}}\r\n                </h2>\r\n                <afc-expandable-arrow color=\"rgba(255,255,255, 0.7)\"></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                            <a class=\"section-link address-link\" [href]=\"link.link\" target=\"_blank\">{{link.title}}</a>\r\n                    </ng-container>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" [ngClass]=\"[\r\n    address.title ? 'sections-container address-container' : '']\">\r\n        <afc-expandable-wrapper *ngIf=\"address.title\">\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title address-title\">\r\n                    {{address.title}}\r\n                </h2>\r\n                <afc-expandable-arrow color=\"rgba(255,255,255, 0.7)\"></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                        <span class=\"section-link\">{{link.title}}</span>\r\n                    </ng-container>\r\n                    <span class=\"section-link address-link\">{{getMobileAddress}}</span>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n</div>\r\n</ng-container> \r\n\r\n<div *ngIf=\"!isBottomBannerHidden\" class=\"bottom-banner\">\r\n    <div class=\"banner-title\">\r\n        {{config?.bannerTitle ? config?.bannerTitle : defaultConfig.bannerTitle}}\r\n        <span class=\"title-links\" (click)=\"openLegalTerms()\">Legal terms | </span>\r\n        <span class=\"title-links\" (click)=\"openPrivacyPolicy()\">Privacy policy | </span>\r\n        <span class=\"title-links\" (click)=\"openPaiaManual()\">PAIA manual</span>\r\n    </div>\r\n    \r\n    <div class=\"social-container\">\r\n        <a *ngIf=\"!config?.instagram?.isHidden\" class=\"image-container\" [href]=\"config?.instagram?.link ? config?.instagram?.link : defaultConfig.instagram?.link\" target=\"_blank\">  \r\n            <svg id=\"Group_888\" data-name=\"Group 888\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"15.676\" viewBox=\"0 0 15.618 15.676\">\r\n                <path id=\"Path_8\" data-name=\"Path 8\" d=\"M21.327,13.4c1.039.037,2.115.037,3.154.074a5.31,5.31,0,0,1,2.6.668,3.937,3.937,0,0,1,1.892,2.746,21.051,21.051,0,0,1,.186,2.152c.037,1.558,0,3.117,0,4.675a7.553,7.553,0,0,1-.3,2.412,3.931,3.931,0,0,1-3.154,2.746,14.046,14.046,0,0,1-2.152.186c-1.559.037-3.08,0-4.638,0a7.553,7.553,0,0,1-2.412-.3,3.931,3.931,0,0,1-2.746-3.154,14.046,14.046,0,0,1-.186-2.152c-.037-1.558,0-3.117,0-4.675a7.553,7.553,0,0,1,.3-2.412,3.931,3.931,0,0,1,3.154-2.746,14.047,14.047,0,0,1,2.152-.186c.705-.037,1.41-.037,2.152-.037Zm6.42,7.681h0c-.037-.631-.037-1.225-.037-1.855a14.347,14.347,0,0,0-.111-1.781,2.653,2.653,0,0,0-2.226-2.486,9.8,9.8,0,0,0-2.078-.148c-1.336-.037-2.635-.037-3.97,0a11.414,11.414,0,0,0-1.967.148,2.616,2.616,0,0,0-2.226,1.93A5.813,5.813,0,0,0,14.945,18c-.037,1.41-.037,2.82-.037,4.23,0,.891.037,1.818.111,2.709a2.587,2.587,0,0,0,2.264,2.486,12.746,12.746,0,0,0,2.078.148c1.3.037,2.6,0,3.933,0a14.348,14.348,0,0,0,1.781-.111A2.594,2.594,0,0,0,26.6,26.87a2.848,2.848,0,0,0,1.039-2.264C27.71,23.493,27.71,22.306,27.747,21.081Z\" transform=\"translate(-13.556 -13.4)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_9\" data-name=\"Path 9\" d=\"M31.715,27.708a4.008,4.008,0,1,1-3.97-4.008A3.991,3.991,0,0,1,31.715,27.708Zm-4.008,2.6a2.6,2.6,0,1,0-2.6-2.6A2.581,2.581,0,0,0,27.708,30.3Z\" transform=\"translate(-19.936 -19.878)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_10\" data-name=\"Path 10\" d=\"M45.052,21.628a.951.951,0,0,1-.928.965.946.946,0,1,1,.928-.965Z\" transform=\"translate(-32.196 -17.991)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n            </a>\r\n        <a *ngIf=\"!config?.linkedIn?.isHidden\" class=\"image-container\" [href]=\"config?.linkedIn?.link ? config?.linkedIn?.link : defaultConfig.linkedIn?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"14.902\" viewBox=\"0 0 15.618 14.902\">\r\n                <path id=\"Path_7\" data-name=\"Path 7\" d=\"M32.818,24.635V30.4H29.45V25.014c0-1.347-.463-2.273-1.684-2.273a1.868,1.868,0,0,0-1.726,1.221,2.278,2.278,0,0,0-.126.8V30.4H22.546s.042-9.135,0-10.061h3.368v1.431a.041.041,0,0,1-.042.042h.042v-.042a3.363,3.363,0,0,1,3.031-1.684c2.189,0,3.873,1.473,3.873,4.546ZM19.094,15.5A1.753,1.753,0,0,0,17.2,17.226a1.716,1.716,0,0,0,1.852,1.726h.042a1.729,1.729,0,0,0,1.894-1.726A1.777,1.777,0,0,0,19.094,15.5ZM17.368,30.4h3.326V20.341H17.368Zm0,0\" transform=\"translate(-17.2 -15.5)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.facebook?.isHidden\" class=\"image-container\" [href]=\"config?.facebook?.link ? config?.facebook?.link : defaultConfig.facebook?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 7.235 15.618\">\r\n                <path id=\"Path_13\" data-name=\"Path 13\" d=\"M31.967,21.909H29.785v7.809H26.531V21.909H25V19.153h1.531v-1.8A3.032,3.032,0,0,1,29.785,14.1H32.2v2.68H30.474a.679.679,0,0,0-.689.766v1.608h2.45Zm0,0\" transform=\"translate(-25 -14.1)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.twitter?.isHidden\" class=\"image-container\" [href]=\"config?.twitter?.link ? config?.twitter?.link : defaultConfig.twitter?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"12.715\" viewBox=\"0 0 15.618 12.715\">\r\n                <path id=\"Path_6\" data-name=\"Path 6\" d=\"M28.818,18.707a6.2,6.2,0,0,1-1.837.514,3.165,3.165,0,0,0,1.4-1.764,6.762,6.762,0,0,1-2.021.772A3.248,3.248,0,0,0,24,17.2a3.2,3.2,0,0,0-3.2,3.2,4.524,4.524,0,0,0,.073.735,9.094,9.094,0,0,1-6.615-3.344,3.053,3.053,0,0,0-.441,1.617,3.213,3.213,0,0,0,1.433,2.683,2.946,2.946,0,0,1-1.47-.4v.037a3.231,3.231,0,0,0,2.572,3.16,3.132,3.132,0,0,1-.845.11,2.857,2.857,0,0,1-.588-.073,3.211,3.211,0,0,0,3.013,2.242,6.477,6.477,0,0,1-3.969,1.36,5.427,5.427,0,0,1-.772-.037A9.128,9.128,0,0,0,27.238,20.8v-.4a6.874,6.874,0,0,0,1.58-1.69Zm0,0\" transform=\"translate(-13.2 -17.2)\" fill=\"#f1f2f5\"/>\r\n              </svg>              \r\n        </a>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [":host{z-index:1000}.footer-container{font-family:Hero New SemiBold;background:#15808D;min-height:200px;position:relative;padding:3% 5% 2% 5.3%;z-index:1000;display:grid;grid-column-gap:4rem;grid-row-gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(190px,auto))}@media (min-width: 769px) and (max-width: 1023px){.footer-container{grid-column-gap:2rem}}@media (min-width: 1024px) and (max-width: 1200px){.footer-container{grid-column-gap:2rem}}@media (max-width: 768px){.footer-container{grid-column-gap:0px;grid-row-gap:0px;display:flex;flex-wrap:wrap;flex-direction:column;padding:0rem 1rem}}.sections-container,.sections-container__mobile{display:flex;flex-wrap:wrap;justify-content:flex-start;flex-direction:column;gap:.5rem}@media (max-width: 768px){.sections-container,.sections-container__mobile{gap:20px;border-bottom:1px solid white}}@media (max-width: 768px){.sections-container__mobile{padding-bottom:20px}}.sections-container .section-title,.sections-container__mobile .section-title{font-size:1.25rem;font-family:Hero New Bold;margin:0 0 12px;color:#f1f2f5}@media (max-width: 768px){.sections-container .section-title,.sections-container__mobile .section-title{margin:0;font-size:1.125rem}}.sections-container:last-of-type,.sections-container__mobile:last-of-type{border-bottom:none}.sections-container:nth-last-of-type(2),.sections-container__mobile:nth-last-of-type(2){border-bottom:none}.section-link{font-family:Hero New;color:#fff;text-decoration:none;opacity:70%}.section-link.address-link{cursor:initial}@media (max-width: 768px){.section-link{font-size:.875rem}}@media (hover: hover){.section-link:hover{opacity:100%}}.bottom-banner{color:#f1f2f5;background:#124E57;border:1px solid #707070;padding:2% 5%;display:flex;justify-content:space-between;align-items:center;max-height:120px;position:relative;z-index:1001}@media (max-width: 768px){.bottom-banner{flex-direction:column;justify-content:center;text-align:center;gap:11px;align-items:center;font-size:.6875rem;padding:16px 8px;line-height:22px}}.social-container{display:flex;gap:40px;margin-left:4%}@media (max-width: 768px){.social-container{gap:35px;margin-left:0%}}.image-container{cursor:pointer;display:flex;justify-content:center;align-items:center;width:18px;height:18px}img{height:16px;width:16px}.section-link{cursor:pointer}.address-title{min-height:28px}.address-container a:first-of-type{opacity:100%}.title-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}@media (max-width: 768px){.title-container{padding-top:16px;padding-bottom:16px;width:100%}}.margin-div{width:100%;height:20px}.title-links{cursor:pointer}.title-links:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ExpandableContainerComponent, selector: "afc-expandable-container" }, { kind: "component", type: ExpandableArrowComponent, selector: "afc-expandable-arrow", inputs: ["color", "startPosition", "endPosition"] }, { kind: "component", type: ExpandableWrapperComponent, selector: "afc-expandable-wrapper" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+AfConnectFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectFooterComponent, selector: "lib-af-connect-footer", inputs: { config: "config", isBottomBannerHidden: "isBottomBannerHidden", isFooterContentHidden: "isFooterContentHidden" }, ngImport: i0, template: "\r\n<ng-container *ngIf=\"!isFooterContentHidden\">  \r\n<div *ngIf=\"breakpointService.isMobile$ | async\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <h2 class=\"section-title\">\r\n            {{section.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                <a class=\"section-link\" [href]=\"link.link\" target=\"_blank\">{{link.title}}</a>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" class=\"sections-container address-container\">\r\n        <h2 class=\"section-title address-title\">\r\n            {{address.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                <span class=\"section-link address-link\">{{link.title}}</span>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!(breakpointService.isMobile$ | async)\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <afc-expandable-wrapper>\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title\">\r\n                    {{section.title}}\r\n                </h2>\r\n                <afc-expandable-arrow color=\"rgba(255,255,255, 0.7)\"></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                            <a class=\"section-link address-link\" [href]=\"link.link\" target=\"_blank\">{{link.title}}</a>\r\n                    </ng-container>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" [ngClass]=\"[\r\n    address.title ? 'sections-container address-container' : '']\">\r\n        <afc-expandable-wrapper *ngIf=\"address.title\">\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title address-title\">\r\n                    {{address.title}}\r\n                </h2>\r\n                <afc-expandable-arrow color=\"rgba(255,255,255, 0.7)\"></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                        <span class=\"section-link\">{{link.title}}</span>\r\n                    </ng-container>\r\n                    <span class=\"section-link address-link\">{{getMobileAddress}}</span>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n</div>\r\n</ng-container> \r\n\r\n<div *ngIf=\"!isBottomBannerHidden\" class=\"bottom-banner\">\r\n    <div class=\"banner-title\">\r\n        {{config?.bannerTitle ? config?.bannerTitle : defaultConfig.bannerTitle}}\r\n        <span class=\"title-links\" (click)=\"openLegalTerms()\">Legal terms | </span>\r\n        <span class=\"title-links\" (click)=\"openPrivacyPolicy()\">Privacy policy | </span>\r\n        <span class=\"title-links\" (click)=\"openPaiaManual()\">PAIA manual</span>\r\n    </div>\r\n    \r\n    <div class=\"social-container\">\r\n        <a *ngIf=\"!config?.instagram?.isHidden\" class=\"image-container\" [href]=\"config?.instagram?.link ? config?.instagram?.link : defaultConfig.instagram?.link\" target=\"_blank\">  \r\n            <svg id=\"Group_888\" data-name=\"Group 888\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"15.676\" viewBox=\"0 0 15.618 15.676\">\r\n                <path id=\"Path_8\" data-name=\"Path 8\" d=\"M21.327,13.4c1.039.037,2.115.037,3.154.074a5.31,5.31,0,0,1,2.6.668,3.937,3.937,0,0,1,1.892,2.746,21.051,21.051,0,0,1,.186,2.152c.037,1.558,0,3.117,0,4.675a7.553,7.553,0,0,1-.3,2.412,3.931,3.931,0,0,1-3.154,2.746,14.046,14.046,0,0,1-2.152.186c-1.559.037-3.08,0-4.638,0a7.553,7.553,0,0,1-2.412-.3,3.931,3.931,0,0,1-2.746-3.154,14.046,14.046,0,0,1-.186-2.152c-.037-1.558,0-3.117,0-4.675a7.553,7.553,0,0,1,.3-2.412,3.931,3.931,0,0,1,3.154-2.746,14.047,14.047,0,0,1,2.152-.186c.705-.037,1.41-.037,2.152-.037Zm6.42,7.681h0c-.037-.631-.037-1.225-.037-1.855a14.347,14.347,0,0,0-.111-1.781,2.653,2.653,0,0,0-2.226-2.486,9.8,9.8,0,0,0-2.078-.148c-1.336-.037-2.635-.037-3.97,0a11.414,11.414,0,0,0-1.967.148,2.616,2.616,0,0,0-2.226,1.93A5.813,5.813,0,0,0,14.945,18c-.037,1.41-.037,2.82-.037,4.23,0,.891.037,1.818.111,2.709a2.587,2.587,0,0,0,2.264,2.486,12.746,12.746,0,0,0,2.078.148c1.3.037,2.6,0,3.933,0a14.348,14.348,0,0,0,1.781-.111A2.594,2.594,0,0,0,26.6,26.87a2.848,2.848,0,0,0,1.039-2.264C27.71,23.493,27.71,22.306,27.747,21.081Z\" transform=\"translate(-13.556 -13.4)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_9\" data-name=\"Path 9\" d=\"M31.715,27.708a4.008,4.008,0,1,1-3.97-4.008A3.991,3.991,0,0,1,31.715,27.708Zm-4.008,2.6a2.6,2.6,0,1,0-2.6-2.6A2.581,2.581,0,0,0,27.708,30.3Z\" transform=\"translate(-19.936 -19.878)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_10\" data-name=\"Path 10\" d=\"M45.052,21.628a.951.951,0,0,1-.928.965.946.946,0,1,1,.928-.965Z\" transform=\"translate(-32.196 -17.991)\" fill=\"#f1f2f5\"/>\r\n            </svg>\r\n            </a>\r\n        <a *ngIf=\"!config?.linkedIn?.isHidden\" class=\"image-container\" [href]=\"config?.linkedIn?.link ? config?.linkedIn?.link : defaultConfig.linkedIn?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"14.902\" viewBox=\"0 0 15.618 14.902\">\r\n                <path id=\"Path_7\" data-name=\"Path 7\" d=\"M32.818,24.635V30.4H29.45V25.014c0-1.347-.463-2.273-1.684-2.273a1.868,1.868,0,0,0-1.726,1.221,2.278,2.278,0,0,0-.126.8V30.4H22.546s.042-9.135,0-10.061h3.368v1.431a.041.041,0,0,1-.042.042h.042v-.042a3.363,3.363,0,0,1,3.031-1.684c2.189,0,3.873,1.473,3.873,4.546ZM19.094,15.5A1.753,1.753,0,0,0,17.2,17.226a1.716,1.716,0,0,0,1.852,1.726h.042a1.729,1.729,0,0,0,1.894-1.726A1.777,1.777,0,0,0,19.094,15.5ZM17.368,30.4h3.326V20.341H17.368Zm0,0\" transform=\"translate(-17.2 -15.5)\" fill=\"#f1f2f5\"/>\r\n            </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.facebook?.isHidden\" class=\"image-container\" [href]=\"config?.facebook?.link ? config?.facebook?.link : defaultConfig.facebook?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 7.235 15.618\">\r\n                <path id=\"Path_13\" data-name=\"Path 13\" d=\"M31.967,21.909H29.785v7.809H26.531V21.909H25V19.153h1.531v-1.8A3.032,3.032,0,0,1,29.785,14.1H32.2v2.68H30.474a.679.679,0,0,0-.689.766v1.608h2.45Zm0,0\" transform=\"translate(-25 -14.1)\" fill=\"#f1f2f5\"/>\r\n            </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.twitter?.isHidden\" class=\"image-container\" [href]=\"config?.twitter?.link ? config?.twitter?.link : defaultConfig.twitter?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.966\" height=\"15.618\" viewBox=\"0 0 15.966 15.618\">\r\n                <path id=\"icons8-twitterx\" d=\"M19.846,19.618l-6.244-9.1.011.009L19.243,4H17.361L12.775,9.31,9.133,4H4.2l5.829,8.5h0L3.88,19.618H5.761l5.1-5.908,4.052,5.908ZM8.388,5.42,17.148,18.2H15.658L6.89,5.42Z\" transform=\"translate(-3.88 -4)\" fill=\"#f1f2f5\"/>\r\n            </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.whatsapp?.isHidden\" class=\"image-container\" [href]=\"config?.whatsapp?.link ? config?.whatsapp?.link : defaultConfig.whatsapp?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.666\" height=\"15.676\" viewBox=\"0 0 15.666 15.676\">\r\n                <path id=\"whatsapp-svgrepo-com\" d=\"M17.324,6.273A7.691,7.691,0,0,0,11.838,4,7.779,7.779,0,0,0,5.1,15.649L4,19.676,8.115,18.6a7.762,7.762,0,0,0,9.21-12.325ZM11.838,18.236a6.446,6.446,0,0,1-3.292-.9l-.235-.147-2.44.647.647-2.381-.157-.245a6.492,6.492,0,1,1,5.477,3.027Zm3.537-4.84c-.2-.1-1.146-.568-1.323-.627s-.314-.1-.441.1a8.822,8.822,0,0,1-.617.754c-.108.137-.225.147-.421,0a5.222,5.222,0,0,1-2.635-2.3c-.206-.343.2-.323.568-1.058a.372.372,0,0,0,0-.343c0-.1-.441-1.058-.6-1.44s-.314-.323-.441-.333H9.085a.7.7,0,0,0-.519.245,2.146,2.146,0,0,0-.647,1.656,3.742,3.742,0,0,0,.794,2.008,8.71,8.71,0,0,0,3.321,2.939,3.773,3.773,0,0,0,2.332.49,1.96,1.96,0,0,0,1.3-.921,1.587,1.587,0,0,0,.118-.921A1.368,1.368,0,0,0,15.375,13.4Z\" transform=\"translate(-4 -4)\" fill=\"#fff\"/>\r\n            </svg>\r\n        </a>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [":host{z-index:1000}.footer-container{font-family:Hero New SemiBold;background:#15808D;min-height:200px;position:relative;padding:3% 5% 2% 5.3%;z-index:1000;display:grid;grid-column-gap:4rem;grid-row-gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(190px,auto))}@media (min-width: 769px) and (max-width: 1023px){.footer-container{grid-column-gap:2rem}}@media (min-width: 1024px) and (max-width: 1200px){.footer-container{grid-column-gap:2rem}}@media (max-width: 768px){.footer-container{grid-column-gap:0px;grid-row-gap:0px;display:flex;flex-wrap:wrap;flex-direction:column;padding:0rem 1rem}}.sections-container,.sections-container__mobile{display:flex;flex-wrap:wrap;justify-content:flex-start;flex-direction:column;gap:.5rem}@media (max-width: 768px){.sections-container,.sections-container__mobile{gap:20px;border-bottom:1px solid white}}@media (max-width: 768px){.sections-container__mobile{padding-bottom:20px}}.sections-container .section-title,.sections-container__mobile .section-title{font-size:1.25rem;font-family:Hero New Bold;margin:0 0 12px;color:#f1f2f5}@media (max-width: 768px){.sections-container .section-title,.sections-container__mobile .section-title{margin:0;font-size:1.125rem}}.sections-container:last-of-type,.sections-container__mobile:last-of-type{border-bottom:none}.sections-container:nth-last-of-type(2),.sections-container__mobile:nth-last-of-type(2){border-bottom:none}.section-link{font-family:Hero New;color:#fff;text-decoration:none;opacity:70%}.section-link.address-link{cursor:initial}@media (max-width: 768px){.section-link{font-size:.875rem}}@media (hover: hover){.section-link:hover{opacity:100%}}.bottom-banner{color:#f1f2f5;background:#124E57;border:1px solid #707070;padding:2% 5%;display:flex;justify-content:space-between;align-items:center;max-height:120px;position:relative;z-index:1001}@media (max-width: 768px){.bottom-banner{flex-direction:column;justify-content:center;text-align:center;gap:11px;align-items:center;font-size:.6875rem;padding:16px 8px;line-height:22px}}.social-container{display:flex;gap:40px;margin-left:4%}@media (max-width: 768px){.social-container{gap:35px;margin-left:0%}}.image-container{cursor:pointer;display:flex;justify-content:center;align-items:center;width:18px;height:18px}img{height:16px;width:16px}.section-link{cursor:pointer}.address-title{min-height:28px}.address-container a:first-of-type{opacity:100%}.title-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}@media (max-width: 768px){.title-container{padding-top:16px;padding-bottom:16px;width:100%}}.margin-div{width:100%;height:20px}.title-links{cursor:pointer}.title-links:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ExpandableContainerComponent, selector: "afc-expandable-container" }, { kind: "component", type: ExpandableArrowComponent, selector: "afc-expandable-arrow", inputs: ["color", "startPosition", "endPosition"] }, { kind: "component", type: ExpandableWrapperComponent, selector: "afc-expandable-wrapper" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-footer', template: "\r\n<ng-container *ngIf=\"!isFooterContentHidden\">  \r\n<div *ngIf=\"breakpointService.isMobile$ | async\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <h2 class=\"section-title\">\r\n            {{section.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                <a class=\"section-link\" [href]=\"link.link\" target=\"_blank\">{{link.title}}</a>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" class=\"sections-container address-container\">\r\n        <h2 class=\"section-title address-title\">\r\n            {{address.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                <span class=\"section-link address-link\">{{link.title}}</span>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!(breakpointService.isMobile$ | async)\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <afc-expandable-wrapper>\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title\">\r\n                    {{section.title}}\r\n                </h2>\r\n                <afc-expandable-arrow color=\"rgba(255,255,255, 0.7)\"></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                            <a class=\"section-link address-link\" [href]=\"link.link\" target=\"_blank\">{{link.title}}</a>\r\n                    </ng-container>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" [ngClass]=\"[\r\n    address.title ? 'sections-container address-container' : '']\">\r\n        <afc-expandable-wrapper *ngIf=\"address.title\">\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title address-title\">\r\n                    {{address.title}}\r\n                </h2>\r\n                <afc-expandable-arrow color=\"rgba(255,255,255, 0.7)\"></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                        <span class=\"section-link\">{{link.title}}</span>\r\n                    </ng-container>\r\n                    <span class=\"section-link address-link\">{{getMobileAddress}}</span>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n</div>\r\n</ng-container> \r\n\r\n<div *ngIf=\"!isBottomBannerHidden\" class=\"bottom-banner\">\r\n    <div class=\"banner-title\">\r\n        {{config?.bannerTitle ? config?.bannerTitle : defaultConfig.bannerTitle}}\r\n        <span class=\"title-links\" (click)=\"openLegalTerms()\">Legal terms | </span>\r\n        <span class=\"title-links\" (click)=\"openPrivacyPolicy()\">Privacy policy | </span>\r\n        <span class=\"title-links\" (click)=\"openPaiaManual()\">PAIA manual</span>\r\n    </div>\r\n    \r\n    <div class=\"social-container\">\r\n        <a *ngIf=\"!config?.instagram?.isHidden\" class=\"image-container\" [href]=\"config?.instagram?.link ? config?.instagram?.link : defaultConfig.instagram?.link\" target=\"_blank\">  \r\n            <svg id=\"Group_888\" data-name=\"Group 888\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"15.676\" viewBox=\"0 0 15.618 15.676\">\r\n                <path id=\"Path_8\" data-name=\"Path 8\" d=\"M21.327,13.4c1.039.037,2.115.037,3.154.074a5.31,5.31,0,0,1,2.6.668,3.937,3.937,0,0,1,1.892,2.746,21.051,21.051,0,0,1,.186,2.152c.037,1.558,0,3.117,0,4.675a7.553,7.553,0,0,1-.3,2.412,3.931,3.931,0,0,1-3.154,2.746,14.046,14.046,0,0,1-2.152.186c-1.559.037-3.08,0-4.638,0a7.553,7.553,0,0,1-2.412-.3,3.931,3.931,0,0,1-2.746-3.154,14.046,14.046,0,0,1-.186-2.152c-.037-1.558,0-3.117,0-4.675a7.553,7.553,0,0,1,.3-2.412,3.931,3.931,0,0,1,3.154-2.746,14.047,14.047,0,0,1,2.152-.186c.705-.037,1.41-.037,2.152-.037Zm6.42,7.681h0c-.037-.631-.037-1.225-.037-1.855a14.347,14.347,0,0,0-.111-1.781,2.653,2.653,0,0,0-2.226-2.486,9.8,9.8,0,0,0-2.078-.148c-1.336-.037-2.635-.037-3.97,0a11.414,11.414,0,0,0-1.967.148,2.616,2.616,0,0,0-2.226,1.93A5.813,5.813,0,0,0,14.945,18c-.037,1.41-.037,2.82-.037,4.23,0,.891.037,1.818.111,2.709a2.587,2.587,0,0,0,2.264,2.486,12.746,12.746,0,0,0,2.078.148c1.3.037,2.6,0,3.933,0a14.348,14.348,0,0,0,1.781-.111A2.594,2.594,0,0,0,26.6,26.87a2.848,2.848,0,0,0,1.039-2.264C27.71,23.493,27.71,22.306,27.747,21.081Z\" transform=\"translate(-13.556 -13.4)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_9\" data-name=\"Path 9\" d=\"M31.715,27.708a4.008,4.008,0,1,1-3.97-4.008A3.991,3.991,0,0,1,31.715,27.708Zm-4.008,2.6a2.6,2.6,0,1,0-2.6-2.6A2.581,2.581,0,0,0,27.708,30.3Z\" transform=\"translate(-19.936 -19.878)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_10\" data-name=\"Path 10\" d=\"M45.052,21.628a.951.951,0,0,1-.928.965.946.946,0,1,1,.928-.965Z\" transform=\"translate(-32.196 -17.991)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n            </a>\r\n        <a *ngIf=\"!config?.linkedIn?.isHidden\" class=\"image-container\" [href]=\"config?.linkedIn?.link ? config?.linkedIn?.link : defaultConfig.linkedIn?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"14.902\" viewBox=\"0 0 15.618 14.902\">\r\n                <path id=\"Path_7\" data-name=\"Path 7\" d=\"M32.818,24.635V30.4H29.45V25.014c0-1.347-.463-2.273-1.684-2.273a1.868,1.868,0,0,0-1.726,1.221,2.278,2.278,0,0,0-.126.8V30.4H22.546s.042-9.135,0-10.061h3.368v1.431a.041.041,0,0,1-.042.042h.042v-.042a3.363,3.363,0,0,1,3.031-1.684c2.189,0,3.873,1.473,3.873,4.546ZM19.094,15.5A1.753,1.753,0,0,0,17.2,17.226a1.716,1.716,0,0,0,1.852,1.726h.042a1.729,1.729,0,0,0,1.894-1.726A1.777,1.777,0,0,0,19.094,15.5ZM17.368,30.4h3.326V20.341H17.368Zm0,0\" transform=\"translate(-17.2 -15.5)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.facebook?.isHidden\" class=\"image-container\" [href]=\"config?.facebook?.link ? config?.facebook?.link : defaultConfig.facebook?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 7.235 15.618\">\r\n                <path id=\"Path_13\" data-name=\"Path 13\" d=\"M31.967,21.909H29.785v7.809H26.531V21.909H25V19.153h1.531v-1.8A3.032,3.032,0,0,1,29.785,14.1H32.2v2.68H30.474a.679.679,0,0,0-.689.766v1.608h2.45Zm0,0\" transform=\"translate(-25 -14.1)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.twitter?.isHidden\" class=\"image-container\" [href]=\"config?.twitter?.link ? config?.twitter?.link : defaultConfig.twitter?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"12.715\" viewBox=\"0 0 15.618 12.715\">\r\n                <path id=\"Path_6\" data-name=\"Path 6\" d=\"M28.818,18.707a6.2,6.2,0,0,1-1.837.514,3.165,3.165,0,0,0,1.4-1.764,6.762,6.762,0,0,1-2.021.772A3.248,3.248,0,0,0,24,17.2a3.2,3.2,0,0,0-3.2,3.2,4.524,4.524,0,0,0,.073.735,9.094,9.094,0,0,1-6.615-3.344,3.053,3.053,0,0,0-.441,1.617,3.213,3.213,0,0,0,1.433,2.683,2.946,2.946,0,0,1-1.47-.4v.037a3.231,3.231,0,0,0,2.572,3.16,3.132,3.132,0,0,1-.845.11,2.857,2.857,0,0,1-.588-.073,3.211,3.211,0,0,0,3.013,2.242,6.477,6.477,0,0,1-3.969,1.36,5.427,5.427,0,0,1-.772-.037A9.128,9.128,0,0,0,27.238,20.8v-.4a6.874,6.874,0,0,0,1.58-1.69Zm0,0\" transform=\"translate(-13.2 -17.2)\" fill=\"#f1f2f5\"/>\r\n              </svg>              \r\n        </a>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [":host{z-index:1000}.footer-container{font-family:Hero New SemiBold;background:#15808D;min-height:200px;position:relative;padding:3% 5% 2% 5.3%;z-index:1000;display:grid;grid-column-gap:4rem;grid-row-gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(190px,auto))}@media (min-width: 769px) and (max-width: 1023px){.footer-container{grid-column-gap:2rem}}@media (min-width: 1024px) and (max-width: 1200px){.footer-container{grid-column-gap:2rem}}@media (max-width: 768px){.footer-container{grid-column-gap:0px;grid-row-gap:0px;display:flex;flex-wrap:wrap;flex-direction:column;padding:0rem 1rem}}.sections-container,.sections-container__mobile{display:flex;flex-wrap:wrap;justify-content:flex-start;flex-direction:column;gap:.5rem}@media (max-width: 768px){.sections-container,.sections-container__mobile{gap:20px;border-bottom:1px solid white}}@media (max-width: 768px){.sections-container__mobile{padding-bottom:20px}}.sections-container .section-title,.sections-container__mobile .section-title{font-size:1.25rem;font-family:Hero New Bold;margin:0 0 12px;color:#f1f2f5}@media (max-width: 768px){.sections-container .section-title,.sections-container__mobile .section-title{margin:0;font-size:1.125rem}}.sections-container:last-of-type,.sections-container__mobile:last-of-type{border-bottom:none}.sections-container:nth-last-of-type(2),.sections-container__mobile:nth-last-of-type(2){border-bottom:none}.section-link{font-family:Hero New;color:#fff;text-decoration:none;opacity:70%}.section-link.address-link{cursor:initial}@media (max-width: 768px){.section-link{font-size:.875rem}}@media (hover: hover){.section-link:hover{opacity:100%}}.bottom-banner{color:#f1f2f5;background:#124E57;border:1px solid #707070;padding:2% 5%;display:flex;justify-content:space-between;align-items:center;max-height:120px;position:relative;z-index:1001}@media (max-width: 768px){.bottom-banner{flex-direction:column;justify-content:center;text-align:center;gap:11px;align-items:center;font-size:.6875rem;padding:16px 8px;line-height:22px}}.social-container{display:flex;gap:40px;margin-left:4%}@media (max-width: 768px){.social-container{gap:35px;margin-left:0%}}.image-container{cursor:pointer;display:flex;justify-content:center;align-items:center;width:18px;height:18px}img{height:16px;width:16px}.section-link{cursor:pointer}.address-title{min-height:28px}.address-container a:first-of-type{opacity:100%}.title-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}@media (max-width: 768px){.title-container{padding-top:16px;padding-bottom:16px;width:100%}}.margin-div{width:100%;height:20px}.title-links{cursor:pointer}.title-links:hover{text-decoration:underline}\n"] }]
+            args: [{ selector: 'lib-af-connect-footer', template: "\r\n<ng-container *ngIf=\"!isFooterContentHidden\">  \r\n<div *ngIf=\"breakpointService.isMobile$ | async\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <h2 class=\"section-title\">\r\n            {{section.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                <a class=\"section-link\" [href]=\"link.link\" target=\"_blank\">{{link.title}}</a>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" class=\"sections-container address-container\">\r\n        <h2 class=\"section-title address-title\">\r\n            {{address.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                <span class=\"section-link address-link\">{{link.title}}</span>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!(breakpointService.isMobile$ | async)\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <afc-expandable-wrapper>\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title\">\r\n                    {{section.title}}\r\n                </h2>\r\n                <afc-expandable-arrow color=\"rgba(255,255,255, 0.7)\"></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                            <a class=\"section-link address-link\" [href]=\"link.link\" target=\"_blank\">{{link.title}}</a>\r\n                    </ng-container>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" [ngClass]=\"[\r\n    address.title ? 'sections-container address-container' : '']\">\r\n        <afc-expandable-wrapper *ngIf=\"address.title\">\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title address-title\">\r\n                    {{address.title}}\r\n                </h2>\r\n                <afc-expandable-arrow color=\"rgba(255,255,255, 0.7)\"></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                        <span class=\"section-link\">{{link.title}}</span>\r\n                    </ng-container>\r\n                    <span class=\"section-link address-link\">{{getMobileAddress}}</span>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n</div>\r\n</ng-container> \r\n\r\n<div *ngIf=\"!isBottomBannerHidden\" class=\"bottom-banner\">\r\n    <div class=\"banner-title\">\r\n        {{config?.bannerTitle ? config?.bannerTitle : defaultConfig.bannerTitle}}\r\n        <span class=\"title-links\" (click)=\"openLegalTerms()\">Legal terms | </span>\r\n        <span class=\"title-links\" (click)=\"openPrivacyPolicy()\">Privacy policy | </span>\r\n        <span class=\"title-links\" (click)=\"openPaiaManual()\">PAIA manual</span>\r\n    </div>\r\n    \r\n    <div class=\"social-container\">\r\n        <a *ngIf=\"!config?.instagram?.isHidden\" class=\"image-container\" [href]=\"config?.instagram?.link ? config?.instagram?.link : defaultConfig.instagram?.link\" target=\"_blank\">  \r\n            <svg id=\"Group_888\" data-name=\"Group 888\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"15.676\" viewBox=\"0 0 15.618 15.676\">\r\n                <path id=\"Path_8\" data-name=\"Path 8\" d=\"M21.327,13.4c1.039.037,2.115.037,3.154.074a5.31,5.31,0,0,1,2.6.668,3.937,3.937,0,0,1,1.892,2.746,21.051,21.051,0,0,1,.186,2.152c.037,1.558,0,3.117,0,4.675a7.553,7.553,0,0,1-.3,2.412,3.931,3.931,0,0,1-3.154,2.746,14.046,14.046,0,0,1-2.152.186c-1.559.037-3.08,0-4.638,0a7.553,7.553,0,0,1-2.412-.3,3.931,3.931,0,0,1-2.746-3.154,14.046,14.046,0,0,1-.186-2.152c-.037-1.558,0-3.117,0-4.675a7.553,7.553,0,0,1,.3-2.412,3.931,3.931,0,0,1,3.154-2.746,14.047,14.047,0,0,1,2.152-.186c.705-.037,1.41-.037,2.152-.037Zm6.42,7.681h0c-.037-.631-.037-1.225-.037-1.855a14.347,14.347,0,0,0-.111-1.781,2.653,2.653,0,0,0-2.226-2.486,9.8,9.8,0,0,0-2.078-.148c-1.336-.037-2.635-.037-3.97,0a11.414,11.414,0,0,0-1.967.148,2.616,2.616,0,0,0-2.226,1.93A5.813,5.813,0,0,0,14.945,18c-.037,1.41-.037,2.82-.037,4.23,0,.891.037,1.818.111,2.709a2.587,2.587,0,0,0,2.264,2.486,12.746,12.746,0,0,0,2.078.148c1.3.037,2.6,0,3.933,0a14.348,14.348,0,0,0,1.781-.111A2.594,2.594,0,0,0,26.6,26.87a2.848,2.848,0,0,0,1.039-2.264C27.71,23.493,27.71,22.306,27.747,21.081Z\" transform=\"translate(-13.556 -13.4)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_9\" data-name=\"Path 9\" d=\"M31.715,27.708a4.008,4.008,0,1,1-3.97-4.008A3.991,3.991,0,0,1,31.715,27.708Zm-4.008,2.6a2.6,2.6,0,1,0-2.6-2.6A2.581,2.581,0,0,0,27.708,30.3Z\" transform=\"translate(-19.936 -19.878)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_10\" data-name=\"Path 10\" d=\"M45.052,21.628a.951.951,0,0,1-.928.965.946.946,0,1,1,.928-.965Z\" transform=\"translate(-32.196 -17.991)\" fill=\"#f1f2f5\"/>\r\n            </svg>\r\n            </a>\r\n        <a *ngIf=\"!config?.linkedIn?.isHidden\" class=\"image-container\" [href]=\"config?.linkedIn?.link ? config?.linkedIn?.link : defaultConfig.linkedIn?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"14.902\" viewBox=\"0 0 15.618 14.902\">\r\n                <path id=\"Path_7\" data-name=\"Path 7\" d=\"M32.818,24.635V30.4H29.45V25.014c0-1.347-.463-2.273-1.684-2.273a1.868,1.868,0,0,0-1.726,1.221,2.278,2.278,0,0,0-.126.8V30.4H22.546s.042-9.135,0-10.061h3.368v1.431a.041.041,0,0,1-.042.042h.042v-.042a3.363,3.363,0,0,1,3.031-1.684c2.189,0,3.873,1.473,3.873,4.546ZM19.094,15.5A1.753,1.753,0,0,0,17.2,17.226a1.716,1.716,0,0,0,1.852,1.726h.042a1.729,1.729,0,0,0,1.894-1.726A1.777,1.777,0,0,0,19.094,15.5ZM17.368,30.4h3.326V20.341H17.368Zm0,0\" transform=\"translate(-17.2 -15.5)\" fill=\"#f1f2f5\"/>\r\n            </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.facebook?.isHidden\" class=\"image-container\" [href]=\"config?.facebook?.link ? config?.facebook?.link : defaultConfig.facebook?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 7.235 15.618\">\r\n                <path id=\"Path_13\" data-name=\"Path 13\" d=\"M31.967,21.909H29.785v7.809H26.531V21.909H25V19.153h1.531v-1.8A3.032,3.032,0,0,1,29.785,14.1H32.2v2.68H30.474a.679.679,0,0,0-.689.766v1.608h2.45Zm0,0\" transform=\"translate(-25 -14.1)\" fill=\"#f1f2f5\"/>\r\n            </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.twitter?.isHidden\" class=\"image-container\" [href]=\"config?.twitter?.link ? config?.twitter?.link : defaultConfig.twitter?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.966\" height=\"15.618\" viewBox=\"0 0 15.966 15.618\">\r\n                <path id=\"icons8-twitterx\" d=\"M19.846,19.618l-6.244-9.1.011.009L19.243,4H17.361L12.775,9.31,9.133,4H4.2l5.829,8.5h0L3.88,19.618H5.761l5.1-5.908,4.052,5.908ZM8.388,5.42,17.148,18.2H15.658L6.89,5.42Z\" transform=\"translate(-3.88 -4)\" fill=\"#f1f2f5\"/>\r\n            </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.whatsapp?.isHidden\" class=\"image-container\" [href]=\"config?.whatsapp?.link ? config?.whatsapp?.link : defaultConfig.whatsapp?.link\" target=\"_blank\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.666\" height=\"15.676\" viewBox=\"0 0 15.666 15.676\">\r\n                <path id=\"whatsapp-svgrepo-com\" d=\"M17.324,6.273A7.691,7.691,0,0,0,11.838,4,7.779,7.779,0,0,0,5.1,15.649L4,19.676,8.115,18.6a7.762,7.762,0,0,0,9.21-12.325ZM11.838,18.236a6.446,6.446,0,0,1-3.292-.9l-.235-.147-2.44.647.647-2.381-.157-.245a6.492,6.492,0,1,1,5.477,3.027Zm3.537-4.84c-.2-.1-1.146-.568-1.323-.627s-.314-.1-.441.1a8.822,8.822,0,0,1-.617.754c-.108.137-.225.147-.421,0a5.222,5.222,0,0,1-2.635-2.3c-.206-.343.2-.323.568-1.058a.372.372,0,0,0,0-.343c0-.1-.441-1.058-.6-1.44s-.314-.323-.441-.333H9.085a.7.7,0,0,0-.519.245,2.146,2.146,0,0,0-.647,1.656,3.742,3.742,0,0,0,.794,2.008,8.71,8.71,0,0,0,3.321,2.939,3.773,3.773,0,0,0,2.332.49,1.96,1.96,0,0,0,1.3-.921,1.587,1.587,0,0,0,.118-.921A1.368,1.368,0,0,0,15.375,13.4Z\" transform=\"translate(-4 -4)\" fill=\"#fff\"/>\r\n            </svg>\r\n        </a>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [":host{z-index:1000}.footer-container{font-family:Hero New SemiBold;background:#15808D;min-height:200px;position:relative;padding:3% 5% 2% 5.3%;z-index:1000;display:grid;grid-column-gap:4rem;grid-row-gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(190px,auto))}@media (min-width: 769px) and (max-width: 1023px){.footer-container{grid-column-gap:2rem}}@media (min-width: 1024px) and (max-width: 1200px){.footer-container{grid-column-gap:2rem}}@media (max-width: 768px){.footer-container{grid-column-gap:0px;grid-row-gap:0px;display:flex;flex-wrap:wrap;flex-direction:column;padding:0rem 1rem}}.sections-container,.sections-container__mobile{display:flex;flex-wrap:wrap;justify-content:flex-start;flex-direction:column;gap:.5rem}@media (max-width: 768px){.sections-container,.sections-container__mobile{gap:20px;border-bottom:1px solid white}}@media (max-width: 768px){.sections-container__mobile{padding-bottom:20px}}.sections-container .section-title,.sections-container__mobile .section-title{font-size:1.25rem;font-family:Hero New Bold;margin:0 0 12px;color:#f1f2f5}@media (max-width: 768px){.sections-container .section-title,.sections-container__mobile .section-title{margin:0;font-size:1.125rem}}.sections-container:last-of-type,.sections-container__mobile:last-of-type{border-bottom:none}.sections-container:nth-last-of-type(2),.sections-container__mobile:nth-last-of-type(2){border-bottom:none}.section-link{font-family:Hero New;color:#fff;text-decoration:none;opacity:70%}.section-link.address-link{cursor:initial}@media (max-width: 768px){.section-link{font-size:.875rem}}@media (hover: hover){.section-link:hover{opacity:100%}}.bottom-banner{color:#f1f2f5;background:#124E57;border:1px solid #707070;padding:2% 5%;display:flex;justify-content:space-between;align-items:center;max-height:120px;position:relative;z-index:1001}@media (max-width: 768px){.bottom-banner{flex-direction:column;justify-content:center;text-align:center;gap:11px;align-items:center;font-size:.6875rem;padding:16px 8px;line-height:22px}}.social-container{display:flex;gap:40px;margin-left:4%}@media (max-width: 768px){.social-container{gap:35px;margin-left:0%}}.image-container{cursor:pointer;display:flex;justify-content:center;align-items:center;width:18px;height:18px}img{height:16px;width:16px}.section-link{cursor:pointer}.address-title{min-height:28px}.address-container a:first-of-type{opacity:100%}.title-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}@media (max-width: 768px){.title-container{padding-top:16px;padding-bottom:16px;width:100%}}.margin-div{width:100%;height:20px}.title-links{cursor:pointer}.title-links:hover{text-decoration:underline}\n"] }]
         }], ctorParameters: function () { return [{ type: BreakpointLibService }]; }, propDecorators: { config: [{
                 type: Input
             }], isBottomBannerHidden: [{
@@ -400,49 +404,250 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                 type: Input
             }] } });
 
-/**
- * Gets the initials of a Name (First Second -> FS)
- */
-class GetinItialsPipe {
-    transform(value) {
-        if (!value) {
-            return '';
+class AfConnectRadioGroupComponent {
+    constructor() {
+        this._selected = null;
+        this._disabled = false;
+        this.direction = 'row';
+        this.withAsterisk = false;
+        this.variant = 'default';
+        this.labelPosition = 'after';
+        this.size = 'inline';
+        this.valueChange = new EventEmitter();
+        this.propagateChange = (_) => { };
+        this.propagateTouch = (_) => { };
+    }
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        if (this._value !== newValue) {
+            this._value = newValue;
+            this.updateRadioButtonsState();
+            this.propagateChange(this._value);
+            this.valueChange.emit(this._value);
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
+    set selected(newSelected) {
+        this._selected = newSelected;
+        this.value = newSelected ? newSelected.value : null;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(newValue) {
+        this._disabled = newValue;
+        this.markRadiosForCheck();
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.propagateTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    emitChangeEvent() {
+        this.valueChange.emit(this._value);
+    }
+    markRadiosForCheck() {
+        if (this.radios) {
+            this.radios.forEach((radio) => radio.markForCheck());
         }
-        return value.split(' ').map(word => word.charAt(0)).join('').slice(0, 2);
+    }
+    updateRadioButtonsState() {
+        this.radios?.forEach((radio) => {
+            radio.checked = this._value === radio.value;
+            if (radio.checked) {
+                this._selected = radio;
+            }
+        });
     }
 }
-GetinItialsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: GetinItialsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-GetinItialsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: GetinItialsPipe, name: "getInitials" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: GetinItialsPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'getInitials' }]
-        }] });
+AfConnectRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AfConnectRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectRadioGroupComponent, selector: "lib-af-connect-radio-group", inputs: { label: "label", direction: "direction", withAsterisk: "withAsterisk", variant: "variant", labelPosition: "labelPosition", size: "size", value: "value", selected: "selected", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => AfConnectRadioGroupComponent),
+            multi: true
+        }
+    ], queries: [{ propertyName: "radios", predicate: i0.forwardRef(function () { return AfConnectRadioButtonComponent; }), descendants: true }], ngImport: i0, template: "<span *ngIf=\"label\" class=\"label\">\r\n  {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span>\r\n</span>\r\n<div class=\"radio-buttons-container\" [class.column]=\"direction === 'column'\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;gap:1rem}.radio-buttons-container{display:flex;flex-wrap:wrap;gap:2rem}.radio-buttons-container.column{flex-direction:column;gap:1rem}.label{cursor:inherit;display:block;font-family:var(--standard-font-family-hero-new);font-size:12px;color:var(--main-black-color)}.label .asterisk{color:var(--primary-orange-mobile-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-af-connect-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AfConnectRadioGroupComponent),
+                            multi: true
+                        }
+                    ], template: "<span *ngIf=\"label\" class=\"label\">\r\n  {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span>\r\n</span>\r\n<div class=\"radio-buttons-container\" [class.column]=\"direction === 'column'\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;gap:1rem}.radio-buttons-container{display:flex;flex-wrap:wrap;gap:2rem}.radio-buttons-container.column{flex-direction:column;gap:1rem}.label{cursor:inherit;display:block;font-family:var(--standard-font-family-hero-new);font-size:12px;color:var(--main-black-color)}.label .asterisk{color:var(--primary-orange-mobile-color)}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], withAsterisk: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], radios: [{
+                type: ContentChildren,
+                args: [forwardRef(() => AfConnectRadioButtonComponent), { descendants: true }]
+            }] } });
+
+// Increasing integer for generating unique ids for all afc-radio-button instances.
+let nextUniqueId = 0;
+class AfConnectRadioButtonComponent {
+    constructor(radioGroup, changeDetector) {
+        this.radioGroup = radioGroup;
+        this.changeDetector = changeDetector;
+        this._uniqueId = `afc-radio-${++nextUniqueId}`;
+        this._checked = false;
+        this._disabled = false;
+        this._variant = 'default';
+        this._labelPosition = 'after';
+        this._size = 'inline';
+        this.id = this._uniqueId;
+        this.itemOrder = 'left-to-right';
+    }
+    get checked() {
+        return this._checked;
+    }
+    set checked(newCheckedState) {
+        if (this._checked !== newCheckedState) {
+            this._checked = newCheckedState;
+            if (newCheckedState && this.radioGroup && this.radioGroup.value !== this.value) {
+                this.radioGroup.selected = this;
+            }
+            this.markForCheck();
+        }
+    }
+    get disabled() {
+        return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled);
+    }
+    set disabled(newValue) {
+        this._disabled = newValue;
+    }
+    get inputId() {
+        return `${this.id}-input`;
+    }
+    get variant() {
+        return this._variant;
+    }
+    get labelPosition() {
+        return this._labelPosition;
+    }
+    get size() {
+        return this._size;
+    }
+    ngOnInit() {
+        if (!this.radioGroup) {
+            this._variant = 'checkbox';
+        }
+        if (this.radioGroup) {
+            this.checked = this.radioGroup.value === this.value;
+            this._variant = this.radioGroup.variant;
+            this._labelPosition = this.radioGroup.labelPosition;
+            this._size = this.radioGroup.size;
+        }
+    }
+    markForCheck() {
+        this.changeDetector.markForCheck();
+    }
+    onTouchTargetClick(event) {
+        this.onChange(event);
+        // Since the click comes from the touch target, we need
+        // to focus the native input element manually.
+        this.inputElement.nativeElement.focus();
+    }
+    onBlur() {
+        this.radioGroup.propagateTouch();
+    }
+    onChange(event) {
+        event.stopPropagation();
+        if (!this.checked && !this.disabled) {
+            this.checked = true;
+        }
+    }
+}
+AfConnectRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectRadioButtonComponent, deps: [{ token: AfConnectRadioGroupComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AfConnectRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectRadioButtonComponent, selector: "lib-af-connect-radio-button", inputs: { id: "id", value: "value", itemOrder: "itemOrder", checked: "checked", disabled: "disabled" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"field-container\"\r\n  [ngClass]=\"{ 'label-before': labelPosition === 'before', 'size-box': size === 'box', checked: checked, disabled: disabled }\"\r\n  [ngStyle]=\"{ 'flex-direction': itemOrder === 'left-to-right' ? 'row' : 'row-reverse' }\"\r\n>\r\n  <div [ngClass]=\"['radio-container', variant]\">\r\n    <input\r\n      #input\r\n      type=\"radio\"\r\n      class=\"input\"\r\n      [id]=\"inputId\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      [attr.value]=\"value\"\r\n      (change)=\"onChange($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <div class=\"touch-target\" (click)=\"onTouchTargetClick($event)\"></div>\r\n    <div class=\"radio-visualization\">\r\n      <span [class]=\"['outer-circle', variant]\"></span>\r\n      <span *ngIf=\"variant === 'default'\" class=\"inner-circle\"></span>\r\n      <span *ngIf=\"variant === 'checkbox' || variant === 'cube'\" class=\"check-mark\"></span>\r\n    </div>\r\n  </div>\r\n  <label class=\"label\" [for]=\"inputId\">\r\n    <ng-content></ng-content>\r\n  </label>\r\n</div>\r\n", styles: [".field-container{display:flex;align-items:center;gap:.5rem;justify-content:space-between}.field-container.label-before{flex-direction:row-reverse;justify-content:flex-end}.field-container.size-box{padding:1.25rem;justify-content:space-between;border-radius:5px;box-shadow:0 1px 5px var(--box-shadow-black-color);outline:1px solid transparent}.field-container.size-box.checked{outline-color:var(--primary-dark-teal-color);transition:outline-color .2s}.field-container.size-box.checked.disabled{outline-color:var(--disabled-radio-color)}.field-container.size-box .label{font-size:1rem}.radio-container{position:relative;flex:0 0 auto;box-sizing:content-box;width:22px;height:22px}.radio-container .touch-target{position:absolute;z-index:10;inset:0;cursor:pointer}.radio-visualization{width:22px;height:22px;z-index:2;inset:0}.radio-visualization .inner-circle,.radio-visualization .outer-circle{position:absolute;z-index:3;display:inline-block}.radio-visualization .inner-circle.checkbox,.radio-visualization .outer-circle.checkbox{border-radius:50%}.radio-visualization .inner-circle.cube,.radio-visualization .outer-circle.cube{border-radius:20%}.radio-visualization .outer-circle{box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;background-color:var(--neutral-button-color);transition-property:border-color,background-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.radio-visualization .inner-circle{top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:10px;height:10px;background-color:var(--primary-connected-orange-color);transition:transform .25s cubic-bezier(.4,0,.2,1)}.radio-visualization .check-mark{position:absolute;z-index:3;display:inline-block;top:5px;left:12px;width:2px;height:12px;background-color:transparent;border-radius:1px;transform:rotate(35deg)}.radio-visualization .check-mark:before{content:\"\";position:absolute;top:8px;right:3px;display:inline-block;width:2px;height:6px;border-radius:1px;background-color:transparent;transform:rotate(-80deg)}.radio-container.checkbox .outer-circle,.radio-container.cube .outer-circle{border-color:var(--primary-dark-teal-color);background-color:var(--main-white-color)}.input{-webkit-appearance:none;appearance:none;opacity:0;margin:0}.input:disabled~.touch-target{cursor:auto;pointer-events:none}.default .input:checked~.radio-visualization .outer-circle{border-color:var(--primary-connected-orange-color);background-color:var(--radio-background-color)}.default .input:checked~.radio-visualization .inner-circle{transform:translate(-50%,-50%) scale(1)}.default .input:disabled~.radio-visualization .outer-circle{background-color:var(--neutral-button-color);border-color:transparent}.default .input:disabled:checked~.radio-visualization .inner-circle{background-color:var(--disabled-radio-color)}.checkbox .input:checked~.radio-visualization .outer-circle,.cube .input:checked~.radio-visualization .outer-circle{background-color:var(--primary-dark-teal-color)}.checkbox .input:checked~.radio-visualization .check-mark,.cube .input:checked~.radio-visualization .check-mark{background-color:var(--main-white-color)}.checkbox .input:checked~.radio-visualization .check-mark:before,.cube .input:checked~.radio-visualization .check-mark:before{background-color:var(--main-white-color)}.checkbox .input:disabled~.radio-visualization .outer-circle,.cube .input:disabled~.radio-visualization .outer-circle{background-color:var(--neutral-button-color);border-color:var(--neutral-button-color)}.checkbox .input:disabled:checked~.radio-visualization .check-mark,.cube .input:disabled:checked~.radio-visualization .check-mark{background-color:var(--disabled-radio-color)}.checkbox .input:disabled:checked~.radio-visualization .check-mark:before,.cube .input:disabled:checked~.radio-visualization .check-mark:before{background-color:var(--disabled-radio-color)}.cube .input:checked~.radio-visualization .outer-circle{background-color:var(--primary-connected-orange-color);border:none}.label{cursor:inherit;font-size:.875rem;font-family:var(--standard-font-family-hero-new);color:var(--secondary-space-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-af-connect-radio-button', template: "<div\r\n  class=\"field-container\"\r\n  [ngClass]=\"{ 'label-before': labelPosition === 'before', 'size-box': size === 'box', checked: checked, disabled: disabled }\"\r\n  [ngStyle]=\"{ 'flex-direction': itemOrder === 'left-to-right' ? 'row' : 'row-reverse' }\"\r\n>\r\n  <div [ngClass]=\"['radio-container', variant]\">\r\n    <input\r\n      #input\r\n      type=\"radio\"\r\n      class=\"input\"\r\n      [id]=\"inputId\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      [attr.value]=\"value\"\r\n      (change)=\"onChange($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <div class=\"touch-target\" (click)=\"onTouchTargetClick($event)\"></div>\r\n    <div class=\"radio-visualization\">\r\n      <span [class]=\"['outer-circle', variant]\"></span>\r\n      <span *ngIf=\"variant === 'default'\" class=\"inner-circle\"></span>\r\n      <span *ngIf=\"variant === 'checkbox' || variant === 'cube'\" class=\"check-mark\"></span>\r\n    </div>\r\n  </div>\r\n  <label class=\"label\" [for]=\"inputId\">\r\n    <ng-content></ng-content>\r\n  </label>\r\n</div>\r\n", styles: [".field-container{display:flex;align-items:center;gap:.5rem;justify-content:space-between}.field-container.label-before{flex-direction:row-reverse;justify-content:flex-end}.field-container.size-box{padding:1.25rem;justify-content:space-between;border-radius:5px;box-shadow:0 1px 5px var(--box-shadow-black-color);outline:1px solid transparent}.field-container.size-box.checked{outline-color:var(--primary-dark-teal-color);transition:outline-color .2s}.field-container.size-box.checked.disabled{outline-color:var(--disabled-radio-color)}.field-container.size-box .label{font-size:1rem}.radio-container{position:relative;flex:0 0 auto;box-sizing:content-box;width:22px;height:22px}.radio-container .touch-target{position:absolute;z-index:10;inset:0;cursor:pointer}.radio-visualization{width:22px;height:22px;z-index:2;inset:0}.radio-visualization .inner-circle,.radio-visualization .outer-circle{position:absolute;z-index:3;display:inline-block}.radio-visualization .inner-circle.checkbox,.radio-visualization .outer-circle.checkbox{border-radius:50%}.radio-visualization .inner-circle.cube,.radio-visualization .outer-circle.cube{border-radius:20%}.radio-visualization .outer-circle{box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;background-color:var(--neutral-button-color);transition-property:border-color,background-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.radio-visualization .inner-circle{top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:10px;height:10px;background-color:var(--primary-connected-orange-color);transition:transform .25s cubic-bezier(.4,0,.2,1)}.radio-visualization .check-mark{position:absolute;z-index:3;display:inline-block;top:5px;left:12px;width:2px;height:12px;background-color:transparent;border-radius:1px;transform:rotate(35deg)}.radio-visualization .check-mark:before{content:\"\";position:absolute;top:8px;right:3px;display:inline-block;width:2px;height:6px;border-radius:1px;background-color:transparent;transform:rotate(-80deg)}.radio-container.checkbox .outer-circle,.radio-container.cube .outer-circle{border-color:var(--primary-dark-teal-color);background-color:var(--main-white-color)}.input{-webkit-appearance:none;appearance:none;opacity:0;margin:0}.input:disabled~.touch-target{cursor:auto;pointer-events:none}.default .input:checked~.radio-visualization .outer-circle{border-color:var(--primary-connected-orange-color);background-color:var(--radio-background-color)}.default .input:checked~.radio-visualization .inner-circle{transform:translate(-50%,-50%) scale(1)}.default .input:disabled~.radio-visualization .outer-circle{background-color:var(--neutral-button-color);border-color:transparent}.default .input:disabled:checked~.radio-visualization .inner-circle{background-color:var(--disabled-radio-color)}.checkbox .input:checked~.radio-visualization .outer-circle,.cube .input:checked~.radio-visualization .outer-circle{background-color:var(--primary-dark-teal-color)}.checkbox .input:checked~.radio-visualization .check-mark,.cube .input:checked~.radio-visualization .check-mark{background-color:var(--main-white-color)}.checkbox .input:checked~.radio-visualization .check-mark:before,.cube .input:checked~.radio-visualization .check-mark:before{background-color:var(--main-white-color)}.checkbox .input:disabled~.radio-visualization .outer-circle,.cube .input:disabled~.radio-visualization .outer-circle{background-color:var(--neutral-button-color);border-color:var(--neutral-button-color)}.checkbox .input:disabled:checked~.radio-visualization .check-mark,.cube .input:disabled:checked~.radio-visualization .check-mark{background-color:var(--disabled-radio-color)}.checkbox .input:disabled:checked~.radio-visualization .check-mark:before,.cube .input:disabled:checked~.radio-visualization .check-mark:before{background-color:var(--disabled-radio-color)}.cube .input:checked~.radio-visualization .outer-circle{background-color:var(--primary-connected-orange-color);border:none}.label{cursor:inherit;font-size:.875rem;font-family:var(--standard-font-family-hero-new);color:var(--secondary-space-color)}\n"] }]
+        }], ctorParameters: function () { return [{ type: AfConnectRadioGroupComponent }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], itemOrder: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
 
+var UserType;
+(function (UserType) {
+    UserType["Retail"] = "retail";
+    UserType["Institutional"] = "institutional";
+})(UserType || (UserType = {}));
 class AfConnectProfileDropdown {
     constructor(elementRef) {
         this.elementRef = elementRef;
         this.username = '';
+        this.userType = UserType.Institutional;
         this.callMeBack = new EventEmitter();
         this.contactAdviser = new EventEmitter();
         this.resetPassword = new EventEmitter();
         this.logout = new EventEmitter();
+        this.switchUserType = new EventEmitter();
         this.showMenu = false;
+        this.USER_TYPE = UserType;
     }
     show(e) {
         this.showMenu = !this.showMenu;
     }
     click(event) {
-        const isInsideClick = this.elementRef.nativeElement.contains(event.target);
-        this.showMenu = isInsideClick ? this.showMenu : false;
+        const iconClick = this.elementRef.nativeElement.contains(event.target);
+        const clickedOnUserTypeSwitch = event.target.closest('.user-type-switch') !== null;
+        this.showMenu = iconClick ? this.showMenu : (clickedOnUserTypeSwitch || false);
+    }
+    select(value) {
+        this.userType = value;
+        this.switchUserType.emit(value);
     }
 }
 AfConnectProfileDropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectProfileDropdown, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AfConnectProfileDropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectProfileDropdown, selector: "lib-af-connect-profile-dropdown", inputs: { username: "username" }, outputs: { callMeBack: "callMeBack", contactAdviser: "contactAdviser", resetPassword: "resetPassword", logout: "logout" }, host: { listeners: { "click": "show($event)", "document:click": "click($event)" } }, ngImport: i0, template: "<span class=\"logo-content\">{{ username | getInitials }}</span>\r\n\r\n<ng-container *ngIf=\"showMenu\">\r\n    <div class=\"dropdown-content\">\r\n        <div (click)=\"callMeBack.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\r\n                <g id=\"call\" transform=\"translate(0 0)\">\r\n                    <path id=\"phone-1\" d=\"M19.976,17.549l-2.588-2.156a.694.694,0,0,0-.7-.037l-1.438.958a.91.91,0,0,1-.509.153,5.983,5.983,0,0,1-1.28-.18,7.724,7.724,0,0,1-5.754-5.752,5.977,5.977,0,0,1-.18-1.28.909.909,0,0,1,.153-.509l.959-1.437a.681.681,0,0,0-.037-.7L6.444,4.022a.427.427,0,0,0-.73,0L4.285,5.77a2.549,2.549,0,0,0-.4,2.035.909.909,0,0,1,.027.105,4.671,4.671,0,0,0,.142.5,11.685,11.685,0,0,0,.654,1.563,20.775,20.775,0,0,0,3.973,5.332A20.76,20.76,0,0,0,14.02,19.28a11.693,11.693,0,0,0,1.563.654,4.823,4.823,0,0,0,.5.142.909.909,0,0,1,.126.033,2.492,2.492,0,0,0,2.014-.4l1.747-1.429A.426.426,0,0,0,19.976,17.549Zm-4.3-3.706A2.5,2.5,0,0,1,18.552,14l2.589,2.156a2.235,2.235,0,0,1-.015,3.534l-1.747,1.428a4.29,4.29,0,0,1-3.695.735q-.338-.077-.667-.188a13.5,13.5,0,0,1-1.809-.755A22.583,22.583,0,0,1,7.4,16.594a22.579,22.579,0,0,1-4.314-5.806,13.488,13.488,0,0,1-.755-1.809A6.833,6.833,0,0,1,2.14,8.3a4.343,4.343,0,0,1,.738-3.683L4.307,2.873a2.238,2.238,0,0,1,3.535-.015L10,5.445a2.485,2.485,0,0,1,.153,2.871L9.366,9.494a5.374,5.374,0,0,0,.11.62,5.948,5.948,0,0,0,.922,2.052,5.868,5.868,0,0,0,1.43,1.43,5.952,5.952,0,0,0,2.053.921,5.277,5.277,0,0,0,.62.11l1.179-.785Z\" transform=\"translate(-2 -2)\" fill=\"#ef4f1f\"/>\r\n                </g>\r\n            </svg>\r\n            <span>Call me back</span>\r\n        </div>\r\n        <div (click)=\"contactAdviser.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21.5\" height=\"17.864\" viewBox=\"0 0 21.5 17.864\">\r\n                <g id=\"Icons_UI_Contacts_Colour_\" data-name=\"Icons / UI / Contacts / Colour  \" transform=\"translate(0.75 0.75)\">\r\n                    <rect id=\"Rectangle\" width=\"20\" height=\"16.364\" rx=\"3\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                    <path id=\"Line_3\" data-name=\"Line 3\" d=\"M.55.563l8.591,7.67\" transform=\"translate(0.859 0.858)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                    <path id=\"Line_3-2\" data-name=\"Line 3\" d=\"M-1.409.563-10,8.233\" transform=\"translate(20 0.858)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                </g>\r\n            </svg>\r\n            <span>Contact adviser</span>\r\n        </div>\r\n        <div (click)=\"resetPassword.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"20.004\" viewBox=\"0 0 22 20.004\">\r\n                <path id=\"Shape\" d=\"M12.522,20A9.882,9.882,0,0,1,2.484,10H.544a.552.552,0,0,1-.379-.944l3.024-3.1a.528.528,0,0,1,.77,0l3.024,3.1a.557.557,0,0,1-.39.944H4.652a7.679,7.679,0,0,0,7.7,7.778,7.782,7.782,0,0,0,7.48-7.667A7.692,7.692,0,0,0,12.24,2.222,7.481,7.481,0,0,0,8.511,3.233a1.035,1.035,0,0,1-1.279-.2,1.125,1.125,0,0,1,.217-1.744A9.617,9.617,0,0,1,12.24,0,9.9,9.9,0,0,1,22,10.289,10,10,0,0,1,12.522,20Z\" transform=\"translate(22 20.004) rotate(180)\" fill=\"#f15a22\"/>\r\n            </svg>\r\n            <span>Reset password</span>\r\n        </div>\r\n        <div (click)=\"logout.emit()\">\r\n            <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\r\n                <rect id=\"bg\" width=\"20\" height=\"20\" fill=\"none\"/>\r\n                <path id=\"path\" d=\"M9.21,9.273l2.758-2.758A.727.727,0,1,0,10.94,5.486l-4,4a.727.727,0,0,0,0,1.029l4,4a.727.727,0,1,0,1.029-1.029L9.21,10.727h8.066a.727.727,0,0,0,0-1.455Zm1.517-5.818a.727.727,0,1,0,0-1.455H3.821A1.82,1.82,0,0,0,2,3.821V16.179A1.821,1.821,0,0,0,3.821,18h6.906a.727.727,0,1,0,0-1.455H3.821a.366.366,0,0,1-.367-.366V3.821a.366.366,0,0,1,.367-.366Z\" transform=\"translate(-0.099)\" fill=\"#7f8991\"/>\r\n            </svg>\r\n            <span>Log Out</span>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{width:3rem;height:3rem;background:orange;display:flex;place-items:center;place-content:center;border:3px white solid;border-radius:50%;filter:drop-shadow(3px 3px 10px rgba(0,0,0,.0784313725));cursor:pointer;z-index:999}@media (max-width: 768px){:host{width:30px;height:30px}}.logo-content{color:#fff;font-family:Hero New ExtraBold;font-size:23px}@media (max-width: 768px){.logo-content{font-size:12px}}.dropdown-content{position:absolute;height:-moz-fit-content;height:fit-content;right:0;top:3.5rem;width:194px;font-size:12px;background:white;display:flex;flex-direction:column;align-items:center}.dropdown-content div:nth-child(-n+2){display:none}.dropdown-content div:nth-child(4){color:var(--red-test)}@media (max-width: 768px){.dropdown-content{top:47px}.dropdown-content div:nth-child(-n+1){display:none}.dropdown-content div:nth-child(2){display:flex}}.dropdown-content div{display:flex;align-items:center;width:100%;height:3rem;gap:1rem;border-bottom:1px solid rgba(120,132,158,.0784313725)}.dropdown-content div svg{width:20px;height:20px;padding-left:1rem}.dropdown-content div:hover{background-color:#0000000a}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: GetinItialsPipe, name: "getInitials" }] });
+AfConnectProfileDropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectProfileDropdown, selector: "lib-af-connect-profile-dropdown", inputs: { username: "username", userType: "userType" }, outputs: { callMeBack: "callMeBack", contactAdviser: "contactAdviser", resetPassword: "resetPassword", logout: "logout", switchUserType: "switchUserType" }, host: { listeners: { "click": "show($event)", "document:click": "click($event)" } }, ngImport: i0, template: "<span [class]=\"['logo-content', userType === USER_TYPE.Retail ? 'blue' : 'orange']\">\r\n    <ng-container *ngTemplateOutlet=\"userType === USER_TYPE.Retail ? retail : institutional\"></ng-container>\r\n</span>\r\n\r\n<ng-container *ngIf=\"showMenu\">\r\n    <div class=\"dropdown-content\">\r\n        <div (click)=\"callMeBack.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\r\n                <g id=\"call\" transform=\"translate(0 0)\">\r\n                    <path id=\"phone-1\" d=\"M19.976,17.549l-2.588-2.156a.694.694,0,0,0-.7-.037l-1.438.958a.91.91,0,0,1-.509.153,5.983,5.983,0,0,1-1.28-.18,7.724,7.724,0,0,1-5.754-5.752,5.977,5.977,0,0,1-.18-1.28.909.909,0,0,1,.153-.509l.959-1.437a.681.681,0,0,0-.037-.7L6.444,4.022a.427.427,0,0,0-.73,0L4.285,5.77a2.549,2.549,0,0,0-.4,2.035.909.909,0,0,1,.027.105,4.671,4.671,0,0,0,.142.5,11.685,11.685,0,0,0,.654,1.563,20.775,20.775,0,0,0,3.973,5.332A20.76,20.76,0,0,0,14.02,19.28a11.693,11.693,0,0,0,1.563.654,4.823,4.823,0,0,0,.5.142.909.909,0,0,1,.126.033,2.492,2.492,0,0,0,2.014-.4l1.747-1.429A.426.426,0,0,0,19.976,17.549Zm-4.3-3.706A2.5,2.5,0,0,1,18.552,14l2.589,2.156a2.235,2.235,0,0,1-.015,3.534l-1.747,1.428a4.29,4.29,0,0,1-3.695.735q-.338-.077-.667-.188a13.5,13.5,0,0,1-1.809-.755A22.583,22.583,0,0,1,7.4,16.594a22.579,22.579,0,0,1-4.314-5.806,13.488,13.488,0,0,1-.755-1.809A6.833,6.833,0,0,1,2.14,8.3a4.343,4.343,0,0,1,.738-3.683L4.307,2.873a2.238,2.238,0,0,1,3.535-.015L10,5.445a2.485,2.485,0,0,1,.153,2.871L9.366,9.494a5.374,5.374,0,0,0,.11.62,5.948,5.948,0,0,0,.922,2.052,5.868,5.868,0,0,0,1.43,1.43,5.952,5.952,0,0,0,2.053.921,5.277,5.277,0,0,0,.62.11l1.179-.785Z\" transform=\"translate(-2 -2)\" fill=\"#ef4f1f\"/>\r\n                </g>\r\n            </svg>\r\n            <span>Call me back</span>\r\n        </div>\r\n        <div (click)=\"contactAdviser.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21.5\" height=\"17.864\" viewBox=\"0 0 21.5 17.864\">\r\n                <g id=\"Icons_UI_Contacts_Colour_\" data-name=\"Icons / UI / Contacts / Colour  \" transform=\"translate(0.75 0.75)\">\r\n                    <rect id=\"Rectangle\" width=\"20\" height=\"16.364\" rx=\"3\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                    <path id=\"Line_3\" data-name=\"Line 3\" d=\"M.55.563l8.591,7.67\" transform=\"translate(0.859 0.858)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                    <path id=\"Line_3-2\" data-name=\"Line 3\" d=\"M-1.409.563-10,8.233\" transform=\"translate(20 0.858)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                </g>\r\n            </svg>\r\n            <span>Contact adviser</span>\r\n        </div>\r\n        <div class=\"user-type-switch user-type-switch\">\r\n            <div class=\"user-type-switch__btn-container\">\r\n                <lib-af-connect-radio-group label=\"View as\" variant=\"checkbox\" direction=\"column\" (valueChange)=\"select($event)\">\r\n                    <div\r\n                        [class]=\"['user-type-switch__option', userType === USER_TYPE.Institutional && 'boxShadow']\"\r\n                        (click)=\"select(USER_TYPE.Retail)\"\r\n                    >\r\n                        <div class=\"logo blue\">\r\n                            <ng-container *ngTemplateOutlet=\"retail\"></ng-container>\r\n                        </div>\r\n                        <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"USER_TYPE.Retail\" [checked]=\"userType === USER_TYPE.Retail\" itemOrder=\"right-to-left\">\r\n                            <span>Individual/Retail</span>\r\n                        </lib-af-connect-radio-button>\r\n                    </div>\r\n                    <div\r\n                        [class]=\"['user-type-switch__option', userType === USER_TYPE.Institutional && 'boxShadow']\"\r\n                        (click)=\"select(USER_TYPE.Institutional)\"\r\n                    >\r\n                        <div class=\"logo orange\">\r\n                            <ng-container *ngTemplateOutlet=\"institutional\"></ng-container>\r\n                        </div>\r\n                        <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"USER_TYPE.Institutional\" [checked]=\"userType === USER_TYPE.Institutional\" itemOrder=\"right-to-left\">\r\n                            <span>Employee benefits</span>\r\n                        </lib-af-connect-radio-button>\r\n                    </div>\r\n                </lib-af-connect-radio-group>\r\n            </div>\r\n        </div>\r\n        <div (click)=\"resetPassword.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"20.004\" viewBox=\"0 0 22 20.004\">\r\n                <path id=\"Shape\" d=\"M12.522,20A9.882,9.882,0,0,1,2.484,10H.544a.552.552,0,0,1-.379-.944l3.024-3.1a.528.528,0,0,1,.77,0l3.024,3.1a.557.557,0,0,1-.39.944H4.652a7.679,7.679,0,0,0,7.7,7.778,7.782,7.782,0,0,0,7.48-7.667A7.692,7.692,0,0,0,12.24,2.222,7.481,7.481,0,0,0,8.511,3.233a1.035,1.035,0,0,1-1.279-.2,1.125,1.125,0,0,1,.217-1.744A9.617,9.617,0,0,1,12.24,0,9.9,9.9,0,0,1,22,10.289,10,10,0,0,1,12.522,20Z\" transform=\"translate(22 20.004) rotate(180)\" fill=\"#f15a22\"/>\r\n            </svg>\r\n            <span>Reset password</span>\r\n        </div>\r\n        <div (click)=\"logout.emit()\">\r\n            <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\r\n                <rect id=\"bg\" width=\"20\" height=\"20\" fill=\"none\"/>\r\n                <path id=\"path\" d=\"M9.21,9.273l2.758-2.758A.727.727,0,1,0,10.94,5.486l-4,4a.727.727,0,0,0,0,1.029l4,4a.727.727,0,1,0,1.029-1.029L9.21,10.727h8.066a.727.727,0,0,0,0-1.455Zm1.517-5.818a.727.727,0,1,0,0-1.455H3.821A1.82,1.82,0,0,0,2,3.821V16.179A1.821,1.821,0,0,0,3.821,18h6.906a.727.727,0,1,0,0-1.455H3.821a.366.366,0,0,1-.367-.366V3.821a.366.366,0,0,1,.367-.366Z\" transform=\"translate(-0.099)\" fill=\"#7f8991\"/>\r\n            </svg>\r\n            <span>Log Out</span>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-template #retail>\r\n    <svg id=\"Group\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12.837\" height=\"13.693\" viewBox=\"0 0 12.837 13.693\">\r\n        <path id=\"Oval\" d=\"M2.785-1A3.785,3.785,0,1,1-1,2.785,3.79,3.79,0,0,1,2.785-1Zm0,6.583a2.8,2.8,0,1,0-2.8-2.8A2.8,2.8,0,0,0,2.785,5.583Z\" transform=\"translate(3.633 1)\" fill=\"#fff\"/>\r\n        <path id=\"Rectangle\" d=\"M7.393,4.135A.494.494,0,0,1,6.9,3.641,3.712,3.712,0,0,0,3.14-.013H-.506A.494.494,0,0,1-1-.506.494.494,0,0,1-.506-1H3.14A4.7,4.7,0,0,1,7.887,3.641.494.494,0,0,1,7.393,4.135Z\" transform=\"translate(4.95 9.558)\" fill=\"#fff\"/>\r\n        <path id=\"Rectangle-2\" data-name=\"Rectangle\" d=\"M-12.506,4.135A.494.494,0,0,1-13,3.641,4.7,4.7,0,0,1-8.253-1h3.646a.494.494,0,0,1,.494.494.494.494,0,0,1-.494.494H-8.253a3.712,3.712,0,0,0-3.76,3.654A.494.494,0,0,1-12.506,4.135Z\" transform=\"translate(13 9.558)\" fill=\"#fff\"/>\r\n    </svg>\r\n</ng-template>\r\n\r\n<ng-template #institutional>\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"15.384\" height=\"12.488\" viewBox=\"0 0 15.384 12.488\">\r\n        <defs>\r\n            <clipPath id=\"clip-path\">\r\n            <rect id=\"Rectangle_1424\" data-name=\"Rectangle 1424\" width=\"15.383\" height=\"12.489\" transform=\"translate(0 0)\" fill=\"none\" stroke=\"#707070\" stroke-width=\"1\"/>\r\n            </clipPath>\r\n        </defs>\r\n        <g id=\"Group_10298\" data-name=\"Group 10298\" transform=\"translate(-0.952 -0.773)\">\r\n            <g id=\"Group_10297\" data-name=\"Group 10297\" transform=\"translate(0.953 0.773)\" clip-path=\"url(#clip-path)\">\r\n                <path id=\"Path_6080\" data-name=\"Path 6080\" d=\"M29.386,3.03a.346.346,0,0,1-.346-.346V1.32a.629.629,0,0,0-.628-.629H23.274a.629.629,0,0,0-.628.629V2.684a.346.346,0,1,1-.693,0V1.32A1.323,1.323,0,0,1,23.274,0h5.137A1.323,1.323,0,0,1,29.732,1.32V2.684A.346.346,0,0,1,29.386,3.03Z\" transform=\"translate(-18.151 0.001)\" fill=\"#fff\"/>\r\n                <path id=\"Rectangle_1423\" data-name=\"Rectangle 1423\" d=\"M-.933-2h13.25A1.068,1.068,0,0,1,13.384-.933V7.084a1.068,1.068,0,0,1-1.067,1.067H-.933A1.068,1.068,0,0,1-2,7.084V-.933A1.068,1.068,0,0,1-.933-2Zm13.25,9.458a.374.374,0,0,0,.374-.374V-.933a.374.374,0,0,0-.374-.374H-.933a.374.374,0,0,0-.374.374V7.084a.374.374,0,0,0,.374.374Z\" transform=\"translate(2 4.338)\" fill=\"#fff\"/>\r\n                <path id=\"Line_324\" data-name=\"Line 324\" d=\"M12.712-1.307H-1.654A.346.346,0,0,1-2-1.654.346.346,0,0,1-1.654-2H12.712a.346.346,0,0,1,.346.346A.346.346,0,0,1,12.712-1.307Z\" transform=\"translate(2.037 8.087)\" fill=\"#fff\"/>\r\n                <path id=\"Line_325\" data-name=\"Line 325\" d=\"M-1.654.223A.346.346,0,0,1-2-.124v-1.53A.346.346,0,0,1-1.654-2a.346.346,0,0,1,.346.346v1.53A.346.346,0,0,1-1.654.223Z\" transform=\"translate(12.888 7.318)\" fill=\"#fff\"/>\r\n                <path id=\"Line_326\" data-name=\"Line 326\" d=\"M-1.654.223A.346.346,0,0,1-2-.124v-1.53A.346.346,0,0,1-1.654-2a.346.346,0,0,1,.346.346v1.53A.346.346,0,0,1-1.654.223Z\" transform=\"translate(5.802 7.318)\" fill=\"#fff\"/>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n", styles: [".logo-cicrcle,.dropdown-content .user-type-switch__option>.logo,.logo-content,:host{display:flex;place-items:center;place-content:center;border-radius:50%}:host{height:3rem;filter:drop-shadow(3px 3px 10px rgba(0,0,0,.0784313725));z-index:999;box-shadow:3px 3px 10px #00000014;border:3px solid #FFFFFF;cursor:pointer}@media (max-width: 768px){:host{width:30px;height:30px}}.logo-content{width:3rem;height:3rem;color:#fff;font-family:Hero New ExtraBold;font-size:2rem}.logo-content>svg{width:1.5rem;height:1.5rem}@media (max-width: 768px){.logo-content{width:30px;height:30px;font-size:18px}.logo-content>svg{width:1rem;height:1rem}}.dropdown-content{position:absolute;height:-moz-fit-content;height:fit-content;right:0;top:3.5rem;font-size:12px;background:white;display:flex;flex-direction:column;align-items:center}.dropdown-content>div:not(.user-type-switch):nth-child(-n+2){display:none}.dropdown-content div:nth-child(4){color:var(--red-test)}@media (max-width: 768px){.dropdown-content{top:47px}.dropdown-content>div:not(.user-type-switch):nth-child(-n+1){display:none}.dropdown-content div:nth-child(2){display:flex}}.dropdown-content div{display:flex;align-items:center;width:100%;height:3rem;gap:1rem;border-bottom:1px solid rgba(120,132,158,.0784313725)}.dropdown-content div svg{width:20px;height:20px;padding-left:1rem}.dropdown-content>div:not(.user-type-switch):hover{background-color:#0000000a}.dropdown-content .user-type-switch{height:100%;cursor:default;border-bottom:none}.dropdown-content .user-type-switch__btn-container{display:block!important;width:100%;width:241px;height:166px;background:#FAFBFC;border:1px solid #F3F3F3;border-radius:5pt;margin:1rem}.dropdown-content .user-type-switch__option{height:42px;border-bottom:none;gap:.3rem;padding:0 .75rem;background-color:#fff;box-sizing:border-box;border-radius:3rem;cursor:pointer}.dropdown-content .user-type-switch__option>.logo{height:23px;width:27px;flex:0 1 auto;border:1px solid #FFFFFF;box-shadow:1px 3px 10px #00000014}.dropdown-content .user-type-switch__option>.logo>svg{width:auto;height:auto;padding:0}.dropdown-content .user-type-switch__option>.logo__img{width:22px;height:.9rem}.dropdown-content lib-af-connect-radio-group{gap:.75rem;padding:1rem}.dropdown-content lib-af-connect-radio-button{width:100%}.blue{background:#2CC1DA}.orange{background:#F69521}.boxShadow{box-shadow:3px 3px 6px #00000008}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AfConnectRadioButtonComponent, selector: "lib-af-connect-radio-button", inputs: ["id", "value", "itemOrder", "checked", "disabled"] }, { kind: "component", type: AfConnectRadioGroupComponent, selector: "lib-af-connect-radio-group", inputs: ["label", "direction", "withAsterisk", "variant", "labelPosition", "size", "value", "selected", "disabled"], outputs: ["valueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectProfileDropdown, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-profile-dropdown', template: "<span class=\"logo-content\">{{ username | getInitials }}</span>\r\n\r\n<ng-container *ngIf=\"showMenu\">\r\n    <div class=\"dropdown-content\">\r\n        <div (click)=\"callMeBack.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\r\n                <g id=\"call\" transform=\"translate(0 0)\">\r\n                    <path id=\"phone-1\" d=\"M19.976,17.549l-2.588-2.156a.694.694,0,0,0-.7-.037l-1.438.958a.91.91,0,0,1-.509.153,5.983,5.983,0,0,1-1.28-.18,7.724,7.724,0,0,1-5.754-5.752,5.977,5.977,0,0,1-.18-1.28.909.909,0,0,1,.153-.509l.959-1.437a.681.681,0,0,0-.037-.7L6.444,4.022a.427.427,0,0,0-.73,0L4.285,5.77a2.549,2.549,0,0,0-.4,2.035.909.909,0,0,1,.027.105,4.671,4.671,0,0,0,.142.5,11.685,11.685,0,0,0,.654,1.563,20.775,20.775,0,0,0,3.973,5.332A20.76,20.76,0,0,0,14.02,19.28a11.693,11.693,0,0,0,1.563.654,4.823,4.823,0,0,0,.5.142.909.909,0,0,1,.126.033,2.492,2.492,0,0,0,2.014-.4l1.747-1.429A.426.426,0,0,0,19.976,17.549Zm-4.3-3.706A2.5,2.5,0,0,1,18.552,14l2.589,2.156a2.235,2.235,0,0,1-.015,3.534l-1.747,1.428a4.29,4.29,0,0,1-3.695.735q-.338-.077-.667-.188a13.5,13.5,0,0,1-1.809-.755A22.583,22.583,0,0,1,7.4,16.594a22.579,22.579,0,0,1-4.314-5.806,13.488,13.488,0,0,1-.755-1.809A6.833,6.833,0,0,1,2.14,8.3a4.343,4.343,0,0,1,.738-3.683L4.307,2.873a2.238,2.238,0,0,1,3.535-.015L10,5.445a2.485,2.485,0,0,1,.153,2.871L9.366,9.494a5.374,5.374,0,0,0,.11.62,5.948,5.948,0,0,0,.922,2.052,5.868,5.868,0,0,0,1.43,1.43,5.952,5.952,0,0,0,2.053.921,5.277,5.277,0,0,0,.62.11l1.179-.785Z\" transform=\"translate(-2 -2)\" fill=\"#ef4f1f\"/>\r\n                </g>\r\n            </svg>\r\n            <span>Call me back</span>\r\n        </div>\r\n        <div (click)=\"contactAdviser.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21.5\" height=\"17.864\" viewBox=\"0 0 21.5 17.864\">\r\n                <g id=\"Icons_UI_Contacts_Colour_\" data-name=\"Icons / UI / Contacts / Colour  \" transform=\"translate(0.75 0.75)\">\r\n                    <rect id=\"Rectangle\" width=\"20\" height=\"16.364\" rx=\"3\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                    <path id=\"Line_3\" data-name=\"Line 3\" d=\"M.55.563l8.591,7.67\" transform=\"translate(0.859 0.858)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                    <path id=\"Line_3-2\" data-name=\"Line 3\" d=\"M-1.409.563-10,8.233\" transform=\"translate(20 0.858)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                </g>\r\n            </svg>\r\n            <span>Contact adviser</span>\r\n        </div>\r\n        <div (click)=\"resetPassword.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"20.004\" viewBox=\"0 0 22 20.004\">\r\n                <path id=\"Shape\" d=\"M12.522,20A9.882,9.882,0,0,1,2.484,10H.544a.552.552,0,0,1-.379-.944l3.024-3.1a.528.528,0,0,1,.77,0l3.024,3.1a.557.557,0,0,1-.39.944H4.652a7.679,7.679,0,0,0,7.7,7.778,7.782,7.782,0,0,0,7.48-7.667A7.692,7.692,0,0,0,12.24,2.222,7.481,7.481,0,0,0,8.511,3.233a1.035,1.035,0,0,1-1.279-.2,1.125,1.125,0,0,1,.217-1.744A9.617,9.617,0,0,1,12.24,0,9.9,9.9,0,0,1,22,10.289,10,10,0,0,1,12.522,20Z\" transform=\"translate(22 20.004) rotate(180)\" fill=\"#f15a22\"/>\r\n            </svg>\r\n            <span>Reset password</span>\r\n        </div>\r\n        <div (click)=\"logout.emit()\">\r\n            <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\r\n                <rect id=\"bg\" width=\"20\" height=\"20\" fill=\"none\"/>\r\n                <path id=\"path\" d=\"M9.21,9.273l2.758-2.758A.727.727,0,1,0,10.94,5.486l-4,4a.727.727,0,0,0,0,1.029l4,4a.727.727,0,1,0,1.029-1.029L9.21,10.727h8.066a.727.727,0,0,0,0-1.455Zm1.517-5.818a.727.727,0,1,0,0-1.455H3.821A1.82,1.82,0,0,0,2,3.821V16.179A1.821,1.821,0,0,0,3.821,18h6.906a.727.727,0,1,0,0-1.455H3.821a.366.366,0,0,1-.367-.366V3.821a.366.366,0,0,1,.367-.366Z\" transform=\"translate(-0.099)\" fill=\"#7f8991\"/>\r\n            </svg>\r\n            <span>Log Out</span>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{width:3rem;height:3rem;background:orange;display:flex;place-items:center;place-content:center;border:3px white solid;border-radius:50%;filter:drop-shadow(3px 3px 10px rgba(0,0,0,.0784313725));cursor:pointer;z-index:999}@media (max-width: 768px){:host{width:30px;height:30px}}.logo-content{color:#fff;font-family:Hero New ExtraBold;font-size:23px}@media (max-width: 768px){.logo-content{font-size:12px}}.dropdown-content{position:absolute;height:-moz-fit-content;height:fit-content;right:0;top:3.5rem;width:194px;font-size:12px;background:white;display:flex;flex-direction:column;align-items:center}.dropdown-content div:nth-child(-n+2){display:none}.dropdown-content div:nth-child(4){color:var(--red-test)}@media (max-width: 768px){.dropdown-content{top:47px}.dropdown-content div:nth-child(-n+1){display:none}.dropdown-content div:nth-child(2){display:flex}}.dropdown-content div{display:flex;align-items:center;width:100%;height:3rem;gap:1rem;border-bottom:1px solid rgba(120,132,158,.0784313725)}.dropdown-content div svg{width:20px;height:20px;padding-left:1rem}.dropdown-content div:hover{background-color:#0000000a}\n"] }]
+            args: [{ selector: 'lib-af-connect-profile-dropdown', template: "<span [class]=\"['logo-content', userType === USER_TYPE.Retail ? 'blue' : 'orange']\">\r\n    <ng-container *ngTemplateOutlet=\"userType === USER_TYPE.Retail ? retail : institutional\"></ng-container>\r\n</span>\r\n\r\n<ng-container *ngIf=\"showMenu\">\r\n    <div class=\"dropdown-content\">\r\n        <div (click)=\"callMeBack.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\r\n                <g id=\"call\" transform=\"translate(0 0)\">\r\n                    <path id=\"phone-1\" d=\"M19.976,17.549l-2.588-2.156a.694.694,0,0,0-.7-.037l-1.438.958a.91.91,0,0,1-.509.153,5.983,5.983,0,0,1-1.28-.18,7.724,7.724,0,0,1-5.754-5.752,5.977,5.977,0,0,1-.18-1.28.909.909,0,0,1,.153-.509l.959-1.437a.681.681,0,0,0-.037-.7L6.444,4.022a.427.427,0,0,0-.73,0L4.285,5.77a2.549,2.549,0,0,0-.4,2.035.909.909,0,0,1,.027.105,4.671,4.671,0,0,0,.142.5,11.685,11.685,0,0,0,.654,1.563,20.775,20.775,0,0,0,3.973,5.332A20.76,20.76,0,0,0,14.02,19.28a11.693,11.693,0,0,0,1.563.654,4.823,4.823,0,0,0,.5.142.909.909,0,0,1,.126.033,2.492,2.492,0,0,0,2.014-.4l1.747-1.429A.426.426,0,0,0,19.976,17.549Zm-4.3-3.706A2.5,2.5,0,0,1,18.552,14l2.589,2.156a2.235,2.235,0,0,1-.015,3.534l-1.747,1.428a4.29,4.29,0,0,1-3.695.735q-.338-.077-.667-.188a13.5,13.5,0,0,1-1.809-.755A22.583,22.583,0,0,1,7.4,16.594a22.579,22.579,0,0,1-4.314-5.806,13.488,13.488,0,0,1-.755-1.809A6.833,6.833,0,0,1,2.14,8.3a4.343,4.343,0,0,1,.738-3.683L4.307,2.873a2.238,2.238,0,0,1,3.535-.015L10,5.445a2.485,2.485,0,0,1,.153,2.871L9.366,9.494a5.374,5.374,0,0,0,.11.62,5.948,5.948,0,0,0,.922,2.052,5.868,5.868,0,0,0,1.43,1.43,5.952,5.952,0,0,0,2.053.921,5.277,5.277,0,0,0,.62.11l1.179-.785Z\" transform=\"translate(-2 -2)\" fill=\"#ef4f1f\"/>\r\n                </g>\r\n            </svg>\r\n            <span>Call me back</span>\r\n        </div>\r\n        <div (click)=\"contactAdviser.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21.5\" height=\"17.864\" viewBox=\"0 0 21.5 17.864\">\r\n                <g id=\"Icons_UI_Contacts_Colour_\" data-name=\"Icons / UI / Contacts / Colour  \" transform=\"translate(0.75 0.75)\">\r\n                    <rect id=\"Rectangle\" width=\"20\" height=\"16.364\" rx=\"3\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                    <path id=\"Line_3\" data-name=\"Line 3\" d=\"M.55.563l8.591,7.67\" transform=\"translate(0.859 0.858)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                    <path id=\"Line_3-2\" data-name=\"Line 3\" d=\"M-1.409.563-10,8.233\" transform=\"translate(20 0.858)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1.5\"/>\r\n                </g>\r\n            </svg>\r\n            <span>Contact adviser</span>\r\n        </div>\r\n        <div class=\"user-type-switch user-type-switch\">\r\n            <div class=\"user-type-switch__btn-container\">\r\n                <lib-af-connect-radio-group label=\"View as\" variant=\"checkbox\" direction=\"column\" (valueChange)=\"select($event)\">\r\n                    <div\r\n                        [class]=\"['user-type-switch__option', userType === USER_TYPE.Institutional && 'boxShadow']\"\r\n                        (click)=\"select(USER_TYPE.Retail)\"\r\n                    >\r\n                        <div class=\"logo blue\">\r\n                            <ng-container *ngTemplateOutlet=\"retail\"></ng-container>\r\n                        </div>\r\n                        <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"USER_TYPE.Retail\" [checked]=\"userType === USER_TYPE.Retail\" itemOrder=\"right-to-left\">\r\n                            <span>Individual/Retail</span>\r\n                        </lib-af-connect-radio-button>\r\n                    </div>\r\n                    <div\r\n                        [class]=\"['user-type-switch__option', userType === USER_TYPE.Institutional && 'boxShadow']\"\r\n                        (click)=\"select(USER_TYPE.Institutional)\"\r\n                    >\r\n                        <div class=\"logo orange\">\r\n                            <ng-container *ngTemplateOutlet=\"institutional\"></ng-container>\r\n                        </div>\r\n                        <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"USER_TYPE.Institutional\" [checked]=\"userType === USER_TYPE.Institutional\" itemOrder=\"right-to-left\">\r\n                            <span>Employee benefits</span>\r\n                        </lib-af-connect-radio-button>\r\n                    </div>\r\n                </lib-af-connect-radio-group>\r\n            </div>\r\n        </div>\r\n        <div (click)=\"resetPassword.emit()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"20.004\" viewBox=\"0 0 22 20.004\">\r\n                <path id=\"Shape\" d=\"M12.522,20A9.882,9.882,0,0,1,2.484,10H.544a.552.552,0,0,1-.379-.944l3.024-3.1a.528.528,0,0,1,.77,0l3.024,3.1a.557.557,0,0,1-.39.944H4.652a7.679,7.679,0,0,0,7.7,7.778,7.782,7.782,0,0,0,7.48-7.667A7.692,7.692,0,0,0,12.24,2.222,7.481,7.481,0,0,0,8.511,3.233a1.035,1.035,0,0,1-1.279-.2,1.125,1.125,0,0,1,.217-1.744A9.617,9.617,0,0,1,12.24,0,9.9,9.9,0,0,1,22,10.289,10,10,0,0,1,12.522,20Z\" transform=\"translate(22 20.004) rotate(180)\" fill=\"#f15a22\"/>\r\n            </svg>\r\n            <span>Reset password</span>\r\n        </div>\r\n        <div (click)=\"logout.emit()\">\r\n            <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\r\n                <rect id=\"bg\" width=\"20\" height=\"20\" fill=\"none\"/>\r\n                <path id=\"path\" d=\"M9.21,9.273l2.758-2.758A.727.727,0,1,0,10.94,5.486l-4,4a.727.727,0,0,0,0,1.029l4,4a.727.727,0,1,0,1.029-1.029L9.21,10.727h8.066a.727.727,0,0,0,0-1.455Zm1.517-5.818a.727.727,0,1,0,0-1.455H3.821A1.82,1.82,0,0,0,2,3.821V16.179A1.821,1.821,0,0,0,3.821,18h6.906a.727.727,0,1,0,0-1.455H3.821a.366.366,0,0,1-.367-.366V3.821a.366.366,0,0,1,.367-.366Z\" transform=\"translate(-0.099)\" fill=\"#7f8991\"/>\r\n            </svg>\r\n            <span>Log Out</span>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-template #retail>\r\n    <svg id=\"Group\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12.837\" height=\"13.693\" viewBox=\"0 0 12.837 13.693\">\r\n        <path id=\"Oval\" d=\"M2.785-1A3.785,3.785,0,1,1-1,2.785,3.79,3.79,0,0,1,2.785-1Zm0,6.583a2.8,2.8,0,1,0-2.8-2.8A2.8,2.8,0,0,0,2.785,5.583Z\" transform=\"translate(3.633 1)\" fill=\"#fff\"/>\r\n        <path id=\"Rectangle\" d=\"M7.393,4.135A.494.494,0,0,1,6.9,3.641,3.712,3.712,0,0,0,3.14-.013H-.506A.494.494,0,0,1-1-.506.494.494,0,0,1-.506-1H3.14A4.7,4.7,0,0,1,7.887,3.641.494.494,0,0,1,7.393,4.135Z\" transform=\"translate(4.95 9.558)\" fill=\"#fff\"/>\r\n        <path id=\"Rectangle-2\" data-name=\"Rectangle\" d=\"M-12.506,4.135A.494.494,0,0,1-13,3.641,4.7,4.7,0,0,1-8.253-1h3.646a.494.494,0,0,1,.494.494.494.494,0,0,1-.494.494H-8.253a3.712,3.712,0,0,0-3.76,3.654A.494.494,0,0,1-12.506,4.135Z\" transform=\"translate(13 9.558)\" fill=\"#fff\"/>\r\n    </svg>\r\n</ng-template>\r\n\r\n<ng-template #institutional>\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"15.384\" height=\"12.488\" viewBox=\"0 0 15.384 12.488\">\r\n        <defs>\r\n            <clipPath id=\"clip-path\">\r\n            <rect id=\"Rectangle_1424\" data-name=\"Rectangle 1424\" width=\"15.383\" height=\"12.489\" transform=\"translate(0 0)\" fill=\"none\" stroke=\"#707070\" stroke-width=\"1\"/>\r\n            </clipPath>\r\n        </defs>\r\n        <g id=\"Group_10298\" data-name=\"Group 10298\" transform=\"translate(-0.952 -0.773)\">\r\n            <g id=\"Group_10297\" data-name=\"Group 10297\" transform=\"translate(0.953 0.773)\" clip-path=\"url(#clip-path)\">\r\n                <path id=\"Path_6080\" data-name=\"Path 6080\" d=\"M29.386,3.03a.346.346,0,0,1-.346-.346V1.32a.629.629,0,0,0-.628-.629H23.274a.629.629,0,0,0-.628.629V2.684a.346.346,0,1,1-.693,0V1.32A1.323,1.323,0,0,1,23.274,0h5.137A1.323,1.323,0,0,1,29.732,1.32V2.684A.346.346,0,0,1,29.386,3.03Z\" transform=\"translate(-18.151 0.001)\" fill=\"#fff\"/>\r\n                <path id=\"Rectangle_1423\" data-name=\"Rectangle 1423\" d=\"M-.933-2h13.25A1.068,1.068,0,0,1,13.384-.933V7.084a1.068,1.068,0,0,1-1.067,1.067H-.933A1.068,1.068,0,0,1-2,7.084V-.933A1.068,1.068,0,0,1-.933-2Zm13.25,9.458a.374.374,0,0,0,.374-.374V-.933a.374.374,0,0,0-.374-.374H-.933a.374.374,0,0,0-.374.374V7.084a.374.374,0,0,0,.374.374Z\" transform=\"translate(2 4.338)\" fill=\"#fff\"/>\r\n                <path id=\"Line_324\" data-name=\"Line 324\" d=\"M12.712-1.307H-1.654A.346.346,0,0,1-2-1.654.346.346,0,0,1-1.654-2H12.712a.346.346,0,0,1,.346.346A.346.346,0,0,1,12.712-1.307Z\" transform=\"translate(2.037 8.087)\" fill=\"#fff\"/>\r\n                <path id=\"Line_325\" data-name=\"Line 325\" d=\"M-1.654.223A.346.346,0,0,1-2-.124v-1.53A.346.346,0,0,1-1.654-2a.346.346,0,0,1,.346.346v1.53A.346.346,0,0,1-1.654.223Z\" transform=\"translate(12.888 7.318)\" fill=\"#fff\"/>\r\n                <path id=\"Line_326\" data-name=\"Line 326\" d=\"M-1.654.223A.346.346,0,0,1-2-.124v-1.53A.346.346,0,0,1-1.654-2a.346.346,0,0,1,.346.346v1.53A.346.346,0,0,1-1.654.223Z\" transform=\"translate(5.802 7.318)\" fill=\"#fff\"/>\r\n            </g>\r\n        </g>\r\n    </svg>\r\n</ng-template>\r\n", styles: [".logo-cicrcle,.dropdown-content .user-type-switch__option>.logo,.logo-content,:host{display:flex;place-items:center;place-content:center;border-radius:50%}:host{height:3rem;filter:drop-shadow(3px 3px 10px rgba(0,0,0,.0784313725));z-index:999;box-shadow:3px 3px 10px #00000014;border:3px solid #FFFFFF;cursor:pointer}@media (max-width: 768px){:host{width:30px;height:30px}}.logo-content{width:3rem;height:3rem;color:#fff;font-family:Hero New ExtraBold;font-size:2rem}.logo-content>svg{width:1.5rem;height:1.5rem}@media (max-width: 768px){.logo-content{width:30px;height:30px;font-size:18px}.logo-content>svg{width:1rem;height:1rem}}.dropdown-content{position:absolute;height:-moz-fit-content;height:fit-content;right:0;top:3.5rem;font-size:12px;background:white;display:flex;flex-direction:column;align-items:center}.dropdown-content>div:not(.user-type-switch):nth-child(-n+2){display:none}.dropdown-content div:nth-child(4){color:var(--red-test)}@media (max-width: 768px){.dropdown-content{top:47px}.dropdown-content>div:not(.user-type-switch):nth-child(-n+1){display:none}.dropdown-content div:nth-child(2){display:flex}}.dropdown-content div{display:flex;align-items:center;width:100%;height:3rem;gap:1rem;border-bottom:1px solid rgba(120,132,158,.0784313725)}.dropdown-content div svg{width:20px;height:20px;padding-left:1rem}.dropdown-content>div:not(.user-type-switch):hover{background-color:#0000000a}.dropdown-content .user-type-switch{height:100%;cursor:default;border-bottom:none}.dropdown-content .user-type-switch__btn-container{display:block!important;width:100%;width:241px;height:166px;background:#FAFBFC;border:1px solid #F3F3F3;border-radius:5pt;margin:1rem}.dropdown-content .user-type-switch__option{height:42px;border-bottom:none;gap:.3rem;padding:0 .75rem;background-color:#fff;box-sizing:border-box;border-radius:3rem;cursor:pointer}.dropdown-content .user-type-switch__option>.logo{height:23px;width:27px;flex:0 1 auto;border:1px solid #FFFFFF;box-shadow:1px 3px 10px #00000014}.dropdown-content .user-type-switch__option>.logo>svg{width:auto;height:auto;padding:0}.dropdown-content .user-type-switch__option>.logo__img{width:22px;height:.9rem}.dropdown-content lib-af-connect-radio-group{gap:.75rem;padding:1rem}.dropdown-content lib-af-connect-radio-button{width:100%}.blue{background:#2CC1DA}.orange{background:#F69521}.boxShadow{box-shadow:3px 3px 6px #00000008}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { username: [{
                 type: Input
+            }], userType: [{
+                type: Input
             }], callMeBack: [{
                 type: Output
             }], contactAdviser: [{
@@ -451,6 +656,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                 type: Output
             }], logout: [{
                 type: Output
+            }], switchUserType: [{
+                type: Output
             }], show: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -463,24 +670,31 @@ class AfConnectHeaderComponent {
     constructor() {
         this.username = '';
         this.isLogoHidden = false;
+        this.userType = UserType.Institutional;
         this.callMeBack = new EventEmitter();
         this.contactAdviser = new EventEmitter();
         this.resetPassword = new EventEmitter();
         this.logout = new EventEmitter();
+        this.switchUserType = new EventEmitter();
     }
     refresh() {
         window.location.reload();
     }
+    switch(type) {
+        this.switchUserType.emit(type);
+    }
 }
 AfConnectHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectHeaderComponent, selector: "lib-af-connect-header", inputs: { username: "username", isLogoHidden: "isLogoHidden" }, outputs: { callMeBack: "callMeBack", contactAdviser: "contactAdviser", resetPassword: "resetPassword", logout: "logout" }, ngImport: i0, template: "<svg class=\"logo\" (click)=\"refresh()\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 592.39 132.62\">\r\n    <defs>\r\n       <style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#f15b25;}.cls-3{fill:#1a808d;}</style>\r\n       <linearGradient id=\"linear-gradient\" x1=\"254.64\" y1=\"41.32\" x2=\"604.45\" y2=\"41.32\" gradientUnits=\"userSpaceOnUse\">\r\n          <stop offset=\"0\" stop-color=\"#1a808d\"/>\r\n          <stop offset=\"1\"/>\r\n       </linearGradient>\r\n    </defs>\r\n    <g id=\"Layer_2\" data-name=\"Layer 2\">\r\n       <g id=\"Layer_1-2\" data-name=\"Layer 1\">\r\n          <path class=\"cls-1\" d=\"M32.59,53.64c0-17.53,12.08-29.31,24.45-29.31a20.54,20.54,0,0,1,17.53,9.31l1.78-7.82H92V81.16H76.35l-1.78-7.82A20.53,20.53,0,0,1,57,82.64C44.67,82.64,32.59,70.86,32.59,53.64Zm41.28-.1c0-7.43-4.75-12.77-11.18-12.77C56,40.77,51.2,46.41,51.2,53.54S56,66.21,62.69,66.21C69.12,66.21,73.87,60.86,73.87,53.54ZM103.85,0h18.41V81.16H103.85ZM187.1,58.49H150.77c2.47,6.63,9,9.9,16.53,9.9,6,0,11.59-2.08,16.64-4.85V78.09a39.5,39.5,0,0,1-19.11,4.55c-20.3,0-31.68-12.27-31.68-29,0-17.43,12.27-29.31,28.21-29.31,14.46,0,26.24,9.8,26.24,28.22A35.8,35.8,0,0,1,187.1,58.49Zm-16.93-10.6c-.19-5.54-3.66-9.3-8.91-9.3-5,0-9.4,3.56-10.89,9.3Zm61.77,5,19,28.32h-20.8l-9.3-15.94h-.2l-9.31,15.94h-19.8l18.72-27.62L191.74,25.82h20.1l9.21,15.93h.19l9.21-15.93h19.8ZM264.26,41h-7.43V25.82h7.53V21.26C264.36,11,271.88.57,287.13.57a38,38,0,0,1,11.09,1.58V17.5a23.35,23.35,0,0,0-7.63-1.19c-5.34,0-8.21,1.88-8.21,6.24v3.27h14.15V41H282.67v40.2H264.26Zm38,12.48c0-17.43,13.17-29.11,29.7-29.11s29.5,11.68,29.5,29.11S348.6,82.64,332,82.64,302.27,70.76,302.27,53.44Zm40.69,0c0-8.12-5.45-12.67-11-12.67s-11.09,4.55-11.09,12.67S326.33,66.21,332,66.21,343,61.56,343,53.44Zm29-27.62h14.65l1.78,8.11h.2a16.67,16.67,0,0,1,14.85-8.71,13.89,13.89,0,0,1,4.26.5V42.84a20.69,20.69,0,0,0-4.85-.59c-6.44,0-12.48,3.37-12.48,13.46V81.16H371.93Zm62.45,7.52c3.27-5.25,10.1-9,17.13-9,12.77,0,23.86,11.39,23.86,29.21s-11.88,29.1-24.75,29.1a20.84,20.84,0,0,1-17.33-9.3l-1.68,7.82H416V.14h18.41Zm-.2,20.2c0,7.42,4.65,12.67,11.19,12.67s11.38-5.45,11.38-12.57S452,40.77,445.27,40.77C438.83,40.77,434.18,46.11,434.18,53.54Zm103.3,5H501.14c2.48,6.63,9,9.9,16.54,9.9,6,0,11.58-2.08,16.63-4.85V78.09a39.48,39.48,0,0,1-19.11,4.55c-20.29,0-31.68-12.27-31.68-29,0-17.43,12.28-29.31,28.22-29.31,14.45,0,26.23,9.8,26.23,28.22A37,37,0,0,1,537.48,58.49Zm-16.93-10.6c-.2-5.54-3.67-9.3-8.91-9.3-5.05,0-9.41,3.56-10.89,9.3Zm67.66-19.4V43.64a35.12,35.12,0,0,0-17-4.56c-4.26,0-6.63,1.19-6.63,3.27s2.67,3.27,8.51,4.65C582.27,49.18,592,52.45,592,64.23c0,11.29-8.91,18.41-24.65,18.41-8.22,0-15.15-2-19.9-4.85V61.46a31.35,31.35,0,0,0,19.11,6.43c4.85,0,7.62-1.29,7.62-3.56,0-2.58-3.46-3.37-10.4-5.35-8.61-2.37-16.83-6.24-16.83-16.43,0-10.5,8.52-18.22,23.47-18.22C576.92,24.33,583.75,25.91,588.21,28.49Z\"/>\r\n          <circle class=\"cls-2\" cx=\"10.86\" cy=\"34.87\" r=\"10.86\" transform=\"translate(-15.07 9.15) rotate(-27.94)\"/>\r\n          <circle class=\"cls-2\" cx=\"10.86\" cy=\"71.4\" r=\"10.86\" transform=\"translate(-32.19 13.41) rotate(-27.94)\"/>\r\n          <circle class=\"cls-3\" cx=\"368.84\" cy=\"117.24\" r=\"2.98\"/>\r\n          <path class=\"cls-2\" d=\"M264,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,264,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M285.22,115.78v10.43h-3.39v-9.34c0-2.42-1.1-3.56-3.19-3.56a3.34,3.34,0,0,0-3.45,3.42v9.48h-3.4V110.52h2.62l.37,2.33h.09a5.58,5.58,0,0,1,4.77-2.71C283.06,110.14,285.22,112.33,285.22,115.78Z\"/>\r\n          <path class=\"cls-2\" d=\"M299.46,111.47v3.1a7.88,7.88,0,0,0-4.71-1.52c-1.79,0-2.76.69-2.76,1.78s1.17,1.61,3.16,2.18c2.47.66,5.23,1.5,5.23,4.72,0,3-2.33,4.86-6.21,4.86a9.11,9.11,0,0,1-5.49-1.67v-3.34a7.88,7.88,0,0,0,5.38,2.13c1.92,0,3-.8,3-1.95,0-1.3-1.35-1.73-3.5-2.39-2.56-.75-4.89-1.67-4.89-4.46s2.24-4.77,5.95-4.77A8.9,8.9,0,0,1,299.46,111.47Z\"/>\r\n          <path class=\"cls-2\" d=\"M303.29,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,303.29,105.54Zm.29,5H307v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M322.53,113.1l.37-2.58h2.82v14.14c0,5.17-3.65,8-8.13,8a10.29,10.29,0,0,1-5.9-1.9V127.3a8.84,8.84,0,0,0,5.67,2.27c2.78,0,5-1.78,5-4.45v-2a6.05,6.05,0,0,1-5.17,2.81c-3.68,0-7.05-3.16-7.05-7.87s3.42-7.88,7.1-7.88A6.24,6.24,0,0,1,322.53,113.1Zm-9,5a4.48,4.48,0,1,0,8.92-.09,4.5,4.5,0,0,0-4.46-4.74A4.58,4.58,0,0,0,313.5,118.08Z\"/>\r\n          <path class=\"cls-2\" d=\"M333.23,112.27h.06a5.37,5.37,0,0,1,4.36-2.13c3.43,0,5.61,2,5.61,5.67v10.4h-3.39v-9.37c0-2.41-1-3.59-3.16-3.59a3.22,3.22,0,0,0-3.48,3.39v9.57h-3.39v-23h3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M351.15,110.52h4.34v2.87h-4.34v7c0,2.24,1.38,3.16,3.28,3.16a9.45,9.45,0,0,0,1.41-.14v2.9a10.36,10.36,0,0,1-2.1.2c-3.71,0-5.92-2.21-5.92-6v-7.13h-2.3v-2.87h2.35v-3.65h3.28Z\"/>\r\n          <path class=\"cls-2\" d=\"M380.9,118.39c0-5,3.45-8.25,7-8.25a6.17,6.17,0,0,1,5.43,3.08l.38-2.7h2.81v15.69h-2.81l-.38-2.7a6.17,6.17,0,0,1-5.43,3.08C384.35,126.59,380.9,123.34,380.9,118.39Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.51,2.12-4.51,5.11,2,5.12,4.51,5.12S393.26,121.38,393.26,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M399.81,118.36c0-5,3.39-8.22,7.07-8.22a5.94,5.94,0,0,1,5.23,2.94v-9.89h3.39v23h-2.81l-.41-2.7a6.11,6.11,0,0,1-5.37,3.08C403.23,126.59,399.81,123.39,399.81,118.36Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.48,2.12-4.48,5.11,1.92,5.12,4.48,5.12S412.17,121.38,412.17,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M417.88,110.52h3.62l3.94,12h.09l3.94-12H433l-5.72,15.69H423.6Z\"/>\r\n          <path class=\"cls-2\" d=\"M435.05,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,435.05,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M450.28,123.48a6.72,6.72,0,0,0,4.08-1.24v3.25a9,9,0,0,1-4.45,1.1,8.23,8.23,0,0,1,0-16.45,8.38,8.38,0,0,1,4.45,1.12v3.28a6.75,6.75,0,0,0-4.11-1.29,5.12,5.12,0,0,0,0,10.23Z\"/>\r\n          <path class=\"cls-2\" d=\"M471.18,119.4H459.91a5.07,5.07,0,0,0,5.32,4.37,8.23,8.23,0,0,0,5.11-1.87v3a9.54,9.54,0,0,1-5.46,1.64c-5.14,0-8.25-3.34-8.25-8.17,0-5,3.51-8.28,7.71-8.28,3.79,0,6.92,2.73,6.92,7.94A8.91,8.91,0,0,1,471.18,119.4ZM468,117.13c-.08-2.79-1.78-4.17-3.73-4.17a4.56,4.56,0,0,0-4.43,4.17Z\"/>\r\n          <path class=\"cls-2\" d=\"M497.53,105.54a2,2,0,1,1,2,1.93A1.93,1.93,0,0,1,497.53,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M526.55,115.78v10.43h-3.39v-9.83c0-2-.78-3.07-2.65-3.07a2.86,2.86,0,0,0-2.9,3v9.89h-3.39v-9.83c0-2-.78-3.07-2.65-3.07a2.91,2.91,0,0,0-2.87,3.19v9.71h-3.39V110.52h2.61l.38,2.27h.08a4.77,4.77,0,0,1,4.26-2.65,4.46,4.46,0,0,1,4.4,2.73,5,5,0,0,1,4.51-2.73C525,110.14,526.55,112.44,526.55,115.78Z\"/>\r\n          <path class=\"cls-2\" d=\"M530.59,110.52h2.82l.37,2.7a6.14,6.14,0,0,1,5.37-3.08c3.71,0,7.13,3.22,7.13,8.22s-3.36,8.23-7,8.23a6.13,6.13,0,0,1-5.26-2.94v8.6h-3.39Zm12.27,7.82c0-3-2-5.09-4.48-5.09s-4.46,2.1-4.46,5.11,1.93,5.12,4.43,5.12S542.86,121.38,542.86,118.34Z\"/>\r\n          <path class=\"cls-2\" d=\"M548.66,118.39c0-5,3.45-8.25,7-8.25a6.17,6.17,0,0,1,5.43,3.08l.38-2.7h2.81v15.69h-2.81l-.38-2.7a6.17,6.17,0,0,1-5.43,3.08C552.11,126.59,548.66,123.34,548.66,118.39Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.51,2.12-4.51,5.11,2,5.12,4.51,5.12S561,121.38,561,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M575.92,123.48a6.74,6.74,0,0,0,4.08-1.24v3.25a9,9,0,0,1-4.45,1.1,8.23,8.23,0,0,1,0-16.45,8.38,8.38,0,0,1,4.45,1.12v3.28a6.77,6.77,0,0,0-4.11-1.29,5.12,5.12,0,0,0,0,10.23Z\"/>\r\n          <path class=\"cls-2\" d=\"M587.7,110.52H592v2.87H587.7v7c0,2.24,1.38,3.16,3.28,3.16a9.45,9.45,0,0,0,1.41-.14v2.9a10.36,10.36,0,0,1-2.1.2c-3.71,0-5.92-2.21-5.92-6v-7.13h-2.3v-2.87h2.36v-3.65h3.27Z\"/>\r\n          <circle class=\"cls-3\" cx=\"483.77\" cy=\"117.24\" r=\"2.98\"/>\r\n       </g>\r\n    </g>\r\n</svg> \r\n<lib-af-connect-profile-dropdown\r\n    *ngIf=\"!isLogoHidden\"\r\n    [username]=\"username\"\r\n    (callMeBack)=\"callMeBack.emit()\"\r\n    (contactAdviser)=\"contactAdviser.emit()\"\r\n    (resetPassword)=\"resetPassword.emit()\"\r\n    (logout)=\"logout.emit()\">\r\n</lib-af-connect-profile-dropdown>\r\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;height:100px;margin:auto}@media (max-width: 768px){:host{width:auto;height:50px;padding:.5rem 1.25rem}}:host .logo{width:180px;height:40px;cursor:pointer}@media (max-width: 768px){:host .logo{width:132px;height:30px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AfConnectProfileDropdown, selector: "lib-af-connect-profile-dropdown", inputs: ["username"], outputs: ["callMeBack", "contactAdviser", "resetPassword", "logout"] }] });
+AfConnectHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectHeaderComponent, selector: "lib-af-connect-header", inputs: { username: "username", isLogoHidden: "isLogoHidden", userType: "userType" }, outputs: { callMeBack: "callMeBack", contactAdviser: "contactAdviser", resetPassword: "resetPassword", logout: "logout", switchUserType: "switchUserType" }, ngImport: i0, template: "<svg class=\"logo\" (click)=\"refresh()\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 592.39 132.62\">\r\n    <defs>\r\n       <style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#f15b25;}.cls-3{fill:#1a808d;}</style>\r\n       <linearGradient id=\"linear-gradient\" x1=\"254.64\" y1=\"41.32\" x2=\"604.45\" y2=\"41.32\" gradientUnits=\"userSpaceOnUse\">\r\n          <stop offset=\"0\" stop-color=\"#1a808d\"/>\r\n          <stop offset=\"1\"/>\r\n       </linearGradient>\r\n    </defs>\r\n    <g id=\"Layer_2\" data-name=\"Layer 2\">\r\n       <g id=\"Layer_1-2\" data-name=\"Layer 1\">\r\n          <path class=\"cls-1\" d=\"M32.59,53.64c0-17.53,12.08-29.31,24.45-29.31a20.54,20.54,0,0,1,17.53,9.31l1.78-7.82H92V81.16H76.35l-1.78-7.82A20.53,20.53,0,0,1,57,82.64C44.67,82.64,32.59,70.86,32.59,53.64Zm41.28-.1c0-7.43-4.75-12.77-11.18-12.77C56,40.77,51.2,46.41,51.2,53.54S56,66.21,62.69,66.21C69.12,66.21,73.87,60.86,73.87,53.54ZM103.85,0h18.41V81.16H103.85ZM187.1,58.49H150.77c2.47,6.63,9,9.9,16.53,9.9,6,0,11.59-2.08,16.64-4.85V78.09a39.5,39.5,0,0,1-19.11,4.55c-20.3,0-31.68-12.27-31.68-29,0-17.43,12.27-29.31,28.21-29.31,14.46,0,26.24,9.8,26.24,28.22A35.8,35.8,0,0,1,187.1,58.49Zm-16.93-10.6c-.19-5.54-3.66-9.3-8.91-9.3-5,0-9.4,3.56-10.89,9.3Zm61.77,5,19,28.32h-20.8l-9.3-15.94h-.2l-9.31,15.94h-19.8l18.72-27.62L191.74,25.82h20.1l9.21,15.93h.19l9.21-15.93h19.8ZM264.26,41h-7.43V25.82h7.53V21.26C264.36,11,271.88.57,287.13.57a38,38,0,0,1,11.09,1.58V17.5a23.35,23.35,0,0,0-7.63-1.19c-5.34,0-8.21,1.88-8.21,6.24v3.27h14.15V41H282.67v40.2H264.26Zm38,12.48c0-17.43,13.17-29.11,29.7-29.11s29.5,11.68,29.5,29.11S348.6,82.64,332,82.64,302.27,70.76,302.27,53.44Zm40.69,0c0-8.12-5.45-12.67-11-12.67s-11.09,4.55-11.09,12.67S326.33,66.21,332,66.21,343,61.56,343,53.44Zm29-27.62h14.65l1.78,8.11h.2a16.67,16.67,0,0,1,14.85-8.71,13.89,13.89,0,0,1,4.26.5V42.84a20.69,20.69,0,0,0-4.85-.59c-6.44,0-12.48,3.37-12.48,13.46V81.16H371.93Zm62.45,7.52c3.27-5.25,10.1-9,17.13-9,12.77,0,23.86,11.39,23.86,29.21s-11.88,29.1-24.75,29.1a20.84,20.84,0,0,1-17.33-9.3l-1.68,7.82H416V.14h18.41Zm-.2,20.2c0,7.42,4.65,12.67,11.19,12.67s11.38-5.45,11.38-12.57S452,40.77,445.27,40.77C438.83,40.77,434.18,46.11,434.18,53.54Zm103.3,5H501.14c2.48,6.63,9,9.9,16.54,9.9,6,0,11.58-2.08,16.63-4.85V78.09a39.48,39.48,0,0,1-19.11,4.55c-20.29,0-31.68-12.27-31.68-29,0-17.43,12.28-29.31,28.22-29.31,14.45,0,26.23,9.8,26.23,28.22A37,37,0,0,1,537.48,58.49Zm-16.93-10.6c-.2-5.54-3.67-9.3-8.91-9.3-5.05,0-9.41,3.56-10.89,9.3Zm67.66-19.4V43.64a35.12,35.12,0,0,0-17-4.56c-4.26,0-6.63,1.19-6.63,3.27s2.67,3.27,8.51,4.65C582.27,49.18,592,52.45,592,64.23c0,11.29-8.91,18.41-24.65,18.41-8.22,0-15.15-2-19.9-4.85V61.46a31.35,31.35,0,0,0,19.11,6.43c4.85,0,7.62-1.29,7.62-3.56,0-2.58-3.46-3.37-10.4-5.35-8.61-2.37-16.83-6.24-16.83-16.43,0-10.5,8.52-18.22,23.47-18.22C576.92,24.33,583.75,25.91,588.21,28.49Z\"/>\r\n          <circle class=\"cls-2\" cx=\"10.86\" cy=\"34.87\" r=\"10.86\" transform=\"translate(-15.07 9.15) rotate(-27.94)\"/>\r\n          <circle class=\"cls-2\" cx=\"10.86\" cy=\"71.4\" r=\"10.86\" transform=\"translate(-32.19 13.41) rotate(-27.94)\"/>\r\n          <circle class=\"cls-3\" cx=\"368.84\" cy=\"117.24\" r=\"2.98\"/>\r\n          <path class=\"cls-2\" d=\"M264,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,264,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M285.22,115.78v10.43h-3.39v-9.34c0-2.42-1.1-3.56-3.19-3.56a3.34,3.34,0,0,0-3.45,3.42v9.48h-3.4V110.52h2.62l.37,2.33h.09a5.58,5.58,0,0,1,4.77-2.71C283.06,110.14,285.22,112.33,285.22,115.78Z\"/>\r\n          <path class=\"cls-2\" d=\"M299.46,111.47v3.1a7.88,7.88,0,0,0-4.71-1.52c-1.79,0-2.76.69-2.76,1.78s1.17,1.61,3.16,2.18c2.47.66,5.23,1.5,5.23,4.72,0,3-2.33,4.86-6.21,4.86a9.11,9.11,0,0,1-5.49-1.67v-3.34a7.88,7.88,0,0,0,5.38,2.13c1.92,0,3-.8,3-1.95,0-1.3-1.35-1.73-3.5-2.39-2.56-.75-4.89-1.67-4.89-4.46s2.24-4.77,5.95-4.77A8.9,8.9,0,0,1,299.46,111.47Z\"/>\r\n          <path class=\"cls-2\" d=\"M303.29,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,303.29,105.54Zm.29,5H307v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M322.53,113.1l.37-2.58h2.82v14.14c0,5.17-3.65,8-8.13,8a10.29,10.29,0,0,1-5.9-1.9V127.3a8.84,8.84,0,0,0,5.67,2.27c2.78,0,5-1.78,5-4.45v-2a6.05,6.05,0,0,1-5.17,2.81c-3.68,0-7.05-3.16-7.05-7.87s3.42-7.88,7.1-7.88A6.24,6.24,0,0,1,322.53,113.1Zm-9,5a4.48,4.48,0,1,0,8.92-.09,4.5,4.5,0,0,0-4.46-4.74A4.58,4.58,0,0,0,313.5,118.08Z\"/>\r\n          <path class=\"cls-2\" d=\"M333.23,112.27h.06a5.37,5.37,0,0,1,4.36-2.13c3.43,0,5.61,2,5.61,5.67v10.4h-3.39v-9.37c0-2.41-1-3.59-3.16-3.59a3.22,3.22,0,0,0-3.48,3.39v9.57h-3.39v-23h3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M351.15,110.52h4.34v2.87h-4.34v7c0,2.24,1.38,3.16,3.28,3.16a9.45,9.45,0,0,0,1.41-.14v2.9a10.36,10.36,0,0,1-2.1.2c-3.71,0-5.92-2.21-5.92-6v-7.13h-2.3v-2.87h2.35v-3.65h3.28Z\"/>\r\n          <path class=\"cls-2\" d=\"M380.9,118.39c0-5,3.45-8.25,7-8.25a6.17,6.17,0,0,1,5.43,3.08l.38-2.7h2.81v15.69h-2.81l-.38-2.7a6.17,6.17,0,0,1-5.43,3.08C384.35,126.59,380.9,123.34,380.9,118.39Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.51,2.12-4.51,5.11,2,5.12,4.51,5.12S393.26,121.38,393.26,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M399.81,118.36c0-5,3.39-8.22,7.07-8.22a5.94,5.94,0,0,1,5.23,2.94v-9.89h3.39v23h-2.81l-.41-2.7a6.11,6.11,0,0,1-5.37,3.08C403.23,126.59,399.81,123.39,399.81,118.36Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.48,2.12-4.48,5.11,1.92,5.12,4.48,5.12S412.17,121.38,412.17,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M417.88,110.52h3.62l3.94,12h.09l3.94-12H433l-5.72,15.69H423.6Z\"/>\r\n          <path class=\"cls-2\" d=\"M435.05,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,435.05,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M450.28,123.48a6.72,6.72,0,0,0,4.08-1.24v3.25a9,9,0,0,1-4.45,1.1,8.23,8.23,0,0,1,0-16.45,8.38,8.38,0,0,1,4.45,1.12v3.28a6.75,6.75,0,0,0-4.11-1.29,5.12,5.12,0,0,0,0,10.23Z\"/>\r\n          <path class=\"cls-2\" d=\"M471.18,119.4H459.91a5.07,5.07,0,0,0,5.32,4.37,8.23,8.23,0,0,0,5.11-1.87v3a9.54,9.54,0,0,1-5.46,1.64c-5.14,0-8.25-3.34-8.25-8.17,0-5,3.51-8.28,7.71-8.28,3.79,0,6.92,2.73,6.92,7.94A8.91,8.91,0,0,1,471.18,119.4ZM468,117.13c-.08-2.79-1.78-4.17-3.73-4.17a4.56,4.56,0,0,0-4.43,4.17Z\"/>\r\n          <path class=\"cls-2\" d=\"M497.53,105.54a2,2,0,1,1,2,1.93A1.93,1.93,0,0,1,497.53,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M526.55,115.78v10.43h-3.39v-9.83c0-2-.78-3.07-2.65-3.07a2.86,2.86,0,0,0-2.9,3v9.89h-3.39v-9.83c0-2-.78-3.07-2.65-3.07a2.91,2.91,0,0,0-2.87,3.19v9.71h-3.39V110.52h2.61l.38,2.27h.08a4.77,4.77,0,0,1,4.26-2.65,4.46,4.46,0,0,1,4.4,2.73,5,5,0,0,1,4.51-2.73C525,110.14,526.55,112.44,526.55,115.78Z\"/>\r\n          <path class=\"cls-2\" d=\"M530.59,110.52h2.82l.37,2.7a6.14,6.14,0,0,1,5.37-3.08c3.71,0,7.13,3.22,7.13,8.22s-3.36,8.23-7,8.23a6.13,6.13,0,0,1-5.26-2.94v8.6h-3.39Zm12.27,7.82c0-3-2-5.09-4.48-5.09s-4.46,2.1-4.46,5.11,1.93,5.12,4.43,5.12S542.86,121.38,542.86,118.34Z\"/>\r\n          <path class=\"cls-2\" d=\"M548.66,118.39c0-5,3.45-8.25,7-8.25a6.17,6.17,0,0,1,5.43,3.08l.38-2.7h2.81v15.69h-2.81l-.38-2.7a6.17,6.17,0,0,1-5.43,3.08C552.11,126.59,548.66,123.34,548.66,118.39Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.51,2.12-4.51,5.11,2,5.12,4.51,5.12S561,121.38,561,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M575.92,123.48a6.74,6.74,0,0,0,4.08-1.24v3.25a9,9,0,0,1-4.45,1.1,8.23,8.23,0,0,1,0-16.45,8.38,8.38,0,0,1,4.45,1.12v3.28a6.77,6.77,0,0,0-4.11-1.29,5.12,5.12,0,0,0,0,10.23Z\"/>\r\n          <path class=\"cls-2\" d=\"M587.7,110.52H592v2.87H587.7v7c0,2.24,1.38,3.16,3.28,3.16a9.45,9.45,0,0,0,1.41-.14v2.9a10.36,10.36,0,0,1-2.1.2c-3.71,0-5.92-2.21-5.92-6v-7.13h-2.3v-2.87h2.36v-3.65h3.27Z\"/>\r\n          <circle class=\"cls-3\" cx=\"483.77\" cy=\"117.24\" r=\"2.98\"/>\r\n       </g>\r\n    </g>\r\n</svg> \r\n<lib-af-connect-profile-dropdown\r\n    *ngIf=\"!isLogoHidden\"\r\n    [username]=\"username\"\r\n    [userType]=\"userType\"\r\n    (callMeBack)=\"callMeBack.emit()\"\r\n    (contactAdviser)=\"contactAdviser.emit()\"\r\n    (resetPassword)=\"resetPassword.emit()\"\r\n    (logout)=\"logout.emit()\"\r\n    (logout)=\"logout.emit()\"\r\n    (switchUserType)=\"switch($event)\"\r\n>\r\n</lib-af-connect-profile-dropdown>\r\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;height:100px;margin:auto}@media (max-width: 768px){:host{width:auto;height:50px;padding:.5rem 1.25rem}}:host .logo{width:180px;height:40px;cursor:pointer}@media (max-width: 768px){:host .logo{width:132px;height:30px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AfConnectProfileDropdown, selector: "lib-af-connect-profile-dropdown", inputs: ["username", "userType"], outputs: ["callMeBack", "contactAdviser", "resetPassword", "logout", "switchUserType"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-header', template: "<svg class=\"logo\" (click)=\"refresh()\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 592.39 132.62\">\r\n    <defs>\r\n       <style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#f15b25;}.cls-3{fill:#1a808d;}</style>\r\n       <linearGradient id=\"linear-gradient\" x1=\"254.64\" y1=\"41.32\" x2=\"604.45\" y2=\"41.32\" gradientUnits=\"userSpaceOnUse\">\r\n          <stop offset=\"0\" stop-color=\"#1a808d\"/>\r\n          <stop offset=\"1\"/>\r\n       </linearGradient>\r\n    </defs>\r\n    <g id=\"Layer_2\" data-name=\"Layer 2\">\r\n       <g id=\"Layer_1-2\" data-name=\"Layer 1\">\r\n          <path class=\"cls-1\" d=\"M32.59,53.64c0-17.53,12.08-29.31,24.45-29.31a20.54,20.54,0,0,1,17.53,9.31l1.78-7.82H92V81.16H76.35l-1.78-7.82A20.53,20.53,0,0,1,57,82.64C44.67,82.64,32.59,70.86,32.59,53.64Zm41.28-.1c0-7.43-4.75-12.77-11.18-12.77C56,40.77,51.2,46.41,51.2,53.54S56,66.21,62.69,66.21C69.12,66.21,73.87,60.86,73.87,53.54ZM103.85,0h18.41V81.16H103.85ZM187.1,58.49H150.77c2.47,6.63,9,9.9,16.53,9.9,6,0,11.59-2.08,16.64-4.85V78.09a39.5,39.5,0,0,1-19.11,4.55c-20.3,0-31.68-12.27-31.68-29,0-17.43,12.27-29.31,28.21-29.31,14.46,0,26.24,9.8,26.24,28.22A35.8,35.8,0,0,1,187.1,58.49Zm-16.93-10.6c-.19-5.54-3.66-9.3-8.91-9.3-5,0-9.4,3.56-10.89,9.3Zm61.77,5,19,28.32h-20.8l-9.3-15.94h-.2l-9.31,15.94h-19.8l18.72-27.62L191.74,25.82h20.1l9.21,15.93h.19l9.21-15.93h19.8ZM264.26,41h-7.43V25.82h7.53V21.26C264.36,11,271.88.57,287.13.57a38,38,0,0,1,11.09,1.58V17.5a23.35,23.35,0,0,0-7.63-1.19c-5.34,0-8.21,1.88-8.21,6.24v3.27h14.15V41H282.67v40.2H264.26Zm38,12.48c0-17.43,13.17-29.11,29.7-29.11s29.5,11.68,29.5,29.11S348.6,82.64,332,82.64,302.27,70.76,302.27,53.44Zm40.69,0c0-8.12-5.45-12.67-11-12.67s-11.09,4.55-11.09,12.67S326.33,66.21,332,66.21,343,61.56,343,53.44Zm29-27.62h14.65l1.78,8.11h.2a16.67,16.67,0,0,1,14.85-8.71,13.89,13.89,0,0,1,4.26.5V42.84a20.69,20.69,0,0,0-4.85-.59c-6.44,0-12.48,3.37-12.48,13.46V81.16H371.93Zm62.45,7.52c3.27-5.25,10.1-9,17.13-9,12.77,0,23.86,11.39,23.86,29.21s-11.88,29.1-24.75,29.1a20.84,20.84,0,0,1-17.33-9.3l-1.68,7.82H416V.14h18.41Zm-.2,20.2c0,7.42,4.65,12.67,11.19,12.67s11.38-5.45,11.38-12.57S452,40.77,445.27,40.77C438.83,40.77,434.18,46.11,434.18,53.54Zm103.3,5H501.14c2.48,6.63,9,9.9,16.54,9.9,6,0,11.58-2.08,16.63-4.85V78.09a39.48,39.48,0,0,1-19.11,4.55c-20.29,0-31.68-12.27-31.68-29,0-17.43,12.28-29.31,28.22-29.31,14.45,0,26.23,9.8,26.23,28.22A37,37,0,0,1,537.48,58.49Zm-16.93-10.6c-.2-5.54-3.67-9.3-8.91-9.3-5.05,0-9.41,3.56-10.89,9.3Zm67.66-19.4V43.64a35.12,35.12,0,0,0-17-4.56c-4.26,0-6.63,1.19-6.63,3.27s2.67,3.27,8.51,4.65C582.27,49.18,592,52.45,592,64.23c0,11.29-8.91,18.41-24.65,18.41-8.22,0-15.15-2-19.9-4.85V61.46a31.35,31.35,0,0,0,19.11,6.43c4.85,0,7.62-1.29,7.62-3.56,0-2.58-3.46-3.37-10.4-5.35-8.61-2.37-16.83-6.24-16.83-16.43,0-10.5,8.52-18.22,23.47-18.22C576.92,24.33,583.75,25.91,588.21,28.49Z\"/>\r\n          <circle class=\"cls-2\" cx=\"10.86\" cy=\"34.87\" r=\"10.86\" transform=\"translate(-15.07 9.15) rotate(-27.94)\"/>\r\n          <circle class=\"cls-2\" cx=\"10.86\" cy=\"71.4\" r=\"10.86\" transform=\"translate(-32.19 13.41) rotate(-27.94)\"/>\r\n          <circle class=\"cls-3\" cx=\"368.84\" cy=\"117.24\" r=\"2.98\"/>\r\n          <path class=\"cls-2\" d=\"M264,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,264,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M285.22,115.78v10.43h-3.39v-9.34c0-2.42-1.1-3.56-3.19-3.56a3.34,3.34,0,0,0-3.45,3.42v9.48h-3.4V110.52h2.62l.37,2.33h.09a5.58,5.58,0,0,1,4.77-2.71C283.06,110.14,285.22,112.33,285.22,115.78Z\"/>\r\n          <path class=\"cls-2\" d=\"M299.46,111.47v3.1a7.88,7.88,0,0,0-4.71-1.52c-1.79,0-2.76.69-2.76,1.78s1.17,1.61,3.16,2.18c2.47.66,5.23,1.5,5.23,4.72,0,3-2.33,4.86-6.21,4.86a9.11,9.11,0,0,1-5.49-1.67v-3.34a7.88,7.88,0,0,0,5.38,2.13c1.92,0,3-.8,3-1.95,0-1.3-1.35-1.73-3.5-2.39-2.56-.75-4.89-1.67-4.89-4.46s2.24-4.77,5.95-4.77A8.9,8.9,0,0,1,299.46,111.47Z\"/>\r\n          <path class=\"cls-2\" d=\"M303.29,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,303.29,105.54Zm.29,5H307v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M322.53,113.1l.37-2.58h2.82v14.14c0,5.17-3.65,8-8.13,8a10.29,10.29,0,0,1-5.9-1.9V127.3a8.84,8.84,0,0,0,5.67,2.27c2.78,0,5-1.78,5-4.45v-2a6.05,6.05,0,0,1-5.17,2.81c-3.68,0-7.05-3.16-7.05-7.87s3.42-7.88,7.1-7.88A6.24,6.24,0,0,1,322.53,113.1Zm-9,5a4.48,4.48,0,1,0,8.92-.09,4.5,4.5,0,0,0-4.46-4.74A4.58,4.58,0,0,0,313.5,118.08Z\"/>\r\n          <path class=\"cls-2\" d=\"M333.23,112.27h.06a5.37,5.37,0,0,1,4.36-2.13c3.43,0,5.61,2,5.61,5.67v10.4h-3.39v-9.37c0-2.41-1-3.59-3.16-3.59a3.22,3.22,0,0,0-3.48,3.39v9.57h-3.39v-23h3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M351.15,110.52h4.34v2.87h-4.34v7c0,2.24,1.38,3.16,3.28,3.16a9.45,9.45,0,0,0,1.41-.14v2.9a10.36,10.36,0,0,1-2.1.2c-3.71,0-5.92-2.21-5.92-6v-7.13h-2.3v-2.87h2.35v-3.65h3.28Z\"/>\r\n          <path class=\"cls-2\" d=\"M380.9,118.39c0-5,3.45-8.25,7-8.25a6.17,6.17,0,0,1,5.43,3.08l.38-2.7h2.81v15.69h-2.81l-.38-2.7a6.17,6.17,0,0,1-5.43,3.08C384.35,126.59,380.9,123.34,380.9,118.39Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.51,2.12-4.51,5.11,2,5.12,4.51,5.12S393.26,121.38,393.26,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M399.81,118.36c0-5,3.39-8.22,7.07-8.22a5.94,5.94,0,0,1,5.23,2.94v-9.89h3.39v23h-2.81l-.41-2.7a6.11,6.11,0,0,1-5.37,3.08C403.23,126.59,399.81,123.39,399.81,118.36Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.48,2.12-4.48,5.11,1.92,5.12,4.48,5.12S412.17,121.38,412.17,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M417.88,110.52h3.62l3.94,12h.09l3.94-12H433l-5.72,15.69H423.6Z\"/>\r\n          <path class=\"cls-2\" d=\"M435.05,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,435.05,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M450.28,123.48a6.72,6.72,0,0,0,4.08-1.24v3.25a9,9,0,0,1-4.45,1.1,8.23,8.23,0,0,1,0-16.45,8.38,8.38,0,0,1,4.45,1.12v3.28a6.75,6.75,0,0,0-4.11-1.29,5.12,5.12,0,0,0,0,10.23Z\"/>\r\n          <path class=\"cls-2\" d=\"M471.18,119.4H459.91a5.07,5.07,0,0,0,5.32,4.37,8.23,8.23,0,0,0,5.11-1.87v3a9.54,9.54,0,0,1-5.46,1.64c-5.14,0-8.25-3.34-8.25-8.17,0-5,3.51-8.28,7.71-8.28,3.79,0,6.92,2.73,6.92,7.94A8.91,8.91,0,0,1,471.18,119.4ZM468,117.13c-.08-2.79-1.78-4.17-3.73-4.17a4.56,4.56,0,0,0-4.43,4.17Z\"/>\r\n          <path class=\"cls-2\" d=\"M497.53,105.54a2,2,0,1,1,2,1.93A1.93,1.93,0,0,1,497.53,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M526.55,115.78v10.43h-3.39v-9.83c0-2-.78-3.07-2.65-3.07a2.86,2.86,0,0,0-2.9,3v9.89h-3.39v-9.83c0-2-.78-3.07-2.65-3.07a2.91,2.91,0,0,0-2.87,3.19v9.71h-3.39V110.52h2.61l.38,2.27h.08a4.77,4.77,0,0,1,4.26-2.65,4.46,4.46,0,0,1,4.4,2.73,5,5,0,0,1,4.51-2.73C525,110.14,526.55,112.44,526.55,115.78Z\"/>\r\n          <path class=\"cls-2\" d=\"M530.59,110.52h2.82l.37,2.7a6.14,6.14,0,0,1,5.37-3.08c3.71,0,7.13,3.22,7.13,8.22s-3.36,8.23-7,8.23a6.13,6.13,0,0,1-5.26-2.94v8.6h-3.39Zm12.27,7.82c0-3-2-5.09-4.48-5.09s-4.46,2.1-4.46,5.11,1.93,5.12,4.43,5.12S542.86,121.38,542.86,118.34Z\"/>\r\n          <path class=\"cls-2\" d=\"M548.66,118.39c0-5,3.45-8.25,7-8.25a6.17,6.17,0,0,1,5.43,3.08l.38-2.7h2.81v15.69h-2.81l-.38-2.7a6.17,6.17,0,0,1-5.43,3.08C552.11,126.59,548.66,123.34,548.66,118.39Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.51,2.12-4.51,5.11,2,5.12,4.51,5.12S561,121.38,561,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M575.92,123.48a6.74,6.74,0,0,0,4.08-1.24v3.25a9,9,0,0,1-4.45,1.1,8.23,8.23,0,0,1,0-16.45,8.38,8.38,0,0,1,4.45,1.12v3.28a6.77,6.77,0,0,0-4.11-1.29,5.12,5.12,0,0,0,0,10.23Z\"/>\r\n          <path class=\"cls-2\" d=\"M587.7,110.52H592v2.87H587.7v7c0,2.24,1.38,3.16,3.28,3.16a9.45,9.45,0,0,0,1.41-.14v2.9a10.36,10.36,0,0,1-2.1.2c-3.71,0-5.92-2.21-5.92-6v-7.13h-2.3v-2.87h2.36v-3.65h3.27Z\"/>\r\n          <circle class=\"cls-3\" cx=\"483.77\" cy=\"117.24\" r=\"2.98\"/>\r\n       </g>\r\n    </g>\r\n</svg> \r\n<lib-af-connect-profile-dropdown\r\n    *ngIf=\"!isLogoHidden\"\r\n    [username]=\"username\"\r\n    (callMeBack)=\"callMeBack.emit()\"\r\n    (contactAdviser)=\"contactAdviser.emit()\"\r\n    (resetPassword)=\"resetPassword.emit()\"\r\n    (logout)=\"logout.emit()\">\r\n</lib-af-connect-profile-dropdown>\r\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;height:100px;margin:auto}@media (max-width: 768px){:host{width:auto;height:50px;padding:.5rem 1.25rem}}:host .logo{width:180px;height:40px;cursor:pointer}@media (max-width: 768px){:host .logo{width:132px;height:30px}}\n"] }]
+            args: [{ selector: 'lib-af-connect-header', template: "<svg class=\"logo\" (click)=\"refresh()\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 592.39 132.62\">\r\n    <defs>\r\n       <style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#f15b25;}.cls-3{fill:#1a808d;}</style>\r\n       <linearGradient id=\"linear-gradient\" x1=\"254.64\" y1=\"41.32\" x2=\"604.45\" y2=\"41.32\" gradientUnits=\"userSpaceOnUse\">\r\n          <stop offset=\"0\" stop-color=\"#1a808d\"/>\r\n          <stop offset=\"1\"/>\r\n       </linearGradient>\r\n    </defs>\r\n    <g id=\"Layer_2\" data-name=\"Layer 2\">\r\n       <g id=\"Layer_1-2\" data-name=\"Layer 1\">\r\n          <path class=\"cls-1\" d=\"M32.59,53.64c0-17.53,12.08-29.31,24.45-29.31a20.54,20.54,0,0,1,17.53,9.31l1.78-7.82H92V81.16H76.35l-1.78-7.82A20.53,20.53,0,0,1,57,82.64C44.67,82.64,32.59,70.86,32.59,53.64Zm41.28-.1c0-7.43-4.75-12.77-11.18-12.77C56,40.77,51.2,46.41,51.2,53.54S56,66.21,62.69,66.21C69.12,66.21,73.87,60.86,73.87,53.54ZM103.85,0h18.41V81.16H103.85ZM187.1,58.49H150.77c2.47,6.63,9,9.9,16.53,9.9,6,0,11.59-2.08,16.64-4.85V78.09a39.5,39.5,0,0,1-19.11,4.55c-20.3,0-31.68-12.27-31.68-29,0-17.43,12.27-29.31,28.21-29.31,14.46,0,26.24,9.8,26.24,28.22A35.8,35.8,0,0,1,187.1,58.49Zm-16.93-10.6c-.19-5.54-3.66-9.3-8.91-9.3-5,0-9.4,3.56-10.89,9.3Zm61.77,5,19,28.32h-20.8l-9.3-15.94h-.2l-9.31,15.94h-19.8l18.72-27.62L191.74,25.82h20.1l9.21,15.93h.19l9.21-15.93h19.8ZM264.26,41h-7.43V25.82h7.53V21.26C264.36,11,271.88.57,287.13.57a38,38,0,0,1,11.09,1.58V17.5a23.35,23.35,0,0,0-7.63-1.19c-5.34,0-8.21,1.88-8.21,6.24v3.27h14.15V41H282.67v40.2H264.26Zm38,12.48c0-17.43,13.17-29.11,29.7-29.11s29.5,11.68,29.5,29.11S348.6,82.64,332,82.64,302.27,70.76,302.27,53.44Zm40.69,0c0-8.12-5.45-12.67-11-12.67s-11.09,4.55-11.09,12.67S326.33,66.21,332,66.21,343,61.56,343,53.44Zm29-27.62h14.65l1.78,8.11h.2a16.67,16.67,0,0,1,14.85-8.71,13.89,13.89,0,0,1,4.26.5V42.84a20.69,20.69,0,0,0-4.85-.59c-6.44,0-12.48,3.37-12.48,13.46V81.16H371.93Zm62.45,7.52c3.27-5.25,10.1-9,17.13-9,12.77,0,23.86,11.39,23.86,29.21s-11.88,29.1-24.75,29.1a20.84,20.84,0,0,1-17.33-9.3l-1.68,7.82H416V.14h18.41Zm-.2,20.2c0,7.42,4.65,12.67,11.19,12.67s11.38-5.45,11.38-12.57S452,40.77,445.27,40.77C438.83,40.77,434.18,46.11,434.18,53.54Zm103.3,5H501.14c2.48,6.63,9,9.9,16.54,9.9,6,0,11.58-2.08,16.63-4.85V78.09a39.48,39.48,0,0,1-19.11,4.55c-20.29,0-31.68-12.27-31.68-29,0-17.43,12.28-29.31,28.22-29.31,14.45,0,26.23,9.8,26.23,28.22A37,37,0,0,1,537.48,58.49Zm-16.93-10.6c-.2-5.54-3.67-9.3-8.91-9.3-5.05,0-9.41,3.56-10.89,9.3Zm67.66-19.4V43.64a35.12,35.12,0,0,0-17-4.56c-4.26,0-6.63,1.19-6.63,3.27s2.67,3.27,8.51,4.65C582.27,49.18,592,52.45,592,64.23c0,11.29-8.91,18.41-24.65,18.41-8.22,0-15.15-2-19.9-4.85V61.46a31.35,31.35,0,0,0,19.11,6.43c4.85,0,7.62-1.29,7.62-3.56,0-2.58-3.46-3.37-10.4-5.35-8.61-2.37-16.83-6.24-16.83-16.43,0-10.5,8.52-18.22,23.47-18.22C576.92,24.33,583.75,25.91,588.21,28.49Z\"/>\r\n          <circle class=\"cls-2\" cx=\"10.86\" cy=\"34.87\" r=\"10.86\" transform=\"translate(-15.07 9.15) rotate(-27.94)\"/>\r\n          <circle class=\"cls-2\" cx=\"10.86\" cy=\"71.4\" r=\"10.86\" transform=\"translate(-32.19 13.41) rotate(-27.94)\"/>\r\n          <circle class=\"cls-3\" cx=\"368.84\" cy=\"117.24\" r=\"2.98\"/>\r\n          <path class=\"cls-2\" d=\"M264,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,264,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M285.22,115.78v10.43h-3.39v-9.34c0-2.42-1.1-3.56-3.19-3.56a3.34,3.34,0,0,0-3.45,3.42v9.48h-3.4V110.52h2.62l.37,2.33h.09a5.58,5.58,0,0,1,4.77-2.71C283.06,110.14,285.22,112.33,285.22,115.78Z\"/>\r\n          <path class=\"cls-2\" d=\"M299.46,111.47v3.1a7.88,7.88,0,0,0-4.71-1.52c-1.79,0-2.76.69-2.76,1.78s1.17,1.61,3.16,2.18c2.47.66,5.23,1.5,5.23,4.72,0,3-2.33,4.86-6.21,4.86a9.11,9.11,0,0,1-5.49-1.67v-3.34a7.88,7.88,0,0,0,5.38,2.13c1.92,0,3-.8,3-1.95,0-1.3-1.35-1.73-3.5-2.39-2.56-.75-4.89-1.67-4.89-4.46s2.24-4.77,5.95-4.77A8.9,8.9,0,0,1,299.46,111.47Z\"/>\r\n          <path class=\"cls-2\" d=\"M303.29,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,303.29,105.54Zm.29,5H307v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M322.53,113.1l.37-2.58h2.82v14.14c0,5.17-3.65,8-8.13,8a10.29,10.29,0,0,1-5.9-1.9V127.3a8.84,8.84,0,0,0,5.67,2.27c2.78,0,5-1.78,5-4.45v-2a6.05,6.05,0,0,1-5.17,2.81c-3.68,0-7.05-3.16-7.05-7.87s3.42-7.88,7.1-7.88A6.24,6.24,0,0,1,322.53,113.1Zm-9,5a4.48,4.48,0,1,0,8.92-.09,4.5,4.5,0,0,0-4.46-4.74A4.58,4.58,0,0,0,313.5,118.08Z\"/>\r\n          <path class=\"cls-2\" d=\"M333.23,112.27h.06a5.37,5.37,0,0,1,4.36-2.13c3.43,0,5.61,2,5.61,5.67v10.4h-3.39v-9.37c0-2.41-1-3.59-3.16-3.59a3.22,3.22,0,0,0-3.48,3.39v9.57h-3.39v-23h3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M351.15,110.52h4.34v2.87h-4.34v7c0,2.24,1.38,3.16,3.28,3.16a9.45,9.45,0,0,0,1.41-.14v2.9a10.36,10.36,0,0,1-2.1.2c-3.71,0-5.92-2.21-5.92-6v-7.13h-2.3v-2.87h2.35v-3.65h3.28Z\"/>\r\n          <path class=\"cls-2\" d=\"M380.9,118.39c0-5,3.45-8.25,7-8.25a6.17,6.17,0,0,1,5.43,3.08l.38-2.7h2.81v15.69h-2.81l-.38-2.7a6.17,6.17,0,0,1-5.43,3.08C384.35,126.59,380.9,123.34,380.9,118.39Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.51,2.12-4.51,5.11,2,5.12,4.51,5.12S393.26,121.38,393.26,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M399.81,118.36c0-5,3.39-8.22,7.07-8.22a5.94,5.94,0,0,1,5.23,2.94v-9.89h3.39v23h-2.81l-.41-2.7a6.11,6.11,0,0,1-5.37,3.08C403.23,126.59,399.81,123.39,399.81,118.36Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.48,2.12-4.48,5.11,1.92,5.12,4.48,5.12S412.17,121.38,412.17,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M417.88,110.52h3.62l3.94,12h.09l3.94-12H433l-5.72,15.69H423.6Z\"/>\r\n          <path class=\"cls-2\" d=\"M435.05,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,435.05,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M450.28,123.48a6.72,6.72,0,0,0,4.08-1.24v3.25a9,9,0,0,1-4.45,1.1,8.23,8.23,0,0,1,0-16.45,8.38,8.38,0,0,1,4.45,1.12v3.28a6.75,6.75,0,0,0-4.11-1.29,5.12,5.12,0,0,0,0,10.23Z\"/>\r\n          <path class=\"cls-2\" d=\"M471.18,119.4H459.91a5.07,5.07,0,0,0,5.32,4.37,8.23,8.23,0,0,0,5.11-1.87v3a9.54,9.54,0,0,1-5.46,1.64c-5.14,0-8.25-3.34-8.25-8.17,0-5,3.51-8.28,7.71-8.28,3.79,0,6.92,2.73,6.92,7.94A8.91,8.91,0,0,1,471.18,119.4ZM468,117.13c-.08-2.79-1.78-4.17-3.73-4.17a4.56,4.56,0,0,0-4.43,4.17Z\"/>\r\n          <path class=\"cls-2\" d=\"M497.53,105.54a2,2,0,1,1,2,1.93A1.93,1.93,0,0,1,497.53,105.54Zm.29,5h3.39v15.69h-3.39Z\"/>\r\n          <path class=\"cls-2\" d=\"M526.55,115.78v10.43h-3.39v-9.83c0-2-.78-3.07-2.65-3.07a2.86,2.86,0,0,0-2.9,3v9.89h-3.39v-9.83c0-2-.78-3.07-2.65-3.07a2.91,2.91,0,0,0-2.87,3.19v9.71h-3.39V110.52h2.61l.38,2.27h.08a4.77,4.77,0,0,1,4.26-2.65,4.46,4.46,0,0,1,4.4,2.73,5,5,0,0,1,4.51-2.73C525,110.14,526.55,112.44,526.55,115.78Z\"/>\r\n          <path class=\"cls-2\" d=\"M530.59,110.52h2.82l.37,2.7a6.14,6.14,0,0,1,5.37-3.08c3.71,0,7.13,3.22,7.13,8.22s-3.36,8.23-7,8.23a6.13,6.13,0,0,1-5.26-2.94v8.6h-3.39Zm12.27,7.82c0-3-2-5.09-4.48-5.09s-4.46,2.1-4.46,5.11,1.93,5.12,4.43,5.12S542.86,121.38,542.86,118.34Z\"/>\r\n          <path class=\"cls-2\" d=\"M548.66,118.39c0-5,3.45-8.25,7-8.25a6.17,6.17,0,0,1,5.43,3.08l.38-2.7h2.81v15.69h-2.81l-.38-2.7a6.17,6.17,0,0,1-5.43,3.08C552.11,126.59,548.66,123.34,548.66,118.39Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.51,2.12-4.51,5.11,2,5.12,4.51,5.12S561,121.38,561,118.36Z\"/>\r\n          <path class=\"cls-2\" d=\"M575.92,123.48a6.74,6.74,0,0,0,4.08-1.24v3.25a9,9,0,0,1-4.45,1.1,8.23,8.23,0,0,1,0-16.45,8.38,8.38,0,0,1,4.45,1.12v3.28a6.77,6.77,0,0,0-4.11-1.29,5.12,5.12,0,0,0,0,10.23Z\"/>\r\n          <path class=\"cls-2\" d=\"M587.7,110.52H592v2.87H587.7v7c0,2.24,1.38,3.16,3.28,3.16a9.45,9.45,0,0,0,1.41-.14v2.9a10.36,10.36,0,0,1-2.1.2c-3.71,0-5.92-2.21-5.92-6v-7.13h-2.3v-2.87h2.36v-3.65h3.27Z\"/>\r\n          <circle class=\"cls-3\" cx=\"483.77\" cy=\"117.24\" r=\"2.98\"/>\r\n       </g>\r\n    </g>\r\n</svg> \r\n<lib-af-connect-profile-dropdown\r\n    *ngIf=\"!isLogoHidden\"\r\n    [username]=\"username\"\r\n    [userType]=\"userType\"\r\n    (callMeBack)=\"callMeBack.emit()\"\r\n    (contactAdviser)=\"contactAdviser.emit()\"\r\n    (resetPassword)=\"resetPassword.emit()\"\r\n    (logout)=\"logout.emit()\"\r\n    (logout)=\"logout.emit()\"\r\n    (switchUserType)=\"switch($event)\"\r\n>\r\n</lib-af-connect-profile-dropdown>\r\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;height:100px;margin:auto}@media (max-width: 768px){:host{width:auto;height:50px;padding:.5rem 1.25rem}}:host .logo{width:180px;height:40px;cursor:pointer}@media (max-width: 768px){:host .logo{width:132px;height:30px}}\n"] }]
         }], propDecorators: { username: [{
                 type: Input
             }], isLogoHidden: [{
                 type: Input
+            }], userType: [{
+                type: Input
             }], callMeBack: [{
                 type: Output
             }], contactAdviser: [{
@@ -489,8 +703,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                 type: Output
             }], logout: [{
                 type: Output
+            }], switchUserType: [{
+                type: Output
             }] } });
 
+/**
+ * Gets the initials of a Name (First Second -> FS)
+ */
+class GetinItialsPipe {
+    transform(value) {
+        if (!value) {
+            return '';
+        }
+        return value.split(' ').map(word => word.charAt(0)).join('').slice(0, 2);
+    }
+}
+GetinItialsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: GetinItialsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+GetinItialsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: GetinItialsPipe, name: "getInitials" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: GetinItialsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'getInitials' }]
+        }] });
+
 class FaqItemComponent {
 }
 FaqItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FaqItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -695,10 +929,10 @@ class AfConnectButtonComponent {
     ngOnInit() { }
 }
 AfConnectButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectButtonComponent, selector: "lib-af-connect-button", inputs: { isActive: "isActive", emitValue: "emitValue", title: "title", disabled: "disabled", hybrid: "hybrid", fullWidth: "fullWidth", size: "size", variant: "variant", iconSrc: "iconSrc", iconSize: "iconSize", iconPosition: "iconPosition", activeItem: "activeItem" }, outputs: { clickBtn: "clickBtn" }, ngImport: i0, template: "<button\n  [class.hybrid]=\"hybrid\"\n  [ngClass]=\"[\n    fullWidth ? 'fullWidth' : '', 'button',\n    size,\n    variant,\n    activeItem === title || isActive ? 'active' : '',\n    iconPosition\n  ]\"\n  title=\"\"\n  [disabled]=\"disabled\"\n  (click)=\"this.clickBtn.emit(emitValue || title)\"\n>\n  <!-- TODO: Templates -->\n  <div\n    *ngIf=\"iconSrc\"\n    [ngStyle]=\"{\n      '-webkit-mask-image': 'url(' + iconSrc + ')',\n      'width': iconSize + 'px'\n    }\"\n    class=\"icon\"\n  >\n  </div>\n  <span [class]=\"['title', size, variant]\">{{ title }}</span>\n</button>\n", styles: [":host{display:flex;justify-content:center;width:auto}:host(.align-right){justify-content:flex-end}:host(.align-left){justify-content:flex-start}:host(.full-width) .button{width:100%}:host(.register-button) .button{color:var(--main-white-color);border-color:var(--main-white-color)}.button{display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border-radius:30px;font-size:.8rem;padding:0 10px;background-color:var(--transparent-color);color:var(--primary-connected-orange-color);border:solid 1px var(--primary-connected-orange-color)}.button:disabled{border-color:var(--neutral-anchor-color);color:var(--neutral-anchor-color);cursor:auto}.button:disabled .icon{background:var(--neutral-anchor-color)}.button.small{width:8.4rem;height:2rem}.button.dynamic{width:100%;height:2rem}.button.medium{width:8.875rem;height:2.6rem}@media (max-width: 1024px){.button.medium{height:2.1rem}}.button.large{width:12rem;height:2.6rem}@media (max-width: 1024px){.button.large{min-width:8.5rem;height:2.3rem;font-size:12px}}.button.x-large{width:22rem;height:3.1875rem;font-size:1.375rem}@media (max-width: 1024px){.button.x-large{width:11.8rem;height:2.5rem;font-size:1rem}}.button.block{width:22rem;font-size:1rem;height:3rem}@media (max-width: 1024px){.button.block{width:11.8rem;height:2.5rem}}.button.filled{color:var(--main-white-color);background-color:var(--primary-connected-orange-color)}.button.filled:hover:not(:disabled){background:var(--primary-catalyst-yellow-color) 0% 0% no-repeat padding-box;border-color:var(--primary-catalyst-yellow-color)}.button.filled:disabled{background-color:var(--neutral-button-color);color:var(--neutral-anchor-color);border-color:var(--neutral-button-color)}.button.transparent{color:var(--main-white-color);border:solid 1px var(--main-white-color)}.button.cancel{color:var(--neutral-anchor-color);background:var(--neutral-button-color);border:none}.button.link{color:var(--primary-connected-orange-color);background:none;border:none;padding:0;height:-moz-fit-content;height:fit-content;width:auto;display:block}.button.link:disabled{color:var(--neutral-anchor-color)}.button.link:hover:not(:disabled),.button.link:disabled{background:transparent}@media (max-width: 768px){.button.hybrid{color:var(--primary-connected-orange-color);background:none;border:none;padding:0;height:-moz-fit-content;height:fit-content;width:auto;display:block}.button.hybrid:disabled{color:var(--neutral-anchor-color)}.button.hybrid:hover:not(:disabled),.button.hybrid:disabled{background:transparent}.button.hybrid .icon{display:none}}.button.fullWidth{width:100%}.button.greyish{padding:10px 8px;color:var(--main-black-color);background:var(--neutral-button-color);border:none;font-family:var(--standard-font-family-hero-new);font-size:.875rem;width:6.25rem;height:2.35rem;transition:background-color 125ms ease-in-out}.button.greyish>.title{white-space:nowrap;font-family:var(--standard-font-family-hero-new);font-size:14px}.button.greyish.small{height:2rem;width:5.5rem}@media (max-width: 768px){.button.greyish.small{min-width:auto;max-width:4.8rem}}.button.greyish.active{background-color:var(--primary-balanced-teal-color);color:var(--main-white-color)}@media (max-width: 768px){.button.greyish{min-width:100%;width:auto;max-height:2rem;padding:0}}.button.start{flex-direction:row}.button.end{flex-direction:row-reverse}.mat-button-disabled{opacity:.5;pointer-events:none}.icon{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;aspect-ratio:1;background:var(--primary-connected-orange-color)}.filled .icon{background:var(--main-white-color)}.title{font-family:var(--standard-font-family-hero-new-bold);font-size:14px}.title.small,.title.dynamic{font-size:12px}.title.medium{font-size:14px}.title.x-large{font-size:1.375rem;font-family:var(--standard-font-family-hero-new)}.title.link{font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 1024px){.title{font-size:.75rem}.title.x-large{font-size:1rem}}@media (max-width: 768px){.title.large{font-family:var(--standard-font-family-hero-new-semibold)}}:host(.bold) .title{font-family:var(--standard-font-family-hero-new-semibold)}:host(.filter) .button.small{min-height:32px}:host(.filter) .title{font-size:1rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){:host(.filter) .title{font-size:14px}}:host(.filter) .button{max-width:6.5rem}@media (max-width: 768px){:host(.filter) .button{max-width:4.5rem;max-height:1.75rem}}:host(.auto-width){width:auto}:host(.full-width){width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+AfConnectButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectButtonComponent, selector: "lib-af-connect-button", inputs: { isActive: "isActive", emitValue: "emitValue", title: "title", disabled: "disabled", hybrid: "hybrid", fullWidth: "fullWidth", size: "size", variant: "variant", iconSrc: "iconSrc", iconSize: "iconSize", iconPosition: "iconPosition", activeItem: "activeItem" }, outputs: { clickBtn: "clickBtn" }, ngImport: i0, template: "<button\r\n  [class.hybrid]=\"hybrid\"\r\n  [ngClass]=\"[\r\n    fullWidth ? 'fullWidth' : '', 'button',\r\n    size,\r\n    variant,\r\n    activeItem === title || isActive ? 'active' : '',\r\n    iconPosition\r\n  ]\"\r\n  title=\"\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"this.clickBtn.emit(emitValue || title)\"\r\n>\r\n  <!-- TODO: Templates -->\r\n  <div\r\n    *ngIf=\"iconSrc\"\r\n    [ngStyle]=\"{\r\n      '-webkit-mask-image': 'url(' + iconSrc + ')',\r\n      'width': iconSize + 'px'\r\n    }\"\r\n    class=\"icon\"\r\n  >\r\n  </div>\r\n  <span [class]=\"['title', size, variant]\">{{ title }}</span>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:center;width:auto}:host(.align-right){justify-content:flex-end}:host(.align-left){justify-content:flex-start}:host(.full-width) .button{width:100%}:host(.register-button) .button{color:var(--main-white-color);border-color:var(--main-white-color)}.button{display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border-radius:30px;font-size:.8rem;padding:0 10px;background-color:var(--transparent-color);color:var(--primary-connected-orange-color);border:solid 1px var(--primary-connected-orange-color)}.button:disabled{border-color:var(--neutral-anchor-color);color:var(--neutral-anchor-color);cursor:auto}.button:disabled .icon{background:var(--neutral-anchor-color)}.button.small{width:8.4rem;height:2rem}.button.dynamic{width:100%;height:2rem}.button.medium{width:8.875rem;height:2.6rem}@media (max-width: 1024px){.button.medium{height:2.1rem}}.button.large{width:12rem;height:2.6rem}@media (max-width: 1024px){.button.large{min-width:8.5rem;height:2.3rem;font-size:12px}}.button.x-large{width:22rem;height:3.1875rem;font-size:1.375rem}@media (max-width: 1024px){.button.x-large{width:11.8rem;height:2.5rem;font-size:1rem}}.button.block{width:22rem;font-size:1rem;height:3rem}@media (max-width: 1024px){.button.block{width:11.8rem;height:2.5rem}}.button.filled{color:var(--main-white-color);background-color:var(--primary-connected-orange-color)}.button.filled:hover:not(:disabled){background:var(--primary-catalyst-yellow-color) 0% 0% no-repeat padding-box;border-color:var(--primary-catalyst-yellow-color)}.button.filled:disabled{background-color:var(--neutral-button-color);color:var(--neutral-anchor-color);border-color:var(--neutral-button-color)}.button.transparent{color:var(--main-white-color);border:solid 1px var(--main-white-color)}.button.cancel{color:var(--neutral-anchor-color);background:var(--neutral-button-color);border:none}.button.link{color:var(--primary-connected-orange-color);background:none;border:none;padding:0;height:-moz-fit-content;height:fit-content;width:auto;display:block}.button.link:disabled{color:var(--neutral-anchor-color)}.button.link:hover:not(:disabled),.button.link:disabled{background:transparent}@media (max-width: 768px){.button.hybrid{color:var(--primary-connected-orange-color);background:none;border:none;padding:0;height:-moz-fit-content;height:fit-content;width:auto;display:block}.button.hybrid:disabled{color:var(--neutral-anchor-color)}.button.hybrid:hover:not(:disabled),.button.hybrid:disabled{background:transparent}.button.hybrid .icon{display:none}}.button.fullWidth{width:100%}.button.greyish{padding:10px 8px;color:var(--main-black-color);background:var(--neutral-button-color);border:none;font-family:var(--standard-font-family-hero-new);font-size:.875rem;width:6.25rem;height:2.35rem;transition:background-color 125ms ease-in-out}.button.greyish>.title{white-space:nowrap;font-family:var(--standard-font-family-hero-new);font-size:14px}.button.greyish.small{height:2rem;width:5.5rem}@media (max-width: 768px){.button.greyish.small{min-width:auto;max-width:4.8rem}}.button.greyish.active{background-color:var(--primary-balanced-teal-color);color:var(--main-white-color)}@media (max-width: 768px){.button.greyish{min-width:100%;width:auto;max-height:2rem;padding:0}}.button.start{flex-direction:row}.button.end{flex-direction:row-reverse}.mat-button-disabled{opacity:.5;pointer-events:none}.icon{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;aspect-ratio:1;background:var(--primary-connected-orange-color)}.filled .icon{background:var(--main-white-color)}.title{font-family:var(--standard-font-family-hero-new-bold);font-size:14px}.title.small,.title.dynamic{font-size:12px}.title.medium{font-size:14px}.title.x-large{font-size:1.375rem;font-family:var(--standard-font-family-hero-new)}.title.link{font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 1024px){.title{font-size:.75rem}.title.x-large{font-size:1rem}}@media (max-width: 768px){.title.large{font-family:var(--standard-font-family-hero-new-semibold)}}:host(.bold) .title{font-family:var(--standard-font-family-hero-new-semibold)}:host(.filter) .button.small{min-height:32px}:host(.filter) .title{font-size:1rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){:host(.filter) .title{font-size:14px}}:host(.filter) .button{max-width:6.5rem}@media (max-width: 768px){:host(.filter) .button{max-width:4.5rem;max-height:1.75rem}}:host(.auto-width){width:auto}:host(.full-width){width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-button', template: "<button\n  [class.hybrid]=\"hybrid\"\n  [ngClass]=\"[\n    fullWidth ? 'fullWidth' : '', 'button',\n    size,\n    variant,\n    activeItem === title || isActive ? 'active' : '',\n    iconPosition\n  ]\"\n  title=\"\"\n  [disabled]=\"disabled\"\n  (click)=\"this.clickBtn.emit(emitValue || title)\"\n>\n  <!-- TODO: Templates -->\n  <div\n    *ngIf=\"iconSrc\"\n    [ngStyle]=\"{\n      '-webkit-mask-image': 'url(' + iconSrc + ')',\n      'width': iconSize + 'px'\n    }\"\n    class=\"icon\"\n  >\n  </div>\n  <span [class]=\"['title', size, variant]\">{{ title }}</span>\n</button>\n", styles: [":host{display:flex;justify-content:center;width:auto}:host(.align-right){justify-content:flex-end}:host(.align-left){justify-content:flex-start}:host(.full-width) .button{width:100%}:host(.register-button) .button{color:var(--main-white-color);border-color:var(--main-white-color)}.button{display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border-radius:30px;font-size:.8rem;padding:0 10px;background-color:var(--transparent-color);color:var(--primary-connected-orange-color);border:solid 1px var(--primary-connected-orange-color)}.button:disabled{border-color:var(--neutral-anchor-color);color:var(--neutral-anchor-color);cursor:auto}.button:disabled .icon{background:var(--neutral-anchor-color)}.button.small{width:8.4rem;height:2rem}.button.dynamic{width:100%;height:2rem}.button.medium{width:8.875rem;height:2.6rem}@media (max-width: 1024px){.button.medium{height:2.1rem}}.button.large{width:12rem;height:2.6rem}@media (max-width: 1024px){.button.large{min-width:8.5rem;height:2.3rem;font-size:12px}}.button.x-large{width:22rem;height:3.1875rem;font-size:1.375rem}@media (max-width: 1024px){.button.x-large{width:11.8rem;height:2.5rem;font-size:1rem}}.button.block{width:22rem;font-size:1rem;height:3rem}@media (max-width: 1024px){.button.block{width:11.8rem;height:2.5rem}}.button.filled{color:var(--main-white-color);background-color:var(--primary-connected-orange-color)}.button.filled:hover:not(:disabled){background:var(--primary-catalyst-yellow-color) 0% 0% no-repeat padding-box;border-color:var(--primary-catalyst-yellow-color)}.button.filled:disabled{background-color:var(--neutral-button-color);color:var(--neutral-anchor-color);border-color:var(--neutral-button-color)}.button.transparent{color:var(--main-white-color);border:solid 1px var(--main-white-color)}.button.cancel{color:var(--neutral-anchor-color);background:var(--neutral-button-color);border:none}.button.link{color:var(--primary-connected-orange-color);background:none;border:none;padding:0;height:-moz-fit-content;height:fit-content;width:auto;display:block}.button.link:disabled{color:var(--neutral-anchor-color)}.button.link:hover:not(:disabled),.button.link:disabled{background:transparent}@media (max-width: 768px){.button.hybrid{color:var(--primary-connected-orange-color);background:none;border:none;padding:0;height:-moz-fit-content;height:fit-content;width:auto;display:block}.button.hybrid:disabled{color:var(--neutral-anchor-color)}.button.hybrid:hover:not(:disabled),.button.hybrid:disabled{background:transparent}.button.hybrid .icon{display:none}}.button.fullWidth{width:100%}.button.greyish{padding:10px 8px;color:var(--main-black-color);background:var(--neutral-button-color);border:none;font-family:var(--standard-font-family-hero-new);font-size:.875rem;width:6.25rem;height:2.35rem;transition:background-color 125ms ease-in-out}.button.greyish>.title{white-space:nowrap;font-family:var(--standard-font-family-hero-new);font-size:14px}.button.greyish.small{height:2rem;width:5.5rem}@media (max-width: 768px){.button.greyish.small{min-width:auto;max-width:4.8rem}}.button.greyish.active{background-color:var(--primary-balanced-teal-color);color:var(--main-white-color)}@media (max-width: 768px){.button.greyish{min-width:100%;width:auto;max-height:2rem;padding:0}}.button.start{flex-direction:row}.button.end{flex-direction:row-reverse}.mat-button-disabled{opacity:.5;pointer-events:none}.icon{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;aspect-ratio:1;background:var(--primary-connected-orange-color)}.filled .icon{background:var(--main-white-color)}.title{font-family:var(--standard-font-family-hero-new-bold);font-size:14px}.title.small,.title.dynamic{font-size:12px}.title.medium{font-size:14px}.title.x-large{font-size:1.375rem;font-family:var(--standard-font-family-hero-new)}.title.link{font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 1024px){.title{font-size:.75rem}.title.x-large{font-size:1rem}}@media (max-width: 768px){.title.large{font-family:var(--standard-font-family-hero-new-semibold)}}:host(.bold) .title{font-family:var(--standard-font-family-hero-new-semibold)}:host(.filter) .button.small{min-height:32px}:host(.filter) .title{font-size:1rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){:host(.filter) .title{font-size:14px}}:host(.filter) .button{max-width:6.5rem}@media (max-width: 768px){:host(.filter) .button{max-width:4.5rem;max-height:1.75rem}}:host(.auto-width){width:auto}:host(.full-width){width:100%}\n"] }]
+            args: [{ selector: 'lib-af-connect-button', template: "<button\r\n  [class.hybrid]=\"hybrid\"\r\n  [ngClass]=\"[\r\n    fullWidth ? 'fullWidth' : '', 'button',\r\n    size,\r\n    variant,\r\n    activeItem === title || isActive ? 'active' : '',\r\n    iconPosition\r\n  ]\"\r\n  title=\"\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"this.clickBtn.emit(emitValue || title)\"\r\n>\r\n  <!-- TODO: Templates -->\r\n  <div\r\n    *ngIf=\"iconSrc\"\r\n    [ngStyle]=\"{\r\n      '-webkit-mask-image': 'url(' + iconSrc + ')',\r\n      'width': iconSize + 'px'\r\n    }\"\r\n    class=\"icon\"\r\n  >\r\n  </div>\r\n  <span [class]=\"['title', size, variant]\">{{ title }}</span>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:center;width:auto}:host(.align-right){justify-content:flex-end}:host(.align-left){justify-content:flex-start}:host(.full-width) .button{width:100%}:host(.register-button) .button{color:var(--main-white-color);border-color:var(--main-white-color)}.button{display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border-radius:30px;font-size:.8rem;padding:0 10px;background-color:var(--transparent-color);color:var(--primary-connected-orange-color);border:solid 1px var(--primary-connected-orange-color)}.button:disabled{border-color:var(--neutral-anchor-color);color:var(--neutral-anchor-color);cursor:auto}.button:disabled .icon{background:var(--neutral-anchor-color)}.button.small{width:8.4rem;height:2rem}.button.dynamic{width:100%;height:2rem}.button.medium{width:8.875rem;height:2.6rem}@media (max-width: 1024px){.button.medium{height:2.1rem}}.button.large{width:12rem;height:2.6rem}@media (max-width: 1024px){.button.large{min-width:8.5rem;height:2.3rem;font-size:12px}}.button.x-large{width:22rem;height:3.1875rem;font-size:1.375rem}@media (max-width: 1024px){.button.x-large{width:11.8rem;height:2.5rem;font-size:1rem}}.button.block{width:22rem;font-size:1rem;height:3rem}@media (max-width: 1024px){.button.block{width:11.8rem;height:2.5rem}}.button.filled{color:var(--main-white-color);background-color:var(--primary-connected-orange-color)}.button.filled:hover:not(:disabled){background:var(--primary-catalyst-yellow-color) 0% 0% no-repeat padding-box;border-color:var(--primary-catalyst-yellow-color)}.button.filled:disabled{background-color:var(--neutral-button-color);color:var(--neutral-anchor-color);border-color:var(--neutral-button-color)}.button.transparent{color:var(--main-white-color);border:solid 1px var(--main-white-color)}.button.cancel{color:var(--neutral-anchor-color);background:var(--neutral-button-color);border:none}.button.link{color:var(--primary-connected-orange-color);background:none;border:none;padding:0;height:-moz-fit-content;height:fit-content;width:auto;display:block}.button.link:disabled{color:var(--neutral-anchor-color)}.button.link:hover:not(:disabled),.button.link:disabled{background:transparent}@media (max-width: 768px){.button.hybrid{color:var(--primary-connected-orange-color);background:none;border:none;padding:0;height:-moz-fit-content;height:fit-content;width:auto;display:block}.button.hybrid:disabled{color:var(--neutral-anchor-color)}.button.hybrid:hover:not(:disabled),.button.hybrid:disabled{background:transparent}.button.hybrid .icon{display:none}}.button.fullWidth{width:100%}.button.greyish{padding:10px 8px;color:var(--main-black-color);background:var(--neutral-button-color);border:none;font-family:var(--standard-font-family-hero-new);font-size:.875rem;width:6.25rem;height:2.35rem;transition:background-color 125ms ease-in-out}.button.greyish>.title{white-space:nowrap;font-family:var(--standard-font-family-hero-new);font-size:14px}.button.greyish.small{height:2rem;width:5.5rem}@media (max-width: 768px){.button.greyish.small{min-width:auto;max-width:4.8rem}}.button.greyish.active{background-color:var(--primary-balanced-teal-color);color:var(--main-white-color)}@media (max-width: 768px){.button.greyish{min-width:100%;width:auto;max-height:2rem;padding:0}}.button.start{flex-direction:row}.button.end{flex-direction:row-reverse}.mat-button-disabled{opacity:.5;pointer-events:none}.icon{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;aspect-ratio:1;background:var(--primary-connected-orange-color)}.filled .icon{background:var(--main-white-color)}.title{font-family:var(--standard-font-family-hero-new-bold);font-size:14px}.title.small,.title.dynamic{font-size:12px}.title.medium{font-size:14px}.title.x-large{font-size:1.375rem;font-family:var(--standard-font-family-hero-new)}.title.link{font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 1024px){.title{font-size:.75rem}.title.x-large{font-size:1rem}}@media (max-width: 768px){.title.large{font-family:var(--standard-font-family-hero-new-semibold)}}:host(.bold) .title{font-family:var(--standard-font-family-hero-new-semibold)}:host(.filter) .button.small{min-height:32px}:host(.filter) .title{font-size:1rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){:host(.filter) .title{font-size:14px}}:host(.filter) .button{max-width:6.5rem}@media (max-width: 768px){:host(.filter) .button{max-width:4.5rem;max-height:1.75rem}}:host(.auto-width){width:auto}:host(.full-width){width:100%}\n"] }]
         }], propDecorators: { isActive: [{
                 type: Input
             }], emitValue: [{
@@ -733,19 +967,19 @@ class AfConnectContentComponent {
     }
 }
 AfConnectContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectContentComponent, selector: "lib-af-connect-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".base-empty-content,:host(.profile-info-container),:host(.faq-error-container),:host(.documents-error-container),:host(.investments-error-container),:host(.profile-error-container){background:var(--main-white-color);min-height:15rem;display:flex;align-items:center}:host{position:relative;height:100%;background:var(--main-white-color);padding:1rem 1.75rem;display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;box-shadow:0 23px 88px #b0b7c324;border-bottom-left-radius:5px;border-bottom-right-radius:5px}@media (max-width: 1024px){:host{padding:1rem 1.25rem;gap:.75rem}}@media (max-width: 768px){:host{padding:1rem;box-shadow:none}}@media (max-width: 1024px){:host(.beneficiary-container){padding:1rem;gap:.75rem}}@media (max-width: 1024px){:host(.external-investments-container){padding:1rem;gap:.875rem}}:host(.profile-container){padding:12px 25px 20px;gap:2.5rem;height:auto}@media (max-width: 768px){:host(.profile-container){border-radius:5px;padding:20px 18px;border:1px solid var(--primary-light-teal-color)}}.base-spinner-container,:host(.spinner-container-fund-details),:host(.spinner-container-fund),:host(.spinner-container){background:var(--main-white-color);display:flex;justify-content:center;align-items:center}:host(.spinner-container){min-height:15rem}:host(.spinner-container-fund){min-height:32rem}@media (max-width: 768px){:host(.spinner-container-fund){min-height:27rem}}:host(.spinner-container-fund-details){min-height:20rem;margin-top:2.5rem}:host(.documents-container){padding:.75rem 1rem;overflow:scroll}:host(.documents-container)::-webkit-scrollbar{display:none}@media (max-width: 768px){:host(.documents-container){padding-top:0}}@media (max-width: 1024px){:host(.profile-error-container){justify-content:center}}@media (max-width: 1024px){:host(.investments-error-container){justify-content:center}}:host(.documents-error-container){justify-content:center}@media (max-width: 1024px){:host(.faq-error-container){justify-content:center}}:host(.carousel-container){display:block;padding:0 0 .5rem}@media (max-width: 768px){:host(.carousel-container){padding:1rem 0}}:host(.profile-info-container){height:auto;padding:.875rem 1.75rem 1.75rem}@media (max-width: 768px){:host(.profile-info-container){padding:1.5rem 1rem 1.25rem}}:host(.fund-overview){padding:1rem 1.4rem;display:block}@media (max-width: 768px){:host(.fund-overview){padding:1rem;box-shadow:0 23px 88px #00000029}}:host(.chart-container){overflow:hidden;padding:0}:host(.transaction-container){background-color:var(--secondary-grey-color);height:auto}:host(.grey-color){background-color:var(--secondary-grey-color)}@media (max-width: 768px){:host(.fund-overview-tabs){background-color:var(--secondary-grey-color);box-shadow:0 23px 88px #00000029}}:host(.fund-portfolio-container-mobile){gap:1rem}:host(.claim-details-tabs){width:100%;padding:1rem 2.5rem 2rem}:host(.no-shadow){box-shadow:none}:host(.align-center){align-self:center}:host(.max-width){width:100%}@media (max-width: 768px){:host(.max-width){width:auto}}:host(.certificates-filter){padding:1rem}@media (max-width: 768px){:host(.certificates-filter){padding:.5rem 0 0}}:host(.statements-container){padding:12px 1rem 1.25rem;justify-content:space-between;flex-direction:column;gap:12px}@media (max-width: 768px){:host(.statements-container){padding:.75rem 1rem}}:host(.latest-statements-container){padding:0rem}\n"] });
+AfConnectContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectContentComponent, selector: "lib-af-connect-content", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".base-empty-content,:host(.profile-info-container),:host(.faq-error-container),:host(.documents-error-container),:host(.investments-error-container),:host(.profile-error-container){background:var(--main-white-color);min-height:15rem;display:flex;align-items:center}:host{position:relative;height:100%;background:var(--main-white-color);padding:1rem 1.75rem;display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;box-shadow:0 23px 88px #b0b7c324;border-bottom-left-radius:5px;border-bottom-right-radius:5px}@media (max-width: 1024px){:host{padding:1rem 1.25rem;gap:.75rem}}@media (max-width: 768px){:host{padding:1rem;box-shadow:none}}@media (max-width: 1024px){:host(.beneficiary-container){padding:1rem;gap:.75rem}}@media (max-width: 1024px){:host(.external-investments-container){padding:1rem;gap:.875rem}}:host(.profile-container){padding:12px 25px 20px;gap:2.5rem;height:auto}@media (max-width: 768px){:host(.profile-container){border-radius:5px;padding:20px 18px;border:1px solid var(--primary-light-teal-color)}}.base-spinner-container,:host(.spinner-container-fund-details),:host(.spinner-container-fund),:host(.spinner-container){background:var(--main-white-color);display:flex;justify-content:center;align-items:center}:host(.spinner-container){min-height:15rem}:host(.spinner-container-fund){min-height:32rem}@media (max-width: 768px){:host(.spinner-container-fund){min-height:27rem}}:host(.spinner-container-fund-details){min-height:20rem;margin-top:2.5rem}:host(.documents-container){padding:.75rem 1rem;overflow:scroll}:host(.documents-container)::-webkit-scrollbar{display:none}@media (max-width: 768px){:host(.documents-container){padding-top:0}}@media (max-width: 1024px){:host(.profile-error-container){justify-content:center}}@media (max-width: 1024px){:host(.investments-error-container){justify-content:center}}:host(.documents-error-container){justify-content:center}@media (max-width: 1024px){:host(.faq-error-container){justify-content:center}}:host(.carousel-container){display:block;padding:0 0 .5rem}@media (max-width: 768px){:host(.carousel-container){padding:1rem 0}}:host(.profile-info-container){height:auto;padding:.875rem 1.75rem 1.75rem}@media (max-width: 768px){:host(.profile-info-container){padding:1.5rem 1rem 1.25rem}}:host(.fund-overview){padding:1rem 1.4rem;display:block}@media (max-width: 768px){:host(.fund-overview){padding:1rem;box-shadow:0 23px 88px #00000029}}:host(.chart-container){overflow:hidden;padding:0}:host(.transaction-container){background-color:var(--secondary-grey-color);height:auto}:host(.grey-color){background-color:var(--secondary-grey-color)}@media (max-width: 768px){:host(.fund-overview-tabs){background-color:var(--secondary-grey-color);box-shadow:0 23px 88px #00000029}}:host(.fund-portfolio-container-mobile){gap:1rem}:host(.claim-details-tabs){width:100%;padding:1rem 2.5rem 2rem}:host(.no-shadow){box-shadow:none}:host(.align-center){align-self:center}:host(.max-width){width:100%}@media (max-width: 768px){:host(.max-width){width:auto}}:host(.certificates-filter){padding:1rem}@media (max-width: 768px){:host(.certificates-filter){padding:.5rem 0 0}}:host(.statements-container){padding:12px 1rem 1.25rem;justify-content:space-between;flex-direction:column;gap:12px}@media (max-width: 768px){:host(.statements-container){padding:.75rem 1rem}}:host(.latest-statements-container){padding:0rem}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-content', template: "<ng-content></ng-content>\n", styles: [".base-empty-content,:host(.profile-info-container),:host(.faq-error-container),:host(.documents-error-container),:host(.investments-error-container),:host(.profile-error-container){background:var(--main-white-color);min-height:15rem;display:flex;align-items:center}:host{position:relative;height:100%;background:var(--main-white-color);padding:1rem 1.75rem;display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;box-shadow:0 23px 88px #b0b7c324;border-bottom-left-radius:5px;border-bottom-right-radius:5px}@media (max-width: 1024px){:host{padding:1rem 1.25rem;gap:.75rem}}@media (max-width: 768px){:host{padding:1rem;box-shadow:none}}@media (max-width: 1024px){:host(.beneficiary-container){padding:1rem;gap:.75rem}}@media (max-width: 1024px){:host(.external-investments-container){padding:1rem;gap:.875rem}}:host(.profile-container){padding:12px 25px 20px;gap:2.5rem;height:auto}@media (max-width: 768px){:host(.profile-container){border-radius:5px;padding:20px 18px;border:1px solid var(--primary-light-teal-color)}}.base-spinner-container,:host(.spinner-container-fund-details),:host(.spinner-container-fund),:host(.spinner-container){background:var(--main-white-color);display:flex;justify-content:center;align-items:center}:host(.spinner-container){min-height:15rem}:host(.spinner-container-fund){min-height:32rem}@media (max-width: 768px){:host(.spinner-container-fund){min-height:27rem}}:host(.spinner-container-fund-details){min-height:20rem;margin-top:2.5rem}:host(.documents-container){padding:.75rem 1rem;overflow:scroll}:host(.documents-container)::-webkit-scrollbar{display:none}@media (max-width: 768px){:host(.documents-container){padding-top:0}}@media (max-width: 1024px){:host(.profile-error-container){justify-content:center}}@media (max-width: 1024px){:host(.investments-error-container){justify-content:center}}:host(.documents-error-container){justify-content:center}@media (max-width: 1024px){:host(.faq-error-container){justify-content:center}}:host(.carousel-container){display:block;padding:0 0 .5rem}@media (max-width: 768px){:host(.carousel-container){padding:1rem 0}}:host(.profile-info-container){height:auto;padding:.875rem 1.75rem 1.75rem}@media (max-width: 768px){:host(.profile-info-container){padding:1.5rem 1rem 1.25rem}}:host(.fund-overview){padding:1rem 1.4rem;display:block}@media (max-width: 768px){:host(.fund-overview){padding:1rem;box-shadow:0 23px 88px #00000029}}:host(.chart-container){overflow:hidden;padding:0}:host(.transaction-container){background-color:var(--secondary-grey-color);height:auto}:host(.grey-color){background-color:var(--secondary-grey-color)}@media (max-width: 768px){:host(.fund-overview-tabs){background-color:var(--secondary-grey-color);box-shadow:0 23px 88px #00000029}}:host(.fund-portfolio-container-mobile){gap:1rem}:host(.claim-details-tabs){width:100%;padding:1rem 2.5rem 2rem}:host(.no-shadow){box-shadow:none}:host(.align-center){align-self:center}:host(.max-width){width:100%}@media (max-width: 768px){:host(.max-width){width:auto}}:host(.certificates-filter){padding:1rem}@media (max-width: 768px){:host(.certificates-filter){padding:.5rem 0 0}}:host(.statements-container){padding:12px 1rem 1.25rem;justify-content:space-between;flex-direction:column;gap:12px}@media (max-width: 768px){:host(.statements-container){padding:.75rem 1rem}}:host(.latest-statements-container){padding:0rem}\n"] }]
+            args: [{ selector: 'lib-af-connect-content', template: "<ng-content></ng-content>\r\n", styles: [".base-empty-content,:host(.profile-info-container),:host(.faq-error-container),:host(.documents-error-container),:host(.investments-error-container),:host(.profile-error-container){background:var(--main-white-color);min-height:15rem;display:flex;align-items:center}:host{position:relative;height:100%;background:var(--main-white-color);padding:1rem 1.75rem;display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;box-shadow:0 23px 88px #b0b7c324;border-bottom-left-radius:5px;border-bottom-right-radius:5px}@media (max-width: 1024px){:host{padding:1rem 1.25rem;gap:.75rem}}@media (max-width: 768px){:host{padding:1rem;box-shadow:none}}@media (max-width: 1024px){:host(.beneficiary-container){padding:1rem;gap:.75rem}}@media (max-width: 1024px){:host(.external-investments-container){padding:1rem;gap:.875rem}}:host(.profile-container){padding:12px 25px 20px;gap:2.5rem;height:auto}@media (max-width: 768px){:host(.profile-container){border-radius:5px;padding:20px 18px;border:1px solid var(--primary-light-teal-color)}}.base-spinner-container,:host(.spinner-container-fund-details),:host(.spinner-container-fund),:host(.spinner-container){background:var(--main-white-color);display:flex;justify-content:center;align-items:center}:host(.spinner-container){min-height:15rem}:host(.spinner-container-fund){min-height:32rem}@media (max-width: 768px){:host(.spinner-container-fund){min-height:27rem}}:host(.spinner-container-fund-details){min-height:20rem;margin-top:2.5rem}:host(.documents-container){padding:.75rem 1rem;overflow:scroll}:host(.documents-container)::-webkit-scrollbar{display:none}@media (max-width: 768px){:host(.documents-container){padding-top:0}}@media (max-width: 1024px){:host(.profile-error-container){justify-content:center}}@media (max-width: 1024px){:host(.investments-error-container){justify-content:center}}:host(.documents-error-container){justify-content:center}@media (max-width: 1024px){:host(.faq-error-container){justify-content:center}}:host(.carousel-container){display:block;padding:0 0 .5rem}@media (max-width: 768px){:host(.carousel-container){padding:1rem 0}}:host(.profile-info-container){height:auto;padding:.875rem 1.75rem 1.75rem}@media (max-width: 768px){:host(.profile-info-container){padding:1.5rem 1rem 1.25rem}}:host(.fund-overview){padding:1rem 1.4rem;display:block}@media (max-width: 768px){:host(.fund-overview){padding:1rem;box-shadow:0 23px 88px #00000029}}:host(.chart-container){overflow:hidden;padding:0}:host(.transaction-container){background-color:var(--secondary-grey-color);height:auto}:host(.grey-color){background-color:var(--secondary-grey-color)}@media (max-width: 768px){:host(.fund-overview-tabs){background-color:var(--secondary-grey-color);box-shadow:0 23px 88px #00000029}}:host(.fund-portfolio-container-mobile){gap:1rem}:host(.claim-details-tabs){width:100%;padding:1rem 2.5rem 2rem}:host(.no-shadow){box-shadow:none}:host(.align-center){align-self:center}:host(.max-width){width:100%}@media (max-width: 768px){:host(.max-width){width:auto}}:host(.certificates-filter){padding:1rem}@media (max-width: 768px){:host(.certificates-filter){padding:.5rem 0 0}}:host(.statements-container){padding:12px 1rem 1.25rem;justify-content:space-between;flex-direction:column;gap:12px}@media (max-width: 768px){:host(.statements-container){padding:.75rem 1rem}}:host(.latest-statements-container){padding:0rem}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class AfConnectDatepickerComponent {
 }
 AfConnectDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectDatepickerComponent, selector: "lib-af-connect-datepicker", ngImport: i0, template: "<p>af-connect-datepicker works!</p>\n", styles: [""] });
+AfConnectDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectDatepickerComponent, selector: "lib-af-connect-datepicker", ngImport: i0, template: "<p>af-connect-datepicker works!</p>\r\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-datepicker', template: "<p>af-connect-datepicker works!</p>\n" }]
+            args: [{ selector: 'lib-af-connect-datepicker', template: "<p>af-connect-datepicker works!</p>\r\n" }]
         }] });
 
 function numberWithCommas(number) {
@@ -759,10 +993,10 @@ class AfConnectFormValidationErrorsComponent {
     }
 }
 AfConnectFormValidationErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectFormValidationErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectFormValidationErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectFormValidationErrorsComponent, selector: "lib-af-connect-form-validation-errors", inputs: { fieldText: "fieldText", control: "control" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"control && control.errors && control.dirty && control.touched\">\n    <div class=\"container__error\" *ngIf=\"control.errors['required']\">{{ fieldText }} is required</div>\n    <div class=\"container__error\" *ngIf=\"control.errors['emptyValue']\">Please enter a {{ fieldText }}</div>\n    <div class=\"container__error\" *ngIf=\"control.errors['minlength']\">\n      {{ fieldText }} must have be least {{ control.errors['minlength'].requiredLength }} symbols long\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['maxlength']\">\n      {{ fieldText }} must be no more than {{ control.errors['maxlength'].requiredLength }} symbols\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['existingProductName']\">\n      Please enter a unique Product Name. Example: Alexforbes Life Cover\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['email']\">Invalid Email address</div>\n    <div class=\"container__error\" *ngIf=\"control.errors['NAN']\">Please enter a valid number</div>\n    <div class=\"container__error\" *ngIf=\"control.errors['positiveNumber']\">\n      Please enter a positive number. Example: R100 000\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['integerNumber']\">\n      Please enter a number without any digits after the decimal point\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['max']\">\n      Please enter a number less than or equal to {{ convertToNumberWithCommas(control.errors['max'].max) }}\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['length']\">\n      {{ fieldText }} must be {{ control.errors['length'] }} digits long\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['alphabetic']\">\n      {{ fieldText }} cannot contain numbers or special characters\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['selectOptions']\">\n      Please select a valid {{ fieldText }} from the dropdown list\n    </div>\n  </div>\n  \n  <div class=\"container\" *ngIf=\"control && control.errors && control.dirty\">\n    <div class=\"container__error\" *ngIf=\"control.errors['startDateBeforeEndDate']\">\n      You have selected an incorrect date\n    </div>\n  </div>\n  ", styles: [".container__error{color:var(--primary-orange-mobile-color);font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AfConnectFormValidationErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectFormValidationErrorsComponent, selector: "lib-af-connect-form-validation-errors", inputs: { fieldText: "fieldText", control: "control" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"control && control.errors && control.dirty && control.touched\">\r\n    <div class=\"container__error\" *ngIf=\"control.errors['required']\">{{ fieldText }} is required</div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['emptyValue']\">Please enter a {{ fieldText }}</div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['minlength']\">\r\n      {{ fieldText }} must have be least {{ control.errors['minlength'].requiredLength }} symbols long\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['maxlength']\">\r\n      {{ fieldText }} must be no more than {{ control.errors['maxlength'].requiredLength }} symbols\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['existingProductName']\">\r\n      Please enter a unique Product Name. Example: Alexforbes Life Cover\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['email']\">Invalid Email address</div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['NAN']\">Please enter a valid number</div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['positiveNumber']\">\r\n      Please enter a positive number. Example: R100 000\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['integerNumber']\">\r\n      Please enter a number without any digits after the decimal point\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['max']\">\r\n      Please enter a number less than or equal to {{ convertToNumberWithCommas(control.errors['max'].max) }}\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['length']\">\r\n      {{ fieldText }} must be {{ control.errors['length'] }} digits long\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['alphabetic']\">\r\n      {{ fieldText }} cannot contain numbers or special characters\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['selectOptions']\">\r\n      Please select a valid {{ fieldText }} from the dropdown list\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"container\" *ngIf=\"control && control.errors && control.dirty\">\r\n    <div class=\"container__error\" *ngIf=\"control.errors['startDateBeforeEndDate']\">\r\n      You have selected an incorrect date\r\n    </div>\r\n  </div>\r\n  ", styles: [".container__error{color:var(--primary-orange-mobile-color);font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectFormValidationErrorsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-form-validation-errors', template: "<div class=\"container\" *ngIf=\"control && control.errors && control.dirty && control.touched\">\n    <div class=\"container__error\" *ngIf=\"control.errors['required']\">{{ fieldText }} is required</div>\n    <div class=\"container__error\" *ngIf=\"control.errors['emptyValue']\">Please enter a {{ fieldText }}</div>\n    <div class=\"container__error\" *ngIf=\"control.errors['minlength']\">\n      {{ fieldText }} must have be least {{ control.errors['minlength'].requiredLength }} symbols long\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['maxlength']\">\n      {{ fieldText }} must be no more than {{ control.errors['maxlength'].requiredLength }} symbols\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['existingProductName']\">\n      Please enter a unique Product Name. Example: Alexforbes Life Cover\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['email']\">Invalid Email address</div>\n    <div class=\"container__error\" *ngIf=\"control.errors['NAN']\">Please enter a valid number</div>\n    <div class=\"container__error\" *ngIf=\"control.errors['positiveNumber']\">\n      Please enter a positive number. Example: R100 000\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['integerNumber']\">\n      Please enter a number without any digits after the decimal point\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['max']\">\n      Please enter a number less than or equal to {{ convertToNumberWithCommas(control.errors['max'].max) }}\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['length']\">\n      {{ fieldText }} must be {{ control.errors['length'] }} digits long\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['alphabetic']\">\n      {{ fieldText }} cannot contain numbers or special characters\n    </div>\n    <div class=\"container__error\" *ngIf=\"control.errors['selectOptions']\">\n      Please select a valid {{ fieldText }} from the dropdown list\n    </div>\n  </div>\n  \n  <div class=\"container\" *ngIf=\"control && control.errors && control.dirty\">\n    <div class=\"container__error\" *ngIf=\"control.errors['startDateBeforeEndDate']\">\n      You have selected an incorrect date\n    </div>\n  </div>\n  ", styles: [".container__error{color:var(--primary-orange-mobile-color);font-size:12px}\n"] }]
+            args: [{ selector: 'lib-af-connect-form-validation-errors', template: "<div class=\"container\" *ngIf=\"control && control.errors && control.dirty && control.touched\">\r\n    <div class=\"container__error\" *ngIf=\"control.errors['required']\">{{ fieldText }} is required</div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['emptyValue']\">Please enter a {{ fieldText }}</div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['minlength']\">\r\n      {{ fieldText }} must have be least {{ control.errors['minlength'].requiredLength }} symbols long\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['maxlength']\">\r\n      {{ fieldText }} must be no more than {{ control.errors['maxlength'].requiredLength }} symbols\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['existingProductName']\">\r\n      Please enter a unique Product Name. Example: Alexforbes Life Cover\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['email']\">Invalid Email address</div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['NAN']\">Please enter a valid number</div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['positiveNumber']\">\r\n      Please enter a positive number. Example: R100 000\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['integerNumber']\">\r\n      Please enter a number without any digits after the decimal point\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['max']\">\r\n      Please enter a number less than or equal to {{ convertToNumberWithCommas(control.errors['max'].max) }}\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['length']\">\r\n      {{ fieldText }} must be {{ control.errors['length'] }} digits long\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['alphabetic']\">\r\n      {{ fieldText }} cannot contain numbers or special characters\r\n    </div>\r\n    <div class=\"container__error\" *ngIf=\"control.errors['selectOptions']\">\r\n      Please select a valid {{ fieldText }} from the dropdown list\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"container\" *ngIf=\"control && control.errors && control.dirty\">\r\n    <div class=\"container__error\" *ngIf=\"control.errors['startDateBeforeEndDate']\">\r\n      You have selected an incorrect date\r\n    </div>\r\n  </div>\r\n  ", styles: [".container__error{color:var(--primary-orange-mobile-color);font-size:12px}\n"] }]
         }], propDecorators: { fieldText: [{
                 type: Input
             }], control: [{
@@ -823,10 +1057,10 @@ class AfConnectInputComponent {
     }
 }
 AfConnectInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectInputComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AfConnectInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectInputComponent, selector: "lib-af-connect-input", inputs: { label: "label", errorReferenceText: "errorReferenceText", placeholder: "placeholder", isDisabled: "isDisabled", withAsterisk: "withAsterisk", variant: "variant", type: "type", maxLength: "maxLength", id: "id", step: "step", noFormEnabledBorder: "noFormEnabledBorder", value: "value" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"field-container\">\n    <div class=\"label-container\">\n      <label class=\"label\" [for]=\"id\"> {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span></label>\n      <lib-af-connect-form-validation-errors [control]=\"control\" [fieldText]=\"errorReferenceText || label\"></lib-af-connect-form-validation-errors>\n    </div>\n    <input\n      [type]=\"type\"\n      [step]=\"step\"\n      size=\"10\"\n      class=\"field-container-input\"\n      [ngClass]=\"[\n        variant,\n        isDisabled ? 'disabled' : 'not-disabled',\n        noFormEnabledBorder ? 'no-form-border' : '',\n        control && control.errors && control.dirty && control.touched ? 'hasError' : '',\n        control && variant === 'read-only' && control.disabled ? 'non-editable' : ''\n      ]\"\n      [maxLength]=\"maxLength\"\n      [(ngModel)]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"isDisabled || variant === 'read-only'\"\n      (blur)=\"onBlur()\"\n      (keyup)=\"handleInputChange($event)\"\n    />\n    <div *ngIf=\"control && control.errors && control.dirty && control.touched\" class=\"error-container\">\n      <img src=\"../../../assets/icons/warning.svg\" />\n    </div>\n  </div>\n  ", styles: [":host{font-family:var(--standard-font-family-hero-new);font-size:.875rem;color:var(--secondary-space-color);width:100%;position:relative}:host input:focus{outline:transparent}.field-container{display:flex;flex-direction:column}.field-container .label .asterisk{color:var(--primary-orange-mobile-color)}.field-container .label-container{display:flex;flex-wrap:wrap;padding-bottom:.5rem;gap:.5rem;justify-content:space-between}.field-container .field-container-input{font-family:var(--standard-font-family-hero-new);font-size:.875rem;padding:11px 11px 11px 1.25rem;border:1px solid transparent;outline:1px solid transparent;transition-property:outline-color,border-color,background-color;transition-duration:.2s}.field-container .field-container-input:focus{outline:1px solid var(--primary-dark-teal-color)}.field-container .field-container-input.hasError{padding-right:3rem;border:1px solid var(--primary-connected-orange-color)!important;background-color:var(--neutral-inline-error-color)}.field-container .field-container-input.hasError:focus{outline-color:var(--primary-connected-orange-color)}.field-container .field-container-input.editable.not-disabled.no-form-border{border-color:transparent}@media (max-width: 768px){.field-container .field-container-input{border-radius:var(--input-border-radius);box-shadow:var(--input-box-shadow)}}.field-container .read-only{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}.field-container .non-editable{background-color:var(--main-white-color);color:var(--warm-grey-color)}.field-container .editable{background-color:var(--main-white-color)}.field-container .editable.disabled{color:var(--secondary-space-color)}.field-container .editable.not-disabled{border-color:var(--primary-dark-teal-color)}.error-container{position:relative;display:flex;min-height:100%;justify-content:center;align-items:center}img{position:absolute;cursor:pointer;right:25px;top:-31px;width:18px;height:18px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AfConnectFormValidationErrorsComponent, selector: "lib-af-connect-form-validation-errors", inputs: ["fieldText", "control"] }] });
+AfConnectInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectInputComponent, selector: "lib-af-connect-input", inputs: { label: "label", errorReferenceText: "errorReferenceText", placeholder: "placeholder", isDisabled: "isDisabled", withAsterisk: "withAsterisk", variant: "variant", type: "type", maxLength: "maxLength", id: "id", step: "step", noFormEnabledBorder: "noFormEnabledBorder", value: "value" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"field-container\">\r\n    <div class=\"label-container\">\r\n      <label class=\"label\" [for]=\"id\"> {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span></label>\r\n      <lib-af-connect-form-validation-errors [control]=\"control\" [fieldText]=\"errorReferenceText || label\"></lib-af-connect-form-validation-errors>\r\n    </div>\r\n    <input\r\n      [type]=\"type\"\r\n      [step]=\"step\"\r\n      size=\"10\"\r\n      class=\"field-container-input\"\r\n      [ngClass]=\"[\r\n        variant,\r\n        isDisabled ? 'disabled' : 'not-disabled',\r\n        noFormEnabledBorder ? 'no-form-border' : '',\r\n        control && control.errors && control.dirty && control.touched ? 'hasError' : '',\r\n        control && variant === 'read-only' && control.disabled ? 'non-editable' : ''\r\n      ]\"\r\n      [maxLength]=\"maxLength\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled || variant === 'read-only'\"\r\n      (blur)=\"onBlur()\"\r\n      (keyup)=\"handleInputChange($event)\"\r\n    />\r\n    <div *ngIf=\"control && control.errors && control.dirty && control.touched\" class=\"error-container\">\r\n      <img src=\"../../../assets/icons/warning.svg\" />\r\n    </div>\r\n  </div>\r\n  ", styles: [":host{font-family:var(--standard-font-family-hero-new);font-size:.875rem;color:var(--secondary-space-color);width:100%;position:relative}:host input:focus{outline:transparent}.field-container{display:flex;flex-direction:column}.field-container .label .asterisk{color:var(--primary-orange-mobile-color)}.field-container .label-container{display:flex;flex-wrap:wrap;padding-bottom:.5rem;gap:.5rem;justify-content:space-between}.field-container .field-container-input{font-family:var(--standard-font-family-hero-new);font-size:.875rem;padding:11px 11px 11px 1.25rem;border:1px solid transparent;outline:1px solid transparent;transition-property:outline-color,border-color,background-color;transition-duration:.2s}.field-container .field-container-input:focus{outline:1px solid var(--primary-dark-teal-color)}.field-container .field-container-input.hasError{padding-right:3rem;border:1px solid var(--primary-connected-orange-color)!important;background-color:var(--neutral-inline-error-color)}.field-container .field-container-input.hasError:focus{outline-color:var(--primary-connected-orange-color)}.field-container .field-container-input.editable.not-disabled.no-form-border{border-color:transparent}@media (max-width: 768px){.field-container .field-container-input{border-radius:var(--input-border-radius);box-shadow:var(--input-box-shadow)}}.field-container .read-only{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}.field-container .non-editable{background-color:var(--main-white-color);color:var(--warm-grey-color)}.field-container .editable{background-color:var(--main-white-color)}.field-container .editable.disabled{color:var(--secondary-space-color)}.field-container .editable.not-disabled{border-color:var(--primary-dark-teal-color)}.error-container{position:relative;display:flex;min-height:100%;justify-content:center;align-items:center}img{position:absolute;cursor:pointer;right:25px;top:-31px;width:18px;height:18px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AfConnectFormValidationErrorsComponent, selector: "lib-af-connect-form-validation-errors", inputs: ["fieldText", "control"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-input', template: "<div class=\"field-container\">\n    <div class=\"label-container\">\n      <label class=\"label\" [for]=\"id\"> {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span></label>\n      <lib-af-connect-form-validation-errors [control]=\"control\" [fieldText]=\"errorReferenceText || label\"></lib-af-connect-form-validation-errors>\n    </div>\n    <input\n      [type]=\"type\"\n      [step]=\"step\"\n      size=\"10\"\n      class=\"field-container-input\"\n      [ngClass]=\"[\n        variant,\n        isDisabled ? 'disabled' : 'not-disabled',\n        noFormEnabledBorder ? 'no-form-border' : '',\n        control && control.errors && control.dirty && control.touched ? 'hasError' : '',\n        control && variant === 'read-only' && control.disabled ? 'non-editable' : ''\n      ]\"\n      [maxLength]=\"maxLength\"\n      [(ngModel)]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"isDisabled || variant === 'read-only'\"\n      (blur)=\"onBlur()\"\n      (keyup)=\"handleInputChange($event)\"\n    />\n    <div *ngIf=\"control && control.errors && control.dirty && control.touched\" class=\"error-container\">\n      <img src=\"../../../assets/icons/warning.svg\" />\n    </div>\n  </div>\n  ", styles: [":host{font-family:var(--standard-font-family-hero-new);font-size:.875rem;color:var(--secondary-space-color);width:100%;position:relative}:host input:focus{outline:transparent}.field-container{display:flex;flex-direction:column}.field-container .label .asterisk{color:var(--primary-orange-mobile-color)}.field-container .label-container{display:flex;flex-wrap:wrap;padding-bottom:.5rem;gap:.5rem;justify-content:space-between}.field-container .field-container-input{font-family:var(--standard-font-family-hero-new);font-size:.875rem;padding:11px 11px 11px 1.25rem;border:1px solid transparent;outline:1px solid transparent;transition-property:outline-color,border-color,background-color;transition-duration:.2s}.field-container .field-container-input:focus{outline:1px solid var(--primary-dark-teal-color)}.field-container .field-container-input.hasError{padding-right:3rem;border:1px solid var(--primary-connected-orange-color)!important;background-color:var(--neutral-inline-error-color)}.field-container .field-container-input.hasError:focus{outline-color:var(--primary-connected-orange-color)}.field-container .field-container-input.editable.not-disabled.no-form-border{border-color:transparent}@media (max-width: 768px){.field-container .field-container-input{border-radius:var(--input-border-radius);box-shadow:var(--input-box-shadow)}}.field-container .read-only{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}.field-container .non-editable{background-color:var(--main-white-color);color:var(--warm-grey-color)}.field-container .editable{background-color:var(--main-white-color)}.field-container .editable.disabled{color:var(--secondary-space-color)}.field-container .editable.not-disabled{border-color:var(--primary-dark-teal-color)}.error-container{position:relative;display:flex;min-height:100%;justify-content:center;align-items:center}img{position:absolute;cursor:pointer;right:25px;top:-31px;width:18px;height:18px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
+            args: [{ selector: 'lib-af-connect-input', template: "<div class=\"field-container\">\r\n    <div class=\"label-container\">\r\n      <label class=\"label\" [for]=\"id\"> {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span></label>\r\n      <lib-af-connect-form-validation-errors [control]=\"control\" [fieldText]=\"errorReferenceText || label\"></lib-af-connect-form-validation-errors>\r\n    </div>\r\n    <input\r\n      [type]=\"type\"\r\n      [step]=\"step\"\r\n      size=\"10\"\r\n      class=\"field-container-input\"\r\n      [ngClass]=\"[\r\n        variant,\r\n        isDisabled ? 'disabled' : 'not-disabled',\r\n        noFormEnabledBorder ? 'no-form-border' : '',\r\n        control && control.errors && control.dirty && control.touched ? 'hasError' : '',\r\n        control && variant === 'read-only' && control.disabled ? 'non-editable' : ''\r\n      ]\"\r\n      [maxLength]=\"maxLength\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"isDisabled || variant === 'read-only'\"\r\n      (blur)=\"onBlur()\"\r\n      (keyup)=\"handleInputChange($event)\"\r\n    />\r\n    <div *ngIf=\"control && control.errors && control.dirty && control.touched\" class=\"error-container\">\r\n      <img src=\"../../../assets/icons/warning.svg\" />\r\n    </div>\r\n  </div>\r\n  ", styles: [":host{font-family:var(--standard-font-family-hero-new);font-size:.875rem;color:var(--secondary-space-color);width:100%;position:relative}:host input:focus{outline:transparent}.field-container{display:flex;flex-direction:column}.field-container .label .asterisk{color:var(--primary-orange-mobile-color)}.field-container .label-container{display:flex;flex-wrap:wrap;padding-bottom:.5rem;gap:.5rem;justify-content:space-between}.field-container .field-container-input{font-family:var(--standard-font-family-hero-new);font-size:.875rem;padding:11px 11px 11px 1.25rem;border:1px solid transparent;outline:1px solid transparent;transition-property:outline-color,border-color,background-color;transition-duration:.2s}.field-container .field-container-input:focus{outline:1px solid var(--primary-dark-teal-color)}.field-container .field-container-input.hasError{padding-right:3rem;border:1px solid var(--primary-connected-orange-color)!important;background-color:var(--neutral-inline-error-color)}.field-container .field-container-input.hasError:focus{outline-color:var(--primary-connected-orange-color)}.field-container .field-container-input.editable.not-disabled.no-form-border{border-color:transparent}@media (max-width: 768px){.field-container .field-container-input{border-radius:var(--input-border-radius);box-shadow:var(--input-box-shadow)}}.field-container .read-only{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}.field-container .non-editable{background-color:var(--main-white-color);color:var(--warm-grey-color)}.field-container .editable{background-color:var(--main-white-color)}.field-container .editable.disabled{color:var(--secondary-space-color)}.field-container .editable.not-disabled{border-color:var(--primary-dark-teal-color)}.error-container{position:relative;display:flex;min-height:100%;justify-content:center;align-items:center}img{position:absolute;cursor:pointer;right:25px;top:-31px;width:18px;height:18px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
                 type: Input
             }], errorReferenceText: [{
@@ -858,10 +1092,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 class AfConnectFormGroupComponent {
 }
 AfConnectFormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectFormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectFormGroupComponent, selector: "lib-af-connect-form-group", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:grid;grid-template-columns:repeat(3,1fr);column-gap:2rem;align-items:end}@media (max-width: 1024px){:host{grid-template-columns:repeat(2,1fr);column-gap:1.5rem;row-gap:1.5rem}}@media (max-width: 480px){:host{grid-template-columns:auto}}\n"] });
+AfConnectFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectFormGroupComponent, selector: "lib-af-connect-form-group", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:grid;grid-template-columns:repeat(3,1fr);column-gap:2rem;align-items:end}@media (max-width: 1024px){:host{grid-template-columns:repeat(2,1fr);column-gap:1.5rem;row-gap:1.5rem}}@media (max-width: 480px){:host{grid-template-columns:auto}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectFormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-form-group', template: "<ng-content></ng-content>\n", styles: [":host{display:grid;grid-template-columns:repeat(3,1fr);column-gap:2rem;align-items:end}@media (max-width: 1024px){:host{grid-template-columns:repeat(2,1fr);column-gap:1.5rem;row-gap:1.5rem}}@media (max-width: 480px){:host{grid-template-columns:auto}}\n"] }]
+            args: [{ selector: 'lib-af-connect-form-group', template: "<ng-content></ng-content>\r\n", styles: [":host{display:grid;grid-template-columns:repeat(3,1fr);column-gap:2rem;align-items:end}@media (max-width: 1024px){:host{grid-template-columns:repeat(2,1fr);column-gap:1.5rem;row-gap:1.5rem}}@media (max-width: 480px){:host{grid-template-columns:auto}}\n"] }]
         }] });
 
 class AfConnectCardComponent {
@@ -871,10 +1105,10 @@ class AfConnectCardComponent {
     ngOnInit() { }
 }
 AfConnectCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectCardComponent, selector: "lib-af-connect-card", inputs: { variant: "variant" }, ngImport: i0, template: "<div [class]=\"['card', variant]\">\n    <ng-content></ng-content>\n  </div>\n  ", styles: [":host{display:flex;flex-direction:column;width:49%}@media (max-width: 1024px){:host{min-width:100%}}:host(.full-width){width:100%}:host(.document-card){-webkit-user-select:none;user-select:none}@media (max-width: 1024px){:host(.beneficiary-mobile-card) .small{border:1px solid var(--primary-dark-teal-color);max-height:-moz-fit-content;max-height:fit-content}}:host(.restricted-fund-card,.restricted-fund-mobile-card) .card{gap:1rem}.base-card,.card.small,.card.normal,.card.large{flex:1 0 auto;display:flex;flex-direction:column;border-radius:12px;background:var(--main-white-color);border:1px solid var(--primary-dark-teal-color)}.card.large{padding:2rem 2.5rem 2.5rem}@media (max-width: 768px){.card.large{padding:1rem 1rem 1.5rem;border-radius:5px;border-color:var(--warm-grey-color)}}.card.normal{border-radius:12px;padding:23px 18px 13px}@media (max-width: 1024px){.card.normal{padding:12px 9px 6px}}.card.small{border-radius:5px;padding:18px 15px}@media (max-width: 1024px){.card.small{padding:.75rem 1rem}}:host(.statement-card){width:auto;cursor:pointer}:host(.statement-card) .card.small{padding:12px 14px;border-radius:3px}@media (max-width: 1024px){:host(.expandable-card) .card.small{padding:.75rem .5rem .75rem .75rem}}\n"] });
+AfConnectCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectCardComponent, selector: "lib-af-connect-card", inputs: { variant: "variant" }, ngImport: i0, template: "<div [class]=\"['card', variant]\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  ", styles: [":host{display:flex;flex-direction:column;width:49%}@media (max-width: 1024px){:host{min-width:100%}}:host(.full-width){width:100%}:host(.document-card){-webkit-user-select:none;user-select:none}@media (max-width: 1024px){:host(.beneficiary-mobile-card) .small{border:1px solid var(--primary-dark-teal-color);max-height:-moz-fit-content;max-height:fit-content}}:host(.restricted-fund-card,.restricted-fund-mobile-card) .card{gap:1rem}.base-card,.card.small,.card.normal,.card.large{flex:1 0 auto;display:flex;flex-direction:column;border-radius:12px;background:var(--main-white-color);border:1px solid var(--primary-dark-teal-color)}.card.large{padding:2rem 2.5rem 2.5rem}@media (max-width: 768px){.card.large{padding:1rem 1rem 1.5rem;border-radius:5px;border-color:var(--warm-grey-color)}}.card.normal{border-radius:12px;padding:23px 18px 13px}@media (max-width: 1024px){.card.normal{padding:12px 9px 6px}}.card.small{border-radius:5px;padding:18px 15px}@media (max-width: 1024px){.card.small{padding:.75rem 1rem}}:host(.statement-card){width:auto;cursor:pointer}:host(.statement-card) .card.small{padding:12px 14px;border-radius:3px}@media (max-width: 1024px){:host(.expandable-card) .card.small{padding:.75rem .5rem .75rem .75rem}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-card', template: "<div [class]=\"['card', variant]\">\n    <ng-content></ng-content>\n  </div>\n  ", styles: [":host{display:flex;flex-direction:column;width:49%}@media (max-width: 1024px){:host{min-width:100%}}:host(.full-width){width:100%}:host(.document-card){-webkit-user-select:none;user-select:none}@media (max-width: 1024px){:host(.beneficiary-mobile-card) .small{border:1px solid var(--primary-dark-teal-color);max-height:-moz-fit-content;max-height:fit-content}}:host(.restricted-fund-card,.restricted-fund-mobile-card) .card{gap:1rem}.base-card,.card.small,.card.normal,.card.large{flex:1 0 auto;display:flex;flex-direction:column;border-radius:12px;background:var(--main-white-color);border:1px solid var(--primary-dark-teal-color)}.card.large{padding:2rem 2.5rem 2.5rem}@media (max-width: 768px){.card.large{padding:1rem 1rem 1.5rem;border-radius:5px;border-color:var(--warm-grey-color)}}.card.normal{border-radius:12px;padding:23px 18px 13px}@media (max-width: 1024px){.card.normal{padding:12px 9px 6px}}.card.small{border-radius:5px;padding:18px 15px}@media (max-width: 1024px){.card.small{padding:.75rem 1rem}}:host(.statement-card){width:auto;cursor:pointer}:host(.statement-card) .card.small{padding:12px 14px;border-radius:3px}@media (max-width: 1024px){:host(.expandable-card) .card.small{padding:.75rem .5rem .75rem .75rem}}\n"] }]
+            args: [{ selector: 'lib-af-connect-card', template: "<div [class]=\"['card', variant]\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  ", styles: [":host{display:flex;flex-direction:column;width:49%}@media (max-width: 1024px){:host{min-width:100%}}:host(.full-width){width:100%}:host(.document-card){-webkit-user-select:none;user-select:none}@media (max-width: 1024px){:host(.beneficiary-mobile-card) .small{border:1px solid var(--primary-dark-teal-color);max-height:-moz-fit-content;max-height:fit-content}}:host(.restricted-fund-card,.restricted-fund-mobile-card) .card{gap:1rem}.base-card,.card.small,.card.normal,.card.large{flex:1 0 auto;display:flex;flex-direction:column;border-radius:12px;background:var(--main-white-color);border:1px solid var(--primary-dark-teal-color)}.card.large{padding:2rem 2.5rem 2.5rem}@media (max-width: 768px){.card.large{padding:1rem 1rem 1.5rem;border-radius:5px;border-color:var(--warm-grey-color)}}.card.normal{border-radius:12px;padding:23px 18px 13px}@media (max-width: 1024px){.card.normal{padding:12px 9px 6px}}.card.small{border-radius:5px;padding:18px 15px}@media (max-width: 1024px){.card.small{padding:.75rem 1rem}}:host(.statement-card){width:auto;cursor:pointer}:host(.statement-card) .card.small{padding:12px 14px;border-radius:3px}@media (max-width: 1024px){:host(.expandable-card) .card.small{padding:.75rem .5rem .75rem .75rem}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { variant: [{
                 type: Input
             }] } });
@@ -891,10 +1125,10 @@ class AfConnectCardHeaderComponent {
     }
 }
 AfConnectCardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectCardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectCardHeaderComponent, selector: "lib-af-connect-card-header", inputs: { title: "title", subTitle: "subTitle", variant: "variant", hideBorderLine: "hideBorderLine", subtitleColor: "subtitleColor" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [class]=\"['card-header', variant]\" (click)=\"toggleMobileContent()\">\n    <div class=\"title-container\">\n      <div class=\"inner-title-container\">\n        <div class=\"heading-container\">\n          <span>{{ title }}</span>\n          <ng-content select=\"[headingChip]\"></ng-content>\n        </div>\n        <div class=\"chip-container\">\n          <ng-content select=\"[chip]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"subtitle\" [class]=\"[subtitleColor]\">{{ subTitle }}</div>\n    </div>\n    <div class=\"buttons-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  \n  <div *ngIf=\"!hideBorderLine\" [class]=\"['border-line', variant]\"></div>\n  ", styles: [":host{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-between}:host(.beneficiaries-header) .buttons-container{align-self:flex-start}:host(.restricted-fund-card-header){padding:.8rem}@media (max-width: 768px){:host(.restricted-fund-card-header){padding:0}}:host(.restricted-fund-card-header)>.border-line{border:1px solid var(--toggle-button-grey-color);opacity:.3;margin:.2rem}:host(.policies-header){flex-grow:0}:host(.document-card-header) .card-header.small{gap:.5rem}:host(.document-card-header) .card-header.small .title-container{gap:.25rem}.card-header-base,.card-header.small,.card-header.normal{display:flex;flex-direction:row;overflow:hidden;color:var(--primary-dark-teal-color);align-items:center;justify-content:space-between}@media (max-width: 1024px){.card-header-base,.card-header.small,.card-header.normal{gap:6px}}.buttons-container{display:flex;gap:1rem}@media (max-width: 1024px){.buttons-container{justify-content:flex-start}}:host(.claims-header) .buttons-container{display:contents}.border-line{width:100%;margin-top:.85rem;border-bottom:1px solid var(--primary-dark-teal-color)}.border-line.small{display:none}.inner-title-container{display:flex;gap:12px}.heading-container{display:flex;align-items:center;gap:1rem}.title-container-base,.card-header.small .title-container,.card-header.normal .title-container{display:flex;flex-direction:column;gap:.3rem;font-size:16px;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.title-container-base,.card-header.small .title-container,.card-header.normal .title-container{font-size:.875rem;gap:1px}}.subtitle-base,.card-header.small .subtitle,.card-header.normal .subtitle{font-size:14px;font-family:var(--standard-font-family-hero-new)}@media (max-width: 768px){.subtitle-base,.card-header.small .subtitle,.card-header.normal .subtitle{font-size:.75rem}}.orange-base,.card-header.small .subtitle.orange,.card-header.normal .subtitle.orange{color:var(--bright-orange-color);font-family:var(--standard-font-family-hero-new-bold);opacity:1}.card-header.normal .title-container{color:var(--primary-dark-teal-color)}.card-header.normal .subtitle{color:var(--primary-connected-orange-color)}.card-header.small .title-container{color:var(--secondary-black-color);font-weight:600;gap:0px}@media (max-width: 768px){.card-header.small .title-container{font-size:14px}}.card-header.small .subtitle{opacity:.5;color:var(--main-black-color)}@media (max-width: 768px){.card-header.small .subtitle{font-size:12px}}:host(.claims-header) .card-header.normal .subtitle{color:var(--claim-subtitle-color)}@media (max-width: 768px){:host(.claims-header) .card-header.normal .subtitle{color:var(--claim-info-grey)}}:host(.claims-header) .title-container{width:100%}:host(.claims-header) .inner-title-container{justify-content:space-between}@media (max-width: 768px){:host(.claims-header) .title-container-base,:host(.claims-header) .card-header.normal .title-container,:host(.claims-header) .card-header.small .title-container{flex-direction:row}:host(.claims-header) .inner-title-container{display:block}:host(.claims-header) .subtitle{margin-top:2px;margin-left:-10px}:host(.claims-header) .border-line{margin-top:.35rem}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AfConnectCardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectCardHeaderComponent, selector: "lib-af-connect-card-header", inputs: { title: "title", subTitle: "subTitle", variant: "variant", hideBorderLine: "hideBorderLine", subtitleColor: "subtitleColor" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [class]=\"['card-header', variant]\" (click)=\"toggleMobileContent()\">\r\n    <div class=\"title-container\">\r\n      <div class=\"inner-title-container\">\r\n        <div class=\"heading-container\">\r\n          <span>{{ title }}</span>\r\n          <ng-content select=\"[headingChip]\"></ng-content>\r\n        </div>\r\n        <div class=\"chip-container\">\r\n          <ng-content select=\"[chip]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"subtitle\" [class]=\"[subtitleColor]\">{{ subTitle }}</div>\r\n    </div>\r\n    <div class=\"buttons-container\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  \r\n  <div *ngIf=\"!hideBorderLine\" [class]=\"['border-line', variant]\"></div>\r\n  ", styles: [":host{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-between}:host(.beneficiaries-header) .buttons-container{align-self:flex-start}:host(.restricted-fund-card-header){padding:.8rem}@media (max-width: 768px){:host(.restricted-fund-card-header){padding:0}}:host(.restricted-fund-card-header)>.border-line{border:1px solid var(--toggle-button-grey-color);opacity:.3;margin:.2rem}:host(.policies-header){flex-grow:0}:host(.document-card-header) .card-header.small{gap:.5rem}:host(.document-card-header) .card-header.small .title-container{gap:.25rem}.card-header-base,.card-header.small,.card-header.normal{display:flex;flex-direction:row;overflow:hidden;color:var(--primary-dark-teal-color);align-items:center;justify-content:space-between}@media (max-width: 1024px){.card-header-base,.card-header.small,.card-header.normal{gap:6px}}.buttons-container{display:flex;gap:1rem}@media (max-width: 1024px){.buttons-container{justify-content:flex-start}}:host(.claims-header) .buttons-container{display:contents}.border-line{width:100%;margin-top:.85rem;border-bottom:1px solid var(--primary-dark-teal-color)}.border-line.small{display:none}.inner-title-container{display:flex;gap:12px}.heading-container{display:flex;align-items:center;gap:1rem}.title-container-base,.card-header.small .title-container,.card-header.normal .title-container{display:flex;flex-direction:column;gap:.3rem;font-size:16px;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.title-container-base,.card-header.small .title-container,.card-header.normal .title-container{font-size:.875rem;gap:1px}}.subtitle-base,.card-header.small .subtitle,.card-header.normal .subtitle{font-size:14px;font-family:var(--standard-font-family-hero-new)}@media (max-width: 768px){.subtitle-base,.card-header.small .subtitle,.card-header.normal .subtitle{font-size:.75rem}}.orange-base,.card-header.small .subtitle.orange,.card-header.normal .subtitle.orange{color:var(--bright-orange-color);font-family:var(--standard-font-family-hero-new-bold);opacity:1}.card-header.normal .title-container{color:var(--primary-dark-teal-color)}.card-header.normal .subtitle{color:var(--primary-connected-orange-color)}.card-header.small .title-container{color:var(--secondary-black-color);font-weight:600;gap:0px}@media (max-width: 768px){.card-header.small .title-container{font-size:14px}}.card-header.small .subtitle{opacity:.5;color:var(--main-black-color)}@media (max-width: 768px){.card-header.small .subtitle{font-size:12px}}:host(.claims-header) .card-header.normal .subtitle{color:var(--claim-subtitle-color)}@media (max-width: 768px){:host(.claims-header) .card-header.normal .subtitle{color:var(--claim-info-grey)}}:host(.claims-header) .title-container{width:100%}:host(.claims-header) .inner-title-container{justify-content:space-between}@media (max-width: 768px){:host(.claims-header) .title-container-base,:host(.claims-header) .card-header.normal .title-container,:host(.claims-header) .card-header.small .title-container{flex-direction:row}:host(.claims-header) .inner-title-container{display:block}:host(.claims-header) .subtitle{margin-top:2px;margin-left:-10px}:host(.claims-header) .border-line{margin-top:.35rem}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectCardHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-card-header', template: "<div [class]=\"['card-header', variant]\" (click)=\"toggleMobileContent()\">\n    <div class=\"title-container\">\n      <div class=\"inner-title-container\">\n        <div class=\"heading-container\">\n          <span>{{ title }}</span>\n          <ng-content select=\"[headingChip]\"></ng-content>\n        </div>\n        <div class=\"chip-container\">\n          <ng-content select=\"[chip]\"></ng-content>\n        </div>\n      </div>\n      <div class=\"subtitle\" [class]=\"[subtitleColor]\">{{ subTitle }}</div>\n    </div>\n    <div class=\"buttons-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  \n  <div *ngIf=\"!hideBorderLine\" [class]=\"['border-line', variant]\"></div>\n  ", styles: [":host{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-between}:host(.beneficiaries-header) .buttons-container{align-self:flex-start}:host(.restricted-fund-card-header){padding:.8rem}@media (max-width: 768px){:host(.restricted-fund-card-header){padding:0}}:host(.restricted-fund-card-header)>.border-line{border:1px solid var(--toggle-button-grey-color);opacity:.3;margin:.2rem}:host(.policies-header){flex-grow:0}:host(.document-card-header) .card-header.small{gap:.5rem}:host(.document-card-header) .card-header.small .title-container{gap:.25rem}.card-header-base,.card-header.small,.card-header.normal{display:flex;flex-direction:row;overflow:hidden;color:var(--primary-dark-teal-color);align-items:center;justify-content:space-between}@media (max-width: 1024px){.card-header-base,.card-header.small,.card-header.normal{gap:6px}}.buttons-container{display:flex;gap:1rem}@media (max-width: 1024px){.buttons-container{justify-content:flex-start}}:host(.claims-header) .buttons-container{display:contents}.border-line{width:100%;margin-top:.85rem;border-bottom:1px solid var(--primary-dark-teal-color)}.border-line.small{display:none}.inner-title-container{display:flex;gap:12px}.heading-container{display:flex;align-items:center;gap:1rem}.title-container-base,.card-header.small .title-container,.card-header.normal .title-container{display:flex;flex-direction:column;gap:.3rem;font-size:16px;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.title-container-base,.card-header.small .title-container,.card-header.normal .title-container{font-size:.875rem;gap:1px}}.subtitle-base,.card-header.small .subtitle,.card-header.normal .subtitle{font-size:14px;font-family:var(--standard-font-family-hero-new)}@media (max-width: 768px){.subtitle-base,.card-header.small .subtitle,.card-header.normal .subtitle{font-size:.75rem}}.orange-base,.card-header.small .subtitle.orange,.card-header.normal .subtitle.orange{color:var(--bright-orange-color);font-family:var(--standard-font-family-hero-new-bold);opacity:1}.card-header.normal .title-container{color:var(--primary-dark-teal-color)}.card-header.normal .subtitle{color:var(--primary-connected-orange-color)}.card-header.small .title-container{color:var(--secondary-black-color);font-weight:600;gap:0px}@media (max-width: 768px){.card-header.small .title-container{font-size:14px}}.card-header.small .subtitle{opacity:.5;color:var(--main-black-color)}@media (max-width: 768px){.card-header.small .subtitle{font-size:12px}}:host(.claims-header) .card-header.normal .subtitle{color:var(--claim-subtitle-color)}@media (max-width: 768px){:host(.claims-header) .card-header.normal .subtitle{color:var(--claim-info-grey)}}:host(.claims-header) .title-container{width:100%}:host(.claims-header) .inner-title-container{justify-content:space-between}@media (max-width: 768px){:host(.claims-header) .title-container-base,:host(.claims-header) .card-header.normal .title-container,:host(.claims-header) .card-header.small .title-container{flex-direction:row}:host(.claims-header) .inner-title-container{display:block}:host(.claims-header) .subtitle{margin-top:2px;margin-left:-10px}:host(.claims-header) .border-line{margin-top:.35rem}}\n"] }]
+            args: [{ selector: 'lib-af-connect-card-header', template: "<div [class]=\"['card-header', variant]\" (click)=\"toggleMobileContent()\">\r\n    <div class=\"title-container\">\r\n      <div class=\"inner-title-container\">\r\n        <div class=\"heading-container\">\r\n          <span>{{ title }}</span>\r\n          <ng-content select=\"[headingChip]\"></ng-content>\r\n        </div>\r\n        <div class=\"chip-container\">\r\n          <ng-content select=\"[chip]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"subtitle\" [class]=\"[subtitleColor]\">{{ subTitle }}</div>\r\n    </div>\r\n    <div class=\"buttons-container\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  \r\n  <div *ngIf=\"!hideBorderLine\" [class]=\"['border-line', variant]\"></div>\r\n  ", styles: [":host{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-between}:host(.beneficiaries-header) .buttons-container{align-self:flex-start}:host(.restricted-fund-card-header){padding:.8rem}@media (max-width: 768px){:host(.restricted-fund-card-header){padding:0}}:host(.restricted-fund-card-header)>.border-line{border:1px solid var(--toggle-button-grey-color);opacity:.3;margin:.2rem}:host(.policies-header){flex-grow:0}:host(.document-card-header) .card-header.small{gap:.5rem}:host(.document-card-header) .card-header.small .title-container{gap:.25rem}.card-header-base,.card-header.small,.card-header.normal{display:flex;flex-direction:row;overflow:hidden;color:var(--primary-dark-teal-color);align-items:center;justify-content:space-between}@media (max-width: 1024px){.card-header-base,.card-header.small,.card-header.normal{gap:6px}}.buttons-container{display:flex;gap:1rem}@media (max-width: 1024px){.buttons-container{justify-content:flex-start}}:host(.claims-header) .buttons-container{display:contents}.border-line{width:100%;margin-top:.85rem;border-bottom:1px solid var(--primary-dark-teal-color)}.border-line.small{display:none}.inner-title-container{display:flex;gap:12px}.heading-container{display:flex;align-items:center;gap:1rem}.title-container-base,.card-header.small .title-container,.card-header.normal .title-container{display:flex;flex-direction:column;gap:.3rem;font-size:16px;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.title-container-base,.card-header.small .title-container,.card-header.normal .title-container{font-size:.875rem;gap:1px}}.subtitle-base,.card-header.small .subtitle,.card-header.normal .subtitle{font-size:14px;font-family:var(--standard-font-family-hero-new)}@media (max-width: 768px){.subtitle-base,.card-header.small .subtitle,.card-header.normal .subtitle{font-size:.75rem}}.orange-base,.card-header.small .subtitle.orange,.card-header.normal .subtitle.orange{color:var(--bright-orange-color);font-family:var(--standard-font-family-hero-new-bold);opacity:1}.card-header.normal .title-container{color:var(--primary-dark-teal-color)}.card-header.normal .subtitle{color:var(--primary-connected-orange-color)}.card-header.small .title-container{color:var(--secondary-black-color);font-weight:600;gap:0px}@media (max-width: 768px){.card-header.small .title-container{font-size:14px}}.card-header.small .subtitle{opacity:.5;color:var(--main-black-color)}@media (max-width: 768px){.card-header.small .subtitle{font-size:12px}}:host(.claims-header) .card-header.normal .subtitle{color:var(--claim-subtitle-color)}@media (max-width: 768px){:host(.claims-header) .card-header.normal .subtitle{color:var(--claim-info-grey)}}:host(.claims-header) .title-container{width:100%}:host(.claims-header) .inner-title-container{justify-content:space-between}@media (max-width: 768px){:host(.claims-header) .title-container-base,:host(.claims-header) .card-header.normal .title-container,:host(.claims-header) .card-header.small .title-container{flex-direction:row}:host(.claims-header) .inner-title-container{display:block}:host(.claims-header) .subtitle{margin-top:2px;margin-left:-10px}:host(.claims-header) .border-line{margin-top:.35rem}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], subTitle: [{
@@ -915,10 +1149,10 @@ class AfConnectChipComponent {
     }
 }
 AfConnectChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectChipComponent, selector: "lib-af-connect-chip", inputs: { title: "title", borderRadius: "borderRadius", additionalStyle: "additionalStyle", variant: "variant" }, ngImport: i0, template: "<div\n  [ngClass]=\"['chip', variant]\"\n  [ngStyle]=\"{\n    borderRadius: borderRadius + 'px',\n    background: additionalStyle && additionalStyle.background ? additionalStyle.background : ''\n  }\"\n>\n  <div\n    [ngStyle]=\"{\n      color: additionalStyle && additionalStyle.color ? additionalStyle.color : ''\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;justify-content:center;align-items:center}.small,.chip.greenish-text{padding:.3rem .75rem;border-radius:1rem}.medium,.chip.percentage,.chip.greenish-count{min-width:54px;min-height:28px;border-radius:1rem;font-weight:500}.green-chip,.chip.status,.chip.greenish-count,.chip.greenish-text{background:var(--secondary-egg-shell-color);color:var(--primary-dark-teal-color)}.chip{font-size:12px;display:flex;align-items:center;justify-content:center;font-family:var(--standard-font-family-hero-new);width:-moz-fit-content;width:fit-content}@media (max-width: 768px){.chip.greenish-text{font-size:.75rem;padding:5px 10px;gap:0px}}.chip.percentage{background:var(--primary-catalyst-yellow-color-low-opacity);color:var(--primary-connected-orange-color);font-family:var(--standard-font-family-hero-new-semibold)}.chip.status{min-height:26px;font-weight:400;border-radius:1rem;padding:0 15px}.chip.claims{border-radius:1rem;padding:5.6px 15px}.chip.case-number{border-radius:1rem;border:1px solid var(--primary-dark-teal-color);color:var(--primary-dark-teal-color);padding:5.6px .75rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.chip.case-number{display:none}}.chip.dot,.chip.dot-teal,.chip.dot-orange{background:var(--secondary-egg-shell-color);color:var(--primary-dark-teal-color);padding:0 5px;border-radius:1rem;min-height:10px;display:inline-block}.chip.dot-orange{background:var(--primary-catalyst-yellow-color)}.chip.dot-teal{background:var(--primary-dark-teal-color)}:host(.transaction-modal) .chip{font-family:var(--standard-font-family-hero-new-bold);font-size:14px;padding:6px 18px}@media (max-width: 768px){:host(.transaction-modal) .chip{font-size:.875rem;padding:8px 18px}}@media (max-width: 768px){:host(.transaction-mobile) .chip{font-size:.875rem;padding:8px 18px;font-family:var(--standard-font-family-hero-new-bold)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+AfConnectChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectChipComponent, selector: "lib-af-connect-chip", inputs: { title: "title", borderRadius: "borderRadius", additionalStyle: "additionalStyle", variant: "variant" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"['chip', variant]\"\r\n  [ngStyle]=\"{\r\n    borderRadius: borderRadius + 'px',\r\n    background: additionalStyle && additionalStyle.background ? additionalStyle.background : ''\r\n  }\"\r\n>\r\n  <div\r\n    [ngStyle]=\"{\r\n      color: additionalStyle && additionalStyle.color ? additionalStyle.color : ''\r\n    }\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center}.small,.chip.greenish-text{padding:.3rem .75rem;border-radius:1rem}.medium,.chip.percentage,.chip.greenish-count{min-width:54px;min-height:28px;border-radius:1rem;font-weight:500}.green-chip,.chip.status,.chip.greenish-count,.chip.greenish-text{background:var(--secondary-egg-shell-color);color:var(--primary-dark-teal-color)}.chip{font-size:12px;display:flex;align-items:center;justify-content:center;font-family:var(--standard-font-family-hero-new);width:-moz-fit-content;width:fit-content}@media (max-width: 768px){.chip.greenish-text{font-size:.75rem;padding:5px 10px;gap:0px}}.chip.percentage{background:var(--primary-catalyst-yellow-color-low-opacity);color:var(--primary-connected-orange-color);font-family:var(--standard-font-family-hero-new-semibold)}.chip.status{min-height:26px;font-weight:400;border-radius:1rem;padding:0 15px}.chip.claims{border-radius:1rem;padding:5.6px 15px}.chip.case-number{border-radius:1rem;border:1px solid var(--primary-dark-teal-color);color:var(--primary-dark-teal-color);padding:5.6px .75rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.chip.case-number{display:none}}.chip.dot,.chip.dot-teal,.chip.dot-orange{background:var(--secondary-egg-shell-color);color:var(--primary-dark-teal-color);padding:0 5px;border-radius:1rem;min-height:10px;display:inline-block}.chip.dot-orange{background:var(--primary-catalyst-yellow-color)}.chip.dot-teal{background:var(--primary-dark-teal-color)}:host(.transaction-modal) .chip{font-family:var(--standard-font-family-hero-new-bold);font-size:14px;padding:6px 18px}@media (max-width: 768px){:host(.transaction-modal) .chip{font-size:.875rem;padding:8px 18px}}@media (max-width: 768px){:host(.transaction-mobile) .chip{font-size:.875rem;padding:8px 18px;font-family:var(--standard-font-family-hero-new-bold)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-chip', template: "<div\n  [ngClass]=\"['chip', variant]\"\n  [ngStyle]=\"{\n    borderRadius: borderRadius + 'px',\n    background: additionalStyle && additionalStyle.background ? additionalStyle.background : ''\n  }\"\n>\n  <div\n    [ngStyle]=\"{\n      color: additionalStyle && additionalStyle.color ? additionalStyle.color : ''\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;justify-content:center;align-items:center}.small,.chip.greenish-text{padding:.3rem .75rem;border-radius:1rem}.medium,.chip.percentage,.chip.greenish-count{min-width:54px;min-height:28px;border-radius:1rem;font-weight:500}.green-chip,.chip.status,.chip.greenish-count,.chip.greenish-text{background:var(--secondary-egg-shell-color);color:var(--primary-dark-teal-color)}.chip{font-size:12px;display:flex;align-items:center;justify-content:center;font-family:var(--standard-font-family-hero-new);width:-moz-fit-content;width:fit-content}@media (max-width: 768px){.chip.greenish-text{font-size:.75rem;padding:5px 10px;gap:0px}}.chip.percentage{background:var(--primary-catalyst-yellow-color-low-opacity);color:var(--primary-connected-orange-color);font-family:var(--standard-font-family-hero-new-semibold)}.chip.status{min-height:26px;font-weight:400;border-radius:1rem;padding:0 15px}.chip.claims{border-radius:1rem;padding:5.6px 15px}.chip.case-number{border-radius:1rem;border:1px solid var(--primary-dark-teal-color);color:var(--primary-dark-teal-color);padding:5.6px .75rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.chip.case-number{display:none}}.chip.dot,.chip.dot-teal,.chip.dot-orange{background:var(--secondary-egg-shell-color);color:var(--primary-dark-teal-color);padding:0 5px;border-radius:1rem;min-height:10px;display:inline-block}.chip.dot-orange{background:var(--primary-catalyst-yellow-color)}.chip.dot-teal{background:var(--primary-dark-teal-color)}:host(.transaction-modal) .chip{font-family:var(--standard-font-family-hero-new-bold);font-size:14px;padding:6px 18px}@media (max-width: 768px){:host(.transaction-modal) .chip{font-size:.875rem;padding:8px 18px}}@media (max-width: 768px){:host(.transaction-mobile) .chip{font-size:.875rem;padding:8px 18px;font-family:var(--standard-font-family-hero-new-bold)}}\n"] }]
+            args: [{ selector: 'lib-af-connect-chip', template: "<div\r\n  [ngClass]=\"['chip', variant]\"\r\n  [ngStyle]=\"{\r\n    borderRadius: borderRadius + 'px',\r\n    background: additionalStyle && additionalStyle.background ? additionalStyle.background : ''\r\n  }\"\r\n>\r\n  <div\r\n    [ngStyle]=\"{\r\n      color: additionalStyle && additionalStyle.color ? additionalStyle.color : ''\r\n    }\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center}.small,.chip.greenish-text{padding:.3rem .75rem;border-radius:1rem}.medium,.chip.percentage,.chip.greenish-count{min-width:54px;min-height:28px;border-radius:1rem;font-weight:500}.green-chip,.chip.status,.chip.greenish-count,.chip.greenish-text{background:var(--secondary-egg-shell-color);color:var(--primary-dark-teal-color)}.chip{font-size:12px;display:flex;align-items:center;justify-content:center;font-family:var(--standard-font-family-hero-new);width:-moz-fit-content;width:fit-content}@media (max-width: 768px){.chip.greenish-text{font-size:.75rem;padding:5px 10px;gap:0px}}.chip.percentage{background:var(--primary-catalyst-yellow-color-low-opacity);color:var(--primary-connected-orange-color);font-family:var(--standard-font-family-hero-new-semibold)}.chip.status{min-height:26px;font-weight:400;border-radius:1rem;padding:0 15px}.chip.claims{border-radius:1rem;padding:5.6px 15px}.chip.case-number{border-radius:1rem;border:1px solid var(--primary-dark-teal-color);color:var(--primary-dark-teal-color);padding:5.6px .75rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.chip.case-number{display:none}}.chip.dot,.chip.dot-teal,.chip.dot-orange{background:var(--secondary-egg-shell-color);color:var(--primary-dark-teal-color);padding:0 5px;border-radius:1rem;min-height:10px;display:inline-block}.chip.dot-orange{background:var(--primary-catalyst-yellow-color)}.chip.dot-teal{background:var(--primary-dark-teal-color)}:host(.transaction-modal) .chip{font-family:var(--standard-font-family-hero-new-bold);font-size:14px;padding:6px 18px}@media (max-width: 768px){:host(.transaction-modal) .chip{font-size:.875rem;padding:8px 18px}}@media (max-width: 768px){:host(.transaction-mobile) .chip{font-size:.875rem;padding:8px 18px;font-family:var(--standard-font-family-hero-new-bold)}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], borderRadius: [{
@@ -932,10 +1166,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 class AfConnectChartComponent {
 }
 AfConnectChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectChartComponent, selector: "lib-af-connect-chart", ngImport: i0, template: "<p>af-connect-chart works!</p>\n", styles: [""] });
+AfConnectChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectChartComponent, selector: "lib-af-connect-chart", ngImport: i0, template: "<p>af-connect-chart works!</p>\r\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-chart', template: "<p>af-connect-chart works!</p>\n" }]
+            args: [{ selector: 'lib-af-connect-chart', template: "<p>af-connect-chart works!</p>\r\n" }]
         }] });
 
 class AfConnectErrorComponent {
@@ -946,10 +1180,10 @@ class AfConnectErrorComponent {
     ngOnInit() { }
 }
 AfConnectErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectErrorComponent, selector: "lib-af-connect-error", inputs: { src: "src", title: "title", message: "message", height: "height", alignContent: "alignContent" }, ngImport: i0, template: "<div [class]=\"[alignContent, 'error-container', height]\">\n    <img class=\"svg\" [src]=\"src\" />\n    <span class=\"error-title\">{{ title }}</span>\n    <span class=\"error-message\">{{ message }}</span>\n  </div>\n  ", styles: ["img{background:none;border:none;width:74px;height:55px;margin-bottom:1rem}.center{align-items:center;text-align:center}.left{align-items:start}.error-container{display:flex;flex-direction:column;justify-content:center}@media (max-width: 1024px){.error-container{align-items:center;text-align:center}}.error-container.medium{height:15rem;margin-top:-1rem}.error-container.large{height:20rem;margin-top:-1rem}.error-title{font-size:18px;font-family:var(--standard-font-family-hero-new-semibold);color:var(--secondary-black-color)}.error-message{font-size:14px;font-family:var(--standard-font-family-hero-new);color:var(--secondary-black-color)}\n"] });
+AfConnectErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectErrorComponent, selector: "lib-af-connect-error", inputs: { src: "src", title: "title", message: "message", height: "height", alignContent: "alignContent" }, ngImport: i0, template: "<div [class]=\"[alignContent, 'error-container', height]\">\r\n    <img class=\"svg\" [src]=\"src\" />\r\n    <span class=\"error-title\">{{ title }}</span>\r\n    <span class=\"error-message\">{{ message }}</span>\r\n  </div>\r\n  ", styles: ["img{background:none;border:none;width:74px;height:55px;margin-bottom:1rem}.center{align-items:center;text-align:center}.left{align-items:start}.error-container{display:flex;flex-direction:column;justify-content:center}@media (max-width: 1024px){.error-container{align-items:center;text-align:center}}.error-container.medium{height:15rem;margin-top:-1rem}.error-container.large{height:20rem;margin-top:-1rem}.error-title{font-size:18px;font-family:var(--standard-font-family-hero-new-semibold);color:var(--secondary-black-color)}.error-message{font-size:14px;font-family:var(--standard-font-family-hero-new);color:var(--secondary-black-color)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-error', template: "<div [class]=\"[alignContent, 'error-container', height]\">\n    <img class=\"svg\" [src]=\"src\" />\n    <span class=\"error-title\">{{ title }}</span>\n    <span class=\"error-message\">{{ message }}</span>\n  </div>\n  ", styles: ["img{background:none;border:none;width:74px;height:55px;margin-bottom:1rem}.center{align-items:center;text-align:center}.left{align-items:start}.error-container{display:flex;flex-direction:column;justify-content:center}@media (max-width: 1024px){.error-container{align-items:center;text-align:center}}.error-container.medium{height:15rem;margin-top:-1rem}.error-container.large{height:20rem;margin-top:-1rem}.error-title{font-size:18px;font-family:var(--standard-font-family-hero-new-semibold);color:var(--secondary-black-color)}.error-message{font-size:14px;font-family:var(--standard-font-family-hero-new);color:var(--secondary-black-color)}\n"] }]
+            args: [{ selector: 'lib-af-connect-error', template: "<div [class]=\"[alignContent, 'error-container', height]\">\r\n    <img class=\"svg\" [src]=\"src\" />\r\n    <span class=\"error-title\">{{ title }}</span>\r\n    <span class=\"error-message\">{{ message }}</span>\r\n  </div>\r\n  ", styles: ["img{background:none;border:none;width:74px;height:55px;margin-bottom:1rem}.center{align-items:center;text-align:center}.left{align-items:start}.error-container{display:flex;flex-direction:column;justify-content:center}@media (max-width: 1024px){.error-container{align-items:center;text-align:center}}.error-container.medium{height:15rem;margin-top:-1rem}.error-container.large{height:20rem;margin-top:-1rem}.error-title{font-size:18px;font-family:var(--standard-font-family-hero-new-semibold);color:var(--secondary-black-color)}.error-message{font-size:14px;font-family:var(--standard-font-family-hero-new);color:var(--secondary-black-color)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { src: [{
                 type: Input
             }], title: [{
@@ -975,10 +1209,10 @@ class AfConnectInlineErrorComponent {
     }
 }
 AfConnectInlineErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectInlineErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectInlineErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectInlineErrorComponent, selector: "lib-af-connect-inline-error", inputs: { severity: "severity", message: "message", src: "src", size: "size" }, ngImport: i0, template: "<div class=\"inline-error-container\">\n    <img [class]=\"['svg', size]\" [src]=\"src\" />\n    <span class=\"inline-error-title\">{{ severity }}</span>\n    <span class=\"inline-error-message\">{{ message }}</span>\n  </div>\n  ", styles: [":host{display:flex;min-height:2rem;padding-top:.5em;flex-direction:column}img{background:none;border:none;cursor:pointer;justify-content:center}.svg.small{width:14px;height:14px}.svg.medium{width:16px;height:16px}@media (max-width: 768px){.svg.medium{width:14px;height:14px}}@media (max-width: 1024px){.svg.large{width:23px;height:23px}}.inline-error-container{background:var(--neutral-inline-error-color);border:1px solid var(--primary-orange-mobile-color);border-radius:5px;padding:.5rem 1rem;opacity:1;display:flex;align-items:center;gap:1rem;border-left:8px solid var(--primary-orange-mobile-color)}.inline-error-title{font-family:Hero New SemiBold;font-size:14px;color:var(--main-black-color);display:flex;justify-content:center}.inline-error-message{font-size:12px;color:var(--main-black-color);display:flex;justify-content:center}\n"] });
+AfConnectInlineErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectInlineErrorComponent, selector: "lib-af-connect-inline-error", inputs: { severity: "severity", message: "message", src: "src", size: "size" }, ngImport: i0, template: "<div class=\"inline-error-container\">\r\n    <img [class]=\"['svg', size]\" [src]=\"src\" />\r\n    <span class=\"inline-error-title\">{{ severity }}</span>\r\n    <span class=\"inline-error-message\">{{ message }}</span>\r\n  </div>\r\n  ", styles: [":host{display:flex;min-height:2rem;padding-top:.5em;flex-direction:column}img{background:none;border:none;cursor:pointer;justify-content:center}.svg.small{width:14px;height:14px}.svg.medium{width:16px;height:16px}@media (max-width: 768px){.svg.medium{width:14px;height:14px}}@media (max-width: 1024px){.svg.large{width:23px;height:23px}}.inline-error-container{background:var(--neutral-inline-error-color);border:1px solid var(--primary-orange-mobile-color);border-radius:5px;padding:.5rem 1rem;opacity:1;display:flex;align-items:center;gap:1rem;border-left:8px solid var(--primary-orange-mobile-color)}.inline-error-title{font-family:Hero New SemiBold;font-size:14px;color:var(--main-black-color);display:flex;justify-content:center}.inline-error-message{font-size:12px;color:var(--main-black-color);display:flex;justify-content:center}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectInlineErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-inline-error', template: "<div class=\"inline-error-container\">\n    <img [class]=\"['svg', size]\" [src]=\"src\" />\n    <span class=\"inline-error-title\">{{ severity }}</span>\n    <span class=\"inline-error-message\">{{ message }}</span>\n  </div>\n  ", styles: [":host{display:flex;min-height:2rem;padding-top:.5em;flex-direction:column}img{background:none;border:none;cursor:pointer;justify-content:center}.svg.small{width:14px;height:14px}.svg.medium{width:16px;height:16px}@media (max-width: 768px){.svg.medium{width:14px;height:14px}}@media (max-width: 1024px){.svg.large{width:23px;height:23px}}.inline-error-container{background:var(--neutral-inline-error-color);border:1px solid var(--primary-orange-mobile-color);border-radius:5px;padding:.5rem 1rem;opacity:1;display:flex;align-items:center;gap:1rem;border-left:8px solid var(--primary-orange-mobile-color)}.inline-error-title{font-family:Hero New SemiBold;font-size:14px;color:var(--main-black-color);display:flex;justify-content:center}.inline-error-message{font-size:12px;color:var(--main-black-color);display:flex;justify-content:center}\n"] }]
+            args: [{ selector: 'lib-af-connect-inline-error', template: "<div class=\"inline-error-container\">\r\n    <img [class]=\"['svg', size]\" [src]=\"src\" />\r\n    <span class=\"inline-error-title\">{{ severity }}</span>\r\n    <span class=\"inline-error-message\">{{ message }}</span>\r\n  </div>\r\n  ", styles: [":host{display:flex;min-height:2rem;padding-top:.5em;flex-direction:column}img{background:none;border:none;cursor:pointer;justify-content:center}.svg.small{width:14px;height:14px}.svg.medium{width:16px;height:16px}@media (max-width: 768px){.svg.medium{width:14px;height:14px}}@media (max-width: 1024px){.svg.large{width:23px;height:23px}}.inline-error-container{background:var(--neutral-inline-error-color);border:1px solid var(--primary-orange-mobile-color);border-radius:5px;padding:.5rem 1rem;opacity:1;display:flex;align-items:center;gap:1rem;border-left:8px solid var(--primary-orange-mobile-color)}.inline-error-title{font-family:Hero New SemiBold;font-size:14px;color:var(--main-black-color);display:flex;justify-content:center}.inline-error-message{font-size:12px;color:var(--main-black-color);display:flex;justify-content:center}\n"] }]
         }], propDecorators: { severity: [{
                 type: Input
             }], message: [{
@@ -997,10 +1231,10 @@ class AfConnectLoadingSpinnerComponent {
     }
 }
 AfConnectLoadingSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectLoadingSpinnerComponent, selector: "lib-af-connect-loading-spinner", inputs: { size: "size" }, ngImport: i0, template: "<div class=\"spinner\">\n    <div [class]=\"size\"></div>\n    <div [class]=\"size\"></div>\n    <div [class]=\"size\"></div>\n    <div [class]=\"size\"></div>\n</div>", styles: [":host{display:flex;justify-content:center;align-self:center}.spinner{display:inline-block;position:relative;width:80px;height:80px}.spinner div{box-sizing:border-box;display:block;position:absolute;width:4rem;height:4rem;margin:.5rem;border:.5rem solid var(--primary-dark-teal-color);border-radius:50%;animation:spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--primary-dark-teal-color) transparent transparent transparent}.spinner div.small{width:1rem;height:1rem;border-width:.2rem;border-color:var(--neutral-anchor-color) transparent transparent transparent}.spinner div:nth-child(1){animation-delay:-.45s}.spinner div:nth-child(2){animation-delay:-.3s}.spinner div:nth-child(3){animation-delay:-.15s}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.btn-spinner) .spinner{width:40px;height:40px}:host(.btn-spinner) .spinner div{width:1.5rem;height:1.5rem;border:.15rem solid #fff;border-color:#fff transparent transparent transparent}\n"] });
+AfConnectLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectLoadingSpinnerComponent, selector: "lib-af-connect-loading-spinner", inputs: { size: "size" }, ngImport: i0, template: "<div class=\"spinner\">\r\n    <div [class]=\"size\"></div>\r\n    <div [class]=\"size\"></div>\r\n    <div [class]=\"size\"></div>\r\n    <div [class]=\"size\"></div>\r\n</div>", styles: [":host{display:flex;justify-content:center;align-self:center}.spinner{display:inline-block;position:relative;width:80px;height:80px}.spinner div{box-sizing:border-box;display:block;position:absolute;width:4rem;height:4rem;margin:.5rem;border:.5rem solid var(--primary-dark-teal-color);border-radius:50%;animation:spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--primary-dark-teal-color) transparent transparent transparent}.spinner div.small{width:1rem;height:1rem;border-width:.2rem;border-color:var(--neutral-anchor-color) transparent transparent transparent}.spinner div:nth-child(1){animation-delay:-.45s}.spinner div:nth-child(2){animation-delay:-.3s}.spinner div:nth-child(3){animation-delay:-.15s}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.btn-spinner) .spinner{width:40px;height:40px}:host(.btn-spinner) .spinner div{width:1.5rem;height:1.5rem;border:.15rem solid #fff;border-color:#fff transparent transparent transparent}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectLoadingSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-loading-spinner', template: "<div class=\"spinner\">\n    <div [class]=\"size\"></div>\n    <div [class]=\"size\"></div>\n    <div [class]=\"size\"></div>\n    <div [class]=\"size\"></div>\n</div>", styles: [":host{display:flex;justify-content:center;align-self:center}.spinner{display:inline-block;position:relative;width:80px;height:80px}.spinner div{box-sizing:border-box;display:block;position:absolute;width:4rem;height:4rem;margin:.5rem;border:.5rem solid var(--primary-dark-teal-color);border-radius:50%;animation:spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--primary-dark-teal-color) transparent transparent transparent}.spinner div.small{width:1rem;height:1rem;border-width:.2rem;border-color:var(--neutral-anchor-color) transparent transparent transparent}.spinner div:nth-child(1){animation-delay:-.45s}.spinner div:nth-child(2){animation-delay:-.3s}.spinner div:nth-child(3){animation-delay:-.15s}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.btn-spinner) .spinner{width:40px;height:40px}:host(.btn-spinner) .spinner div{width:1.5rem;height:1.5rem;border:.15rem solid #fff;border-color:#fff transparent transparent transparent}\n"] }]
+            args: [{ selector: 'lib-af-connect-loading-spinner', template: "<div class=\"spinner\">\r\n    <div [class]=\"size\"></div>\r\n    <div [class]=\"size\"></div>\r\n    <div [class]=\"size\"></div>\r\n    <div [class]=\"size\"></div>\r\n</div>", styles: [":host{display:flex;justify-content:center;align-self:center}.spinner{display:inline-block;position:relative;width:80px;height:80px}.spinner div{box-sizing:border-box;display:block;position:absolute;width:4rem;height:4rem;margin:.5rem;border:.5rem solid var(--primary-dark-teal-color);border-radius:50%;animation:spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--primary-dark-teal-color) transparent transparent transparent}.spinner div.small{width:1rem;height:1rem;border-width:.2rem;border-color:var(--neutral-anchor-color) transparent transparent transparent}.spinner div:nth-child(1){animation-delay:-.45s}.spinner div:nth-child(2){animation-delay:-.3s}.spinner div:nth-child(3){animation-delay:-.15s}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.btn-spinner) .spinner{width:40px;height:40px}:host(.btn-spinner) .spinner div{width:1.5rem;height:1.5rem;border:.15rem solid #fff;border-color:#fff transparent transparent transparent}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { size: [{
                 type: Input
             }] } });
@@ -1013,10 +1247,10 @@ class AfConnectSvgButtonComponent {
     ngOnInit() { }
 }
 AfConnectSvgButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectSvgButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectSvgButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectSvgButtonComponent, selector: "lib-af-connect-svg-button", inputs: { src: "src", emitValue: "emitValue", customSize: "customSize", size: "size" }, outputs: { clickBtn: "clickBtn" }, ngImport: i0, template: "<img\n  [class]=\"['svg', size]\"\n  [ngStyle]=\"{ width: customSize, height: customSize }\"\n  (click)=\"this.clickBtn.emit(emitValue)\"\n  [src]=\"src\"\n/>\n", styles: [":host{display:flex;justify-content:center;align-items:center}img{background:none;border:none;padding:0;cursor:pointer}.svg.small{width:14px;height:14px}.svg.medium{width:30px;height:30px}@media (max-width: 768px){.svg.medium{width:20px;height:20px}}.svg.large{width:42px;height:42px}@media (max-width: 1024px){.svg.large.large{width:32px;height:32px}}@media (max-width: 1024px){:host(.external-info) img{width:14px;height:14px}}@media (max-width: 1024px){:host(.external-investments) img{width:16px;height:16px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+AfConnectSvgButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectSvgButtonComponent, selector: "lib-af-connect-svg-button", inputs: { src: "src", emitValue: "emitValue", customSize: "customSize", size: "size" }, outputs: { clickBtn: "clickBtn" }, ngImport: i0, template: "<img\r\n  [class]=\"['svg', size]\"\r\n  [ngStyle]=\"{ width: customSize, height: customSize }\"\r\n  (click)=\"this.clickBtn.emit(emitValue)\"\r\n  [src]=\"src\"\r\n/>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center}img{background:none;border:none;padding:0;cursor:pointer}.svg.small{width:14px;height:14px}.svg.medium{width:30px;height:30px}@media (max-width: 768px){.svg.medium{width:20px;height:20px}}.svg.large{width:42px;height:42px}@media (max-width: 1024px){.svg.large.large{width:32px;height:32px}}@media (max-width: 1024px){:host(.external-info) img{width:14px;height:14px}}@media (max-width: 1024px){:host(.external-investments) img{width:16px;height:16px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectSvgButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-svg-button', template: "<img\n  [class]=\"['svg', size]\"\n  [ngStyle]=\"{ width: customSize, height: customSize }\"\n  (click)=\"this.clickBtn.emit(emitValue)\"\n  [src]=\"src\"\n/>\n", styles: [":host{display:flex;justify-content:center;align-items:center}img{background:none;border:none;padding:0;cursor:pointer}.svg.small{width:14px;height:14px}.svg.medium{width:30px;height:30px}@media (max-width: 768px){.svg.medium{width:20px;height:20px}}.svg.large{width:42px;height:42px}@media (max-width: 1024px){.svg.large.large{width:32px;height:32px}}@media (max-width: 1024px){:host(.external-info) img{width:14px;height:14px}}@media (max-width: 1024px){:host(.external-investments) img{width:16px;height:16px}}\n"] }]
+            args: [{ selector: 'lib-af-connect-svg-button', template: "<img\r\n  [class]=\"['svg', size]\"\r\n  [ngStyle]=\"{ width: customSize, height: customSize }\"\r\n  (click)=\"this.clickBtn.emit(emitValue)\"\r\n  [src]=\"src\"\r\n/>\r\n", styles: [":host{display:flex;justify-content:center;align-items:center}img{background:none;border:none;padding:0;cursor:pointer}.svg.small{width:14px;height:14px}.svg.medium{width:30px;height:30px}@media (max-width: 768px){.svg.medium{width:20px;height:20px}}.svg.large{width:42px;height:42px}@media (max-width: 1024px){.svg.large.large{width:32px;height:32px}}@media (max-width: 1024px){:host(.external-info) img{width:14px;height:14px}}@media (max-width: 1024px){:host(.external-investments) img{width:16px;height:16px}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { src: [{
                 type: Input
             }], emitValue: [{
@@ -1090,10 +1324,10 @@ class AfConnectModalComponent {
     }
 }
 AfConnectModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AfConnectModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectModalComponent, selector: "lib-af-connect-modal", inputs: { isOpen: "isOpen", disableOutsideClickClose: "disableOutsideClickClose", withCloseButton: "withCloseButton", variant: "variant", header: "header", content: "content", width: "width", noScrollbarContentContainer: "noScrollbarContentContainer", reversedPadding: "reversedPadding", borderHighlight: "borderHighlight" }, outputs: { onClose: "onClose" }, queries: [{ propertyName: "buttons", predicate: AfConnectButtonComponent, descendants: true }, { propertyName: "svgButton", predicate: AfConnectSvgButtonComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-wrapper\" (click)=\"toggleModal()\">\n    <ng-content select=\"[isOpenButton]\"></ng-content>\n  </div>\n  \n  <div *ngIf=\"isOpen\" class=\"background-container\" (click)=\"externalClickClose($event)\">\n    <div\n      [ngStyle]=\"{ width: width + 'px' }\"\n      [ngClass]=\"[\n        'content-container',\n        variant,\n        noScrollbarContentContainer ? 'noScrollbar' : '',\n        borderHighlight ? 'with-border' : ''\n      ]\"\n    >\n      <div *ngIf=\"variant !== 'standard'\" class=\"color-bar\"></div>\n      <div [ngStyle]=\"{ padding: reversedPadding ? '0px' : null }\" class=\"inner-container\">\n        <div\n          *ngIf=\"header\"\n          class=\"header-container\"\n          [ngStyle]=\"{ padding: reversedPadding ? '24px 24px 20px 24px' : null }\"\n        >\n          <div class=\"header-content\">\n            <img *ngIf=\"variant === 'error'\" src=\"../../../../assets/icons/warning.svg\" class=\"warning-icon\" />\n            {{ header }}\n          </div>\n          <lib-af-connect-svg-button\n            *ngIf=\"withCloseButton\"\n            size=\"small\"\n            src=\"../../../assets/icons/delete.svg\"\n            emitValue=\"isCloseModal\"\n            (clickBtn)=\"toggleModal()\"\n          ></lib-af-connect-svg-button>\n        </div>\n        <div class=\"body-container\">\n          <ng-container *ngIf=\"content\">\n            {{ content }}\n          </ng-container>\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n  ", styles: [".background-container{top:0;left:0;width:100%;height:100vh;position:fixed;background:rgba(0,0,0,.2);z-index:2000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:hidden}.content-container{box-sizing:border-box;z-index:2050;position:relative;top:15%;margin:auto;overflow:auto;max-height:75%;background:var(--main-white-color);border-radius:5px;max-width:85%}@media (max-width: 768px){.content-container{max-height:95%;width:auto;max-width:95%;top:5%}}.content-container.noScrollbar{overflow:hidden}.content-container.error,.content-container.info{display:flex;align-items:stretch}.content-container.error .inner-container,.content-container.info .inner-container{padding:1.25rem}.content-container.error .header-container,.content-container.info .header-container{color:var(--main-black-color);border-bottom-color:var(--claim-info-grey)}@media (max-width: 768px){.content-container.error .header-container,.content-container.info .header-container{padding-bottom:1.25rem}}.content-container.error .body-container,.content-container.info .body-container{padding-block:1.25rem .5rem}@media (max-width: 768px){.content-container.error .body-container,.content-container.info .body-container{padding-top:1rem}}.inner-container{box-sizing:border-box;width:100%;padding:1.5rem}@media (max-width: 768px){.inner-container{padding:1rem}}.color-bar{width:.5rem;background-color:var(--primary-connected-orange-color)}.header-container{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--primary-dark-teal-color);padding-bottom:1.25rem;color:var(--primary-dark-teal-color);font-size:1.25rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.header-container{font-size:1.125rem;padding-bottom:.5rem}}.header-content{display:flex;align-items:center;gap:1.25rem}.header-content .warning-icon{width:2rem;aspect-ratio:1}@media (max-width: 768px){.header-content{gap:.875rem}.header-content .warning-icon{width:1.625rem}}.content-container.with-border{border-left:8px solid var(--primary-orange-mobile-color)}:host(.claim-details-modal-mobile) .body-container{display:flex}:host(.claim-details-modal-mobile) .inner-container{max-height:90vh}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AfConnectSvgButtonComponent, selector: "lib-af-connect-svg-button", inputs: ["src", "emitValue", "customSize", "size"], outputs: ["clickBtn"] }] });
+AfConnectModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectModalComponent, selector: "lib-af-connect-modal", inputs: { isOpen: "isOpen", disableOutsideClickClose: "disableOutsideClickClose", withCloseButton: "withCloseButton", variant: "variant", header: "header", content: "content", width: "width", noScrollbarContentContainer: "noScrollbarContentContainer", reversedPadding: "reversedPadding", borderHighlight: "borderHighlight" }, outputs: { onClose: "onClose" }, queries: [{ propertyName: "buttons", predicate: AfConnectButtonComponent, descendants: true }, { propertyName: "svgButton", predicate: AfConnectSvgButtonComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-wrapper\" (click)=\"toggleModal()\">\r\n    <ng-content select=\"[isOpenButton]\"></ng-content>\r\n  </div>\r\n  \r\n  <div *ngIf=\"isOpen\" class=\"background-container\" (click)=\"externalClickClose($event)\">\r\n    <div\r\n      [ngStyle]=\"{ width: width + 'px' }\"\r\n      [ngClass]=\"[\r\n        'content-container',\r\n        variant,\r\n        noScrollbarContentContainer ? 'noScrollbar' : '',\r\n        borderHighlight ? 'with-border' : ''\r\n      ]\"\r\n    >\r\n      <div *ngIf=\"variant !== 'standard'\" class=\"color-bar\"></div>\r\n      <div [ngStyle]=\"{ padding: reversedPadding ? '0px' : null }\" class=\"inner-container\">\r\n        <div\r\n          *ngIf=\"header\"\r\n          class=\"header-container\"\r\n          [ngStyle]=\"{ padding: reversedPadding ? '24px 24px 20px 24px' : null }\"\r\n        >\r\n          <div class=\"header-content\">\r\n            <img *ngIf=\"variant === 'error'\" src=\"../../../../assets/icons/warning.svg\" class=\"warning-icon\" />\r\n            {{ header }}\r\n          </div>\r\n          <lib-af-connect-svg-button\r\n            *ngIf=\"withCloseButton\"\r\n            size=\"small\"\r\n            src=\"../../../assets/icons/delete.svg\"\r\n            emitValue=\"isCloseModal\"\r\n            (clickBtn)=\"toggleModal()\"\r\n          ></lib-af-connect-svg-button>\r\n        </div>\r\n        <div class=\"body-container\">\r\n          <ng-container *ngIf=\"content\">\r\n            {{ content }}\r\n          </ng-container>\r\n          <ng-content></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".background-container{top:0;left:0;width:100%;height:100vh;position:fixed;background:rgba(0,0,0,.2);z-index:2000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:hidden}.content-container{box-sizing:border-box;z-index:2050;position:relative;top:15%;margin:auto;overflow:auto;max-height:75%;background:var(--main-white-color);border-radius:5px;max-width:85%}@media (max-width: 768px){.content-container{max-height:95%;width:auto;max-width:95%;top:5%}}.content-container.noScrollbar{overflow:hidden}.content-container.error,.content-container.info{display:flex;align-items:stretch}.content-container.error .inner-container,.content-container.info .inner-container{padding:1.25rem}.content-container.error .header-container,.content-container.info .header-container{color:var(--main-black-color);border-bottom-color:var(--claim-info-grey)}@media (max-width: 768px){.content-container.error .header-container,.content-container.info .header-container{padding-bottom:1.25rem}}.content-container.error .body-container,.content-container.info .body-container{padding-block:1.25rem .5rem}@media (max-width: 768px){.content-container.error .body-container,.content-container.info .body-container{padding-top:1rem}}.inner-container{box-sizing:border-box;width:100%;padding:1.5rem}@media (max-width: 768px){.inner-container{padding:1rem}}.color-bar{width:.5rem;background-color:var(--primary-connected-orange-color)}.header-container{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--primary-dark-teal-color);padding-bottom:1.25rem;color:var(--primary-dark-teal-color);font-size:1.25rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.header-container{font-size:1.125rem;padding-bottom:.5rem}}.header-content{display:flex;align-items:center;gap:1.25rem}.header-content .warning-icon{width:2rem;aspect-ratio:1}@media (max-width: 768px){.header-content{gap:.875rem}.header-content .warning-icon{width:1.625rem}}.content-container.with-border{border-left:8px solid var(--primary-orange-mobile-color)}:host(.claim-details-modal-mobile) .body-container{display:flex}:host(.claim-details-modal-mobile) .inner-container{max-height:90vh}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AfConnectSvgButtonComponent, selector: "lib-af-connect-svg-button", inputs: ["src", "emitValue", "customSize", "size"], outputs: ["clickBtn"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-modal', template: "<div class=\"modal-wrapper\" (click)=\"toggleModal()\">\n    <ng-content select=\"[isOpenButton]\"></ng-content>\n  </div>\n  \n  <div *ngIf=\"isOpen\" class=\"background-container\" (click)=\"externalClickClose($event)\">\n    <div\n      [ngStyle]=\"{ width: width + 'px' }\"\n      [ngClass]=\"[\n        'content-container',\n        variant,\n        noScrollbarContentContainer ? 'noScrollbar' : '',\n        borderHighlight ? 'with-border' : ''\n      ]\"\n    >\n      <div *ngIf=\"variant !== 'standard'\" class=\"color-bar\"></div>\n      <div [ngStyle]=\"{ padding: reversedPadding ? '0px' : null }\" class=\"inner-container\">\n        <div\n          *ngIf=\"header\"\n          class=\"header-container\"\n          [ngStyle]=\"{ padding: reversedPadding ? '24px 24px 20px 24px' : null }\"\n        >\n          <div class=\"header-content\">\n            <img *ngIf=\"variant === 'error'\" src=\"../../../../assets/icons/warning.svg\" class=\"warning-icon\" />\n            {{ header }}\n          </div>\n          <lib-af-connect-svg-button\n            *ngIf=\"withCloseButton\"\n            size=\"small\"\n            src=\"../../../assets/icons/delete.svg\"\n            emitValue=\"isCloseModal\"\n            (clickBtn)=\"toggleModal()\"\n          ></lib-af-connect-svg-button>\n        </div>\n        <div class=\"body-container\">\n          <ng-container *ngIf=\"content\">\n            {{ content }}\n          </ng-container>\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  </div>\n  ", styles: [".background-container{top:0;left:0;width:100%;height:100vh;position:fixed;background:rgba(0,0,0,.2);z-index:2000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:hidden}.content-container{box-sizing:border-box;z-index:2050;position:relative;top:15%;margin:auto;overflow:auto;max-height:75%;background:var(--main-white-color);border-radius:5px;max-width:85%}@media (max-width: 768px){.content-container{max-height:95%;width:auto;max-width:95%;top:5%}}.content-container.noScrollbar{overflow:hidden}.content-container.error,.content-container.info{display:flex;align-items:stretch}.content-container.error .inner-container,.content-container.info .inner-container{padding:1.25rem}.content-container.error .header-container,.content-container.info .header-container{color:var(--main-black-color);border-bottom-color:var(--claim-info-grey)}@media (max-width: 768px){.content-container.error .header-container,.content-container.info .header-container{padding-bottom:1.25rem}}.content-container.error .body-container,.content-container.info .body-container{padding-block:1.25rem .5rem}@media (max-width: 768px){.content-container.error .body-container,.content-container.info .body-container{padding-top:1rem}}.inner-container{box-sizing:border-box;width:100%;padding:1.5rem}@media (max-width: 768px){.inner-container{padding:1rem}}.color-bar{width:.5rem;background-color:var(--primary-connected-orange-color)}.header-container{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--primary-dark-teal-color);padding-bottom:1.25rem;color:var(--primary-dark-teal-color);font-size:1.25rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.header-container{font-size:1.125rem;padding-bottom:.5rem}}.header-content{display:flex;align-items:center;gap:1.25rem}.header-content .warning-icon{width:2rem;aspect-ratio:1}@media (max-width: 768px){.header-content{gap:.875rem}.header-content .warning-icon{width:1.625rem}}.content-container.with-border{border-left:8px solid var(--primary-orange-mobile-color)}:host(.claim-details-modal-mobile) .body-container{display:flex}:host(.claim-details-modal-mobile) .inner-container{max-height:90vh}\n"] }]
+            args: [{ selector: 'lib-af-connect-modal', template: "<div class=\"modal-wrapper\" (click)=\"toggleModal()\">\r\n    <ng-content select=\"[isOpenButton]\"></ng-content>\r\n  </div>\r\n  \r\n  <div *ngIf=\"isOpen\" class=\"background-container\" (click)=\"externalClickClose($event)\">\r\n    <div\r\n      [ngStyle]=\"{ width: width + 'px' }\"\r\n      [ngClass]=\"[\r\n        'content-container',\r\n        variant,\r\n        noScrollbarContentContainer ? 'noScrollbar' : '',\r\n        borderHighlight ? 'with-border' : ''\r\n      ]\"\r\n    >\r\n      <div *ngIf=\"variant !== 'standard'\" class=\"color-bar\"></div>\r\n      <div [ngStyle]=\"{ padding: reversedPadding ? '0px' : null }\" class=\"inner-container\">\r\n        <div\r\n          *ngIf=\"header\"\r\n          class=\"header-container\"\r\n          [ngStyle]=\"{ padding: reversedPadding ? '24px 24px 20px 24px' : null }\"\r\n        >\r\n          <div class=\"header-content\">\r\n            <img *ngIf=\"variant === 'error'\" src=\"../../../../assets/icons/warning.svg\" class=\"warning-icon\" />\r\n            {{ header }}\r\n          </div>\r\n          <lib-af-connect-svg-button\r\n            *ngIf=\"withCloseButton\"\r\n            size=\"small\"\r\n            src=\"../../../assets/icons/delete.svg\"\r\n            emitValue=\"isCloseModal\"\r\n            (clickBtn)=\"toggleModal()\"\r\n          ></lib-af-connect-svg-button>\r\n        </div>\r\n        <div class=\"body-container\">\r\n          <ng-container *ngIf=\"content\">\r\n            {{ content }}\r\n          </ng-container>\r\n          <ng-content></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".background-container{top:0;left:0;width:100%;height:100vh;position:fixed;background:rgba(0,0,0,.2);z-index:2000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:hidden}.content-container{box-sizing:border-box;z-index:2050;position:relative;top:15%;margin:auto;overflow:auto;max-height:75%;background:var(--main-white-color);border-radius:5px;max-width:85%}@media (max-width: 768px){.content-container{max-height:95%;width:auto;max-width:95%;top:5%}}.content-container.noScrollbar{overflow:hidden}.content-container.error,.content-container.info{display:flex;align-items:stretch}.content-container.error .inner-container,.content-container.info .inner-container{padding:1.25rem}.content-container.error .header-container,.content-container.info .header-container{color:var(--main-black-color);border-bottom-color:var(--claim-info-grey)}@media (max-width: 768px){.content-container.error .header-container,.content-container.info .header-container{padding-bottom:1.25rem}}.content-container.error .body-container,.content-container.info .body-container{padding-block:1.25rem .5rem}@media (max-width: 768px){.content-container.error .body-container,.content-container.info .body-container{padding-top:1rem}}.inner-container{box-sizing:border-box;width:100%;padding:1.5rem}@media (max-width: 768px){.inner-container{padding:1rem}}.color-bar{width:.5rem;background-color:var(--primary-connected-orange-color)}.header-container{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--primary-dark-teal-color);padding-bottom:1.25rem;color:var(--primary-dark-teal-color);font-size:1.25rem;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 768px){.header-container{font-size:1.125rem;padding-bottom:.5rem}}.header-content{display:flex;align-items:center;gap:1.25rem}.header-content .warning-icon{width:2rem;aspect-ratio:1}@media (max-width: 768px){.header-content{gap:.875rem}.header-content .warning-icon{width:1.625rem}}.content-container.with-border{border-left:8px solid var(--primary-orange-mobile-color)}:host(.claim-details-modal-mobile) .body-container{display:flex}:host(.claim-details-modal-mobile) .inner-container{max-height:90vh}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isOpen: [{
                 type: Input
             }], disableOutsideClickClose: [{
@@ -1132,10 +1366,10 @@ class AfConnectNoContentComponent {
     ngOnInit() { }
 }
 AfConnectNoContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectNoContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectNoContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectNoContentComponent, selector: "lib-af-connect-no-content", inputs: { src: "src", title: "title", message: "message", alignContent: "alignContent", height: "height" }, ngImport: i0, template: "<div [class]=\"[alignContent, 'no-content-container', height]\">\n    <img class=\"svg\" [src]=\"src\" />\n    <div class=\"info-container\">\n      <p class=\"no-content-title\">{{ title }}</p>\n      <p class=\"no-content-message\">{{ message }}</p>\n    </div>\n  </div>\n  ", styles: ["img{background:none;border:none;width:74px;height:55px;padding:1rem 1rem 1rem 0rem}.center{justify-content:center}.left{justify-content:start}.no-content-container{width:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bright-apple-color-with-opacity);border-radius:15px}@media (max-width: 1024px){.no-content-container{justify-content:center;text-align:start}}.no-content-container.medium{height:15rem}.no-content-container.large{height:20rem}.no-content-container.xLarge{height:25rem}@media (max-width: 768px){.no-content-container.xLarge{height:27em}}.no-content-container.fill{height:100%}.info-container{padding:1rem 0rem}.no-content-message{font-size:var(--standard-font-size-16);font-family:var(--standard-font-family-hero-new);color:var(--secondary-black-color)}@media (max-width: 1024px){.no-content-message{font-size:var(--standard-font-size-14)}}@media (max-width: 768px){.no-content-message{font-size:var(--standard-font-size-14)}}.no-content-title{font-size:var(--standard-font-size-18);font-family:var(--standard-font-family-hero-new-semibold);color:var(--secondary-black-color)}@media (max-width: 1024px){.no-content-title{font-size:var(--standard-font-size-16)}}@media (max-width: 768px){.no-content-title{font-size:var(--standard-font-size-14)}}.no-content-message,.no-content-title{margin:0}:host(.full-width){position:relative;width:100%;display:block}\n"] });
+AfConnectNoContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectNoContentComponent, selector: "lib-af-connect-no-content", inputs: { src: "src", title: "title", message: "message", alignContent: "alignContent", height: "height" }, ngImport: i0, template: "<div [class]=\"[alignContent, 'no-content-container', height]\">\r\n    <img class=\"svg\" [src]=\"src\" />\r\n    <div class=\"info-container\">\r\n      <p class=\"no-content-title\">{{ title }}</p>\r\n      <p class=\"no-content-message\">{{ message }}</p>\r\n    </div>\r\n  </div>\r\n  ", styles: ["img{background:none;border:none;width:74px;height:55px;padding:1rem 1rem 1rem 0rem}.center{justify-content:center}.left{justify-content:start}.no-content-container{width:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bright-apple-color-with-opacity);border-radius:15px}@media (max-width: 1024px){.no-content-container{justify-content:center;text-align:start}}.no-content-container.medium{height:15rem}.no-content-container.large{height:20rem}.no-content-container.xLarge{height:25rem}@media (max-width: 768px){.no-content-container.xLarge{height:27em}}.no-content-container.fill{height:100%}.info-container{padding:1rem 0rem}.no-content-message{font-size:var(--standard-font-size-16);font-family:var(--standard-font-family-hero-new);color:var(--secondary-black-color)}@media (max-width: 1024px){.no-content-message{font-size:var(--standard-font-size-14)}}@media (max-width: 768px){.no-content-message{font-size:var(--standard-font-size-14)}}.no-content-title{font-size:var(--standard-font-size-18);font-family:var(--standard-font-family-hero-new-semibold);color:var(--secondary-black-color)}@media (max-width: 1024px){.no-content-title{font-size:var(--standard-font-size-16)}}@media (max-width: 768px){.no-content-title{font-size:var(--standard-font-size-14)}}.no-content-message,.no-content-title{margin:0}:host(.full-width){position:relative;width:100%;display:block}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectNoContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-no-content', template: "<div [class]=\"[alignContent, 'no-content-container', height]\">\n    <img class=\"svg\" [src]=\"src\" />\n    <div class=\"info-container\">\n      <p class=\"no-content-title\">{{ title }}</p>\n      <p class=\"no-content-message\">{{ message }}</p>\n    </div>\n  </div>\n  ", styles: ["img{background:none;border:none;width:74px;height:55px;padding:1rem 1rem 1rem 0rem}.center{justify-content:center}.left{justify-content:start}.no-content-container{width:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bright-apple-color-with-opacity);border-radius:15px}@media (max-width: 1024px){.no-content-container{justify-content:center;text-align:start}}.no-content-container.medium{height:15rem}.no-content-container.large{height:20rem}.no-content-container.xLarge{height:25rem}@media (max-width: 768px){.no-content-container.xLarge{height:27em}}.no-content-container.fill{height:100%}.info-container{padding:1rem 0rem}.no-content-message{font-size:var(--standard-font-size-16);font-family:var(--standard-font-family-hero-new);color:var(--secondary-black-color)}@media (max-width: 1024px){.no-content-message{font-size:var(--standard-font-size-14)}}@media (max-width: 768px){.no-content-message{font-size:var(--standard-font-size-14)}}.no-content-title{font-size:var(--standard-font-size-18);font-family:var(--standard-font-family-hero-new-semibold);color:var(--secondary-black-color)}@media (max-width: 1024px){.no-content-title{font-size:var(--standard-font-size-16)}}@media (max-width: 768px){.no-content-title{font-size:var(--standard-font-size-14)}}.no-content-message,.no-content-title{margin:0}:host(.full-width){position:relative;width:100%;display:block}\n"] }]
+            args: [{ selector: 'lib-af-connect-no-content', template: "<div [class]=\"[alignContent, 'no-content-container', height]\">\r\n    <img class=\"svg\" [src]=\"src\" />\r\n    <div class=\"info-container\">\r\n      <p class=\"no-content-title\">{{ title }}</p>\r\n      <p class=\"no-content-message\">{{ message }}</p>\r\n    </div>\r\n  </div>\r\n  ", styles: ["img{background:none;border:none;width:74px;height:55px;padding:1rem 1rem 1rem 0rem}.center{justify-content:center}.left{justify-content:start}.no-content-container{width:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bright-apple-color-with-opacity);border-radius:15px}@media (max-width: 1024px){.no-content-container{justify-content:center;text-align:start}}.no-content-container.medium{height:15rem}.no-content-container.large{height:20rem}.no-content-container.xLarge{height:25rem}@media (max-width: 768px){.no-content-container.xLarge{height:27em}}.no-content-container.fill{height:100%}.info-container{padding:1rem 0rem}.no-content-message{font-size:var(--standard-font-size-16);font-family:var(--standard-font-family-hero-new);color:var(--secondary-black-color)}@media (max-width: 1024px){.no-content-message{font-size:var(--standard-font-size-14)}}@media (max-width: 768px){.no-content-message{font-size:var(--standard-font-size-14)}}.no-content-title{font-size:var(--standard-font-size-18);font-family:var(--standard-font-family-hero-new-semibold);color:var(--secondary-black-color)}@media (max-width: 1024px){.no-content-title{font-size:var(--standard-font-size-16)}}@media (max-width: 768px){.no-content-title{font-size:var(--standard-font-size-14)}}.no-content-message,.no-content-title{margin:0}:host(.full-width){position:relative;width:100%;display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { src: [{
                 type: Input
             }], title: [{
@@ -1151,10 +1385,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 class AfConnectNotificationComponent {
 }
 AfConnectNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectNotificationComponent, selector: "lib-af-connect-notification", inputs: { data: "data", variant: "variant" }, ngImport: i0, template: "<div [class]=\"['wrapper', variant]\">\n    <div [class]=\"['svg-container', variant]\">\n        <img [class]=\"['svg-overlay', variant]\" src=\"/assets/icons/tool.svg\" alt=\"\">\n        <img [class]=\"['svg-background', variant]\" src=\"/assets/icons/splash_background.svg\" alt=\"\">\n    </div>\n    \n    <div class=\"text-container\">\n        <span>{{ data.categoryTitleToDisplay }}</span>\n        <div [innerHTML]=\"data.htmlContent\"></div>\n    </div>\n</div>\n", styles: [".wrapper{display:flex;gap:1rem;height:-moz-fit-content;height:fit-content;background-color:#fff6eb;border:1px solid #F69521;border-left:5px solid #F69521;border-radius:5px;box-sizing:border-box;padding:1rem}.wrapper.wide{z-index:1;position:relative;border-radius:0}.wrapper .text-container{display:flex;flex-direction:column;gap:.5rem}.wrapper .text-container span{font-family:Hero New Bold;font-size:16px}.wrapper .text-container div{margin:0;font-size:14px}.svg-container{position:relative}.svg-overlay{position:absolute}.svg-overlay.small{width:31px;height:25px;left:.5rem}.svg-overlay.wide{width:71px;height:58px;top:1rem;left:3rem}.svg-background.small{width:47px;height:24px}.svg-background.wide{width:158px;height:85px}\n"] });
+AfConnectNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectNotificationComponent, selector: "lib-af-connect-notification", inputs: { data: "data", variant: "variant" }, ngImport: i0, template: "<div [class]=\"['wrapper', variant]\">\r\n    <div [class]=\"['svg-container', variant]\">\r\n        <img [class]=\"['svg-overlay', variant]\" src=\"/assets/icons/tool.svg\" alt=\"\">\r\n        <img [class]=\"['svg-background', variant]\" src=\"/assets/icons/splash_background.svg\" alt=\"\">\r\n    </div>\r\n    \r\n    <div class=\"text-container\">\r\n        <span>{{ data.categoryTitleToDisplay }}</span>\r\n        <div [innerHTML]=\"data.htmlContent\"></div>\r\n    </div>\r\n</div>\r\n", styles: [".wrapper{display:flex;gap:1rem;height:-moz-fit-content;height:fit-content;background-color:#fff6eb;border:1px solid #F69521;border-left:5px solid #F69521;border-radius:5px;box-sizing:border-box;padding:1rem}.wrapper.wide{z-index:1;position:relative;border-radius:0}.wrapper .text-container{display:flex;flex-direction:column;gap:.5rem}.wrapper .text-container span{font-family:Hero New Bold;font-size:16px}.wrapper .text-container div{margin:0;font-size:14px}.svg-container{position:relative}.svg-overlay{position:absolute}.svg-overlay.small{width:31px;height:25px;left:.5rem}.svg-overlay.wide{width:71px;height:58px;top:1rem;left:3rem}.svg-background.small{width:47px;height:24px}.svg-background.wide{width:158px;height:85px}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-notification', template: "<div [class]=\"['wrapper', variant]\">\n    <div [class]=\"['svg-container', variant]\">\n        <img [class]=\"['svg-overlay', variant]\" src=\"/assets/icons/tool.svg\" alt=\"\">\n        <img [class]=\"['svg-background', variant]\" src=\"/assets/icons/splash_background.svg\" alt=\"\">\n    </div>\n    \n    <div class=\"text-container\">\n        <span>{{ data.categoryTitleToDisplay }}</span>\n        <div [innerHTML]=\"data.htmlContent\"></div>\n    </div>\n</div>\n", styles: [".wrapper{display:flex;gap:1rem;height:-moz-fit-content;height:fit-content;background-color:#fff6eb;border:1px solid #F69521;border-left:5px solid #F69521;border-radius:5px;box-sizing:border-box;padding:1rem}.wrapper.wide{z-index:1;position:relative;border-radius:0}.wrapper .text-container{display:flex;flex-direction:column;gap:.5rem}.wrapper .text-container span{font-family:Hero New Bold;font-size:16px}.wrapper .text-container div{margin:0;font-size:14px}.svg-container{position:relative}.svg-overlay{position:absolute}.svg-overlay.small{width:31px;height:25px;left:.5rem}.svg-overlay.wide{width:71px;height:58px;top:1rem;left:3rem}.svg-background.small{width:47px;height:24px}.svg-background.wide{width:158px;height:85px}\n"] }]
+            args: [{ selector: 'lib-af-connect-notification', template: "<div [class]=\"['wrapper', variant]\">\r\n    <div [class]=\"['svg-container', variant]\">\r\n        <img [class]=\"['svg-overlay', variant]\" src=\"/assets/icons/tool.svg\" alt=\"\">\r\n        <img [class]=\"['svg-background', variant]\" src=\"/assets/icons/splash_background.svg\" alt=\"\">\r\n    </div>\r\n    \r\n    <div class=\"text-container\">\r\n        <span>{{ data.categoryTitleToDisplay }}</span>\r\n        <div [innerHTML]=\"data.htmlContent\"></div>\r\n    </div>\r\n</div>\r\n", styles: [".wrapper{display:flex;gap:1rem;height:-moz-fit-content;height:fit-content;background-color:#fff6eb;border:1px solid #F69521;border-left:5px solid #F69521;border-radius:5px;box-sizing:border-box;padding:1rem}.wrapper.wide{z-index:1;position:relative;border-radius:0}.wrapper .text-container{display:flex;flex-direction:column;gap:.5rem}.wrapper .text-container span{font-family:Hero New Bold;font-size:16px}.wrapper .text-container div{margin:0;font-size:14px}.svg-container{position:relative}.svg-overlay{position:absolute}.svg-overlay.small{width:31px;height:25px;left:.5rem}.svg-overlay.wide{width:71px;height:58px;top:1rem;left:3rem}.svg-background.small{width:47px;height:24px}.svg-background.wide{width:158px;height:85px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], variant: [{
@@ -1188,10 +1422,10 @@ class AfConnectProgressBarComponent {
     }
 }
 AfConnectProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectProgressBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AfConnectProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectProgressBarComponent, selector: "lib-af-connect-progress-bar", inputs: { withProgressAnimation: "withProgressAnimation", progress: "progress", primaryColor: "primaryColor", secondaryColor: "secondaryColor" }, ngImport: i0, template: "<div [ngClass]=\"[secondaryColor]\" class=\"progress-bar-container\">\n    <div [ngClass]=\"['progress-bar', primaryColor]\" [style]=\"{ width: progressCounter + '%' }\">\n      <div class=\"text-container\">\n        <div>\n          <ng-content></ng-content>\n        </div>\n        <span *ngIf=\"false\"> {{ progress.toFixed(0) }}% </span>\n      </div>\n    </div>\n  </div>\n  ", styles: [":host{display:block;max-width:100%}.progress-bar-base,.progress-bar,.progress-bar-container{border-radius:.5rem;height:2rem}.progress-bar-container{background-color:var(--dark-grey-color-low-opacity)}.progress-bar-container.orange{background-color:var(--primary-catalyst-yellow-color)}.progress-bar-container.transparent{background-color:transparent}.progress-bar{color:var(--main-white-color);background-color:var(--primary-balanced-teal-color)}.progress-bar.primary-orange{background-color:var(--primary-catalyst-yellow-color)}.text-container{min-width:120px;padding-left:.75rem;padding-right:.75rem;font-weight:500;display:flex;align-items:center;justify-content:space-between;font-size:14px;min-height:2rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AfConnectProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectProgressBarComponent, selector: "lib-af-connect-progress-bar", inputs: { withProgressAnimation: "withProgressAnimation", progress: "progress", primaryColor: "primaryColor", secondaryColor: "secondaryColor" }, ngImport: i0, template: "<div [ngClass]=\"[secondaryColor]\" class=\"progress-bar-container\">\r\n    <div [ngClass]=\"['progress-bar', primaryColor]\" [style]=\"{ width: progressCounter + '%' }\">\r\n      <div class=\"text-container\">\r\n        <div>\r\n          <ng-content></ng-content>\r\n        </div>\r\n        <span *ngIf=\"false\"> {{ progress.toFixed(0) }}% </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [":host{display:block;max-width:100%}.progress-bar-base,.progress-bar,.progress-bar-container{border-radius:.5rem;height:2rem}.progress-bar-container{background-color:var(--dark-grey-color-low-opacity)}.progress-bar-container.orange{background-color:var(--primary-catalyst-yellow-color)}.progress-bar-container.transparent{background-color:transparent}.progress-bar{color:var(--main-white-color);background-color:var(--primary-balanced-teal-color)}.progress-bar.primary-orange{background-color:var(--primary-catalyst-yellow-color)}.text-container{min-width:120px;padding-left:.75rem;padding-right:.75rem;font-weight:500;display:flex;align-items:center;justify-content:space-between;font-size:14px;min-height:2rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-progress-bar', template: "<div [ngClass]=\"[secondaryColor]\" class=\"progress-bar-container\">\n    <div [ngClass]=\"['progress-bar', primaryColor]\" [style]=\"{ width: progressCounter + '%' }\">\n      <div class=\"text-container\">\n        <div>\n          <ng-content></ng-content>\n        </div>\n        <span *ngIf=\"false\"> {{ progress.toFixed(0) }}% </span>\n      </div>\n    </div>\n  </div>\n  ", styles: [":host{display:block;max-width:100%}.progress-bar-base,.progress-bar,.progress-bar-container{border-radius:.5rem;height:2rem}.progress-bar-container{background-color:var(--dark-grey-color-low-opacity)}.progress-bar-container.orange{background-color:var(--primary-catalyst-yellow-color)}.progress-bar-container.transparent{background-color:transparent}.progress-bar{color:var(--main-white-color);background-color:var(--primary-balanced-teal-color)}.progress-bar.primary-orange{background-color:var(--primary-catalyst-yellow-color)}.text-container{min-width:120px;padding-left:.75rem;padding-right:.75rem;font-weight:500;display:flex;align-items:center;justify-content:space-between;font-size:14px;min-height:2rem}\n"] }]
+            args: [{ selector: 'lib-af-connect-progress-bar', template: "<div [ngClass]=\"[secondaryColor]\" class=\"progress-bar-container\">\r\n    <div [ngClass]=\"['progress-bar', primaryColor]\" [style]=\"{ width: progressCounter + '%' }\">\r\n      <div class=\"text-container\">\r\n        <div>\r\n          <ng-content></ng-content>\r\n        </div>\r\n        <span *ngIf=\"false\"> {{ progress.toFixed(0) }}% </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [":host{display:block;max-width:100%}.progress-bar-base,.progress-bar,.progress-bar-container{border-radius:.5rem;height:2rem}.progress-bar-container{background-color:var(--dark-grey-color-low-opacity)}.progress-bar-container.orange{background-color:var(--primary-catalyst-yellow-color)}.progress-bar-container.transparent{background-color:transparent}.progress-bar{color:var(--main-white-color);background-color:var(--primary-balanced-teal-color)}.progress-bar.primary-orange{background-color:var(--primary-catalyst-yellow-color)}.text-container{min-width:120px;padding-left:.75rem;padding-right:.75rem;font-weight:500;display:flex;align-items:center;justify-content:space-between;font-size:14px;min-height:2rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { withProgressAnimation: [{
                 type: Input
             }], progress: [{
@@ -1202,211 +1436,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                 type: Input
             }] } });
 
-class AfConnectRadioGroupComponent {
-    constructor() {
-        this._selected = null;
-        this._disabled = false;
-        this.direction = 'row';
-        this.withAsterisk = false;
-        this.variant = 'default';
-        this.labelPosition = 'after';
-        this.size = 'inline';
-        this.valueChange = new EventEmitter();
-        this.propagateChange = (_) => { };
-        this.propagateTouch = (_) => { };
-    }
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        if (this._value !== newValue) {
-            this._value = newValue;
-            this.updateRadioButtonsState();
-            this.propagateChange(this._value);
-        }
-    }
-    get selected() {
-        return this._selected;
-    }
-    set selected(newSelected) {
-        this._selected = newSelected;
-        this.value = newSelected ? newSelected.value : null;
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(newValue) {
-        this._disabled = newValue;
-        this.markRadiosForCheck();
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.propagateTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    emitChangeEvent() {
-        this.valueChange.emit(this._value);
-    }
-    markRadiosForCheck() {
-        if (this.radios) {
-            this.radios.forEach((radio) => radio.markForCheck());
-        }
-    }
-    updateRadioButtonsState() {
-        this.radios?.forEach((radio) => {
-            radio.checked = this._value === radio.value;
-            if (radio.checked) {
-                this._selected = radio;
-            }
-        });
-    }
-}
-AfConnectRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectRadioGroupComponent, selector: "lib-af-connect-radio-group", inputs: { label: "label", direction: "direction", withAsterisk: "withAsterisk", variant: "variant", labelPosition: "labelPosition", size: "size", value: "value", selected: "selected", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => AfConnectRadioGroupComponent),
-            multi: true
-        }
-    ], queries: [{ propertyName: "radios", predicate: i0.forwardRef(function () { return AfConnectRadioButtonComponent; }), descendants: true }], ngImport: i0, template: "<span *ngIf=\"label\" class=\"label\">\n    {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span>\n  </span>\n  <div class=\"radio-buttons-container\" [class.column]=\"direction === 'column'\">\n    <ng-content></ng-content>\n  </div>\n  ", styles: [":host{display:flex;flex-direction:column;gap:1rem}.radio-buttons-container{display:flex;flex-wrap:wrap;gap:2rem}.radio-buttons-container.column{flex-direction:column;gap:1rem}.label{cursor:default;display:block;font-family:var(--standard-font-family-hero-new);font-size:.875rem;color:var(--main-black-color)}.label .asterisk{color:var(--primary-orange-mobile-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectRadioGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-af-connect-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AfConnectRadioGroupComponent),
-                            multi: true
-                        }
-                    ], template: "<span *ngIf=\"label\" class=\"label\">\n    {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span>\n  </span>\n  <div class=\"radio-buttons-container\" [class.column]=\"direction === 'column'\">\n    <ng-content></ng-content>\n  </div>\n  ", styles: [":host{display:flex;flex-direction:column;gap:1rem}.radio-buttons-container{display:flex;flex-wrap:wrap;gap:2rem}.radio-buttons-container.column{flex-direction:column;gap:1rem}.label{cursor:default;display:block;font-family:var(--standard-font-family-hero-new);font-size:.875rem;color:var(--main-black-color)}.label .asterisk{color:var(--primary-orange-mobile-color)}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], withAsterisk: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], labelPosition: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], radios: [{
-                type: ContentChildren,
-                args: [forwardRef(() => AfConnectRadioButtonComponent), { descendants: true }]
-            }] } });
-
-// Increasing integer for generating unique ids for all afc-radio-button instances.
-let nextUniqueId = 0;
-class AfConnectRadioButtonComponent {
-    constructor(radioGroup, changeDetector) {
-        this.radioGroup = radioGroup;
-        this.changeDetector = changeDetector;
-        this._uniqueId = `afc-radio-${++nextUniqueId}`;
-        this._checked = false;
-        this._disabled = false;
-        this._variant = 'default';
-        this._labelPosition = 'after';
-        this._size = 'inline';
-        this.id = this._uniqueId;
-    }
-    get checked() {
-        return this._checked;
-    }
-    set checked(newCheckedState) {
-        if (this._checked !== newCheckedState) {
-            this._checked = newCheckedState;
-            if (newCheckedState && this.radioGroup && this.radioGroup.value !== this.value) {
-                this.radioGroup.selected = this;
-            }
-            this.markForCheck();
-        }
-    }
-    get disabled() {
-        return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled);
-    }
-    set disabled(newValue) {
-        this._disabled = newValue;
-    }
-    get inputId() {
-        return `${this.id}-input`;
-    }
-    get variant() {
-        return this._variant;
-    }
-    get labelPosition() {
-        return this._labelPosition;
-    }
-    get size() {
-        return this._size;
-    }
-    ngOnInit() {
-        this.checked = this.radioGroup.value === this.value;
-        this._variant = this.radioGroup.variant;
-        this._labelPosition = this.radioGroup.labelPosition;
-        this._size = this.radioGroup.size;
-    }
-    markForCheck() {
-        this.changeDetector.markForCheck();
-    }
-    onTouchTargetClick(event) {
-        this.onChange(event);
-        // Since the click comes from the touch target, we need
-        // to focus the native input element manually.
-        this.inputElement.nativeElement.focus();
-    }
-    onBlur() {
-        this.radioGroup.propagateTouch();
-    }
-    onChange(event) {
-        event.stopPropagation();
-        if (!this.checked && !this.disabled) {
-            this.checked = true;
-        }
-    }
-}
-AfConnectRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectRadioButtonComponent, deps: [{ token: AfConnectRadioGroupComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AfConnectRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectRadioButtonComponent, selector: "lib-af-connect-radio-button", inputs: { id: "id", value: "value", checked: "checked", disabled: "disabled" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div\n  class=\"field-container\"\n  [ngClass]=\"{ 'label-before': labelPosition === 'before', 'size-box': size === 'box', checked: checked, disabled: disabled }\"\n>\n  <div [ngClass]=\"['radio-container', variant]\">\n    <input\n      #input\n      type=\"radio\"\n      class=\"input\"\n      [id]=\"inputId\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      [attr.value]=\"value\"\n      (change)=\"onChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"touch-target\" (click)=\"onTouchTargetClick($event)\"></div>\n    <div class=\"radio-visualization\">\n      <span [class]=\"['outer-circle', variant]\"></span>\n      <span *ngIf=\"variant === 'default'\" class=\"inner-circle\"></span>\n      <span *ngIf=\"variant === 'checkbox' || variant === 'cube'\" class=\"check-mark\"></span>\n    </div>\n  </div>\n  <label class=\"label\" [for]=\"inputId\">\n    <ng-content></ng-content>\n  </label>\n</div>\n", styles: [".field-container{display:flex;align-items:center;gap:.75rem}.field-container.label-before{flex-direction:row-reverse;justify-content:flex-end}.field-container.size-box{padding:1.25rem;justify-content:space-between;border-radius:5px;box-shadow:0 1px 5px var(--box-shadow-black-color);outline:1px solid transparent}.field-container.size-box.checked{outline-color:var(--primary-dark-teal-color);transition:outline-color .2s}.field-container.size-box.checked.disabled{outline-color:var(--disabled-radio-color)}.field-container.size-box .label{font-size:1rem}.radio-container{position:relative;flex:0 0 auto;box-sizing:content-box;width:22px;height:22px}.radio-container .touch-target{position:absolute;z-index:10;inset:0;cursor:pointer}.radio-visualization{width:22px;height:22px;z-index:2;inset:0}.radio-visualization .inner-circle,.radio-visualization .outer-circle{position:absolute;z-index:3;display:inline-block}.radio-visualization .inner-circle.checkbox,.radio-visualization .outer-circle.checkbox{border-radius:50%}.radio-visualization .inner-circle.cube,.radio-visualization .outer-circle.cube{border-radius:20%}.radio-visualization .outer-circle{box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;background-color:var(--neutral-button-color);transition-property:border-color,background-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.radio-visualization .inner-circle{top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:10px;height:10px;background-color:var(--primary-connected-orange-color);transition:transform .25s cubic-bezier(.4,0,.2,1)}.radio-visualization .check-mark{position:absolute;z-index:3;display:inline-block;top:5px;left:12px;width:2px;height:12px;background-color:transparent;border-radius:1px;transform:rotate(35deg)}.radio-visualization .check-mark:before{content:\"\";position:absolute;top:8px;right:3px;display:inline-block;width:2px;height:6px;border-radius:1px;background-color:transparent;transform:rotate(-80deg)}.radio-container.checkbox .outer-circle,.radio-container.cube .outer-circle{border-color:var(--primary-dark-teal-color);background-color:var(--main-white-color)}.input{-webkit-appearance:none;appearance:none;opacity:0;margin:0}.input:disabled~.touch-target{cursor:auto;pointer-events:none}.default .input:checked~.radio-visualization .outer-circle{border-color:var(--primary-connected-orange-color);background-color:var(--radio-background-color)}.default .input:checked~.radio-visualization .inner-circle{transform:translate(-50%,-50%) scale(1)}.default .input:disabled~.radio-visualization .outer-circle{background-color:var(--neutral-button-color);border-color:transparent}.default .input:disabled:checked~.radio-visualization .inner-circle{background-color:var(--disabled-radio-color)}.checkbox .input:checked~.radio-visualization .outer-circle,.cube .input:checked~.radio-visualization .outer-circle{background-color:var(--primary-dark-teal-color)}.checkbox .input:checked~.radio-visualization .check-mark,.cube .input:checked~.radio-visualization .check-mark{background-color:var(--main-white-color)}.checkbox .input:checked~.radio-visualization .check-mark:before,.cube .input:checked~.radio-visualization .check-mark:before{background-color:var(--main-white-color)}.checkbox .input:disabled~.radio-visualization .outer-circle,.cube .input:disabled~.radio-visualization .outer-circle{background-color:var(--neutral-button-color);border-color:var(--neutral-button-color)}.checkbox .input:disabled:checked~.radio-visualization .check-mark,.cube .input:disabled:checked~.radio-visualization .check-mark{background-color:var(--disabled-radio-color)}.checkbox .input:disabled:checked~.radio-visualization .check-mark:before,.cube .input:disabled:checked~.radio-visualization .check-mark:before{background-color:var(--disabled-radio-color)}.cube .input:checked~.radio-visualization .outer-circle{background-color:var(--primary-connected-orange-color);border:none}.label{font-size:.875rem;font-family:var(--standard-font-family-hero-new);color:var(--secondary-space-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectRadioButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-af-connect-radio-button', template: "<div\n  class=\"field-container\"\n  [ngClass]=\"{ 'label-before': labelPosition === 'before', 'size-box': size === 'box', checked: checked, disabled: disabled }\"\n>\n  <div [ngClass]=\"['radio-container', variant]\">\n    <input\n      #input\n      type=\"radio\"\n      class=\"input\"\n      [id]=\"inputId\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      [attr.value]=\"value\"\n      (change)=\"onChange($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <div class=\"touch-target\" (click)=\"onTouchTargetClick($event)\"></div>\n    <div class=\"radio-visualization\">\n      <span [class]=\"['outer-circle', variant]\"></span>\n      <span *ngIf=\"variant === 'default'\" class=\"inner-circle\"></span>\n      <span *ngIf=\"variant === 'checkbox' || variant === 'cube'\" class=\"check-mark\"></span>\n    </div>\n  </div>\n  <label class=\"label\" [for]=\"inputId\">\n    <ng-content></ng-content>\n  </label>\n</div>\n", styles: [".field-container{display:flex;align-items:center;gap:.75rem}.field-container.label-before{flex-direction:row-reverse;justify-content:flex-end}.field-container.size-box{padding:1.25rem;justify-content:space-between;border-radius:5px;box-shadow:0 1px 5px var(--box-shadow-black-color);outline:1px solid transparent}.field-container.size-box.checked{outline-color:var(--primary-dark-teal-color);transition:outline-color .2s}.field-container.size-box.checked.disabled{outline-color:var(--disabled-radio-color)}.field-container.size-box .label{font-size:1rem}.radio-container{position:relative;flex:0 0 auto;box-sizing:content-box;width:22px;height:22px}.radio-container .touch-target{position:absolute;z-index:10;inset:0;cursor:pointer}.radio-visualization{width:22px;height:22px;z-index:2;inset:0}.radio-visualization .inner-circle,.radio-visualization .outer-circle{position:absolute;z-index:3;display:inline-block}.radio-visualization .inner-circle.checkbox,.radio-visualization .outer-circle.checkbox{border-radius:50%}.radio-visualization .inner-circle.cube,.radio-visualization .outer-circle.cube{border-radius:20%}.radio-visualization .outer-circle{box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;background-color:var(--neutral-button-color);transition-property:border-color,background-color;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.radio-visualization .inner-circle{top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:10px;height:10px;background-color:var(--primary-connected-orange-color);transition:transform .25s cubic-bezier(.4,0,.2,1)}.radio-visualization .check-mark{position:absolute;z-index:3;display:inline-block;top:5px;left:12px;width:2px;height:12px;background-color:transparent;border-radius:1px;transform:rotate(35deg)}.radio-visualization .check-mark:before{content:\"\";position:absolute;top:8px;right:3px;display:inline-block;width:2px;height:6px;border-radius:1px;background-color:transparent;transform:rotate(-80deg)}.radio-container.checkbox .outer-circle,.radio-container.cube .outer-circle{border-color:var(--primary-dark-teal-color);background-color:var(--main-white-color)}.input{-webkit-appearance:none;appearance:none;opacity:0;margin:0}.input:disabled~.touch-target{cursor:auto;pointer-events:none}.default .input:checked~.radio-visualization .outer-circle{border-color:var(--primary-connected-orange-color);background-color:var(--radio-background-color)}.default .input:checked~.radio-visualization .inner-circle{transform:translate(-50%,-50%) scale(1)}.default .input:disabled~.radio-visualization .outer-circle{background-color:var(--neutral-button-color);border-color:transparent}.default .input:disabled:checked~.radio-visualization .inner-circle{background-color:var(--disabled-radio-color)}.checkbox .input:checked~.radio-visualization .outer-circle,.cube .input:checked~.radio-visualization .outer-circle{background-color:var(--primary-dark-teal-color)}.checkbox .input:checked~.radio-visualization .check-mark,.cube .input:checked~.radio-visualization .check-mark{background-color:var(--main-white-color)}.checkbox .input:checked~.radio-visualization .check-mark:before,.cube .input:checked~.radio-visualization .check-mark:before{background-color:var(--main-white-color)}.checkbox .input:disabled~.radio-visualization .outer-circle,.cube .input:disabled~.radio-visualization .outer-circle{background-color:var(--neutral-button-color);border-color:var(--neutral-button-color)}.checkbox .input:disabled:checked~.radio-visualization .check-mark,.cube .input:disabled:checked~.radio-visualization .check-mark{background-color:var(--disabled-radio-color)}.checkbox .input:disabled:checked~.radio-visualization .check-mark:before,.cube .input:disabled:checked~.radio-visualization .check-mark:before{background-color:var(--disabled-radio-color)}.cube .input:checked~.radio-visualization .outer-circle{background-color:var(--primary-connected-orange-color);border:none}.label{font-size:.875rem;font-family:var(--standard-font-family-hero-new);color:var(--secondary-space-color)}\n"] }]
-        }], ctorParameters: function () { return [{ type: AfConnectRadioGroupComponent }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['input']
-            }] } });
-
 class AfConnectSectionComponent {
     constructor() { }
     ngOnInit() {
     }
 }
 AfConnectSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectSectionComponent, selector: "lib-af-connect-section", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;background-color:transparent;height:-moz-fit-content;height:fit-content;opacity:1;box-sizing:border-box;border-radius:var(--section-border-radius)}\n"] });
+AfConnectSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectSectionComponent, selector: "lib-af-connect-section", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;background-color:transparent;height:-moz-fit-content;height:fit-content;opacity:1;box-sizing:border-box;border-radius:var(--section-border-radius)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-section', template: "<ng-content></ng-content>\n", styles: [":host{display:block;background-color:transparent;height:-moz-fit-content;height:fit-content;opacity:1;box-sizing:border-box;border-radius:var(--section-border-radius)}\n"] }]
+            args: [{ selector: 'lib-af-connect-section', template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;background-color:transparent;height:-moz-fit-content;height:fit-content;opacity:1;box-sizing:border-box;border-radius:var(--section-border-radius)}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class AfConnectSectionHeaderComponent {
@@ -1422,10 +1461,10 @@ class AfConnectSectionHeaderComponent {
     }
 }
 AfConnectSectionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectSectionHeaderComponent, deps: [{ token: ExpandableWrapperComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AfConnectSectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectSectionHeaderComponent, selector: "lib-af-connect-section-header", inputs: { title: "title", isStatic: "isStatic", variant: "variant" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"header-container\" [ngClass]=\"[\n variant,\n    isStatic ? 'isStatic' : 'isExpandable',\n    (wrapper && wrapper.isExpanded$ | async) === true ? 'expanded' : '',\n    (wrapper && wrapper.isExpanded$ | async) === false ? 'collapsed' : ''\n  ]\" (click)=\"toggleMobileContent()\">\n  <div class=\"section-wrapper\">\n    <div class=\"{{variant}}\">\n      {{ title }}\n    </div>\n    <ng-content select=\"[icon]\"></ng-content>\n    <div class=\"buttons-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div *ngIf=\"isStatic\" class=\"border-line\"></div>\n</div>", styles: [":host{position:relative}:host(.investments-mobile) .buttons-container{margin:auto 0 0}:host(.portfolio-mobile-card-title){border:none}:host(.documents-section-header) .header-container .border-line{margin-bottom:.75rem}@keyframes colorchange{0%{background:var(--secondary-grey-color)}50%{background:#dae2e9}to{background:var(--secondary-grey-color)}}@keyframes colorBack{0%{background:var(--secondary-grey-color)}50%{background:#dae2e9}to{background:var(--secondary-grey-color)}}.header-container{background:var(--secondary-grey-color);font-family:var(--standard-font-family-hero-new-semibold);padding:1rem 1.75rem;min-height:2.7rem;border-radius:var(--section-border-radius);align-items:center;display:flex;flex-direction:column;justify-content:center}@media (max-width: 1024px){.header-container{font-size:18px}}@media (max-width: 768px){.header-container{padding:.5rem 1.25rem;min-height:0px;background-color:var(--main-background-color-mobile);border:1px solid var(--neutral-button-color);border-radius:0}}.header-container.default{font-size:1.4rem;color:var(--primary-dark-teal-color)}@media (max-width: 768px){.header-container.default{font-size:1.125rem}}.header-container.portfolio{font-size:var(--standard-font-size-14);color:var(--main-black-color)}.header-container.isStatic{background-color:var(--secondary-grey-color);font-family:var(--standard-font-family-hero-new-bold)}@media (max-width: 768px){.header-container.isStatic{background:var(--main-white-color);border:none;padding:.5rem 1.25rem 0}}.header-container.isExpandable{cursor:pointer}.section-wrapper{align-items:center;justify-content:space-between;display:flex;flex-direction:row;width:100%;gap:.5rem}@media (max-width: 768px){.title-container{max-width:170px}}.expanded{animation:colorchange .9s}.collapsed{animation:colorBack .9s}.buttons-container{display:flex;gap:1rem;margin-left:auto}@media (max-width: 768px){.buttons-container{font-size:11px;height:100%;font-family:var(--standard-font-family-hero-new-semibold)}}.border-line{display:none}@media (max-width: 768px){.border-line{width:100%;border-bottom:1px solid var(--primary-dark-teal-color);display:block;margin-top:8px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+AfConnectSectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectSectionHeaderComponent, selector: "lib-af-connect-section-header", inputs: { title: "title", isStatic: "isStatic", variant: "variant" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"header-container\" [ngClass]=\"[\r\n variant,\r\n    isStatic ? 'isStatic' : 'isExpandable',\r\n    (wrapper && wrapper.isExpanded$ | async) === true ? 'expanded' : '',\r\n    (wrapper && wrapper.isExpanded$ | async) === false ? 'collapsed' : ''\r\n  ]\" (click)=\"toggleMobileContent()\">\r\n  <div class=\"section-wrapper\">\r\n    <div class=\"{{variant}}\">\r\n      {{ title }}\r\n    </div>\r\n    <ng-content select=\"[icon]\"></ng-content>\r\n    <div class=\"buttons-container\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"isStatic\" class=\"border-line\"></div>\r\n</div>", styles: [":host{position:relative}:host(.investments-mobile) .buttons-container{margin:auto 0 0}:host(.portfolio-mobile-card-title){border:none}:host(.documents-section-header) .header-container .border-line{margin-bottom:.75rem}@keyframes colorchange{0%{background:var(--secondary-grey-color)}50%{background:#dae2e9}to{background:var(--secondary-grey-color)}}@keyframes colorBack{0%{background:var(--secondary-grey-color)}50%{background:#dae2e9}to{background:var(--secondary-grey-color)}}.header-container{background:var(--secondary-grey-color);font-family:var(--standard-font-family-hero-new-semibold);padding:1rem 1.75rem;min-height:2.7rem;border-radius:var(--section-border-radius);align-items:center;display:flex;flex-direction:column;justify-content:center}@media (max-width: 1024px){.header-container{font-size:18px}}@media (max-width: 768px){.header-container{padding:.5rem 1.25rem;min-height:0px;background-color:var(--main-background-color-mobile);border:1px solid var(--neutral-button-color);border-radius:0}}.header-container.default{font-size:1.4rem;color:var(--primary-dark-teal-color)}@media (max-width: 768px){.header-container.default{font-size:1.125rem}}.header-container.portfolio{font-size:var(--standard-font-size-14);color:var(--main-black-color)}.header-container.isStatic{background-color:var(--secondary-grey-color);font-family:var(--standard-font-family-hero-new-bold)}@media (max-width: 768px){.header-container.isStatic{background:var(--main-white-color);border:none;padding:.5rem 1.25rem 0}}.header-container.isExpandable{cursor:pointer}.section-wrapper{align-items:center;justify-content:space-between;display:flex;flex-direction:row;width:100%;gap:.5rem}@media (max-width: 768px){.title-container{max-width:170px}}.expanded{animation:colorchange .9s}.collapsed{animation:colorBack .9s}.buttons-container{display:flex;gap:1rem;margin-left:auto}@media (max-width: 768px){.buttons-container{font-size:11px;height:100%;font-family:var(--standard-font-family-hero-new-semibold)}}.border-line{display:none}@media (max-width: 768px){.border-line{width:100%;border-bottom:1px solid var(--primary-dark-teal-color);display:block;margin-top:8px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectSectionHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-section-header', template: "<div class=\"header-container\" [ngClass]=\"[\n variant,\n    isStatic ? 'isStatic' : 'isExpandable',\n    (wrapper && wrapper.isExpanded$ | async) === true ? 'expanded' : '',\n    (wrapper && wrapper.isExpanded$ | async) === false ? 'collapsed' : ''\n  ]\" (click)=\"toggleMobileContent()\">\n  <div class=\"section-wrapper\">\n    <div class=\"{{variant}}\">\n      {{ title }}\n    </div>\n    <ng-content select=\"[icon]\"></ng-content>\n    <div class=\"buttons-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div *ngIf=\"isStatic\" class=\"border-line\"></div>\n</div>", styles: [":host{position:relative}:host(.investments-mobile) .buttons-container{margin:auto 0 0}:host(.portfolio-mobile-card-title){border:none}:host(.documents-section-header) .header-container .border-line{margin-bottom:.75rem}@keyframes colorchange{0%{background:var(--secondary-grey-color)}50%{background:#dae2e9}to{background:var(--secondary-grey-color)}}@keyframes colorBack{0%{background:var(--secondary-grey-color)}50%{background:#dae2e9}to{background:var(--secondary-grey-color)}}.header-container{background:var(--secondary-grey-color);font-family:var(--standard-font-family-hero-new-semibold);padding:1rem 1.75rem;min-height:2.7rem;border-radius:var(--section-border-radius);align-items:center;display:flex;flex-direction:column;justify-content:center}@media (max-width: 1024px){.header-container{font-size:18px}}@media (max-width: 768px){.header-container{padding:.5rem 1.25rem;min-height:0px;background-color:var(--main-background-color-mobile);border:1px solid var(--neutral-button-color);border-radius:0}}.header-container.default{font-size:1.4rem;color:var(--primary-dark-teal-color)}@media (max-width: 768px){.header-container.default{font-size:1.125rem}}.header-container.portfolio{font-size:var(--standard-font-size-14);color:var(--main-black-color)}.header-container.isStatic{background-color:var(--secondary-grey-color);font-family:var(--standard-font-family-hero-new-bold)}@media (max-width: 768px){.header-container.isStatic{background:var(--main-white-color);border:none;padding:.5rem 1.25rem 0}}.header-container.isExpandable{cursor:pointer}.section-wrapper{align-items:center;justify-content:space-between;display:flex;flex-direction:row;width:100%;gap:.5rem}@media (max-width: 768px){.title-container{max-width:170px}}.expanded{animation:colorchange .9s}.collapsed{animation:colorBack .9s}.buttons-container{display:flex;gap:1rem;margin-left:auto}@media (max-width: 768px){.buttons-container{font-size:11px;height:100%;font-family:var(--standard-font-family-hero-new-semibold)}}.border-line{display:none}@media (max-width: 768px){.border-line{width:100%;border-bottom:1px solid var(--primary-dark-teal-color);display:block;margin-top:8px}}\n"] }]
+            args: [{ selector: 'lib-af-connect-section-header', template: "<div class=\"header-container\" [ngClass]=\"[\r\n variant,\r\n    isStatic ? 'isStatic' : 'isExpandable',\r\n    (wrapper && wrapper.isExpanded$ | async) === true ? 'expanded' : '',\r\n    (wrapper && wrapper.isExpanded$ | async) === false ? 'collapsed' : ''\r\n  ]\" (click)=\"toggleMobileContent()\">\r\n  <div class=\"section-wrapper\">\r\n    <div class=\"{{variant}}\">\r\n      {{ title }}\r\n    </div>\r\n    <ng-content select=\"[icon]\"></ng-content>\r\n    <div class=\"buttons-container\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"isStatic\" class=\"border-line\"></div>\r\n</div>", styles: [":host{position:relative}:host(.investments-mobile) .buttons-container{margin:auto 0 0}:host(.portfolio-mobile-card-title){border:none}:host(.documents-section-header) .header-container .border-line{margin-bottom:.75rem}@keyframes colorchange{0%{background:var(--secondary-grey-color)}50%{background:#dae2e9}to{background:var(--secondary-grey-color)}}@keyframes colorBack{0%{background:var(--secondary-grey-color)}50%{background:#dae2e9}to{background:var(--secondary-grey-color)}}.header-container{background:var(--secondary-grey-color);font-family:var(--standard-font-family-hero-new-semibold);padding:1rem 1.75rem;min-height:2.7rem;border-radius:var(--section-border-radius);align-items:center;display:flex;flex-direction:column;justify-content:center}@media (max-width: 1024px){.header-container{font-size:18px}}@media (max-width: 768px){.header-container{padding:.5rem 1.25rem;min-height:0px;background-color:var(--main-background-color-mobile);border:1px solid var(--neutral-button-color);border-radius:0}}.header-container.default{font-size:1.4rem;color:var(--primary-dark-teal-color)}@media (max-width: 768px){.header-container.default{font-size:1.125rem}}.header-container.portfolio{font-size:var(--standard-font-size-14);color:var(--main-black-color)}.header-container.isStatic{background-color:var(--secondary-grey-color);font-family:var(--standard-font-family-hero-new-bold)}@media (max-width: 768px){.header-container.isStatic{background:var(--main-white-color);border:none;padding:.5rem 1.25rem 0}}.header-container.isExpandable{cursor:pointer}.section-wrapper{align-items:center;justify-content:space-between;display:flex;flex-direction:row;width:100%;gap:.5rem}@media (max-width: 768px){.title-container{max-width:170px}}.expanded{animation:colorchange .9s}.collapsed{animation:colorBack .9s}.buttons-container{display:flex;gap:1rem;margin-left:auto}@media (max-width: 768px){.buttons-container{font-size:11px;height:100%;font-family:var(--standard-font-family-hero-new-semibold)}}.border-line{display:none}@media (max-width: 768px){.border-line{width:100%;border-bottom:1px solid var(--primary-dark-teal-color);display:block;margin-top:8px}}\n"] }]
         }], ctorParameters: function () { return [{ type: ExpandableWrapperComponent, decorators: [{
                     type: Host
                 }, {
@@ -1443,10 +1482,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 class AfConnectSelectComponent {
 }
 AfConnectSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectSelectComponent, selector: "lib-af-connect-select", ngImport: i0, template: "<!-- <div class=\"dropdown-collection\" [ngClass]=\"[size, (control && control.disabled) || isDisabled ? 'disabled' : 'not-disabled',]\" (click)=\"toggleDropdown($event)\">\n\n    <div class=\"field-container\">\n      <div class=\"label-container\">\n        <label *ngIf=\"label\" [ngClass]=\"[variant]\" class=\"label\">\n          {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span>\n        </label>\n        <afc-form-validation-errors\n          [control]=\"control\"\n          [fieldText]=\"errorReferenceText || label\"\n        ></afc-form-validation-errors>\n      </div>\n      <div class=\"input-container\">\n        <input\n          type=\"text\"\n          class=\"field-container-input\"\n          [placeholder]=\"(isReadOnly && readOnlyPlaceholder) || placeholder\"\n          [maxLength]=\"maxLength\"\n          [ngClass]=\"[\n            (control && control.disabled) || isDisabled ? 'disabled' : 'not-disabled',\n            size,\n            dropdownOpen ? 'dropdown-open' : '',\n            control && control.errors && control.dirty && control.touched ? 'hasError' : '',\n            filter ? 'filterable' : 'non-filterable'\n          ]\"\n          [disabled]=\"(control && control.disabled) || isDisabled || variant === 'read-only' || isReadOnly\"\n          [(ngModel)]=\"currentValue\"\n          (blur)=\"onBlur()\"\n          (ngModelChange)=\"onChange($event)\"\n        />\n        <div class=\"arrow-container\" *ngIf=\"variant !== 'read-only'\">\n          <afc-expandable-arrow\n            endPosition=\"top\"\n            startPosition=\"bottom\"\n            animationSpeed=\"fast\"\n            ngClass=\"arrow\"\n            [isExpanded]=\"dropdownOpen\"\n          >\n          </afc-expandable-arrow>\n        </div>\n      </div>\n    </div>\n \n    <ng-container *ngTemplateOutlet=\"dropdownListItems; context: { type }\"></ng-container>\n  </div>\n  \n  <ng-template #dropdownListItems let-type=\"type\">\n    <ul\n      class=\"dropdown-list\"\n      role=\"listbox\"\n      aria-expanded=\"false\"\n      [@selectAnimation]=\"dropdownOpen ? 'expanded' : 'collapsed'\"\n      [ngClass]=\"{ 'dropdown-open': dropdownOpen }\"\n    >\n      <ng-container\n        *ngIf=\"filteredOptions.length !== 0; else noDropdownData\"\n        [ngTemplateOutlet]=\"virtualScroll\"\n      ></ng-container>\n    </ul>\n  </ng-template>\n  \n  <ng-template #virtualScroll>\n    <cdk-virtual-scroll-viewport\n      class=\"select-menu-inner\"\n      [appendOnly]=\"true\"\n      [itemSize]=\"SizeEnum[size]\"\n      [style.height.px]=\"itemsShown * SizeEnum[size]\"\n      [minBufferPx]=\"itemsShown * SizeEnum[size]\"\n      [maxBufferPx]=\"itemsShown * SizeEnum[size]\"\n    >\n      <div\n        class=\"list-item-container\"\n        *cdkVirtualFor=\"let option of filteredOptions\"\n        [ngClass]=\"[currentValue === option ? 'selected' : '', size]\"\n        (click)=\"select(option)\"\n      >\n        <img\n          height=\"14\"\n          width=\"26\"\n          *ngIf=\"(type === 'country' || type === 'country-code') && option['countryCode']\"\n          [src]=\"'../../../../assets/country-flags/' + option?.['countryCode'] + '.svg' | lowercase\"\n        />\n        <li tabindex=\"0\" role=\"option\" [innerHTML]=\"valueField && textField ? option[textField] : option\"></li>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  </ng-template>\n  \n  <ng-template #noDropdownData>\n    <div class=\"dropdown-no-data\">No Data</div>\n  </ng-template>\n   -->", styles: [":host{font-family:var(--standard-font-family-hero-new);font-size:.875rem;color:var(--main-black-color);min-width:5.2rem}:host[size=large]{width:100%}ul{overflow:hidden}.dropdown-collection{max-width:26rem;position:relative;cursor:pointer}.dropdown-collection.small .arrow{right:10px}.dropdown-collection.large{width:100%;max-width:100%}.dropdown-collection.large.disabled{pointer-events:none}.label{cursor:pointer}.label .asterisk{color:var(--primary-orange-mobile-color)}.label.large{margin-bottom:3px}.dropdown-list{display:block;background:var(--main-white-color);list-style:none;box-shadow:0 5px 8px #00000029;position:absolute;bottom:0;left:0;padding:0;z-index:10;right:0;margin:0;transform:translateY(100%);z-index:1001}.dropdown-list .list-item-container{display:flex;align-items:center;gap:.5rem;padding:.5rem .5rem .5rem 18px;cursor:pointer;color:var(--select-grey-color);border:2px solid transparent;box-sizing:border-box}.dropdown-list .list-item-container:hover,.dropdown-list .list-item-container:focus{transition-property:color,background-color;transition-duration:1.1s;border:2px solid #ceecef;border-radius:2px;background:#ceecef;outline:none;color:var(--footer-dark-black-color)}.dropdown-list .list-item-container.empty-option{min-height:20px}.dropdown-list .list-item-container.small{gap:.2rem;padding:.5rem 0 .5rem 2px}.dropdown-list .list-item-container.large{padding:11px 11px 11px 20px}.dropdown-list .dropdown-no-data{height:3rem;font-size:1rem;display:flex;align-items:center;justify-content:center;color:var(--neutral-anchor-color)}input{transition-property:outline-color,background-color;transition-duration:.2s}input:focus{outline:transparent}input::placeholder{color:var(--main-grey-color);opacity:.7}input.field-container-input{font-family:var(--standard-font-family-hero-new);font-size:.875rem;padding:11px 2rem 11px 1.25rem;width:100%;background-color:var(--main-white-color);color:var(--main-black-color);border:1px solid transparent;transition-property:border-color,background-color;transition-duration:.2s}input.field-container-input.hasError{border:1px solid var(--primary-connected-orange-color)!important;background-color:var(--neutral-inline-error-color)}input.field-container-input.filterable{pointer-events:all}input.field-container-input.non-filterable{pointer-events:none}input.field-container-input.read-only{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}@media (max-width: 768px){input.field-container-input{font-size:13px;border-radius:var(--input-border-radius);box-shadow:var(--input-box-shadow)}}input.not-disabled{color:var(--warm-grey-color);border-color:var(--primary-dark-teal-color)}input.not-disabled:disabled{border:none;color:var(--warm-grey-color);background-color:var(--neutral-button-color)}input.small{padding-left:.5rem}input.large{color:var(--main-black-color);padding:15px;border:none}input.large:disabled{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}input.dropdown-open{border-color:transparent;box-shadow:0 5px 8px #00000029}input.read-only{background-color:var(--neutral-button-color)}.field-container{display:flex;flex-direction:column;gap:.5rem}.field-container .label-container{display:flex;justify-content:space-between}cdk-virtual-scroll-viewport::-webkit-scrollbar{width:.4rem}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--primary-balanced-teal-color);outline:none}.input-container{display:flex}.arrow-container{position:relative;display:flex;min-height:100%;justify-content:center;align-items:center}.arrow-container .arrow{position:absolute;cursor:pointer;right:10px}:host(.countryCode) .label-container{flex-direction:column}\n"] });
+AfConnectSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectSelectComponent, selector: "lib-af-connect-select", ngImport: i0, template: "<!-- <div class=\"dropdown-collection\" [ngClass]=\"[size, (control && control.disabled) || isDisabled ? 'disabled' : 'not-disabled',]\" (click)=\"toggleDropdown($event)\">\r\n\r\n    <div class=\"field-container\">\r\n      <div class=\"label-container\">\r\n        <label *ngIf=\"label\" [ngClass]=\"[variant]\" class=\"label\">\r\n          {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span>\r\n        </label>\r\n        <afc-form-validation-errors\r\n          [control]=\"control\"\r\n          [fieldText]=\"errorReferenceText || label\"\r\n        ></afc-form-validation-errors>\r\n      </div>\r\n      <div class=\"input-container\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"field-container-input\"\r\n          [placeholder]=\"(isReadOnly && readOnlyPlaceholder) || placeholder\"\r\n          [maxLength]=\"maxLength\"\r\n          [ngClass]=\"[\r\n            (control && control.disabled) || isDisabled ? 'disabled' : 'not-disabled',\r\n            size,\r\n            dropdownOpen ? 'dropdown-open' : '',\r\n            control && control.errors && control.dirty && control.touched ? 'hasError' : '',\r\n            filter ? 'filterable' : 'non-filterable'\r\n          ]\"\r\n          [disabled]=\"(control && control.disabled) || isDisabled || variant === 'read-only' || isReadOnly\"\r\n          [(ngModel)]=\"currentValue\"\r\n          (blur)=\"onBlur()\"\r\n          (ngModelChange)=\"onChange($event)\"\r\n        />\r\n        <div class=\"arrow-container\" *ngIf=\"variant !== 'read-only'\">\r\n          <afc-expandable-arrow\r\n            endPosition=\"top\"\r\n            startPosition=\"bottom\"\r\n            animationSpeed=\"fast\"\r\n            ngClass=\"arrow\"\r\n            [isExpanded]=\"dropdownOpen\"\r\n          >\r\n          </afc-expandable-arrow>\r\n        </div>\r\n      </div>\r\n    </div>\r\n \r\n    <ng-container *ngTemplateOutlet=\"dropdownListItems; context: { type }\"></ng-container>\r\n  </div>\r\n  \r\n  <ng-template #dropdownListItems let-type=\"type\">\r\n    <ul\r\n      class=\"dropdown-list\"\r\n      role=\"listbox\"\r\n      aria-expanded=\"false\"\r\n      [@selectAnimation]=\"dropdownOpen ? 'expanded' : 'collapsed'\"\r\n      [ngClass]=\"{ 'dropdown-open': dropdownOpen }\"\r\n    >\r\n      <ng-container\r\n        *ngIf=\"filteredOptions.length !== 0; else noDropdownData\"\r\n        [ngTemplateOutlet]=\"virtualScroll\"\r\n      ></ng-container>\r\n    </ul>\r\n  </ng-template>\r\n  \r\n  <ng-template #virtualScroll>\r\n    <cdk-virtual-scroll-viewport\r\n      class=\"select-menu-inner\"\r\n      [appendOnly]=\"true\"\r\n      [itemSize]=\"SizeEnum[size]\"\r\n      [style.height.px]=\"itemsShown * SizeEnum[size]\"\r\n      [minBufferPx]=\"itemsShown * SizeEnum[size]\"\r\n      [maxBufferPx]=\"itemsShown * SizeEnum[size]\"\r\n    >\r\n      <div\r\n        class=\"list-item-container\"\r\n        *cdkVirtualFor=\"let option of filteredOptions\"\r\n        [ngClass]=\"[currentValue === option ? 'selected' : '', size]\"\r\n        (click)=\"select(option)\"\r\n      >\r\n        <img\r\n          height=\"14\"\r\n          width=\"26\"\r\n          *ngIf=\"(type === 'country' || type === 'country-code') && option['countryCode']\"\r\n          [src]=\"'../../../../assets/country-flags/' + option?.['countryCode'] + '.svg' | lowercase\"\r\n        />\r\n        <li tabindex=\"0\" role=\"option\" [innerHTML]=\"valueField && textField ? option[textField] : option\"></li>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </ng-template>\r\n  \r\n  <ng-template #noDropdownData>\r\n    <div class=\"dropdown-no-data\">No Data</div>\r\n  </ng-template>\r\n   -->", styles: [":host{font-family:var(--standard-font-family-hero-new);font-size:.875rem;color:var(--main-black-color);min-width:5.2rem}:host[size=large]{width:100%}ul{overflow:hidden}.dropdown-collection{max-width:26rem;position:relative;cursor:pointer}.dropdown-collection.small .arrow{right:10px}.dropdown-collection.large{width:100%;max-width:100%}.dropdown-collection.large.disabled{pointer-events:none}.label{cursor:pointer}.label .asterisk{color:var(--primary-orange-mobile-color)}.label.large{margin-bottom:3px}.dropdown-list{display:block;background:var(--main-white-color);list-style:none;box-shadow:0 5px 8px #00000029;position:absolute;bottom:0;left:0;padding:0;z-index:10;right:0;margin:0;transform:translateY(100%);z-index:1001}.dropdown-list .list-item-container{display:flex;align-items:center;gap:.5rem;padding:.5rem .5rem .5rem 18px;cursor:pointer;color:var(--select-grey-color);border:2px solid transparent;box-sizing:border-box}.dropdown-list .list-item-container:hover,.dropdown-list .list-item-container:focus{transition-property:color,background-color;transition-duration:1.1s;border:2px solid #ceecef;border-radius:2px;background:#ceecef;outline:none;color:var(--footer-dark-black-color)}.dropdown-list .list-item-container.empty-option{min-height:20px}.dropdown-list .list-item-container.small{gap:.2rem;padding:.5rem 0 .5rem 2px}.dropdown-list .list-item-container.large{padding:11px 11px 11px 20px}.dropdown-list .dropdown-no-data{height:3rem;font-size:1rem;display:flex;align-items:center;justify-content:center;color:var(--neutral-anchor-color)}input{transition-property:outline-color,background-color;transition-duration:.2s}input:focus{outline:transparent}input::placeholder{color:var(--main-grey-color);opacity:.7}input.field-container-input{font-family:var(--standard-font-family-hero-new);font-size:.875rem;padding:11px 2rem 11px 1.25rem;width:100%;background-color:var(--main-white-color);color:var(--main-black-color);border:1px solid transparent;transition-property:border-color,background-color;transition-duration:.2s}input.field-container-input.hasError{border:1px solid var(--primary-connected-orange-color)!important;background-color:var(--neutral-inline-error-color)}input.field-container-input.filterable{pointer-events:all}input.field-container-input.non-filterable{pointer-events:none}input.field-container-input.read-only{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}@media (max-width: 768px){input.field-container-input{font-size:13px;border-radius:var(--input-border-radius);box-shadow:var(--input-box-shadow)}}input.not-disabled{color:var(--warm-grey-color);border-color:var(--primary-dark-teal-color)}input.not-disabled:disabled{border:none;color:var(--warm-grey-color);background-color:var(--neutral-button-color)}input.small{padding-left:.5rem}input.large{color:var(--main-black-color);padding:15px;border:none}input.large:disabled{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}input.dropdown-open{border-color:transparent;box-shadow:0 5px 8px #00000029}input.read-only{background-color:var(--neutral-button-color)}.field-container{display:flex;flex-direction:column;gap:.5rem}.field-container .label-container{display:flex;justify-content:space-between}cdk-virtual-scroll-viewport::-webkit-scrollbar{width:.4rem}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--primary-balanced-teal-color);outline:none}.input-container{display:flex}.arrow-container{position:relative;display:flex;min-height:100%;justify-content:center;align-items:center}.arrow-container .arrow{position:absolute;cursor:pointer;right:10px}:host(.countryCode) .label-container{flex-direction:column}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-select', template: "<!-- <div class=\"dropdown-collection\" [ngClass]=\"[size, (control && control.disabled) || isDisabled ? 'disabled' : 'not-disabled',]\" (click)=\"toggleDropdown($event)\">\n\n    <div class=\"field-container\">\n      <div class=\"label-container\">\n        <label *ngIf=\"label\" [ngClass]=\"[variant]\" class=\"label\">\n          {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span>\n        </label>\n        <afc-form-validation-errors\n          [control]=\"control\"\n          [fieldText]=\"errorReferenceText || label\"\n        ></afc-form-validation-errors>\n      </div>\n      <div class=\"input-container\">\n        <input\n          type=\"text\"\n          class=\"field-container-input\"\n          [placeholder]=\"(isReadOnly && readOnlyPlaceholder) || placeholder\"\n          [maxLength]=\"maxLength\"\n          [ngClass]=\"[\n            (control && control.disabled) || isDisabled ? 'disabled' : 'not-disabled',\n            size,\n            dropdownOpen ? 'dropdown-open' : '',\n            control && control.errors && control.dirty && control.touched ? 'hasError' : '',\n            filter ? 'filterable' : 'non-filterable'\n          ]\"\n          [disabled]=\"(control && control.disabled) || isDisabled || variant === 'read-only' || isReadOnly\"\n          [(ngModel)]=\"currentValue\"\n          (blur)=\"onBlur()\"\n          (ngModelChange)=\"onChange($event)\"\n        />\n        <div class=\"arrow-container\" *ngIf=\"variant !== 'read-only'\">\n          <afc-expandable-arrow\n            endPosition=\"top\"\n            startPosition=\"bottom\"\n            animationSpeed=\"fast\"\n            ngClass=\"arrow\"\n            [isExpanded]=\"dropdownOpen\"\n          >\n          </afc-expandable-arrow>\n        </div>\n      </div>\n    </div>\n \n    <ng-container *ngTemplateOutlet=\"dropdownListItems; context: { type }\"></ng-container>\n  </div>\n  \n  <ng-template #dropdownListItems let-type=\"type\">\n    <ul\n      class=\"dropdown-list\"\n      role=\"listbox\"\n      aria-expanded=\"false\"\n      [@selectAnimation]=\"dropdownOpen ? 'expanded' : 'collapsed'\"\n      [ngClass]=\"{ 'dropdown-open': dropdownOpen }\"\n    >\n      <ng-container\n        *ngIf=\"filteredOptions.length !== 0; else noDropdownData\"\n        [ngTemplateOutlet]=\"virtualScroll\"\n      ></ng-container>\n    </ul>\n  </ng-template>\n  \n  <ng-template #virtualScroll>\n    <cdk-virtual-scroll-viewport\n      class=\"select-menu-inner\"\n      [appendOnly]=\"true\"\n      [itemSize]=\"SizeEnum[size]\"\n      [style.height.px]=\"itemsShown * SizeEnum[size]\"\n      [minBufferPx]=\"itemsShown * SizeEnum[size]\"\n      [maxBufferPx]=\"itemsShown * SizeEnum[size]\"\n    >\n      <div\n        class=\"list-item-container\"\n        *cdkVirtualFor=\"let option of filteredOptions\"\n        [ngClass]=\"[currentValue === option ? 'selected' : '', size]\"\n        (click)=\"select(option)\"\n      >\n        <img\n          height=\"14\"\n          width=\"26\"\n          *ngIf=\"(type === 'country' || type === 'country-code') && option['countryCode']\"\n          [src]=\"'../../../../assets/country-flags/' + option?.['countryCode'] + '.svg' | lowercase\"\n        />\n        <li tabindex=\"0\" role=\"option\" [innerHTML]=\"valueField && textField ? option[textField] : option\"></li>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  </ng-template>\n  \n  <ng-template #noDropdownData>\n    <div class=\"dropdown-no-data\">No Data</div>\n  </ng-template>\n   -->", styles: [":host{font-family:var(--standard-font-family-hero-new);font-size:.875rem;color:var(--main-black-color);min-width:5.2rem}:host[size=large]{width:100%}ul{overflow:hidden}.dropdown-collection{max-width:26rem;position:relative;cursor:pointer}.dropdown-collection.small .arrow{right:10px}.dropdown-collection.large{width:100%;max-width:100%}.dropdown-collection.large.disabled{pointer-events:none}.label{cursor:pointer}.label .asterisk{color:var(--primary-orange-mobile-color)}.label.large{margin-bottom:3px}.dropdown-list{display:block;background:var(--main-white-color);list-style:none;box-shadow:0 5px 8px #00000029;position:absolute;bottom:0;left:0;padding:0;z-index:10;right:0;margin:0;transform:translateY(100%);z-index:1001}.dropdown-list .list-item-container{display:flex;align-items:center;gap:.5rem;padding:.5rem .5rem .5rem 18px;cursor:pointer;color:var(--select-grey-color);border:2px solid transparent;box-sizing:border-box}.dropdown-list .list-item-container:hover,.dropdown-list .list-item-container:focus{transition-property:color,background-color;transition-duration:1.1s;border:2px solid #ceecef;border-radius:2px;background:#ceecef;outline:none;color:var(--footer-dark-black-color)}.dropdown-list .list-item-container.empty-option{min-height:20px}.dropdown-list .list-item-container.small{gap:.2rem;padding:.5rem 0 .5rem 2px}.dropdown-list .list-item-container.large{padding:11px 11px 11px 20px}.dropdown-list .dropdown-no-data{height:3rem;font-size:1rem;display:flex;align-items:center;justify-content:center;color:var(--neutral-anchor-color)}input{transition-property:outline-color,background-color;transition-duration:.2s}input:focus{outline:transparent}input::placeholder{color:var(--main-grey-color);opacity:.7}input.field-container-input{font-family:var(--standard-font-family-hero-new);font-size:.875rem;padding:11px 2rem 11px 1.25rem;width:100%;background-color:var(--main-white-color);color:var(--main-black-color);border:1px solid transparent;transition-property:border-color,background-color;transition-duration:.2s}input.field-container-input.hasError{border:1px solid var(--primary-connected-orange-color)!important;background-color:var(--neutral-inline-error-color)}input.field-container-input.filterable{pointer-events:all}input.field-container-input.non-filterable{pointer-events:none}input.field-container-input.read-only{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}@media (max-width: 768px){input.field-container-input{font-size:13px;border-radius:var(--input-border-radius);box-shadow:var(--input-box-shadow)}}input.not-disabled{color:var(--warm-grey-color);border-color:var(--primary-dark-teal-color)}input.not-disabled:disabled{border:none;color:var(--warm-grey-color);background-color:var(--neutral-button-color)}input.small{padding-left:.5rem}input.large{color:var(--main-black-color);padding:15px;border:none}input.large:disabled{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}input.dropdown-open{border-color:transparent;box-shadow:0 5px 8px #00000029}input.read-only{background-color:var(--neutral-button-color)}.field-container{display:flex;flex-direction:column;gap:.5rem}.field-container .label-container{display:flex;justify-content:space-between}cdk-virtual-scroll-viewport::-webkit-scrollbar{width:.4rem}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--primary-balanced-teal-color);outline:none}.input-container{display:flex}.arrow-container{position:relative;display:flex;min-height:100%;justify-content:center;align-items:center}.arrow-container .arrow{position:absolute;cursor:pointer;right:10px}:host(.countryCode) .label-container{flex-direction:column}\n"] }]
+            args: [{ selector: 'lib-af-connect-select', template: "<!-- <div class=\"dropdown-collection\" [ngClass]=\"[size, (control && control.disabled) || isDisabled ? 'disabled' : 'not-disabled',]\" (click)=\"toggleDropdown($event)\">\r\n\r\n    <div class=\"field-container\">\r\n      <div class=\"label-container\">\r\n        <label *ngIf=\"label\" [ngClass]=\"[variant]\" class=\"label\">\r\n          {{ label }}<span *ngIf=\"withAsterisk\" class=\"asterisk\">*</span>\r\n        </label>\r\n        <afc-form-validation-errors\r\n          [control]=\"control\"\r\n          [fieldText]=\"errorReferenceText || label\"\r\n        ></afc-form-validation-errors>\r\n      </div>\r\n      <div class=\"input-container\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"field-container-input\"\r\n          [placeholder]=\"(isReadOnly && readOnlyPlaceholder) || placeholder\"\r\n          [maxLength]=\"maxLength\"\r\n          [ngClass]=\"[\r\n            (control && control.disabled) || isDisabled ? 'disabled' : 'not-disabled',\r\n            size,\r\n            dropdownOpen ? 'dropdown-open' : '',\r\n            control && control.errors && control.dirty && control.touched ? 'hasError' : '',\r\n            filter ? 'filterable' : 'non-filterable'\r\n          ]\"\r\n          [disabled]=\"(control && control.disabled) || isDisabled || variant === 'read-only' || isReadOnly\"\r\n          [(ngModel)]=\"currentValue\"\r\n          (blur)=\"onBlur()\"\r\n          (ngModelChange)=\"onChange($event)\"\r\n        />\r\n        <div class=\"arrow-container\" *ngIf=\"variant !== 'read-only'\">\r\n          <afc-expandable-arrow\r\n            endPosition=\"top\"\r\n            startPosition=\"bottom\"\r\n            animationSpeed=\"fast\"\r\n            ngClass=\"arrow\"\r\n            [isExpanded]=\"dropdownOpen\"\r\n          >\r\n          </afc-expandable-arrow>\r\n        </div>\r\n      </div>\r\n    </div>\r\n \r\n    <ng-container *ngTemplateOutlet=\"dropdownListItems; context: { type }\"></ng-container>\r\n  </div>\r\n  \r\n  <ng-template #dropdownListItems let-type=\"type\">\r\n    <ul\r\n      class=\"dropdown-list\"\r\n      role=\"listbox\"\r\n      aria-expanded=\"false\"\r\n      [@selectAnimation]=\"dropdownOpen ? 'expanded' : 'collapsed'\"\r\n      [ngClass]=\"{ 'dropdown-open': dropdownOpen }\"\r\n    >\r\n      <ng-container\r\n        *ngIf=\"filteredOptions.length !== 0; else noDropdownData\"\r\n        [ngTemplateOutlet]=\"virtualScroll\"\r\n      ></ng-container>\r\n    </ul>\r\n  </ng-template>\r\n  \r\n  <ng-template #virtualScroll>\r\n    <cdk-virtual-scroll-viewport\r\n      class=\"select-menu-inner\"\r\n      [appendOnly]=\"true\"\r\n      [itemSize]=\"SizeEnum[size]\"\r\n      [style.height.px]=\"itemsShown * SizeEnum[size]\"\r\n      [minBufferPx]=\"itemsShown * SizeEnum[size]\"\r\n      [maxBufferPx]=\"itemsShown * SizeEnum[size]\"\r\n    >\r\n      <div\r\n        class=\"list-item-container\"\r\n        *cdkVirtualFor=\"let option of filteredOptions\"\r\n        [ngClass]=\"[currentValue === option ? 'selected' : '', size]\"\r\n        (click)=\"select(option)\"\r\n      >\r\n        <img\r\n          height=\"14\"\r\n          width=\"26\"\r\n          *ngIf=\"(type === 'country' || type === 'country-code') && option['countryCode']\"\r\n          [src]=\"'../../../../assets/country-flags/' + option?.['countryCode'] + '.svg' | lowercase\"\r\n        />\r\n        <li tabindex=\"0\" role=\"option\" [innerHTML]=\"valueField && textField ? option[textField] : option\"></li>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </ng-template>\r\n  \r\n  <ng-template #noDropdownData>\r\n    <div class=\"dropdown-no-data\">No Data</div>\r\n  </ng-template>\r\n   -->", styles: [":host{font-family:var(--standard-font-family-hero-new);font-size:.875rem;color:var(--main-black-color);min-width:5.2rem}:host[size=large]{width:100%}ul{overflow:hidden}.dropdown-collection{max-width:26rem;position:relative;cursor:pointer}.dropdown-collection.small .arrow{right:10px}.dropdown-collection.large{width:100%;max-width:100%}.dropdown-collection.large.disabled{pointer-events:none}.label{cursor:pointer}.label .asterisk{color:var(--primary-orange-mobile-color)}.label.large{margin-bottom:3px}.dropdown-list{display:block;background:var(--main-white-color);list-style:none;box-shadow:0 5px 8px #00000029;position:absolute;bottom:0;left:0;padding:0;z-index:10;right:0;margin:0;transform:translateY(100%);z-index:1001}.dropdown-list .list-item-container{display:flex;align-items:center;gap:.5rem;padding:.5rem .5rem .5rem 18px;cursor:pointer;color:var(--select-grey-color);border:2px solid transparent;box-sizing:border-box}.dropdown-list .list-item-container:hover,.dropdown-list .list-item-container:focus{transition-property:color,background-color;transition-duration:1.1s;border:2px solid #ceecef;border-radius:2px;background:#ceecef;outline:none;color:var(--footer-dark-black-color)}.dropdown-list .list-item-container.empty-option{min-height:20px}.dropdown-list .list-item-container.small{gap:.2rem;padding:.5rem 0 .5rem 2px}.dropdown-list .list-item-container.large{padding:11px 11px 11px 20px}.dropdown-list .dropdown-no-data{height:3rem;font-size:1rem;display:flex;align-items:center;justify-content:center;color:var(--neutral-anchor-color)}input{transition-property:outline-color,background-color;transition-duration:.2s}input:focus{outline:transparent}input::placeholder{color:var(--main-grey-color);opacity:.7}input.field-container-input{font-family:var(--standard-font-family-hero-new);font-size:.875rem;padding:11px 2rem 11px 1.25rem;width:100%;background-color:var(--main-white-color);color:var(--main-black-color);border:1px solid transparent;transition-property:border-color,background-color;transition-duration:.2s}input.field-container-input.hasError{border:1px solid var(--primary-connected-orange-color)!important;background-color:var(--neutral-inline-error-color)}input.field-container-input.filterable{pointer-events:all}input.field-container-input.non-filterable{pointer-events:none}input.field-container-input.read-only{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}@media (max-width: 768px){input.field-container-input{font-size:13px;border-radius:var(--input-border-radius);box-shadow:var(--input-box-shadow)}}input.not-disabled{color:var(--warm-grey-color);border-color:var(--primary-dark-teal-color)}input.not-disabled:disabled{border:none;color:var(--warm-grey-color);background-color:var(--neutral-button-color)}input.small{padding-left:.5rem}input.large{color:var(--main-black-color);padding:15px;border:none}input.large:disabled{background-color:var(--neutral-button-color);color:var(--warm-grey-color)}input.dropdown-open{border-color:transparent;box-shadow:0 5px 8px #00000029}input.read-only{background-color:var(--neutral-button-color)}.field-container{display:flex;flex-direction:column;gap:.5rem}.field-container .label-container{display:flex;justify-content:space-between}cdk-virtual-scroll-viewport::-webkit-scrollbar{width:.4rem}cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--primary-balanced-teal-color);outline:none}.input-container{display:flex}.arrow-container{position:relative;display:flex;min-height:100%;justify-content:center;align-items:center}.arrow-container .arrow{position:absolute;cursor:pointer;right:10px}:host(.countryCode) .label-container{flex-direction:column}\n"] }]
         }] });
 
 class AfConnectTabComponent {
@@ -1455,10 +1494,10 @@ class AfConnectTabComponent {
     }
 }
 AfConnectTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectTabComponent, selector: "lib-af-connect-tab", inputs: { label: "label", isActive: "isActive", tabButtons: "tabButtons" }, ngImport: i0, template: "<div [hidden]=\"!isActive\">\n    <ng-content></ng-content>\n  </div>\n  ", styles: [""] });
+AfConnectTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectTabComponent, selector: "lib-af-connect-tab", inputs: { label: "label", isActive: "isActive", tabButtons: "tabButtons" }, ngImport: i0, template: "<div [hidden]=\"!isActive\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  ", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-tab', template: "<div [hidden]=\"!isActive\">\n    <ng-content></ng-content>\n  </div>\n  " }]
+            args: [{ selector: 'lib-af-connect-tab', template: "<div [hidden]=\"!isActive\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  " }]
         }], propDecorators: { label: [{
                 type: Input
             }], isActive: [{
@@ -1530,10 +1569,10 @@ class AfConnectTabsComponent {
     }
 }
 AfConnectTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AfConnectTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectTabsComponent, selector: "lib-af-connect-tabs", inputs: { selectedTabIndex: "selectedTabIndex" }, outputs: { activeTabSelected: "activeTabSelected" }, queries: [{ propertyName: "tabs", predicate: AfConnectTabComponent }], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, read: ElementRef }, { propertyName: "tabsRefs", predicate: ["tab"], descendants: true, read: ElementRef }], ngImport: i0, template: "<nav class=\"tabs-nav\">\n    <ul class=\"nav-list\">\n      <li #tab *ngFor=\"let tab of tabs; let i = index\" class=\"nav-item\" [class.active]=\"tab.isActive\">\n        <button class=\"nav-button\" (click)=\"activateTab(tab, i)\">\n          {{ tab.label }}\n        </button>\n      </li>\n      <span #slider class=\"slider\"></span>\n    </ul>\n    <div class=\"nav-action-buttons\">\n      <ng-container [ngTemplateOutlet]=\"activeTab.tabButtons\"></ng-container>\n    </div>\n  </nav>\n  <ng-content></ng-content>\n  ", styles: [":host{width:100%}.tabs-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;border-bottom:1px solid var(--primary-dark-teal-color)}@media (max-width: 768px){.tabs-nav{flex-direction:column;margin-bottom:.625rem;border:none}}.nav-list{display:flex;position:relative;margin:0;padding:0;list-style-type:none}.nav-list .slider{position:absolute;bottom:0;border-top-width:1px;border-color:var(--primary-dark-teal-color);border-top-style:solid;transition-property:left,width;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.nav-list{margin-right:auto;justify-content:space-between;width:80%;max-width:320px;border-bottom:1px solid var(--light-grey-color)}.nav-list .nav-item .nav-button{padding-inline:1.25rem}.nav-list .slider{border-color:var(--primary-orange-mobile-color)}}.nav-item{position:relative}.nav-item:first-child .nav-button{padding-right:1.75rem}.nav-item:not(:first-child) .nav-button{padding-inline:1.75rem}.nav-item.active .nav-button{color:var(--primary-dark-teal-color);text-shadow:0px 0px 1px var(--primary-dark-teal-color)}@media (max-width: 768px){.nav-item.active .nav-button{text-shadow:none}}.nav-button{display:block;background:none;border:none;height:100%;padding:1.5rem 0;font-family:var(--standard-font-family-hero-new);font-size:1rem;color:var(--secondary-space-color);cursor:pointer}@media (max-width: 768px){.nav-button{padding-block:.375rem;font-size:.875rem;font-family:var(--standard-font-family-hero-new-semibold);color:var(--primary-dark-teal-color)}}.nav-action-buttons{display:flex;justify-content:flex-end;gap:1rem;min-width:25%}@media (max-width: 768px){.nav-action-buttons{align-self:flex-end;padding-top:1.125rem;max-width:100px;min-width:auto}}@media (max-width: 1024px){.nav-action-buttons{max-width:200px}}:host(.mobile-claim-info-tabs) .nav-list{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AfConnectTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectTabsComponent, selector: "lib-af-connect-tabs", inputs: { selectedTabIndex: "selectedTabIndex" }, outputs: { activeTabSelected: "activeTabSelected" }, queries: [{ propertyName: "tabs", predicate: AfConnectTabComponent }], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, read: ElementRef }, { propertyName: "tabsRefs", predicate: ["tab"], descendants: true, read: ElementRef }], ngImport: i0, template: "<nav class=\"tabs-nav\">\r\n    <ul class=\"nav-list\">\r\n      <li #tab *ngFor=\"let tab of tabs; let i = index\" class=\"nav-item\" [class.active]=\"tab.isActive\">\r\n        <button class=\"nav-button\" (click)=\"activateTab(tab, i)\">\r\n          {{ tab.label }}\r\n        </button>\r\n      </li>\r\n      <span #slider class=\"slider\"></span>\r\n    </ul>\r\n    <div class=\"nav-action-buttons\">\r\n      <ng-container [ngTemplateOutlet]=\"activeTab.tabButtons\"></ng-container>\r\n    </div>\r\n  </nav>\r\n  <ng-content></ng-content>\r\n  ", styles: [":host{width:100%}.tabs-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;border-bottom:1px solid var(--primary-dark-teal-color)}@media (max-width: 768px){.tabs-nav{flex-direction:column;margin-bottom:.625rem;border:none}}.nav-list{display:flex;position:relative;margin:0;padding:0;list-style-type:none}.nav-list .slider{position:absolute;bottom:0;border-top-width:1px;border-color:var(--primary-dark-teal-color);border-top-style:solid;transition-property:left,width;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.nav-list{margin-right:auto;justify-content:space-between;width:80%;max-width:320px;border-bottom:1px solid var(--light-grey-color)}.nav-list .nav-item .nav-button{padding-inline:1.25rem}.nav-list .slider{border-color:var(--primary-orange-mobile-color)}}.nav-item{position:relative}.nav-item:first-child .nav-button{padding-right:1.75rem}.nav-item:not(:first-child) .nav-button{padding-inline:1.75rem}.nav-item.active .nav-button{color:var(--primary-dark-teal-color);text-shadow:0px 0px 1px var(--primary-dark-teal-color)}@media (max-width: 768px){.nav-item.active .nav-button{text-shadow:none}}.nav-button{display:block;background:none;border:none;height:100%;padding:1.5rem 0;font-family:var(--standard-font-family-hero-new);font-size:1rem;color:var(--secondary-space-color);cursor:pointer}@media (max-width: 768px){.nav-button{padding-block:.375rem;font-size:.875rem;font-family:var(--standard-font-family-hero-new-semibold);color:var(--primary-dark-teal-color)}}.nav-action-buttons{display:flex;justify-content:flex-end;gap:1rem;min-width:25%}@media (max-width: 768px){.nav-action-buttons{align-self:flex-end;padding-top:1.125rem;max-width:100px;min-width:auto}}@media (max-width: 1024px){.nav-action-buttons{max-width:200px}}:host(.mobile-claim-info-tabs) .nav-list{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"tabs-nav\">\n    <ul class=\"nav-list\">\n      <li #tab *ngFor=\"let tab of tabs; let i = index\" class=\"nav-item\" [class.active]=\"tab.isActive\">\n        <button class=\"nav-button\" (click)=\"activateTab(tab, i)\">\n          {{ tab.label }}\n        </button>\n      </li>\n      <span #slider class=\"slider\"></span>\n    </ul>\n    <div class=\"nav-action-buttons\">\n      <ng-container [ngTemplateOutlet]=\"activeTab.tabButtons\"></ng-container>\n    </div>\n  </nav>\n  <ng-content></ng-content>\n  ", styles: [":host{width:100%}.tabs-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;border-bottom:1px solid var(--primary-dark-teal-color)}@media (max-width: 768px){.tabs-nav{flex-direction:column;margin-bottom:.625rem;border:none}}.nav-list{display:flex;position:relative;margin:0;padding:0;list-style-type:none}.nav-list .slider{position:absolute;bottom:0;border-top-width:1px;border-color:var(--primary-dark-teal-color);border-top-style:solid;transition-property:left,width;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.nav-list{margin-right:auto;justify-content:space-between;width:80%;max-width:320px;border-bottom:1px solid var(--light-grey-color)}.nav-list .nav-item .nav-button{padding-inline:1.25rem}.nav-list .slider{border-color:var(--primary-orange-mobile-color)}}.nav-item{position:relative}.nav-item:first-child .nav-button{padding-right:1.75rem}.nav-item:not(:first-child) .nav-button{padding-inline:1.75rem}.nav-item.active .nav-button{color:var(--primary-dark-teal-color);text-shadow:0px 0px 1px var(--primary-dark-teal-color)}@media (max-width: 768px){.nav-item.active .nav-button{text-shadow:none}}.nav-button{display:block;background:none;border:none;height:100%;padding:1.5rem 0;font-family:var(--standard-font-family-hero-new);font-size:1rem;color:var(--secondary-space-color);cursor:pointer}@media (max-width: 768px){.nav-button{padding-block:.375rem;font-size:.875rem;font-family:var(--standard-font-family-hero-new-semibold);color:var(--primary-dark-teal-color)}}.nav-action-buttons{display:flex;justify-content:flex-end;gap:1rem;min-width:25%}@media (max-width: 768px){.nav-action-buttons{align-self:flex-end;padding-top:1.125rem;max-width:100px;min-width:auto}}@media (max-width: 1024px){.nav-action-buttons{max-width:200px}}:host(.mobile-claim-info-tabs) .nav-list{width:100%}\n"] }]
+            args: [{ selector: 'lib-af-connect-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"tabs-nav\">\r\n    <ul class=\"nav-list\">\r\n      <li #tab *ngFor=\"let tab of tabs; let i = index\" class=\"nav-item\" [class.active]=\"tab.isActive\">\r\n        <button class=\"nav-button\" (click)=\"activateTab(tab, i)\">\r\n          {{ tab.label }}\r\n        </button>\r\n      </li>\r\n      <span #slider class=\"slider\"></span>\r\n    </ul>\r\n    <div class=\"nav-action-buttons\">\r\n      <ng-container [ngTemplateOutlet]=\"activeTab.tabButtons\"></ng-container>\r\n    </div>\r\n  </nav>\r\n  <ng-content></ng-content>\r\n  ", styles: [":host{width:100%}.tabs-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;border-bottom:1px solid var(--primary-dark-teal-color)}@media (max-width: 768px){.tabs-nav{flex-direction:column;margin-bottom:.625rem;border:none}}.nav-list{display:flex;position:relative;margin:0;padding:0;list-style-type:none}.nav-list .slider{position:absolute;bottom:0;border-top-width:1px;border-color:var(--primary-dark-teal-color);border-top-style:solid;transition-property:left,width;transition-duration:.25s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.nav-list{margin-right:auto;justify-content:space-between;width:80%;max-width:320px;border-bottom:1px solid var(--light-grey-color)}.nav-list .nav-item .nav-button{padding-inline:1.25rem}.nav-list .slider{border-color:var(--primary-orange-mobile-color)}}.nav-item{position:relative}.nav-item:first-child .nav-button{padding-right:1.75rem}.nav-item:not(:first-child) .nav-button{padding-inline:1.75rem}.nav-item.active .nav-button{color:var(--primary-dark-teal-color);text-shadow:0px 0px 1px var(--primary-dark-teal-color)}@media (max-width: 768px){.nav-item.active .nav-button{text-shadow:none}}.nav-button{display:block;background:none;border:none;height:100%;padding:1.5rem 0;font-family:var(--standard-font-family-hero-new);font-size:1rem;color:var(--secondary-space-color);cursor:pointer}@media (max-width: 768px){.nav-button{padding-block:.375rem;font-size:.875rem;font-family:var(--standard-font-family-hero-new-semibold);color:var(--primary-dark-teal-color)}}.nav-action-buttons{display:flex;justify-content:flex-end;gap:1rem;min-width:25%}@media (max-width: 768px){.nav-action-buttons{align-self:flex-end;padding-top:1.125rem;max-width:100px;min-width:auto}}@media (max-width: 1024px){.nav-action-buttons{max-width:200px}}:host(.mobile-claim-info-tabs) .nav-list{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [AfConnectTabComponent]
@@ -1552,10 +1591,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 class AfConnectTableComponent {
 }
 AfConnectTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectTableComponent, selector: "lib-af-connect-table", ngImport: i0, template: "<p>af-connect-table works!</p>\n", styles: [""] });
+AfConnectTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectTableComponent, selector: "lib-af-connect-table", ngImport: i0, template: "<p>af-connect-table works!</p>\r\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-table', template: "<p>af-connect-table works!</p>\n" }]
+            args: [{ selector: 'lib-af-connect-table', template: "<p>af-connect-table works!</p>\r\n" }]
         }] });
 
 class AfConnectToasterMessageComponent {
@@ -1572,10 +1611,10 @@ class AfConnectToasterMessageComponent {
     }
 }
 AfConnectToasterMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectToasterMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectToasterMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectToasterMessageComponent, selector: "lib-af-connect-toaster-message", inputs: { message: "message", src: "src", size: "size", timer: "timer" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div class=\"toaster-container\">\n    <img [class]=\"['svg', size]\" [src]=\"src\" />\n    <span class=\"toaster-message\">{{ message }}</span>\n    <afc-svg-button\n      ngClass=\"close-btn\"\n      size=\"medium\"\n      src=\"/assets/icons/delete.svg\"\n      emitValue=\"isCloseModal\"\n      (clickBtn)=\"closeToast()\"\n    >\n    </afc-svg-button>\n  </div>\n  ", styles: [":host{display:flex;min-height:2rem;padding-top:.5em;flex-direction:column}img{background:none;border:none;cursor:pointer;justify-content:center}.svg.small{width:14px;height:14px}.svg.medium{width:16px;height:16px}@media (max-width: 768px){.svg.medium{width:14px;height:14px}}@media (max-width: 1024px){.svg.large{width:23px;height:23px}}.toaster-container{border-radius:5px;padding:.5rem 1rem;opacity:1;display:flex;align-items:center;gap:1rem;box-shadow:0 3px 6px #00000029;border-left:8px solid var(--primary-orange-mobile-color);justify-content:space-between}.toaster-message{font-size:12px;color:var(--main-black-color);display:flex;justify-content:center;line-height:2;margin:0 auto 0 0}.close-btn{line-height:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+AfConnectToasterMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectToasterMessageComponent, selector: "lib-af-connect-toaster-message", inputs: { message: "message", src: "src", size: "size", timer: "timer" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div class=\"toaster-container\">\r\n    <img [class]=\"['svg', size]\" [src]=\"src\" />\r\n    <span class=\"toaster-message\">{{ message }}</span>\r\n    <afc-svg-button\r\n      ngClass=\"close-btn\"\r\n      size=\"medium\"\r\n      src=\"/assets/icons/delete.svg\"\r\n      emitValue=\"isCloseModal\"\r\n      (clickBtn)=\"closeToast()\"\r\n    >\r\n    </afc-svg-button>\r\n  </div>\r\n  ", styles: [":host{display:flex;min-height:2rem;padding-top:.5em;flex-direction:column}img{background:none;border:none;cursor:pointer;justify-content:center}.svg.small{width:14px;height:14px}.svg.medium{width:16px;height:16px}@media (max-width: 768px){.svg.medium{width:14px;height:14px}}@media (max-width: 1024px){.svg.large{width:23px;height:23px}}.toaster-container{border-radius:5px;padding:.5rem 1rem;opacity:1;display:flex;align-items:center;gap:1rem;box-shadow:0 3px 6px #00000029;border-left:8px solid var(--primary-orange-mobile-color);justify-content:space-between}.toaster-message{font-size:12px;color:var(--main-black-color);display:flex;justify-content:center;line-height:2;margin:0 auto 0 0}.close-btn{line-height:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectToasterMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-toaster-message', template: "<div class=\"toaster-container\">\n    <img [class]=\"['svg', size]\" [src]=\"src\" />\n    <span class=\"toaster-message\">{{ message }}</span>\n    <afc-svg-button\n      ngClass=\"close-btn\"\n      size=\"medium\"\n      src=\"/assets/icons/delete.svg\"\n      emitValue=\"isCloseModal\"\n      (clickBtn)=\"closeToast()\"\n    >\n    </afc-svg-button>\n  </div>\n  ", styles: [":host{display:flex;min-height:2rem;padding-top:.5em;flex-direction:column}img{background:none;border:none;cursor:pointer;justify-content:center}.svg.small{width:14px;height:14px}.svg.medium{width:16px;height:16px}@media (max-width: 768px){.svg.medium{width:14px;height:14px}}@media (max-width: 1024px){.svg.large{width:23px;height:23px}}.toaster-container{border-radius:5px;padding:.5rem 1rem;opacity:1;display:flex;align-items:center;gap:1rem;box-shadow:0 3px 6px #00000029;border-left:8px solid var(--primary-orange-mobile-color);justify-content:space-between}.toaster-message{font-size:12px;color:var(--main-black-color);display:flex;justify-content:center;line-height:2;margin:0 auto 0 0}.close-btn{line-height:0}\n"] }]
+            args: [{ selector: 'lib-af-connect-toaster-message', template: "<div class=\"toaster-container\">\r\n    <img [class]=\"['svg', size]\" [src]=\"src\" />\r\n    <span class=\"toaster-message\">{{ message }}</span>\r\n    <afc-svg-button\r\n      ngClass=\"close-btn\"\r\n      size=\"medium\"\r\n      src=\"/assets/icons/delete.svg\"\r\n      emitValue=\"isCloseModal\"\r\n      (clickBtn)=\"closeToast()\"\r\n    >\r\n    </afc-svg-button>\r\n  </div>\r\n  ", styles: [":host{display:flex;min-height:2rem;padding-top:.5em;flex-direction:column}img{background:none;border:none;cursor:pointer;justify-content:center}.svg.small{width:14px;height:14px}.svg.medium{width:16px;height:16px}@media (max-width: 768px){.svg.medium{width:14px;height:14px}}@media (max-width: 1024px){.svg.large{width:23px;height:23px}}.toaster-container{border-radius:5px;padding:.5rem 1rem;opacity:1;display:flex;align-items:center;gap:1rem;box-shadow:0 3px 6px #00000029;border-left:8px solid var(--primary-orange-mobile-color);justify-content:space-between}.toaster-message{font-size:12px;color:var(--main-black-color);display:flex;justify-content:center;line-height:2;margin:0 auto 0 0}.close-btn{line-height:0}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], src: [{
@@ -1800,7 +1839,7 @@ AfConnectToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             useExisting: forwardRef(() => AfConnectToggleButtonComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<label>{{ label }}</label>\n<button\n    type=\"button\"\n    class=\"toggle-button\"\n    (click)=\"this.clickBtn.emit(emitValue); togglePosition();\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"getButtonStyles()\">\n    <span\n        *ngIf=\"onStateText\"\n        [ngStyle]=\"getOnStateTextStyles() || null\"\n        class=\"onStateText\">\n        {{onStateText}}\n    </span>\n    <div\n      class=\"toggle-ball\"\n      [@toggleButton]=\"position\"\n      [ngStyle]=\"getToggleBallStyles() || null\">\n    </div>\n    <span\n        *ngIf=\"offStateText\"\n        [ngStyle]=\"getOffStateTextStyles() || null\"\n        class=\"offStateText\"> \n        {{offStateText}}\n    </span>\n</button>\n<span *ngIf=\"label\" class=\"state-info-text\">{{ position === 'on' ? 'Yes' : 'No' }}</span>", styles: [":host{display:flex;flex-wrap:wrap;width:100%}:host label{width:100%;height:-moz-fit-content;height:fit-content;font-size:14px}:host(.tax-certificates-toggle){width:auto}.toggle-button{position:relative;width:49px;height:28px;border:none;border-radius:14px;background:var(--toggle-button-grey-color);display:flex;align-items:center;cursor:pointer;padding:0}.toggle-button:disabled{cursor:default}.toggle-button,.state-info-text{align-self:center}.toggle-ball{width:18.67px;height:18.67px;background:white;border-radius:50%;margin:0 5.83px}.onStateText{position:absolute;margin-left:.5rem}.onStateText,.offStateText{color:var(--neutral-button-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [toggleButtonAnimation, toggleBackgroundAnimation] });
+    ], ngImport: i0, template: "<label>{{ label }}</label>\r\n<button\r\n    type=\"button\"\r\n    class=\"toggle-button\"\r\n    (click)=\"this.clickBtn.emit(emitValue); togglePosition();\"\r\n    [disabled]=\"disabled\"\r\n    [ngStyle]=\"getButtonStyles()\">\r\n    <span\r\n        *ngIf=\"onStateText\"\r\n        [ngStyle]=\"getOnStateTextStyles() || null\"\r\n        class=\"onStateText\">\r\n        {{onStateText}}\r\n    </span>\r\n    <div\r\n      class=\"toggle-ball\"\r\n      [@toggleButton]=\"position\"\r\n      [ngStyle]=\"getToggleBallStyles() || null\">\r\n    </div>\r\n    <span\r\n        *ngIf=\"offStateText\"\r\n        [ngStyle]=\"getOffStateTextStyles() || null\"\r\n        class=\"offStateText\"> \r\n        {{offStateText}}\r\n    </span>\r\n</button>\r\n<span *ngIf=\"label\" class=\"state-info-text\">{{ position === 'on' ? 'Yes' : 'No' }}</span>", styles: [":host{display:flex;flex-wrap:wrap;width:100%}:host label{width:100%;height:-moz-fit-content;height:fit-content;font-size:14px}:host(.tax-certificates-toggle){width:auto}.toggle-button{position:relative;width:49px;height:28px;border:none;border-radius:14px;background:var(--toggle-button-grey-color);display:flex;align-items:center;cursor:pointer;padding:0}.toggle-button:disabled{cursor:default}.toggle-button,.state-info-text{align-self:center}.toggle-ball{width:18.67px;height:18.67px;background:white;border-radius:50%;margin:0 5.83px}.onStateText{position:absolute;margin-left:.5rem}.onStateText,.offStateText{color:var(--neutral-button-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [toggleButtonAnimation, toggleBackgroundAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectToggleButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-af-connect-toggle-button', animations: [toggleButtonAnimation, toggleBackgroundAnimation], providers: [
@@ -1809,7 +1848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                             useExisting: forwardRef(() => AfConnectToggleButtonComponent),
                             multi: true
                         }
-                    ], template: "<label>{{ label }}</label>\n<button\n    type=\"button\"\n    class=\"toggle-button\"\n    (click)=\"this.clickBtn.emit(emitValue); togglePosition();\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"getButtonStyles()\">\n    <span\n        *ngIf=\"onStateText\"\n        [ngStyle]=\"getOnStateTextStyles() || null\"\n        class=\"onStateText\">\n        {{onStateText}}\n    </span>\n    <div\n      class=\"toggle-ball\"\n      [@toggleButton]=\"position\"\n      [ngStyle]=\"getToggleBallStyles() || null\">\n    </div>\n    <span\n        *ngIf=\"offStateText\"\n        [ngStyle]=\"getOffStateTextStyles() || null\"\n        class=\"offStateText\"> \n        {{offStateText}}\n    </span>\n</button>\n<span *ngIf=\"label\" class=\"state-info-text\">{{ position === 'on' ? 'Yes' : 'No' }}</span>", styles: [":host{display:flex;flex-wrap:wrap;width:100%}:host label{width:100%;height:-moz-fit-content;height:fit-content;font-size:14px}:host(.tax-certificates-toggle){width:auto}.toggle-button{position:relative;width:49px;height:28px;border:none;border-radius:14px;background:var(--toggle-button-grey-color);display:flex;align-items:center;cursor:pointer;padding:0}.toggle-button:disabled{cursor:default}.toggle-button,.state-info-text{align-self:center}.toggle-ball{width:18.67px;height:18.67px;background:white;border-radius:50%;margin:0 5.83px}.onStateText{position:absolute;margin-left:.5rem}.onStateText,.offStateText{color:var(--neutral-button-color)}\n"] }]
+                    ], template: "<label>{{ label }}</label>\r\n<button\r\n    type=\"button\"\r\n    class=\"toggle-button\"\r\n    (click)=\"this.clickBtn.emit(emitValue); togglePosition();\"\r\n    [disabled]=\"disabled\"\r\n    [ngStyle]=\"getButtonStyles()\">\r\n    <span\r\n        *ngIf=\"onStateText\"\r\n        [ngStyle]=\"getOnStateTextStyles() || null\"\r\n        class=\"onStateText\">\r\n        {{onStateText}}\r\n    </span>\r\n    <div\r\n      class=\"toggle-ball\"\r\n      [@toggleButton]=\"position\"\r\n      [ngStyle]=\"getToggleBallStyles() || null\">\r\n    </div>\r\n    <span\r\n        *ngIf=\"offStateText\"\r\n        [ngStyle]=\"getOffStateTextStyles() || null\"\r\n        class=\"offStateText\"> \r\n        {{offStateText}}\r\n    </span>\r\n</button>\r\n<span *ngIf=\"label\" class=\"state-info-text\">{{ position === 'on' ? 'Yes' : 'No' }}</span>", styles: [":host{display:flex;flex-wrap:wrap;width:100%}:host label{width:100%;height:-moz-fit-content;height:fit-content;font-size:14px}:host(.tax-certificates-toggle){width:auto}.toggle-button{position:relative;width:49px;height:28px;border:none;border-radius:14px;background:var(--toggle-button-grey-color);display:flex;align-items:center;cursor:pointer;padding:0}.toggle-button:disabled{cursor:default}.toggle-button,.state-info-text{align-self:center}.toggle-ball{width:18.67px;height:18.67px;background:white;border-radius:50%;margin:0 5.83px}.onStateText{position:absolute;margin-left:.5rem}.onStateText,.offStateText{color:var(--neutral-button-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { emitValue: [{
                 type: Input
             }], label: [{
@@ -1854,10 +1893,10 @@ class AfConnectTooltipComponent {
     }
 }
 AfConnectTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfConnectTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectTooltipComponent, selector: "lib-af-connect-tooltip", inputs: { text: "text", position: "position", additionalShowCondition: "additionalShowCondition", top: "top", autoSize: "autoSize", zIndex: "zIndex" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "click()" } }, ngImport: i0, template: "<div\n  *ngIf=\"showContent && additionalShowCondition\"\n  [ngStyle]=\"{\n    top: top,\n    zIndex: zIndex\n  }\"\n  [ngClass]=\"['tooltip__text__box', position, autoSize ? 'autoSize' : '']\"\n>\n  <div class=\"tooltip__text\">{{ text }}</div>\n</div>\n<ng-content></ng-content>\n", styles: [".tooltip-text,:host(.funeral-cover__info-btn-tooltip) .tooltip__text,:host(.empty_state__btn-tooltip) .tooltip__text{text-align:left;color:var(--primary-dark-teal-color);font-family:var(--standard-font-family-hero-new-bold)}:host{width:100%;position:relative}.display__after,.position__bottom,.tooltip__text__box.bottomRight:after,.tooltip__text__box.bottomCenter:after,.tooltip__text__box.bottomLeft:after,.position__top,.tooltip__text__box.topCenter:after,.tooltip__text__box.topLeft:after,.tooltip__text__box.topRight:after{content:\"\";z-index:1;position:absolute;border-style:solid;border-width:.6rem}.position__top,.tooltip__text__box.topCenter:after,.tooltip__text__box.topLeft:after,.tooltip__text__box.topRight:after{top:100%;border-color:var(--secondary-egg-shell-color) transparent transparent transparent}.position__bottom,.tooltip__text__box.bottomRight:after,.tooltip__text__box.bottomCenter:after,.tooltip__text__box.bottomLeft:after{bottom:100%;border-color:transparent transparent var(--secondary-egg-shell-color) transparent}.tooltip__text__box{display:flex;align-items:center;width:19rem;font-size:12px;line-height:20px;position:absolute;text-align:center;background:var(--secondary-egg-shell-color);border-radius:1.2rem;box-shadow:0 10px 30px var(--box-shadow-black-color)}.tooltip__text__box.topRight{right:0;bottom:2.8rem}.tooltip__text__box.topRight:after{right:10%}.tooltip__text__box.topLeft{left:0;bottom:2.8rem}.tooltip__text__box.topLeft:after{left:10%}.tooltip__text__box.topCenter{right:-50%;bottom:2.8rem}.tooltip__text__box.topCenter:after{left:50%}.tooltip__text__box.bottomLeft{left:0;top:2.8rem}.tooltip__text__box.bottomLeft:after{left:10%}.tooltip__text__box.bottomCenter{right:-50%;top:2.8rem}.tooltip__text__box.bottomCenter:after{left:50%}.tooltip__text__box.bottomRight{right:0;top:2.8rem}.tooltip__text__box.bottomRight:after{right:10%}.tooltip__text__box.autoSize{width:auto;height:auto}.tooltip__text{padding:1rem;text-align:justify}@media (max-width: 768px){:host(.profile-loading__icon) .tooltip__text__box{left:-2rem}}@media (max-width: 768px){:host(.profile-details-loading__icon) .tooltip__text__box{left:-9.7rem}}:host(.empty_state__btn-tooltip) .tooltip__text__box{right:-1.85rem}:host(.funeral-cover__info-btn-tooltip) .tooltip__text__box{right:-1.75rem}@media (max-width: 768px){:host(.funeral-cover__info-btn-tooltip) .tooltip__text__box{right:-1.2rem}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+AfConnectTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectTooltipComponent, selector: "lib-af-connect-tooltip", inputs: { text: "text", position: "position", additionalShowCondition: "additionalShowCondition", top: "top", autoSize: "autoSize", zIndex: "zIndex" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "click()" } }, ngImport: i0, template: "<div\r\n  *ngIf=\"showContent && additionalShowCondition\"\r\n  [ngStyle]=\"{\r\n    top: top,\r\n    zIndex: zIndex\r\n  }\"\r\n  [ngClass]=\"['tooltip__text__box', position, autoSize ? 'autoSize' : '']\"\r\n>\r\n  <div class=\"tooltip__text\">{{ text }}</div>\r\n</div>\r\n<ng-content></ng-content>\r\n", styles: [".tooltip-text,:host(.funeral-cover__info-btn-tooltip) .tooltip__text,:host(.empty_state__btn-tooltip) .tooltip__text{text-align:left;color:var(--primary-dark-teal-color);font-family:var(--standard-font-family-hero-new-bold)}:host{width:100%;position:relative}.display__after,.position__bottom,.tooltip__text__box.bottomRight:after,.tooltip__text__box.bottomCenter:after,.tooltip__text__box.bottomLeft:after,.position__top,.tooltip__text__box.topCenter:after,.tooltip__text__box.topLeft:after,.tooltip__text__box.topRight:after{content:\"\";z-index:1;position:absolute;border-style:solid;border-width:.6rem}.position__top,.tooltip__text__box.topCenter:after,.tooltip__text__box.topLeft:after,.tooltip__text__box.topRight:after{top:100%;border-color:var(--secondary-egg-shell-color) transparent transparent transparent}.position__bottom,.tooltip__text__box.bottomRight:after,.tooltip__text__box.bottomCenter:after,.tooltip__text__box.bottomLeft:after{bottom:100%;border-color:transparent transparent var(--secondary-egg-shell-color) transparent}.tooltip__text__box{display:flex;align-items:center;width:19rem;font-size:12px;line-height:20px;position:absolute;text-align:center;background:var(--secondary-egg-shell-color);border-radius:1.2rem;box-shadow:0 10px 30px var(--box-shadow-black-color)}.tooltip__text__box.topRight{right:0;bottom:2.8rem}.tooltip__text__box.topRight:after{right:10%}.tooltip__text__box.topLeft{left:0;bottom:2.8rem}.tooltip__text__box.topLeft:after{left:10%}.tooltip__text__box.topCenter{right:-50%;bottom:2.8rem}.tooltip__text__box.topCenter:after{left:50%}.tooltip__text__box.bottomLeft{left:0;top:2.8rem}.tooltip__text__box.bottomLeft:after{left:10%}.tooltip__text__box.bottomCenter{right:-50%;top:2.8rem}.tooltip__text__box.bottomCenter:after{left:50%}.tooltip__text__box.bottomRight{right:0;top:2.8rem}.tooltip__text__box.bottomRight:after{right:10%}.tooltip__text__box.autoSize{width:auto;height:auto}.tooltip__text{padding:1rem;text-align:justify}@media (max-width: 768px){:host(.profile-loading__icon) .tooltip__text__box{left:-2rem}}@media (max-width: 768px){:host(.profile-details-loading__icon) .tooltip__text__box{left:-9.7rem}}:host(.empty_state__btn-tooltip) .tooltip__text__box{right:-1.85rem}:host(.funeral-cover__info-btn-tooltip) .tooltip__text__box{right:-1.75rem}@media (max-width: 768px){:host(.funeral-cover__info-btn-tooltip) .tooltip__text__box{right:-1.2rem}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-tooltip', template: "<div\n  *ngIf=\"showContent && additionalShowCondition\"\n  [ngStyle]=\"{\n    top: top,\n    zIndex: zIndex\n  }\"\n  [ngClass]=\"['tooltip__text__box', position, autoSize ? 'autoSize' : '']\"\n>\n  <div class=\"tooltip__text\">{{ text }}</div>\n</div>\n<ng-content></ng-content>\n", styles: [".tooltip-text,:host(.funeral-cover__info-btn-tooltip) .tooltip__text,:host(.empty_state__btn-tooltip) .tooltip__text{text-align:left;color:var(--primary-dark-teal-color);font-family:var(--standard-font-family-hero-new-bold)}:host{width:100%;position:relative}.display__after,.position__bottom,.tooltip__text__box.bottomRight:after,.tooltip__text__box.bottomCenter:after,.tooltip__text__box.bottomLeft:after,.position__top,.tooltip__text__box.topCenter:after,.tooltip__text__box.topLeft:after,.tooltip__text__box.topRight:after{content:\"\";z-index:1;position:absolute;border-style:solid;border-width:.6rem}.position__top,.tooltip__text__box.topCenter:after,.tooltip__text__box.topLeft:after,.tooltip__text__box.topRight:after{top:100%;border-color:var(--secondary-egg-shell-color) transparent transparent transparent}.position__bottom,.tooltip__text__box.bottomRight:after,.tooltip__text__box.bottomCenter:after,.tooltip__text__box.bottomLeft:after{bottom:100%;border-color:transparent transparent var(--secondary-egg-shell-color) transparent}.tooltip__text__box{display:flex;align-items:center;width:19rem;font-size:12px;line-height:20px;position:absolute;text-align:center;background:var(--secondary-egg-shell-color);border-radius:1.2rem;box-shadow:0 10px 30px var(--box-shadow-black-color)}.tooltip__text__box.topRight{right:0;bottom:2.8rem}.tooltip__text__box.topRight:after{right:10%}.tooltip__text__box.topLeft{left:0;bottom:2.8rem}.tooltip__text__box.topLeft:after{left:10%}.tooltip__text__box.topCenter{right:-50%;bottom:2.8rem}.tooltip__text__box.topCenter:after{left:50%}.tooltip__text__box.bottomLeft{left:0;top:2.8rem}.tooltip__text__box.bottomLeft:after{left:10%}.tooltip__text__box.bottomCenter{right:-50%;top:2.8rem}.tooltip__text__box.bottomCenter:after{left:50%}.tooltip__text__box.bottomRight{right:0;top:2.8rem}.tooltip__text__box.bottomRight:after{right:10%}.tooltip__text__box.autoSize{width:auto;height:auto}.tooltip__text{padding:1rem;text-align:justify}@media (max-width: 768px){:host(.profile-loading__icon) .tooltip__text__box{left:-2rem}}@media (max-width: 768px){:host(.profile-details-loading__icon) .tooltip__text__box{left:-9.7rem}}:host(.empty_state__btn-tooltip) .tooltip__text__box{right:-1.85rem}:host(.funeral-cover__info-btn-tooltip) .tooltip__text__box{right:-1.75rem}@media (max-width: 768px){:host(.funeral-cover__info-btn-tooltip) .tooltip__text__box{right:-1.2rem}}\n"] }]
+            args: [{ selector: 'lib-af-connect-tooltip', template: "<div\r\n  *ngIf=\"showContent && additionalShowCondition\"\r\n  [ngStyle]=\"{\r\n    top: top,\r\n    zIndex: zIndex\r\n  }\"\r\n  [ngClass]=\"['tooltip__text__box', position, autoSize ? 'autoSize' : '']\"\r\n>\r\n  <div class=\"tooltip__text\">{{ text }}</div>\r\n</div>\r\n<ng-content></ng-content>\r\n", styles: [".tooltip-text,:host(.funeral-cover__info-btn-tooltip) .tooltip__text,:host(.empty_state__btn-tooltip) .tooltip__text{text-align:left;color:var(--primary-dark-teal-color);font-family:var(--standard-font-family-hero-new-bold)}:host{width:100%;position:relative}.display__after,.position__bottom,.tooltip__text__box.bottomRight:after,.tooltip__text__box.bottomCenter:after,.tooltip__text__box.bottomLeft:after,.position__top,.tooltip__text__box.topCenter:after,.tooltip__text__box.topLeft:after,.tooltip__text__box.topRight:after{content:\"\";z-index:1;position:absolute;border-style:solid;border-width:.6rem}.position__top,.tooltip__text__box.topCenter:after,.tooltip__text__box.topLeft:after,.tooltip__text__box.topRight:after{top:100%;border-color:var(--secondary-egg-shell-color) transparent transparent transparent}.position__bottom,.tooltip__text__box.bottomRight:after,.tooltip__text__box.bottomCenter:after,.tooltip__text__box.bottomLeft:after{bottom:100%;border-color:transparent transparent var(--secondary-egg-shell-color) transparent}.tooltip__text__box{display:flex;align-items:center;width:19rem;font-size:12px;line-height:20px;position:absolute;text-align:center;background:var(--secondary-egg-shell-color);border-radius:1.2rem;box-shadow:0 10px 30px var(--box-shadow-black-color)}.tooltip__text__box.topRight{right:0;bottom:2.8rem}.tooltip__text__box.topRight:after{right:10%}.tooltip__text__box.topLeft{left:0;bottom:2.8rem}.tooltip__text__box.topLeft:after{left:10%}.tooltip__text__box.topCenter{right:-50%;bottom:2.8rem}.tooltip__text__box.topCenter:after{left:50%}.tooltip__text__box.bottomLeft{left:0;top:2.8rem}.tooltip__text__box.bottomLeft:after{left:10%}.tooltip__text__box.bottomCenter{right:-50%;top:2.8rem}.tooltip__text__box.bottomCenter:after{left:50%}.tooltip__text__box.bottomRight{right:0;top:2.8rem}.tooltip__text__box.bottomRight:after{right:10%}.tooltip__text__box.autoSize{width:auto;height:auto}.tooltip__text{padding:1rem;text-align:justify}@media (max-width: 768px){:host(.profile-loading__icon) .tooltip__text__box{left:-2rem}}@media (max-width: 768px){:host(.profile-details-loading__icon) .tooltip__text__box{left:-9.7rem}}:host(.empty_state__btn-tooltip) .tooltip__text__box{right:-1.85rem}:host(.funeral-cover__info-btn-tooltip) .tooltip__text__box{right:-1.75rem}@media (max-width: 768px){:host(.funeral-cover__info-btn-tooltip) .tooltip__text__box{right:-1.2rem}}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], position: [{
@@ -1890,10 +1929,10 @@ class AfConnectBreadcrumbComponent {
     }
 }
 AfConnectBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectBreadcrumbComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-AfConnectBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectBreadcrumbComponent, selector: "lib-af-connect-breadcrumb", inputs: { currentPage: "currentPage" }, ngImport: i0, template: "<div class=\"breadcrumb-wrapper\">\n    <div class=\"breadcrumb-container\">\n      <div class=\"home-icon-container\" (click)=\"goToDashboard()\">\n        <lib-af-connect-svg-button [customSize]=\"24\" src=\"../../../assets/icons/home.svg\" emitValue=\"isCloseModal\"></lib-af-connect-svg-button>\n      </div>\n      <div class=\"titles-container\">\n        <div class=\"home-title\" (click)=\"goToDashboard()\">Home</div>\n        <afc-expandable-arrow></afc-expandable-arrow>\n        <div class=\"current-title\">{{ currentPage }}</div>\n      </div>\n    </div>\n  </div>\n  ", styles: [".breadcrumb-wrapper{padding:2rem 0}@media (max-width: 768px){.breadcrumb-wrapper{padding:12px 6px}}.breadcrumb-container{display:inline-flex;align-items:center;padding:.5rem;background:var(--main-white-color);border-radius:22px;gap:14px}.home-icon-container{flex-shrink:0;width:32px;height:32px;background-color:var(--breadcrumb-background-color);display:flex;justify-content:center;align-items:center;border-radius:16px}.titles-container{display:flex;gap:1rem;font-size:14px;justify-content:space-between;align-items:center}@media (max-width: 768px){.titles-container{gap:.5rem}}.current-title{color:var(--primary-dark-teal-color);margin-right:.375rem}.home-title{cursor:pointer}\n"], dependencies: [{ kind: "component", type: ExpandableArrowComponent, selector: "afc-expandable-arrow", inputs: ["color", "startPosition", "endPosition"] }, { kind: "component", type: AfConnectSvgButtonComponent, selector: "lib-af-connect-svg-button", inputs: ["src", "emitValue", "customSize", "size"], outputs: ["clickBtn"] }] });
+AfConnectBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectBreadcrumbComponent, selector: "lib-af-connect-breadcrumb", inputs: { currentPage: "currentPage" }, ngImport: i0, template: "<div class=\"breadcrumb-wrapper\">\r\n    <div class=\"breadcrumb-container\">\r\n      <div class=\"home-icon-container\" (click)=\"goToDashboard()\">\r\n        <lib-af-connect-svg-button [customSize]=\"24\" src=\"../../../assets/icons/home.svg\" emitValue=\"isCloseModal\"></lib-af-connect-svg-button>\r\n      </div>\r\n      <div class=\"titles-container\">\r\n        <div class=\"home-title\" (click)=\"goToDashboard()\">Home</div>\r\n        <afc-expandable-arrow></afc-expandable-arrow>\r\n        <div class=\"current-title\">{{ currentPage }}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".breadcrumb-wrapper{padding:2rem 0}@media (max-width: 768px){.breadcrumb-wrapper{padding:12px 6px}}.breadcrumb-container{display:inline-flex;align-items:center;padding:.5rem;background:var(--main-white-color);border-radius:22px;gap:14px}.home-icon-container{flex-shrink:0;width:32px;height:32px;background-color:var(--breadcrumb-background-color);display:flex;justify-content:center;align-items:center;border-radius:16px}.titles-container{display:flex;gap:1rem;font-size:14px;justify-content:space-between;align-items:center}@media (max-width: 768px){.titles-container{gap:.5rem}}.current-title{color:var(--primary-dark-teal-color);margin-right:.375rem}.home-title{cursor:pointer}\n"], dependencies: [{ kind: "component", type: ExpandableArrowComponent, selector: "afc-expandable-arrow", inputs: ["color", "startPosition", "endPosition"] }, { kind: "component", type: AfConnectSvgButtonComponent, selector: "lib-af-connect-svg-button", inputs: ["src", "emitValue", "customSize", "size"], outputs: ["clickBtn"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-breadcrumb', template: "<div class=\"breadcrumb-wrapper\">\n    <div class=\"breadcrumb-container\">\n      <div class=\"home-icon-container\" (click)=\"goToDashboard()\">\n        <lib-af-connect-svg-button [customSize]=\"24\" src=\"../../../assets/icons/home.svg\" emitValue=\"isCloseModal\"></lib-af-connect-svg-button>\n      </div>\n      <div class=\"titles-container\">\n        <div class=\"home-title\" (click)=\"goToDashboard()\">Home</div>\n        <afc-expandable-arrow></afc-expandable-arrow>\n        <div class=\"current-title\">{{ currentPage }}</div>\n      </div>\n    </div>\n  </div>\n  ", styles: [".breadcrumb-wrapper{padding:2rem 0}@media (max-width: 768px){.breadcrumb-wrapper{padding:12px 6px}}.breadcrumb-container{display:inline-flex;align-items:center;padding:.5rem;background:var(--main-white-color);border-radius:22px;gap:14px}.home-icon-container{flex-shrink:0;width:32px;height:32px;background-color:var(--breadcrumb-background-color);display:flex;justify-content:center;align-items:center;border-radius:16px}.titles-container{display:flex;gap:1rem;font-size:14px;justify-content:space-between;align-items:center}@media (max-width: 768px){.titles-container{gap:.5rem}}.current-title{color:var(--primary-dark-teal-color);margin-right:.375rem}.home-title{cursor:pointer}\n"] }]
+            args: [{ selector: 'lib-af-connect-breadcrumb', template: "<div class=\"breadcrumb-wrapper\">\r\n    <div class=\"breadcrumb-container\">\r\n      <div class=\"home-icon-container\" (click)=\"goToDashboard()\">\r\n        <lib-af-connect-svg-button [customSize]=\"24\" src=\"../../../assets/icons/home.svg\" emitValue=\"isCloseModal\"></lib-af-connect-svg-button>\r\n      </div>\r\n      <div class=\"titles-container\">\r\n        <div class=\"home-title\" (click)=\"goToDashboard()\">Home</div>\r\n        <afc-expandable-arrow></afc-expandable-arrow>\r\n        <div class=\"current-title\">{{ currentPage }}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".breadcrumb-wrapper{padding:2rem 0}@media (max-width: 768px){.breadcrumb-wrapper{padding:12px 6px}}.breadcrumb-container{display:inline-flex;align-items:center;padding:.5rem;background:var(--main-white-color);border-radius:22px;gap:14px}.home-icon-container{flex-shrink:0;width:32px;height:32px;background-color:var(--breadcrumb-background-color);display:flex;justify-content:center;align-items:center;border-radius:16px}.titles-container{display:flex;gap:1rem;font-size:14px;justify-content:space-between;align-items:center}@media (max-width: 768px){.titles-container{gap:.5rem}}.current-title{color:var(--primary-dark-teal-color);margin-right:.375rem}.home-title{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.Router }]; }, propDecorators: { currentPage: [{
                 type: Input
             }] } });