vc-create-dashboard 3.0.84 → 3.0.86

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

@@ -1,660 +0,0 @@
-<app-snack-bar></app-snack-bar>
-<div class="create-dashboard" *ngIf="!openConfigureWidgets">
-  <div class="create-dashboard-container vx-d-flex vx-justify-end" [class.animate-slideInRight]="animation">
-    <div class="more-option" *ngIf="activeSelector && activeSelector !== 'name'">
-      <app-user-list *ngIf="activeSelector === 'whoCanView'"
-        (saveSelectedUsers)="saveSelectedList('whoCanView', $event)" (closeUserList)="activateSelector('', false)"
-        [totalPages]="totalPages" [totalList]="totalList" [listDetails]="listDetails" [totalgroupscount]="totalgroups"
-        [feature]="feature"></app-user-list>
-      <app-responsibility-center *ngIf="activeSelector === 'rcList'"
-        [responsibilityCentersList]="responsibilityCentersList" [radioSelection]="false"
-        [selectedResponsibilityCenters]="
-          dashboardForm.selectedResponsibilityCenters
-        " [rcIdKey]="'item_id'" (saveSelectedList)="saveSelectedList('rc', $event)"
-        (closeRcList)="activateSelector('', false)">
-      </app-responsibility-center>
-      <!-- <app-categories *ngIf="activeSelector === 'responsibilityCategories'"
-        [categoryList]="responsibilityCategoriesTree" [allCategories]="allComplianceCategories"
-        [categoryIdKey]="'category_id'" [selectedCategories]="dashboardForm.selectedResponsibilityCategories"
-        (saveSelectedCategory)="
-          saveSelectedList('responsibilityCategories', $event)
-        " (closeCategoriesList)="activateSelector('', false)"></app-categories> -->
-      <app-list-container list *ngIf="activeSelector === 'responsibilityCategories'"
-        (close)="activateSelector('', false)">
-        <app-program-list body (itemsSelectedChange)="onProgramSelectionChange($event)"
-          [selectedItems]="selectedPrograms" [url]="programListUrl"></app-program-list>
-        <div class="vx-d-flex vx-align-center vx-justify-between vx-w-100" footer>
-          <div class="left-side vx-fs-12 vx-d-flex">
-            <ng-container *ngIf="allProgamSelected?.length > 0">
-              <button
-                class="selected-count-box vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4">
-                {{ allProgamSelected.length }}
-              </button>
-              <span class="selected-text">
-                Program
-                {{ allProgamSelected.length > 1 ? "Categories" : "Category" }}
-                Selected</span>
-            </ng-container>
-          </div>
-          <div class="right-side vx-d-flex">
-            <button class="cancelBtn" (click)="activateSelector('', false)">Cancel</button>
-            <button class="nextBtn" (click)="activateSelector('', false);">
-              Next <i class="icons">&#xe91e;</i>
-            </button>
-          </div>
-        </div>
-      </app-list-container>
-
-    </div>
-    <div class="vx-dialog-container side-dialog" [class.tablet-width]="activeSelector && activeSelector !== 'name'">
-      <app-loader-inline *ngIf="vLoader"></app-loader-inline>
-
-      <div class="form-group" [class.disabled]="disabled">
-        <div class="vx-dialog-body-container" (scroll)="animateImage()"
-          [class.hidden-scroll]="popoverService.stopScroll">
-          <!-- Dashboard Name -->
-          <div class="form-group-row" [class.disabled]="activeSelector && activeSelector !== 'name'">
-            <div class="image">
-              <img [ngSrc]="ASSETS.dashBoardIcon" *ngIf="
-                  !dashboardForm.dashboardName || activeSelector === 'name'
-                " alt="" width="36" height="36" />
-              <svg class="checkIcon" *ngIf="dashboardForm.dashboardName && activeSelector !== 'name'"
-                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-                <circle class="checkIcon__circle" cx="26" cy="26" r="25" fill="none" />
-                <path class="checkIcon__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
-              </svg>
-            </div>
-            <div class="form">
-              <div class="vx-form-group vx-d-block vx-mb-4">
-                <label
-                  class="vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4">Dashboard
-                  Name
-                  <span class="require vx-txt-red vx-fs-16 vx-fw-400">*</span></label>
-                <div class="vx-input-group">
-                  <input class="textField" placeholder="Add dashboard name (Max limit: 30 characters)."
-                    [(ngModel)]="dashboardForm.dashboardName" (keydown)="activeSelector = 'name'"
-                    (focusin)="activateSelector('name', true)" (focusout)="activateSelector('name', false)" />
-
-                  <span class="counter" *ngIf="dashboardForm?.dashboardName?.length > 0">{{ 30 -
-                    dashboardForm.dashboardName.length }}</span>
-                </div>
-
-                <p class="vx-txt-error" [appScrollInView]="true" *ngIf="
-                    submitted &&
-                    (dashboardForm?.dashboardName?.length > 30 ||
-                      !dashboardForm?.dashboardName)
-                  ">
-                  {{
-                  dashboardForm.dashboardName.length > 30
-                  ? "You have exceeded the maximum character limit of 30 characters."
-                  : "Please enter a name for this Dashboard."
-                  }}
-                </p>
-
-                <div class="vx-input-group vx-mt-2">
-                  <vcomply-editor [editorConfig]="dashboardDescription"
-                    [(ngModel)]="dashboardForm.dashboardDescriptionText"></vcomply-editor>
-                  <span class="counter" *ngIf="dashboardForm?.dashboardDescriptionText?.length > 0">{{
-                    250 -
-                    (dashboardForm?.dashboardDescriptionText | textCount)
-                    }}</span>
-                </div>
-
-                <p class="vx-txt-error" [appScrollInView]="true" *ngIf="
-                    submitted &&
-                    (dashboardForm?.dashboardDescriptionText | textCount) > 250
-                  ">
-                  You have exceeded the maximum character limit of 250
-                  characters.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Dashboard Display Criteria  -->
-          <span class="head-label vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-lh-4">
-            Dashboard Display Criteria
-          </span>
-          <app-information-block></app-information-block>
-
-          <!-- Who -->
-          <div class="form-group-row" [class.active]="activeSelector === 'whoCanView'" [class.disabled]="
-              activeSelector &&
-              activeSelector !== 'whoCanView' &&
-              activeSelector !== 'name'
-            ">
-            <div class="image">
-              <img [ngSrc]="ASSETS.dashBoardUsersIcon" *ngIf="
-                  dashboardForm?.selectedViewers?.length == 0 ||
-                  activeSelector === 'whoCanView'
-                " alt="" width="36" height="36" />
-              <svg class="checkIcon" *ngIf="
-                  dashboardForm?.selectedViewers?.length > 0 &&
-                  activeSelector !== 'whoCanView'
-                " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-                <circle class="checkIcon__circle" cx="26" cy="26" r="25" fill="none" />
-                <path class="checkIcon__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
-              </svg>
-            </div>
-            <div class="form">
-              <div class="vx-form-group vx-d-block vx-mb-4">
-                <label class="vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4">Who
-                  can view this dashboard?<span class="require vx-txt-red vx-fs-16 vx-fw-400">*</span></label>
-                <div *ngIf="dashboardForm?.selectedViewers?.length == 0"
-                  class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
-                  (click)="activateSelector('whoCanView', true)">
-                  <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
-                    Who can view this dashboard?
-                  </div>
-                </div>
-
-                <div *ngIf="dashboardForm?.selectedViewers?.length > 0"
-                  class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between">
-                  <ng-container *ngIf="!groupsEnabled" id="onlyuserslist">
-                    <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2" *ngFor="
-                        let user of dashboardForm?.selectedViewers?.slice(0, 1)
-                      ">
-                      <i class="icons cross vx-fs-12 vx-paragraph-txt vx-mr-1" *ngIf="
-                          !listDetails.nonRemovableUsersList.includes(
-                            user.member_id
-                          )
-                        " (click)="remove('whoCanView', user)">&#xe9ae;</i>
-                      <span class="chipName vx-fs-11 vx-label-txt" [arTooltip]="user.member_name"
-                        placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{ user.member_name
-                        }}</span>
-                      <button *ngIf="
-                          dashboardForm?.selectedViewers?.length > 1 &&
-                          !groupsEnabled
-                        "
-                        class="countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4"
-                        appPopover (click)="userList.popover()" placement="left">
-                        +{{ dashboardForm?.selectedViewers?.slice(1).length }}
-                      </button>
-                    </div>
-                    <app-popover #userList [dontCloseonClick]="true">
-                      <div class="action-list">
-                        <ul class="action-item">
-                          <li *ngFor="
-                              let user of dashboardForm?.selectedViewers
-                                | slice : 1;
-                              let j = index
-                            ">
-                            <div class="avatar-card">
-                              <span class="value" [arTooltip]="user?.member_name" placement="bottom-left" delay="0"
-                                type="black" [tooltipMandatory]="false">
-                                <i class="icons cross-icon" *ngIf="
-                                    !listDetails.nonRemovableUsersList.includes(
-                                      user.member_id
-                                    ) && !groupsEnabled
-                                  " (click)="remove('whoCanView', user)">&#xe90d;</i>
-                                {{ user?.member_name }}
-                              </span>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </app-popover>
-                  </ng-container>
-
-                  <div *ngIf="groupsEnabled" class="vx-d-flex vx-align-center">
-                    <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
-                      <span class="chipName vx-fs-11 vx-label-txt">USER(S)</span>
-                      <button
-                        class="countBtn greenBg vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4"
-                        appPopover (click)="userCount.popover()" placement="left">
-                        {{ dashboardForm?.selectedViewers?.length }}
-                      </button>
-                    </div>
-                    <span class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2" *ngIf="
-                        dashboardForm?.selectedGroup?.length &&
-                        dashboardForm?.selectedViewers?.length
-                      ">&</span>
-                    <div *ngIf="dashboardForm?.selectedGroup?.length" id="usersandgroups"
-                      class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
-                      <span class="chipName vx-fs-11 vx-label-txt">USER GROUP(S)</span>
-                      <button
-                        class="countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4"
-                        appPopover (click)="groupCount.popover()" placement="right">
-                        {{ dashboardForm?.selectedGroup?.length }}
-                      </button>
-                    </div>
-
-                    <app-popover #userCount [dontCloseonClick]="true">
-                      <div class="action-list">
-                        <ul class="action-item">
-                          <li *ngFor="let data of dashboardForm?.selectedViewers">
-                            <div class="avatar-card">
-                              <span class="value" [arTooltip]="data.member_name" placement="bottom-left" delay="0"
-                                type="black" [tooltipMandatory]="false">
-                                <i class="icons cross-icon" *ngIf="
-                                    !listDetails.nonRemovableUsersList.includes(
-                                      data.member_id
-                                    )
-                                  " (click)="remove('whoCanView', data)">&#xe90d;</i>
-                                {{ data.member_name }}
-                              </span>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </app-popover>
-
-                    <app-popover #groupCount [dontCloseonClick]="true">
-                      <div class="action-list">
-                        <ul class="action-item">
-                          <li *ngFor="let data of dashboardForm?.selectedGroup">
-                            <div class="avatar-card">
-                              <span class="value" [arTooltip]="data.group_name" placement="bottom-left" delay="0"
-                                type="black" [tooltipMandatory]="false">
-                                <i class="icons cross-icon" (click)="remove('whoCanViewGroup', data)">&#xe90d;</i>
-                                {{ data.group_name }}
-                              </span>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </app-popover>
-                  </div>
-
-                  <button *ngIf="activeSelector !== 'whoCanView'"
-                    class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
-                    (click)="activateSelector('whoCanView', true)">
-                    <i class="icons vx-mr-1">&#xe90c;</i> EDIT
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Responsibility Center -->
-          <div class="form-group-row" [class.active]="activeSelector === 'rcList'" [class.disabled]="
-              activeSelector &&
-              activeSelector !== 'rcList' &&
-              activeSelector !== 'name'
-            ">
-            <div class="image">
-              <img *ngIf="
-                  dashboardForm?.selectedResponsibilityCenters?.length == 0 ||
-                  activeSelector === 'rcList'
-                " [ngSrc]="ASSETS.dashBoardRcIcon" alt="" width="36" height="36" />
-              <svg *ngIf="
-                  dashboardForm?.selectedResponsibilityCenters?.length > 0 &&
-                  activeSelector !== 'rcList'
-                " class="checkIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-                <circle class="checkIcon__circle" cx="26" cy="26" r="25" fill="none" />
-                <path class="checkIcon__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
-              </svg>
-            </div>
-            <div class="form">
-              <div class="vx-form-group vx-d-block vx-mb-4">
-                <label
-                  class="vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4">RESPONSIBILITY
-                  CENTER(S)</label>
-                <div *ngIf="
-                    dashboardForm?.selectedResponsibilityCenters?.length == 0
-                  " class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
-                  (click)="activateSelector('rcList', true)" [class.error]="
-                    submitted &&
-                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&
-                    allProgamSelected?.length ==
-                      0 &&
-                    dashboardForm?.selectedRiskCategories?.length == 0
-                  ">
-                  <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
-                    Select the Responsibility Center(s) that you would like<br />displayed
-                    in the Dashboard, if any.
-                  </div>
-                </div>
-
-                <div *ngIf="
-                    dashboardForm?.selectedResponsibilityCenters?.length > 0
-                  " class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between">
-                  <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2" *ngFor="
-                      let rc of dashboardForm?.selectedResponsibilityCenters?.slice(
-                        0,
-                        1
-                      )
-                    ">
-                    <i class="icons cross vx-fs-12 vx-paragraph-txt vx-mr-1" (click)="remove('rc', rc)">&#xe9ae;</i>
-                    <span class="chipName vx-fs-11 vx-label-txt" [arTooltip]="rc.item_name" placement="bottom-left"
-                      delay="0" type="black" [tooltipMandatory]="false">{{ rc.item_name }}</span>
-                    <button *ngIf="
-                        dashboardForm?.selectedResponsibilityCenters?.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"
-                      appPopover (click)="rcList.popover()" placement="left">
-                      +{{
-                      dashboardForm?.selectedResponsibilityCenters?.slice(1)
-                      .length
-                      }}
-                    </button>
-
-                    <app-popover #rcList [dontCloseonClick]="true">
-                      <div class="action-list">
-                        <ul class="action-item">
-                          <li *ngFor="
-                              let rc of dashboardForm?.selectedResponsibilityCenters
-                                | slice : 1;
-                              let j = index
-                            ">
-                            <div class="avatar-card">
-                              <span class="value" [arTooltip]="rc?.item_name" placement="bottom-left" delay="0"
-                                type="black" [tooltipMandatory]="false">
-                                <i class="icons cross-icon" (click)="remove('rc', rc)">&#xe90d;</i>
-                                {{ rc?.item_name }}
-                              </span>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </app-popover>
-                  </div>
-
-                  <button *ngIf="activeSelector !== 'rcList'"
-                    class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
-                    (click)="activateSelector('rcList', true)">
-                    <i class="icons vx-mr-1">&#xe90c;</i> EDIT
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Program -->
-          <div class="form-group-row" [class.active]="activeSelector === 'responsibilityCategories'" [class.disabled]="
-              activeSelector &&
-              activeSelector !== 'responsibilityCategories' &&
-              activeSelector !== 'name'
-            ">
-            <div class="image">
-              <img *ngIf="
-                  allProgamSelected?.length ==
-                    0 || activeSelector === 'responsibilityCategories'
-                " [ngSrc]="ASSETS.dashBoardProgramIcon" alt="" width="36" height="36" />
-              <svg *ngIf="
-                  allProgamSelected?.length > 0 &&
-                  activeSelector !== 'responsibilityCategories'
-                " class="checkIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-                <circle class="checkIcon__circle" cx="26" cy="26" r="25" fill="none" />
-                <path class="checkIcon__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
-              </svg>
-            </div>
-            <div class="form">
-              <div class="vx-form-group vx-d-block vx-mb-4">
-                <label
-                  class="vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4">PROGRAM</label>
-                <div *ngIf="
-                    allProgamSelected?.length == 0
-                  " class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
-                  (click)="activateSelector('responsibilityCategories', true)" [class.error]="
-                    submitted &&
-                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&
-                    allProgamSelected?.length ==
-                      0 &&
-                    dashboardForm?.selectedRiskCategories?.length == 0
-                  ">
-                  <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
-                    Select the Program(s) that you would like displayed in
-                    the<br />Dashboard, if any.
-                  </div>
-                </div>
-
-                <div *ngIf="
-                    allProgamSelected?.length > 0
-                  " class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between">
-                  <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2" *ngFor="
-                      let rCategory of allProgamSelected?.slice(
-                        0,
-                        1
-                      )
-                    ">
-                    <i class="icons cross vx-fs-12 vx-paragraph-txt vx-mr-1"
-                      (click)="remove('responsibilityCategories', rCategory)">&#xe9ae;</i>
-                    <span class="chipName vx-fs-11 vx-label-txt" [arTooltip]="rCategory.item_name"
-                      placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{ rCategory.name
-                      }}</span>
-                    <button *ngIf="
-                        allProgamSelected
-                          ?.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"
-                      appPopover (click)="rCategoryList.popover()" placement="left">
-                      +{{
-                      allProgamSelected?.slice(
-                      1
-                      ).length
-                      }}
-                    </button>
-
-                    <app-popover #rCategoryList [dontCloseonClick]="true">
-                      <div class="action-list">
-                        <ul class="action-item">
-                          <li *ngFor="
-                              let rCategory of allProgamSelected
-                                | slice : 1;
-                              let j = index
-                            ">
-                            <div class="avatar-card">
-                              <span class="value" [arTooltip]="rCategory?.name" placement="bottom-left" delay="0"
-                                type="black" [tooltipMandatory]="false">
-                                <i class="icons cross-icon" (click)="
-                                    remove(
-                                      'responsibilityCategories',
-                                      rCategory
-                                    )
-                                  ">&#xe90d;</i>
-                                {{ rCategory?.name }}
-                              </span>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </app-popover>
-                  </div>
-
-                  <button *ngIf="activeSelector !== 'responsibilityCategories'"
-                    class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
-                    (click)="activateSelector('responsibilityCategories', true)">
-                    <i class="icons vx-mr-1">&#xe90c;</i> EDIT
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-
-          <!-- Timeframe -->
-          <div class="form-group-row" [class.disabled]="activeSelector && activeSelector !== 'name'">
-            <div class="image">
-              <img *ngIf="
-                  !dashboardForm?.selectedFromDate ||
-                  !dashboardForm?.selectedToDate
-                " [ngSrc]="ASSETS.dashBoardTimeFrameIcon" alt="" width="36" height="36" />
-              <svg *ngIf="
-                  dashboardForm?.selectedFromDate &&
-                  dashboardForm?.selectedToDate
-                " class="checkIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-                <circle class="checkIcon__circle" cx="26" cy="26" r="25" fill="none" />
-                <path class="checkIcon__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
-              </svg>
-            </div>
-            <div class="form">
-              <div class="vx-form-group vx-d-block vx-mb-4">
-                <label
-                  class="vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4">TIMEFRAME</label>
-                <label class="vx-control-panel-sub-label">Select how long the selected information should be displayed.
-                  Once the selected timeframe expires, the dashboard will automatically be deactivated and no longer
-                  displayed to users. If no timeframe is selected, the information
-                  will be displayed permanently.</label>
-                <div class="input-group vx-d-flex vx-justify-between">
-                  <div class="date-select">
-                    <i class="icons">&#xe92d;</i>
-                    <input type="text" id="from_date" [value]="
-                        dashboardForm?.selectedFromDate | date : 'dd MMM yyyy'
-                      " [placeholder]="'From'" (click)="openFromDatePicker()" readonly />
-                    <dp-date-picker #fromDatePicker [(ngModel)]="dashboardForm.selectedFromDate"
-                      placeholder="Select Date" (onSelect)="
-                        closeFromDatePicker(); datePickerOverlay = false
-                      " [config]="fromDatePickerConfig"></dp-date-picker>
-                    <div class="overlay" (click)="closeFromDatePicker()" *ngIf="datePickerOverlay"></div>
-                  </div>
-                  <div class="date-select" *ngIf="!hideToDate" [class.disabled]="!dashboardForm?.selectedFromDate">
-                    <i class="icons">&#xe92d;</i>
-                    <input type="text" id="to_date" [value]="
-                        dashboardForm?.selectedToDate | date : 'dd MMM yyyy'
-                      " [placeholder]="'To'" (click)="openToDatePicker()" readonly />
-                    <dp-date-picker #toDatePicker [(ngModel)]="dashboardForm.selectedToDate" placeholder="Select Date"
-                      (onSelect)="
-                        closeToDatePicker(); datePickerOverlay = false
-                      " [config]="toDatePickerConfig"></dp-date-picker>
-                    <div class="overlay" (click)="closeToDatePicker()" *ngIf="datePickerOverlay"></div>
-                  </div>
-                </div>
-                <p class="vx-txt-error" [appScrollInView]="true" *ngIf="
-                    submitted &&
-                    dashboardForm.selectedFromDate &&
-                    !dashboardForm.selectedToDate
-                  ">
-                  Select a time-frame.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Email Summary -->
-          <!-- <div
-            class="form-group-row"
-            [class.active]="activeSelector === 'frequency'"
-            [class.disabled]="
-              activeSelector &&
-              activeSelector !== 'frequency' &&
-              activeSelector !== 'name'
-            "
-          >
-            <div class="image">
-              <img
-                *ngIf="!dashboardForm.frequencyMessage"
-                [ngSrc]="ASSETS.dashBoardEmailSummariesIcon"
-                alt=""
-                width="36"
-                height="36"
-              />
-              <svg
-                *ngIf="dashboardForm.frequencyMessage"
-                class="checkIcon"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 52 52"
-              >
-                <circle
-                  class="checkIcon__circle"
-                  cx="26"
-                  cy="26"
-                  r="25"
-                  fill="none"
-                />
-                <path
-                  class="checkIcon__check"
-                  fill="none"
-                  d="M14.1 27.2l7.1 7.2 16.7-16.8"
-                />
-              </svg>
-            </div>
-            <div class="form">
-              <div class="vx-form-group vx-d-block">
-                <label
-                  class="vx-fs-11 vx-fw-500 vx-label-txt vx-d-block vx-tt-uppercase vx-mb-2 vx-w-100 vx-lh-4"
-                  >Email Summaries</label
-                >
-                <label class="vx-control-panel-sub-label"
-                  >If you would like to send a summary of this Dashboard, please
-                  select a frequency(By default VComply sends a weekly
-                  Summary).</label
-                >
-                <div
-                  *ngIf="!dashboardForm.frequencyMessage"
-                  class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
-                  (click)="activateSelector('frequency', true)"
-                >
-                  <div
-                    class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4"
-                  >
-                    Email Summaries
-                  </div>
-                </div>
-
-                <div
-                  *ngIf="dashboardForm.frequencyMessage"
-                  class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
-                >
-                  <div
-                    class="selectBoxText vx-fs-13 vx-paragraph-txt"
-                    [arTooltip]="dashboardForm.frequencyMessage"
-                    placement="bottom-left"
-                    type="black"
-                    delay="0"
-                    [tooltipMandatory]="false"
-                    [innerHTML]="dashboardForm.frequencyMessage"
-                  ></div>
-
-                  <button
-                    *ngIf="
-                      dashboardForm.frequencyMessage &&
-                      activeSelector !== 'frequency'
-                    "
-                    class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
-                    (click)="activateSelector('frequency', true)"
-                  >
-                    <i class="icons vx-mr-1">&#xe90c;</i> EDIT
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div> -->
-        </div>
-        <div class="button-block">
-          <button class="vx-btn block primary" [disabled]="activeSelector && activeSelector !== 'name'"
-            (click)="configureDashboard()">
-            Next: Configure Widgets
-          </button>
-        </div>
-      </div>
-
-      <button class="close-dialog" type="button" [disabled]="activeSelector && activeSelector !== 'name'"
-        (click)="close.emit({ mode: 'discard' })" [arTooltip]="'[Esc] to close'" placement="left" type="black" delay="0"
-        [tooltipMandatory]="true" [class.hide]="activeSelector && activeSelector !== 'name'">
-        <i class="icons">&#xe93f;</i>
-      </button>
-      <div class="global-confirmation-alert" *ngIf="
-          submitted &&
-          dashboardForm?.selectedResponsibilityCenters?.length == 0 
-        ">
-        <div class="global-confirmation-alert-top">
-          <span class="icon-block">
-            <i class="icons">&#xe930;</i>
-          </span>
-          <p class="text" *ngIf="showRiskCategory">
-            Select a Responsibility Center or Risk Category.
-          </p>
-          <p class="text" *ngIf="!showRiskCategory">
-            Select a Responsibility Center.
-          </p>
-        </div>
-        <div class="global-confirmation-alert-bottom">
-          <p class="message"></p>
-          <div class="button-group">
-            <button class="fill" type="button" (click)="submitted = false">
-              OKAY
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<app-smiley-dialog *ngIf="isSmiley" [message]="smileyMessage"></app-smiley-dialog>
-
-<app-configure-widgets *ngIf="openConfigureWidgets" [mode]="mode" [displayedWidgets]="displayedWidgets"
-  [showRisk]="showRiskWidgets" [showCompliance]="!showComplianceWidgets" [selectedWidgetsData]="selectedWidgets"
-  (widgetsDataModified)="setSelectedWidgets($event)"
-  (closeConfigureWidgets)="closeConfigureWidgets($event)"></app-configure-widgets>