vc-create-dashboard 2.9.7 → 2.9.8

package/src/lib/ui-kit/multi-select/multi-select.service.ts

@@ -1,10 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class MultiSelectService {
-
-  constructor() { }
-  public overflowHidden = false;
-}

package/src/lib/ui-kit/no-data/no-data.component.html

@@ -1,14 +0,0 @@
-<div class="no-data-wrapper">
-    <div class="no-data-container">
-        <img [src]="noDataImage" [alt]="altText" class="image" />
-        <p class="text" [innerHTML]="noDataText" *ngIf="noDataText"></p>
-        <div class="button-row" *ngFor="let button of action">
-                <button *ngIf="!button?.buttonIcon" (click)="actionEmitter(button)" [innerHTML]="button?.buttonText"
-                    [class.small]="smallButton"></button>
-                <button *ngIf="button?.buttonIcon" (click)="actionEmitter(button)" [class.small]="smallButton">
-                    <i class="icons" [innerHTML]="button?.buttonIcon"></i> <span
-                        [innerHTML]="button?.buttonText"></span>
-                </button>
-        </div>
-    </div>
-</div>

package/src/lib/ui-kit/no-data/no-data.component.less

@@ -1,87 +0,0 @@
-@import url('https://cdn.v-comply.com/design-system/css/mixin/mixin.css');
-@import url('https://cdn.v-comply.com/design-system/css/icons/icons.css');
-@import url('https://cdn.v-comply.com/design-system/css/color/color.css');
-@import url('https://cdn.v-comply.com/design-system/css/text/text.css');
-@import url('https://cdn.v-comply.com/design-system/css/display/display.css');
-@import url('https://cdn.v-comply.com/design-system/css/alignment/alignment.css');
-
-::ng-deep .no-data {
-  &-wrapper {
-    display        : flex;
-    align-items    : center;
-    justify-content: center;
-    height         : 100%;
-    width          : 100%;
-    background     : #ffffff;
-    border-radius  : 2px;
-  }
-
-  &-container {
-    display   : inline-block;
-    text-align: center;
-    width     : 450px;
-
-    .image {
-      width        : 300px;
-      margin-bottom: 20px;
-      display      : inline-block;
-    }
-
-    p.text {
-      font-size    : 17px;
-      font-weight  : 400;
-      line-height  : 24px;
-      margin-bottom: 25px;
-      color        : #161b2f;
-      text-align   : center;
-      margin-top   : 0;
-
-      strong {
-        font-weight: 500;
-      }
-    }
-
-    button {
-      width          : auto;
-      height         : 38px;
-      border-radius  : 2px;
-      display        : flex;
-      align-items    : center;
-      justify-content: center;
-      color          : #ffffff;
-      font-size      : 12px;
-      font-weight    : 500;
-      line-height    : 24px;
-      cursor         : pointer;
-      background     : #1e5dd3;
-      border         : 1px solid #1e5dd3;
-      outline        : none;
-      text-transform : uppercase;
-      padding        : 0 16px;
-
-      &+button {
-        margin-left: 5px;
-      }
-
-      i+span {
-        margin-left: 12px;
-      }
-
-      &.small {
-        width    : 60px;
-        height   : 24px;
-        font-size: 11px;
-
-        i {
-          margin-right: 5px;
-          font-size   : 9px;
-        }
-      }
-    }
-
-    .button-row {
-      display        : flex;
-      justify-content: center;
-    }
-  }
-}

package/src/lib/ui-kit/no-data/no-data.component.ts

@@ -1,26 +0,0 @@
-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'app-no-data',
-  templateUrl: './no-data.component.html',
-  styleUrls: ['./no-data.component.less'],
-})
-export class NoDataComponent implements OnInit {
-  @Input() action!: any;
-  @Input() noDataImage!: string;
-  @Input() noDataText = '';
-  @Input() noDataButton!: string | boolean;
-  @Input() noDataSecButton!: string | boolean;
-  @Input() altText!: string;
-  @Output() buttonAction = new EventEmitter<object>();
-  @Input() smallButton!: boolean;
-  @Input() buttonIcon!: any;
-  @Input() iconClass!: any;
-  constructor() { }
-
-  ngOnInit(): void { }
-
-  actionEmitter(button: object) {
-    this.buttonAction.emit(button);
-  }
-}

