vc-create-dashboard 2.9.5 → 2.9.7

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/create-dashboard'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/create-dashboard",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,31 +1,11 @@
-{
-  "name": "vc-create-dashboard",
-  "version": "2.9.5",
-  "peerDependencies": {
-    "@angular/common": "^12.1.0",
-    "@angular/core": "^12.1.0"
-  },
-  "dependencies": {
-    "tslib": "^2.2.0"
-  },
-  "module": "fesm2015/create-dashboard.mjs",
-  "es2020": "fesm2020/create-dashboard.mjs",
-  "esm2020": "esm2020/create-dashboard.mjs",
-  "fesm2020": "fesm2020/create-dashboard.mjs",
-  "fesm2015": "fesm2015/create-dashboard.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/create-dashboard.mjs",
-      "es2020": "./fesm2020/create-dashboard.mjs",
-      "es2015": "./fesm2015/create-dashboard.mjs",
-      "node": "./fesm2015/create-dashboard.mjs",
-      "default": "./fesm2020/create-dashboard.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "vc-create-dashboard",
+  "version": "2.9.7",
+  "peerDependencies": {
+    "@angular/common": " 12.x || 13.x || 14.x || 15.x || 16.x || 17.x || 18.x || 19.x ",
+    "@angular/core": " 12.x || 13.x || 14.x || 15.x || 16.x || 17.x || 18.x || 19.x "
+  },
+  "dependencies": {
+    "tslib": "^2.2.0"
+  }
+}

package/src/lib/categoryList.ts

@@ -0,0 +1,23 @@
+export interface CategoryList {
+    [key: string]: any;
+    strategic: {
+        name: string,
+        data: any[],
+        isActive?: boolean,
+    };
+    operational: {
+        name: string,
+        data: any[],
+        isActive?: boolean,
+    };
+    compliance: {
+        name: string,
+        data: any[],
+        isActive?: boolean,
+    };
+    others: {
+        name: string,
+        data: any[],
+        isActive?: boolean,
+    };
+}

package/src/lib/configurations.ts

@@ -0,0 +1,8 @@
+export class Configurations {
+  public envConfig: any;
+
+  constructor() {
+    this.envConfig = {};
+  }
+
+}

package/src/lib/create-dashboard-container/categories/categories-config.ts

@@ -0,0 +1,18 @@
+export interface CategoriesConfig{
+    regulations:{
+        list:[],
+        selectedList :any [];
+    }
+    standards:{
+        list:[],
+        selectedList :any [];
+    }
+    internalControls:{
+        list:[],
+        selectedList :any [];
+    }
+    others:{
+        list:[],
+        selectedList :any  [];
+    }
+}

package/src/lib/create-dashboard-container/categories/categories.component.html

