af-connect-components 0.0.26 → 0.0.28

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

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

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

@@ -1,11 +0,0 @@
-import { Component, Input, TemplateRef } from '@angular/core';
-@Component({
-  selector: 'lib-af-connect-tab',
-  templateUrl: './af-connect-tab.component.html',
-  styleUrls: ['./af-connect-tab.component.scss']
-})
-export class AfConnectTabComponent {
-  @Input() label: string;
-  @Input() isActive: boolean = false;
-  @Input() tabButtons: TemplateRef<any>;
-}

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-<nav class="tabs-nav">
-    <ul class="nav-list">
-      <li #tab *ngFor="let tab of tabs; let i = index" class="nav-item" [class.active]="tab.isActive">
-        <button class="nav-button" (click)="activateTab(tab, i)">
-          {{ tab.label }}
-        </button>
-      </li>
-      <span #slider class="slider"></span>
-    </ul>
-    <div class="nav-action-buttons">
-      <ng-container [ngTemplateOutlet]="activeTab.tabButtons"></ng-container>
-    </div>
-  </nav>
-  <ng-content></ng-content>
-  

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

@@ -1,125 +0,0 @@
-@import '../../styles/breakpoints.scss';
-
-:host {
-  width: 100%;
-}
-
-$button-width: 75%;
-
-.tabs-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1.75rem;
-  border-bottom: 1px solid var(--primary-dark-teal-color);
-
-  @include media(mobileBreakPointTreshold) {
-    flex-direction: column;
-    margin-bottom: 0.625rem;
-    border: none;
-  }
-}
-
-.nav-list {
-  display: flex;
-  //min-width: $button-width;
-  position: relative;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-
-  .slider {
-    position: absolute;
-    bottom: 0;
-    // z-index: 100;
-    border-top-width: 1px;
-    border-color: var(--primary-dark-teal-color);
-    border-top-style: solid;
-    transition-property: left, width;
-    transition-duration: 250ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  @include media(mobileBreakPointTreshold) {
-    margin-right: auto;
-    justify-content: space-between;
-    width: 80%;
-    max-width: 320px;
-    border-bottom: 1px solid var(--light-grey-color);
-
-    .nav-item .nav-button {
-      padding-inline: 1.25rem;
-    }
-
-    .slider {
-      border-color: var(--primary-orange-mobile-color);
-    }
-  }
-}
-
-.nav-item {
-  $label-spacing: 1.75rem;
-  position: relative;
-
-  &:first-child .nav-button {
-    padding-right: $label-spacing;
-  }
-
-  &:not(:first-child) .nav-button {
-    padding-inline: $label-spacing;
-  }
-}
-
-.nav-item.active {
-  .nav-button {
-    color: var(--primary-dark-teal-color);
-    text-shadow: 0px 0px 1px var(--primary-dark-teal-color);
-
-    @include media(mobileBreakPointTreshold) {
-      text-shadow: none;
-    }
-  }
-}
-
-.nav-button {
-  display: block;
-  background: none;
-  border: none;
-  height: 100%;
-  padding: 1.5rem 0;
-  font-family: var(--standard-font-family-hero-new);
-  font-size: 1rem;
-  color: var(--secondary-space-color);
-  cursor: pointer;
-
-  @include media(mobileBreakPointTreshold) {
-    padding-block: 0.375rem;
-    font-size: 0.875rem;
-    font-family: var(--standard-font-family-hero-new-semibold);
-    color: var(--primary-dark-teal-color);
-  }
-}
-
-.nav-action-buttons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-  min-width: 100%-$button-width;
-
-  @include media(mobileBreakPointTreshold) {
-    align-self: flex-end;
-    padding-top: 1.125rem;
-    max-width: 100px;
-    min-width: auto;
-  }
-
-  @include media(tabletTreshold) {
-    max-width: 200px;
-  }
-}
-
-:host(.mobile-claim-info-tabs) {
-  .nav-list {
-    width: 100%;
-  }
-}

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

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

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

