af-connect-components 0.0.26 → 0.0.27

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

@@ -1,209 +0,0 @@
-@import '../../../styles/breakpoints.scss';
-
-:host {
-  flex: 1 0 auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-:host(.beneficiaries-header) {
-  .buttons-container {
-    align-self: flex-start;
-  }
-}
-
-:host(.restricted-fund-card-header) {
-  padding: 0.8rem;
-
-  @include media(mobileBreakPointTreshold) {
-    padding: 0;
-  }
-
-  > .border-line {
-    border: 1px solid var(--toggle-button-grey-color);
-    opacity: 0.3;
-    margin: 0.2rem;
-  }
-}
-
-:host(.policies-header) {
-  flex-grow: 0;
-}
-
-:host(.document-card-header) {
-  .card-header.small {
-    gap: 0.5rem;
-
-    .title-container {
-      gap: 0.25rem;
-    }
-  }
-}
-
-.card-header-base {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-  color: var(--primary-dark-teal-color);
-  align-items: center;
-  justify-content: space-between;
-
-  @include media(tabletTreshold) {
-    gap: 6px;
-  }
-}
-
-.buttons-container {
-  display: flex;
-  gap: 1rem;
-
-  @include media(tabletTreshold) {
-    justify-content: flex-start;
-  }
-}
-
-:host(.claims-header) {
-  .buttons-container {
-    display: contents;
-  }
-}
-
-.border-line {
-  width: 100%;
-  margin-top: 0.85rem;
-  border-bottom: 1px solid var(--primary-dark-teal-color);
-
-  &.small {
-    display: none;
-  }
-}
-
-.inner-title-container {
-  display: flex;
-  gap: 12px;
-}
-
-.heading-container {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.title-container-base {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-  font-size: 16px;
-  font-family: var(--standard-font-family-hero-new-semibold);
-
-  @include media(mobileBreakPointTreshold) {
-    font-size: 0.875rem;
-    gap: 1px;
-  }
-}
-
-.subtitle-base {
-  font-size: 14px;
-  font-family: var(--standard-font-family-hero-new);
-
-  @include media(mobileBreakPointTreshold) {
-    font-size: 0.75rem;
-  }
-}
-
-.orange-base {
-  color: var(--bright-orange-color);
-  font-family: var(--standard-font-family-hero-new-bold);
-  opacity: 1;
-}
-
-.card-header {
-  &.normal {
-    @extend .card-header-base;
-
-    .title-container {
-      @extend .title-container-base;
-      color: var(--primary-dark-teal-color);
-    }
-
-    .subtitle {
-      @extend .subtitle-base;
-      color: var(--primary-connected-orange-color);
-
-      &.orange {
-        @extend .orange-base;
-      }
-    }
-  }
-
-  &.small {
-    @extend .card-header-base;
-
-    .title-container {
-      @extend .title-container-base;
-      color: var(--secondary-black-color);
-      font-weight: 600;
-      gap: 0px;
-
-      @include media(mobileBreakPointTreshold) {
-        font-size: 14px;
-      }
-    }
-
-    .subtitle {
-      @extend .subtitle-base;
-      opacity: 0.5;
-      color: var(--main-black-color);
-
-      &.orange {
-        @extend .orange-base;
-      }
-
-      @include media(mobileBreakPointTreshold) {
-        font-size: 12px;
-      }
-    }
-  }
-}
-
-:host(.claims-header) {
-  .card-header {
-    &.normal {
-      .subtitle {
-        color: var(--claim-subtitle-color);
-
-        @include media(mobileBreakPointTreshold) {
-          color: var(--claim-info-grey);
-        }
-      }
-    }
-  }
-
-  .title-container {
-    width: 100%;
-  }
-
-  .inner-title-container {
-    justify-content: space-between;
-  }
-
-  @include media(mobileBreakPointTreshold) {
-    .title-container-base {
-      flex-direction: row;
-    }
-
-    .inner-title-container {
-      display: block;
-    }
-
-    .subtitle {
-      margin-top: 2px;
-      margin-left: -10px;
-    }
-
-    .border-line {
-      margin-top: 0.35rem;
-    }
-  }
-}

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

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

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

@@ -1,21 +0,0 @@
-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'lib-af-connect-card-header',
-  templateUrl: './af-connect-card-header.component.html',
-  styleUrls: ['./af-connect-card-header.component.scss']
-})
-export class AfConnectCardHeaderComponent {
-  @Input() title: string;
-  @Input() subTitle: string;
-  @Input() variant: 'normal' | 'small' = 'normal';
-  @Input() hideBorderLine: boolean;
-  @Input() subtitleColor: 'grey' | 'orange' = 'grey';
-  @Output() onClick = new EventEmitter();
-
-  ngOnInit(): void {}
-
-  toggleMobileContent() {
-    this.onClick.emit();
-  }
-}

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

