vc-create-dashboard 2.9.5 → 2.9.7

package/src/lib/ui-kit/dashboard-footer/dashboard-footer/dashboard-footer.component.ts

@@ -0,0 +1,44 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DashboardFooterConfig } from '../dashboard-footer-config';
+
+@Component({
+  selector: 'app-dashboard-footer',
+  templateUrl: './dashboard-footer.component.html',
+  styleUrls: ['./dashboard-footer.component.less']
+})
+export class DashboardFooterComponent implements OnInit {
+  @Output() cancelEvent = new EventEmitter();
+  @Output() submitEvent = new EventEmitter();
+  @Output() deleteEvent = new EventEmitter();
+  @Input() footerDetails:DashboardFooterConfig={
+      selectedData : [],
+      nonRemovableList:[],
+      displayElementKey: '',
+      elementId: '',
+      singularText: '',
+      pluralText:'',
+      showFrequency:false,
+      frequencyText:'',
+      isDisabled :false
+
+  };
+
+  @Input() userButtonColor = '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  cancelFloatingBar() {
+    this.cancelEvent.emit();
+  }
+  submitFloatingBar() {
+    this.submitEvent.emit(this.footerDetails.selectedData);
+  }
+
+  deleteSelected(element: any) {
+    this.deleteEvent.emit(element);
+  }
+
+
+}

package/src/lib/ui-kit/dashboard-footer/dashboard-footer-config.ts

@@ -0,0 +1,11 @@
+export interface DashboardFooterConfig{
+    selectedData:any[],
+    displayElementKey:string,
+    elementId:string,
+    singularText:string,
+    pluralText:string,
+    showFrequency?:boolean,
+    frequencyText?:string,
+    isDisabled:boolean;
+    nonRemovableList:any[],
+}

package/src/lib/ui-kit/dashboard-footer/dashboard-footer.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DashboardFooterComponent } from './dashboard-footer/dashboard-footer.component';
+import { PopoverModule } from '../popover/popover.module';
+import { TooltipModule } from '../tooltip/tooltip.module'
+
+
+
+@NgModule({
+  declarations: [
+    DashboardFooterComponent
+  ],
+  imports: [
+    CommonModule,
+    PopoverModule,
+    TooltipModule
+  ],
+  exports:[
+    DashboardFooterComponent
+  ]
+})
+export class DashboardFooterModule { }

package/src/lib/ui-kit/dialog/dialog-config.ts

@@ -0,0 +1,6 @@
+export class DialogConfig<D = any> {
+  data?: D;
+  position?: any;
+  background?: any;
+  pointer?: any;
+}

package/src/lib/ui-kit/dialog/dialog-injector.ts

@@ -0,0 +1,18 @@
+import { Injector, Type, InjectionToken, InjectFlags } from '@angular/core';
+
+export class DialogInjector implements Injector {
+  constructor(
+    private parentDialogInjector: Injector,
+    private dialogAdditionalTokens: WeakMap<any, any>
+  ) {}
+
+  get<T>(token: Type<T> | InjectionToken<T>, notFoundValue?: T): T;
+  // get(token: any, notFoundValue?: any){return; }
+  get(token: any, notFoundValue?: any) {
+    const value = this.dialogAdditionalTokens.get(token);
+    if (value) {
+      return value;
+    }
+    return this.parentDialogInjector.get<any>(token, notFoundValue);
+  }
+}

package/src/lib/ui-kit/dialog/dialog-ref.ts

@@ -0,0 +1,12 @@
+import { Observable, Subject } from 'rxjs';
+
+export class DialogRef {
+  private readonly afterDialogClosed = new Subject<any>();
+  afterClosed: Observable<any> = this.afterDialogClosed.asObservable();
+  constructor() {}
+
+  close(result?: any) {
+    this.afterDialogClosed.next(result);
+    document.body.style.overflow = 'auto';
+  }
+}

package/src/lib/ui-kit/dialog/dialog.component.css