@@ -1,100 +0,0 @@
-import {
-  Component,
-  ContentChildren,
-  ElementRef,
-  QueryList,
-  ViewChild,
-  ViewChildren,
-  OnDestroy,
-  Output,
-  EventEmitter,
-  Input,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef
-} from '@angular/core';
-import { debounceTime, fromEvent, Subscription } from 'rxjs';
-import { AfConnectTabComponent } from '../af-connect-tab/af-connect-tab.component';
-
-@Component({
-  selector: 'lib-af-connect-tabs',
-  templateUrl: './af-connect-tabs.component.html',
-  styleUrls: ['./af-connect-tabs.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AfConnectTabsComponent implements OnDestroy {
-  @ContentChildren(AfConnectTabComponent) tabs: QueryList<AfConnectTabComponent>;
-  @ViewChild('slider', { read: ElementRef }) slider: ElementRef<HTMLSpanElement>;
-  @ViewChildren('tab', { read: ElementRef }) tabsRefs: QueryList<ElementRef<HTMLLIElement>>;
-  public activeTabIndex: number;
-  public subs = new Subscription();
-
-  constructor(public cdr: ChangeDetectorRef) {}
-
-  @Input() selectedTabIndex: number;
-
-  @Output() activeTabSelected = new EventEmitter<number>();
-
-  ngOnDestroy(): void {
-    this.subs.unsubscribe();
-  }
-
-  ngOnInit() {
-    this.subs.add(
-      fromEvent(window, 'resize')
-        .pipe(debounceTime(50))
-        .subscribe(() => {
-          this.triggerSlider(this.activeTabIndex);
-        })
-    );
-  }
-
-  ngAfterContentChecked() {
-    if (!this.selectedTabIndex) {
-      const activeTab = this.tabs.find((tab) => tab.isActive);
-      if (!activeTab) {
-        const firstTab = this.tabs.first;
-        firstTab.isActive = true;
-        this.activeTabIndex = 0;
-        this.activeTabSelected.emit(0);
-      }
-    } else {
-      this.setActiveLabel();
-    }
-  }
-
-  ngAfterViewChecked() {
-    if (!this.activeTabIndex) {
-      this.triggerSlider(0);
-    }
-  }
-
-  get activeTab() {
-    return this.tabs.find((tab) => tab.isActive) || this.tabs.first;
-  }
-
-  activateTab(selectedTab: AfConnectTabComponent, index: number) {
-    this.tabs.forEach((tab) => {
-      tab.isActive = tab === selectedTab;
-    });
-    this.activeTabIndex = index;
-    this.triggerSlider(index);
-    this.activeTabSelected.emit(index);
-  }
-
-  private triggerSlider(i: number) {
-    const activeTabRef = this.tabsRefs.get(i);
-    this.slider.nativeElement.style.left = `${activeTabRef?.nativeElement.offsetLeft}px`;
-    this.slider.nativeElement.style.width = `${activeTabRef?.nativeElement.offsetWidth}px`;
-  }
-
-  private setActiveLabel() {
-    this.tabs.find((tab, i) => {
-      const foundTab = i === this.selectedTabIndex;
-      if (foundTab) {
-        this.activeTabIndex = i;
-        tab.isActive = true;
-      }
-      return foundTab;
-    });
-  }
-}

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

@@ -1,13 +0,0 @@
-<div class="toaster-container">
-    <img [class]="['svg', size]" [src]="src" />
-    <span class="toaster-message">{{ message }}</span>
-    <afc-svg-button
-      ngClass="close-btn"
-      size="medium"
-      src="/assets/icons/delete.svg"
-      emitValue="isCloseModal"
-      (clickBtn)="closeToast()"
-    >
-    </afc-svg-button>
-  </div>
-  

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

@@ -1,66 +0,0 @@
-@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;
-    }
-  }
-}
-
-.toaster-container {
-  border-radius: 5px;
-  padding: 0.5rem 1rem;
-  opacity: 1;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  box-shadow: 0px 3px 6px #00000029;
-  border-left: 8px solid var(--primary-orange-mobile-color);
-  justify-content: space-between;
-}
-
-.toaster-message {
-  font-size: 12px;
-  color: var(--main-black-color);
-  display: flex;
-  justify-content: center;
-  line-height: 2;
-  margin: 0 auto 0 0;
-}
-
-.close-btn {
-  line-height: 0;
-}

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

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

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

@@ -1,22 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'lib-af-connect-toaster-message',
-  templateUrl: './af-connect-toaster-message.component.html',
-  styleUrls: ['./af-connect-toaster-message.component.scss']
-})
-export class AfConnectToasterMessageComponent {
-  @Input() public message: string;
-  @Input() src: string;
-  @Input() size: 'small' | 'medium' | 'large' = 'small';
-  @Input() timer = 5000;
-  @Output() onClose = new EventEmitter<boolean>();
-
-  ngOnInit() {
-    setTimeout(() => this.onClose.emit(), this.timer)
-  }
-
-  public closeToast() {
-    this.onClose.emit();
-  }
-}

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

@@ -1,26 +0,0 @@
-<label>{{ label }}</label>
-<button
-    type="button"
-    class="toggle-button"
-    (click)="this.clickBtn.emit(emitValue); togglePosition();"
-    [disabled]="disabled"
-    [ngStyle]="getButtonStyles()">
-    <span
-        *ngIf="onStateText"
-        [ngStyle]="getOnStateTextStyles() || null"
-        class="onStateText">
-        {{onStateText}}
-    </span>
-    <div
-      class="toggle-ball"
-      [@toggleButton]="position"
-      [ngStyle]="getToggleBallStyles() || null">
-    </div>
-    <span
-        *ngIf="offStateText"
-        [ngStyle]="getOffStateTextStyles() || null"
-        class="offStateText"> 
-        {{offStateText}}
-    </span>
-</button>
-<span *ngIf="label" class="state-info-text">{{ position === 'on' ? 'Yes' : 'No' }}</span>

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

@@ -1,55 +0,0 @@
-:host {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-  
-    & label {
-      width: 100%;
-      height: fit-content;
-      font-size: 14px;
-    }
-  }
-  
-  :host(.tax-certificates-toggle) {
-    width: auto;
-  }
-  
-  .toggle-button {
-    position: relative;
-    width: 49px;
-    height: 28px;
-    border: none;
-    border-radius: 14px;
-    background: var(--toggle-button-grey-color);
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    padding: 0;
-  
-    &:disabled {
-      cursor: default;
-    }
-  }
-  
-  .toggle-button,
-  .state-info-text {
-    align-self: center;
-  }
-  
-  .toggle-ball {
-    width: 18.67px;
-    height: 18.67px;
-    background: white;
-    border-radius: 50%;
-    margin: 0 5.83px;
-  }
-  
-  .onStateText {
-    position: absolute;
-    margin-left: 0.5rem;
-  }
-  
-  .onStateText,
-  .offStateText {
-    color: var(--neutral-button-color);
-  }

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

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