af-connect-components 0.0.26 → 0.0.27

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

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

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

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

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

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

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

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

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

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

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

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

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