af-connect-components 0.0.25 → 0.0.26

package/projects/af-connect-components/src/lib/af-connect-components.module.ts

@@ -0,0 +1,146 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AfConnectComponentsComponent } from './af-connect-components.component';
+import { AfConnectFooterComponent } from './af-connect-footer/af-connect-footer.component';
+import { AfConnectHeaderComponent } from './af-connect-header/af-connect-header.component';
+import { ExpandableWrapperComponent } from './expandable/afc-expandable-wrapper/afc-expandable-wrapper.component';
+import { ExpandableArrowComponent } from './expandable/expandable-arrow/expandable-arrow.component';
+import { ExpandableContainerComponent } from './expandable/expandable-container/expandable-container.component';
+import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
+import { BreakpointLibService } from './services/breakpoint.service';
+import { AfConnectProfileDropdown } from './af-connect-profile-dropdown/af-connect-profile-dropdown.component';
+import { GetinItialsPipe } from '../shared/pipes/get-initials';
+import { FaqComponent } from './faq/faq/faq.component';
+import { FaqItemComponent } from './faq/faq-item/faq-item.component';
+import { ImageWithFallbackComponent, ImageWithFallbackDirective } from './faq/image-fallback/image-fallback.component';
+import { AfConnectProductsCarouselComponent } from './af-connect-products-carousel/af-connect-products-carousel.component';
+import { ImageCardComponent } from './af-connect-products-carousel/image-card/image-card.component';
+import { AfConnectButtonComponent } from './af-connect-button/af-connect-button.component';
+import { AfConnectContentComponent } from './af-connect-content/af-connect-content.component';
+import { AfConnectDatepickerComponent } from './af-connect-datepicker/af-connect-datepicker.component';
+import { AfConnectInputComponent } from './af-connect-input/af-connect-input.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AfConnectFormValidationErrorsComponent } from './af-connect-form-validation-errors/af-connect-form-validation-errors.component';
+import { AfConnectFormGroupComponent } from './af-connect-form-group/af-connect-form-group.component';
+import { AfConnectCardComponent } from './af-connect-card/af-connect-card.component';
+import { AfConnectCardHeaderComponent } from './af-connect-card/af-connect-card-header/af-connect-card-header.component';
+import { AfConnectChipComponent } from './af-connect-chip/af-connect-chip.component';
+import { AfConnectChartComponent } from './af-connect-chart/af-connect-chart.component';
+import { AfConnectErrorComponent } from './af-connect-error/af-connect-error.component';
+import { AfConnectInlineErrorComponent } from './af-connect-inline-error/af-connect-inline-error.component';
+import { AfConnectLoadingSpinnerComponent } from './af-connect-loading-spinner/af-connect-loading-spinner.component';
+import { AfConnectModalComponent } from './af-connect-modal/af-connect-modal.component';
+import { AfConnectNoContentComponent } from './af-connect-no-content/af-connect-no-content.component';
+import { AfConnectNotificationComponent } from './af-connect-notification/af-connect-notification.component';
+import { AfConnectProgressBarComponent } from './af-connect-progress-bar/af-connect-progress-bar.component';
+import { AfConnectRadioButtonComponent } from './af-connect-radio-button/af-connect-radio-button.component';
+import { AfConnectRadioGroupComponent } from './af-connect-radio-group/af-connect-radio-group.component';
+import { AfConnectSectionComponent } from './af-connect-section/af-connect-section.component';
+import { AfConnectSectionHeaderComponent } from './af-connect-section-header/af-connect-section-header.component';
+import { AfConnectSelectComponent } from './af-connect-select/af-connect-select.component';
+import { AfConnectSvgButtonComponent } from './af-connect-svg-button/af-connect-svg-button.component';
+import { AfConnectTabComponent } from './af-connect-tab/af-connect-tab.component';
+import { AfConnectTabsComponent } from './af-connect-tabs/af-connect-tabs.component';
+import { AfConnectTableComponent } from './af-connect-table/af-connect-table.component';
+import { AfConnectToasterMessageComponent } from './af-connect-toaster-message/af-connect-toaster-message.component';
+import { AfConnectToggleButtonComponent } from './af-connect-toggle-button/af-connect-toggle-button.component';
+import { AfConnectTooltipComponent } from './af-connect-tooltip/af-connect-tooltip.component';
+import { AfConnectBreadcrumbComponent } from './af-connect-breadcrumb/af-connect-breadcrumb.component';
+
+@NgModule({
+  declarations: [
+    AfConnectComponentsComponent,
+    AfConnectHeaderComponent,
+    AfConnectFooterComponent,
+    AfConnectProfileDropdown,
+    GetinItialsPipe,
+    ExpandableContainerComponent,
+    ExpandableArrowComponent,
+    ExpandableWrapperComponent,
+    FaqComponent,
+    FaqItemComponent,
+    ImageWithFallbackDirective,
+    ImageWithFallbackComponent,
+    AfConnectProductsCarouselComponent,
+    ImageCardComponent,
+    AfConnectButtonComponent,
+    AfConnectContentComponent,
+    AfConnectDatepickerComponent,
+    AfConnectInputComponent,
+    AfConnectFormValidationErrorsComponent,
+    AfConnectFormGroupComponent,
+    AfConnectCardComponent,
+    AfConnectCardHeaderComponent,
+    AfConnectChipComponent,
+    AfConnectChartComponent,
+    AfConnectErrorComponent,
+    AfConnectInlineErrorComponent,
+    AfConnectLoadingSpinnerComponent,
+    AfConnectModalComponent,
+    AfConnectNoContentComponent,
+    AfConnectNotificationComponent,
+    AfConnectProgressBarComponent,
+    AfConnectRadioButtonComponent,
+    AfConnectRadioGroupComponent,
+    AfConnectSectionComponent,
+    AfConnectSectionHeaderComponent,
+    AfConnectSelectComponent,
+    AfConnectSvgButtonComponent,
+    AfConnectTabComponent,
+    AfConnectTabsComponent,
+    AfConnectTableComponent,
+    AfConnectToasterMessageComponent,
+    AfConnectToggleButtonComponent,
+    AfConnectTooltipComponent,
+    AfConnectBreadcrumbComponent
+  ],
+  imports: [
+    MatIconModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  providers: [BreakpointLibService],
+  exports: [
+    AfConnectComponentsComponent,
+    AfConnectHeaderComponent,
+    AfConnectFooterComponent,
+    FaqComponent,
+    FaqItemComponent,
+    ImageWithFallbackDirective,
+    ImageWithFallbackComponent,
+    AfConnectProductsCarouselComponent,
+    AfConnectButtonComponent,
+    AfConnectContentComponent,
+    AfConnectDatepickerComponent,
+    AfConnectInputComponent,
+    AfConnectFormValidationErrorsComponent,
+    AfConnectFormGroupComponent,
+    AfConnectCardComponent,
+    AfConnectCardHeaderComponent,
+    AfConnectChipComponent,
+    AfConnectChartComponent,
+    AfConnectErrorComponent,
+    AfConnectInlineErrorComponent,
+    AfConnectLoadingSpinnerComponent,
+    AfConnectModalComponent,
+    AfConnectNoContentComponent,
+    AfConnectNotificationComponent,
+    AfConnectProgressBarComponent,
+    AfConnectRadioButtonComponent,
+    AfConnectRadioGroupComponent,
+    AfConnectSectionComponent,
+    AfConnectSectionHeaderComponent,
+    AfConnectSelectComponent,
+    AfConnectSvgButtonComponent,
+    AfConnectTabComponent,
+    AfConnectTabsComponent,
+    AfConnectTableComponent,
+    AfConnectToasterMessageComponent,
+    AfConnectToggleButtonComponent,
+    AfConnectTooltipComponent,
+    AfConnectBreadcrumbComponent
+  ]
+})
+export class AfConnectComponentsModule { }

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AfConnectComponentsService } from './af-connect-components.service';
+
+describe('AfConnectComponentsService', () => {
+  let service: AfConnectComponentsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AfConnectComponentsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/projects/af-connect-components/src/lib/af-connect-components.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AfConnectComponentsService {
+
+  constructor() { }
+}

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

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

@@ -0,0 +1,227 @@
+@import '../../styles/breakpoints.scss';
+$baseDesktopPadding: 1rem 1.75rem;
+$baseMobilePadding: 1rem 1rem;
+
+.base-empty-content {
+  background: var(--main-white-color);
+  min-height: 15rem;
+  display: flex;
+  align-items: center;
+}
+
+:host {
+  position: relative;
+  height: 100%;
+  background: var(--main-white-color);
+  padding: $baseDesktopPadding;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  flex-wrap: wrap;
+  box-shadow: 0px 23px 88px #b0b7c324;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+
+  @include media(tabletTreshold) {
+    padding: 1rem 1.25rem;
+    gap: 0.75rem;
+  }
+
+  @include media(mobileBreakPointTreshold) {
+    padding: $baseMobilePadding;
+    box-shadow: none;
+  }
+}
+
+:host(.beneficiary-container) {
+  @include media(tabletTreshold) {
+    padding: $baseMobilePadding;
+    gap: 0.75rem;
+  }
+}
+
+:host(.external-investments-container) {
+  @include media(tabletTreshold) {
+    padding: $baseMobilePadding;
+    gap: 0.875rem;
+  }
+}
+
+:host(.profile-container) {
+  padding: 12px 25px 20px;
+  gap: 2.5rem;
+  height: auto;
+
+  @include media(mobileBreakPointTreshold) {
+    border-radius: 5px;
+    padding: 20px 18px;
+    border: 1px solid var(--primary-light-teal-color);
+  }
+}
+
+.base-spinner-container {
+  background: var(--main-white-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:host(.spinner-container) {
+  @extend .base-spinner-container;
+  min-height: 15rem;
+}
+
+:host(.spinner-container-fund) {
+  @extend .base-spinner-container;
+  min-height: 32rem;
+
+  @include media(mobileBreakPointTreshold) {
+    min-height: 27rem;
+  }
+}
+
+:host(.spinner-container-fund-details) {
+  @extend .base-spinner-container;
+  min-height: 20rem;
+  margin-top: 2.5rem;
+}
+
+:host(.documents-container) {
+  padding: 0.75rem 1rem;
+  overflow: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include media(mobileBreakPointTreshold) {
+    padding-top: 0;
+  }
+}
+
+:host(.profile-error-container) {
+  @extend .base-empty-content;
+
+  @include media(tabletTreshold) {
+    justify-content: center;
+  }
+}
+
+:host(.investments-error-container) {
+  @extend .base-empty-content;
+
+  @include media(tabletTreshold) {
+    justify-content: center;
+  }
+}
+
+:host(.documents-error-container) {
+  @extend .base-empty-content;
+  justify-content: center;
+}
+
+:host(.faq-error-container) {
+  @extend .base-empty-content;
+
+  @include media(tabletTreshold) {
+    justify-content: center;
+  }
+}
+
+:host(.carousel-container) {
+  display: block;
+  padding: 0 0 0.5rem 0;
+
+  @include media(mobileBreakPointTreshold) {
+    padding: 1rem 0;
+  }
+}
+
+:host(.profile-info-container) {
+  @extend .base-empty-content;
+  height: auto;
+  padding: 0.875rem 1.75rem 1.75rem;
+
+  @include media(mobileBreakPointTreshold) {
+    padding: 1.5rem 1rem 1.25rem;
+  }
+}
+
+:host(.fund-overview) {
+  padding: 1rem 1.4rem;
+  display: block;
+
+  @include media(mobileBreakPointTreshold) {
+    padding: 1rem;
+    box-shadow: 0px 23px 88px #00000029;
+  }
+}
+
+:host(.chart-container) {
+  overflow: hidden;
+  padding: 0px;
+}
+
+:host(.transaction-container) {
+  background-color: var(--secondary-grey-color);
+  height: auto;
+}
+
+:host(.grey-color) {
+  background-color: var(--secondary-grey-color);
+}
+
+:host(.fund-overview-tabs) {
+  @include media(mobileBreakPointTreshold) {
+    background-color: var(--secondary-grey-color);
+    box-shadow: 0px 23px 88px #00000029;
+  }
+}
+
+:host(.fund-portfolio-container-mobile) {
+  gap: 1rem;
+}
+
+:host(.claim-details-tabs) {
+  width: 100%;
+  padding: 1rem 2.5rem 2rem;
+}
+
+:host(.no-shadow) {
+  box-shadow: none;
+}
+
+:host(.align-center) {
+  align-self: center;
+}
+
+:host(.max-width) {
+  width: 100%;
+
+  @include media(mobileBreakPointTreshold) {
+    width: auto;
+  }
+}
+
+:host(.certificates-filter) {
+  padding: 1rem 1rem;
+
+  @include media(mobileBreakPointTreshold) {
+    padding: 0.5rem 0 0 0;
+  }
+}
+
+:host(.statements-container) {
+  padding: 12px 1rem 1.25rem 1rem;
+  justify-content: space-between;
+  flex-direction: column;
+  gap: 12px;
+
+  @include media(mobileBreakPointTreshold) {
+    padding: 0.75rem 1rem 0.75rem 1rem;
+  }
+}
+
+:host(.latest-statements-container) {
+  padding: 0rem;
+}

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

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

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

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-content',
+  templateUrl: './af-connect-content.component.html',
+  styleUrls: ['./af-connect-content.component.scss']
+})
+export class AfConnectContentComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+}

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

@@ -0,0 +1 @@
+<p>af-connect-datepicker works!</p>

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

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

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

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

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

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

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

@@ -0,0 +1,51 @@
+@import '../../styles/breakpoints.scss';
+
+img {
+  background: none;
+  border: none;
+  width: 74px;
+  height: 55px;
+  margin-bottom: 1rem;
+}
+
+.center {
+  align-items: center;
+  text-align: center;
+}
+
+.left {
+  align-items: start;
+}
+
+.error-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @include media(tabletTreshold) {
+    align-items: center;
+    text-align: center;
+  }
+
+  &.medium {
+    height: 15rem;
+    margin-top: -1rem;
+  }
+
+  &.large {
+    height: 20rem;
+    margin-top: -1rem;
+  }
+}
+
+.error-title {
+  font-size: 18px;
+  font-family: var(--standard-font-family-hero-new-semibold);
+  color: var(--secondary-black-color);
+}
+
+.error-message {
+  font-size: 14px;
+  font-family: var(--standard-font-family-hero-new);
+  color: var(--secondary-black-color);
+}

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

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

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

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-error',
+  templateUrl: './af-connect-error.component.html',
+  styleUrls: ['./af-connect-error.component.scss']
+})
+export class AfConnectErrorComponent {
+  @Input() src: string;
+  @Input() title: string;
+  @Input() message: string;
+  @Input() height: 'small' | 'medium' | 'large' = 'small';
+  @Input() alignContent: 'center' | 'left' = 'left';
+
+  constructor() {}
+
+  ngOnInit() {}
+}