af-connect-components 0.0.26 → 0.0.28

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

@@ -1,120 +0,0 @@
-import { ChangeDetectorRef, Component, Input, forwardRef, Injector, Output, EventEmitter } from '@angular/core';
-import { FormControl, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { toggleButtonAnimation, toggleBackgroundAnimation } from '../constants/animation.constants';
-import { EmitValue } from '../constants/base.constants';
-
-const NEUTRAL_BUTTON_COLOR = '#F3F3F3';
-
-@Component({
-  selector: 'lib-af-connect-toggle-button',
-  templateUrl: './af-connect-toggle-button.component.html',
-  styleUrls: ['./af-connect-toggle-button.component.scss'],
-  animations: [toggleButtonAnimation, toggleBackgroundAnimation],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => AfConnectToggleButtonComponent),
-      multi: true
-    }
-  ]
-})
-export class AfConnectToggleButtonComponent {
-  @Input() emitValue: EmitValue;
-  @Input() label: string;
-  @Input() disabled = true;
-  @Input() withForm = false;
-  @Input() onStateBackground: string = 'var(--primary-connected-orange-color)';
-  @Input() offStateBackground: string;
-  @Input() onStateText: string;
-  @Input() offStateText: string;
-  @Input() background: string;
-  @Input() position: 'on' | 'off' = 'off';
-  @Input() variant: 'ball' | 'full' = 'ball';
-  @Output() clickBtn = new EventEmitter<string | null>();
-  public control: FormControl;
-
-  constructor(private injector: Injector, private cdr: ChangeDetectorRef) {}
-
-  public togglePosition() {
-    if (this.position === 'on') this.position = 'off';
-    else this.position = 'on';
-
-    this.propagateChange(this.position === 'on');
-  }
-
-  public ngAfterViewInit(): void {
-    if (this.withForm) {
-      const ngControl: NgControl = this.injector.get<NgControl>(NgControl);
-      if (ngControl) {
-        this.control = ngControl.control as FormControl;
-        this.cdr.detectChanges();
-      }
-    }
-  }
-
-  private propagateChange: Function = (_: string) => {};
-  private propagateTouch: Function = (_: string) => {};
-
-  public writeValue(): void {}
-
-  public registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  public registerOnTouched(fn: any): void {
-    this.propagateTouch = fn;
-  }
-
-  public onBlur(): void {
-    this.propagateTouch();
-  }
-
-  setDisabledState?(disabled: boolean): void {
-    this.disabled = disabled;
-  }
-
-  public getButtonStyles(): Object {
-    if (this.variant === 'full')
-      return {
-        background: this.background || NEUTRAL_BUTTON_COLOR,
-        width: '152px',
-        height: '32px',
-        borderRadius: '16px'
-      };
-    else
-      return {
-        background: this.position === 'on' ? this.onStateBackground : this.offStateBackground
-      };
-  }
-
-  public getToggleBallStyles(): Object | void {
-    if (this.variant === 'full')
-      return {
-        background: '#15808D',
-        width: '76px',
-        height: '32px',
-        borderRadius: '16px',
-        margin: 0
-      };
-  }
-
-  public getOnStateTextStyles(): Object | void {
-    if (this.variant === 'full')
-      return {
-        zIndex: '2',
-        fontSize: '14px',
-        marginLeft: '19px',
-        color: this.position === 'on' ? '#707070' : '#fff'
-      };
-  }
-
-  public getOffStateTextStyles(): Object | void {
-    if (this.variant === 'full')
-      return {
-        zIndex: '2',
-        fontSize: '14px',
-        marginLeft: '16px',
-        color: this.position === 'off' ? '#707070' : '#fff'
-      };
-  }
-}

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

@@ -1,11 +0,0 @@
-<div
-  *ngIf="showContent && additionalShowCondition"
-  [ngStyle]="{
-    top: top,
-    zIndex: zIndex
-  }"
-  [ngClass]="['tooltip__text__box', position, autoSize ? 'autoSize' : '']"
->
-  <div class="tooltip__text">{{ text }}</div>
-</div>
-<ng-content></ng-content>

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

