vc-create-dashboard 3.0.83 → 3.0.84

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

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