af-connect-components 0.0.25 → 0.0.26

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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