af-connect-components 0.0.25 → 0.0.26

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

@@ -0,0 +1,43 @@
+<div class="modal-wrapper" (click)="toggleModal()">
+    <ng-content select="[isOpenButton]"></ng-content>
+  </div>
+  
+  <div *ngIf="isOpen" class="background-container" (click)="externalClickClose($event)">
+    <div
+      [ngStyle]="{ width: width + 'px' }"
+      [ngClass]="[
+        'content-container',
+        variant,
+        noScrollbarContentContainer ? 'noScrollbar' : '',
+        borderHighlight ? 'with-border' : ''
+      ]"
+    >
+      <div *ngIf="variant !== 'standard'" class="color-bar"></div>
+      <div [ngStyle]="{ padding: reversedPadding ? '0px' : null }" class="inner-container">
+        <div
+          *ngIf="header"
+          class="header-container"
+          [ngStyle]="{ padding: reversedPadding ? '24px 24px 20px 24px' : null }"
+        >
+          <div class="header-content">
+            <img *ngIf="variant === 'error'" src="../../../../assets/icons/warning.svg" class="warning-icon" />
+            {{ header }}
+          </div>
+          <lib-af-connect-svg-button
+            *ngIf="withCloseButton"
+            size="small"
+            src="../../../assets/icons/delete.svg"
+            emitValue="isCloseModal"
+            (clickBtn)="toggleModal()"
+          ></lib-af-connect-svg-button>
+        </div>
+        <div class="body-container">
+          <ng-container *ngIf="content">
+            {{ content }}
+          </ng-container>
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+  </div>
+  

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

@@ -0,0 +1,136 @@
+@import '../../styles/breakpoints.scss';
+
+$padding-inline-disclaimer: 1.5rem;
+$heading-gap: 1.25rem;
+$heading-gap-mobile: 0.875rem;
+$icon-width: 2rem;
+$icon-width-mobile: 1.625rem;
+
+.background-container {
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 2000;
+  backdrop-filter: blur(2px);
+  overflow-y: hidden;
+}
+
+.content-container {
+  box-sizing: border-box;
+  $topValue: 15%;
+  z-index: 2050;
+  position: relative;
+  top: $topValue;
+  margin: auto;
+  overflow: auto;
+  max-height: 90%-$topValue;
+  background: var(--main-white-color);
+  border-radius: 5px;
+  max-width: 85%;
+
+  @include media(mobileBreakPointTreshold) {
+    $topValueMobile: 5%;
+    max-height: 100%-$topValueMobile;
+    width: auto;
+    max-width: 95%;
+    top: $topValueMobile;
+  }
+}
+
+.content-container.noScrollbar {
+  overflow: hidden;
+}
+
+.content-container.error,
+.content-container.info {
+  display: flex;
+  align-items: stretch;
+
+  .inner-container {
+    padding: 1.25rem;
+  }
+
+  .header-container {
+    color: var(--main-black-color);
+    border-bottom-color: var(--claim-info-grey);
+
+    @include media(mobileBreakPointTreshold) {
+      padding-bottom: 1.25rem;
+    }
+  }
+
+  .body-container {
+    padding-block: 1.25rem 0.5rem;
+
+    @include media(mobileBreakPointTreshold) {
+      padding-top: 1rem;
+    }
+  }
+}
+
+.inner-container {
+  box-sizing: border-box;
+  width: 100%;
+  padding: $padding-inline-disclaimer;
+
+  @include media(mobileBreakPointTreshold) {
+    padding: 1rem;
+  }
+}
+
+.color-bar {
+  width: 0.5rem;
+  background-color: var(--primary-connected-orange-color);
+}
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--primary-dark-teal-color);
+  padding-bottom: 1.25rem;
+  color: var(--primary-dark-teal-color);
+  font-size: 1.25rem;
+  font-family: var(--standard-font-family-hero-new-semibold);
+
+  @include media(mobileBreakPointTreshold) {
+    font-size: 1.125rem;
+    padding-bottom: 0.5rem;
+  }
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: $heading-gap;
+
+  .warning-icon {
+    width: $icon-width;
+    aspect-ratio: 1;
+  }
+
+  @include media(mobileBreakPointTreshold) {
+    gap: $heading-gap-mobile;
+
+    .warning-icon {
+      width: $icon-width-mobile;
+    }
+  }
+}
+
+.content-container.with-border {
+  border-left: 8px solid var(--primary-orange-mobile-color);
+}
+
+:host(.claim-details-modal-mobile) {
+  .body-container {
+    display: flex;
+  }
+
+  .inner-container {
+    max-height: 90vh;
+  }
+}

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

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

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