@@ -1,149 +0,0 @@
-@import '../../styles/breakpoints.scss';
-
-.tooltip-text {
-  text-align: left;
-  color: var(--primary-dark-teal-color);
-  font-family: var(--standard-font-family-hero-new-bold);
-}
-
-:host {
-  width: 100%;
-  position: relative;
-}
-
-.display__after {
-  content: '';
-  z-index: 1;
-  position: absolute;
-  border-style: solid;
-  border-width: 0.6rem;
-}
-
-.position__top {
-  @extend .display__after;
-  top: 100%;
-  border-color: var(--secondary-egg-shell-color) transparent transparent transparent;
-}
-
-.position__bottom {
-  @extend .display__after;
-  bottom: 100%;
-  border-color: transparent transparent var(--secondary-egg-shell-color) transparent;
-}
-
-.tooltip__text__box {
-  display: flex;
-  align-items: center;
-  width: 19rem;
-  font-size: 12px;
-  line-height: 20px;
-  position: absolute;
-  text-align: center;
-  background: var(--secondary-egg-shell-color);
-  border-radius: 1.2rem;
-  box-shadow: 0px 10px 30px var(--box-shadow-black-color);
-
-  &.topRight {
-    right: 0;
-    bottom: 2.8rem;
-    &::after {
-      @extend .position__top;
-      right: 10%;
-    }
-  }
-
-  &.topLeft {
-    left: 0;
-    bottom: 2.8rem;
-    &::after {
-      @extend .position__top;
-      left: 10%;
-    }
-  }
-
-  &.topCenter {
-    right: -50%;
-    bottom: 2.8rem;
-    &::after {
-      @extend .position__top;
-      left: 50%;
-    }
-  }
-
-  &.bottomLeft {
-    left: 0;
-    top: 2.8rem;
-    &::after {
-      @extend .position__bottom;
-      left: 10%;
-    }
-  }
-
-  &.bottomCenter {
-    right: -50%;
-    top: 2.8rem;
-    &::after {
-      @extend .position__bottom;
-      left: 50%;
-    }
-  }
-
-  &.bottomRight {
-    right: 0;
-    top: 2.8rem;
-    &::after {
-      @extend .position__bottom;
-      right: 10%;
-    }
-  }
-
-  &.autoSize {
-    width: auto;
-    height: auto;
-  }
-}
-
-.tooltip__text {
-  padding: 1rem;
-  text-align: justify;
-}
-
-:host(.profile-loading__icon) {
-  @include media(mobileBreakPointTreshold) {
-    .tooltip__text__box {
-      left: -2rem;
-    }
-  }
-}
-
-:host(.profile-details-loading__icon) {
-  @include media(mobileBreakPointTreshold) {
-    .tooltip__text__box {
-      left: -9.7rem;
-    }
-  }
-}
-
-:host(.empty_state__btn-tooltip) {
-  .tooltip__text__box {
-    right: -1.85rem;
-  }
-
-  .tooltip__text {
-    @extend .tooltip-text;
-  }
-}
-
-:host(.funeral-cover__info-btn-tooltip) {
-  .tooltip__text__box {
-    right: -1.75rem;
-
-    @include media(mobileBreakPointTreshold) {
-      right: -1.2rem;
-    }
-  }
-
-  .tooltip__text {
-    @extend .tooltip-text;
-  }
-}

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

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

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

@@ -1,36 +0,0 @@
-import { Component, HostBinding, HostListener, Input } from '@angular/core';
-import { Position } from './types';
-
-@Component({
-  selector: 'lib-af-connect-tooltip',
-  templateUrl: './af-connect-tooltip.component.html',
-  styleUrls: ['./af-connect-tooltip.component.scss']
-})
-export class AfConnectTooltipComponent {
-  @Input() text: string;
-  @Input() position: Position = 'bottomRight';
-  @Input() additionalShowCondition: boolean = true;
-  @Input() top: string;
-  @Input() autoSize: boolean;
-  @Input() zIndex: number = 10;
-
-  public showContent = false;
-
-  @HostListener('mouseenter') onMouseEnter() {
-    this.showContent = !this.showContent;
-  }
-
-  @HostListener('mouseleave') onMouseLeave() {
-    this.showContent = false;
-  }
-
-  @HostListener('click') click() {
-    this.showContent = !this.showContent;
-  }
-
-  // @HostBinding('style.z-index')
-  // get zIndexStyle(): number {
-  //   return this.zIndex;
-  // }
-
-}

