af-connect-components 0.0.24 → 0.0.26

package/projects/af-connect-components/src/lib/af-connect-products-carousel/af-connect-products-carousel.component.ts

@@ -0,0 +1,58 @@
+import { Component, ElementRef, Input } from '@angular/core';
+import { defaultConfig } from './defaultConfig';
+
+interface CarouselConfig {
+  imageSrc: string;
+  title?: string;
+  content?: string;
+  readMore: string;
+}
+
+@Component({
+  selector: 'lib-af-connect-products-carousel',
+  templateUrl: './af-connect-products-carousel.component.html',
+  styleUrls: ['./af-connect-products-carousel.component.scss']
+})
+export class AfConnectProductsCarouselComponent {
+  @Input() config: CarouselConfig[];
+  defaultConfig = defaultConfig;
+
+  private slider: HTMLElement;
+  private isDown = false;
+  private startX: number;
+  private scrollLeft: number;
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit(): void { }
+
+  ngAfterViewInit() {
+    this.slider = this.elementRef.nativeElement.querySelector('.holder');
+  }
+
+  mousedown(e: MouseEvent): void {
+    this.isDown = true;
+    this.slider.classList.add('active');
+    this.startX = e.pageX - this.slider.offsetLeft;
+    this.scrollLeft = this.slider.scrollLeft;
+  }
+
+  mouseleave(): void {
+    this.isDown = false;
+    this.slider.classList.remove('active');
+  }
+
+  mouseup(): void {
+    this.isDown = false;
+    this.slider.classList.remove('active');
+  }
+
+  mousemove(e: MouseEvent): void {
+    if(!this.isDown) return;
+    e.preventDefault();
+
+    const offset = e.pageX - this.slider.offsetLeft;
+    const walk = (offset - this.startX) * 2;
+    this.slider.scrollLeft = this.scrollLeft - walk;
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-products-carousel/defaultConfig.ts

@@ -0,0 +1,26 @@
+export const defaultConfig = [
+    {
+        imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/mmm-carousel.jpg',
+        title: 'My Money Matters',
+        content: 'Get the most out of your money. Explore ways to make your money and savings work for you with our tools.',
+        readMore: 'https://mymoneymatters.alexforbes.com/'
+    },
+    {
+        imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/AF-Rewards-carousel.jpg',
+        title: 'My Rewards',
+        content: 'Exclusive savings from big brands.',
+        readMore: 'https://rewards.alexforbes.com/landingpage'
+    },
+    {
+        imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/Unit-trusts-carousel.jpg',
+        title: 'Unit Trusts',
+        content: 'Invest from as little as R500.00 a month to up to R30 000.00 up front toward a personal goal.',
+        readMore: 'https://www.alexforbes.com/za/en/individual/investing-for-a-goal.html'
+    },
+    {
+        imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/AF-Plus-carousel.jpg',
+        title: 'AF+',
+        content: 'Guided by expert advisers and fulfilled by trusted partners, making it easy to solve life’s financial challenges with confidence.',
+        readMore: 'https://plus.alexforbes.com/'
+    },
+];

package/projects/af-connect-components/src/lib/af-connect-products-carousel/image-card/image-card.component.html

@@ -0,0 +1,6 @@
+<img [src]="src" />
+<div class="info-container">
+  <span class="info-container__title">{{ title }}</span>
+  <span class="info-container__content">{{ content }}</span>
+</div>
+<button class="button-read-more" (click)="openReadMore()">Read more</button>

package/projects/af-connect-components/src/lib/af-connect-products-carousel/image-card/image-card.component.scss

@@ -0,0 +1,96 @@
+@import '../../../styles/breakpoints.scss';
+
+:host {
+  width: 325px;
+  border-radius: 5px;
+  box-shadow: 5px 5px 10px #00000029;
+  background: #FAFBFC;
+
+  @include media(mobileBreakPointTreshold) {
+    width: 295px;
+    display: flex;
+    position: relative;
+    align-items: center;
+    border: 1px solid #124E57;
+    box-shadow: 0 -5px 10px #455b6314;
+  }
+}
+
+.info-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1rem;
+  gap: 1rem;
+  height: 8rem;
+  border-radius: 5px;
+  
+  &__title {
+    font-size: 16px;
+    font-family: 'Hero New Bold';
+    color: #124E57;
+
+    @include media(mobileBreakPointTreshold) {
+      font-size: 14px;
+      padding-top: 1rem;
+    }
+  }
+
+  &__content {
+    font-size: 12px;
+    line-height: 20px;
+    color: #78849E;
+
+    @include media(mobileBreakPointTreshold) {
+      font-size: 11px;
+      line-height: 1rem;
+    }
+  }
+
+  @include media(mobileBreakPointTreshold) {
+    gap: 5px;
+    padding: 0 0 0 6rem;
+    width: 20rem;
+    height: 9rem;
+    place-content: start;
+  }
+}
+
+img {
+  width: 325px;
+  height: 182px;
+  border-radius: 5px 5px 0 0;
+  
+  @include media(mobileBreakPointTreshold) {
+    width: 120px;
+    height: 120px;
+    position: absolute;
+    object-fit: cover;
+    left: -2rem;
+    border-radius: 5px;
+  }
+}
+
+.button-read-more {
+  background: none;
+  color: inherit;
+  border: none;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  outline: inherit;
+  font-size: 12px;
+  color: #FF521C;
+  font-size: 14px;
+  font-family: 'Hero New Bold';
+  position: relative;
+  bottom: 1rem;
+  left: 1rem;
+
+  @include media(mobileBreakPointTreshold) {
+    position: absolute;
+    bottom: 1rem;
+    left: 6rem;
+    font-size: 11px;
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-products-carousel/image-card/image-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageCardComponent } from './image-card.component';
+
+describe('ImageCardComponent', () => {
+  let component: ImageCardComponent;
+  let fixture: ComponentFixture<ImageCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ImageCardComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ImageCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/af-connect-components/src/lib/af-connect-products-carousel/image-card/image-card.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'af-connect-image-card',
+  templateUrl: './image-card.component.html',
+  styleUrls: ['./image-card.component.scss']
+})
+export class ImageCardComponent implements OnInit {
+  @Input() src: string;
+  @Input() title: string | undefined = '';
+  @Input() content: string | undefined = '';
+  @Input() readMoreLink: string;
+
+  constructor() { }
+
+  ngOnInit(): void { }
+
+  openReadMore() {
+    window.open(this.readMoreLink, '_blank');
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-profile-dropdown/af-connect-profile-dropdown.component.html

@@ -0,0 +1,94 @@
+<span [class]="['logo-content', userType === USER_TYPE.Retail ? 'blue' : 'orange']">
+    <ng-container *ngTemplateOutlet="userType === USER_TYPE.Retail ? retail : institutional"></ng-container>
+</span>
+
+<ng-container *ngIf="showMenu">
+    <div class="dropdown-content">
+        <div (click)="callMeBack.emit()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+                <g id="call" transform="translate(0 0)">
+                    <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"/>
+                </g>
+            </svg>
+            <span>Call me back</span>
+        </div>
+        <div (click)="contactAdviser.emit()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="21.5" height="17.864" viewBox="0 0 21.5 17.864">
+                <g id="Icons_UI_Contacts_Colour_" data-name="Icons / UI / Contacts / Colour  " transform="translate(0.75 0.75)">
+                    <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"/>
+                    <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"/>
+                    <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"/>
+                </g>
+            </svg>
+            <span>Contact adviser</span>
+        </div>
+        <div *ngIf="hasSwitchIndicator" class="user-type-switch user-type-switch">
+            <div class="user-type-switch__btn-container">
+                <lib-af-connect-radio-group label="View as" variant="checkbox" direction="column" (valueChange)="select($event)">
+                    <div
+                        class="user-type-switch__option boxShadow"
+                        (click)="select(USER_TYPE.Retail)"
+                    >
+                        <div class="logo blue">
+                            <ng-container *ngTemplateOutlet="retail"></ng-container>
+                        </div>
+                        <lib-af-connect-radio-button ngClass="larger" [value]="USER_TYPE.Retail" [checked]="userType === USER_TYPE.Retail" itemOrder="right-to-left">
+                            <span>Individual/Retail</span>
+                        </lib-af-connect-radio-button>
+                    </div>
+                    <div
+                        class="user-type-switch__option boxShadow"
+                        (click)="select(USER_TYPE.Institutional)"
+                    >
+                        <div class="logo orange">
+                            <ng-container *ngTemplateOutlet="institutional"></ng-container>
+                        </div>
+                        <lib-af-connect-radio-button ngClass="larger" [value]="USER_TYPE.Institutional" [checked]="userType === USER_TYPE.Institutional" itemOrder="right-to-left">
+                            <span>Employee benefits</span>
+                        </lib-af-connect-radio-button>
+                    </div>
+                </lib-af-connect-radio-group>
+            </div>
+        </div>
+        <div (click)="resetPassword.emit()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20.004" viewBox="0 0 22 20.004">
+                <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"/>
+            </svg>
+            <span>Reset password</span>
+        </div>
+        <div (click)="logout.emit()">
+            <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+                <rect id="bg" width="20" height="20" fill="none"/>
+                <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"/>
+            </svg>
+            <span>Log Out</span>
+        </div>
+    </div>
+</ng-container>
+
+<ng-template #retail>
+    <svg id="Group" xmlns="http://www.w3.org/2000/svg" width="12.837" height="13.693" viewBox="0 0 12.837 13.693">
+        <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"/>
+        <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"/>
+        <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"/>
+    </svg>
+</ng-template>
+
+<ng-template #institutional>
+    <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">
+        <defs>
+            <clipPath id="clip-path">
+            <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"/>
+            </clipPath>
+        </defs>
+        <g id="Group_10298" data-name="Group 10298" transform="translate(-0.952 -0.773)">
+            <g id="Group_10297" data-name="Group 10297" transform="translate(0.953 0.773)" clip-path="url(#clip-path)">
+                <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"/>
+                <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"/>
+                <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"/>
+                <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"/>
+                <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"/>
+            </g>
+        </g>
+    </svg>
+</ng-template>

package/projects/af-connect-components/src/lib/af-connect-profile-dropdown/af-connect-profile-dropdown.component.scss

@@ -0,0 +1,176 @@
+.logo-cicrcle {
+    display: flex;
+    place-items: center;
+    place-content: center;
+    border-radius: 50%;
+}
+
+:host {
+    height: 3rem;
+    filter: drop-shadow(3px 3px 10px #00000014);
+    z-index: 999;
+    box-shadow: 3px 3px 10px #00000014;
+    border: 3px solid #FFFFFF;
+    cursor: pointer;
+
+    @extend .logo-cicrcle;
+
+    @media (max-width: 768px) {
+        width: 30px;
+        height: 30px;
+    }
+}
+
+.logo-content {
+    width: 3rem;
+    height: 3rem;
+    color: white;
+    font-family: 'Hero New ExtraBold';
+    font-size: 2rem;
+
+    @extend .logo-cicrcle;
+
+    >svg {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+
+    @media (max-width: 768px) {
+        width: 30px;
+        height: 30px;
+        font-size: 18px;
+
+        >svg {
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+}
+
+.dropdown-content {
+    position: absolute;
+    width: auto;
+    min-width: 12rem;
+    height: fit-content;
+    right: 0;
+    top: 3.5rem;
+    font-size: 12px;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    >div:not(.user-type-switch):nth-child(-n+2) {
+        display: none;
+    }
+
+    div:nth-child(4) {
+        color: var(--red-test);
+    }
+
+    @media (max-width: 768px) {
+        top: 47px;
+
+        >div:not(.user-type-switch):nth-child(-n+1) {
+            /**
+                TODO: Change to display: flex
+                Call me back and Contact adviser button are out of scope for Release one
+            */
+            display: none;
+        }
+
+        div:nth-child(2) {
+            display: flex;
+        }
+    }
+
+    & div {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 3rem;
+        gap: 1rem;
+        border-bottom: 1px solid #78849E14;
+
+        & svg {
+            width: 20px;
+            height: 20px;
+            padding-left: 1rem;
+        }
+    }
+
+    >div:not(.user-type-switch):hover {
+        background-color: rgba(0,0,0,.04);
+    }
+
+    .user-type-switch {
+        width: auto;
+        height: 100%;
+        cursor: default;
+        border-bottom: none;
+
+        &__btn-container {
+            display: block !important;
+            width: 241px;
+            height: 166px;
+            background: #FAFBFC;
+            border: 1px solid #F3F3F3;
+            border-radius: 5pt;
+            margin: 1rem;
+        }
+
+        &__option {
+            width: 100%;
+            height: 42px;
+            border-bottom: none;
+            gap: 0.3rem;
+            padding: 0 0.75rem;
+            background-color: #FFFFFF;
+            box-sizing: border-box;
+            border-radius: 3rem;
+            cursor: pointer;
+
+            >.logo {
+                @extend .logo-cicrcle;
+            
+                height: 23px;
+                width: 27px;
+                flex: 0 1 auto;
+                border: 1px solid #FFFFFF;
+                box-shadow: 1px 3px 10px #00000014;
+
+                >svg {
+                    width: auto;
+                    height: auto;
+                    padding: 0;
+                }
+
+                &__img {
+                    width: 22px;
+                    height: 0.9rem;
+                }
+            }
+        }
+    }
+
+    lib-af-connect-radio-group {
+        gap: 0.75rem;
+        padding: 1rem;
+    }
+
+    lib-af-connect-radio-button {
+        width: 100%;
+    }
+}
+
+.blue {
+    background: #2CC1DA;
+}
+
+.orange {
+    background: #F69521;
+}
+
+.boxShadow {
+    box-shadow: 3px 3px 6px #00000008;
+}

package/projects/af-connect-components/src/lib/af-connect-profile-dropdown/af-connect-profile-dropdown.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AfConnectProfileDropdown } from './af-connect-profile-dropdown.component';
+
+describe('AfConnectHeaderComponent', () => {
+  let component: AfConnectProfileDropdown;
+  let fixture: ComponentFixture<AfConnectProfileDropdown>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AfConnectProfileDropdown ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AfConnectProfileDropdown);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/af-connect-components/src/lib/af-connect-profile-dropdown/af-connect-profile-dropdown.component.ts

@@ -0,0 +1,48 @@
+import { Component, HostListener, Output, EventEmitter, ElementRef, Input } from '@angular/core';
+
+export enum UserType {
+  Retail = 'Retail',
+  Institutional = 'Institutional',
+  Hybrid = 'Hybrid'
+}
+
+@Component({
+  selector: 'lib-af-connect-profile-dropdown',
+  templateUrl: './af-connect-profile-dropdown.component.html',
+  styleUrls: ['./af-connect-profile-dropdown.component.scss']
+})
+export class AfConnectProfileDropdown {
+  @Input() username = '';
+  @Input() userType: UserType.Institutional | UserType.Retail;
+  @Input()  hasSwitchIndicator: boolean;
+  @Output() callMeBack = new EventEmitter<void>();
+  @Output() contactAdviser = new EventEmitter<void>();
+  @Output() resetPassword = new EventEmitter<void>();
+  @Output() logout = new EventEmitter<void>();
+  @Output() switchUserType = new EventEmitter<UserType>();
+
+  showMenu = false;
+  USER_TYPE = UserType;
+
+  constructor(private elementRef: ElementRef) {}
+
+  @HostListener('click', ['$event']) show(e: any) {
+    this.showMenu = !this.showMenu;
+  }
+
+  @HostListener('document:click', ['$event']) click(event: any) {
+    const iconClick = this.elementRef.nativeElement.contains(event.target);
+    const clickedOnUserTypeSwitch = event.target.closest('.user-type-switch') !== null;
+    const clickedOnUserTypeSwitchOption = event.target.closest('.user-type-switch__option') !== null;
+
+    this.showMenu = iconClick ? this.showMenu : (clickedOnUserTypeSwitch && !clickedOnUserTypeSwitchOption);
+  }
+
+  select(value: UserType.Institutional | UserType.Retail): void {
+    if (this.userType !== value) {
+      this.userType = value;
+      this.showMenu = false;
+      this.switchUserType.emit(value);
+    }
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-progress-bar/af-connect-progress-bar.component.html

@@ -0,0 +1,11 @@
+<div [ngClass]="[secondaryColor]" class="progress-bar-container">
+    <div [ngClass]="['progress-bar', primaryColor]" [style]="{ width: progressCounter + '%' }">
+      <div class="text-container">
+        <div>
+          <ng-content></ng-content>
+        </div>
+        <span *ngIf="false"> {{ progress.toFixed(0) }}% </span>
+      </div>
+    </div>
+  </div>
+  

package/projects/af-connect-components/src/lib/af-connect-progress-bar/af-connect-progress-bar.component.scss

@@ -0,0 +1,48 @@
+$height: 2rem;
+
+:host {
+  display: block;
+
+  max-width: 100%;
+}
+
+.progress-bar-base {
+  border-radius: 0.5rem;
+  height: $height;
+}
+
+.progress-bar-container {
+  @extend .progress-bar-base;
+  background-color: var(--dark-grey-color-low-opacity);
+
+  &.orange {
+    background-color: var(--primary-catalyst-yellow-color);
+  }
+
+  &.transparent {
+    background-color: transparent;
+  }
+}
+
+.progress-bar {
+  @extend .progress-bar-base;
+  color: var(--main-white-color);
+  background-color: var(--primary-balanced-teal-color);
+
+  &.primary-orange {
+    background-color: var(--primary-catalyst-yellow-color);
+  }
+}
+
+.text-container {
+  min-width: 120px;
+  $padding: 0.75rem;
+  padding-left: $padding;
+  padding-right: $padding;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  min-height: $height;
+}

package/projects/af-connect-components/src/lib/af-connect-progress-bar/af-connect-progress-bar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AfConnectProgressBarComponent } from './af-connect-progress-bar.component';
+
+describe('AfConnectProgressBarComponent', () => {
+  let component: AfConnectProgressBarComponent;
+  let fixture: ComponentFixture<AfConnectProgressBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AfConnectProgressBarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AfConnectProgressBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});