vc-create-dashboard 3.0.82 → 3.0.84

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

@@ -0,0 +1,61 @@
+<div class="create-frequency" [class.animate-slideInRight]="animation">
+    <div class="create-frequency-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mb-4">
+        <div class="vx-fs-14 vx-fw-500 vx-label-txt">Select a Frequency</div>
+    </div>
+    <div class="create-frequency-body vx-pl-4 vx-pr-4">
+        <div class="create-frequency-body-inner">
+            <div class="create-frequency-tab" [ngSwitch]="frequencyTab">
+                <div class="create-frequency-tab-head">
+                    <ul class="navigation">
+                        <li><button [class.active]="frequencyTab == 'weekly'" (click)="changeTab('weekly')">Weekly</button></li>
+                        <li><button [class.active]="frequencyTab == 'monthly'" (click)="changeTab('monthly')">Monthly</button></li>
+                        <li><button [class.active]="frequencyTab == 'quarterly'" (click)="changeTab('quarterly')">Quarterly</button></li>
+                    </ul>
+                </div>
+                <div class="create-frequency-tab-body vx-pl-4 vx-pr-4">
+                    <div class="vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1">Email Reminder Frequency:</div>
+                    <div class="checkbox-list" *ngSwitchCase="'weekly'">
+                        <div class="frequency-checkbox vx-d-flex vx-align-center">
+                            <div class="frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center" *ngFor="let day of dayNames; let dayIndex = index">
+                                <app-cs-checkbox (ngValueChange)="daySelectionChange($event, dayIndex)" [ngValue]="selectedDays.includes(dayIndex)">{{day}}</app-cs-checkbox>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="checkbox-list month" *ngSwitchCase="'monthly'">
+                        <div class="frequency-top vx-d-flex vx-align-center">
+                            <div class="vx-fs-13 vx-paragraph-txt">Day</div>
+                            <input type="number" (focusout)="checkDateValidity(monthlyDate,'monthly')" [(ngModel)]="monthlyDate" class="countNum" onkeydown="return event.keyCode !== 190" min="1" oninput="this.value = Math.abs(this.value)">
+                            <div class="vx-fs-13 vx-paragraph-txt">of</div>
+                        </div>
+                        <div class="frequency-checkbox vx-d-flex vx-align-center vx-flex-wrap">
+                            <div class="frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center" *ngFor="let month of monthNames; let monthIndex = index">
+                                <app-cs-checkbox (ngValueChange)="monthSelectionChange($event, monthIndex)" [ngValue]="selectedMonths.includes(monthIndex)">{{month}}</app-cs-checkbox>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="checkbox-list" *ngSwitchCase="'quarterly'">
+                        <ng-container *ngIf="showRadio">
+                            <div class="frequency-top vx-d-flex vx-align-center">
+                                <div class="vx-fs-13 vx-paragraph-txt">Day</div>
+                                <input type="number" (focusout)="checkDateValidity(quarterlyDate,'quarterly')" [(ngModel)]="quarterlyDate" class="countNum" onkeydown="return event.keyCode !== 190" min="1" oninput="this.value = Math.abs(this.value)">
+                                <div class="vx-fs-13 vx-paragraph-txt">of</div>
+                            </div>
+                            <div class="frequency-checkbox vx-d-flex vx-align-center">
+                                <div class="frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center vx-w-100" *ngFor="let quarter of quarters, let quarterIndex = index">
+                                    <app-cs-radio (checkedEvent)="quarterSelectionChange($event, quarterIndex)" [checked]="selectedQuarter === quarterIndex">{{quarter}}</app-cs-radio>
+                                </div>
+                            </div>
+                        </ng-container>                    
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="create-frequency-footer">
+        <app-dashboard-footer 
+        [footerDetails]="footerDetails"
+        (cancelEvent)="closeFrequencyPopup.emit()"
+        (submitEvent)="submitFrequency()"
+        ></app-dashboard-footer>
+    </div>
+</div>

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

