af-connect-components 0.0.26 → 0.0.28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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