vc-create-dashboard 2.9.5 → 2.9.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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