package/src/lib/ui-kit/no-data/no-data.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NoDataComponent } from './no-data.component';
-
-@NgModule({
-  declarations: [NoDataComponent],
-  imports: [CommonModule],
-  exports: [NoDataComponent],
-})
-export class NoDataModule {}

package/src/lib/ui-kit/pagination/pagination.component.html

@@ -1,11 +0,0 @@
-<div class="pagination-box">
-    <ul>
-        <li><button [class.disabled]="currentPage==1" (click)="changePage('prev',0,'')"><i class="icons vx-fs-10">&#xe96b;</i></button></li>
-        <li *ngFor="let page of paginationArray">
-            <button [disabled]="page=='...'" [class.disable]="page=='...'" [class.active]="currentPage==page" (click)="changePage('',page,'')">
-                <i *ngIf="page=='...'" class="icons">&#xe911;</i>{{page!='...'?page : ''}}
-            </button>
-        </li>
-        <li><button [class.disabled]="currentPage==totalCount" (click)="changePage('',0,'next')"><i class="icons vx-fs-10">&#xe970;</i></button></li>
-    </ul>
-</div>

package/src/lib/ui-kit/pagination/pagination.component.less

@@ -1,72 +0,0 @@
-@import url('https://cdn.v-comply.com/design-system/css/color/color.css');
-@import url('https://cdn.v-comply.com/design-system/css/icons/icons.css');
-
-.pagination-box {
-    margin-bottom: 12px;
-
-    ul {
-        display    : flex;
-        align-items: center;
-        padding    : 0;
-        margin     : 0;
-
-        li {
-            list-style: none;
-            display   : flex;
-  
-            & + li {
-              margin-left: 4px;
-            }
-
-            &:first-child {
-                margin-right: 4px;
-                height      : 24px;
-
-                button {
-                    color    : #1E5DD3;
-                    font-size: 17px;
-                }
-            }
-
-            &:last-child {
-                margin-left: 8px !important;
-                height     : 24px;
-
-                button {
-                    color    : #1E5DD3;
-                    font-size: 17px;
-                }
-            }
-
-            button {
-                border         : 1px solid #dbdbdb;
-                background     : #FFFFFF;
-                border-radius  : 2px;
-                color          : #161B2F;
-                font-weight    : 400;
-                height         : 24px;
-                min-width      : 24px;
-                padding        : 0 5px;
-                display        : inline-flex;
-                justify-content: center;
-                align-items    : center;
-                outline        : none;
-                cursor         : pointer;
-                margin-left    : 4px;
-                font-size      : 11px;
-                margin: 0;
-
-                &.active, &:hover {
-                    border-color: #1E5DD3;
-                    color       : #1E5DD3;
-                }
-                &.disabled {
-                    filter: grayscale(100%);
-                    pointer-events: none;
-                    background: #F1F1F1;
-                    color: #bcbcbc!important;
-                }
-            }
-        }
-    }
-}

package/src/lib/ui-kit/pagination/pagination.component.spec.ts

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

package/src/lib/ui-kit/pagination/pagination.component.ts

