af-connect-components 0.0.25 → 0.0.26

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+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();
+  });
+});