af-connect-components 0.0.25 → 0.0.26

package/projects/af-connect-components/src/lib/af-connect-form-validation-errors/af-connect-form-validation-errors.component.spec.ts

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

package/projects/af-connect-components/src/lib/af-connect-form-validation-errors/af-connect-form-validation-errors.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { numberWithCommas } from '../utilities/number.util';
+
+@Component({
+  selector: 'lib-af-connect-form-validation-errors',
+  templateUrl: './af-connect-form-validation-errors.component.html',
+  styleUrls: ['./af-connect-form-validation-errors.component.scss']
+})
+export class AfConnectFormValidationErrorsComponent {
+  @Input() fieldText: string = 'Field';
+  @Input() control: FormControl;
+  public convertToNumberWithCommas = numberWithCommas;
+}

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

@@ -0,0 +1,49 @@
+<svg class="logo" (click)="refresh()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 592.39 132.62">
+    <defs>
+       <style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#f15b25;}.cls-3{fill:#1a808d;}</style>
+       <linearGradient id="linear-gradient" x1="254.64" y1="41.32" x2="604.45" y2="41.32" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stop-color="#1a808d"/>
+          <stop offset="1"/>
+       </linearGradient>
+    </defs>
+    <g id="Layer_2" data-name="Layer 2">
+       <g id="Layer_1-2" data-name="Layer 1">
+          <path class="cls-1" d="M32.59,53.64c0-17.53,12.08-29.31,24.45-29.31a20.54,20.54,0,0,1,17.53,9.31l1.78-7.82H92V81.16H76.35l-1.78-7.82A20.53,20.53,0,0,1,57,82.64C44.67,82.64,32.59,70.86,32.59,53.64Zm41.28-.1c0-7.43-4.75-12.77-11.18-12.77C56,40.77,51.2,46.41,51.2,53.54S56,66.21,62.69,66.21C69.12,66.21,73.87,60.86,73.87,53.54ZM103.85,0h18.41V81.16H103.85ZM187.1,58.49H150.77c2.47,6.63,9,9.9,16.53,9.9,6,0,11.59-2.08,16.64-4.85V78.09a39.5,39.5,0,0,1-19.11,4.55c-20.3,0-31.68-12.27-31.68-29,0-17.43,12.27-29.31,28.21-29.31,14.46,0,26.24,9.8,26.24,28.22A35.8,35.8,0,0,1,187.1,58.49Zm-16.93-10.6c-.19-5.54-3.66-9.3-8.91-9.3-5,0-9.4,3.56-10.89,9.3Zm61.77,5,19,28.32h-20.8l-9.3-15.94h-.2l-9.31,15.94h-19.8l18.72-27.62L191.74,25.82h20.1l9.21,15.93h.19l9.21-15.93h19.8ZM264.26,41h-7.43V25.82h7.53V21.26C264.36,11,271.88.57,287.13.57a38,38,0,0,1,11.09,1.58V17.5a23.35,23.35,0,0,0-7.63-1.19c-5.34,0-8.21,1.88-8.21,6.24v3.27h14.15V41H282.67v40.2H264.26Zm38,12.48c0-17.43,13.17-29.11,29.7-29.11s29.5,11.68,29.5,29.11S348.6,82.64,332,82.64,302.27,70.76,302.27,53.44Zm40.69,0c0-8.12-5.45-12.67-11-12.67s-11.09,4.55-11.09,12.67S326.33,66.21,332,66.21,343,61.56,343,53.44Zm29-27.62h14.65l1.78,8.11h.2a16.67,16.67,0,0,1,14.85-8.71,13.89,13.89,0,0,1,4.26.5V42.84a20.69,20.69,0,0,0-4.85-.59c-6.44,0-12.48,3.37-12.48,13.46V81.16H371.93Zm62.45,7.52c3.27-5.25,10.1-9,17.13-9,12.77,0,23.86,11.39,23.86,29.21s-11.88,29.1-24.75,29.1a20.84,20.84,0,0,1-17.33-9.3l-1.68,7.82H416V.14h18.41Zm-.2,20.2c0,7.42,4.65,12.67,11.19,12.67s11.38-5.45,11.38-12.57S452,40.77,445.27,40.77C438.83,40.77,434.18,46.11,434.18,53.54Zm103.3,5H501.14c2.48,6.63,9,9.9,16.54,9.9,6,0,11.58-2.08,16.63-4.85V78.09a39.48,39.48,0,0,1-19.11,4.55c-20.29,0-31.68-12.27-31.68-29,0-17.43,12.28-29.31,28.22-29.31,14.45,0,26.23,9.8,26.23,28.22A37,37,0,0,1,537.48,58.49Zm-16.93-10.6c-.2-5.54-3.67-9.3-8.91-9.3-5.05,0-9.41,3.56-10.89,9.3Zm67.66-19.4V43.64a35.12,35.12,0,0,0-17-4.56c-4.26,0-6.63,1.19-6.63,3.27s2.67,3.27,8.51,4.65C582.27,49.18,592,52.45,592,64.23c0,11.29-8.91,18.41-24.65,18.41-8.22,0-15.15-2-19.9-4.85V61.46a31.35,31.35,0,0,0,19.11,6.43c4.85,0,7.62-1.29,7.62-3.56,0-2.58-3.46-3.37-10.4-5.35-8.61-2.37-16.83-6.24-16.83-16.43,0-10.5,8.52-18.22,23.47-18.22C576.92,24.33,583.75,25.91,588.21,28.49Z"/>
+          <circle class="cls-2" cx="10.86" cy="34.87" r="10.86" transform="translate(-15.07 9.15) rotate(-27.94)"/>
+          <circle class="cls-2" cx="10.86" cy="71.4" r="10.86" transform="translate(-32.19 13.41) rotate(-27.94)"/>
+          <circle class="cls-3" cx="368.84" cy="117.24" r="2.98"/>
+          <path class="cls-2" d="M264,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,264,105.54Zm.29,5h3.39v15.69h-3.39Z"/>
+          <path class="cls-2" d="M285.22,115.78v10.43h-3.39v-9.34c0-2.42-1.1-3.56-3.19-3.56a3.34,3.34,0,0,0-3.45,3.42v9.48h-3.4V110.52h2.62l.37,2.33h.09a5.58,5.58,0,0,1,4.77-2.71C283.06,110.14,285.22,112.33,285.22,115.78Z"/>
+          <path class="cls-2" d="M299.46,111.47v3.1a7.88,7.88,0,0,0-4.71-1.52c-1.79,0-2.76.69-2.76,1.78s1.17,1.61,3.16,2.18c2.47.66,5.23,1.5,5.23,4.72,0,3-2.33,4.86-6.21,4.86a9.11,9.11,0,0,1-5.49-1.67v-3.34a7.88,7.88,0,0,0,5.38,2.13c1.92,0,3-.8,3-1.95,0-1.3-1.35-1.73-3.5-2.39-2.56-.75-4.89-1.67-4.89-4.46s2.24-4.77,5.95-4.77A8.9,8.9,0,0,1,299.46,111.47Z"/>
+          <path class="cls-2" d="M303.29,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,303.29,105.54Zm.29,5H307v15.69h-3.39Z"/>
+          <path class="cls-2" d="M322.53,113.1l.37-2.58h2.82v14.14c0,5.17-3.65,8-8.13,8a10.29,10.29,0,0,1-5.9-1.9V127.3a8.84,8.84,0,0,0,5.67,2.27c2.78,0,5-1.78,5-4.45v-2a6.05,6.05,0,0,1-5.17,2.81c-3.68,0-7.05-3.16-7.05-7.87s3.42-7.88,7.1-7.88A6.24,6.24,0,0,1,322.53,113.1Zm-9,5a4.48,4.48,0,1,0,8.92-.09,4.5,4.5,0,0,0-4.46-4.74A4.58,4.58,0,0,0,313.5,118.08Z"/>
+          <path class="cls-2" d="M333.23,112.27h.06a5.37,5.37,0,0,1,4.36-2.13c3.43,0,5.61,2,5.61,5.67v10.4h-3.39v-9.37c0-2.41-1-3.59-3.16-3.59a3.22,3.22,0,0,0-3.48,3.39v9.57h-3.39v-23h3.39Z"/>
+          <path class="cls-2" d="M351.15,110.52h4.34v2.87h-4.34v7c0,2.24,1.38,3.16,3.28,3.16a9.45,9.45,0,0,0,1.41-.14v2.9a10.36,10.36,0,0,1-2.1.2c-3.71,0-5.92-2.21-5.92-6v-7.13h-2.3v-2.87h2.35v-3.65h3.28Z"/>
+          <path class="cls-2" d="M380.9,118.39c0-5,3.45-8.25,7-8.25a6.17,6.17,0,0,1,5.43,3.08l.38-2.7h2.81v15.69h-2.81l-.38-2.7a6.17,6.17,0,0,1-5.43,3.08C384.35,126.59,380.9,123.34,380.9,118.39Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.51,2.12-4.51,5.11,2,5.12,4.51,5.12S393.26,121.38,393.26,118.36Z"/>
+          <path class="cls-2" d="M399.81,118.36c0-5,3.39-8.22,7.07-8.22a5.94,5.94,0,0,1,5.23,2.94v-9.89h3.39v23h-2.81l-.41-2.7a6.11,6.11,0,0,1-5.37,3.08C403.23,126.59,399.81,123.39,399.81,118.36Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.48,2.12-4.48,5.11,1.92,5.12,4.48,5.12S412.17,121.38,412.17,118.36Z"/>
+          <path class="cls-2" d="M417.88,110.52h3.62l3.94,12h.09l3.94-12H433l-5.72,15.69H423.6Z"/>
+          <path class="cls-2" d="M435.05,105.54a2,2,0,1,1,2,1.93A1.92,1.92,0,0,1,435.05,105.54Zm.29,5h3.39v15.69h-3.39Z"/>
+          <path class="cls-2" d="M450.28,123.48a6.72,6.72,0,0,0,4.08-1.24v3.25a9,9,0,0,1-4.45,1.1,8.23,8.23,0,0,1,0-16.45,8.38,8.38,0,0,1,4.45,1.12v3.28a6.75,6.75,0,0,0-4.11-1.29,5.12,5.12,0,0,0,0,10.23Z"/>
+          <path class="cls-2" d="M471.18,119.4H459.91a5.07,5.07,0,0,0,5.32,4.37,8.23,8.23,0,0,0,5.11-1.87v3a9.54,9.54,0,0,1-5.46,1.64c-5.14,0-8.25-3.34-8.25-8.17,0-5,3.51-8.28,7.71-8.28,3.79,0,6.92,2.73,6.92,7.94A8.91,8.91,0,0,1,471.18,119.4ZM468,117.13c-.08-2.79-1.78-4.17-3.73-4.17a4.56,4.56,0,0,0-4.43,4.17Z"/>
+          <path class="cls-2" d="M497.53,105.54a2,2,0,1,1,2,1.93A1.93,1.93,0,0,1,497.53,105.54Zm.29,5h3.39v15.69h-3.39Z"/>
+          <path class="cls-2" d="M526.55,115.78v10.43h-3.39v-9.83c0-2-.78-3.07-2.65-3.07a2.86,2.86,0,0,0-2.9,3v9.89h-3.39v-9.83c0-2-.78-3.07-2.65-3.07a2.91,2.91,0,0,0-2.87,3.19v9.71h-3.39V110.52h2.61l.38,2.27h.08a4.77,4.77,0,0,1,4.26-2.65,4.46,4.46,0,0,1,4.4,2.73,5,5,0,0,1,4.51-2.73C525,110.14,526.55,112.44,526.55,115.78Z"/>
+          <path class="cls-2" d="M530.59,110.52h2.82l.37,2.7a6.14,6.14,0,0,1,5.37-3.08c3.71,0,7.13,3.22,7.13,8.22s-3.36,8.23-7,8.23a6.13,6.13,0,0,1-5.26-2.94v8.6h-3.39Zm12.27,7.82c0-3-2-5.09-4.48-5.09s-4.46,2.1-4.46,5.11,1.93,5.12,4.43,5.12S542.86,121.38,542.86,118.34Z"/>
+          <path class="cls-2" d="M548.66,118.39c0-5,3.45-8.25,7-8.25a6.17,6.17,0,0,1,5.43,3.08l.38-2.7h2.81v15.69h-2.81l-.38-2.7a6.17,6.17,0,0,1-5.43,3.08C552.11,126.59,548.66,123.34,548.66,118.39Zm12.36,0c0-3-2-5.11-4.46-5.11s-4.51,2.12-4.51,5.11,2,5.12,4.51,5.12S561,121.38,561,118.36Z"/>
+          <path class="cls-2" d="M575.92,123.48a6.74,6.74,0,0,0,4.08-1.24v3.25a9,9,0,0,1-4.45,1.1,8.23,8.23,0,0,1,0-16.45,8.38,8.38,0,0,1,4.45,1.12v3.28a6.77,6.77,0,0,0-4.11-1.29,5.12,5.12,0,0,0,0,10.23Z"/>
+          <path class="cls-2" d="M587.7,110.52H592v2.87H587.7v7c0,2.24,1.38,3.16,3.28,3.16a9.45,9.45,0,0,0,1.41-.14v2.9a10.36,10.36,0,0,1-2.1.2c-3.71,0-5.92-2.21-5.92-6v-7.13h-2.3v-2.87h2.36v-3.65h3.27Z"/>
+          <circle class="cls-3" cx="483.77" cy="117.24" r="2.98"/>
+       </g>
+    </g>
+</svg> 
+<lib-af-connect-profile-dropdown
+    *ngIf="!isLogoHidden"
+    [username]="username"
+    [userType]="userType"
+    [hasSwitchIndicator]="hasSwitchIndicator"
+    (callMeBack)="callMeBack.emit()"
+    (contactAdviser)="contactAdviser.emit()"
+    (resetPassword)="resetPassword.emit()"
+    (logout)="logout.emit()"
+    (switchUserType)="switch($event)"
+>
+</lib-af-connect-profile-dropdown>

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

