af-connect-components 0.0.26 → 0.0.27

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

@@ -1,58 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<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

@@ -1,96 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,94 +0,0 @@
-<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

@@ -1,176 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,11 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-$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

@@ -1,23 +0,0 @@
-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();
-  });
-});