@@ -0,0 +1,99 @@
+import {
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  QueryList
+} from '@angular/core';
+import { EmitValue } from '../constants/base.constants';
+import { AfConnectButtonComponent } from '../af-connect-button/af-connect-button.component';
+import { AfConnectSvgButtonComponent } from '../af-connect-svg-button/af-connect-svg-button.component';
+
+/**
+   Example usage
+     <afc-modal>
+     <afc-button isOpenButton title="Open Modal"></afc-button>
+      <div class="content">
+      <afc-button emitValue="isCloseModal" title="Close Modal"></afc-button>
+      <h1> This is test modal </h1>
+      </div>
+     </afc-modal>
+     
+  isOpenButton tag specifies which element triggers the modal (usually a button), and it is always shown.
+  Pass [isCloseButton]="true" to a button to specify which buttons in the modal should be used
+  for closing the modal.Everything that does not have isOpenButton tag is the content of the modal.
+
+  No additional event handling required for open/close of the modal.
+  
+          
+*/
+
+@Component({
+  selector: 'lib-af-connect-modal',
+  templateUrl: './af-connect-modal.component.html',
+  styleUrls: ['./af-connect-modal.component.scss']
+})
+export class AfConnectModalComponent implements OnDestroy{
+  @Input() isOpen: boolean = false;
+  @Input() disableOutsideClickClose: boolean = false;
+  @Input() withCloseButton: boolean = true;
+  @Input() variant: 'standard' | 'error' | 'info' = 'standard';
+  @Input() header: string;
+  @Input() content: string;
+  @Input() width: number;
+  @Input() noScrollbarContentContainer: boolean;
+  @Input() reversedPadding: boolean; // sets inner-container to 0 padding, sets 24px to header-container
+  @Input() borderHighlight: boolean;
+  @Output() onClose = new EventEmitter<boolean>();
+  @ContentChildren(AfConnectButtonComponent, { descendants: true }) buttons: QueryList<AfConnectButtonComponent>;
+  @ContentChildren(AfConnectSvgButtonComponent, { descendants: true }) svgButton: QueryList<AfConnectSvgButtonComponent>;
+
+  constructor(elementRef: ElementRef) {
+    this.nativeElement = elementRef.nativeElement;
+  }
+
+  public ngAfterViewInit() {
+    this.svgButton.forEach((svgButton: AfConnectSvgButtonComponent) =>
+      svgButton.clickBtn.subscribe((emitValue: EmitValue) => {
+        if (!this.disableOutsideClickClose) {
+          this.closeFromModal(emitValue);
+        }
+      })
+    );
+    this.buttons.forEach((buttons: AfConnectButtonComponent) =>
+      buttons.clickBtn.subscribe((emitValue: EmitValue) => {
+        // if (!this.disableOutsideClickClose) {
+          this.closeFromModal(emitValue);
+        // }
+      })
+    );
+  }
+  public nativeElement: HTMLElement;
+
+  public toggleModal() {
+    this.isOpen = !this.isOpen;
+    this.onClose.emit(this.isOpen);
+  }
+
+  public externalClickClose(e: Event) {
+    if (!this.disableOutsideClickClose) {
+      const target = e.target as HTMLElement;
+      if (target.classList.contains('content-container') || target.classList.contains('background-container')) {
+        this.isOpen = false;
+        this.onClose.emit(this.isOpen);
+      }
+    }
+  }
+
+  public ngOnDestroy(): void {}
+
+  private closeFromModal(emitValue: EmitValue) {
+    if (emitValue === 'isCloseModal') {
+      this.isOpen = false;
+      this.onClose.emit(this.isOpen);
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<div [class]="[alignContent, 'no-content-container', height]">
+    <img class="svg" [src]="src" />
+    <div class="info-container">
+      <p class="no-content-title">{{ title }}</p>
+      <p class="no-content-message">{{ message }}</p>
+    </div>
+  </div>
+  

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

@@ -0,0 +1,94 @@
+@import '../../styles/breakpoints.scss';
+
+img {
+  background: none;
+  border: none;
+  width: 74px;
+  height: 55px;
+  padding: 1rem 1rem 1rem 0rem;
+}
+
+.center {
+  justify-content: center;
+}
+
+.left {
+  justify-content: start;
+}
+
+.no-content-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bright-apple-color-with-opacity);
+  border-radius: 15px;
+
+  @include media(tabletTreshold) {
+    justify-content: center;
+    text-align: start;
+  }
+
+  &.medium {
+    height: 15rem;
+  }
+
+  &.large {
+    height: 20rem;
+  }
+
+  &.xLarge {
+    height: 25rem;
+
+    @include media(mobileBreakPointTreshold) {
+      height: 27em;
+    }
+  }
+
+  &.fill {
+    height: 100%;
+  }
+}
+
+.info-container {
+  padding: 1rem 0rem 1rem 0rem;
+}
+
+.no-content-message {
+  font-size: var(--standard-font-size-16);
+  font-family: var(--standard-font-family-hero-new);
+  color: var(--secondary-black-color);
+
+  @include media(tabletTreshold) {
+    font-size: var(--standard-font-size-14);
+  }
+
+  @include media(mobileBreakPointTreshold) {
+    font-size: var(--standard-font-size-14);
+  }
+}
+
+.no-content-title {
+  font-size: var(--standard-font-size-18);
+  font-family: var(--standard-font-family-hero-new-semibold);
+  color: var(--secondary-black-color);
+
+  @include media(tabletTreshold) {
+    font-size: var(--standard-font-size-16);
+  }
+
+  @include media(mobileBreakPointTreshold) {
+    font-size: var(--standard-font-size-14);
+  }
+}
+
+.no-content-message,
+.no-content-title {
+  margin: 0;
+}
+
+:host(.full-width) {
+  position: relative;
+  width: 100%;
+  display: block;
+}

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

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

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

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-no-content',
+  templateUrl: './af-connect-no-content.component.html',
+  styleUrls: ['./af-connect-no-content.component.scss']
+})
+export class AfConnectNoContentComponent {
+  @Input() src: string;
+  @Input() title: string;
+  @Input() message: string;
+  @Input() alignContent: 'center' | 'left' = 'left';
+  @Input() height: 'small' | 'medium' | 'large' | 'xLarge' | 'fill' = 'small';
+
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1,11 @@
+<div [class]="['wrapper', variant]">
+    <div [class]="['svg-container', variant]">
+        <img [class]="['svg-overlay', variant]" src="/assets/icons/tool.svg" alt="">
+        <img [class]="['svg-background', variant]" src="/assets/icons/splash_background.svg" alt="">
+    </div>
+    
+    <div class="text-container">
+        <span>{{ data.categoryTitleToDisplay }}</span>
+        <div [innerHTML]="data.htmlContent"></div>
+    </div>
+</div>

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

@@ -0,0 +1,72 @@
+.wrapper {
+    display: flex;
+    gap: 1rem;
+    height: fit-content;
+    background-color: #FFF6EB;
+    border: 1px solid #F69521;
+    border-left: 5px solid #F69521;
+    border-radius: 5px;
+    box-sizing: border-box;
+    padding: 1rem;
+
+    &.wide {
+        z-index: 1;
+        position: relative;
+        border-radius: 0;
+    }
+
+    .text-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+
+        span {
+            font-family: 'Hero New Bold';
+            font-size: 16px;
+        }
+
+        div {
+            margin: 0;
+            font-size: 14px;
+        }
+    }
+}
+
+.svg-container {
+    position: relative;
+    
+    &.small {
+    }
+
+    &.wide {
+    }
+}
+  
+.svg-overlay {
+    position: absolute;
+
+    &.small {
+        width: 31px;
+        height: 25px;
+        left: 0.5rem;
+    }
+
+    &.wide {
+        width: 71px;
+        height: 58px;
+        top: 1rem;
+        left: 3rem;
+    }
+}
+
+.svg-background {
+    &.small {
+        width: 47px;
+        height: 24px;
+    }
+
+    &.wide {
+        width: 158px;
+        height: 85px;
+    }
+}

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

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

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

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { NotificationResponseList } from '../models/notification-response.model';
+
+@Component({
+  selector: 'lib-af-connect-notification',
+  templateUrl: './af-connect-notification.component.html',
+  styleUrls: ['./af-connect-notification.component.scss']
+})
+export class AfConnectNotificationComponent {
+  @Input() data: NotificationResponseList;
+  @Input() variant: 'small' | 'wide';
+}

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