@@ -0,0 +1,84 @@
+<div class="category-list" [class.animate-slideInRight]="animation">
+    <div class="category-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4">
+        <span class="vx-fs-14 vx-fw-500 vx-label-txt">Select Program(s)</span>
+    </div>
+    <div class="category-list-mid">
+      <div class="vx-d-flex vx-mb-2">
+        <div class="category-list-card" [class.active]="activeTab == 'regulations'" (click)="activeTab = 'regulations'">
+          <div class="left">
+            <label>REGULATIONS</label>
+            <p *ngIf="categoryList?.regulations?.selectedList?.length != 0">
+              {{categoryList?.regulations?.selectedList?.length}}
+              {{(categoryList?.regulations?.selectedList?.length==1)?'Program':'Programs'}} selected
+            </p>
+          </div>
+          <span class="counter">{{categoryList?.regulations?.list?.length}}</span>
+        </div>
+        <div class="category-list-card" [class.active]="activeTab == 'standards'" (click)="activeTab = 'standards'">
+          <div class="left">
+            <label>STANDARDS</label>
+            <p *ngIf="categoryList?.standards?.selectedList?.length != 0">
+              {{categoryList?.standards?.selectedList?.length}}
+              {{(categoryList?.standards?.selectedList?.length==1)?'Program':'Programs'}} selected
+            </p>
+          </div>
+          <span class="counter">{{categoryList?.standards?.list?.length}}</span>
+        </div>
+        <div class="category-list-card" [class.active]="activeTab == 'internalControls'" (click)="activeTab = 'internalControls'">
+          <div class="left">
+            <label>INTERNAL CONTROLS</label>
+            <p *ngIf="categoryList?.internalControls?.selectedList?.length != 0">
+              {{categoryList?.internalControls?.selectedList?.length}}
+              {{(categoryList?.internalControls?.selectedList?.length==1)?'Program':'programs'}} selected
+            </p>
+          </div>
+          <span class="counter">{{categoryList?.internalControls?.list?.length}}</span>
+        </div>
+        <div class="category-list-card" [class.active]="activeTab == 'others'" (click)="activeTab = 'others'">
+          <div class="left">
+            <label>OTHERS</label>
+            <p *ngIf="categoryList?.others?.selectedList?.length != 0">
+              {{categoryList?.others?.selectedList?.length}}
+              {{(categoryList?.others?.selectedList?.length==1)?'Program':'Programs'}} selected
+            </p>
+          </div>
+          <span class="counter">{{categoryList?.others?.list?.length}}</span>
+        </div>
+      </div>
+        
+      <div class="category-list-search vx-mb-2">
+        <i class="icons">&#xe90b;</i>
+        <input type="text" [(ngModel)]="search" placeholder="Search Program" />
+      </div>
+
+      <ng-container *ngIf="(categoryList[activeTab].list | filter: search) as searchList">
+        <div class="select-all" *ngIf="searchList.length > 1">
+          <app-cs-checkbox [ngValue]="checkSelectAll(activeTab)" (ngValueChange)="selectAll($event,activeTab)">
+            <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>
+          </app-cs-checkbox>
+        </div>
+        <div class="category-list-item vx-mb-4" [class.with-selectAll]="searchList.length > 1" *ngIf="searchList.length > 0">
+          <ul class="category-list-item-ul vx-m-0 vx-p-0">
+            <li class="vx-mb-4" *ngFor="let category of searchList" >
+              <app-cs-checkbox [ngValue]="selectedIds.includes(category[categoryIdKey])"
+              (ngValueChange)="selectCategory($event,activeTab,category)">
+                <ul class="categories">
+                  <li *ngFor="let entity of category.category_name; let j = index" [arTooltip]="entity" placement="bottom-left" delay="0">{{entity}}</li>
+                </ul>
+              </app-cs-checkbox>
+            </li>
+          </ul>
+        </div>
+
+        <app-no-data  *ngIf="searchList.length == 0" [noDataImage]="'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'" [noDataText]="'No data to display'">
+        </app-no-data>
+      </ng-container>
+
+      <app-dashboard-footer 
+      [footerDetails] ="footerDetails"
+      (cancelEvent)="close()"
+      (deleteEvent) ="deleteEvent($event)"
+      (submitEvent)="save()"
+      ></app-dashboard-footer>
+    </div>
+</div>

package/src/lib/create-dashboard-container/categories/categories.component.less

