vc-create-dashboard 2.9.7 → 3.0.0

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

@@ -1,1258 +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-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
-                src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg"
-                *ngIf="
-                  !dashboardForm.dashboardName || activeSelector === 'name'
-                "
-                alt=""
-              />
-              <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
-                src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg"
-                *ngIf="
-                  dashboardForm?.selectedViewers?.length == 0 ||
-                  activeSelector === 'whoCanView'
-                "
-                alt=""
-              />
-              <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'
-                "
-                src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg"
-                alt=""
-              />
-              <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'
-                "
-                src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg"
-                alt=""
-              />
-              <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'
-                "
-                src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg"
-                alt=""
-              />
-              <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"
-                src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg"
-                alt=""
-              />
-              <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
-                "
-                src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg"
-                alt=""
-              />
-              <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"
-                      [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"
-                      [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"
-                src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/send-resolution.svg"
-                alt=""
-              />
-              <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>