@@ -0,0 +1,89 @@
+.overlay {
+  display: flex;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  align-items: center;
+  justify-content: center;
+  z-index: 9;
+}
+.overlay.low {
+  z-index: 1;
+}
+.overlay.black {
+  background: rgba(0, 0, 0, 0.7);
+}
+.overlay.top {
+  align-items: flex-start;
+}
+.overlay.right {
+  justify-content: flex-end;
+}
+.overlay.bottom {
+  align-items: flex-end;
+}
+.overlay.left {
+  justify-content: flex-start;
+}
+.dialog {
+  position: relative;
+}
+.dialog.animate.top {
+  -webkit-animation: animate-top 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: animate-top 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+@-webkit-keyframes animate-top {
+  0% {
+    -webkit-transform: translateY(-100px);
+    transform: translateY(-100px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes animate-top {
+  0% {
+    -webkit-transform: translateY(-100px);
+    transform: translateY(-100px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+.dialog.animate.right {
+  -webkit-animation: animate-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: animate-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+@-webkit-keyframes animate-right {
+  0% {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes animate-right {
+  0% {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+.pointer-none {
+  pointer-events: none;
+}

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

@@ -0,0 +1,27 @@
+<div
+  class="overlay"
+  (click)="onOverlayClicked($event)"
+  [ngClass]="{
+    top: position === 'TOP',
+    right: position === 'RIGHT',
+    bottom: position === 'BOTTOM',
+    left: position === 'LEFT',
+    center: position === 'CENTER',
+    black: background === 'black'
+  }" [class.pointer-none]="pointer === 'none'"
+>
+  <div
+    class="dialog"
+    [class.animate]="animation"
+    (click)="onDialogClicked($event)"
+    [ngClass]="{
+      top: position === 'TOP',
+      right: position === 'RIGHT',
+      bottom: position === 'BOTTOM',
+      left: position === 'LEFT',
+      center: position === 'CENTER'
+    }"
+  >
+    <ng-template appInsertion></ng-template>
+  </div>
+</div>

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

@@ -0,0 +1,96 @@
+import { Component, Type, ComponentFactoryResolver, ViewChild, OnDestroy, ComponentRef, AfterViewInit, ChangeDetectorRef, OnInit } from '@angular/core';
+import { InsertionDirective } from './insertion.directive';
+import { Subject } from 'rxjs';
+import { DialogRef } from './dialog-ref';
+import { DialogConfig } from './dialog-config';
+import { NavigationEnd, NavigationError, NavigationStart, Router, ROUTER_CONFIGURATION } from '@angular/router';
+
+@Component({
+  selector: 'app-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.css'],
+})
+export class DialogComponent implements AfterViewInit, OnDestroy, OnInit {
+  componentRef!: ComponentRef<any>;
+  position: any;
+  background: any;
+  pointer: any;
+  @ViewChild(InsertionDirective, { static: true })
+  insertionPoint!: InsertionDirective;
+  animation = true;
+
+  private readonly onDialogClose = new Subject<any>();
+  public onClose = this.onDialogClose.asObservable();
+
+  childComponentType!: Type<any>;
+
+  constructor(
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private cd: ChangeDetectorRef,
+    private dialogRef: DialogRef,
+    public config: DialogConfig,
+    private router: Router
+  ) {
+    // this.componentRef = this.componentRef;
+    // this.animate =   this.animate;
+    // this.insertionPoint =  this.insertionPoint;
+    // this.childComponentType =  this.childComponentType;
+  }
+  ngOnInit() {
+    this.position = this.config.position;
+    this.background = this.config.background;
+    document.body.style.overflow = 'hidden';
+    setTimeout(() => {
+      this.animation = false;
+    }, 200);
+    this.routeAction();
+  }
+
+  routeAction() {
+    this.router.events.subscribe((event: any) => {
+      if (event instanceof NavigationStart) {
+        // Show loading indicator
+      }
+      if (event instanceof NavigationEnd) {
+        // Hide loading indicator
+        this.dialogRef.close();
+      }
+      if (event instanceof NavigationError) {
+        // Hide loading indicator
+        // Present error to user
+      }
+    });
+  }
+  ngAfterViewInit() {
+    this.loadChildComponent(this.childComponentType);
+    this.cd.detectChanges();
+  }
+
+  onOverlayClicked(evt: MouseEvent) {
+    // this.dialogRef.close();
+  }
+
+  onDialogClicked(evt: MouseEvent) {
+    evt.stopPropagation();
+  }
+
+  loadChildComponent(componentType: Type<any>) {
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+
+    const viewContainerRef = this.insertionPoint.viewContainerRef;
+    viewContainerRef.clear();
+
+    this.componentRef = viewContainerRef.createComponent(componentFactory);
+  }
+
+  ngOnDestroy() {
+    if (this.componentRef) {
+      this.componentRef.destroy();
+    }
+  }
+
+  close(data?: any) {
+    this.onDialogClose.next(data);
+    document.body.style.overflow = 'auto';
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DialogComponent } from './dialog.component';
+import { InsertionDirective } from './insertion.directive';
+import { DialogRef } from './dialog-ref';
+@NgModule({
+    imports: [CommonModule],
+    declarations: [DialogComponent, InsertionDirective],
+    providers: [DialogRef]
+})
+export class DialogModule {}

package/src/lib/ui-kit/dialog/dialog.service.ts

@@ -0,0 +1,57 @@
+import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Type, EmbeddedViewRef, ComponentRef } from '@angular/core';
+import { DialogModule } from './dialog.module';
+import { DialogComponent } from './dialog.component';
+import { DialogInjector } from './dialog-injector';
+import { DialogConfig } from './dialog-config';
+import { DialogRef } from './dialog-ref';
+
+@Injectable({
+  providedIn: DialogModule,
+})
+export class DialogService {
+  dialogComponentRef!: ComponentRef<DialogComponent>;
+
+  constructor(private componentFactoryResolver: ComponentFactoryResolver, private appRef: ApplicationRef, private injector: Injector) {}
+
+  public open(componentType: Type<any>, config: DialogConfig) {
+    const dialogRef = this.appendDialogComponentToBody(config);
+
+    this.dialogComponentRef.instance.childComponentType = componentType;
+
+    return dialogRef;
+  }
+
+  private appendDialogComponentToBody(config: DialogConfig) {
+    const map = new WeakMap();
+    map.set(DialogConfig, config);
+
+    const dialogRef = new DialogRef();
+    map.set(DialogRef, dialogRef);
+
+    const sub = dialogRef.afterClosed.subscribe(() => {
+      this.removeDialogComponentFromBody();
+      sub.unsubscribe();
+    });
+
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
+    const componentRef = componentFactory.create(new DialogInjector(this.injector, map));
+
+    this.appRef.attachView(componentRef.hostView);
+
+    const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+    document.body.appendChild(domElem);
+
+    this.dialogComponentRef = componentRef;
+
+    this.dialogComponentRef.instance.onClose.subscribe(() => {
+      this.removeDialogComponentFromBody();
+    });
+
+    return dialogRef;
+  }
+
+  private removeDialogComponentFromBody() {
+    this.appRef.detachView(this.dialogComponentRef.hostView);
+    this.dialogComponentRef.destroy();
+  }
+}

package/src/lib/ui-kit/dialog/insertion.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[appInsertion]',
+})
+export class InsertionDirective {
+  constructor(public viewContainerRef: ViewContainerRef) {}
+}

package/src/lib/ui-kit/floating-bar/floating-bar.component.html

@@ -0,0 +1,42 @@
+<div class="lib-floating-bar-container">
+    <div class="lib-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3">
+        <div class="left vx-d-flex vx-align-center" *ngIf="text && !frequencyMessage && !singleCategory">
+            <span class="value">This audit plan needs to be <strong>reviewed</strong> within 2 days after it has been completed.</span>
+        </div>
+        <div class="left vx-d-flex vx-align-center" *ngIf="frequencyMessage && !text">
+            <span class="value" [innerHTML]="frequencyMessage"></span>
+        </div>
+        <div class="left vx-d-flex vx-align-center" *ngIf="singleCategory && !frequencyMessage && !text">
+            <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2">
+                <span class="chipName vx-fs-11 vx-label-txt" [arTooltip]="singleCategory" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{singleCategory}}</span>
+            </div>
+        </div>
+        <div class="left vx-d-flex vx-align-center" *ngIf="!singleCategory && !text && !frequencyMessage">
+            <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2" *ngIf="selectedData.length">
+                <i class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1" (click)="deleteSelected(selectedData[0])">&#xe9ae;</i>
+                <span class="chipName vx-fs-11 vx-label-txt" [arTooltip]="selectedData[0]?.title" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{selectedData[0]?.title}}</span>
+                <button class="countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4" appPopover (click)="countPopup.popover()" placement="left" *ngIf="selectedData?.length > 1">+{{selectedData?.length - 1}}</button>
+            </div>
+            
+            <span class="vx-fs-12 vx-paragraph-txt" *ngIf="(selectedData?.length - 1) === 1">Widget Selected</span>
+            <span class="vx-fs-12 vx-paragraph-txt" *ngIf="(selectedData?.length - 1) > 1">Widgets Selected</span>
+
+            <app-popover #countPopup [dontCloseonClick]="true">
+                <div class="lib-floating-bar-action-list">
+                    <ul class="action-item">
+                        <li *ngFor="let data of selectedData | slice: 1; let j = index">
+                            <div class="avatar-card">
+                                <span class="value" [arTooltip]="data?.title" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false"><i class="icons cross-icon vx-mr-2" (click)="deleteSelected(data)">&#xe90d;</i>{{data?.title}}</span>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </app-popover>
+        </div>
+        <div class="right vx-d-flex vx-align-center">
+            <button class="cancel-btn" (click)="cancelFloatingBar()">Cancel</button>
+            <!-- <button class="vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase" (click)="submitFloatingBar()">Update</button> -->
+            <button class="save-btn" (click)="submitFloatingBar()">Save</button>
+        </div>
+    </div>
+</div>