af-connect-components 0.0.24 → 0.0.26

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

@@ -0,0 +1,153 @@
+@import '../../styles/breakpoints.scss';
+
+:host {
+  position: relative;
+}
+
+:host(.investments-mobile) {
+  .buttons-container {
+    margin: auto 0 0;
+  }
+}
+
+:host(.portfolio-mobile-card-title) {
+  border: none;
+}
+
+:host(.documents-section-header) {
+  .header-container .border-line {
+    margin-bottom: 0.75rem;
+  }
+}
+
+@keyframes colorchange {
+  0% {
+    background: var(--secondary-grey-color);
+  }
+
+  50% {
+    background: darken(#fafbfc, 10%);
+  }
+
+  100% {
+    background: var(--secondary-grey-color);
+  }
+}
+
+@keyframes colorBack {
+  0% {
+    background: var(--secondary-grey-color);
+  }
+
+  50% {
+    background: darken(#fafbfc, 10%);
+  }
+
+  100% {
+    background: var(--secondary-grey-color);
+  }
+}
+
+$animation-time: 0.9s;
+$background-primary: var(--secondary-grey-color);
+
+.header-container {
+  background: $background-primary;
+
+  font-family: var(--standard-font-family-hero-new-semibold);
+  padding: 1rem 1.75rem;
+  min-height: 2.7rem;
+  border-radius: var(--section-border-radius);
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @include media(tabletTreshold) {
+    font-size: 18px;
+  }
+
+  @include media(mobileBreakPointTreshold) {
+    padding: 0.5rem 1.25rem;
+    min-height: 0px;
+    background-color: var(--main-background-color-mobile);
+    border: 1px solid var(--neutral-button-color);
+    border-radius: 0;
+  }
+
+  &.default {
+    font-size: 1.4rem;
+    color: var(--primary-dark-teal-color);
+
+    @include media(mobileBreakPointTreshold) {
+      font-size: 1.125rem;
+    }
+  }
+
+  &.portfolio {
+    font-size: var(--standard-font-size-14);
+    color: var(--main-black-color);
+  }
+
+  &.isStatic {
+    background-color: $background-primary;
+    font-family: var(--standard-font-family-hero-new-bold);
+
+    @include media(mobileBreakPointTreshold) {
+      background: var(--main-white-color);
+      border: none;
+      padding: 0 1.25rem;
+      padding-top: 0.5rem;
+    }
+  }
+
+  &.isExpandable {
+    cursor: pointer;
+  }
+}
+
+.section-wrapper {
+  align-items: center;
+  justify-content: space-between;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: 0.5rem;
+}
+
+.title-container {
+  @include media(mobileBreakPointTreshold) {
+    max-width: 170px;
+  }
+}
+
+.expanded {
+  animation: colorchange $animation-time;
+}
+
+.collapsed {
+  animation: colorBack $animation-time;
+}
+
+.buttons-container {
+  display: flex;
+  gap: 1rem;
+  margin-left: auto;
+
+  @include media(mobileBreakPointTreshold) {
+    font-size: 11px;
+    height: 100%;
+    font-family: var(--standard-font-family-hero-new-semibold);
+  }
+}
+
+.border-line {
+  display: none;
+
+  @include media(mobileBreakPointTreshold) {
+    width: 100%;
+    border-bottom: 1px solid var(--primary-dark-teal-color);
+    display: block;
+    margin-top: 8px;
+  }
+}

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

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

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

@@ -0,0 +1,22 @@
+import { Component, Host, Input, OnInit, Optional, Output, EventEmitter } from '@angular/core';
+import { ExpandableWrapperComponent } from '../expandable/afc-expandable-wrapper/afc-expandable-wrapper.component';
+
+@Component({
+  selector: 'lib-af-connect-section-header',
+  templateUrl: './af-connect-section-header.component.html',
+  styleUrls: ['./af-connect-section-header.component.scss']
+})
+export class AfConnectSectionHeaderComponent {
+  @Input() title: string;
+  @Input() isStatic: boolean = true;
+  @Input() variant: 'default' | 'portfolio' = 'default'
+  @Output() onClick = new EventEmitter();
+
+  constructor(@Host() @Optional() public wrapper: ExpandableWrapperComponent) { }
+
+  ngOnInit(): void { }
+
+  toggleMobileContent() {
+    this.onClick.emit();
+  }
+}

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

@@ -0,0 +1,91 @@
+<!-- <div class="dropdown-collection" [ngClass]="[size, (control && control.disabled) || isDisabled ? 'disabled' : 'not-disabled',]" (click)="toggleDropdown($event)">
+
+    <div class="field-container">
+      <div class="label-container">
+        <label *ngIf="label" [ngClass]="[variant]" class="label">
+          {{ label }}<span *ngIf="withAsterisk" class="asterisk">*</span>
+        </label>
+        <afc-form-validation-errors
+          [control]="control"
+          [fieldText]="errorReferenceText || label"
+        ></afc-form-validation-errors>
+      </div>
+      <div class="input-container">
+        <input
+          type="text"
+          class="field-container-input"
+          [placeholder]="(isReadOnly && readOnlyPlaceholder) || placeholder"
+          [maxLength]="maxLength"
+          [ngClass]="[
+            (control && control.disabled) || isDisabled ? 'disabled' : 'not-disabled',
+            size,
+            dropdownOpen ? 'dropdown-open' : '',
+            control && control.errors && control.dirty && control.touched ? 'hasError' : '',
+            filter ? 'filterable' : 'non-filterable'
+          ]"
+          [disabled]="(control && control.disabled) || isDisabled || variant === 'read-only' || isReadOnly"
+          [(ngModel)]="currentValue"
+          (blur)="onBlur()"
+          (ngModelChange)="onChange($event)"
+        />
+        <div class="arrow-container" *ngIf="variant !== 'read-only'">
+          <afc-expandable-arrow
+            endPosition="top"
+            startPosition="bottom"
+            animationSpeed="fast"
+            ngClass="arrow"
+            [isExpanded]="dropdownOpen"
+          >
+          </afc-expandable-arrow>
+        </div>
+      </div>
+    </div>
+ 
+    <ng-container *ngTemplateOutlet="dropdownListItems; context: { type }"></ng-container>
+  </div>
+  
+  <ng-template #dropdownListItems let-type="type">
+    <ul
+      class="dropdown-list"
+      role="listbox"
+      aria-expanded="false"
+      [@selectAnimation]="dropdownOpen ? 'expanded' : 'collapsed'"
+      [ngClass]="{ 'dropdown-open': dropdownOpen }"
+    >
+      <ng-container
+        *ngIf="filteredOptions.length !== 0; else noDropdownData"
+        [ngTemplateOutlet]="virtualScroll"
+      ></ng-container>
+    </ul>
+  </ng-template>
+  
+  <ng-template #virtualScroll>
+    <cdk-virtual-scroll-viewport
+      class="select-menu-inner"
+      [appendOnly]="true"
+      [itemSize]="SizeEnum[size]"
+      [style.height.px]="itemsShown * SizeEnum[size]"
+      [minBufferPx]="itemsShown * SizeEnum[size]"
+      [maxBufferPx]="itemsShown * SizeEnum[size]"
+    >
+      <div
+        class="list-item-container"
+        *cdkVirtualFor="let option of filteredOptions"
+        [ngClass]="[currentValue === option ? 'selected' : '', size]"
+        (click)="select(option)"
+      >
+        <img
+          height="14"
+          width="26"
+          *ngIf="(type === 'country' || type === 'country-code') && option['countryCode']"
+          [src]="'../../../../assets/country-flags/' + option?.['countryCode'] + '.svg' | lowercase"
+        />
+        <li tabindex="0" role="option" [innerHTML]="valueField && textField ? option[textField] : option"></li>
+      </div>
+    </cdk-virtual-scroll-viewport>
+  </ng-template>
+  
+  <ng-template #noDropdownData>
+    <div class="dropdown-no-data">No Data</div>
+  </ng-template>
+   -->

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

@@ -0,0 +1,242 @@
+@import '../../styles/breakpoints.scss';
+
+:host {
+  font-family: var(--standard-font-family-hero-new);
+  font-size: 0.875rem;
+  color: var(--main-black-color);
+  min-width: 5.2rem;
+
+  &[size='large'] {
+    width: 100%;
+  }
+}
+
+ul {
+  overflow: hidden;
+}
+
+.dropdown-collection {
+  max-width: 26rem;
+  position: relative;
+  cursor: pointer;
+
+  &.small {
+    .arrow {
+      right: 10px;
+    }
+  }
+
+  &.large {
+    width: 100%;
+    max-width: 100%;
+
+    &.disabled {
+      pointer-events: none;
+    }
+  }
+}
+
+.label {
+  cursor: pointer;
+  .asterisk {
+    color: var(--primary-orange-mobile-color);
+  }
+
+  &.large {
+    // color: var(--neutral-anchor-color);
+    margin-bottom: 3px;
+  }
+}
+
+.dropdown-list {
+  display: block;
+  background: var(--main-white-color);
+  list-style: none;
+  box-shadow: 0px 5px 8px #00000029;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 0;
+  z-index: 10;
+  right: 0;
+  margin: 0;
+  transform: translateY(100%);
+  z-index: 1001;
+
+  .list-item-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.5rem 0.5rem 18px;
+    cursor: pointer;
+    color: var(--select-grey-color);
+    border: 2px solid transparent;
+    box-sizing: border-box;
+
+    &:hover,
+    &:focus {
+      transition-property: color, background-color;
+      transition-duration: 1.1s;
+      border: 2px solid lighten($color: #47b6c4, $amount: 35);
+      border-radius: 2px;
+      background: lighten($color: #47b6c4, $amount: 35);
+      outline: none;
+      color: var(--footer-dark-black-color);
+    }
+
+    &.empty-option {
+      min-height: 20px;
+    }
+
+    &.small {
+      gap: 0.2rem;
+      padding: 0.5rem 0 0.5rem 2px;
+    }
+
+    &.large {
+      padding: 11px 11px 11px 20px;
+    }
+  }
+
+  .dropdown-no-data {
+    height: 3rem;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--neutral-anchor-color);
+  }
+}
+
+input {
+  transition-property: outline-color, background-color;
+  transition-duration: 200ms;
+
+  &:focus {
+    outline: transparent;
+  }
+
+  &::placeholder {
+    color: var(--main-grey-color);
+    opacity: 0.7;
+  }
+
+  &.field-container-input {
+    font-family: var(--standard-font-family-hero-new);
+    font-size: 0.875rem;
+    padding: 11px 2rem 11px 1.25rem;
+
+    width: 100%;
+    background-color: var(--main-white-color);
+    color: var(--main-black-color);
+    border: 1px solid transparent;
+    transition-property: border-color, background-color;
+    transition-duration: 200ms;
+
+    &.hasError {
+      border: 1px solid var(--primary-connected-orange-color) !important;
+      background-color: var(--neutral-inline-error-color);
+    }
+
+    &.filterable {
+      pointer-events: all;
+    }
+
+    &.non-filterable {
+      pointer-events: none;
+    }
+
+    &.read-only {
+      background-color: var(--neutral-button-color);
+      color: var(--warm-grey-color);
+    }
+
+    @include media(mobileBreakPointTreshold) {
+      font-size: 13px;
+      border-radius: var(--input-border-radius);
+      box-shadow: var(--input-box-shadow);
+    }
+  }
+
+  &.not-disabled {
+    color: var(--warm-grey-color);
+    border-color: var(--primary-dark-teal-color);
+
+    &:disabled {
+      border: none;
+      color: var(--warm-grey-color);
+      background-color: var(--neutral-button-color);
+    }
+  }
+
+  &.small {
+    padding-left: 0.5rem;
+  }
+
+  &.large {
+    color: var(--main-black-color);
+    padding: 15px;
+    border: none;
+
+    &:disabled {
+      background-color: var(--neutral-button-color);
+      color: var(--warm-grey-color);
+    }
+  }
+
+  &.dropdown-open {
+    border-color: transparent;
+    box-shadow: 0px 5px 8px #00000029;
+  }
+
+  &.read-only {
+    background-color: var(--neutral-button-color);
+  }
+}
+
+.field-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  & .label-container {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+cdk-virtual-scroll-viewport {
+  &::-webkit-scrollbar {
+    width: 0.4rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background-color: var(--primary-balanced-teal-color);
+    outline: none;
+  }
+}
+
+.input-container {
+  display: flex;
+}
+
+.arrow-container {
+  position: relative;
+  display: flex;
+  min-height: 100%;
+  justify-content: center;
+  align-items: center;
+
+  .arrow {
+    position: absolute;
+    cursor: pointer;
+    right: 10px;
+  }
+}
+
+:host(.countryCode) {
+  .label-container {
+    flex-direction: column;
+  }
+}

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-select',
+  templateUrl: './af-connect-select.component.html',
+  styleUrls: ['./af-connect-select.component.scss']
+})
+export class AfConnectSelectComponent {
+
+}

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