@@ -0,0 +1,24 @@
+:host {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100px;
+    margin: auto;
+
+    @media (max-width: 768px) {
+        width: auto;
+        height: 50px;
+        padding: 0.5rem 1.25rem;
+    }
+
+    .logo {
+        width: 180px;
+        height: 40px;
+        cursor: pointer;
+
+        @media (max-width: 768px) {
+            width: 132px;
+            height: 30px;
+        }
+    }
+}

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

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

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

@@ -0,0 +1,27 @@
+import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { UserType } from '../af-connect-profile-dropdown/af-connect-profile-dropdown.component';
+
+@Component({
+  selector: 'lib-af-connect-header',
+  templateUrl: './af-connect-header.component.html',
+  styleUrls: ['./af-connect-header.component.scss']
+})
+export class AfConnectHeaderComponent {
+  @Input() username = '';
+  @Input() isLogoHidden = false;
+  @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>();
+
+  public refresh(): void {
+    window.location.reload();
+  }
+
+  public switch(type: UserType): void {
+    this.switchUserType.emit(type);
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-inline-error/af-connect-inline-error.component.html

@@ -0,0 +1,6 @@
+<div class="inline-error-container">
+    <img [class]="['svg', size]" [src]="src" />
+    <span class="inline-error-title">{{ severity }}</span>
+    <span class="inline-error-message">{{ message }}</span>
+  </div>
+  

package/projects/af-connect-components/src/lib/af-connect-inline-error/af-connect-inline-error.component.scss

@@ -0,0 +1,68 @@
+@import '../../styles/breakpoints.scss';
+
+:host {
+  display: flex;
+  min-height: 2rem;
+  padding-top: 0.5em;
+  flex-direction: column;
+}
+
+img {
+  background: none;
+  border: none;
+  cursor: pointer;
+  justify-content: center;
+}
+
+.svg {
+  &.small {
+    $size: 14px;
+    width: $size;
+    height: $size;
+  }
+
+  &.medium {
+    $size: 16px;
+    width: $size;
+    height: $size;
+
+    @include media(mobileBreakPointTreshold) {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  @include media(tabletTreshold) {
+    &.large {
+      width: 23px;
+      height: 23px;
+    }
+  }
+}
+
+.inline-error-container {
+  background: var(--neutral-inline-error-color);
+  border: 1px solid var(--primary-orange-mobile-color);
+  border-radius: 5px;
+  padding: 0.5rem 1rem;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-left: 8px solid var(--primary-orange-mobile-color);
+}
+
+.inline-error-title {
+  font-family: 'Hero New SemiBold';
+  font-size: 14px;
+  color: var(--main-black-color);
+  display: flex;
+  justify-content: center;
+}
+
+.inline-error-message {
+  font-size: 12px;
+  color: var(--main-black-color);
+  display: flex;
+  justify-content: center;
+}

package/projects/af-connect-components/src/lib/af-connect-inline-error/af-connect-inline-error.component.spec.ts

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

package/projects/af-connect-components/src/lib/af-connect-inline-error/af-connect-inline-error.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+export enum Severity {
+  Error = "Error!",
+  Warning = "Warning!",
+};
+
+@Component({
+  selector: 'lib-af-connect-inline-error',
+  templateUrl: './af-connect-inline-error.component.html',
+  styleUrls: ['./af-connect-inline-error.component.scss']
+})
+export class AfConnectInlineErrorComponent {
+  @Input() public severity: Severity = Severity.Error;
+  @Input() public message: string;
+  @Input() src: string;
+  @Input() size: 'large' | 'medium' | 'small' | 'none' = 'none';
+}

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

@@ -0,0 +1,29 @@
+<div class="field-container">
+    <div class="label-container">
+      <label class="label" [for]="id"> {{ label }}<span *ngIf="withAsterisk" class="asterisk">*</span></label>
+      <lib-af-connect-form-validation-errors [control]="control" [fieldText]="errorReferenceText || label"></lib-af-connect-form-validation-errors>
+    </div>
+    <input
+      [type]="type"
+      [step]="step"
+      size="10"
+      class="field-container-input"
+      [ngClass]="[
+        variant,
+        isDisabled ? 'disabled' : 'not-disabled',
+        noFormEnabledBorder ? 'no-form-border' : '',
+        control && control.errors && control.dirty && control.touched ? 'hasError' : '',
+        control && variant === 'read-only' && control.disabled ? 'non-editable' : ''
+      ]"
+      [maxLength]="maxLength"
+      [(ngModel)]="value"
+      [placeholder]="placeholder"
+      [disabled]="isDisabled || variant === 'read-only'"
+      (blur)="onBlur()"
+      (keyup)="handleInputChange($event)"
+    />
+    <div *ngIf="control && control.errors && control.dirty && control.touched" class="error-container">
+      <img src="../../../assets/icons/warning.svg" />
+    </div>
+  </div>
+  

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

@@ -0,0 +1,117 @@
+@import '../../styles/breakpoints.scss';
+
+:host {
+  font-family: var(--standard-font-family-hero-new);
+  font-size: 0.875rem;
+  color: var(--secondary-space-color);
+  width: 100%;
+  position: relative;
+
+  & input:focus {
+    outline: transparent;
+  }
+}
+
+.field-container {
+  display: flex;
+  flex-direction: column;
+
+  & .label {
+    .asterisk {
+      color: var(--primary-orange-mobile-color);
+    }
+  }
+
+  & .label-container {
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 0.5rem;
+    gap: 0.5rem;
+    justify-content: space-between;
+  }
+
+  & .field-container-input {
+    outline: 1px solid transparent;
+    transition-property: outline-color, border-color, background-color;
+    font-family: var(--standard-font-family-hero-new);
+    font-size: 0.875rem;
+    padding: 11px 11px 11px 1.25rem;
+    border: 1px solid transparent;
+    outline: 1px solid transparent;
+    transition-property: outline-color, border-color, background-color;
+    transition-duration: 200ms;
+
+    &:focus {
+      outline: 1px solid var(--primary-dark-teal-color);
+    }
+
+    &.hasError {
+      padding-right: 3rem;
+      border: 1px solid var(--primary-connected-orange-color) !important;
+      background-color: var(--neutral-inline-error-color);
+
+      &:focus {
+        outline-color: var(--primary-connected-orange-color);
+      }
+    }
+
+    &.editable.not-disabled.no-form-border {
+      border-color: transparent;
+    }
+
+    @include media(mobileBreakPointTreshold) {
+      border-radius: var(--input-border-radius);
+      box-shadow: var(--input-box-shadow);
+    }
+  }
+
+  & .read-only {
+    background-color: var(--neutral-button-color);
+    color: var(--warm-grey-color);
+  }
+
+  & .non-editable {
+    background-color: var(--main-white-color);
+    color: var(--warm-grey-color);
+  }
+
+  & .editable {
+    background-color: var(--main-white-color);
+
+    &.disabled {
+      color: var(--secondary-space-color);
+    }
+  }
+
+  & .editable.not-disabled {
+    border-color: var(--primary-dark-teal-color);
+  }
+}
+
+.error-container {
+  position: relative;
+  display: flex;
+  min-height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+img {
+  position: absolute;
+  cursor: pointer;
+  right: 25px;
+  top: -31px;
+  width: 18px;
+  height: 18px;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}

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

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

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

@@ -0,0 +1,77 @@
+import { ChangeDetectorRef, Component, forwardRef, Injector, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { ControlValueAccessor, FormControl, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'lib-af-connect-input',
+  templateUrl: './af-connect-input.component.html',
+  styleUrls: ['./af-connect-input.component.scss']
+})
+export class AfConnectInputComponent implements ControlValueAccessor, OnInit {
+  private _value: string;
+  @Input() label: string;
+  @Input() errorReferenceText: string;
+  @Input() placeholder: string = '';
+  @Input() isDisabled: boolean = true;
+  @Input() withAsterisk: boolean = false;
+  @Input() variant: 'editable' | 'non-editable' | 'read-only' = 'editable';
+  @Input() type: 'text' | 'number' | 'date' | 'password' = 'text';
+  @Input() maxLength: number = 50;
+  @Input() id: string;
+  @Input() step: number;
+  @Input() noFormEnabledBorder: boolean = false;
+  @Output() onChange = new EventEmitter();
+
+  public handleInputChange($event: Event) {
+    this.onChange.emit($event);
+  }
+
+  public control: FormControl;
+
+  public get value(): string {
+    return this._value;
+  }
+
+  @Input() public set value(value: string) {
+    this._value = value;
+    this.propagateChange(value);
+  }
+
+  constructor(private injector: Injector, private cdr: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    if (this.variant === 'editable') {
+      this.isDisabled = false;
+    }
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get<NgControl>(NgControl);
+    if (ngControl) {
+      this.control = ngControl.control as FormControl;
+      this.cdr.detectChanges();
+    }
+  }
+
+  private propagateChange: Function = (_: string) => {};
+  private propagateTouch: Function = (_: string) => {};
+
+  public writeValue(obj: any): void {
+    this.value = obj;
+  }
+
+  public registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  public registerOnTouched(fn: any): void {
+    this.propagateTouch = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+  public onBlur(): void {
+    this.propagateTouch();
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-loading-spinner/af-connect-loading-spinner.component.html

@@ -0,0 +1,6 @@
+<div class="spinner">
+    <div [class]="size"></div>
+    <div [class]="size"></div>
+    <div [class]="size"></div>
+    <div [class]="size"></div>
+</div>

package/projects/af-connect-components/src/lib/af-connect-loading-spinner/af-connect-loading-spinner.component.scss

@@ -0,0 +1,67 @@
+:host {
+    display: flex;
+    justify-content: center;
+    align-self: center;
+  }
+  
+  .spinner {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  
+    & div {
+      box-sizing: border-box;
+      display: block;
+      position: absolute;
+      width: 4rem;
+      height: 4rem;
+      margin: 0.5rem;
+      border: 0.5rem solid var(--primary-dark-teal-color);
+      border-radius: 50%;
+      animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+      border-color: var(--primary-dark-teal-color) transparent transparent transparent;
+  
+      &.small {
+        width: 1rem;
+        height: 1rem;
+        border-width: 0.2rem;
+        border-color: var(--neutral-anchor-color) transparent transparent transparent;
+      }
+  
+      &:nth-child(1) {
+        animation-delay: -0.45s;
+      }
+  
+      &:nth-child(2) {
+        animation-delay: -0.3s;
+      }
+  
+      &:nth-child(3) {
+        animation-delay: -0.15s;
+      }
+    }
+  }
+  
+  @keyframes spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+  :host(.btn-spinner) {
+    .spinner {
+      width: 40px;
+      height: 40px;
+      & div {
+        width: 1.5rem;
+        height: 1.5rem;
+        border: 0.15rem solid #fff;
+        border-color: #fff transparent transparent transparent;
+      }
+    }
+  }
+  

package/projects/af-connect-components/src/lib/af-connect-loading-spinner/af-connect-loading-spinner.component.spec.ts

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

package/projects/af-connect-components/src/lib/af-connect-loading-spinner/af-connect-loading-spinner.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-loading-spinner',
+  templateUrl: './af-connect-loading-spinner.component.html',
+  styleUrls: ['./af-connect-loading-spinner.component.scss']
+})
+export class AfConnectLoadingSpinnerComponent {
+  @Input() size: 'standard' | 'small' = 'standard';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+}