@@ -0,0 +1,183 @@
+@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 .create-frequency {
+    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;
+    }
+
+    &-body {
+        height: calc(100vh - 9.75rem);
+        margin: 0 auto 1rem;
+        overflow: hidden;
+        overflow-y: auto;
+        width: calc(100% - 2.5rem);
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &-inner {
+            width: 54.5rem;
+            margin: 0 auto;
+
+            @media screen and (min-width: 1366px) {
+                width: auto;
+            }
+        }
+    }
+
+    &-tab {
+        &-head {
+            border: none!important;
+            border-bottom: 1px solid #f1f1f1!important;
+            margin-bottom: 1.5rem;
+
+            ul {
+                padding: 0;
+                margin : 0;
+
+                &.navigation {
+                    display      : flex;
+
+                    li {
+                        list-style     : none;
+                        padding        : 0;
+                        margin: 0 1.5rem 0 0;
+                        display        : flex;
+                        justify-content: center;
+
+                        button {
+                            background    : transparent;
+                            border-radius: 0;
+                            border        : none;
+                            border-bottom: 0.125rem solid transparent;
+                            font-size     : 11px;
+                            font-weight   : 500;
+                            color         : #747576;
+                            line-height   : 1.5rem;
+                            position      : relative;
+                            text-transform: uppercase;
+                            cursor        : pointer;
+                            padding       : 0;
+
+                            &.active {
+                                color: #1e5dd3;
+                                border-color: #1e5dd3;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &-body {
+            .checkbox-list {
+                border-radius: .25rem;
+                border: 1px solid #f1f1f1;
+
+                .frequency {
+                    &-top {
+                        padding      : 12px;
+                        border-bottom: 1px solid #F1F1F1;
+
+                        input.countNum {
+                            -webkit-appearance: textfield;
+                            -moz-appearance   : textfield;
+                            border: none;
+                            border-bottom: 1px solid #DBDBDB;
+                            color: #161b2f;
+                            display: inline-block;
+                            font-size: 13px;
+                            text-align: center;
+                            width: 2.75rem;
+                            padding: 0.125rem;
+                            margin: 0 0.5rem;
+                            outline: none;
+                        }
+                    }
+
+                    &-checkbox {
+                        background: #fff;
+                        border-radius: .25rem;
+
+                        &-item {
+                            border-right: 1px solid #f1f1f1;
+                            height: 2.75rem;
+
+                            @media screen and (max-width: 1280px) {
+                                padding: 0 .5rem !important;
+                            }
+
+                            &:last-of-type {
+                                border-right: none;
+                            }
+                        }
+                    }
+                }
+
+                app-cs-checkbox,
+                app-cs-radio {
+                    display: flex;
+
+                    label {
+                        span.value {
+                            font-size  : 12px !important;
+                            color      : #161b2f  !important;
+                            font-weight: 400 !important;
+                        }
+                    }
+                }
+
+                &.month {
+                    .frequency-checkbox {
+                        &-item {
+                            width  : calc(100% / 6);
+
+                            &:first-of-type,
+                            &:nth-child(2),
+                            &:nth-child(3),
+                            &:nth-child(4),
+                            &:nth-child(5),
+                            &:nth-child(6) {
+                                border-bottom: 1px solid #f1f1f1;
+                            }
+
+                            &:nth-child(6) {
+                                border-right: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &-footer {
+        padding: 0 2rem;
+    }
+}

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

@@ -0,0 +1,120 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FrequencyComponent } from './frequency.component';
+
+describe('FrequencyComponent', () => {
+  let component: FrequencyComponent;
+  let fixture: ComponentFixture<FrequencyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FrequencyComponent ],
+      imports: []
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FrequencyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('frequency tab should be weekly by default', () => {
+    expect(component.frequencyTab).toEqual('weekly');
+  })
+
+  it('on init, tab should be updated to the saved tab', () => {
+    component.savedFrequencyTab = 'monthly';
+    component.savedFrequencies = ['January', 'February'];
+    component.ngOnInit();
+    expect(component.frequencyTab).toEqual('monthly');
+    //expect(component.selectedMonths).toEqual([0,2]);
+  })
+
+  it('should output the correct weekly string', () => {
+    component.frequencyTab = 'weekly';
+    component.selectedDays = [1,0,4,2];
+    let selectedFreq : any;
+    component.saveFrequency.pipe().subscribe((obj: any) => selectedFreq = obj);
+
+    component.submitFrequency();
+
+    expect(selectedFreq).toBeTruthy();
+    expect(selectedFreq.frequencyString).toEqual('Every Monday, Tuesday, Wednesday, Friday');
+    expect(selectedFreq.frequencyType).toEqual('weekly');
+    //expect(selectedFreq.frequencies).toEqual([0,1,2,4]);
+  })
+
+  it('day selection change should updated selectedDays', () => {
+    component.selectedDays = [];
+
+    component.daySelectionChange(true, 2);
+    component.daySelectionChange(true, 5);
+
+    expect(component.selectedDays.includes(2)).toBeTrue();
+    expect(component.selectedDays.includes(5)).toBeTrue();
+
+    component.daySelectionChange(false, 2);
+    expect(component.selectedDays.includes(2)).toBeFalse();
+  });
+
+  it('should set Default Values', () => {
+    component.setToDefaultValues();
+    expect(component.selectedDays).toEqual([0]);
+    expect(component.selectedMonths).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
+    expect(component.selectedQuarter).toEqual(0);
+  });
+
+  it('is frequency change Tab working for weekly', () => {
+    component.changeTab('weekly');
+    expect(component.frequencyTab).toEqual('weekly');
+    component.savedFrequencies = [0]
+    component.savedFrequencyTab = 'weekly';
+    expect(component.savedFrequencies).toEqual(component.selectedDays);
+  });
+
+  it('is frequency change Tab working for months', () => {
+    component.changeTab('monthly');
+    expect(component.frequencyTab).toEqual('monthly');
+    component.savedFrequencies = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+    component.savedFrequencyTab = 'monthly';
+    expect(component.savedFrequencies).toEqual(component.selectedMonths);
+  });
+
+  it('is frequency change Tab working for quarterly', () => {
+    component.changeTab('quarterly');
+    expect(component.frequencyTab).toEqual('quarterly');
+    component.savedFrequencies = 0;
+    component.savedFrequencyTab = 'quarterly';
+    expect(component.savedFrequencies).toEqual(component.selectedQuarter);
+  });
+
+  it('month Selection Change for true', () => {
+    component.monthSelectionChange(true, 5);
+    component.monthSelectionChange(true, 8);
+    expect(component.selectedMonths).toContain(5);
+    expect(component.selectedMonths).toContain(8);
+  });
+
+  it('month Selection Change for false', () => {
+    component.monthSelectionChange(false, 2);
+    component.monthSelectionChange(false, 6);
+    expect(component.selectedMonths).not.toContain(2);
+    expect(component.selectedMonths).not.toContain(6);
+  });
+
+  it('quarter Selection Change', () => {
+    component.quarterSelectionChange(true, 2);
+    expect(component.selectedQuarter).toEqual(2);
+  });
+
+  it('quarter Selection Change', () => {
+    component.quarterSelectionChange(true, 0);
+    expect(component.selectedQuarter).toEqual(0);
+  });
+});

package/src/lib/create-dashboard-container/frequency/frequency.component.ts

@@ -0,0 +1,303 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { DashboardFooterConfig } from '../../ui-kit/dashboard-footer/dashboard-footer-config';
+import { SnackBarService } from '../../ui-kit/snack-bar/snack-bar.service';
+
+
+@Component({
+  selector: 'app-frequency',
+  templateUrl: './frequency.component.html',
+  styleUrls: ['./frequency.component.less']
+})
+export class FrequencyComponent implements OnInit,OnChanges {
+  animation = true;
+  @Input() savedFrequencyTab: string | undefined;
+  monthlyDate = 1;
+  quarterlyDate = 1;
+  @Input() savedFrequencies: any;
+  @Input() selectedDate: any;
+  frequencyTab = 'weekly';
+  showFrequency = true;
+  dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+  monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  quarters = ['January, April, July, October', 'February, May, August, November', 'March, June, September, December'];
+  selectedDays: any[] = [0];
+  selectedMonths: any[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+  selectedQuarter = 0;
+  @Output() closeFrequencyPopup = new EventEmitter<string>();
+  @Output() saveFrequency = new EventEmitter<any>();
+  footerDetails: DashboardFooterConfig = {
+    selectedData: [],
+    nonRemovableList:[],
+    displayElementKey: '',
+    elementId: '',
+    singularText: '',
+    pluralText: '',
+    showFrequency: true,
+    frequencyText: 'You have selected a <strong>' + this.frequencyTab + '</strong> frequency.',
+    isDisabled: false
+
+  };
+  showRadio = true;
+  constructor(private snackBar:SnackBarService) { }
+  ngOnChanges(){
+    this.savedFrequencies = [...new Set(this.savedFrequencies)]
+  }
+
+  ngOnInit(): void {
+    this.animation = true;
+    setTimeout(() => {
+      this.animation = false;
+    }, 300);
+    if (this.savedFrequencyTab) {
+      this.changeTab(this.savedFrequencyTab);
+    }
+    if (this.selectedDate) {
+      switch (this.savedFrequencyTab) {
+        case 'weekly':
+         this.selectedDays = [...new Set(this.savedFrequencies)]
+          break;
+        case 'monthly':
+         this.monthlyDate = this.selectedDate;
+         this.selectedMonths = [...new Set(this.savedFrequencies)]
+
+          break;
+        case 'quarterly':
+          this.showRadio = false;
+          setTimeout(() => {
+            this.showRadio = true
+          }, 100);
+          this.quarterlyDate = this.selectedDate
+          this.selectedQuarter = this.savedFrequencies;
+
+          break;
+
+      }
+    }
+
+  }
+  closeFrequency() {
+    this.closeFrequencyPopup.emit();
+  }
+  daySelectionChange(event: any, index: any) {
+    if (event) { //checkbox was selected
+      this.selectedDays.push(index);
+    } else {
+      let unselectedElementIndex = this.selectedDays.indexOf(index);
+      this.selectedDays.splice(unselectedElementIndex, 1);
+    }
+    this.checkFrequencyValidity();
+  }
+  monthSelectionChange(event: any, index: any) {
+    if (event) {
+      this.selectedMonths.push(index);
+    } else {
+      let unselectedElementIndex = this.selectedMonths.indexOf(index);
+      this.selectedMonths.splice(unselectedElementIndex, 1);
+    }
+    this.checkDateValidity(this.monthlyDate,'monthly')
+    this.checkFrequencyValidity();
+  }
+
+  quarterSelectionChange(event: any, index: any) {
+    this.selectedQuarter = index;
+    this.checkDateValidity(this.quarterlyDate,'quarterly');
+    this.checkFrequencyValidity();
+  }
+
+  changeTab(tabValue: string) {
+    this.frequencyTab = tabValue;
+    this.footerDetails.frequencyText = 'You have selected a <strong>' + this.frequencyTab + '</strong> frequency.';
+    this.footerDetails.isDisabled = false;
+    this.setToDefaultValues()
+    if (this.frequencyTab === this.savedFrequencyTab) {
+      switch (this.frequencyTab) {
+        case 'weekly': {
+          this.selectedDays = [...this.savedFrequencies];
+          this.monthlyDate = 1;
+          this.quarterlyDate = 1;
+          break;
+        }
+        case 'monthly': {
+          this.selectedMonths = [...this.savedFrequencies];
+          this.monthlyDate = this.selectedDate;
+          this.quarterlyDate = 1;
+          this.checkDateValidity(this.monthlyDate,'monthly')
+          break;
+        }
+        case 'quarterly': {
+          this.selectedQuarter = this.savedFrequencies;
+          this.quarterlyDate = this.selectedDate;
+          this.monthlyDate = 1;
+          this.checkDateValidity(this.quarterlyDate,'quarterly')
+          break;
+        }
+      }
+    }
+  }
+
+  setToDefaultValues() {
+    this.selectedDays = [0];
+    this.selectedMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+    this.selectedQuarter = 0;
+  }
+
+  submitFrequency() {
+    let stringVal = "Every ";
+    let frequencies;
+    let selectedDate = 1;
+    switch (this.frequencyTab) {
+      case 'weekly': {
+        if (this.selectedDays.length > 0) {
+          this.selectedDays.sort();
+          frequencies = this.selectedDays;
+          this.selectedDays.forEach((dayIndex, index) => {
+            stringVal += index === 0 ? this.dayNames[dayIndex] : ', ' + this.dayNames[dayIndex];
+          })
+        } else {
+          // nothing was selected
+          this.closeFrequency();
+        }
+        break;
+      }
+      case 'monthly': {
+        stringVal = " of every ";
+        if (this.selectedMonths.length > 0) {
+          frequencies = this.selectedMonths;
+          this.monthNames.forEach((monthNames: string, monthIndex: number) => {
+            if (this.selectedMonths.includes(monthIndex)) {
+              stringVal += monthIndex  === 0 ? monthNames : ', ' + monthNames;
+
+            }
+          })
+          let monthDateName;
+          if (this.monthlyDate == 1) {
+            monthDateName = '1st'
+          }
+          else if (this.monthlyDate == 2) {
+            monthDateName = '2nd'
+          }
+          else if (this.monthlyDate == 3) {
+            monthDateName = '3rd'
+          }
+          else {
+            monthDateName = this.monthlyDate + 'th'
+          }
+          stringVal = monthDateName + stringVal;
+          selectedDate = this.monthlyDate;
+        } else {
+          // nothing was selected
+          this.closeFrequency();
+        }
+        break;
+      }
+      case 'quarterly': {
+        stringVal = " of every ";
+
+        if (this.selectedQuarter >= 0) {
+          frequencies = this.selectedQuarter;
+          stringVal += this.quarters[this.selectedQuarter];
+          selectedDate = this.quarterlyDate;
+          let monthDateName;
+          if (this.quarterlyDate == 1) {
+            monthDateName = '1st'
+          }
+          else if (this.quarterlyDate == 2) {
+            monthDateName = '2nd'
+          }
+          else if (this.quarterlyDate == 3) {
+            monthDateName = '3rd'
+          }
+          else {
+            monthDateName = this.quarterlyDate + 'th'
+          }
+          stringVal = monthDateName + stringVal;
+          selectedDate = this.quarterlyDate;
+        } else {
+          // nothing was selected
+          this.closeFrequency();
+        }
+        break;
+      }
+    }
+    this.saveFrequency.emit({
+      frequencyString: stringVal,
+      frequencyType: this.frequencyTab,
+      frequencies: frequencies,
+      selectedDate
+    })
+  }
+  
+  checkDateValidity(date:number, type:string){
+    if(date>31 || date<1){
+      this.snackBar.show('Select valid date.','alert');
+      this.footerDetails.isDisabled = true;
+     return
+    }else{
+      this.footerDetails.isDisabled = false;
+    }
+   const  monthList=[{name:'January',maxDays:31,value:0},{name:'February',maxDays:28,value:1},{name:'March',maxDays:31,value:2},
+   {name:'April',maxDays:30,value:3},{name:'May',maxDays:31,value:4},{name:'June',maxDays:30,value:5},
+   {name:'July',maxDays:31,value:6},{name:'August',maxDays:31,value:7},{name:'September',maxDays:30,value:8},
+   {name:'October',maxDays:31,value:9},{name:'November',maxDays:30,value:10},{name:'December',maxDays:31,value:11}]
+  switch (type) {
+    case 'monthly':
+      if(this.selectedMonths.length==1){
+        const index = monthList.findIndex((ele:any)=>ele.value==this.selectedMonths[0]);
+        if(date<=monthList[index].maxDays){
+          this.footerDetails.isDisabled = false;
+           
+        }else{
+          this.snackBar.show('Select valid date.','alert');
+          this.footerDetails.isDisabled = true; 
+        }
+      }else if(this.selectedMonths.length==0){
+        this.footerDetails.isDisabled = true; 
+      }else{
+        this.footerDetails.isDisabled = false;
+      }
+
+      break;
+      default:
+        this.footerDetails.isDisabled = false;
+        return true;
+        break;
+
+  }
+
+}
+
+checkFrequencyValidity(){
+  switch (this.frequencyTab) {
+    case 'weekly': {
+      if (this.selectedDays.length > 0) {
+        this.footerDetails.isDisabled = false;
+
+      } else {
+        this.footerDetails.isDisabled = true;
+      }
+      break;
+    }
+    case 'monthly': {
+   
+        if (this.selectedMonths.length > 0) {
+          this.footerDetails.isDisabled = false;
+  
+        } else {
+          this.footerDetails.isDisabled = true;
+        }
+      break;
+    }
+    case 'quarterly': {
+
+      if (this.selectedQuarter >= 0){
+          this.footerDetails.isDisabled = false;
+  
+        } else {
+          this.footerDetails.isDisabled = true;
+        }
+      break;
+    }
+  } 
+}
+
+}

package/{lib/create-dashboard-container/interfaces/widget-data-model.d.ts → src/lib/create-dashboard-container/interfaces/widget-data-model.ts}

@@ -1,8 +1,8 @@
-export interface widgetDataModel {
-    title: string;
-    id?: string;
-    description?: string;
-    widgetImage?: string;
-    value: number;
-    subWidgets: [];
-}
+export interface widgetDataModel {
+    title: string;
+    id?: string;
+    description?: string;
+    widgetImage?: string;
+    value: number;
+    subWidgets: [];
+}