vc-create-dashboard 3.0.5 → 3.0.61

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

@@ -0,0 +1,1276 @@
+<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-risk-categories
+        *ngIf="activeSelector === 'riskCategories'"
+        [categoryList]="riskCategoryList"
+        [allCategories]="allRiskCategories"
+        [categoryIdKey]="'category_id'"
+        [selectedCategories]="dashboardForm.selectedRiskCategories"
+        (saveSelectedCategory)="saveSelectedList('riskCategory', $event)"
+        (closeCategoriesList)="activateSelector('', false)"
+      ></app-risk-categories>
+
+      <app-frequency
+        *ngIf="activeSelector === 'frequency'"
+        (closeFrequencyPopup)="activateSelector('', false)"
+        (saveFrequency)="saveFrequency($event)"
+        [savedFrequencyTab]="dashboardForm.selectedFrequencyType"
+        [selectedDate]="dashboardForm.frequencyDate"
+        [savedFrequencies]="dashboardForm.selectedFrequencies"
+      >
+      </app-frequency>
+    </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>
+
+          <!-- 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 &&
+                    dashboardForm?.selectedResponsibilityCategories?.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="
+                  dashboardForm?.selectedResponsibilityCategories?.length ==
+                    0 || activeSelector === 'responsibilityCategories'
+                "
+                [ngSrc]="ASSETS.dashBoardProgramIcon"
+                alt=""
+                width="36"
+                height="36"
+              />
+              <svg
+                *ngIf="
+                  dashboardForm?.selectedResponsibilityCategories?.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="
+                    dashboardForm?.selectedResponsibilityCategories?.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 &&
+                    dashboardForm?.selectedResponsibilityCategories?.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="
+                    dashboardForm?.selectedResponsibilityCategories?.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 dashboardForm?.selectedResponsibilityCategories?.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.item_name }}</span
+                    >
+                    <button
+                      *ngIf="
+                        dashboardForm?.selectedResponsibilityCategories
+                          ?.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"
+                    >
+                      +{{
+                        dashboardForm?.selectedResponsibilityCategories?.slice(
+                          1
+                        ).length
+                      }}
+                    </button>
+
+                    <app-popover #rCategoryList [dontCloseonClick]="true">
+                      <div class="action-list">
+                        <ul class="action-item">
+                          <li
+                            *ngFor="
+                              let rCategory of dashboardForm?.selectedResponsibilityCategories
+                                | slice : 1;
+                              let j = index
+                            "
+                          >
+                            <div class="avatar-card">
+                              <span
+                                class="value"
+                                [arTooltip]="rCategory?.item_name"
+                                placement="bottom-left"
+                                delay="0"
+                                type="black"
+                                [tooltipMandatory]="false"
+                              >
+                                <i
+                                  class="icons cross-icon"
+                                  (click)="
+                                    remove(
+                                      'responsibilityCategories',
+                                      rCategory
+                                    )
+                                  "
+                                  >&#xe90d;</i
+                                >
+                                {{ rCategory?.item_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>
+
+          <!-- Risk Category -->
+          <div
+            class="form-group-row"
+            [class.active]="activeSelector === 'riskCategories'"
+            *ngIf="showRiskCategory && isManageRisk"
+            [class.disabled]="
+              activeSelector &&
+              activeSelector !== 'riskCategories' &&
+              activeSelector !== 'name'
+            "
+          >
+            <div class="image">
+              <img
+                *ngIf="
+                  dashboardForm?.selectedRiskCategories?.length == 0 ||
+                  activeSelector === 'riskCategories'
+                "
+                [ngSrc]="ASSETS.dashBoardRiskIcon"
+                alt=""
+                width="36"
+                height="36"
+              />
+              <svg
+                *ngIf="
+                  dashboardForm?.selectedRiskCategories?.length > 0 &&
+                  activeSelector !== 'riskCategories'
+                "
+                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" *ngIf="isManageRisk">
+              <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"
+                  >RISK CATEGORIES</label
+                >
+                <div
+                  *ngIf="dashboardForm?.selectedRiskCategories?.length == 0"
+                  class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
+                  (click)="activateSelector('riskCategories', true)"
+                  [class.error]="
+                    submitted &&
+                    dashboardForm?.selectedResponsibilityCenters?.length == 0 &&
+                    dashboardForm?.selectedResponsibilityCategories?.length ==
+                      0 &&
+                    dashboardForm?.selectedRiskCategories?.length == 0
+                  "
+                >
+                  <div
+                    class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4"
+                  >
+                    Select the Risk Categories that you would like displayed<br />in
+                    the Dashboard, if any.
+                  </div>
+                </div>
+
+                <div
+                  *ngIf="dashboardForm?.selectedRiskCategories?.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 riskCategory of dashboardForm?.selectedRiskCategories?.slice(
+                        0,
+                        1
+                      )
+                    "
+                  >
+                    <i
+                      class="icons cross vx-fs-12 vx-paragraph-txt vx-mr-1"
+                      (click)="remove('riskCategory', riskCategory)"
+                      >&#xe9ae;</i
+                    >
+                    <span
+                      class="chipName vx-fs-11 vx-label-txt"
+                      [arTooltip]="riskCategory.category_name"
+                      placement="bottom-left"
+                      delay="0"
+                      type="black"
+                      [tooltipMandatory]="false"
+                      >{{ riskCategory.category_name }}</span
+                    >
+                    <button
+                      *ngIf="dashboardForm?.selectedRiskCategories?.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)="riskList.popover()"
+                      placement="left"
+                    >
+                      +{{
+                        dashboardForm?.selectedRiskCategories?.slice(1).length
+                      }}
+                    </button>
+
+                    <app-popover #riskList [dontCloseonClick]="true">
+                      <div class="action-list">
+                        <ul class="action-item">
+                          <li
+                            *ngFor="
+                              let riskCategory of dashboardForm?.selectedRiskCategories
+                                | slice : 1;
+                              let j = index
+                            "
+                          >
+                            <div class="avatar-card">
+                              <span
+                                class="value"
+                                [arTooltip]="riskCategory?.category_name"
+                                placement="bottom-left"
+                                delay="0"
+                                type="black"
+                                [tooltipMandatory]="false"
+                              >
+                                <i
+                                  class="icons cross-icon"
+                                  (click)="remove('riskCategory', riskCategory)"
+                                  >&#xe90d;</i
+                                >
+                                {{ riskCategory?.category_name }}
+                              </span>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                    </app-popover>
+                  </div>
+
+                  <button
+                    *ngIf="activeSelector !== 'riskCategories'"
+                    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('riskCategories', true)"
+                  >
+                    <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Display Criteria -->
+          <div
+            class="form-group-row"
+            [class.disabled]="activeSelector && activeSelector !== 'name'"
+          >
+            <div class="image">
+              <img
+                *ngIf="dashboardForm?.displayCriteria?.length == 0"
+                [ngSrc]="ASSETS.dashBoardUsersIcon"
+                alt=""
+                width="36"
+                height="36"
+              />
+              <svg
+                *ngIf="dashboardForm?.displayCriteria?.length > 0"
+                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"
+                  >DISPLAY CRITERIA</label
+                >
+                <div class="radio-group" *ngIf="showCriteria">
+                  <app-cs-radio
+                    [checked]="dashboardForm.displayCriteria == 'or'"
+                    (checkedEvent)="dashboardForm.displayCriteria = 'or'"
+                  >
+                    Those Items that have been assigned to either the selected
+                    Responsibility Center(s) or the selected
+                    Categories.</app-cs-radio
+                  >
+
+                  <app-cs-radio
+                    [checked]="dashboardForm.displayCriteria == 'and'"
+                    (checkedEvent)="dashboardForm.displayCriteria = 'and'"
+                  >
+                    Those Items that have been assigned to both the selected
+                    Responsibility Center(s) and the selected
+                    Categories.</app-cs-radio
+                  >
+                </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 you would like the information selected to be
+                  displayed for. 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 &&
+          dashboardForm?.selectedResponsibilityCategories?.length == 0 &&
+          dashboardForm?.selectedRiskCategories?.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, Program or Risk Category.
+          </p>
+          <p class="text" *ngIf="!showRiskCategory">
+            Select a Responsibility Center or Program.
+          </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>