@@ -0,0 +1,6 @@
+<img
+  [class]="['svg', size]"
+  [ngStyle]="{ width: customSize, height: customSize }"
+  (click)="this.clickBtn.emit(emitValue)"
+  [src]="src"
+/>

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

@@ -0,0 +1,66 @@
+@import '../../styles/breakpoints.scss';
+
+:host {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+img {
+  background: none;
+  border: none;
+  padding: 0px;
+  cursor: pointer;
+}
+
+.svg {
+  &.small {
+    $size: 14px;
+    width: $size;
+    height: $size;
+  }
+
+  &.medium {
+    $size: 30px;
+    width: $size;
+    height: $size;
+
+    @include media(mobileBreakPointTreshold) {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &.large {
+    $size: 42px;
+    width: $size;
+    height: $size;
+
+    @include media(tabletTreshold) {
+      &.large {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+}
+
+:host(.external-info) {
+  @include media(tabletTreshold) {
+    $size: 14px;
+    img {
+      width: $size;
+      height: $size;
+    }
+  }
+}
+
+:host(.external-investments) {
+  @include media(tabletTreshold) {
+    $size: 16px;
+    img {
+      width: $size;
+      height: $size;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { EmitValue } from '../constants/base.constants';
+
+@Component({
+  selector: 'lib-af-connect-svg-button',
+  templateUrl: './af-connect-svg-button.component.html',
+  styleUrls: ['./af-connect-svg-button.component.scss']
+})
+export class AfConnectSvgButtonComponent implements OnInit {
+  @Input() src: string;
+  @Input() emitValue: EmitValue;
+  @Input() customSize: number;
+  @Input() size: 'large' | 'medium' | 'small' | 'none' = 'none';
+
+  @Output() clickBtn = new EventEmitter<string | null>();
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,4 @@
+<div [hidden]="!isActive">
+    <ng-content></ng-content>
+  </div>
+