@@ -1,4 +0,0 @@
-<div [class]="['card', variant]">
-    <ng-content></ng-content>
-  </div>
-  

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

@@ -1,100 +0,0 @@
-@import '../../styles/breakpoints.scss';
-
-$regular-border-radius: 12px;
-
-:host {
-  display: flex;
-  flex-direction: column;
-  width: 49%;
-
-  @include media(tabletTreshold) {
-    min-width: 100%;
-  }
-}
-
-:host(.full-width) {
-  width: 100%;
-  // use ngClass="full-width" on afc-card
-}
-
-:host(.document-card) {
-  user-select: none;
-}
-
-:host(.beneficiary-mobile-card) {
-  @include media(tabletTreshold) {
-    .small {
-      border: 1px solid var(--primary-dark-teal-color);
-      max-height: fit-content;
-    }
-  }
-}
-
-:host(.restricted-fund-card, .restricted-fund-mobile-card) {
-  .card {
-    gap: 1rem;
-  }
-}
-
-.base-card {
-  flex: 1 0 auto;
-  display: flex;
-  flex-direction: column;
-  border-radius: $regular-border-radius;
-  background: var(--main-white-color);
-  border: 1px solid var(--primary-dark-teal-color);
-}
-
-.card {
-  &.large {
-    @extend .base-card;
-    padding: 2rem 2.5rem 2.5rem 2.5rem;
-
-    @include media(mobileBreakPointTreshold) {
-      padding: 1rem 1rem 1.5rem 1rem;
-      border-radius: 5px;
-      border-color: var(--warm-grey-color);
-    }
-  }
-
-  &.normal {
-    @extend .base-card;
-
-    border-radius: $regular-border-radius;
-    padding: 23px 18px 13px 18px;
-
-    @include media(tabletTreshold) {
-      padding: 12px 9px 6px 9px;
-    }
-  }
-
-  &.small {
-    @extend .base-card;
-    border-radius: 5px;
-    padding: 18px 15px;
-
-    @include media(tabletTreshold) {
-      padding: 0.75rem 1rem;
-    }
-  }
-}
-
-:host(.statement-card) {
-  width: auto;
-  cursor: pointer;
-
-  .card.small {
-    padding: 12px 14px;
-    border-radius: 3px;
-  }
-}
-
-:host(.expandable-card) {
-  .card {
-    &.small {
-      @include media(tabletTreshold) {
-        padding: 0.75rem 0.5rem 0.75rem 0.75rem;
-      }
-    }
-  }
-}

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

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

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

@@ -1,14 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-af-connect-card',
-  templateUrl: './af-connect-card.component.html',
-  styleUrls: ['./af-connect-card.component.scss']
-})
-export class AfConnectCardComponent {
-  @Input() variant: 'large' | 'normal' | 'small' = 'normal';
-
-  constructor() {}
-
-  ngOnInit(): void {}
-}

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-<div
-  [ngClass]="['chip', variant]"
-  [ngStyle]="{
-    borderRadius: borderRadius + 'px',
-    background: additionalStyle && additionalStyle.background ? additionalStyle.background : ''
-  }"
->
-  <div
-    [ngStyle]="{
-      color: additionalStyle && additionalStyle.color ? additionalStyle.color : ''
-    }"
-  >
-    <ng-content></ng-content>
-  </div>
-</div>

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