package/projects/af-connect-components/src/lib/af-connect-tooltip/types.ts

@@ -1 +0,0 @@
-export type Position = 'topLeft' | 'topRight' | 'topCenter' | 'bottomCenter' | 'bottomLeft' | 'bottomRight';

package/projects/af-connect-components/src/lib/constants/animation.constants.ts

@@ -1,149 +0,0 @@
-import {
-  trigger,
-  state,
-  style,
-  transition,
-  animate,
-  query,
-  stagger,
-  animateChild,
-  group,
-  sequence
-} from '@angular/animations';
-
-const TAB_SLIDER_TIMING_FN = '1000ms cubic-bezier(0.4, 0, 0.2, 1)';
-
-export const flyInOutLeftColumn = [
-  trigger('flyInOutLeftColumn', [
-    state('in', style({ opacity: 0, transform: 'translateY(0)', background: 'blue' })),
-    transition('void => *', [style({ opacity: 0, transform: 'translateY(-100%)' }), animate('310ms')]),
-    transition('* => void', [animate('310ms', style({ opacity: 0, transform: 'translateY(-100%)' }))])
-  ])
-];
-
-export const flyInOutRightColumn = [
-  trigger('flyInOutRightColumn', [
-    state('in', style({ opacity: 1, transform: 'translateY(0)' })),
-    transition('void => *', [style({ opacity: 0, transform: 'translateY(-100%)' }), animate('310ms 310ms')]),
-    transition('* => void', [animate('310ms 310ms', style({ opacity: 0, transform: 'translateY(-100%)' }))])
-  ])
-];
-
-export const fadeAnimationGuide = trigger('fadeAnimation', [
-  transition(':enter', [style({ opacity: 0 }), animate('300ms', style({ opacity: 1 }))]),
-  transition(':leave', [style({ opacity: 1 }), animate('300ms', style({ opacity: 0 }))])
-]);
-
-export const fadeAnimation = trigger('fadeAnimation', [
-  transition(':enter', [style({ opacity: 0 }), animate('300ms ease-out', style({ opacity: 1 }))]),
-  transition(':leave', [style({ opacity: 1 }), animate('300ms ease-out', style({ opacity: 0 }))])
-]);
-
-export const staggerFadeIn = [
-  trigger('stagger', [
-    transition('* => *', [
-      query(':enter', [style({ opacity: 0 }), stagger(100, [animate('0.5s', style({ opacity: 1 }))])], {
-        optional: true
-      })
-    ])
-  ])
-];
-
-export const expandableContainer = [
-  trigger('expandContainer', [
-    transition(':enter', [
-      style({ height: '0px', visibility: 'hidden' }),
-      animate('300ms ease-out', style({ height: '*', visibility: 'visible' }))
-    ]),
-    transition(':leave', [animate('300ms ease-out', style({ height: '0px', visibility: 'hidden' }))])
-  ])
-];
-
-export const expandableArrow = [
-  trigger('expandableArrow', [
-    state('collapsed', style({ transform: 'rotate({{direction}}{{collapsedRotation}}deg)' }), {
-      params: { collapsedRotation: '0', direction: '' }
-    }),
-    state('expanded', style({ transform: 'rotate({{direction}}{{expandedRotation}}deg)' }), {
-      params: { expandedRotation: '90', direction: '' }
-    }),
-    transition('expanded <=> collapsed', animate('{{getNumberSpeed}}ms ease-out'), {
-      params: { getNumberSpeed: 300 }
-    }),
-    transition('collapsed <=> expanded', animate('{{getNumberSpeed}}ms ease-out'), {
-      params: { getNumberSpeed: 300 }
-    })
-  ])
-];
-
-export const selectAnimation = [
-  trigger('selectAnimation', [
-    state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden', border: 'none' })),
-    state('expanded', style({ height: '*' })),
-    transition('expanded <=> collapsed', animate('180ms cubic-bezier(0.8, 0.5, 0.7, 1.0)'))
-  ])
-];
-
-export const tabSlider = [
-  trigger('tabSlider', [
-    state('in-from-left', style({ opacity: 1 })),
-    state('in-from-right', style({ opacity: 1 })),
-    state('out-to-left', style({ opacity: 0, transform: 'translateX(0)' })),
-    state('out-to-right', style({ opacity: 0, transform: 'translateX(0)' })),
-    transition('* => out-to-right', animate(TAB_SLIDER_TIMING_FN, style({ transform: 'translateX(100%)' }))),
-    transition('* => out-to-left', [animate(TAB_SLIDER_TIMING_FN, style({ transform: 'translateX(-100%)' }))]),
-    transition('* => in-from-left', [
-      sequence([
-        style({ transform: 'translateX(-100%)', opacity: 1 }),
-        animate(TAB_SLIDER_TIMING_FN, style({ transform: 'translateX(0)' }))
-      ])
-    ]),
-    transition('* => in-from-right', [
-      sequence([
-        style({ transform: 'translateX(100%)', opacity: 1 }),
-        animate(TAB_SLIDER_TIMING_FN, style({ transform: 'translateX(0)' }))
-      ])
-    ])
-  ])
-];
-
-export const toggleButtonAnimation = [
-  trigger('toggleButton', [
-    state('on', style({ transform: 'translateX(100%)' })),
-    state('off', style({ transform: 'translateX(0)' })),
-    transition('on <=> off', animate('300ms ease-out'))
-  ])
-];
-
-export const toggleBackgroundAnimation = [
-  trigger('toggleBackground', [
-    state('on', style({ background: 'var(--primary-connected-orange-color)' })),
-    state('off', style({ background: 'var(--toggle-button-grey-color)' })),
-    transition('on <=> off', [group([query('@toggleButton', [animateChild()]), animate('300ms ease-out')])])
-  ])
-];
-
-export const flyInOut = [
-  trigger('flyInOut', [
-    state('in', style({ opacity: 1, transform: 'translateY(0)' })),
-    transition('void => *', [style({ opacity: 0, transform: 'translateY(-100%)' }), animate(200)]),
-    transition('* => void', [animate(200, style({ opacity: 0, transform: 'translateY(-100%)' }))])
-  ])
-];
-
-export const fadeInFromBottom = [
-  trigger('fadeInFromBottom', [
-    state('void', style({ opacity: 0.3, transform: 'translateY(90%)' })), // Initial state for :enter
-    state('enter', style({ opacity: 1, transform: 'translateY(0)' })), // Final state for :enter
-    transition(
-      'void => enter',
-      [
-        style({ opacity: 0.3, transform: 'translateY(90%)' }),
-        animate('1000ms {{delay}}ms ease-in-out', style({ opacity: 1, transform: 'translateY(0)' }))
-      ],
-      {
-        params: { delay: '0' }
-      }
-    )
-  ])
-];

