vc-create-dashboard 2.9.5 → 2.9.7

package/src/lib/ui-kit/circle-progresss/circle/circle.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-circle-progress',
+  templateUrl: './circle.component.html',
+  styleUrls: ['./circle.component.less'],
+})
+export class CircleComponent implements OnInit {
+  @Input() progressColor!: string;
+  @Input() fillColor!: string;
+  @Input() value!: any;
+  @Input() isValueVisible!: boolean;
+  @Input() isPercentVisible!: boolean;
+  @Input() textColor!: string;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/ui-kit/circle-progresss/circle-progresss.module.ts

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

package/src/lib/ui-kit/click-outside/click-outside.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';
+
+@Directive({
+  selector: '[clickOutside]',
+})
+export class ClickOutsideDirective {
+  constructor(private elementRef: ElementRef) {}
+  @Output('clickOutside') clickOutside: EventEmitter<any> = new EventEmitter();
+
+  @HostListener('document:click', ['$event.target']) onMouseEnter(targetElement: any) {
+    const clickedInside = this.elementRef.nativeElement.contains(targetElement);
+    if (!clickedInside) {
+      this.clickOutside.emit(null);
+    }
+  }
+}

package/src/lib/ui-kit/click-outside/click-outside.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ClickOutsideDirective } from './click-outside.directive';
+
+
+
+@NgModule({
+  declarations: [ClickOutsideDirective],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    ClickOutsideDirective
+  ]
+})
+export class ClickOutsideModule { }

package/src/lib/ui-kit/color-palette/color-palette.component.html

@@ -0,0 +1,110 @@
+<ul class="color-palette">
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#34AA44" />
+      <span class="color-block" style="background: #34aa44">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#62AF3A" disabled />
+      <span class="color-block" style="background: #62af3a">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#7CB234" />
+      <span class="color-block" style="background: #7cb234">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#9BB62D" />
+      <span class="color-block" style="background: #9bb62d">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#BBB926" />
+      <span class="color-block" style="background: #bbb926">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#D6BC1F" />
+      <span class="color-block" style="background: #d6bc1f">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#F2BE19" />
+      <span class="color-block" style="background: #f2be19">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#EAA619" />
+      <span class="color-block" style="background: #eaa619">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#E28F19" />
+      <span class="color-block" style="background: #e28f19">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#D9721A" />
+      <span class="color-block" style="background: #d9721a">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#D63E1A" />
+      <span class="color-block" style="background: #d63e1a">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+  <li>
+    <label>
+      <input type="radio" name="colors" value="#C7381B" />
+      <span class="color-block" style="background: #c7381b">
+        <i class="risk-icons check">&#xe91a;</i>
+        <i class="risk-icons disabled">&#xe90d;</i>
+      </span>
+    </label>
+  </li>
+</ul>

package/src/lib/ui-kit/color-palette/color-palette.component.less