@@ -1,125 +0,0 @@
-@import '../../styles/breakpoints.scss';
-
-:host {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-$border-radius: 1rem;
-$padding-top: 5.6px;
-
-.small {
-  padding: 0.3rem 0.75rem;
-  border-radius: $border-radius;
-}
-
-.medium {
-  min-width: 54px;
-  min-height: 28px;
-  border-radius: $border-radius;
-  font-weight: 500;
-}
-
-.green-chip {
-  background: var(--secondary-egg-shell-color);
-  color: var(--primary-dark-teal-color);
-}
-
-.chip {
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--standard-font-family-hero-new);
-  width: fit-content;
-
-  &.greenish-text {
-    @extend .green-chip;
-    @extend .small;
-
-    @include media(mobileBreakPointTreshold) {
-      font-size: 0.75rem;
-      padding: 5px 10px;
-      gap: 0px;
-    }
-  }
-
-  &.greenish-count {
-    @extend .green-chip;
-    @extend .medium;
-  }
-
-  &.percentage {
-    background: var(--primary-catalyst-yellow-color-low-opacity);
-    color: var(--primary-connected-orange-color);
-    font-family: var(--standard-font-family-hero-new-semibold);
-    @extend .medium;
-  }
-
-  &.status {
-    @extend .green-chip;
-    min-height: 26px;
-    font-weight: normal;
-    border-radius: $border-radius;
-    padding: 0px 15px 0px 15px;
-  }
-
-  &.claims {
-    border-radius: $border-radius;
-    padding: $padding-top 15px;
-  }
-
-  &.case-number {
-    border-radius: $border-radius;
-    border: 1px solid var(--primary-dark-teal-color);
-    color: var(--primary-dark-teal-color);
-    padding: $padding-top 0.75rem;
-    font-family: var(--standard-font-family-hero-new-semibold);
-
-    @include media(mobileBreakPointTreshold) {
-      display: none;
-    }
-  }
-
-  &.dot {
-    background: var(--secondary-egg-shell-color);
-    color: var(--primary-dark-teal-color);
-    padding: 0px 5px 0px 5px;
-    border-radius: $border-radius;
-    min-height: 10px;
-    display: inline-block;
-  }
-
-  &.dot-orange {
-    @extend .dot;
-    background: var(--primary-catalyst-yellow-color);
-  }
-
-  &.dot-teal {
-    @extend .dot;
-    background: var(--primary-dark-teal-color);
-  }
-}
-
-:host(.transaction-modal) {
-  .chip {
-    font-family: var(--standard-font-family-hero-new-bold);
-    font-size: 14px;
-    padding: 6px 18px;
-    @include media(mobileBreakPointTreshold) {
-      font-size: 0.875rem;
-      padding: 8px 18px;
-    }
-  }
-}
-
-:host(.transaction-mobile) {
-  .chip {
-    @include media(mobileBreakPointTreshold) {
-      font-size: 0.875rem;
-      padding: 8px 18px;
-      font-family: var(--standard-font-family-hero-new-bold);
-    }
-  }
-}

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

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

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

@@ -1,22 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-af-connect-chip',
-  templateUrl: './af-connect-chip.component.html',
-  styleUrls: ['./af-connect-chip.component.scss']
-})
-export class AfConnectChipComponent {
-  @Input() title: string;
-  @Input() borderRadius: number;
-  @Input() additionalStyle: { background?: string; color?: string };
-  @Input() variant:
-    | 'greenish-text'
-    | 'greenish-count'
-    | 'percentage'
-    | 'status'
-    | 'claims'
-    | 'dot'
-    | 'dot-orange'
-    | 'dot-teal'
-    | 'case-number' = 'greenish-text';
-}

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

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

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

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'lib-af-connect-components',
-  template: `
-    <p>
-      af-connect-components works!
-    </p>
-  `,
-  styles: [
-  ]
-})
-export class AfConnectComponentsComponent {
-
-}