@@ -1,138 +0,0 @@
-import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
-import { PaginationService } from '../../create-dashboard-container/services/pagination.service';
-
-@Component({
-  selector: 'app-pagination',
-  templateUrl: './pagination.component.html',
-  styleUrls: ['./pagination.component.less']
-})
-/**
- * Adds place holder for Pagination on the lists
- */
-export class PaginationComponent implements OnInit, OnChanges {
-  start = 1;
-  totalCount!: number;
-  paginationArray: any[] = [];
-  currentPage!: number;
-  @Input() totalPages = 1;
-  @Input() limit = 1;
-  @Input() totalList = 1;
-  @Output() paginationFilter = new EventEmitter();
-
-  constructor(private paginationService: PaginationService) {
-  }
-  ngOnChanges() {
-    this.currentPage = Number(this.paginationService.currentPage);
-    this.start = Number(this.paginationService.currentPage);
-    this.rebuildPagination(this.currentPage, this.totalPages);
-  }
-
-  ngOnInit() {
-    this.currentPage = Number(this.paginationService.currentPage);
-    this.start = Number(this.paginationService.currentPage);
-    this.rebuildPagination(this.currentPage, this.totalPages);
-    this.paginationService.currentValues.subscribe(event => {
-      if (event && (this.paginationService.currentPage !== this.currentPage)) {
-        this.currentPage = this.paginationService.currentPage;
-      }
-    });
-  }
-
-  /* In this function we will recreate the pagination structure as per current page and
-   total number of pages */
-
-  rebuildPagination(currentPage: number, totalCount: number) {
-    this.paginationArray = [];
-    this.totalCount = totalCount;
-    this.currentPage = currentPage;
-    if (this.paginationService.currentPage !== this.currentPage) {
-      this.paginationService.currentPage = this.currentPage;
-      this.paginationFilter.emit(true);
-    }
-
-    // If there are only 6 pages or less in total, just display all pages without "..."
-    if (totalCount <= 6) {
-      for (let i = 1; i <= totalCount; i++) {
-        this.paginationArray.push(i);
-      }
-    }
-    // ELSE display with ...
-    else {
-
-      // Always print first page button
-      this.paginationArray.push(1);
-
-      // Print "..." if currentPage is > 3
-      if (currentPage > 3) {
-        // this.paginationArray.push(2);
-        this.paginationArray.push('...');
-
-      }
-      // special case where last page is selected...
-      // Without this special case, only 2 buttons would be shown after ... if you were on last page
-      if (currentPage === totalCount) {
-        this.paginationArray.push(currentPage - 2);
-      }
-
-      // Print previous number button if currentPage > 2
-      if (currentPage > 2) {
-        this.paginationArray.push(currentPage - 1);
-      }
-
-      // Print current page number button as long as it not the first or last page
-      if (currentPage !== 1 && currentPage !== totalCount) {
-        this.paginationArray.push(currentPage);
-
-      }
-
-      // print next page number button if currentPage < lastPage - 1
-      if (currentPage < totalCount - 1) {
-        this.paginationArray.push(currentPage + 1);
-
-      }
-
-      // special case where first page is selected...
-      // Without this special case, only 2 buttons would be shown before ... if you were on first page
-      if (currentPage === 1) {
-        this.paginationArray.push(currentPage + 2);
-
-      }
-
-      // print "..." if currentPage is < lastPage -2
-      if (currentPage < totalCount - 2) {
-        this.paginationArray.push('...');
-
-        // HTML += "...";
-      }
-
-      // Always print last page button if there is more than 1 page
-      if (totalCount > 1) {
-        this.paginationArray.push(totalCount);
-
-      }
-    }
-
-  }
-/* In this function we will set current page according to the action performed on browser
-   ex: prev next buttons clicks or selecting a particular page */
-
-  changePage(prev: string, page: number, next: string) {
-    if (prev) {
-      if (this.start > 1) {
-        this.start--;
-        // We have changed the start page, total rebuild the pagination
-        this.rebuildPagination(this.start, this.totalCount);
-      }
-    }
-    if (next) {
-      if (this.start < this.totalCount) {
-        this.start++;
-        this.rebuildPagination(this.start, this.totalCount);
-      }
-    }
-    if (page) {
-      this.start = page;
-      this.rebuildPagination(this.start, this.totalCount);
-    }
-  }
-}

package/src/lib/ui-kit/pagination/pagination.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PaginationComponent } from './pagination.component';
-
-@NgModule({
-  declarations: [PaginationComponent],
-  imports: [CommonModule],
-  exports: [PaginationComponent],
-})
-export class PaginationModule {}

package/src/lib/ui-kit/pipes/pipes.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TrimPipe } from './trim.pipe';
-import { safeHTMLPipe } from './safeHTML.pipe';
-@NgModule({
-  declarations: [TrimPipe, safeHTMLPipe],
-  imports: [CommonModule],
-  exports: [TrimPipe, safeHTMLPipe],
-})
-export class PipesModule {}

package/src/lib/ui-kit/pipes/safeHTML.pipe.ts

@@ -1,12 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Pipe({
-  name: 'safeHTML',
-})
-export class safeHTMLPipe implements PipeTransform {
-  constructor(private sanitized: DomSanitizer) {}
-  transform(value: string): any {
-    return this.sanitized.bypassSecurityTrustHtml(value);
-  }
-}

package/src/lib/ui-kit/pipes/trim.pipe.ts

@@ -1,10 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'trim',
-})
-export class TrimPipe implements PipeTransform {
-  transform(value: string): string {
-    return value.trim();
-  }
-}