@@ -0,0 +1,54 @@
+ul.color {
+  &-palette {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 7px 5px;
+    border-radius: 4px;
+    li {
+      list-style: none;
+      padding: 0 2px;
+      label {
+        margin: 0;
+        display: block;
+        cursor: pointer;
+      }
+      input[type='radio'] {
+        opacity: 0;
+        position: absolute;
+        height: 0;
+        width: 0;
+        &:checked {
+          & + span {
+            i.check {
+              display: block;
+            }
+          }
+        }
+        &:disabled {
+          & + span {
+            i.disabled {
+              display: block;
+            }
+          }
+        }
+      }
+      span {
+        &.color-block {
+          height: 24px;
+          width: 24px;
+          border-radius: 2px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #ffffff;
+          i {
+            display: none;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/ui-kit/color-palette/color-palette.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-color-palette',
+  templateUrl: './color-palette.component.html',
+  styleUrls: ['./color-palette.component.less'],
+})
+export class ColorPaletteComponent implements OnInit {
+  colors: any;
+  constructor() {}
+
+  ngOnInit(): void {
+    this.colors = [
+      {
+        code: '#34AA44',
+        name: 'green',
+      },
+      {
+        code: '#62AF3A',
+        name: 'green1',
+      },
+      {
+        code: '#7CB234',
+        name: 'green2',
+      },
+    ];
+  }
+}

package/src/lib/ui-kit/color-palette/color-palette.module.ts

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

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

@@ -0,0 +1,37 @@
+<div class="dashboard-floating-bar-container">
+    <div class="dashboard-floating-bar vx-d-flex vx-align-center" [class.vx-justify-end]="!(footerDetails.showFrequency || footerDetails.selectedData.length>0)" [class.vx-justify-between]="footerDetails.showFrequency || footerDetails.selectedData.length>0">
+        <div class="left vx-d-flex vx-align-center" *ngIf="footerDetails.showFrequency">
+            <span class="value" [innerHTML]="footerDetails.frequencyText"></span>
+        </div>
+
+        <div class="left vx-d-flex vx-align-center" *ngIf="footerDetails.selectedData.length>0">
+            <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
+                <i class="icons cross vx-fs-12 vx-paragraph-txt vx-mr-1" *ngIf="!footerDetails.nonRemovableList.includes(footerDetails.selectedData[0][footerDetails.elementId])" (click)="deleteSelected(footerDetails.selectedData[0])">&#xe9ae;</i>
+                <span class="chipName vx-fs-11 vx-label-txt" [arTooltip]="footerDetails.selectedData[0][footerDetails.displayElementKey]" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{footerDetails.selectedData[0][footerDetails.displayElementKey]}}</span>
+                <button *ngIf="footerDetails.selectedData.length > 1" class="countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4" [ngClass]="userButtonColor" appPopover (click)="countPopup.popover()" placement="left">+{{footerDetails.selectedData.length - 1}}</button>
+            </div>
+            <ng-container *ngIf="footerDetails?.selectedData?.length>1">
+                <span class="value vx-ml-2" *ngIf="footerDetails?.selectedData?.slice(1).length === 1">{{footerDetails.singularText}}</span>
+                <span class="value vx-ml-2" *ngIf="footerDetails?.selectedData?.slice(1).length > 1">{{footerDetails.pluralText}}</span>
+            </ng-container>
+            <app-popover #countPopup [dontCloseonClick]="true">
+                <div class="dashboard-floating-bar-action-list">
+                    <ul class="action-item">
+                        <li *ngFor="let element of footerDetails.selectedData.slice(1); let j = index">
+                            <div class="avatar-card">
+                                <span class="value" [arTooltip]="element[footerDetails.displayElementKey]" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">
+                                    <i class="icons cross-icon" *ngIf="!footerDetails.nonRemovableList.includes(element[footerDetails.elementId])" (click)="deleteSelected(element)">&#xe90d;</i> {{element[footerDetails.displayElementKey]}}
+                                </span>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </app-popover>
+        </div>
+        <div class="right vx-d-flex vx-align-center">
+            <button class="cancel vx-bg-white vx-txt-red vx-fw-500 vx-tt-uppercase" (click)="cancelFloatingBar()">Cancel</button>
+            <!-- <button class="vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase" (click)="submitFloatingBar()">Update</button> -->
+            <button [class.disabled]="footerDetails.isDisabled" class="vx-bg-blue vx-txt-white vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-center" (click)="submitFloatingBar()">Next <i class="icons vx-ml-1">&#xe91e;</i></button>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,335 @@
+@import url('https://cdn.v-comply.com/design-system/css/icons/icons.css');
+@import url('https://cdn.v-comply.com/design-system/css/text/text.css');
+@import url('https://cdn.v-comply.com/design-system/css/color/color.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');
+@import url('https://cdn.v-comply.com/design-system/css/width/width.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-top.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-left.css');
+@import url('https://cdn.v-comply.com/design-system/css/margin/margin-right.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-top.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-left.css');
+@import url('https://cdn.v-comply.com/design-system/css/padding/padding-right.css');
+@import url('https://cdn.v-comply.com/design-system/css/button/button.css');
+
+::ng-deep .dashboard-floating-bar {
+    height: 48px;
+    border-radius: 4px;
+    box-shadow: 0 6px 12px #4681ef26;
+    border: 1px solid #f8f8f8;
+    padding: 8px 12px;
+    position: relative;
+    background: #FFFFFF;
+    width: 100%;
+
+    .left {
+        span {
+            &.select-item {
+                border-radius: 2px;
+                box-shadow   : 0px 2px 6px #4681ef20;
+
+                span {
+                    text-overflow: ellipsis;
+                    white-space  : nowrap;
+                    overflow     : hidden;
+                    display      : block;
+                    max-width    : 200px;
+                }
+
+                i {
+                    font-size: 6px;
+                    cursor   : pointer;
+                }
+            }
+
+            &.count {
+                min-width    : 24px;
+                height       : 24px;
+                border-radius: 2px;
+                cursor       : pointer;
+            }
+        }
+
+        .value {
+            color    : #747576;
+            font-size: 12px;
+
+            strong {
+                color      : #161b2f;
+                font-weight: 500;
+            }
+        }
+    }
+
+    .right {
+        button {
+            border-radius: 2px;
+            height: 24px;
+            background: #1e5dd3!important;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            color: #fff!important;
+            text-transform: uppercase;
+            font-size: 11px;
+            font-weight: 500;
+            border: none!important;
+            padding: 0 8px;
+            margin: 0 0 0 8px;
+
+            &.cancel {
+                background: transparent!important;
+                color: #eb2424!important;
+            }
+
+            &.disabled {
+                background: #F1F1F1!important;
+                color: #747576!important;
+                opacity: 1;
+                pointer-events: none;
+            }
+        }
+    }
+
+    &-action-list {
+        width: 220px;
+
+        ul {
+            padding          : 0;
+            margin           : 0;
+            -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+            animation        : scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+            background       : #ffffff;
+            box-shadow       : 0px 3px 6px #1c5bd140;
+            border-radius    : 4px;
+            max-height       : 220px;
+            overflow         : auto;
+
+            &.action-item {
+                display: block;
+
+                li {
+                    list-style     : none;
+                    border         : none;
+                    border-bottom  : 1px solid #f1f1f1;
+                    display        : block;
+                    width          : 100%;
+                    padding        : 0;
+                    background     : transparent;
+                    border-radius  : 0;
+                    margin         : 0;
+                    height         : auto;
+                    justify-content: flex-start;
+                    box-shadow     : none;
+
+                    button {
+                        color          : #6e717e;
+                        text-align     : left;
+                        text-decoration: none;
+                        cursor         : pointer;
+                        background     : transparent;
+                        font-size      : 12px;
+                        text-transform : capitalize;
+                        display        : flex;
+                        width          : 100%;
+                        padding        : 7.5px 11px;
+                        border         : none;
+
+                        i {
+                            font-size   : 17px;
+                            margin-right: 10px;
+                            color       : #1c5bd1;
+                        }
+
+                        &:hover {
+                            background: #f3f3f3;
+                        }
+                    }
+
+                    .avatar-card {
+                        display    : flex;
+                        align-items: center;
+                        width      : 100%;
+                        padding    : 7.5px;
+
+                        &.within-con {
+                            display: block;
+                        }
+
+                        .avatar {
+                            height         : 24px;
+                            width          : 24px !important;
+                            overflow       : hidden;
+                            background     : #4681ef;
+                            color          : #ffffff;
+                            font-size      : 10px;
+                            display        : inline-flex;
+                            margin-right   : 5px;
+                            border-radius  : 50%;
+                            align-items    : center;
+                            justify-content: center;
+                            text-transform : uppercase;
+
+                            img {
+                                width: 100%;
+                            }
+
+                            &+span.value {
+                                width: calc(100% - 29px);
+                            }
+                        }
+
+                        span {
+                            &.value {
+                                width             : 100%;
+                                color             : #6e717e;
+                                text-decoration   : none;
+                                // cursor         : pointer;
+                                background        : transparent;
+                                font-size         : 12px;
+                                text-transform    : capitalize;
+                                display           : block;
+                                font-weight       : 400;
+                                text-align-last   : left;
+                                white-space       : nowrap;
+                                overflow          : hidden;
+                                text-overflow     : ellipsis;
+                                line-height       : 20px;
+
+                                i {
+                                    font-size   : 8px;
+                                    color       : #1c5bd1;
+                                    cursor      : pointer;
+                                    margin-right: 4px;
+
+                                    &.cross-icon {
+                                        color: #747576;
+                                    }
+                                }
+                            }
+                        }
+
+                        &.no-image {
+                            display: block;
+
+                            span.value {
+                                width  : 100%;
+                                display: block;
+                            }
+                        }
+                    }
+
+                    .chip-item {
+                        color      : #1e5dd3;
+                        padding    : 10px;
+                        display    : flex;
+                        align-items: center;
+
+                        i {
+                            margin-right: 7px;
+                            font-size   : 10px;
+                            cursor      : pointer;
+                            display     : inline-flex;
+                        }
+
+                        span {
+                            display      : block;
+                            width        : auto;
+                            max-width    : calc(100% - 17px);
+                            font-size    : 12px;
+                            font-weight  : 500;
+                            white-space  : nowrap;
+                            overflow     : hidden;
+                            text-overflow: ellipsis;
+
+                            &.chip-block {
+                                display: block;
+                                width  : 100%;
+                            }
+
+                            &.id {
+                                font-size: 9px;
+                            }
+                        }
+                    }
+
+                    .within {
+                        display        : flex;
+                        align-items    : center;
+                        justify-content: flex-start;
+
+                        .block {
+                            background    : #f1f1f1;
+                            border-radius : 2px;
+                            padding       : 0 2px;
+                            line-height   : 14px;
+                            font-size     : 9px;
+                            font-weight   : 500;
+                            color         : #042e7d;
+                            margin-right  : 6px;
+                            display       : block;
+                            text-transform: uppercase;
+                        }
+
+                        .data {
+                            width        : 100%;
+                            display      : block;
+                            overflow     : hidden;
+                            text-overflow: ellipsis;
+                            white-space  : nowrap;
+                            color        : #747576;
+                            font-size    : 11px;
+                            font-weight  : 400;
+                            line-height  : 17px;
+                        }
+                    }
+
+                    &:first-child {
+                        animation: action-list-open 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+
+                    &:nth-child(2) {
+                        animation: action-list-open 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+
+                    &:nth-child(3) {
+                        animation: action-list-open 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+
+                    &:nth-child(4) {
+                        animation: action-list-open 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+
+                    &:nth-child(5) {
+                        animation: action-list-open 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+
+                    &:nth-child(6) {
+                        animation: action-list-open 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+
+                    &:nth-child(7) {
+                        animation: action-list-open 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+
+                    &:nth-child(8) {
+                        animation: action-list-open 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+
+                    &:nth-child(9) {
+                        animation: action-list-open 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+
+                    &:nth-child(10) {
+                        animation: action-list-open 1.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+                    }
+                }
+            }
+        }
+    }
+}

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

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