@@ -0,0 +1,252 @@
+@import url("https://cdn.v-comply.com/design-system/css/icons/icons.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/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/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");
+
+
+::ng-deep .category-list {
+    background: #FFFFFF;
+    border-right: 1px solid #F1F1F1;
+    position: fixed;
+    top: 0;
+    right: 500px;
+    bottom: 0;
+    left: 0;
+
+    &-head {
+      background: #fbfbfb;
+      height: 2.75rem;
+      border-bottom: 1px solid #f1f1f1;
+    }
+
+    &-card {
+        box-shadow: 0 0 2px #00000029;
+        border-radius  : 2px;
+        height         : 56px;
+        padding        : 12px;
+        width          : 100%;
+        display        : flex;
+        align-items    : center;
+        justify-content: space-between;
+        cursor         : pointer;
+        position: relative;
+
+        .left {
+            display       : flex;
+            flex-wrap     : wrap;
+            pointer-events: none;
+
+            label {
+                color         : #747576;
+                font-size     : 11px;
+                font-weight   : 600;
+                line-height   : 16px;
+                text-transform: uppercase;
+                width         : 100%;
+            }
+
+            p {
+                color      : #161b2f;
+                font-size  : 11px;
+                font-weight: 600;
+                line-height: 16px;
+                margin     : 0;
+            }
+        }
+
+        span.counter {
+            display        : flex;
+            height         : 32px;
+            min-width      : 32px;
+            border-radius  : 2px;
+            background     : #042e7d;
+            color          : #fff;
+            font-size      : 11px;
+            font-weight: 500;
+            line-height    : 32px;
+            justify-content: center;
+            align-items    : center;
+            padding        : 0 4px;
+            pointer-events : none;
+        }
+
+        &.active {
+            box-shadow: 0px 3px 12px #1E5DD326;
+            z-index: 1;
+            pointer-events: none;
+
+            span.counter {
+                background     : #f1f1f1;
+                color          : #042E7D;
+            }
+        }
+
+        &+.category-list-card {
+            margin-left: 4px;
+        }
+    }
+
+    &-mid {
+        height: calc(100vh - 2.75rem);
+        padding: 2rem;
+        position: relative;
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .select-all {
+            display       : flex;
+            padding-bottom: 1rem;
+
+            app-cs-checkbox {
+                display: flex;
+
+                .checkbox-item {
+                    .value {
+                        max-width: unset !important;
+                        font-size: 12px !important;
+
+                        strong {
+                            font-weight: 600;
+                            color: #161b2f;
+                        }
+                    }
+                }
+            }
+        }
+
+        app-no-data {
+            .no-data-wrapper {
+                height: calc(100vh - 260px);
+            }
+        }
+    }
+
+    &-search {
+        position: relative;
+  
+        input {
+          height       : 2.75rem;
+          line-height  : 1.5rem;
+          padding      : .5rem 1rem .5rem 2.5rem;
+          outline      : none;
+          border       : 1px solid #7475763f;
+          border-radius: .25rem;
+          width        : 100%;
+          font-size    : 14px;
+          color        : #747576;
+  
+          &:focus {
+            border-color: #1e5dd3;
+          }
+        }
+  
+        i {
+          position: absolute;
+          left: 1rem;
+          top: 1rem;
+          pointer-events: none;
+          color: #f1f1f1;
+          font-size: 12px;
+        }
+    }
+
+    &-item {
+        list-style-type: none;
+        display        : block;
+        height     : calc(100vh - 288px);
+        overflow       : hidden;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &.with-selectAll {
+            height: calc(100vh - 320px);
+        }
+
+        ul.category-list-item-ul {
+            padding: 0;
+            margin: 0;
+
+            li {
+                list-style: none;
+
+                app-cs-radio,
+                app-cs-checkbox {
+                    display: flex;
+
+                    label {
+                        width: 100%;
+
+                        &.radio-item,
+                        &.checkbox-item {
+                            span.value {
+                                width          : auto;
+                                justify-content: flex-start;
+
+                                ul {
+                                    &.categories {
+                                        display        : flex;
+                                        max-width      : 100%;
+                                        padding        : 0;
+                                        margin         : 0;
+                                        justify-content: flex-start;
+                                        width          : auto;
+
+                                        li {
+                                            display      : block;
+                                            padding      : 0 16px 0 8px;
+                                            position     : relative;
+                                            white-space  : nowrap;
+                                            overflow     : hidden;
+                                            text-overflow: ellipsis;
+                                            font-size    : 12px;
+                                            color        : #747576;
+
+                                            &:after {
+                                                content  : ">";
+                                                position : absolute;
+                                                top      : 0;
+                                                right    : 0;
+                                                color    : #747576;
+                                                font-size: 12px;
+                                            }
+
+                                            &:last-of-type {
+                                                color: #34AA44;
+
+                                                &:after {
+                                                    display: none;
+                                                }
+                                            }
+
+                                            &:first-of-type {
+                                                padding-left: 0;
+                                                color       : #1E5DD3;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/src/lib/create-dashboard-container/categories/categories.component.spec.ts

@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FilterPipe } from '../pipes/filter.pipe';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { DashboardFooterModule } from '../../ui-kit/dashboard-footer/dashboard-footer.module';
+import { FloatingBarModule } from '../../ui-kit/floating-bar/floating-bar.module';
+import { SelectModule } from '../../ui-kit/select/select.module';
+import { TooltipModule } from '../../ui-kit/tooltip/tooltip.module';
+import { CategoriesComponent } from './categories.component';
+
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+
+describe('CategoriesComponent', () => {
+  let component: CategoriesComponent;
+  let fixture: ComponentFixture<CategoriesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CategoriesComponent,FilterPipe ],
+      imports:[
+        CommonModule,
+        FormsModule,
+        TooltipModule,
+        SelectModule,
+        DashboardFooterModule,
+        FloatingBarModule,
+        HttpClientTestingModule
+      ],
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CategoriesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});