af-connect-components 18.0.25 → 18.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/af-connect-profile-dropdown/af-connect-profile-dropdown.component.mjs +8 -4
- package/esm2022/lib/af-connect-solutions-product-v2/af-connect-solutions-product-v2.component.mjs +3 -3
- package/esm2022/lib/af-connect-solutions-product-v2/af-connect-solutions-product-v2.data.mjs +74 -1
- package/fesm2022/af-connect-components.mjs +82 -5
- package/fesm2022/af-connect-components.mjs.map +1 -1
- package/lib/af-connect-profile-dropdown/af-connect-profile-dropdown.component.d.ts +1 -0
- package/lib/af-connect-solutions-product-v2/af-connect-solutions-product-v2.data.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, ChangeDetectionStrategy, Host, Optional, Input, EventEmitter, forwardRef, Output, ContentChildren, ViewChild, HostListener, Pipe, Directive, ContentChild, ElementRef, ViewChildren, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, Component, ChangeDetectionStrategy, Host, Optional, Input, EventEmitter, forwardRef, Output, ContentChildren, ViewChild, HostBinding, HostListener, Pipe, Directive, ContentChild, ElementRef, ViewChildren, NgModule } from '@angular/core';
|
|
3
3
|
import { map, BehaviorSubject, take, filter, fromEvent, Subscription, interval, debounceTime } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/cdk/layout';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -899,6 +899,7 @@ var DashboardType;
|
|
|
899
899
|
DashboardType["Pensioner"] = "pensioner";
|
|
900
900
|
})(DashboardType || (DashboardType = {}));
|
|
901
901
|
class AfConnectProfileDropdown {
|
|
902
|
+
get hasDashboardSwitchClass() { return this.hasDashboardSwitch; }
|
|
902
903
|
constructor(elementRef, sanitizer, router, breakpointService) {
|
|
903
904
|
this.elementRef = elementRef;
|
|
904
905
|
this.sanitizer = sanitizer;
|
|
@@ -954,11 +955,11 @@ class AfConnectProfileDropdown {
|
|
|
954
955
|
this.router.navigate([url]);
|
|
955
956
|
}
|
|
956
957
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectProfileDropdown, deps: [{ token: i0.ElementRef }, { token: i1$2.DomSanitizer }, { token: i1$3.Router }, { token: BreakpointLibService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
957
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AfConnectProfileDropdown, selector: "lib-af-connect-profile-dropdown", inputs: { username: "username", userType: "userType", navUrls: "navUrls", disableNavUrls: "disableNavUrls", hasSwitchIndicator: "hasSwitchIndicator", isHybrid: "isHybrid", canEditProfile: "canEditProfile", hasDashboardSwitch: "hasDashboardSwitch", dashboardType: "dashboardType" }, outputs: { editProfile: "editProfile", callMeBack: "callMeBack", contactAdviser: "contactAdviser", resetPassword: "resetPassword", logout: "logout", switchUserType: "switchUserType", switchDashboardType: "switchDashboardType" }, host: { listeners: { "click": "show($event)", "document:click": "click($event)" } }, ngImport: i0, template: "<span [class]=\"['logo-content', userType === USER_TYPE.Retail ? 'blue' : isHybrid ? 'yellow' : 'orange']\">\r\n <ng-container *ngTemplateOutlet=\"!(breakpointService.isTablet$ | async) ? mobileIcon : desktopIcon\"></ng-container>\r\n</span>\r\n\r\n<ng-container *ngIf=\"showMenu\">\r\n <div class=\"dropdown-content\" [class.has-dashboard-switch]=\"hasDashboardSwitch\">\r\n <div *ngIf=\"hasDashboardSwitch\" class=\"dashboard-switch\">\r\n <lib-af-connect-radio-group variant=\"checkbox\" direction=\"column\" (valueChange)=\"selectDashboard($event)\">\r\n <div\r\n class=\"dashboard-switch__option\"\r\n (click)=\"selectDashboard(DASHBOARD_TYPE.Investor)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"investorIcon\"></ng-container>\r\n\r\n <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"DASHBOARD_TYPE.Investor\" [checked]=\"dashboardType === DASHBOARD_TYPE.Investor\" itemOrder=\"right-to-left\">\r\n <span>Investor dashboard</span>\r\n </lib-af-connect-radio-button>\r\n </div>\r\n <div\r\n class=\"dashboard-switch__option\"\r\n (click)=\"selectDashboard(DASHBOARD_TYPE.Pensioner)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"pensionerIcon\"></ng-container>\r\n\r\n <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"DASHBOARD_TYPE.Pensioner\" [checked]=\"dashboardType === DASHBOARD_TYPE.Pensioner\" itemOrder=\"right-to-left\">\r\n <span>Annuitant dashboard</span>\r\n </lib-af-connect-radio-button>\r\n </div>\r\n </lib-af-connect-radio-group>\r\n </div>\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 *ngIf=\"hasSwitchIndicator\" 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 boxShadow\"\r\n (click)=\"select(USER_TYPE.Retail)\"\r\n >\r\n <div class=\"logo blue\">\r\n <ng-container *ngTemplateOutlet=\"desktopIcon\"></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 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 <ng-container *ngIf=\"!(breakpointService.isTablet$ | async)\">\r\n <ng-container *ngFor=\"let url of navUrls\">\r\n <div class=\"navigation-item\" [class.disabled]=\"disableNavUrls\" (mousedown)=\"navigateTo(url.href!)\">\r\n <div *ngIf=\"!url.svg\" class=\"container\"></div>\r\n <ng-container *ngIf=\"url.svg\"><div class=\"container\" [innerHTML]=\"sanitizeSvg(url.svg)\"></div></ng-container>\r\n <span class=\"page-name bold\">{{url.name}}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div *ngIf=\"canEditProfile\" class=\"navigation-item\" [class.disabled]=\"disableNavUrls\" (click)=\"!disableNavUrls && editProfile.emit()\">\r\n <svg id=\"Icons_UI_Edit_Colour\" data-name=\"Icons / UI / Edit / Colour\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.494\" height=\"15.5\" viewBox=\"0 0 15.494 15.5\">\r\n <g id=\"Group_3\" data-name=\"Group 3\" transform=\"translate(0)\"><path id=\"Fill_1\" data-name=\"Fill 1\" d=\"M.837,15.5H.644a.648.648,0,0,1-.57-.346A.642.642,0,0,1,.03,14.66l1.55-4.554a.663.663,0,0,1,.161-.259L10.785.8a2.779,2.779,0,0,1,3.909,0V.836a2.787,2.787,0,0,1,0,3.908L5.65,13.788l-.258.162L.837,15.5Zm11.7-14.056a1.477,1.477,0,0,0-.844.264L2.776,10.688l-1.1,3.165,3.165-1.1L13.79,3.808l-.032-.032a1.486,1.486,0,0,0-1.223-2.331Z\" fill=\"#ef4f1f\"/></g>\r\n <path id=\"Path_22\" data-name=\"Path 22\" d=\"M.857.878,3.294,3.315\" transform=\"translate(2.393 8.871)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"2\"/>\r\n </svg> \r\n <span>Edit profile</span>\r\n </div>\r\n <div class=\"navigation-item\" (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 class=\"navigation-item\" (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 #desktopIcon>\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 #mobileIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.327\" height=\"10.095\" viewBox=\"0 0 15.327 10.095\">\r\n <path id=\"menu_24dp_1F1F1F_FILL0_wght200_GRAD0_opsz24\" d=\"M160-680.675v-.958h15.327v.958Zm0-4.569v-.958h15.327v.958Zm0-4.569v-.958h15.327v.958Z\" transform=\"translate(-160 690.77)\" 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\r\n<ng-template #investorIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"15 14 32 32\">\r\n <defs>\r\n <filter id=\"Path_21459\" x=\"0\" y=\"0\" width=\"62\" height=\"62\" filterUnits=\"userSpaceOnUse\">\r\n <feOffset dy=\"1\" input=\"SourceAlpha\"/>\r\n <feGaussianBlur stdDeviation=\"5\" result=\"blur\"/>\r\n <feFlood flood-opacity=\"0.161\"/>\r\n <feComposite operator=\"in\" in2=\"blur\"/>\r\n <feComposite in=\"SourceGraphic\"/>\r\n </filter>\r\n </defs>\r\n <g id=\"Group_15418\" data-name=\"Group 15418\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\" filter=\"url(#Path_21459)\">\r\n <g id=\"Path_21459-2\" data-name=\"Path 21459\" transform=\"translate(15 14)\" fill=\"#f69521\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g id=\"Layer_1\" data-name=\"Layer 1\" transform=\"translate(-41.01 244.242)\">\r\n <g id=\"Group_10898\" data-name=\"Group 10898\" transform=\"translate(50 -236)\">\r\n <g id=\"Group_10893\" data-name=\"Group 10893\" transform=\"translate(0)\">\r\n <path id=\"Rectangle_1510\" data-name=\"Rectangle 1510\" d=\"M15.706,50.57h0a.572.572,0,0,1-.57.57H13.07a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,15.706,50.57Z\" transform=\"translate(-10.076 -35.739)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1511\" data-name=\"Rectangle 1511\" d=\"M40.086,50.57h0a.572.572,0,0,1-.57.57H37.45a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,40.086,50.57Z\" transform=\"translate(-27.502 -35.739)\" fill=\"#fff\"/>\r\n <g id=\"Path_6177\" data-name=\"Path 6177\">\r\n <path id=\"Path_6179\" data-name=\"Path 6179\" d=\"M5.426.285A1.141,1.141,0,0,0,4.285,1.426V13.405a1.141,1.141,0,0,0,1.141,1.141H17.405a1.141,1.141,0,0,0,1.141-1.141V1.426A1.141,1.141,0,0,0,17.405.285H5.426m0-.285H17.405a1.427,1.427,0,0,1,1.426,1.426V13.405a1.427,1.427,0,0,1-1.426,1.426H5.426A1.427,1.427,0,0,1,4,13.405V1.426A1.427,1.427,0,0,1,5.426,0Z\" transform=\"translate(-4)\" fill=\"#fff\"/>\r\n </g>\r\n <path id=\"Rectangle_1507_-_Outline\" data-name=\"Rectangle 1507 - Outline\" d=\"M5.426.285A1.141,1.141,0,0,0,4.285,1.426V13.405a1.141,1.141,0,0,0,1.141,1.141H17.405a1.141,1.141,0,0,0,1.141-1.141V1.426A1.141,1.141,0,0,0,17.405.285H5.426m0-.285H17.405a1.427,1.427,0,0,1,1.426,1.426V13.405a1.427,1.427,0,0,1-1.426,1.426H5.426A1.427,1.427,0,0,1,4,13.405V1.426A1.427,1.427,0,0,1,5.426,0Z\" transform=\"translate(-4)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1506\" data-name=\"Rectangle 1506\" d=\"M8.426,3.285A1.141,1.141,0,0,0,7.285,4.426V14.694a1.141,1.141,0,0,0,1.141,1.141H18.694a1.141,1.141,0,0,0,1.141-1.141V4.426a1.141,1.141,0,0,0-1.141-1.141H8.426m0-.285H18.694A1.427,1.427,0,0,1,20.12,4.426V14.694a1.427,1.427,0,0,1-1.426,1.426H8.426A1.427,1.427,0,0,1,7,14.694V4.426A1.427,1.427,0,0,1,8.426,3Z\" transform=\"translate(-6.144 -2.144)\" fill=\"#fff\"/>\r\n <path id=\"Path_6176\" data-name=\"Path 6176\" d=\"M42.283,22A1.283,1.283,0,1,1,41,23.283,1.282,1.282,0,0,1,42.283,22Z\" transform=\"translate(-31.303 -15.868)\" fill=\"none\" stroke=\"#fff\" stroke-width=\"0.7\"/>\r\n <path id=\"Rectangle_1508\" data-name=\"Rectangle 1508\" d=\"M6.57,9h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V9.57A.572.572,0,0,1,6.57,9Z\" transform=\"translate(-5.43 -6.433)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1509\" data-name=\"Rectangle 1509\" d=\"M6.57,30h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V30.57A.572.572,0,0,1,6.57,30Z\" transform=\"translate(-5.43 -21.444)\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #pensionerIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"15 14 32 32\">\r\n <defs>\r\n <filter id=\"Path_21472\" x=\"0\" y=\"0\" width=\"62\" height=\"62\" filterUnits=\"userSpaceOnUse\">\r\n <feOffset dy=\"1\" input=\"SourceAlpha\"/>\r\n <feGaussianBlur stdDeviation=\"5\" result=\"blur\"/>\r\n <feFlood flood-opacity=\"0.161\"/>\r\n <feComposite operator=\"in\" in2=\"blur\"/>\r\n <feComposite in=\"SourceGraphic\"/>\r\n </filter>\r\n </defs>\r\n <g id=\"Group_15420\" data-name=\"Group 15420\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\" filter=\"url(#Path_21472)\">\r\n <g id=\"Path_21472-2\" data-name=\"Path 21472\" transform=\"translate(15 14)\" fill=\"#15808d\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g id=\"Portfolio_Icon\" data-name=\"Portfolio Icon\" transform=\"translate(-0.014 7.951)\">\r\n <path id=\"Path_6468\" data-name=\"Path 6468\" d=\"M49.257,42.8H36.163a1.716,1.716,0,0,1-1.8-1.615V31.01a.242.242,0,0,1,.48,0,1.12,1.12,0,0,0,1.173,1.054H49.257a1.085,1.085,0,0,1,1.138,1.022v2.667a.229.229,0,0,1-.24.215H45.485a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977A1.473,1.473,0,0,0,45.511,38.7h4.641a.229.229,0,0,1,.24.216v2.859A1.086,1.086,0,0,1,49.257,42.8ZM34.845,32.055V41.18a1.256,1.256,0,0,0,1.317,1.183H49.257a.627.627,0,0,0,.658-.591V39.131h-4.4a1.933,1.933,0,0,1-2.026-1.773,1.695,1.695,0,0,1,.576-1.286,2.105,2.105,0,0,1,1.424-.534h4.429V33.086a.627.627,0,0,0-.658-.591H36.019A1.747,1.747,0,0,1,34.845,32.055Z\" transform=\"translate(-26.426 -27.829)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6469\" data-name=\"Path 6469\" d=\"M69.395,49.118H64.718a1.933,1.933,0,0,1-2.026-1.773,1.694,1.694,0,0,1,.576-1.286,2.1,2.1,0,0,1,1.424-.535h4.7a1.086,1.086,0,0,1,1.138,1.022V48.1a1.086,1.086,0,0,1-1.138,1.021Zm-4.7-3.162a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977,1.473,1.473,0,0,0,1.546,1.347h4.678a.628.628,0,0,0,.658-.591v-1.55a.628.628,0,0,0-.658-.591h-4.7Z\" transform=\"translate(-45.631 -37.816)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6470\" data-name=\"Path 6470\" d=\"M37.763,29.805H36.016a1.494,1.494,0,1,1,0-2.97h6.345a.237.237,0,0,1,.231.157.206.206,0,0,1-.105.242l-4.6,2.539A.258.258,0,0,1,37.763,29.805Zm-1.747-2.539a1.06,1.06,0,1,0,0,2.108h1.678l3.818-2.108Z\" transform=\"translate(-26.424 -25.139)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6471\" data-name=\"Path 6471\" d=\"M56.553,29.82H45.8a.233.233,0,0,1-.238-.186.217.217,0,0,1,.172-.237l8.617-2.2,1.33-.34a.245.245,0,0,1,.3.149l.805,2.54a.2.2,0,0,1-.039.189.25.25,0,0,1-.193.086Zm-9.027-.431h8.71l-.651-2.057Z\" transform=\"translate(-34.018 -25.154)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6472\" data-name=\"Path 6472\" d=\"M44.862,26.254h-.445a.238.238,0,0,1-.231-.157.206.206,0,0,1,.105-.242l4.6-2.539,3.071-1.7a.258.258,0,0,1,.33.071l1.393,2.035a.2.2,0,0,1,.019.191.232.232,0,0,1-.158.129l-8.617,2.2A.279.279,0,0,1,44.862,26.254ZM52.008,22.1l-6.364,3.513,7.465-1.906Z\" transform=\"translate(-33.079 -21.588)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6473\" data-name=\"Path 6473\" d=\"M67.51,50.355a.67.67,0,1,1,.741-.666.708.708,0,0,1-.741.666Zm0-.9a.237.237,0,1,0,.262.235.25.25,0,0,0-.262-.236Z\" transform=\"translate(-48.491 -40.185)\" fill=\"#fff\"/>\r\n <path id=\"Path_6474\" data-name=\"Path 6474\" d=\"M40.583,59.719V56.632c0-.142.011-.285,0-.427V56.2c0-.118-.383-.118-.383,0v3.088c0,.142-.011.284,0,.427v.006C40.2,59.836,40.583,59.837,40.583,59.719Z\" transform=\"translate(-30.379 -44.995)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\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}@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;cursor:pointer}.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;width:auto;min-width:min(230px,82vw);height:fit-content;right:0;top:3.5rem;font-size:12px;background:#fff;display:flex;flex-direction:column;align-items:center}.dropdown-content .page-name{padding-right:1.5rem}.dropdown-content>div:not(.user-type-switch):not(.dashboard-switch):nth-child(-n+2){display:none}@media (max-width: 768px){.dropdown-content{top:47px}.dropdown-content>div:not(.user-type-switch):not(.dashboard-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);cursor:pointer}.dropdown-content div svg,.dropdown-content div.container{width:20px;height:20px;padding-left:1rem}.dropdown-content div.container{border:none}.dropdown-content>div:not(.user-type-switch):not(.dashboard-switch):hover{background-color:#0000000a}.dropdown-content .user-type-switch{width:auto;height:100%;cursor:default;border-bottom:none}.dropdown-content .user-type-switch__btn-container{display:block!important;width:241px;height:166px;background:#fafbfc;border:1px solid #F3F3F3;border-radius:5pt;margin:1rem}.dropdown-content .user-type-switch__option{width:100%;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%}.dropdown-content .dashboard-switch{height:fit-content;cursor:default;border-bottom:none}.dropdown-content .dashboard-switch div svg,.dropdown-content .dashboard-switch div.container{width:unset;height:unset;padding-left:unset}.dropdown-content .dashboard-switch div{height:auto;gap:.5rem;border-bottom:none}.dropdown-content .dashboard-switch ::ng-deep .radio-buttons-container{gap:.2rem}.dropdown-content .dashboard-switch lib-af-connect-radio-button span{font-size:12px}.dropdown-content .dashboard-switch lib-af-connect-radio-group{gap:.75rem;width:100%;padding:.5rem}.dropdown-content .dashboard-switch lib-af-connect-radio-button{width:100%}.dropdown-content .dashboard-switch__option{width:100%;height:42px;padding:.5rem;border-bottom:none;gap:.3rem;background-color:#fafbfc;box-sizing:border-box;cursor:pointer}.dropdown-content .dashboard-switch__option:hover{background-color:#0000000a}.dropdown-content .dashboard-switch__option>svg{height:32px;width:32px;flex:0 0 32px;overflow:hidden;border-radius:50%;filter:drop-shadow(1px 3px 5px rgba(0,0,0,.161))}.dropdown-content.has-dashboard-switch{min-width:min(280px,90vw)}.navigation-item{transition:color .2s ease-out;cursor:pointer}.navigation-item.disabled{pointer-events:none;color:#7f8991;cursor:default}.navigation-item.disabled>svg{filter:invert(54%) sepia(14%) saturate(254%) hue-rotate(165deg) brightness(97%) contrast(86%)}.blue{background:#2cc1da}.orange{background:#f69521}.yellow{background:var(--bright-tuscan-color)}.boxShadow{box-shadow:3px 3px 6px #00000008}.bold{font-family:var(--standard-font-family-hero-new-semibold)}\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: "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"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
958
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AfConnectProfileDropdown, selector: "lib-af-connect-profile-dropdown", inputs: { username: "username", userType: "userType", navUrls: "navUrls", disableNavUrls: "disableNavUrls", hasSwitchIndicator: "hasSwitchIndicator", isHybrid: "isHybrid", canEditProfile: "canEditProfile", hasDashboardSwitch: "hasDashboardSwitch", dashboardType: "dashboardType" }, outputs: { editProfile: "editProfile", callMeBack: "callMeBack", contactAdviser: "contactAdviser", resetPassword: "resetPassword", logout: "logout", switchUserType: "switchUserType", switchDashboardType: "switchDashboardType" }, host: { listeners: { "click": "show($event)", "document:click": "click($event)" }, properties: { "class.has-dashboard-switch": "this.hasDashboardSwitchClass" } }, ngImport: i0, template: "<ng-container *ngIf=\"hasDashboardSwitch; else roundIcon\">\r\n <div class=\"logo-content logo-content--switch\">\r\n <span class=\"logo-content--switch__label\">{{ dashboardType === DASHBOARD_TYPE.Pensioner ? 'Annuitant' : 'Investor' }}</span>\r\n <ng-container *ngTemplateOutlet=\"dashboardType === DASHBOARD_TYPE.Pensioner ? pensionerProfileIcon : investorProfileIcon\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #roundIcon>\r\n <span [class]=\"['logo-content', userType === USER_TYPE.Retail ? 'blue' : isHybrid ? 'yellow' : 'orange']\">\r\n <ng-container *ngTemplateOutlet=\"!(breakpointService.isTablet$ | async) ? mobileIcon : desktopIcon\"></ng-container>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"showMenu\">\r\n <div class=\"dropdown-content\" [class.has-dashboard-switch]=\"hasDashboardSwitch\">\r\n <div *ngIf=\"hasDashboardSwitch\" class=\"dashboard-switch\">\r\n <lib-af-connect-radio-group variant=\"checkbox\" direction=\"column\" (valueChange)=\"selectDashboard($event)\">\r\n <div\r\n class=\"dashboard-switch__option\"\r\n (click)=\"selectDashboard(DASHBOARD_TYPE.Investor)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"investorIcon\"></ng-container>\r\n\r\n <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"DASHBOARD_TYPE.Investor\" [checked]=\"dashboardType === DASHBOARD_TYPE.Investor\" itemOrder=\"right-to-left\">\r\n <span>Investor dashboard</span>\r\n </lib-af-connect-radio-button>\r\n </div>\r\n <div\r\n class=\"dashboard-switch__option\"\r\n (click)=\"selectDashboard(DASHBOARD_TYPE.Pensioner)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"pensionerIcon\"></ng-container>\r\n\r\n <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"DASHBOARD_TYPE.Pensioner\" [checked]=\"dashboardType === DASHBOARD_TYPE.Pensioner\" itemOrder=\"right-to-left\">\r\n <span>Annuitant dashboard</span>\r\n </lib-af-connect-radio-button>\r\n </div>\r\n </lib-af-connect-radio-group>\r\n </div>\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 *ngIf=\"hasSwitchIndicator\" 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 boxShadow\"\r\n (click)=\"select(USER_TYPE.Retail)\"\r\n >\r\n <div class=\"logo blue\">\r\n <ng-container *ngTemplateOutlet=\"desktopIcon\"></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 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 <ng-container *ngIf=\"!(breakpointService.isTablet$ | async)\">\r\n <ng-container *ngFor=\"let url of navUrls\">\r\n <div class=\"navigation-item\" [class.disabled]=\"disableNavUrls\" (mousedown)=\"navigateTo(url.href!)\">\r\n <div *ngIf=\"!url.svg\" class=\"container\"></div>\r\n <ng-container *ngIf=\"url.svg\"><div class=\"container\" [innerHTML]=\"sanitizeSvg(url.svg)\"></div></ng-container>\r\n <span class=\"page-name bold\">{{url.name}}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div *ngIf=\"canEditProfile\" class=\"navigation-item\" [class.disabled]=\"disableNavUrls\" (click)=\"!disableNavUrls && editProfile.emit()\">\r\n <svg id=\"Icons_UI_Edit_Colour\" data-name=\"Icons / UI / Edit / Colour\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.494\" height=\"15.5\" viewBox=\"0 0 15.494 15.5\">\r\n <g id=\"Group_3\" data-name=\"Group 3\" transform=\"translate(0)\"><path id=\"Fill_1\" data-name=\"Fill 1\" d=\"M.837,15.5H.644a.648.648,0,0,1-.57-.346A.642.642,0,0,1,.03,14.66l1.55-4.554a.663.663,0,0,1,.161-.259L10.785.8a2.779,2.779,0,0,1,3.909,0V.836a2.787,2.787,0,0,1,0,3.908L5.65,13.788l-.258.162L.837,15.5Zm11.7-14.056a1.477,1.477,0,0,0-.844.264L2.776,10.688l-1.1,3.165,3.165-1.1L13.79,3.808l-.032-.032a1.486,1.486,0,0,0-1.223-2.331Z\" fill=\"#ef4f1f\"/></g>\r\n <path id=\"Path_22\" data-name=\"Path 22\" d=\"M.857.878,3.294,3.315\" transform=\"translate(2.393 8.871)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"2\"/>\r\n </svg> \r\n <span>Edit profile</span>\r\n </div>\r\n <div class=\"navigation-item\" (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 class=\"navigation-item\" (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 #desktopIcon>\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 #mobileIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.327\" height=\"10.095\" viewBox=\"0 0 15.327 10.095\">\r\n <path id=\"menu_24dp_1F1F1F_FILL0_wght200_GRAD0_opsz24\" d=\"M160-680.675v-.958h15.327v.958Zm0-4.569v-.958h15.327v.958Zm0-4.569v-.958h15.327v.958Z\" transform=\"translate(-160 690.77)\" 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\r\n<ng-template #investorProfileIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" class=\"profile-switch-icon\" viewBox=\"15 14 32 32\">\r\n <g id=\"Group_15418_p\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\">\r\n <g id=\"Path_21459_p\" transform=\"translate(15 14)\" fill=\"#f69521\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g transform=\"translate(-41.01 244.242)\">\r\n <g transform=\"translate(50 -236)\">\r\n <path d=\"M15.706,50.57h0a.572.572,0,0,1-.57.57H13.07a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,15.706,50.57Z\" transform=\"translate(-10.076 -35.739)\" fill=\"#fff\"/>\r\n <path d=\"M40.086,50.57h0a.572.572,0,0,1-.57.57H37.45a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,40.086,50.57Z\" transform=\"translate(-27.502 -35.739)\" fill=\"#fff\"/>\r\n <path d=\"M5.426.285A1.141,1.141,0,0,0,4.285,1.426V13.405a1.141,1.141,0,0,0,1.141,1.141H17.405a1.141,1.141,0,0,0,1.141-1.141V1.426A1.141,1.141,0,0,0,17.405.285H5.426m0-.285H17.405a1.427,1.427,0,0,1,1.426,1.426V13.405a1.427,1.427,0,0,1-1.426,1.426H5.426A1.427,1.427,0,0,1,4,13.405V1.426A1.427,1.427,0,0,1,5.426,0Z\" transform=\"translate(-4)\" fill=\"#fff\"/>\r\n <path d=\"M8.426,3.285A1.141,1.141,0,0,0,7.285,4.426V14.694a1.141,1.141,0,0,0,1.141,1.141H18.694a1.141,1.141,0,0,0,1.141-1.141V4.426a1.141,1.141,0,0,0-1.141-1.141H8.426m0-.285H18.694A1.427,1.427,0,0,1,20.12,4.426V14.694a1.427,1.427,0,0,1-1.426,1.426H8.426A1.427,1.427,0,0,1,7,14.694V4.426A1.427,1.427,0,0,1,8.426,3Z\" transform=\"translate(-6.144 -2.144)\" fill=\"#fff\"/>\r\n <path d=\"M42.283,22A1.283,1.283,0,1,1,41,23.283,1.282,1.282,0,0,1,42.283,22Z\" transform=\"translate(-31.303 -15.868)\" fill=\"none\" stroke=\"#fff\" stroke-width=\"0.7\"/>\r\n <path d=\"M6.57,9h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V9.57A.572.572,0,0,1,6.57,9Z\" transform=\"translate(-5.43 -6.433)\" fill=\"#fff\"/>\r\n <path d=\"M6.57,30h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V30.57A.572.572,0,0,1,6.57,30Z\" transform=\"translate(-5.43 -21.444)\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #pensionerProfileIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" class=\"profile-switch-icon\" viewBox=\"15 14 32 32\">\r\n <g id=\"Group_15420_p\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\">\r\n <g id=\"Path_21472_p\" transform=\"translate(15 14)\" fill=\"#15808d\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g id=\"Portfolio_Icon_p\" transform=\"translate(-0.014 7.951)\">\r\n <path d=\"M49.257,42.8H36.163a1.716,1.716,0,0,1-1.8-1.615V31.01a.242.242,0,0,1,.48,0,1.12,1.12,0,0,0,1.173,1.054H49.257a1.085,1.085,0,0,1,1.138,1.022v2.667a.229.229,0,0,1-.24.215H45.485a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977A1.473,1.473,0,0,0,45.511,38.7h4.641a.229.229,0,0,1,.24.216v2.859A1.086,1.086,0,0,1,49.257,42.8ZM34.845,32.055V41.18a1.256,1.256,0,0,0,1.317,1.183H49.257a.627.627,0,0,0,.658-.591V39.131h-4.4a1.933,1.933,0,0,1-2.026-1.773,1.695,1.695,0,0,1,.576-1.286,2.105,2.105,0,0,1,1.424-.534h4.429V33.086a.627.627,0,0,0-.658-.591H36.019A1.747,1.747,0,0,1,34.845,32.055Z\" transform=\"translate(-26.426 -27.829)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path d=\"M69.395,49.118H64.718a1.933,1.933,0,0,1-2.026-1.773,1.694,1.694,0,0,1,.576-1.286,2.1,2.1,0,0,1,1.424-.535h4.7a1.086,1.086,0,0,1,1.138,1.022V48.1a1.086,1.086,0,0,1-1.138,1.021Zm-4.7-3.162a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977,1.473,1.473,0,0,0,1.546,1.347h4.678a.628.628,0,0,0,.658-.591v-1.55a.628.628,0,0,0-.658-.591h-4.7Z\" transform=\"translate(-45.631 -37.816)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path d=\"M37.763,29.805H36.016a1.494,1.494,0,1,1,0-2.97h6.345a.237.237,0,0,1,.231.157.206.206,0,0,1-.105.242l-4.6,2.539A.258.258,0,0,1,37.763,29.805Zm-1.747-2.539a1.06,1.06,0,1,0,0,2.108h1.678l3.818-2.108Z\" transform=\"translate(-26.424 -25.139)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path d=\"M56.553,29.82H45.8a.233.233,0,0,1-.238-.186.217.217,0,0,1,.172-.237l8.617-2.2,1.33-.34a.245.245,0,0,1,.3.149l.805,2.54a.2.2,0,0,1-.039.189.25.25,0,0,1-.193.086Zm-9.027-.431h8.71l-.651-2.057Z\" transform=\"translate(-34.018 -25.154)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path d=\"M44.862,26.254h-.445a.238.238,0,0,1-.231-.157.206.206,0,0,1,.105-.242l4.6-2.539,3.071-1.7a.258.258,0,0,1,.33.071l1.393,2.035a.2.2,0,0,1,.019.191.232.232,0,0,1-.158.129l-8.617,2.2A.279.279,0,0,1,44.862,26.254ZM52.008,22.1l-6.364,3.513,7.465-1.906Z\" transform=\"translate(-33.079 -21.588)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path d=\"M67.51,50.355a.67.67,0,1,1,.741-.666.708.708,0,0,1-.741.666Zm0-.9a.237.237,0,1,0,.262.235.25.25,0,0,0-.262-.236Z\" transform=\"translate(-48.491 -40.185)\" fill=\"#fff\"/>\r\n <path d=\"M40.583,59.719V56.632c0-.142.011-.285,0-.427V56.2c0-.118-.383-.118-.383,0v3.088c0,.142-.011.284,0,.427v.006C40.2,59.836,40.583,59.837,40.583,59.719Z\" transform=\"translate(-30.379 -44.995)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n </g>\r\n </g>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #investorIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"15 14 32 32\">\r\n <defs>\r\n <filter id=\"Path_21459\" x=\"0\" y=\"0\" width=\"62\" height=\"62\" filterUnits=\"userSpaceOnUse\">\r\n <feOffset dy=\"1\" input=\"SourceAlpha\"/>\r\n <feGaussianBlur stdDeviation=\"5\" result=\"blur\"/>\r\n <feFlood flood-opacity=\"0.161\"/>\r\n <feComposite operator=\"in\" in2=\"blur\"/>\r\n <feComposite in=\"SourceGraphic\"/>\r\n </filter>\r\n </defs>\r\n <g id=\"Group_15418\" data-name=\"Group 15418\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\" filter=\"url(#Path_21459)\">\r\n <g id=\"Path_21459-2\" data-name=\"Path 21459\" transform=\"translate(15 14)\" fill=\"#f69521\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g id=\"Layer_1\" data-name=\"Layer 1\" transform=\"translate(-41.01 244.242)\">\r\n <g id=\"Group_10898\" data-name=\"Group 10898\" transform=\"translate(50 -236)\">\r\n <g id=\"Group_10893\" data-name=\"Group 10893\" transform=\"translate(0)\">\r\n <path id=\"Rectangle_1510\" data-name=\"Rectangle 1510\" d=\"M15.706,50.57h0a.572.572,0,0,1-.57.57H13.07a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,15.706,50.57Z\" transform=\"translate(-10.076 -35.739)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1511\" data-name=\"Rectangle 1511\" d=\"M40.086,50.57h0a.572.572,0,0,1-.57.57H37.45a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,40.086,50.57Z\" transform=\"translate(-27.502 -35.739)\" fill=\"#fff\"/>\r\n <g id=\"Path_6177\" data-name=\"Path 6177\">\r\n <path id=\"Path_6179\" data-name=\"Path 6179\" d=\"M5.426.285A1.141,1.141,0,0,0,4.285,1.426V13.405a1.141,1.141,0,0,0,1.141,1.141H17.405a1.141,1.141,0,0,0,1.141-1.141V1.426A1.141,1.141,0,0,0,17.405.285H5.426m0-.285H17.405a1.427,1.427,0,0,1,1.426,1.426V13.405a1.427,1.427,0,0,1-1.426,1.426H5.426A1.427,1.427,0,0,1,4,13.405V1.426A1.427,1.427,0,0,1,5.426,0Z\" transform=\"translate(-4)\" fill=\"#fff\"/>\r\n </g>\r\n <path id=\"Rectangle_1507_-_Outline\" data-name=\"Rectangle 1507 - Outline\" d=\"M5.426.285A1.141,1.141,0,0,0,4.285,1.426V13.405a1.141,1.141,0,0,0,1.141,1.141H17.405a1.141,1.141,0,0,0,1.141-1.141V1.426A1.141,1.141,0,0,0,17.405.285H5.426m0-.285H17.405a1.427,1.427,0,0,1,1.426,1.426V13.405a1.427,1.427,0,0,1-1.426,1.426H5.426A1.427,1.427,0,0,1,4,13.405V1.426A1.427,1.427,0,0,1,5.426,0Z\" transform=\"translate(-4)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1506\" data-name=\"Rectangle 1506\" d=\"M8.426,3.285A1.141,1.141,0,0,0,7.285,4.426V14.694a1.141,1.141,0,0,0,1.141,1.141H18.694a1.141,1.141,0,0,0,1.141-1.141V4.426a1.141,1.141,0,0,0-1.141-1.141H8.426m0-.285H18.694A1.427,1.427,0,0,1,20.12,4.426V14.694a1.427,1.427,0,0,1-1.426,1.426H8.426A1.427,1.427,0,0,1,7,14.694V4.426A1.427,1.427,0,0,1,8.426,3Z\" transform=\"translate(-6.144 -2.144)\" fill=\"#fff\"/>\r\n <path id=\"Path_6176\" data-name=\"Path 6176\" d=\"M42.283,22A1.283,1.283,0,1,1,41,23.283,1.282,1.282,0,0,1,42.283,22Z\" transform=\"translate(-31.303 -15.868)\" fill=\"none\" stroke=\"#fff\" stroke-width=\"0.7\"/>\r\n <path id=\"Rectangle_1508\" data-name=\"Rectangle 1508\" d=\"M6.57,9h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V9.57A.572.572,0,0,1,6.57,9Z\" transform=\"translate(-5.43 -6.433)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1509\" data-name=\"Rectangle 1509\" d=\"M6.57,30h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V30.57A.572.572,0,0,1,6.57,30Z\" transform=\"translate(-5.43 -21.444)\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #pensionerIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"15 14 32 32\">\r\n <defs>\r\n <filter id=\"Path_21472\" x=\"0\" y=\"0\" width=\"62\" height=\"62\" filterUnits=\"userSpaceOnUse\">\r\n <feOffset dy=\"1\" input=\"SourceAlpha\"/>\r\n <feGaussianBlur stdDeviation=\"5\" result=\"blur\"/>\r\n <feFlood flood-opacity=\"0.161\"/>\r\n <feComposite operator=\"in\" in2=\"blur\"/>\r\n <feComposite in=\"SourceGraphic\"/>\r\n </filter>\r\n </defs>\r\n <g id=\"Group_15420\" data-name=\"Group 15420\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\" filter=\"url(#Path_21472)\">\r\n <g id=\"Path_21472-2\" data-name=\"Path 21472\" transform=\"translate(15 14)\" fill=\"#15808d\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g id=\"Portfolio_Icon\" data-name=\"Portfolio Icon\" transform=\"translate(-0.014 7.951)\">\r\n <path id=\"Path_6468\" data-name=\"Path 6468\" d=\"M49.257,42.8H36.163a1.716,1.716,0,0,1-1.8-1.615V31.01a.242.242,0,0,1,.48,0,1.12,1.12,0,0,0,1.173,1.054H49.257a1.085,1.085,0,0,1,1.138,1.022v2.667a.229.229,0,0,1-.24.215H45.485a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977A1.473,1.473,0,0,0,45.511,38.7h4.641a.229.229,0,0,1,.24.216v2.859A1.086,1.086,0,0,1,49.257,42.8ZM34.845,32.055V41.18a1.256,1.256,0,0,0,1.317,1.183H49.257a.627.627,0,0,0,.658-.591V39.131h-4.4a1.933,1.933,0,0,1-2.026-1.773,1.695,1.695,0,0,1,.576-1.286,2.105,2.105,0,0,1,1.424-.534h4.429V33.086a.627.627,0,0,0-.658-.591H36.019A1.747,1.747,0,0,1,34.845,32.055Z\" transform=\"translate(-26.426 -27.829)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6469\" data-name=\"Path 6469\" d=\"M69.395,49.118H64.718a1.933,1.933,0,0,1-2.026-1.773,1.694,1.694,0,0,1,.576-1.286,2.1,2.1,0,0,1,1.424-.535h4.7a1.086,1.086,0,0,1,1.138,1.022V48.1a1.086,1.086,0,0,1-1.138,1.021Zm-4.7-3.162a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977,1.473,1.473,0,0,0,1.546,1.347h4.678a.628.628,0,0,0,.658-.591v-1.55a.628.628,0,0,0-.658-.591h-4.7Z\" transform=\"translate(-45.631 -37.816)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6470\" data-name=\"Path 6470\" d=\"M37.763,29.805H36.016a1.494,1.494,0,1,1,0-2.97h6.345a.237.237,0,0,1,.231.157.206.206,0,0,1-.105.242l-4.6,2.539A.258.258,0,0,1,37.763,29.805Zm-1.747-2.539a1.06,1.06,0,1,0,0,2.108h1.678l3.818-2.108Z\" transform=\"translate(-26.424 -25.139)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6471\" data-name=\"Path 6471\" d=\"M56.553,29.82H45.8a.233.233,0,0,1-.238-.186.217.217,0,0,1,.172-.237l8.617-2.2,1.33-.34a.245.245,0,0,1,.3.149l.805,2.54a.2.2,0,0,1-.039.189.25.25,0,0,1-.193.086Zm-9.027-.431h8.71l-.651-2.057Z\" transform=\"translate(-34.018 -25.154)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6472\" data-name=\"Path 6472\" d=\"M44.862,26.254h-.445a.238.238,0,0,1-.231-.157.206.206,0,0,1,.105-.242l4.6-2.539,3.071-1.7a.258.258,0,0,1,.33.071l1.393,2.035a.2.2,0,0,1,.019.191.232.232,0,0,1-.158.129l-8.617,2.2A.279.279,0,0,1,44.862,26.254ZM52.008,22.1l-6.364,3.513,7.465-1.906Z\" transform=\"translate(-33.079 -21.588)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6473\" data-name=\"Path 6473\" d=\"M67.51,50.355a.67.67,0,1,1,.741-.666.708.708,0,0,1-.741.666Zm0-.9a.237.237,0,1,0,.262.235.25.25,0,0,0-.262-.236Z\" transform=\"translate(-48.491 -40.185)\" fill=\"#fff\"/>\r\n <path id=\"Path_6474\" data-name=\"Path 6474\" d=\"M40.583,59.719V56.632c0-.142.011-.285,0-.427V56.2c0-.118-.383-.118-.383,0v3.088c0,.142-.011.284,0,.427v.006C40.2,59.836,40.583,59.837,40.583,59.719Z\" transform=\"translate(-30.379 -44.995)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\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}@media (max-width: 768px){:host{width:30px;height:30px}}:host.has-dashboard-switch{border-radius:30px;width:167px;height:59px;place-items:unset;place-content:unset;background:#fff;border:none;display:inline-flex;align-items:center}:host.has-dashboard-switch .logo-content{width:100%}:host.has-dashboard-switch .dropdown-content{top:4.2rem}@media (max-width: 768px){:host.has-dashboard-switch .dropdown-content{top:47px}}@media (max-width: 768px){:host.has-dashboard-switch{width:auto;height:auto}}.logo-content--switch{display:flex;align-items:center;width:100%;padding:.375rem .5rem .375rem 1rem;gap:.75rem;cursor:pointer;text-align:center}.logo-content--switch__label{font-family:var(--standard-font-family-hero-new);font-size:16px;color:#2c3245;white-space:nowrap;flex:1}.logo-content--switch>svg{width:32px;height:32px;flex-shrink:0;display:block}.logo-content--switch>svg.profile-switch-icon{width:48px;height:48px}@media (max-width: 768px){.logo-content--switch>svg.profile-switch-icon{width:32px;height:32px}}.logo-content{width:3rem;height:3rem;color:#fff;font-family:Hero New ExtraBold;font-size:2rem;cursor:pointer}.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;width:auto;min-width:min(230px,82vw);height:fit-content;right:0;top:3.5rem;font-size:12px;background:#fff;display:flex;flex-direction:column;align-items:center}.dropdown-content .page-name{padding-right:1.5rem}.dropdown-content>div:not(.user-type-switch):not(.dashboard-switch):nth-child(-n+2){display:none}.dropdown-content.has-dashboard-switch>div:not(.user-type-switch):not(.dashboard-switch):nth-child(-n+3){display:none}@media (max-width: 768px){.dropdown-content{top:47px}.dropdown-content>div:not(.user-type-switch):not(.dashboard-switch):nth-child(-n+2){display:none}.dropdown-content.has-dashboard-switch>div:not(.user-type-switch):not(.dashboard-switch):nth-child(-n+3){display:none}}.dropdown-content div{display:flex;align-items:center;width:100%;height:3rem;gap:1rem;border-bottom:1px solid rgba(120,132,158,.0784313725);cursor:pointer}.dropdown-content div svg,.dropdown-content div.container{width:20px;height:20px;padding-left:1rem}.dropdown-content div.container{border:none}.dropdown-content>div:not(.user-type-switch):not(.dashboard-switch):hover{background-color:#0000000a}.dropdown-content .user-type-switch{width:auto;height:100%;cursor:default;border-bottom:none}.dropdown-content .user-type-switch__btn-container{display:block!important;width:241px;height:166px;background:#fafbfc;border:1px solid #F3F3F3;border-radius:5pt;margin:1rem}.dropdown-content .user-type-switch__option{width:100%;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%}.dropdown-content .dashboard-switch{height:fit-content;cursor:default;border-bottom:none}.dropdown-content .dashboard-switch div svg,.dropdown-content .dashboard-switch div.container{width:unset;height:unset;padding-left:unset}.dropdown-content .dashboard-switch div{height:auto;gap:.5rem;border-bottom:none}.dropdown-content .dashboard-switch ::ng-deep .radio-buttons-container{gap:.2rem}.dropdown-content .dashboard-switch lib-af-connect-radio-button span{font-size:12px}.dropdown-content .dashboard-switch lib-af-connect-radio-group{gap:.75rem;width:100%;padding:.5rem}.dropdown-content .dashboard-switch lib-af-connect-radio-button{width:100%}.dropdown-content .dashboard-switch__option{width:100%;height:42px;padding:.5rem;border-bottom:none;gap:.3rem;background-color:#fafbfc;box-sizing:border-box;cursor:pointer}.dropdown-content .dashboard-switch__option:hover{background-color:#0000000a}.dropdown-content .dashboard-switch__option>svg{height:32px;width:32px;flex:0 0 32px;overflow:hidden;border-radius:50%;filter:drop-shadow(1px 3px 5px rgba(0,0,0,.161))}.dropdown-content.has-dashboard-switch{min-width:min(280px,90vw)}.navigation-item{transition:color .2s ease-out;cursor:pointer}.navigation-item.disabled{pointer-events:none;color:#7f8991;cursor:default}.navigation-item.disabled>svg{filter:invert(54%) sepia(14%) saturate(254%) hue-rotate(165deg) brightness(97%) contrast(86%)}.blue{background:#2cc1da}.orange{background:#f69521}.yellow{background:var(--bright-tuscan-color)}.boxShadow{box-shadow:3px 3px 6px #00000008}.bold{font-family:var(--standard-font-family-hero-new-semibold)}\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: "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"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
958
959
|
}
|
|
959
960
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectProfileDropdown, decorators: [{
|
|
960
961
|
type: Component,
|
|
961
|
-
args: [{ selector: 'lib-af-connect-profile-dropdown', template: "<span [class]=\"['logo-content', userType === USER_TYPE.Retail ? 'blue' : isHybrid ? 'yellow' : 'orange']\">\r\n <ng-container *ngTemplateOutlet=\"!(breakpointService.isTablet$ | async) ? mobileIcon : desktopIcon\"></ng-container>\r\n</span>\r\n\r\n<ng-container *ngIf=\"showMenu\">\r\n <div class=\"dropdown-content\" [class.has-dashboard-switch]=\"hasDashboardSwitch\">\r\n <div *ngIf=\"hasDashboardSwitch\" class=\"dashboard-switch\">\r\n <lib-af-connect-radio-group variant=\"checkbox\" direction=\"column\" (valueChange)=\"selectDashboard($event)\">\r\n <div\r\n class=\"dashboard-switch__option\"\r\n (click)=\"selectDashboard(DASHBOARD_TYPE.Investor)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"investorIcon\"></ng-container>\r\n\r\n <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"DASHBOARD_TYPE.Investor\" [checked]=\"dashboardType === DASHBOARD_TYPE.Investor\" itemOrder=\"right-to-left\">\r\n <span>Investor dashboard</span>\r\n </lib-af-connect-radio-button>\r\n </div>\r\n <div\r\n class=\"dashboard-switch__option\"\r\n (click)=\"selectDashboard(DASHBOARD_TYPE.Pensioner)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"pensionerIcon\"></ng-container>\r\n\r\n <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"DASHBOARD_TYPE.Pensioner\" [checked]=\"dashboardType === DASHBOARD_TYPE.Pensioner\" itemOrder=\"right-to-left\">\r\n <span>Annuitant dashboard</span>\r\n </lib-af-connect-radio-button>\r\n </div>\r\n </lib-af-connect-radio-group>\r\n </div>\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 *ngIf=\"hasSwitchIndicator\" 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 boxShadow\"\r\n (click)=\"select(USER_TYPE.Retail)\"\r\n >\r\n <div class=\"logo blue\">\r\n <ng-container *ngTemplateOutlet=\"desktopIcon\"></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 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 <ng-container *ngIf=\"!(breakpointService.isTablet$ | async)\">\r\n <ng-container *ngFor=\"let url of navUrls\">\r\n <div class=\"navigation-item\" [class.disabled]=\"disableNavUrls\" (mousedown)=\"navigateTo(url.href!)\">\r\n <div *ngIf=\"!url.svg\" class=\"container\"></div>\r\n <ng-container *ngIf=\"url.svg\"><div class=\"container\" [innerHTML]=\"sanitizeSvg(url.svg)\"></div></ng-container>\r\n <span class=\"page-name bold\">{{url.name}}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div *ngIf=\"canEditProfile\" class=\"navigation-item\" [class.disabled]=\"disableNavUrls\" (click)=\"!disableNavUrls && editProfile.emit()\">\r\n <svg id=\"Icons_UI_Edit_Colour\" data-name=\"Icons / UI / Edit / Colour\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.494\" height=\"15.5\" viewBox=\"0 0 15.494 15.5\">\r\n <g id=\"Group_3\" data-name=\"Group 3\" transform=\"translate(0)\"><path id=\"Fill_1\" data-name=\"Fill 1\" d=\"M.837,15.5H.644a.648.648,0,0,1-.57-.346A.642.642,0,0,1,.03,14.66l1.55-4.554a.663.663,0,0,1,.161-.259L10.785.8a2.779,2.779,0,0,1,3.909,0V.836a2.787,2.787,0,0,1,0,3.908L5.65,13.788l-.258.162L.837,15.5Zm11.7-14.056a1.477,1.477,0,0,0-.844.264L2.776,10.688l-1.1,3.165,3.165-1.1L13.79,3.808l-.032-.032a1.486,1.486,0,0,0-1.223-2.331Z\" fill=\"#ef4f1f\"/></g>\r\n <path id=\"Path_22\" data-name=\"Path 22\" d=\"M.857.878,3.294,3.315\" transform=\"translate(2.393 8.871)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"2\"/>\r\n </svg> \r\n <span>Edit profile</span>\r\n </div>\r\n <div class=\"navigation-item\" (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 class=\"navigation-item\" (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 #desktopIcon>\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 #mobileIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.327\" height=\"10.095\" viewBox=\"0 0 15.327 10.095\">\r\n <path id=\"menu_24dp_1F1F1F_FILL0_wght200_GRAD0_opsz24\" d=\"M160-680.675v-.958h15.327v.958Zm0-4.569v-.958h15.327v.958Zm0-4.569v-.958h15.327v.958Z\" transform=\"translate(-160 690.77)\" 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\r\n<ng-template #investorIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"15 14 32 32\">\r\n <defs>\r\n <filter id=\"Path_21459\" x=\"0\" y=\"0\" width=\"62\" height=\"62\" filterUnits=\"userSpaceOnUse\">\r\n <feOffset dy=\"1\" input=\"SourceAlpha\"/>\r\n <feGaussianBlur stdDeviation=\"5\" result=\"blur\"/>\r\n <feFlood flood-opacity=\"0.161\"/>\r\n <feComposite operator=\"in\" in2=\"blur\"/>\r\n <feComposite in=\"SourceGraphic\"/>\r\n </filter>\r\n </defs>\r\n <g id=\"Group_15418\" data-name=\"Group 15418\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\" filter=\"url(#Path_21459)\">\r\n <g id=\"Path_21459-2\" data-name=\"Path 21459\" transform=\"translate(15 14)\" fill=\"#f69521\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g id=\"Layer_1\" data-name=\"Layer 1\" transform=\"translate(-41.01 244.242)\">\r\n <g id=\"Group_10898\" data-name=\"Group 10898\" transform=\"translate(50 -236)\">\r\n <g id=\"Group_10893\" data-name=\"Group 10893\" transform=\"translate(0)\">\r\n <path id=\"Rectangle_1510\" data-name=\"Rectangle 1510\" d=\"M15.706,50.57h0a.572.572,0,0,1-.57.57H13.07a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,15.706,50.57Z\" transform=\"translate(-10.076 -35.739)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1511\" data-name=\"Rectangle 1511\" d=\"M40.086,50.57h0a.572.572,0,0,1-.57.57H37.45a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,40.086,50.57Z\" transform=\"translate(-27.502 -35.739)\" fill=\"#fff\"/>\r\n <g id=\"Path_6177\" data-name=\"Path 6177\">\r\n <path id=\"Path_6179\" data-name=\"Path 6179\" d=\"M5.426.285A1.141,1.141,0,0,0,4.285,1.426V13.405a1.141,1.141,0,0,0,1.141,1.141H17.405a1.141,1.141,0,0,0,1.141-1.141V1.426A1.141,1.141,0,0,0,17.405.285H5.426m0-.285H17.405a1.427,1.427,0,0,1,1.426,1.426V13.405a1.427,1.427,0,0,1-1.426,1.426H5.426A1.427,1.427,0,0,1,4,13.405V1.426A1.427,1.427,0,0,1,5.426,0Z\" transform=\"translate(-4)\" fill=\"#fff\"/>\r\n </g>\r\n <path id=\"Rectangle_1507_-_Outline\" data-name=\"Rectangle 1507 - Outline\" d=\"M5.426.285A1.141,1.141,0,0,0,4.285,1.426V13.405a1.141,1.141,0,0,0,1.141,1.141H17.405a1.141,1.141,0,0,0,1.141-1.141V1.426A1.141,1.141,0,0,0,17.405.285H5.426m0-.285H17.405a1.427,1.427,0,0,1,1.426,1.426V13.405a1.427,1.427,0,0,1-1.426,1.426H5.426A1.427,1.427,0,0,1,4,13.405V1.426A1.427,1.427,0,0,1,5.426,0Z\" transform=\"translate(-4)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1506\" data-name=\"Rectangle 1506\" d=\"M8.426,3.285A1.141,1.141,0,0,0,7.285,4.426V14.694a1.141,1.141,0,0,0,1.141,1.141H18.694a1.141,1.141,0,0,0,1.141-1.141V4.426a1.141,1.141,0,0,0-1.141-1.141H8.426m0-.285H18.694A1.427,1.427,0,0,1,20.12,4.426V14.694a1.427,1.427,0,0,1-1.426,1.426H8.426A1.427,1.427,0,0,1,7,14.694V4.426A1.427,1.427,0,0,1,8.426,3Z\" transform=\"translate(-6.144 -2.144)\" fill=\"#fff\"/>\r\n <path id=\"Path_6176\" data-name=\"Path 6176\" d=\"M42.283,22A1.283,1.283,0,1,1,41,23.283,1.282,1.282,0,0,1,42.283,22Z\" transform=\"translate(-31.303 -15.868)\" fill=\"none\" stroke=\"#fff\" stroke-width=\"0.7\"/>\r\n <path id=\"Rectangle_1508\" data-name=\"Rectangle 1508\" d=\"M6.57,9h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V9.57A.572.572,0,0,1,6.57,9Z\" transform=\"translate(-5.43 -6.433)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1509\" data-name=\"Rectangle 1509\" d=\"M6.57,30h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V30.57A.572.572,0,0,1,6.57,30Z\" transform=\"translate(-5.43 -21.444)\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #pensionerIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"15 14 32 32\">\r\n <defs>\r\n <filter id=\"Path_21472\" x=\"0\" y=\"0\" width=\"62\" height=\"62\" filterUnits=\"userSpaceOnUse\">\r\n <feOffset dy=\"1\" input=\"SourceAlpha\"/>\r\n <feGaussianBlur stdDeviation=\"5\" result=\"blur\"/>\r\n <feFlood flood-opacity=\"0.161\"/>\r\n <feComposite operator=\"in\" in2=\"blur\"/>\r\n <feComposite in=\"SourceGraphic\"/>\r\n </filter>\r\n </defs>\r\n <g id=\"Group_15420\" data-name=\"Group 15420\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\" filter=\"url(#Path_21472)\">\r\n <g id=\"Path_21472-2\" data-name=\"Path 21472\" transform=\"translate(15 14)\" fill=\"#15808d\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g id=\"Portfolio_Icon\" data-name=\"Portfolio Icon\" transform=\"translate(-0.014 7.951)\">\r\n <path id=\"Path_6468\" data-name=\"Path 6468\" d=\"M49.257,42.8H36.163a1.716,1.716,0,0,1-1.8-1.615V31.01a.242.242,0,0,1,.48,0,1.12,1.12,0,0,0,1.173,1.054H49.257a1.085,1.085,0,0,1,1.138,1.022v2.667a.229.229,0,0,1-.24.215H45.485a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977A1.473,1.473,0,0,0,45.511,38.7h4.641a.229.229,0,0,1,.24.216v2.859A1.086,1.086,0,0,1,49.257,42.8ZM34.845,32.055V41.18a1.256,1.256,0,0,0,1.317,1.183H49.257a.627.627,0,0,0,.658-.591V39.131h-4.4a1.933,1.933,0,0,1-2.026-1.773,1.695,1.695,0,0,1,.576-1.286,2.105,2.105,0,0,1,1.424-.534h4.429V33.086a.627.627,0,0,0-.658-.591H36.019A1.747,1.747,0,0,1,34.845,32.055Z\" transform=\"translate(-26.426 -27.829)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6469\" data-name=\"Path 6469\" d=\"M69.395,49.118H64.718a1.933,1.933,0,0,1-2.026-1.773,1.694,1.694,0,0,1,.576-1.286,2.1,2.1,0,0,1,1.424-.535h4.7a1.086,1.086,0,0,1,1.138,1.022V48.1a1.086,1.086,0,0,1-1.138,1.021Zm-4.7-3.162a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977,1.473,1.473,0,0,0,1.546,1.347h4.678a.628.628,0,0,0,.658-.591v-1.55a.628.628,0,0,0-.658-.591h-4.7Z\" transform=\"translate(-45.631 -37.816)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6470\" data-name=\"Path 6470\" d=\"M37.763,29.805H36.016a1.494,1.494,0,1,1,0-2.97h6.345a.237.237,0,0,1,.231.157.206.206,0,0,1-.105.242l-4.6,2.539A.258.258,0,0,1,37.763,29.805Zm-1.747-2.539a1.06,1.06,0,1,0,0,2.108h1.678l3.818-2.108Z\" transform=\"translate(-26.424 -25.139)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6471\" data-name=\"Path 6471\" d=\"M56.553,29.82H45.8a.233.233,0,0,1-.238-.186.217.217,0,0,1,.172-.237l8.617-2.2,1.33-.34a.245.245,0,0,1,.3.149l.805,2.54a.2.2,0,0,1-.039.189.25.25,0,0,1-.193.086Zm-9.027-.431h8.71l-.651-2.057Z\" transform=\"translate(-34.018 -25.154)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6472\" data-name=\"Path 6472\" d=\"M44.862,26.254h-.445a.238.238,0,0,1-.231-.157.206.206,0,0,1,.105-.242l4.6-2.539,3.071-1.7a.258.258,0,0,1,.33.071l1.393,2.035a.2.2,0,0,1,.019.191.232.232,0,0,1-.158.129l-8.617,2.2A.279.279,0,0,1,44.862,26.254ZM52.008,22.1l-6.364,3.513,7.465-1.906Z\" transform=\"translate(-33.079 -21.588)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6473\" data-name=\"Path 6473\" d=\"M67.51,50.355a.67.67,0,1,1,.741-.666.708.708,0,0,1-.741.666Zm0-.9a.237.237,0,1,0,.262.235.25.25,0,0,0-.262-.236Z\" transform=\"translate(-48.491 -40.185)\" fill=\"#fff\"/>\r\n <path id=\"Path_6474\" data-name=\"Path 6474\" d=\"M40.583,59.719V56.632c0-.142.011-.285,0-.427V56.2c0-.118-.383-.118-.383,0v3.088c0,.142-.011.284,0,.427v.006C40.2,59.836,40.583,59.837,40.583,59.719Z\" transform=\"translate(-30.379 -44.995)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\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}@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;cursor:pointer}.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;width:auto;min-width:min(230px,82vw);height:fit-content;right:0;top:3.5rem;font-size:12px;background:#fff;display:flex;flex-direction:column;align-items:center}.dropdown-content .page-name{padding-right:1.5rem}.dropdown-content>div:not(.user-type-switch):not(.dashboard-switch):nth-child(-n+2){display:none}@media (max-width: 768px){.dropdown-content{top:47px}.dropdown-content>div:not(.user-type-switch):not(.dashboard-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);cursor:pointer}.dropdown-content div svg,.dropdown-content div.container{width:20px;height:20px;padding-left:1rem}.dropdown-content div.container{border:none}.dropdown-content>div:not(.user-type-switch):not(.dashboard-switch):hover{background-color:#0000000a}.dropdown-content .user-type-switch{width:auto;height:100%;cursor:default;border-bottom:none}.dropdown-content .user-type-switch__btn-container{display:block!important;width:241px;height:166px;background:#fafbfc;border:1px solid #F3F3F3;border-radius:5pt;margin:1rem}.dropdown-content .user-type-switch__option{width:100%;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%}.dropdown-content .dashboard-switch{height:fit-content;cursor:default;border-bottom:none}.dropdown-content .dashboard-switch div svg,.dropdown-content .dashboard-switch div.container{width:unset;height:unset;padding-left:unset}.dropdown-content .dashboard-switch div{height:auto;gap:.5rem;border-bottom:none}.dropdown-content .dashboard-switch ::ng-deep .radio-buttons-container{gap:.2rem}.dropdown-content .dashboard-switch lib-af-connect-radio-button span{font-size:12px}.dropdown-content .dashboard-switch lib-af-connect-radio-group{gap:.75rem;width:100%;padding:.5rem}.dropdown-content .dashboard-switch lib-af-connect-radio-button{width:100%}.dropdown-content .dashboard-switch__option{width:100%;height:42px;padding:.5rem;border-bottom:none;gap:.3rem;background-color:#fafbfc;box-sizing:border-box;cursor:pointer}.dropdown-content .dashboard-switch__option:hover{background-color:#0000000a}.dropdown-content .dashboard-switch__option>svg{height:32px;width:32px;flex:0 0 32px;overflow:hidden;border-radius:50%;filter:drop-shadow(1px 3px 5px rgba(0,0,0,.161))}.dropdown-content.has-dashboard-switch{min-width:min(280px,90vw)}.navigation-item{transition:color .2s ease-out;cursor:pointer}.navigation-item.disabled{pointer-events:none;color:#7f8991;cursor:default}.navigation-item.disabled>svg{filter:invert(54%) sepia(14%) saturate(254%) hue-rotate(165deg) brightness(97%) contrast(86%)}.blue{background:#2cc1da}.orange{background:#f69521}.yellow{background:var(--bright-tuscan-color)}.boxShadow{box-shadow:3px 3px 6px #00000008}.bold{font-family:var(--standard-font-family-hero-new-semibold)}\n"] }]
|
|
962
|
+
args: [{ selector: 'lib-af-connect-profile-dropdown', template: "<ng-container *ngIf=\"hasDashboardSwitch; else roundIcon\">\r\n <div class=\"logo-content logo-content--switch\">\r\n <span class=\"logo-content--switch__label\">{{ dashboardType === DASHBOARD_TYPE.Pensioner ? 'Annuitant' : 'Investor' }}</span>\r\n <ng-container *ngTemplateOutlet=\"dashboardType === DASHBOARD_TYPE.Pensioner ? pensionerProfileIcon : investorProfileIcon\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #roundIcon>\r\n <span [class]=\"['logo-content', userType === USER_TYPE.Retail ? 'blue' : isHybrid ? 'yellow' : 'orange']\">\r\n <ng-container *ngTemplateOutlet=\"!(breakpointService.isTablet$ | async) ? mobileIcon : desktopIcon\"></ng-container>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"showMenu\">\r\n <div class=\"dropdown-content\" [class.has-dashboard-switch]=\"hasDashboardSwitch\">\r\n <div *ngIf=\"hasDashboardSwitch\" class=\"dashboard-switch\">\r\n <lib-af-connect-radio-group variant=\"checkbox\" direction=\"column\" (valueChange)=\"selectDashboard($event)\">\r\n <div\r\n class=\"dashboard-switch__option\"\r\n (click)=\"selectDashboard(DASHBOARD_TYPE.Investor)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"investorIcon\"></ng-container>\r\n\r\n <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"DASHBOARD_TYPE.Investor\" [checked]=\"dashboardType === DASHBOARD_TYPE.Investor\" itemOrder=\"right-to-left\">\r\n <span>Investor dashboard</span>\r\n </lib-af-connect-radio-button>\r\n </div>\r\n <div\r\n class=\"dashboard-switch__option\"\r\n (click)=\"selectDashboard(DASHBOARD_TYPE.Pensioner)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"pensionerIcon\"></ng-container>\r\n\r\n <lib-af-connect-radio-button ngClass=\"larger\" [value]=\"DASHBOARD_TYPE.Pensioner\" [checked]=\"dashboardType === DASHBOARD_TYPE.Pensioner\" itemOrder=\"right-to-left\">\r\n <span>Annuitant dashboard</span>\r\n </lib-af-connect-radio-button>\r\n </div>\r\n </lib-af-connect-radio-group>\r\n </div>\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 *ngIf=\"hasSwitchIndicator\" 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 boxShadow\"\r\n (click)=\"select(USER_TYPE.Retail)\"\r\n >\r\n <div class=\"logo blue\">\r\n <ng-container *ngTemplateOutlet=\"desktopIcon\"></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 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 <ng-container *ngIf=\"!(breakpointService.isTablet$ | async)\">\r\n <ng-container *ngFor=\"let url of navUrls\">\r\n <div class=\"navigation-item\" [class.disabled]=\"disableNavUrls\" (mousedown)=\"navigateTo(url.href!)\">\r\n <div *ngIf=\"!url.svg\" class=\"container\"></div>\r\n <ng-container *ngIf=\"url.svg\"><div class=\"container\" [innerHTML]=\"sanitizeSvg(url.svg)\"></div></ng-container>\r\n <span class=\"page-name bold\">{{url.name}}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div *ngIf=\"canEditProfile\" class=\"navigation-item\" [class.disabled]=\"disableNavUrls\" (click)=\"!disableNavUrls && editProfile.emit()\">\r\n <svg id=\"Icons_UI_Edit_Colour\" data-name=\"Icons / UI / Edit / Colour\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.494\" height=\"15.5\" viewBox=\"0 0 15.494 15.5\">\r\n <g id=\"Group_3\" data-name=\"Group 3\" transform=\"translate(0)\"><path id=\"Fill_1\" data-name=\"Fill 1\" d=\"M.837,15.5H.644a.648.648,0,0,1-.57-.346A.642.642,0,0,1,.03,14.66l1.55-4.554a.663.663,0,0,1,.161-.259L10.785.8a2.779,2.779,0,0,1,3.909,0V.836a2.787,2.787,0,0,1,0,3.908L5.65,13.788l-.258.162L.837,15.5Zm11.7-14.056a1.477,1.477,0,0,0-.844.264L2.776,10.688l-1.1,3.165,3.165-1.1L13.79,3.808l-.032-.032a1.486,1.486,0,0,0-1.223-2.331Z\" fill=\"#ef4f1f\"/></g>\r\n <path id=\"Path_22\" data-name=\"Path 22\" d=\"M.857.878,3.294,3.315\" transform=\"translate(2.393 8.871)\" fill=\"none\" stroke=\"#ef4f1f\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"2\"/>\r\n </svg> \r\n <span>Edit profile</span>\r\n </div>\r\n <div class=\"navigation-item\" (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 class=\"navigation-item\" (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 #desktopIcon>\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 #mobileIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.327\" height=\"10.095\" viewBox=\"0 0 15.327 10.095\">\r\n <path id=\"menu_24dp_1F1F1F_FILL0_wght200_GRAD0_opsz24\" d=\"M160-680.675v-.958h15.327v.958Zm0-4.569v-.958h15.327v.958Zm0-4.569v-.958h15.327v.958Z\" transform=\"translate(-160 690.77)\" 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\r\n<ng-template #investorProfileIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" class=\"profile-switch-icon\" viewBox=\"15 14 32 32\">\r\n <g id=\"Group_15418_p\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\">\r\n <g id=\"Path_21459_p\" transform=\"translate(15 14)\" fill=\"#f69521\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g transform=\"translate(-41.01 244.242)\">\r\n <g transform=\"translate(50 -236)\">\r\n <path d=\"M15.706,50.57h0a.572.572,0,0,1-.57.57H13.07a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,15.706,50.57Z\" transform=\"translate(-10.076 -35.739)\" fill=\"#fff\"/>\r\n <path d=\"M40.086,50.57h0a.572.572,0,0,1-.57.57H37.45a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,40.086,50.57Z\" transform=\"translate(-27.502 -35.739)\" fill=\"#fff\"/>\r\n <path d=\"M5.426.285A1.141,1.141,0,0,0,4.285,1.426V13.405a1.141,1.141,0,0,0,1.141,1.141H17.405a1.141,1.141,0,0,0,1.141-1.141V1.426A1.141,1.141,0,0,0,17.405.285H5.426m0-.285H17.405a1.427,1.427,0,0,1,1.426,1.426V13.405a1.427,1.427,0,0,1-1.426,1.426H5.426A1.427,1.427,0,0,1,4,13.405V1.426A1.427,1.427,0,0,1,5.426,0Z\" transform=\"translate(-4)\" fill=\"#fff\"/>\r\n <path d=\"M8.426,3.285A1.141,1.141,0,0,0,7.285,4.426V14.694a1.141,1.141,0,0,0,1.141,1.141H18.694a1.141,1.141,0,0,0,1.141-1.141V4.426a1.141,1.141,0,0,0-1.141-1.141H8.426m0-.285H18.694A1.427,1.427,0,0,1,20.12,4.426V14.694a1.427,1.427,0,0,1-1.426,1.426H8.426A1.427,1.427,0,0,1,7,14.694V4.426A1.427,1.427,0,0,1,8.426,3Z\" transform=\"translate(-6.144 -2.144)\" fill=\"#fff\"/>\r\n <path d=\"M42.283,22A1.283,1.283,0,1,1,41,23.283,1.282,1.282,0,0,1,42.283,22Z\" transform=\"translate(-31.303 -15.868)\" fill=\"none\" stroke=\"#fff\" stroke-width=\"0.7\"/>\r\n <path d=\"M6.57,9h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V9.57A.572.572,0,0,1,6.57,9Z\" transform=\"translate(-5.43 -6.433)\" fill=\"#fff\"/>\r\n <path d=\"M6.57,30h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V30.57A.572.572,0,0,1,6.57,30Z\" transform=\"translate(-5.43 -21.444)\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #pensionerProfileIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" class=\"profile-switch-icon\" viewBox=\"15 14 32 32\">\r\n <g id=\"Group_15420_p\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\">\r\n <g id=\"Path_21472_p\" transform=\"translate(15 14)\" fill=\"#15808d\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g id=\"Portfolio_Icon_p\" transform=\"translate(-0.014 7.951)\">\r\n <path d=\"M49.257,42.8H36.163a1.716,1.716,0,0,1-1.8-1.615V31.01a.242.242,0,0,1,.48,0,1.12,1.12,0,0,0,1.173,1.054H49.257a1.085,1.085,0,0,1,1.138,1.022v2.667a.229.229,0,0,1-.24.215H45.485a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977A1.473,1.473,0,0,0,45.511,38.7h4.641a.229.229,0,0,1,.24.216v2.859A1.086,1.086,0,0,1,49.257,42.8ZM34.845,32.055V41.18a1.256,1.256,0,0,0,1.317,1.183H49.257a.627.627,0,0,0,.658-.591V39.131h-4.4a1.933,1.933,0,0,1-2.026-1.773,1.695,1.695,0,0,1,.576-1.286,2.105,2.105,0,0,1,1.424-.534h4.429V33.086a.627.627,0,0,0-.658-.591H36.019A1.747,1.747,0,0,1,34.845,32.055Z\" transform=\"translate(-26.426 -27.829)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path d=\"M69.395,49.118H64.718a1.933,1.933,0,0,1-2.026-1.773,1.694,1.694,0,0,1,.576-1.286,2.1,2.1,0,0,1,1.424-.535h4.7a1.086,1.086,0,0,1,1.138,1.022V48.1a1.086,1.086,0,0,1-1.138,1.021Zm-4.7-3.162a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977,1.473,1.473,0,0,0,1.546,1.347h4.678a.628.628,0,0,0,.658-.591v-1.55a.628.628,0,0,0-.658-.591h-4.7Z\" transform=\"translate(-45.631 -37.816)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path d=\"M37.763,29.805H36.016a1.494,1.494,0,1,1,0-2.97h6.345a.237.237,0,0,1,.231.157.206.206,0,0,1-.105.242l-4.6,2.539A.258.258,0,0,1,37.763,29.805Zm-1.747-2.539a1.06,1.06,0,1,0,0,2.108h1.678l3.818-2.108Z\" transform=\"translate(-26.424 -25.139)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path d=\"M56.553,29.82H45.8a.233.233,0,0,1-.238-.186.217.217,0,0,1,.172-.237l8.617-2.2,1.33-.34a.245.245,0,0,1,.3.149l.805,2.54a.2.2,0,0,1-.039.189.25.25,0,0,1-.193.086Zm-9.027-.431h8.71l-.651-2.057Z\" transform=\"translate(-34.018 -25.154)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path d=\"M44.862,26.254h-.445a.238.238,0,0,1-.231-.157.206.206,0,0,1,.105-.242l4.6-2.539,3.071-1.7a.258.258,0,0,1,.33.071l1.393,2.035a.2.2,0,0,1,.019.191.232.232,0,0,1-.158.129l-8.617,2.2A.279.279,0,0,1,44.862,26.254ZM52.008,22.1l-6.364,3.513,7.465-1.906Z\" transform=\"translate(-33.079 -21.588)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path d=\"M67.51,50.355a.67.67,0,1,1,.741-.666.708.708,0,0,1-.741.666Zm0-.9a.237.237,0,1,0,.262.235.25.25,0,0,0-.262-.236Z\" transform=\"translate(-48.491 -40.185)\" fill=\"#fff\"/>\r\n <path d=\"M40.583,59.719V56.632c0-.142.011-.285,0-.427V56.2c0-.118-.383-.118-.383,0v3.088c0,.142-.011.284,0,.427v.006C40.2,59.836,40.583,59.837,40.583,59.719Z\" transform=\"translate(-30.379 -44.995)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n </g>\r\n </g>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #investorIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"15 14 32 32\">\r\n <defs>\r\n <filter id=\"Path_21459\" x=\"0\" y=\"0\" width=\"62\" height=\"62\" filterUnits=\"userSpaceOnUse\">\r\n <feOffset dy=\"1\" input=\"SourceAlpha\"/>\r\n <feGaussianBlur stdDeviation=\"5\" result=\"blur\"/>\r\n <feFlood flood-opacity=\"0.161\"/>\r\n <feComposite operator=\"in\" in2=\"blur\"/>\r\n <feComposite in=\"SourceGraphic\"/>\r\n </filter>\r\n </defs>\r\n <g id=\"Group_15418\" data-name=\"Group 15418\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\" filter=\"url(#Path_21459)\">\r\n <g id=\"Path_21459-2\" data-name=\"Path 21459\" transform=\"translate(15 14)\" fill=\"#f69521\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g id=\"Layer_1\" data-name=\"Layer 1\" transform=\"translate(-41.01 244.242)\">\r\n <g id=\"Group_10898\" data-name=\"Group 10898\" transform=\"translate(50 -236)\">\r\n <g id=\"Group_10893\" data-name=\"Group 10893\" transform=\"translate(0)\">\r\n <path id=\"Rectangle_1510\" data-name=\"Rectangle 1510\" d=\"M15.706,50.57h0a.572.572,0,0,1-.57.57H13.07a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,15.706,50.57Z\" transform=\"translate(-10.076 -35.739)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1511\" data-name=\"Rectangle 1511\" d=\"M40.086,50.57h0a.572.572,0,0,1-.57.57H37.45a.572.572,0,0,1-.57-.57h0a.572.572,0,0,1,.57-.57h2.065A.572.572,0,0,1,40.086,50.57Z\" transform=\"translate(-27.502 -35.739)\" fill=\"#fff\"/>\r\n <g id=\"Path_6177\" data-name=\"Path 6177\">\r\n <path id=\"Path_6179\" data-name=\"Path 6179\" d=\"M5.426.285A1.141,1.141,0,0,0,4.285,1.426V13.405a1.141,1.141,0,0,0,1.141,1.141H17.405a1.141,1.141,0,0,0,1.141-1.141V1.426A1.141,1.141,0,0,0,17.405.285H5.426m0-.285H17.405a1.427,1.427,0,0,1,1.426,1.426V13.405a1.427,1.427,0,0,1-1.426,1.426H5.426A1.427,1.427,0,0,1,4,13.405V1.426A1.427,1.427,0,0,1,5.426,0Z\" transform=\"translate(-4)\" fill=\"#fff\"/>\r\n </g>\r\n <path id=\"Rectangle_1507_-_Outline\" data-name=\"Rectangle 1507 - Outline\" d=\"M5.426.285A1.141,1.141,0,0,0,4.285,1.426V13.405a1.141,1.141,0,0,0,1.141,1.141H17.405a1.141,1.141,0,0,0,1.141-1.141V1.426A1.141,1.141,0,0,0,17.405.285H5.426m0-.285H17.405a1.427,1.427,0,0,1,1.426,1.426V13.405a1.427,1.427,0,0,1-1.426,1.426H5.426A1.427,1.427,0,0,1,4,13.405V1.426A1.427,1.427,0,0,1,5.426,0Z\" transform=\"translate(-4)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1506\" data-name=\"Rectangle 1506\" d=\"M8.426,3.285A1.141,1.141,0,0,0,7.285,4.426V14.694a1.141,1.141,0,0,0,1.141,1.141H18.694a1.141,1.141,0,0,0,1.141-1.141V4.426a1.141,1.141,0,0,0-1.141-1.141H8.426m0-.285H18.694A1.427,1.427,0,0,1,20.12,4.426V14.694a1.427,1.427,0,0,1-1.426,1.426H8.426A1.427,1.427,0,0,1,7,14.694V4.426A1.427,1.427,0,0,1,8.426,3Z\" transform=\"translate(-6.144 -2.144)\" fill=\"#fff\"/>\r\n <path id=\"Path_6176\" data-name=\"Path 6176\" d=\"M42.283,22A1.283,1.283,0,1,1,41,23.283,1.282,1.282,0,0,1,42.283,22Z\" transform=\"translate(-31.303 -15.868)\" fill=\"none\" stroke=\"#fff\" stroke-width=\"0.7\"/>\r\n <path id=\"Rectangle_1508\" data-name=\"Rectangle 1508\" d=\"M6.57,9h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V9.57A.572.572,0,0,1,6.57,9Z\" transform=\"translate(-5.43 -6.433)\" fill=\"#fff\"/>\r\n <path id=\"Rectangle_1509\" data-name=\"Rectangle 1509\" d=\"M6.57,30h0a.572.572,0,0,1,.57.57v2.567a.572.572,0,0,1-.57.57h0a.572.572,0,0,1-.57-.57V30.57A.572.572,0,0,1,6.57,30Z\" transform=\"translate(-5.43 -21.444)\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #pensionerIcon>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"15 14 32 32\">\r\n <defs>\r\n <filter id=\"Path_21472\" x=\"0\" y=\"0\" width=\"62\" height=\"62\" filterUnits=\"userSpaceOnUse\">\r\n <feOffset dy=\"1\" input=\"SourceAlpha\"/>\r\n <feGaussianBlur stdDeviation=\"5\" result=\"blur\"/>\r\n <feFlood flood-opacity=\"0.161\"/>\r\n <feComposite operator=\"in\" in2=\"blur\"/>\r\n <feComposite in=\"SourceGraphic\"/>\r\n </filter>\r\n </defs>\r\n <g id=\"Group_15420\" data-name=\"Group 15420\" transform=\"translate(15 14)\">\r\n <g transform=\"matrix(1, 0, 0, 1, -15, -14)\" filter=\"url(#Path_21472)\">\r\n <g id=\"Path_21472-2\" data-name=\"Path 21472\" transform=\"translate(15 14)\" fill=\"#15808d\">\r\n <path d=\"M 16 31 C 11.9933500289917 31 8.226519584655762 29.43972969055176 5.393400192260742 26.60659980773926 C 2.560270071029663 23.77347946166992 1 20.00665092468262 1 16 C 1 11.9933500289917 2.560270071029663 8.226519584655762 5.393400192260742 5.393400192260742 C 8.226519584655762 2.560270071029663 11.9933500289917 1 16 1 C 20.00665092468262 1 23.77347946166992 2.560270071029663 26.60659980773926 5.393400192260742 C 29.43972969055176 8.226519584655762 31 11.9933500289917 31 16 C 31 20.00665092468262 29.43972969055176 23.77347946166992 26.60659980773926 26.60659980773926 C 23.77347946166992 29.43972969055176 20.00665092468262 31 16 31 Z\" stroke=\"none\"/>\r\n <path d=\"M 16 2 C 12.26045989990234 2 8.744749069213867 3.456249237060547 6.100500106811523 6.100500106811523 C 3.456249237060547 8.744749069213867 2 12.26045989990234 2 16 C 2 19.73954010009766 3.456249237060547 23.2552490234375 6.100500106811523 25.89949989318848 C 8.744749069213867 28.54375076293945 12.26045989990234 30 16 30 C 19.73954010009766 30 23.2552490234375 28.54375076293945 25.89949989318848 25.89949989318848 C 28.54375076293945 23.2552490234375 30 19.73954010009766 30 16 C 30 12.26045989990234 28.54375076293945 8.744749069213867 25.89949989318848 6.100500106811523 C 23.2552490234375 3.456249237060547 19.73954010009766 2 16 2 M 16 0 C 24.8365592956543 0 32 7.163440704345703 32 16 C 32 24.8365592956543 24.8365592956543 32 16 32 C 7.163440704345703 32 0 24.8365592956543 0 16 C 0 7.163440704345703 7.163440704345703 0 16 0 Z\" stroke=\"none\" fill=\"#fff\"/>\r\n </g>\r\n </g>\r\n <g id=\"Portfolio_Icon\" data-name=\"Portfolio Icon\" transform=\"translate(-0.014 7.951)\">\r\n <path id=\"Path_6468\" data-name=\"Path 6468\" d=\"M49.257,42.8H36.163a1.716,1.716,0,0,1-1.8-1.615V31.01a.242.242,0,0,1,.48,0,1.12,1.12,0,0,0,1.173,1.054H49.257a1.085,1.085,0,0,1,1.138,1.022v2.667a.229.229,0,0,1-.24.215H45.485a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977A1.473,1.473,0,0,0,45.511,38.7h4.641a.229.229,0,0,1,.24.216v2.859A1.086,1.086,0,0,1,49.257,42.8ZM34.845,32.055V41.18a1.256,1.256,0,0,0,1.317,1.183H49.257a.627.627,0,0,0,.658-.591V39.131h-4.4a1.933,1.933,0,0,1-2.026-1.773,1.695,1.695,0,0,1,.576-1.286,2.105,2.105,0,0,1,1.424-.534h4.429V33.086a.627.627,0,0,0-.658-.591H36.019A1.747,1.747,0,0,1,34.845,32.055Z\" transform=\"translate(-26.426 -27.829)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6469\" data-name=\"Path 6469\" d=\"M69.395,49.118H64.718a1.933,1.933,0,0,1-2.026-1.773,1.694,1.694,0,0,1,.576-1.286,2.1,2.1,0,0,1,1.424-.535h4.7a1.086,1.086,0,0,1,1.138,1.022V48.1a1.086,1.086,0,0,1-1.138,1.021Zm-4.7-3.162a1.6,1.6,0,0,0-1.082.406,1.288,1.288,0,0,0-.438.977,1.473,1.473,0,0,0,1.546,1.347h4.678a.628.628,0,0,0,.658-.591v-1.55a.628.628,0,0,0-.658-.591h-4.7Z\" transform=\"translate(-45.631 -37.816)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6470\" data-name=\"Path 6470\" d=\"M37.763,29.805H36.016a1.494,1.494,0,1,1,0-2.97h6.345a.237.237,0,0,1,.231.157.206.206,0,0,1-.105.242l-4.6,2.539A.258.258,0,0,1,37.763,29.805Zm-1.747-2.539a1.06,1.06,0,1,0,0,2.108h1.678l3.818-2.108Z\" transform=\"translate(-26.424 -25.139)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6471\" data-name=\"Path 6471\" d=\"M56.553,29.82H45.8a.233.233,0,0,1-.238-.186.217.217,0,0,1,.172-.237l8.617-2.2,1.33-.34a.245.245,0,0,1,.3.149l.805,2.54a.2.2,0,0,1-.039.189.25.25,0,0,1-.193.086Zm-9.027-.431h8.71l-.651-2.057Z\" transform=\"translate(-34.018 -25.154)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6472\" data-name=\"Path 6472\" d=\"M44.862,26.254h-.445a.238.238,0,0,1-.231-.157.206.206,0,0,1,.105-.242l4.6-2.539,3.071-1.7a.258.258,0,0,1,.33.071l1.393,2.035a.2.2,0,0,1,.019.191.232.232,0,0,1-.158.129l-8.617,2.2A.279.279,0,0,1,44.862,26.254ZM52.008,22.1l-6.364,3.513,7.465-1.906Z\" transform=\"translate(-33.079 -21.588)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\r\n <path id=\"Path_6473\" data-name=\"Path 6473\" d=\"M67.51,50.355a.67.67,0,1,1,.741-.666.708.708,0,0,1-.741.666Zm0-.9a.237.237,0,1,0,.262.235.25.25,0,0,0-.262-.236Z\" transform=\"translate(-48.491 -40.185)\" fill=\"#fff\"/>\r\n <path id=\"Path_6474\" data-name=\"Path 6474\" d=\"M40.583,59.719V56.632c0-.142.011-.285,0-.427V56.2c0-.118-.383-.118-.383,0v3.088c0,.142-.011.284,0,.427v.006C40.2,59.836,40.583,59.837,40.583,59.719Z\" transform=\"translate(-30.379 -44.995)\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"0.2\"/>\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}@media (max-width: 768px){:host{width:30px;height:30px}}:host.has-dashboard-switch{border-radius:30px;width:167px;height:59px;place-items:unset;place-content:unset;background:#fff;border:none;display:inline-flex;align-items:center}:host.has-dashboard-switch .logo-content{width:100%}:host.has-dashboard-switch .dropdown-content{top:4.2rem}@media (max-width: 768px){:host.has-dashboard-switch .dropdown-content{top:47px}}@media (max-width: 768px){:host.has-dashboard-switch{width:auto;height:auto}}.logo-content--switch{display:flex;align-items:center;width:100%;padding:.375rem .5rem .375rem 1rem;gap:.75rem;cursor:pointer;text-align:center}.logo-content--switch__label{font-family:var(--standard-font-family-hero-new);font-size:16px;color:#2c3245;white-space:nowrap;flex:1}.logo-content--switch>svg{width:32px;height:32px;flex-shrink:0;display:block}.logo-content--switch>svg.profile-switch-icon{width:48px;height:48px}@media (max-width: 768px){.logo-content--switch>svg.profile-switch-icon{width:32px;height:32px}}.logo-content{width:3rem;height:3rem;color:#fff;font-family:Hero New ExtraBold;font-size:2rem;cursor:pointer}.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;width:auto;min-width:min(230px,82vw);height:fit-content;right:0;top:3.5rem;font-size:12px;background:#fff;display:flex;flex-direction:column;align-items:center}.dropdown-content .page-name{padding-right:1.5rem}.dropdown-content>div:not(.user-type-switch):not(.dashboard-switch):nth-child(-n+2){display:none}.dropdown-content.has-dashboard-switch>div:not(.user-type-switch):not(.dashboard-switch):nth-child(-n+3){display:none}@media (max-width: 768px){.dropdown-content{top:47px}.dropdown-content>div:not(.user-type-switch):not(.dashboard-switch):nth-child(-n+2){display:none}.dropdown-content.has-dashboard-switch>div:not(.user-type-switch):not(.dashboard-switch):nth-child(-n+3){display:none}}.dropdown-content div{display:flex;align-items:center;width:100%;height:3rem;gap:1rem;border-bottom:1px solid rgba(120,132,158,.0784313725);cursor:pointer}.dropdown-content div svg,.dropdown-content div.container{width:20px;height:20px;padding-left:1rem}.dropdown-content div.container{border:none}.dropdown-content>div:not(.user-type-switch):not(.dashboard-switch):hover{background-color:#0000000a}.dropdown-content .user-type-switch{width:auto;height:100%;cursor:default;border-bottom:none}.dropdown-content .user-type-switch__btn-container{display:block!important;width:241px;height:166px;background:#fafbfc;border:1px solid #F3F3F3;border-radius:5pt;margin:1rem}.dropdown-content .user-type-switch__option{width:100%;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%}.dropdown-content .dashboard-switch{height:fit-content;cursor:default;border-bottom:none}.dropdown-content .dashboard-switch div svg,.dropdown-content .dashboard-switch div.container{width:unset;height:unset;padding-left:unset}.dropdown-content .dashboard-switch div{height:auto;gap:.5rem;border-bottom:none}.dropdown-content .dashboard-switch ::ng-deep .radio-buttons-container{gap:.2rem}.dropdown-content .dashboard-switch lib-af-connect-radio-button span{font-size:12px}.dropdown-content .dashboard-switch lib-af-connect-radio-group{gap:.75rem;width:100%;padding:.5rem}.dropdown-content .dashboard-switch lib-af-connect-radio-button{width:100%}.dropdown-content .dashboard-switch__option{width:100%;height:42px;padding:.5rem;border-bottom:none;gap:.3rem;background-color:#fafbfc;box-sizing:border-box;cursor:pointer}.dropdown-content .dashboard-switch__option:hover{background-color:#0000000a}.dropdown-content .dashboard-switch__option>svg{height:32px;width:32px;flex:0 0 32px;overflow:hidden;border-radius:50%;filter:drop-shadow(1px 3px 5px rgba(0,0,0,.161))}.dropdown-content.has-dashboard-switch{min-width:min(280px,90vw)}.navigation-item{transition:color .2s ease-out;cursor:pointer}.navigation-item.disabled{pointer-events:none;color:#7f8991;cursor:default}.navigation-item.disabled>svg{filter:invert(54%) sepia(14%) saturate(254%) hue-rotate(165deg) brightness(97%) contrast(86%)}.blue{background:#2cc1da}.orange{background:#f69521}.yellow{background:var(--bright-tuscan-color)}.boxShadow{box-shadow:3px 3px 6px #00000008}.bold{font-family:var(--standard-font-family-hero-new-semibold)}\n"] }]
|
|
962
963
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.DomSanitizer }, { type: i1$3.Router }, { type: BreakpointLibService }], propDecorators: { username: [{
|
|
963
964
|
type: Input
|
|
964
965
|
}], userType: [{
|
|
@@ -977,6 +978,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
977
978
|
type: Input
|
|
978
979
|
}], dashboardType: [{
|
|
979
980
|
type: Input
|
|
981
|
+
}], hasDashboardSwitchClass: [{
|
|
982
|
+
type: HostBinding,
|
|
983
|
+
args: ['class.has-dashboard-switch']
|
|
980
984
|
}], editProfile: [{
|
|
981
985
|
type: Output
|
|
982
986
|
}], callMeBack: [{
|
|
@@ -2537,6 +2541,79 @@ const data = {
|
|
|
2537
2541
|
}
|
|
2538
2542
|
]
|
|
2539
2543
|
},
|
|
2544
|
+
'taxTim': {
|
|
2545
|
+
imgWeb: 'solutions-taxtim.jpg',
|
|
2546
|
+
description: 'Simplified Tax Filing, exclusive value for Alexforbes members',
|
|
2547
|
+
ctaLink: 'https://www.taxtim.com/za/get-started?210',
|
|
2548
|
+
labels: [
|
|
2549
|
+
{
|
|
2550
|
+
text: 'Guided digital help with your tax return'
|
|
2551
|
+
},
|
|
2552
|
+
{
|
|
2553
|
+
text: 'Smart prompts ensure accuracy and completeness of your return'
|
|
2554
|
+
},
|
|
2555
|
+
{
|
|
2556
|
+
text: 'Seamless integration with SARS eFilling for direct submission'
|
|
2557
|
+
},
|
|
2558
|
+
{
|
|
2559
|
+
text: 'Exclusive Alexforbes member discount of 25%'
|
|
2560
|
+
}
|
|
2561
|
+
]
|
|
2562
|
+
},
|
|
2563
|
+
'wellTec': {
|
|
2564
|
+
heading: 'Tailor-made debt solutions',
|
|
2565
|
+
imgWeb: 'solutions-welltec.jpg',
|
|
2566
|
+
description: 'In association with WellTec financial services. Consolidate your debt.',
|
|
2567
|
+
ctaLink: 'https://welltec.co.za',
|
|
2568
|
+
labels: [
|
|
2569
|
+
{
|
|
2570
|
+
text: 'Free credit report'
|
|
2571
|
+
},
|
|
2572
|
+
{
|
|
2573
|
+
text: 'Financial health assessment'
|
|
2574
|
+
},
|
|
2575
|
+
{
|
|
2576
|
+
text: 'Financial rehabilitation'
|
|
2577
|
+
},
|
|
2578
|
+
{
|
|
2579
|
+
text: 'All designed to improve and promote your financial health'
|
|
2580
|
+
}
|
|
2581
|
+
]
|
|
2582
|
+
},
|
|
2583
|
+
'will': {
|
|
2584
|
+
heading: 'Will and Testament',
|
|
2585
|
+
imgWeb: 'solutions-will.jpg',
|
|
2586
|
+
subheading: 'Don’t leave your family in a really awkward position',
|
|
2587
|
+
description: 'Have a will written - Alexforbes can help you with.',
|
|
2588
|
+
labels: [
|
|
2589
|
+
{
|
|
2590
|
+
text: 'Drafting of local and international wills'
|
|
2591
|
+
},
|
|
2592
|
+
{
|
|
2593
|
+
text: 'Executorships and administration of deceased estates'
|
|
2594
|
+
},
|
|
2595
|
+
{
|
|
2596
|
+
text: 'Formation and administration of charitable trusts, inter vivo trusts and testamentary trusts'
|
|
2597
|
+
}
|
|
2598
|
+
]
|
|
2599
|
+
},
|
|
2600
|
+
'education': {
|
|
2601
|
+
heading: 'Member Education Matters',
|
|
2602
|
+
imgWeb: 'solutions-will.jpg',
|
|
2603
|
+
description: 'Key financial topics to help you make informed decisions.',
|
|
2604
|
+
ctaLink: 'https://mymoneymatters.alexforbes.com/',
|
|
2605
|
+
labels: [
|
|
2606
|
+
{
|
|
2607
|
+
text: 'Understand retirement savings and benefit options.'
|
|
2608
|
+
},
|
|
2609
|
+
{
|
|
2610
|
+
text: 'Learn how to manage debt and improve financial wellness.'
|
|
2611
|
+
},
|
|
2612
|
+
{
|
|
2613
|
+
text: 'Get guidance on insurance and financial protection.'
|
|
2614
|
+
}
|
|
2615
|
+
]
|
|
2616
|
+
},
|
|
2540
2617
|
};
|
|
2541
2618
|
|
|
2542
2619
|
class AfConnectSolutionsProductV2Component {
|
|
@@ -2555,11 +2632,11 @@ class AfConnectSolutionsProductV2Component {
|
|
|
2555
2632
|
this.navigateToProduct.emit();
|
|
2556
2633
|
}
|
|
2557
2634
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectSolutionsProductV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2558
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AfConnectSolutionsProductV2Component, selector: "lib-af-connect-solutions-product-v2", inputs: { imgBaseUrl: "imgBaseUrl", variant: "variant" }, outputs: { navigateToProduct: "navigateToProduct" }, ngImport: i0, template: "<section [ngClass]=\"['product', variant]\">\r\n <div class=\"product__img-wrapper\">\r\n <img class=\"product__img\" [src]=\"imgBaseUrl + content.imgWeb\">\r\n </div>\r\n <div class=\"product__content\">\r\n <div class=\"product__floating-header\">\r\n <h3 class=\"product__heading\">{{ content.heading }}</h3>\r\n <div class=\"product__floating-header-inner\" [class.no-text]=\"!content.subheading\">\r\n <span class=\"product__description\">{{ content.subheading }}</span>\r\n <a *ngIf=\"content.ctaLink; else anchorTemplate \" class=\"product__link\" [href]=\"content.ctaLink\" target=\"_blank\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n </div>\r\n </div>\r\n <ul class=\"product__list\">\r\n @if (content.description) {\r\n <p class=\"product__free-text\">\r\n {{ content.description }}\r\n </p>\r\n }\r\n @for (label of content.labels; track $index) {\r\n <li class=\"product__list-item\">\r\n @if (label.img) {\r\n <img [src]=\"imgBaseUrl + label.img\" width=\"40px\">\r\n }\r\n @else {\r\n <img [src]=\"imgBaseUrl + 'checkmark-teal.svg'\" alt=\"checkmark\" width=\"32\" height=\"32\">\r\n }\r\n <span>{{ label.text }}</span>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</section>\r\n\r\n<ng-template #anchorTemplate>\r\n <a class=\"product__link\" href=\"javascript:void(0)\" (click)=\"onClick()\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n</ng-template>", styles: [":host{display:block}.product{height:100%;background-color:#ddebee;color:#061426;min-width:332px;max-width:388px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}@media (max-width: 1024px){.product{min-width:auto;width:312px}}.product__img-wrapper{aspect-ratio:194/137}.product__img-wrapper .product__img{display:block;width:100%;height:100%;object-fit:cover}.product__content{margin-top:-128px;padding:36px;position:relative;z-index:1}.product__content .product__floating-header{border-radius:10px;color:#fff;padding:18px 24px;margin-bottom:24px;container:floating-header/inline-size}@media (max-width: 1024px){.product__content .product__floating-header{margin-bottom:18px;padding:16px}}.product__content .product__floating-header .product__floating-header-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-2.2rem}@media (max-width: 1024px){.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-1rem}}.product__content .product__floating-header .product__heading{margin-block:0 6px;font-size:28px;font-family:var(--standard-font-family-hero-new-semibold)}@container floating-header (width < 264px){.product__content .product__floating-header .product__heading{font-size:26px}}@container floating-header (width < 248px){.product__content .product__floating-header .product__heading{font-size:24px}}@container floating-header (width < 232px){.product__content .product__floating-header .product__heading{font-size:22px}}.product__content .product__floating-header .product__description{font-family:var(--standard-font-family-hero-new-semibold);max-width:180px}.product__content .product__floating-header .product__link{text-decoration:none;color:#fff}.product__content .product__floating-header .product__link img{display:block;width:42px;height:42px}@media (max-width: 1024px){.product__content .product__floating-header .product__link img{width:32px;height:32px}}.product__content .product__list{padding:0;margin:0;list-style:none}.product__content .product__list .product__list-item{display:flex;align-items:center;gap:16px}.product__content .product__list .product__list-item img{width:32px;height:32px}.product__content .product__list .product__list-item:not(:last-child){margin-bottom:28px}@media (max-width: 1024px){.product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}@media (max-width: 1024px){.product__content{padding:26px}}.product.afplus .product__floating-header,.product.namEducation .product__floating-header{background-color:#124e57}.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:40px;height:40px}@media (max-width: 1024px){.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:32px;height:32px}}.product.myMoneyMatters .product__floating-header,.product.namDebt .product__floating-header{background-color:#ff531d}.product.myMoneyMatters .product__content,.product.namDebt .product__content{padding-bottom:25px}.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:16px}@media (max-width: 1024px){.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-block:0 17px}@media (max-width: 1024px){.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-bottom:10px}}.product.advice .product__floating-header,.product.namJobs .product__floating-header{background-color:#f69521}\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"] }] }); }
|
|
2635
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AfConnectSolutionsProductV2Component, selector: "lib-af-connect-solutions-product-v2", inputs: { imgBaseUrl: "imgBaseUrl", variant: "variant" }, outputs: { navigateToProduct: "navigateToProduct" }, ngImport: i0, template: "<section [ngClass]=\"['product', variant]\">\r\n <div class=\"product__img-wrapper\">\r\n <img class=\"product__img\" [src]=\"imgBaseUrl + content.imgWeb\">\r\n </div>\r\n <div class=\"product__content\">\r\n <div class=\"product__floating-header\">\r\n <h3 class=\"product__heading\">{{ content.heading }}</h3>\r\n <div class=\"product__floating-header-inner\" [class.no-text]=\"!content.subheading\">\r\n @if (variant !== 'taxTim') {\r\n <span class=\"product__description\">{{ content.subheading }}</span>\r\n }\r\n @else {\r\n <img src=\"https://media.taxtim.com/images/taxtim_logo_footer.svg\" alt=\"TaxTim\" width=\"104px\">\r\n }\r\n <a *ngIf=\"content.ctaLink; else anchorTemplate \" class=\"product__link\" [href]=\"content.ctaLink\" target=\"_blank\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n </div>\r\n </div>\r\n <ul class=\"product__list\">\r\n @if (content.description) {\r\n <p class=\"product__free-text\">\r\n {{ content.description }}\r\n </p>\r\n }\r\n @for (label of content.labels; track $index) {\r\n <li class=\"product__list-item\">\r\n @if (label.img) {\r\n <img [src]=\"imgBaseUrl + label.img\" width=\"40px\">\r\n }\r\n @else {\r\n <img [src]=\"imgBaseUrl + 'checkmark-teal.svg'\" alt=\"checkmark\" width=\"32\" height=\"32\">\r\n }\r\n <span>{{ label.text }}</span>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</section>\r\n\r\n<ng-template #anchorTemplate>\r\n <a class=\"product__link\" href=\"javascript:void(0)\" (click)=\"onClick()\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n</ng-template>", styles: [":host{display:block}.product{height:100%;background-color:#ddebee;color:#061426;min-width:332px;max-width:388px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}@media (max-width: 1024px){.product{min-width:auto;width:312px}}.product__img-wrapper{aspect-ratio:194/137}.product__img-wrapper .product__img{display:block;width:100%;height:100%;object-fit:cover}.product__content{margin-top:-128px;padding:36px;position:relative;z-index:1}.product__content .product__floating-header{border-radius:10px;color:#fff;padding:18px 24px;margin-bottom:24px;container:floating-header/inline-size}@media (max-width: 1024px){.product__content .product__floating-header{margin-bottom:18px;padding:16px}}.product__content .product__floating-header .product__floating-header-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-2.2rem}@media (max-width: 1024px){.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-1rem}}.product__content .product__floating-header .product__heading{margin-block:0 6px;font-size:28px;font-family:var(--standard-font-family-hero-new-semibold)}@container floating-header (width < 264px){.product__content .product__floating-header .product__heading{font-size:26px}}@container floating-header (width < 248px){.product__content .product__floating-header .product__heading{font-size:24px}}@container floating-header (width < 232px){.product__content .product__floating-header .product__heading{font-size:22px}}.product__content .product__floating-header .product__description{font-family:var(--standard-font-family-hero-new-semibold);max-width:180px}.product__content .product__floating-header .product__link{text-decoration:none;color:#fff}.product__content .product__floating-header .product__link img{display:block;width:42px;height:42px}@media (max-width: 1024px){.product__content .product__floating-header .product__link img{width:32px;height:32px}}.product__content .product__list{padding:0;margin:0;list-style:none}.product__content .product__list .product__list-item{display:flex;align-items:center;gap:16px}.product__content .product__list .product__list-item img{width:32px;height:32px}.product__content .product__list .product__list-item:not(:last-child){margin-bottom:28px}@media (max-width: 1024px){.product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}@media (max-width: 1024px){.product__content{padding:26px}}.product.afplus .product__floating-header,.product.namEducation .product__floating-header{background-color:#124e57}.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:40px;height:40px}@media (max-width: 1024px){.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:32px;height:32px}}.product.myMoneyMatters .product__floating-header,.product.namDebt .product__floating-header{background-color:#ff531d}.product.myMoneyMatters .product__content,.product.namDebt .product__content{padding-bottom:25px}.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:16px}@media (max-width: 1024px){.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-block:0 17px}@media (max-width: 1024px){.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-bottom:10px}}.product.advice .product__floating-header,.product.namJobs .product__floating-header,.product.will .product__floating-header,.product.education .product__floating-header{background-color:#f69521}.product.taxTim .product__floating-header{background-color:#124e57}.product.taxTim .product__floating-header h3.product__heading{min-height:78.25px}@container floating-header (width < 264px){.product.taxTim .product__floating-header h3.product__heading{min-height:72.75px}}@container floating-header (width < 248px){.product.taxTim .product__floating-header h3.product__heading{min-height:67.25px}}@container floating-header (width < 232px){.product.taxTim .product__floating-header h3.product__heading{min-height:60px}}.product.taxTim .product__content .product__list .product__list-item:not(:last-child){margin-bottom:16px}@media (max-width: 1024px){.product.taxTim .product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}.product.wellTec .product__floating-header{background-color:#ff531d}.product.will h3.product__heading{white-space:nowrap}\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"] }] }); }
|
|
2559
2636
|
}
|
|
2560
2637
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectSolutionsProductV2Component, decorators: [{
|
|
2561
2638
|
type: Component,
|
|
2562
|
-
args: [{ selector: 'lib-af-connect-solutions-product-v2', template: "<section [ngClass]=\"['product', variant]\">\r\n <div class=\"product__img-wrapper\">\r\n <img class=\"product__img\" [src]=\"imgBaseUrl + content.imgWeb\">\r\n </div>\r\n <div class=\"product__content\">\r\n <div class=\"product__floating-header\">\r\n <h3 class=\"product__heading\">{{ content.heading }}</h3>\r\n <div class=\"product__floating-header-inner\" [class.no-text]=\"!content.subheading\">\r\n <span class=\"product__description\">{{ content.subheading }}</span>\r\n <a *ngIf=\"content.ctaLink; else anchorTemplate \" class=\"product__link\" [href]=\"content.ctaLink\" target=\"_blank\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n </div>\r\n </div>\r\n <ul class=\"product__list\">\r\n @if (content.description) {\r\n <p class=\"product__free-text\">\r\n {{ content.description }}\r\n </p>\r\n }\r\n @for (label of content.labels; track $index) {\r\n <li class=\"product__list-item\">\r\n @if (label.img) {\r\n <img [src]=\"imgBaseUrl + label.img\" width=\"40px\">\r\n }\r\n @else {\r\n <img [src]=\"imgBaseUrl + 'checkmark-teal.svg'\" alt=\"checkmark\" width=\"32\" height=\"32\">\r\n }\r\n <span>{{ label.text }}</span>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</section>\r\n\r\n<ng-template #anchorTemplate>\r\n <a class=\"product__link\" href=\"javascript:void(0)\" (click)=\"onClick()\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n</ng-template>", styles: [":host{display:block}.product{height:100%;background-color:#ddebee;color:#061426;min-width:332px;max-width:388px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}@media (max-width: 1024px){.product{min-width:auto;width:312px}}.product__img-wrapper{aspect-ratio:194/137}.product__img-wrapper .product__img{display:block;width:100%;height:100%;object-fit:cover}.product__content{margin-top:-128px;padding:36px;position:relative;z-index:1}.product__content .product__floating-header{border-radius:10px;color:#fff;padding:18px 24px;margin-bottom:24px;container:floating-header/inline-size}@media (max-width: 1024px){.product__content .product__floating-header{margin-bottom:18px;padding:16px}}.product__content .product__floating-header .product__floating-header-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-2.2rem}@media (max-width: 1024px){.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-1rem}}.product__content .product__floating-header .product__heading{margin-block:0 6px;font-size:28px;font-family:var(--standard-font-family-hero-new-semibold)}@container floating-header (width < 264px){.product__content .product__floating-header .product__heading{font-size:26px}}@container floating-header (width < 248px){.product__content .product__floating-header .product__heading{font-size:24px}}@container floating-header (width < 232px){.product__content .product__floating-header .product__heading{font-size:22px}}.product__content .product__floating-header .product__description{font-family:var(--standard-font-family-hero-new-semibold);max-width:180px}.product__content .product__floating-header .product__link{text-decoration:none;color:#fff}.product__content .product__floating-header .product__link img{display:block;width:42px;height:42px}@media (max-width: 1024px){.product__content .product__floating-header .product__link img{width:32px;height:32px}}.product__content .product__list{padding:0;margin:0;list-style:none}.product__content .product__list .product__list-item{display:flex;align-items:center;gap:16px}.product__content .product__list .product__list-item img{width:32px;height:32px}.product__content .product__list .product__list-item:not(:last-child){margin-bottom:28px}@media (max-width: 1024px){.product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}@media (max-width: 1024px){.product__content{padding:26px}}.product.afplus .product__floating-header,.product.namEducation .product__floating-header{background-color:#124e57}.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:40px;height:40px}@media (max-width: 1024px){.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:32px;height:32px}}.product.myMoneyMatters .product__floating-header,.product.namDebt .product__floating-header{background-color:#ff531d}.product.myMoneyMatters .product__content,.product.namDebt .product__content{padding-bottom:25px}.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:16px}@media (max-width: 1024px){.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-block:0 17px}@media (max-width: 1024px){.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-bottom:10px}}.product.advice .product__floating-header,.product.namJobs .product__floating-header{background-color:#f69521}\n"] }]
|
|
2639
|
+
args: [{ selector: 'lib-af-connect-solutions-product-v2', template: "<section [ngClass]=\"['product', variant]\">\r\n <div class=\"product__img-wrapper\">\r\n <img class=\"product__img\" [src]=\"imgBaseUrl + content.imgWeb\">\r\n </div>\r\n <div class=\"product__content\">\r\n <div class=\"product__floating-header\">\r\n <h3 class=\"product__heading\">{{ content.heading }}</h3>\r\n <div class=\"product__floating-header-inner\" [class.no-text]=\"!content.subheading\">\r\n @if (variant !== 'taxTim') {\r\n <span class=\"product__description\">{{ content.subheading }}</span>\r\n }\r\n @else {\r\n <img src=\"https://media.taxtim.com/images/taxtim_logo_footer.svg\" alt=\"TaxTim\" width=\"104px\">\r\n }\r\n <a *ngIf=\"content.ctaLink; else anchorTemplate \" class=\"product__link\" [href]=\"content.ctaLink\" target=\"_blank\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n </div>\r\n </div>\r\n <ul class=\"product__list\">\r\n @if (content.description) {\r\n <p class=\"product__free-text\">\r\n {{ content.description }}\r\n </p>\r\n }\r\n @for (label of content.labels; track $index) {\r\n <li class=\"product__list-item\">\r\n @if (label.img) {\r\n <img [src]=\"imgBaseUrl + label.img\" width=\"40px\">\r\n }\r\n @else {\r\n <img [src]=\"imgBaseUrl + 'checkmark-teal.svg'\" alt=\"checkmark\" width=\"32\" height=\"32\">\r\n }\r\n <span>{{ label.text }}</span>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</section>\r\n\r\n<ng-template #anchorTemplate>\r\n <a class=\"product__link\" href=\"javascript:void(0)\" (click)=\"onClick()\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n</ng-template>", styles: [":host{display:block}.product{height:100%;background-color:#ddebee;color:#061426;min-width:332px;max-width:388px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}@media (max-width: 1024px){.product{min-width:auto;width:312px}}.product__img-wrapper{aspect-ratio:194/137}.product__img-wrapper .product__img{display:block;width:100%;height:100%;object-fit:cover}.product__content{margin-top:-128px;padding:36px;position:relative;z-index:1}.product__content .product__floating-header{border-radius:10px;color:#fff;padding:18px 24px;margin-bottom:24px;container:floating-header/inline-size}@media (max-width: 1024px){.product__content .product__floating-header{margin-bottom:18px;padding:16px}}.product__content .product__floating-header .product__floating-header-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-2.2rem}@media (max-width: 1024px){.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-1rem}}.product__content .product__floating-header .product__heading{margin-block:0 6px;font-size:28px;font-family:var(--standard-font-family-hero-new-semibold)}@container floating-header (width < 264px){.product__content .product__floating-header .product__heading{font-size:26px}}@container floating-header (width < 248px){.product__content .product__floating-header .product__heading{font-size:24px}}@container floating-header (width < 232px){.product__content .product__floating-header .product__heading{font-size:22px}}.product__content .product__floating-header .product__description{font-family:var(--standard-font-family-hero-new-semibold);max-width:180px}.product__content .product__floating-header .product__link{text-decoration:none;color:#fff}.product__content .product__floating-header .product__link img{display:block;width:42px;height:42px}@media (max-width: 1024px){.product__content .product__floating-header .product__link img{width:32px;height:32px}}.product__content .product__list{padding:0;margin:0;list-style:none}.product__content .product__list .product__list-item{display:flex;align-items:center;gap:16px}.product__content .product__list .product__list-item img{width:32px;height:32px}.product__content .product__list .product__list-item:not(:last-child){margin-bottom:28px}@media (max-width: 1024px){.product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}@media (max-width: 1024px){.product__content{padding:26px}}.product.afplus .product__floating-header,.product.namEducation .product__floating-header{background-color:#124e57}.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:40px;height:40px}@media (max-width: 1024px){.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:32px;height:32px}}.product.myMoneyMatters .product__floating-header,.product.namDebt .product__floating-header{background-color:#ff531d}.product.myMoneyMatters .product__content,.product.namDebt .product__content{padding-bottom:25px}.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:16px}@media (max-width: 1024px){.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-block:0 17px}@media (max-width: 1024px){.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-bottom:10px}}.product.advice .product__floating-header,.product.namJobs .product__floating-header,.product.will .product__floating-header,.product.education .product__floating-header{background-color:#f69521}.product.taxTim .product__floating-header{background-color:#124e57}.product.taxTim .product__floating-header h3.product__heading{min-height:78.25px}@container floating-header (width < 264px){.product.taxTim .product__floating-header h3.product__heading{min-height:72.75px}}@container floating-header (width < 248px){.product.taxTim .product__floating-header h3.product__heading{min-height:67.25px}}@container floating-header (width < 232px){.product.taxTim .product__floating-header h3.product__heading{min-height:60px}}.product.taxTim .product__content .product__list .product__list-item:not(:last-child){margin-bottom:16px}@media (max-width: 1024px){.product.taxTim .product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}.product.wellTec .product__floating-header{background-color:#ff531d}.product.will h3.product__heading{white-space:nowrap}\n"] }]
|
|
2563
2640
|
}], propDecorators: { imgBaseUrl: [{
|
|
2564
2641
|
type: Input
|
|
2565
2642
|
}], variant: [{
|