@@ -0,0 +1,16 @@
+<div
+    class="holder"
+    (mousedown)="mousedown($event)"
+    (mouseleave)="mouseleave()"
+    (mouseup)="mouseup()"
+    (mousemove)="mousemove($event)"
+>
+    <ng-container *ngFor="let card of config || defaultConfig">
+        <af-connect-image-card
+            [src]="card.imageSrc"
+            [title]="card.title"
+            [content]="card.content"
+            [readMoreLink]="card.readMore"
+        ></af-connect-image-card>
+    </ng-container>
+</div>

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

@@ -0,0 +1,32 @@
+@import '../../styles/breakpoints.scss';
+
+:host {
+    display: flex;
+
+    @include media(mobileBreakPointTreshold) {
+        padding: 0;
+    }
+}
+
+.holder {
+    display: flex;
+    padding: 1rem 1.75rem;
+    flex-direction: row;
+    gap: 1.5rem;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+
+    &.active {
+        cursor: grabbing;
+        cursor: -webkit-grabbing;
+    }
+
+    @include media(mobileBreakPointTreshold) {
+        gap: 3rem;
+        padding: 0 1.25rem 0 3.25rem;
+    }
+}
+
+.holder::-webkit-scrollbar {
+    display: none; /* for Chrome, Safari, and Opera */
+}

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

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