vc-create-dashboard 3.0.67 → 3.0.68

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

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

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

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

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

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

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

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

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

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

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

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