package/src/lib/ui-kit/popover/popover.component.html

@@ -1,6 +0,0 @@
-<div class="popover-overlay" *ngIf="popoverContainer" (click)="closePopover('top');this.closedOnOverlay.emit();"></div>
-<div class="action" [class.active]="showPopover" *ngIf="popoverContainer" [style.top.px]="positionY" [style.left.px]="positionX" #popoverRatio id="popoverRatio">
-  <div (click)="closePopover(); clickedPopover()" #popoverContent>
-    <ng-content></ng-content>
-  </div>
-</div>

package/src/lib/ui-kit/popover/popover.component.less

@@ -1,20 +0,0 @@
-.action {
-  position: fixed;
-  z-index : 13;
-  display : inline-block;
-  opacity : 0;
-
-  &.active {
-    opacity: 1;
-  }
-}
-
-.popover-overlay {
-  z-index : 12;
-  cursor  : initial;
-  position: fixed;
-  top     : 0;
-  right   : 0;
-  bottom  : 0;
-  left    : 0;
-}

package/src/lib/ui-kit/popover/popover.component.ts

@@ -1,124 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { PopoverService } from './popover.service';
-
-@Component({
-  selector: 'app-popover',
-  templateUrl: './popover.component.html',
-  styleUrls: ['./popover.component.less'],
-})
-export class PopoverComponent implements OnInit {
-  @Input() dontCloseonClick = false;
-  popoverContainer = false;
-  @ViewChild('popoverRatio') popoverRatio!: ElementRef;
-  @ViewChild('popoverContent') popoverContent!: ElementRef;
-  @Output() closedOnOverlay = new EventEmitter();
-  constructor(public popoverService: PopoverService) {}
-  showPopover = false;
-  leftValue: any;
-  topValue: any;
-  popoverHeight: any;
-  popoverWidth: any;
-  positionX!: number;
-  positionY!: number;
-  ngOnInit(): void {}
-  popover() {
-    this.popoverContainer = false;
-    this.popoverContainer = true;
-    setTimeout(() => {
-      this.getPosition();
-      this.showPopover = true;
-      this.popoverService.stopScroll = true;
-      // document.body.style.overflow = 'hidden';
-    }, 10);
-    return false;
-  }
-  popoverEvent() {
-    this.popoverContainer = false;
-    this.popoverContainer = true;
-    setTimeout(() => {
-      // this.getPosition();
-      this.positionX = this.popoverService.positionX;
-      this.positionY = this.popoverService.positionY;
-      this.showPopover = true;
-      this.popoverService.stopScroll = true;
-
-    }, 10);
-    return false;
-  }
-  closePopover(top?: string) {
-    if (!this.dontCloseonClick || top === 'top') {
-      this.popoverContainer = false;
-      this.showPopover = false;
-      this.popoverService.stopScroll = false;
-      // document.body.style.overflow = 'auto';
-    }
-  }
-
-  close(){
-    this.popoverContainer = false;
-    this.showPopover = false;
-    this.popoverService.stopScroll = false;
-  }
-
-  clickedPopover() {
-    this.getPosition();
-  }
-  getPosition() {
-    // setTimeout(() => {
-    const elementPositionn = this.popoverService.elementPosition;
-    this.popoverHeight = this.popoverRatio.nativeElement.offsetHeight;
-    this.popoverWidth = this.popoverRatio.nativeElement.offsetWidth;
-    if (this.popoverService.elementDirection === 'left') {
-      this.leftValue = elementPositionn.left;
-      if (elementPositionn.top + elementPositionn.height + this.popoverHeight > window.outerHeight - 200) {
-        this.topValue = elementPositionn.top - this.popoverHeight;
-      } else {
-        this.topValue = elementPositionn.top + elementPositionn.height;
-      }
-    }
-    if (this.popoverService.elementDirection === 'right') {
-      this.leftValue = elementPositionn.left + elementPositionn.width - this.popoverWidth;
-      if (elementPositionn.top + elementPositionn.height + this.popoverHeight > window.outerHeight - 200) {
-        this.topValue = elementPositionn.top - this.popoverHeight;
-      } else {
-        this.topValue = elementPositionn.top + elementPositionn.height;
-      }
-    }
-    if (this.popoverService.elementDirection === 'top') {
-      this.leftValue = elementPositionn.left + elementPositionn.width;
-      if (elementPositionn.top + elementPositionn.height + this.popoverHeight > window.outerHeight - 200) {
-        this.topValue = elementPositionn.top - this.popoverHeight;
-      } else {
-        this.topValue = elementPositionn.top - this.popoverHeight;
-      }
-    }
-    if (this.popoverService.elementDirection === 'bottom') {
-      this.leftValue = elementPositionn.left + elementPositionn.width;
-      if (elementPositionn.top + elementPositionn.height + this.popoverHeight > window.outerHeight - 200) {
-        this.topValue = elementPositionn.top - this.popoverHeight;
-      } else {
-        this.topValue = elementPositionn.top + elementPositionn.height;
-      }
-    }
-    if (this.popoverService.elementDirection === 'self-position') {
-      this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverWidth / 2;
-      this.topValue = elementPositionn.top - 15;
-    }
-    if (this.popoverService.elementDirection === 'top-center') {
-      this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverWidth / 2;
-      // this.topValue = elementPositionn.top - this.popoverHeight;
-      if (elementPositionn.top + elementPositionn.height + this.popoverHeight > window.outerHeight) {
-        this.topValue = elementPositionn.top + elementPositionn.height;
-      } else {
-        this.topValue = elementPositionn.top - this.popoverHeight;
-      }
-    }
-    if (this.popoverService.elementDirection === 'center') {
-      this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverWidth / 2;
-      this.topValue = elementPositionn.top + elementPositionn.height;
-    }
-    this.positionX = this.leftValue;
-    this.positionY = this.topValue;
-    // }, 10);
-  }
-}