package/projects/af-connect-components/src/lib/constants/base.constants.ts

@@ -1,10 +0,0 @@
-export type EmitValue = 'isCloseModal' | '';
-export const DISCLAIMER = 'DISCLAIMER';
-export const EMPTY_LINE = '--';
-export const INPUT_MAX_LENGTH = 20;
-export const INPUT_NAME_MAX_LENGTH = 60;
-export const PHONE_INPUT_LENGTH = 10;
-export const EMAIL_INPUT_MAX_LENGTH = 60;
-export const CONTACT_DETAILS_INPUT_MAX_LENGTH = 60;
-export const IDLE_TIMEOUT_DURATION_IN_MINUTES = 15;
-export const IDLE_MODAL_TIMER_DURATION_IN_MINUTES = 5;

package/projects/af-connect-components/src/lib/expandable/afc-expandable-wrapper/afc-expandable-wrapper.component.html

@@ -1,4 +0,0 @@
-<div class="expandable-wrapper" (click)="toggleIsExpanded()">
-  <ng-content select="[triggerable]"></ng-content>
-</div>
-<ng-content></ng-content>

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

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

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

@@ -1,21 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { BehaviorSubject, take } from 'rxjs';
-
-@Component({
-  selector: 'afc-expandable-wrapper',
-  templateUrl: './afc-expandable-wrapper.component.html',
-  styleUrls: ['./afc-expandable-wrapper.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ExpandableWrapperComponent {
-  public isExpanded$ = new BehaviorSubject<boolean | null>(null);
-
-  toggleIsExpanded() {
-    this.isExpanded$
-      .pipe(take(1))
-      .subscribe((current) => {
-        this.isExpanded$.next(!current);
-      })
-      .unsubscribe();
-  }
-}

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

@@ -1,14 +0,0 @@
-<span class="expandable-arrow" #arrow>
-  <svg
-    [@expandableArrow]="{
-      value: (wrapper && wrapper.isExpanded$ | async) ? 'expanded' : 'collapsed',
-      params: {
-        collapsedRotation,
-        expandedRotation
-      }
-    }"
-    id="icons_next" data-name="icons/next" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <rect id="bg" width="24" height="24" fill="none"/>
-    <path id="union" d="M1597.541-4.4l-5.929-5.93a.742.742,0,0,1-.081-.07.747.747,0,0,1-.219-.536.747.747,0,0,1,.219-.535.751.751,0,0,1,.078-.068l5.932-5.932a.751.751,0,0,1,1.061,0,.751.751,0,0,1,0,1.061l-5.476,5.475,5.476,5.475a.751.751,0,0,1,0,1.061.749.749,0,0,1-.531.219A.749.749,0,0,1,1597.541-4.4Z" transform="translate(1607.832 1.052) rotate(180)" [attr.fill]="color"/>
-  </svg>
-</span>

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

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

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

@@ -1,38 +0,0 @@
-import { animate, style, transition, trigger, state } from '@angular/animations';
-import { ChangeDetectionStrategy, Component, ElementRef, Host, HostListener, Input, OnInit, Optional, ViewChild } from '@angular/core';
-import { ExpandableWrapperComponent } from '../afc-expandable-wrapper/afc-expandable-wrapper.component';
-
-export enum AnimationPosition {
-  right = 0,
-  bottom = 90,
-  left = 180,
-  top = 270,
-};
-
-@Component({
-  selector: 'afc-expandable-arrow',
-  templateUrl: './expandable-arrow.component.html',
-  styleUrls: ['./expandable-arrow.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [trigger('expandableArrow', [
-    state('collapsed', style({ transform: 'rotate({{collapsedRotation}}deg)' }), { params: {collapsedRotation: '0'} }),
-    state('expanded', style({ transform: 'rotate({{expandedRotation}}deg)' }), { params: {expandedRotation: '90'} }),
-    transition('expanded <=> collapsed', animate('300ms ease-out')),
-    transition('collapsed <=> expanded', animate('300ms ease-out'))
-  ])]
-})
-export class ExpandableArrowComponent implements OnInit {
-  @Input() color: string = '#454f63';
-  @Input() startPosition: 'right' | 'bottom' | 'left' | 'top' = 'right';
-  @Input() endPosition: 'right' | 'bottom' | 'left' | 'top' = 'bottom';
-
-  public collapsedRotation = AnimationPosition['right'];
-  public expandedRotation = AnimationPosition['bottom'];
-
-  constructor(@Host() @Optional() public wrapper: ExpandableWrapperComponent) { }
-
-  ngOnInit(): void {
-    this.collapsedRotation = AnimationPosition[this.startPosition];
-    this.expandedRotation = AnimationPosition[this.endPosition];
-  }
-}

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

@@ -1,3 +0,0 @@
-<div class="expand-container" [@expandContainer]="(wrapper.isExpanded$ | async) ? 'expanded' : 'collapsed'">
-  <ng-content></ng-content>
-</div>

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

@@ -1,3 +0,0 @@
-.expand-container {
-    overflow: hidden;
-}

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

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