package/src/lib/ui-kit/popover/popover.directive.ts

@@ -1,72 +0,0 @@
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-import { PopoverService } from './popover.service';
-
-@Directive({
-  selector: '[appPopover]',
-})
-export class PopoverDirective {
-  dynamicComponent: any;
-  @Input() refrence: any;
-  @Input() placement!: string;
-  leftValue: any;
-  topValue: any;
-  constructor(private elRef: ElementRef, private popoverService: PopoverService) {}
-  @HostListener('click') click() {
-    this.popoverService.elementPosition = this.elRef.nativeElement.getBoundingClientRect();
-    this.popoverService.elementDirection = this.placement;
-    // this.getPosition();
-  }
-
-  getPosition() {
-    setTimeout(() => {
-      // this.popoverService.elementPosition = this.elRef.nativeElement.getBoundingClientRect();
-      const elementPositionn = this.elRef.nativeElement.getBoundingClientRect();
-      if (this.placement === 'left') {
-        this.leftValue = elementPositionn.left;
-        if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
-          this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-        } else {
-          this.topValue = elementPositionn.top + elementPositionn.height;
-        }
-      }
-      if (this.placement === 'right') {
-        this.leftValue = elementPositionn.left + elementPositionn.width - this.popoverService.popoverWidth;
-        if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
-          this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-        } else {
-          this.topValue = elementPositionn.top + elementPositionn.height;
-        }
-      }
-      if (this.placement === 'top') {
-        this.leftValue = elementPositionn.left + elementPositionn.width;
-        if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
-          this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-        } else {
-          this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-        }
-      }
-      if (this.placement === 'bottom') {
-        this.leftValue = elementPositionn.left + elementPositionn.width;
-        if (elementPositionn.top + elementPositionn.height + this.popoverService.popoverHeight > window.outerHeight - 200) {
-          this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-        } else {
-          this.topValue = elementPositionn.top + elementPositionn.height;
-        }
-      }
-      if (this.placement === 'self-position') {
-        this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverService.popoverWidth / 2;
-        this.topValue = elementPositionn.top - 15;
-      }
-      if (this.placement === 'top-center') {
-        this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverService.popoverWidth / 2;
-        this.topValue = elementPositionn.top - this.popoverService.popoverHeight;
-      }
-      if (this.placement === 'bottom-center') {
-        this.leftValue = elementPositionn.left + elementPositionn.width / 2 - this.popoverService.popoverWidth / 2;
-        this.topValue = elementPositionn.top + this.popoverService.popoverHeight;
-      }
-      this.popoverService.positionX = this.leftValue;
-      this.popoverService.positionY = this.topValue;
-    }, 10);
-  }
-}