vcomply-workflow-engine 2.0.4 → 2.0.167

package/projects/vx-workflow-engine/src/lib/workflow-compliance/workflow-compliance.component.html

@@ -0,0 +1,3393 @@
+<div class="workflw-compliance" *ngIf="!showSmiley">
+  <!-- Behalf -->
+  <div
+    *ngIf="mode !== 'EDIT'"
+    class="form-group-row"
+    [class.active]="activeSelector === 'assignors'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'assignors' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div
+      class="left"
+      [class.checked]="
+        responsibilityForm?.assignors?.list?.length > 0 &&
+        activeSelector !== 'assignors'
+      "
+    >
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg"
+        alt="im"
+        *ngIf="
+          responsibilityForm?.assignors?.list?.length == 0 ||
+          activeSelector === 'assignors'
+        "
+      />
+
+      <svg
+        class="checkIcon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        *ngIf="
+          responsibilityForm?.assignors?.list?.length > 0 &&
+          activeSelector !== 'assignors'
+        "
+      >
+        <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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel"
+          >I am creating this responsibility on behalf of someone else
+          <app-cs-switch
+            [ngValue]="responsibilityForm.assignors.enable"
+            (ngValueChange)="
+              responsibilityForm.assignors.enable = $event;
+              responsibilityForm.assignors.list = []
+            "
+          >
+          </app-cs-switch>
+        </label>
+        <div
+          class="select"
+          *ngIf="
+            responsibilityForm?.assignors?.list?.length === 0 ||
+            activeSelector === 'assignors'
+          "
+        >
+          <input
+            type="text"
+            (click)="activateSelector('assignors', true)"
+            placeholder="Who is responsible for managing this responsibility?"
+            readonly
+            [disabled]="!responsibilityForm?.assignors?.enable"
+          />
+        </div>
+        <div
+          class="selected"
+          *ngIf="
+            responsibilityForm?.assignors?.list?.length > 0 &&
+            activeSelector !== 'assignors'
+          "
+        >
+          <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
+            <ng-container
+              *ngFor="
+                let b_user of responsibilityForm?.assignors?.list?.slice(0, 1)
+              "
+            >
+              <i
+                (click)="remove('assignors', b_user)"
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="b_user.member_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ b_user.member_name }}</span
+              >
+            </ng-container>
+            <button
+              *ngIf="responsibilityForm?.assignors?.list?.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)="behalf.popover()"
+              placement="right"
+            >
+              +{{ responsibilityForm?.assignors?.list?.slice(1).length }}
+            </button>
+          </div>
+
+          <!-- <div class="chip-container">
+                      <span class="chip" *ngFor="let b_user of responsibilityForm?.assignors?.list?.slice(0,2)"><i
+                              class="icons" (click)="remove('assignors',b_user)">&#xe90d;</i>
+                          {{b_user.member_name}}</span>
+                      <button class="count" *ngIf="responsibilityForm?.assignors?.list?.length > 2" type="button"
+                          appPopover (click)="behalf.popover()" placement="right">+
+                          {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>
+                  </div> -->
+          <button
+            *ngIf="activeSelector !== 'assignors'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('assignors', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <app-popover #behalf [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let b_user of responsibilityForm?.assignors?.list | slice : 2;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('assignors', b_user)"
+                      >&#xe90d;</i
+                    >
+                    {{ b_user.member_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <p
+          *ngIf="invalidType === 'whom'"
+          [appScrollInView]="true"
+          class="error-message"
+        >
+          Please select the person responsible for managing this responsibility.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- What -->
+  <div
+    class="form-group-row"
+    [class.active]="activeSelector === 'framework'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'responsibilityName' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div
+      class="left"
+      [class.checked]="
+        responsibilityForm?.responsibility?.name.trim() !== '' &&
+        !focus.responsibilityName
+      "
+    >
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg"
+        alt="im"
+        *ngIf="
+          responsibilityForm?.responsibility?.name.trim() === '' ||
+          focus.responsibilityName
+        "
+      />
+
+      <svg
+        class="checkIcon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        *ngIf="
+          responsibilityForm?.responsibility?.name.trim() !== '' &&
+          !focus.responsibilityName
+        "
+      >
+        <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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">
+          What? <span class="required">*</span>
+          <button
+            *ngIf="
+              isFrameworkAvailable &&
+              mode !== 'EDIT' &&
+              openedFrom !== 'RISK_TREATMENT'
+            "
+            (click)="activateSelector('framework', true)"
+            class="button"
+          >
+            Select From A framework
+          </button>
+        </label>
+        <span
+          *ngIf="responsibilityForm?.responsibility?.keyResponsibility"
+          class="indicator"
+          [appTooltip]="'This responsibility is marked as key responsibility.'"
+          placement="bottom"
+          type="black"
+          delay="0"
+          [tooltipMandatory]="true"
+        >
+          <i class="icons">&#xea70;</i>
+        </span>
+        <input
+          *ngIf="
+            responsibilityForm?.responsibility?.name.trim() == '' || !isEditWhat
+          "
+          type="text"
+          [ngModel]="responsibilityForm.responsibility.name"
+          placeholder="What is the responsibility?"
+          (change)="whatChanged($event)"
+          (focusin)="activateSelector('responsibilityName', true)"
+          (focusout)="activeDeselector()"
+          (clickOutside)="testFunction()"
+          #what
+        />
+        <div
+          class="selected"
+          *ngIf="
+            responsibilityForm?.responsibility?.name.trim() != '' && isEditWhat
+          "
+        >
+          <div class="chip-container">
+            <span class="value">{{
+              responsibilityForm.responsibility?.name
+            }}</span>
+          </div>
+          <button class="edit" type="button" (click)="onEditWhat($event)">
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <p
+          *ngIf="invalidType === 'what'"
+          [appScrollInView]="true"
+          class="error-message"
+        >
+          Please enter a name for this responsibility.
+        </p>
+        <div class="switch-row align-right">
+          <app-cs-switch
+            [ngValue]="responsibilityForm.responsibility?.keyResponsibility"
+            (ngValueChange)="
+              responsibilityForm.responsibility.keyResponsibility = $event
+            "
+            >Key Responsibility
+          </app-cs-switch>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Who -->
+  <div
+    class="form-group-row"
+    [class.active]="activeSelector === 'assignees'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'assignees' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div
+      class="left"
+      [class.checked]="
+        responsibilityForm?.assignees?.list?.length > 0 &&
+        activeSelector !== 'assignees'
+      "
+    >
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg"
+        alt="im"
+        *ngIf="
+          responsibilityForm?.assignees?.list?.length == 0 ||
+          activeSelector === 'assignees'
+        "
+      />
+
+      <svg
+        class="checkIcon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        *ngIf="
+          responsibilityForm?.assignees?.list?.length > 0 &&
+          activeSelector !== 'assignees'
+        "
+      >
+        <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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel"
+          >Who? <span class="required">*</span></label
+        >
+
+        <div
+          class="select"
+          *ngIf="
+            responsibilityForm?.assignees?.list?.length == 0 &&
+            (!featureFlag_groups ||
+              (responsibilityForm?.assigneeGroups?.list?.length == 0 &&
+                featureFlag_groups))
+          "
+        >
+          <input
+            type="text"
+            (click)="activateSelector('assignees', true)"
+            placeholder="Who is responsible for completing the responsibility?"
+            readonly
+          />
+        </div>
+
+        <div
+          class="selected"
+          *ngIf="
+            (responsibilityForm?.assignees?.list?.length > 0 &&
+              !featureFlag_groups) ||
+            ((responsibilityForm?.assignees?.list?.length > 0 ||
+              responsibilityForm?.assigneeGroups?.list?.length > 0) &&
+              featureFlag_groups)
+          "
+        >
+          <div
+            class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            *ngIf="!featureFlag_groups"
+          >
+            <ng-container
+              *ngFor="
+                let e_user of responsibilityForm?.assignees?.list?.slice(0, 1)
+              "
+            >
+              <i
+                (click)="remove('assignees', e_user)"
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="e_user.member_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ e_user.member_name }}</span
+              >
+            </ng-container>
+            <button
+              class="countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenbg"
+              appPopover
+              (click)="assignees.popover()"
+              placement="right"
+              *ngIf="responsibilityForm?.assignees?.list?.length > 1"
+            >
+              +{{ responsibilityForm?.assignees?.list?.slice(1).length }}
+            </button>
+          </div>
+
+          <div class="vx-d-flex vx-align-center" *ngIf="featureFlag_groups">
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="responsibilityForm?.assignees?.list?.length > 0"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="
+                  remove('assignees', responsibilityForm?.assignees?.list[0])
+                "
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="
+                  responsibilityForm?.assignees?.list[0]?.employee_name
+                "
+                placement="bottom-left"
+                type="black"
+                delay="0"
+                [tooltipMandatory]="false"
+                >{{
+                  responsibilityForm?.assignees?.list[0]?.employee_name
+                }}</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 greenBg"
+                appPopover
+                (click)="user.popover()"
+                placement="left"
+                *ngIf="responsibilityForm?.assignees?.list?.length > 1"
+              >
+                +{{ responsibilityForm?.assignees?.list?.length - 1 }}
+              </button>
+            </div>
+            <span
+              class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"
+              *ngIf="
+                responsibilityForm?.assignees?.list?.length > 0 &&
+                responsibilityForm?.assigneeGroups?.list?.length > 0
+              "
+              >&</span
+            >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="responsibilityForm?.assigneeGroups?.list?.length"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                *ngIf="!allGroupAssignee || mode !== 'EDIT'"
+                (click)="
+                  remove(
+                    'groupassignees',
+                    responsibilityForm?.assigneeGroups?.list[0]
+                  )
+                "
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="
+                  responsibilityForm?.assigneeGroups?.list[0]?.group_name
+                "
+                placement="bottom-left"
+                type="black"
+                delay="0"
+                [tooltipMandatory]="false"
+                >{{
+                  responsibilityForm?.assigneeGroups?.list[0]?.group_name
+                }}</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)="group.popover()"
+                placement="right"
+                *ngIf="responsibilityForm?.assigneeGroups?.list?.length > 1"
+              >
+                +{{ responsibilityForm?.assigneeGroups?.list?.length - 1 }}
+              </button>
+            </div>
+          </div>
+
+          <!-- <div class="chip-container" [class.more-one]="responsibilityForm?.assignees?.length>1" [class.plus]="responsibilityForm?.assignees?.length>2" *ngIf="!featureFlag_groups">
+                      <span class="chip" *ngFor="let e_user of responsibilityForm?.assignees?.list?.slice(0,2)"><i
+                              class="icons" (click)="remove('assignees',e_user)">&#xe90d;</i>
+                          {{e_user.member_name}}</span>
+                      <button class="count" *ngIf="responsibilityForm?.assignees?.list?.length > 2" type="button"
+                          appPopover (click)="assignees.popover()" placement="right">+
+                          {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>
+                  </div> -->
+          <!-- <div class="chip-container" *ngIf="featureFlag_groups">
+                      <div class="chip-inner" *ngIf="responsibilityForm?.assignees?.list?.length > 0" >
+                          <i class="icons cross vx-mr-1" (click)="remove('assignees',responsibilityForm?.assignees?.list[0])" >&#xe90d;</i>
+                          <span class="chip" [appTooltip]="responsibilityForm?.assignees?.list[0]?.employee_name" placement="bottom-left" type="black" delay="0" [tooltipMandatory]="false"><span class="vx-fs-11 vx-paragraph-txt vx-fw-500">{{responsibilityForm?.assignees?.list[0]?.employee_name}}</span></span>
+                          <button *ngIf="responsibilityForm?.assignees?.list?.length > 1" class="count user" appPopover (click)="user.popover()" placement="left"> +{{responsibilityForm?.assignees?.list?.length -1}}</button>
+                      </div>
+                      <span class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"  *ngIf="responsibilityForm?.assignees?.list?.length > 0 && responsibilityForm?.assigneeGroups?.list?.length > 0" >&</span>
+                      <div class="chip-inner" *ngIf="responsibilityForm?.assigneeGroups?.list?.length" >
+                          <i *ngIf="(!allGroupAssignee || mode !== 'EDIT')" class="icons cross vx-mr-1" (click)="remove('groupassignees',responsibilityForm?.assigneeGroups?.list[0])" >&#xe90d;</i>
+                          <span class="chip" [appTooltip]="responsibilityForm?.assigneeGroups?.list[0]?.group_name" placement="bottom-left" type="black" delay="0" [tooltipMandatory]="false"><span class="vx-fs-11 vx-paragraph-txt vx-fw-500">{{responsibilityForm?.assigneeGroups?.list[0]?.group_name}}</span></span>
+                          <button *ngIf="responsibilityForm?.assigneeGroups?.list?.length > 1" class="count" appPopover (click)="group.popover()" placement="right">+{{responsibilityForm?.assigneeGroups?.list?.length - 1}}</button>
+                      </div>
+                  </div> -->
+          <button
+            *ngIf="
+              activeSelector !== 'assignees' &&
+              (!featureFlag_groups ||
+                (featureFlag_groups && (!allGroupAssignee || mode !== 'EDIT')))
+            "
+            class="edit"
+            type="button"
+            (click)="activateSelector('assignees', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <app-popover #user [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let e_user of responsibilityForm?.assignees?.list | slice : 1
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('assignees', e_user)"
+                      >&#xe90d;</i
+                    >
+                    {{ e_user.member_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <app-popover #group [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let group of responsibilityForm?.assigneeGroups?.list
+                    | slice : 1
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i
+                      *ngIf="
+                        !featureFlag_groups ||
+                        (featureFlag_groups &&
+                          (!allGroupAssignee || mode !== 'EDIT'))
+                      "
+                      class="icons"
+                      (click)="remove('groupassignees', group)"
+                      >&#xe90d;</i
+                    >
+                    {{ group.group_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+
+        <p
+          *ngIf="invalidType === 'who'"
+          [appScrollInView]="true"
+          class="error-message"
+        >
+          Please select the person responsible for completing this
+          responsibility.
+        </p>
+        <ng-container *ngIf="!isGroupAssigned">
+          <app-cs-radio
+            *ngIf="mode !== 'EDIT'"
+            (checkedEvent)="responsibilityForm.assignees.whoCanComplete = 'ALL'"
+            [checked]="responsibilityForm.assignees.whoCanComplete == 'ALL'"
+            [name]="'what'"
+            >ALL SELECTED PERSONS NEED TO COMPLETE THIS<i
+              class="icons"
+              [appTooltip]="
+                'If selected, separate responsibilities will be created for each person.'
+              "
+              placement="bottom-right"
+              type="white"
+              delay="0"
+              [tooltipMandatory]="true"
+              >&#xe91f;</i
+            >
+          </app-cs-radio>
+          <app-cs-radio
+            *ngIf="mode !== 'EDIT'"
+            (checkedEvent)="
+              responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'
+            "
+            [checked]="responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'"
+            [name]="'what'"
+            >ANY SELECTED PERSON CAN COMPLETE THIS
+            <i
+              class="icons"
+              [appTooltip]="
+                'If selected, only one responsibility will be created.'
+              "
+              placement="bottom-right"
+              type="white"
+              delay="0"
+              [tooltipMandatory]="true"
+              >&#xe91f;</i
+            >
+          </app-cs-radio>
+
+          <div
+            class="switch-row align-right"
+            *ngIf="
+              mode == 'EDIT' &&
+              (!featureFlag_groups ||
+                (responsibilityForm?.assigneeGroups?.list.length === 0 &&
+                  featureFlag_groups))
+            "
+          >
+            <app-cs-switch
+              (ngValueChange)="openAssigneeChangeConfirmation($event)"
+              [ngValue]="
+                responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'
+              "
+            >
+              ANY SELECTED PERSON CAN COMPLETE THIS
+            </app-cs-switch>
+          </div>
+        </ng-container>
+        <app-popover #assignees [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let e_user of responsibilityForm?.assignees?.list | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('assignees', e_user)"
+                      >&#xe90d;</i
+                    >
+                    {{ e_user.member_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+      </div>
+    </div>
+  </div>
+
+  <!-- When? -->
+  <div
+    class="form-group-row"
+    [class.active]="activeSelector === 'frequency'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'frequency' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div
+      class="left"
+      [class.checked]="
+        !responsibilityForm?.frequency || activeSelector === 'frequency'
+      "
+    >
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg"
+        alt="im"
+        *ngIf="!responsibilityForm?.frequency || activeSelector === 'frequency'"
+      />
+
+      <svg
+        class="checkIcon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        *ngIf="
+          responsibilityForm?.frequency &&
+          activeSelector !== 'frequency' &&
+          responsibilityForm?.frequency != '' &&
+          responsibilityForm?.frequency != '5~0~0~0'
+        "
+      >
+        <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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel"
+          >When? <span class="required">*</span></label
+        >
+        <div
+          *ngIf="
+            responsibilityForm?.frequency == '' ||
+            responsibilityForm?.frequency == '5~0~0~0'
+          "
+          class="select button-sec"
+        >
+          <input
+            type="text"
+            (click)="activateSelector('frequency', true)"
+            [placeholder]="frequencyPlaceholder"
+            readonly
+          />
+          <button (click)="activateSelector('frequency', true)" type="button">
+            Set A frequency
+          </button>
+        </div>
+        <div
+          *ngIf="
+            responsibilityForm?.frequency != '' &&
+            responsibilityForm?.frequency !== '5~0~0~0'
+          "
+          class="selected button-sec"
+        >
+          <span
+            class="chip"
+            [appTooltip]="frequencyPlaceholder"
+            placement="bottom-left"
+            delay="0"
+            type="black"
+            [tooltipMandatory]="false"
+            >{{ frequencyPlaceholder }}</span
+          >
+          <button
+            *ngIf="activeSelector !== 'frequency'"
+            type="button"
+            class="edit"
+            (click)="activateSelector('frequency', true)"
+          >
+            <i class="icons">&#xe9ba;</i>Edit
+          </button>
+        </div>
+        <p
+          *ngIf="invalidType === 'when'"
+          [appScrollInView]="true"
+          class="error-message"
+        >
+          Please select the frequency of occurrence for this responsibility.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Notes -->
+  <div
+    class="form-group-row"
+    [class.active]="activeSelector === 'notes'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'notes' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div
+      class="left"
+      [class.checked]="
+        checkBlank(responsibilityForm?.description).trim() !== '' &&
+        !focus.description
+      "
+    >
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg"
+        alt="im"
+        *ngIf="
+          checkBlank(responsibilityForm?.description).trim() === '' ||
+          focus.description
+        "
+      />
+
+      <svg
+        class="checkIcon"
+        *ngIf="
+          checkBlank(responsibilityForm?.description).trim() !== '' &&
+          !focus.description
+        "
+        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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">Notes</label>
+        <vcomply-editor
+          [(ngModel)]="responsibilityForm.description"
+          [editorConfig]="{
+            mode: 'prime',
+            colorPalette: true,
+            link: true,
+            id: 'notes',
+            placeholder:
+              'Add more information about completing the responsibility'
+          }"
+        ></vcomply-editor>
+      </div>
+    </div>
+  </div>
+
+  <!-- Objective -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.OBJECTIVE"
+    [attr.id]="'OBJECTIVE'"
+    [class.active]="activeSelector === 'objective'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'objective' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div
+      class="left"
+      [class.checked]="
+        checkBlank(responsibilityForm?.objective).trim() !== '' &&
+        !focus.objective
+      "
+    >
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg"
+        alt="im"
+        *ngIf="
+          checkBlank(responsibilityForm?.objective).trim() === '' ||
+          focus.objective
+        "
+      />
+
+      <svg
+        class="checkIcon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        *ngIf="
+          checkBlank(responsibilityForm?.objective).trim() !== '' &&
+          !focus.objective
+        "
+      >
+        <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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">Objective</label>
+        <vcomply-editor
+          [(ngModel)]="responsibilityForm.objective"
+          [editorConfig]="{
+            mode: 'prime',
+            colorPalette: true,
+            id: 'objective',
+            link: true,
+            placeholder:
+              'This option lets you specify an objective for the responsibility.'
+          }"
+        ></vcomply-editor>
+      </div>
+    </div>
+  </div>
+
+  <!-- Responsibility Center -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.RC"
+    [attr.id]="'RC'"
+    [class.active]="activeSelector === 'rc'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'rc' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div
+      class="left"
+      [class.checked]="
+        responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'
+      "
+    >
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg"
+        alt=""
+        *ngIf="responsibilityForm?.rc?.length == 0 || activeSelector === 'rc'"
+      />
+
+      <svg
+        class="checkIcon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        *ngIf="responsibilityForm?.rc?.length > 0 && activeSelector !== 'rc'"
+      >
+        <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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">Responsibility Center </label>
+
+        <div class="select" *ngIf="responsibilityForm?.rc?.length === 0">
+          <div
+            class="custom-input"
+            (click)="activateSelector('rc', true)"
+            aria-placeholder="Select the responsibility center or the responsibility centers for this responsibility."
+          ></div>
+          <!-- <input type="text" (click)="activateSelector('rc',true)" placeholder="Select Responsibility Center(s)" readonly> -->
+        </div>
+
+        <div
+          class="selected"
+          *ngIf="responsibilityForm?.rc?.length > 0"
+          [class.readOnly]="openedFrom === 'RISK_TREATMENT'"
+        >
+          <div
+            class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            *ngFor="let rc of responsibilityForm?.rc?.slice(0, 1)"
+          >
+            <i
+              class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+              (click)="remove('rc', rc)"
+              *ngIf="openedFrom !== 'RISK_TREATMENT'"
+              >&#xe9ae;</i
+            >
+            <span
+              class="chipName vx-fs-11 vx-label-txt"
+              [appTooltip]="rc?.item_name"
+              placement="bottom-left"
+              delay="0"
+              type="black"
+              [tooltipMandatory]="false"
+              >{{ rc?.item_name }}</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"
+              *ngIf="responsibilityForm?.rc?.length > 1"
+              appPopover
+              (click)="rcPopover.popover()"
+              placement="left"
+            >
+              +{{ responsibilityForm?.rc?.slice(1).length }}
+            </button>
+          </div>
+
+          <!-- <div class="chip-container" [class.more-one]="responsibilityForm?.rc?.length>1" [class.plus]="responsibilityForm?.rc?.length>2">
+                      <span class="chip" *ngFor="let rc of responsibilityForm?.rc?.slice(0,2)"><i class="icons" (click)="remove('rc',rc)" *ngIf="openedFrom !== 'RISK_TREATMENT'">&#xe90d;</i>{{rc?.item_name}}</span>
+                      <button class="count" *ngIf="responsibilityForm?.rc?.length > 2" type="button" appPopover (click)="rc.popover()" placement="right" placement="right">+{{responsibilityForm?.rc?.slice(2).length}}</button>
+                  </div> -->
+
+          <button
+            *ngIf="activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('rc', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <app-popover #rcPopover [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let rc of responsibilityForm?.rc | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('rc', rc)">&#xe90d;</i>
+                    {{ rc.item_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+
+        <ng-container
+          *ngIf="
+            isResponsibilityRcLinkEnabled &&
+            (mode != 'EDIT' || responsibilityForm?.rc?.length <= 1)
+          "
+        >
+          <!-- <app-cs-radio><div [appTooltip]="'Create separate responsibilities for each responsibility center'" placement="bottom-left" type="black" delay="0" [tooltipMandatory]="true">CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN…</div><i class="icons" [appTooltip]="'If selected, separate responsibilities will be created for each Responsibility Center.'" placement="bottom-right" type="white" delay="0" [tooltipMandatory]="true">&#xe91f;</i></app-cs-radio> -->
+          <app-cs-radio
+            [class.disabled]="
+              mode == 'EDIT' &&
+              responsibilityForm.responsibilityCenterType === 1 &&
+              responsibilityForm?.rc?.length > 1
+            "
+            [checked]="responsibilityCenterType === 0"
+            [name]="'ff_responsibility_rc_link'"
+            (checkedEvent)="onRcTypeChange(0)"
+            ><div
+              class="rc-radio-text"
+              [appTooltip]="
+                'Create separate responsibilities for each responsibility centers'
+              "
+              placement="bottom-left"
+              type="black"
+              delay="0"
+              [tooltipMandatory]="true"
+            >
+              CREATE SEPARATE RESPONSIBILITIES FOR EACH RESPONSIBILITY CEN…
+            </div>
+            <i
+              class="icons"
+              [appTooltip]="
+                'If selected, separate responsibilities will be created for each Responsibility Center.'
+              "
+              placement="bottom-right"
+              type="white"
+              delay="0"
+              [tooltipMandatory]="true"
+              >&#xe91f;</i
+            ></app-cs-radio
+          >
+          <app-cs-radio
+            [class.disabled]="
+              mode == 'EDIT' &&
+              responsibilityForm.responsibilityCenterType === 1 &&
+              responsibilityForm?.rc?.length > 1
+            "
+            [checked]="responsibilityCenterType === 1"
+            [name]="'ff_responsibility_rc_link'"
+            (checkedEvent)="onRcTypeChange(1)"
+            >DISPLAY THE SAME RESPONSIBILITY IN ALL RESPONSIBILITY CENTERS<i
+              class="icons"
+              [appTooltip]="
+                'If selected, the same responsibility will be linked to each Responsibility Center.'
+              "
+              placement="bottom-right"
+              type="white"
+              delay="0"
+              [tooltipMandatory]="true"
+              >&#xe91f;</i
+            ></app-cs-radio
+          >
+        </ng-container>
+      </div>
+    </div>
+  </div>
+
+  <!-- Program -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.PROGRAM"
+    [attr.id]="'PROGRAM'"
+    [class.active]="activeSelector === 'program'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'program' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div
+      class="left"
+      [class.checked]="
+        responsibilityForm?.program?.length > 0 && activeSelector !== 'program'
+      "
+    >
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg"
+        alt=""
+        *ngIf="
+          responsibilityForm?.program?.length == 0 ||
+          activeSelector === 'program'
+        "
+      />
+
+      <svg
+        class="checkIcon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        *ngIf="
+          responsibilityForm?.program?.length > 0 &&
+          activeSelector !== 'program'
+        "
+      >
+        <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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">Program</label>
+        <div class="select" *ngIf="responsibilityForm?.program?.length == 0">
+          <div
+            class="custom-input"
+            (click)="activateSelector('program', true)"
+            aria-placeholder="Select the Program or Program Categories that this responsibility relates to."
+          ></div>
+          <!-- <input type="text" (click)="activateSelector('program',true)" placeholder="Select Responsibility program(s)" readonly> -->
+        </div>
+        <div class="selected" *ngIf="responsibilityForm?.program?.length > 0">
+          <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
+            <ng-container *ngFor="let program of responsibilityForm?.program">
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                *ngIf="
+                  !hiddenList?.includes('PROGRAM') &&
+                  !program?.isViewOnlyProgram
+                "
+                (click)="remove('program', program)"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="program?.name ?? '--'"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ program?.name ?? "--" }}</span
+              >
+            </ng-container>
+            <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)="program.popover()"
+              placement="right"
+              *ngIf="responsibilityForm?.linkedProgram?.length > 1"
+            >
+              +{{ responsibilityForm?.linkedProgram?.length - 1 }}
+            </button>
+          </div>
+
+          <!-- <div class="chip-container" [class.more-one]="responsibilityForm?.program?.length>1" [class.plus]="responsibilityForm?.program?.length>2">
+                              <span class="chip" *ngFor="let program of responsibilityForm?.program"><i class="icons" *ngIf="feature.isFeatureEnabled('ff_deprecate_primary_program_flag')" (click)="remove('program',program)">&#xe90d;</i> {{program?.name??'--'}}</span>
+                              <!- - <button *ngIf="responsibilityForm?.program?.length > 2" class="count" type="button" appPopover (click)="program.popover()" placement="right">+ {{responsibilityForm?.program?.slice(2).length}}</button> - ->
+                              <button *ngIf="responsibilityForm?.linkedProgram?.length > 1" class="count" type="button" appPopover (click)="program.popover()" placement="right">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>
+                          </div> -->
+
+          <button
+            *ngIf="
+              activeSelector !== 'program' && !hiddenList.includes('PROGRAM')
+            "
+            class="edit"
+            type="button"
+            (click)="activateSelector('program', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+
+        <app-popover #program [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <ng-container
+                *ngIf="
+                  !feature.isFeatureEnabled('ff_deprecate_primary_program_flag')
+                "
+              >
+                <li class="multiple-program">
+                  <div class="avatar-card">
+                    <span
+                      class="value"
+                      [appTooltip]="responsibilityForm?.program[0]?.name"
+                      placement="bottom"
+                      type="black"
+                      delay="0"
+                      [tooltipMandatory]="false"
+                    >
+                      {{ responsibilityForm?.program[0]?.name }}
+                    </span>
+                    <div class="primary-label">PRIMARY</div>
+                  </div>
+                </li>
+              </ng-container>
+              <li
+                *ngFor="
+                  let program of responsibilityForm?.linkedProgram;
+                  let j = index
+                "
+              >
+                <div
+                  class="avatar-card"
+                  *ngIf="
+                    program?.category_id !==
+                    responsibilityForm?.program[0]?.category_id
+                  "
+                >
+                  <span
+                    class="value"
+                    [appTooltip]="program?.name"
+                    placement="bottom"
+                    type="black"
+                    delay="0"
+                    [tooltipMandatory]="false"
+                  >
+                    <i
+                      *ngIf="
+                        !hiddenList?.includes('PROGRAM') &&
+                        !program?.isViewOnlyProgram
+                      "
+                      class="icons"
+                      (click)="remove('program', program)"
+                      >&#xe90d;</i
+                    >
+                    {{ program?.name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <div *ngIf="responsibilityForm?.customTags?.length > 0">
+          <ng-container *ngFor="let tag of responsibilityForm?.customTags">
+            <ng-container *ngIf="tag?.tag_name?.trim()">
+              <label class="vx-control-panel">{{ tag?.tag_name }}</label>
+              <input
+                type="text"
+                [(ngModel)]="tag.value"
+                placeholder="{{ tag?.tag_name }}"
+              />
+            </ng-container>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Format & Evidence -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.FORMATE_EVIDENCE"
+    [attr.id]="'FORMATE_EVIDENCE'"
+    [class.active]="activeSelector === 'formate_evidence'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'formate_evidence' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left" [class.checked]="false">
+      <img
+        *ngIf="
+          this.responsibilityForm.formatAndEvidence.evidenceRequired == false &&
+          this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 &&
+          this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0
+        "
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg"
+        alt="im"
+      />
+
+      <svg
+        *ngIf="
+          this.responsibilityForm.formatAndEvidence.evidenceRequired ||
+          this.responsibilityForm.formatAndEvidence.formatFiles.length ||
+          this.responsibilityForm.formatAndEvidence.formatLinks?.length
+        "
+        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="right">
+      <app-format-and-evidence
+        (updateFiles)="saveSelectedList('formate_evidence', $event)"
+        [mode]="'responsibility'"
+        [formatEvidanceData]="responsibilityForm?.formatAndEvidence"
+      >
+      </app-format-and-evidence>
+    </div>
+  </div>
+
+  <!-- Assessment -->
+  <div
+    *ngIf="moreOptions?.ASSESSMENT"
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    [attr.id]="'ASSESSMENT'"
+    [class.active]="false"
+    [class.disabled]="false"
+  >
+    <div
+      class="left"
+      [class.checked]="responsibilityForm.assessment?.assessment_id"
+    >
+      <img
+        *ngIf="!responsibilityForm.assessment?.assessment_id"
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg"
+        alt="im"
+      />
+
+      <svg
+        *ngIf="responsibilityForm.assessment?.assessment_id"
+        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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">ASSESSMENTS</label>
+        <div
+          *ngIf="!responsibilityForm.assessment?.assessment_id"
+          class="select"
+        >
+          <input
+            type="text"
+            (click)="
+              activateSelector('isAssessment', true); isAssessment = true
+            "
+            placeholder="Select an assessment for this responsibility"
+            [disabled]="responsibilityForm.checkpoints?.length"
+            readonly
+          />
+        </div>
+        <div
+          class="selected"
+          *ngIf="responsibilityForm.assessment?.assessment_id"
+        >
+          <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
+            <i
+              class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+              (click)="remove('assessment', category)"
+              >&#xe9ae;</i
+            >
+            <span
+              class="chipName vx-fs-11 vx-label-txt"
+              [appTooltip]="
+                responsibilityForm.assessment?.assessmentDetails
+                  ?.assessment_name
+              "
+              placement="bottom-left"
+              delay="0"
+              type="black"
+              [tooltipMandatory]="false"
+              >{{
+                responsibilityForm.assessment?.assessmentDetails
+                  ?.assessment_name
+              }}</span
+            >
+            <div
+              class="workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-ml-1 vx-text-center"
+            >
+              {{ responsibilityForm.assessment?.assessmentDetails?.questions }}
+              {{
+                responsibilityForm.assessment?.assessmentDetails?.questions > 1
+                  ? "Questions"
+                  : "Question"
+              }}
+            </div>
+          </div>
+
+          <!-- <div class="chip-container" [class.more-one]="false" [class.plus]="false">
+                      <span class="chip with-question">
+                          <span class="value" [appTooltip]="responsibilityForm.assessment?.assessmentDetails?.assessment_name" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false"><i class="icons" (click)="remove('assessment',category)">&#xe90d;</i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>
+                          <span class="label">{{responsibilityForm.assessment?.assessmentDetails?.questions}}
+                              {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':
+                              'Question'}}</span>
+                      </span>
+                  </div> -->
+
+          <button
+            (click)="
+              activateSelector('isAssessment', true); isAssessment = true
+            "
+            class="edit"
+            type="button"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Checkpoints -->
+  <!-- *ngIf="moreOptions.checkpoints" -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.CHECKPOINTS"
+    [attr.id]="'CHECKPOINTS'"
+    [class.active]="activeSelector === 'checkpoints'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'checkpoints' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg"
+        alt="im"
+        *ngIf="
+          responsibilityForm?.checkpoints?.length == 0 ||
+          activeSelector === 'checkpoints'
+        "
+      />
+
+      <svg
+        class="checkIcon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        *ngIf="
+          responsibilityForm?.checkpoints?.length > 0 &&
+          activeSelector !== 'checkpoints'
+        "
+      >
+        <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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">
+          <!-- {{responsibilityForm.checkpoints|json}}
+                {{responsibilityForm.checkpointInstruction}} -->
+
+          Checkpoints
+          <!-- <button *ngIf="responsibilityForm?.checkpoints?.length === 0" class="button"
+                      (click)="activateSelector('checkpoints',true)">+ Add Checkpoints</button> -->
+        </label>
+        <div
+          class="select button-sec"
+          *ngIf="responsibilityForm?.checkpoints?.length === 0"
+        >
+          <input
+            [disabled]="!responsibilityForm.checkpoints?.length"
+            type="text"
+            (click)="activateSelector('checkpoints', true)"
+            placeholder="Add checkpoints for this responsibility"
+            readonly
+          />
+          <button
+            [disabled]="!responsibilityForm.checkpoints?.length"
+            (click)="activateSelector('checkpoints', true)"
+            type="button"
+          >
+            Add Checkpoints
+          </button>
+        </div>
+        <div
+          class="selected"
+          *ngIf="responsibilityForm.checkpoints?.length > 0"
+        >
+          <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
+            <ng-container
+              *ngFor="
+                let checkpoint of responsibilityForm.checkpoints?.slice(0, 1)
+              "
+            >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="checkpoint?.label"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ checkpoint?.label }}</span
+              >
+            </ng-container>
+            <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)="checkpoint.popover()"
+              placement="right"
+              *ngIf="responsibilityForm.checkpoints?.length > 1"
+            >
+              +{{ responsibilityForm.checkpoints?.length - 1 }}
+            </button>
+          </div>
+
+          <!-- <div class="chip-container checkpoints" [class.more-one]="responsibilityForm.checkpoints?.length>1" [class.plus]="responsibilityForm.checkpoints?.length>2">
+                      <span class="chip" *ngFor="let checkpoint of responsibilityForm.checkpoints?.slice(0,1)">{{checkpoint?.label}}</span>
+                      <button class="count" *ngIf="responsibilityForm.checkpoints?.length > 1" type="button" appPopover (click)="checkpoint.popover()" placement="right">+{{responsibilityForm.checkpoints?.length- 1}}</button>
+                  </div> -->
+
+          <button
+            *ngIf="activeSelector !== 'checkpoints'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('checkpoints', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+      </div>
+      <div
+        *ngIf="this.responsibilityForm.checkpoints?.length"
+        class="assessment-text"
+      >
+        <i class="icons alert-icon">&#xe930;</i>
+        <span
+          >You can now use the new <strong>Checkpoints </strong>or
+          <strong>Assessments</strong> feature instead of the old checkpoints
+          functionality to create analytical questions.
+          <button
+            class="remove-btn"
+            (click)="onRemoveCheckpoints('checkpoint')"
+          >
+            Remove Checkpoints
+          </button>
+          to continue.</span
+        >
+      </div>
+      <app-popover #checkpoint [dontCloseonClick]="true">
+        <div class="wf-action-list">
+          <ul class="action-item">
+            <li
+              *ngFor="
+                let checkpoint of responsibilityForm.checkpoints | slice : 1;
+                let j = index
+              "
+            >
+              <div class="avatar-card">
+                <span class="value">
+                  {{ checkpoint?.label }}
+                </span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </app-popover>
+    </div>
+  </div>
+
+  <!-- New  Checkpoints -->
+  <!-- *ngIf="moreOptions.checkpoints" -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.CHECKPOINTS_NEW"
+    [attr.id]="'CHECKPOINTS-NEW'"
+    [class.active]="activeSelector === 'checkpoints-new'"
+  >
+    <div class="left">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg"
+        alt="im"
+        *ngIf="
+          responsibilityForm?.checkpoints?.length == 0 ||
+          activeSelector === 'checkpoints'
+        "
+      />
+
+      <svg
+        class="checkIcon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        *ngIf="checkpointCount > 0 && activeSelector !== 'checkpoints'"
+      >
+        <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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">
+          <!-- {{responsibilityForm.checkpoints|json}}
+                {{responsibilityForm.checkpointInstruction}} -->
+
+          Checkpoints
+          <!-- <span class="checkpoint-version"> V2.0</span> -->
+          <!-- <button  class="button"
+                      (click)="activateSelector('checkpoints-new',true)">+ Add Checkpoints</button> -->
+        </label>
+        <div class="select button-sec" *ngIf="checkpointCount === 0">
+          <input
+            type="text"
+            (click)="activateSelector('checkpoints-new', true)"
+            placeholder="Add checkpoints for this responsibility"
+            readonly
+          />
+          <button
+            (click)="activateSelector('checkpoints-new', true)"
+            type="button"
+          >
+            Add Checkpoints
+          </button>
+        </div>
+        <div class="selected" *ngIf="checkpointCount > 0">
+          <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
+            <i
+              class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+              (click)="onRemoveCheckpoints('new-checkpoints')"
+              >&#xe9ae;</i
+            >
+            <span class="chipName vx-fs-11 vx-label-txt"
+              >{{ checkpointCount }}
+              {{ checkpointCount > 1 ? "Questions" : "Question" }}</span
+            >
+          </div>
+
+          <!-- <div class="chip-container checkpoints" [class.more-one]="checkpointCount > 0">
+                      <span class="chip">
+                          <i class="icons" (click)="onRemoveCheckpoints('new-checkpoints')">&#xe90d;</i>
+                          {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>
+                  </div> -->
+
+          <button
+            *ngIf="activeSelector !== 'checkpoints-new'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('checkpoints-new', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+      </div>
+      <app-popover #checkpoint [dontCloseonClick]="true">
+        <div class="wf-action-list">
+          <ul class="action-item">
+            <li
+              *ngFor="
+                let checkpoint of responsibilityForm.checkpoints | slice : 1;
+                let j = index
+              "
+            >
+              <div class="avatar-card">
+                <span class="value">
+                  {{ checkpoint?.label }}
+                </span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </app-popover>
+    </div>
+  </div>
+
+  <!-- Risk Classification -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.RISK_CLASSIFICATION"
+    [attr.id]="'RISK_CLASSIFICATION'"
+    [class.active]="activeSelector === 'riskCalculator'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'riskCalculator' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg"
+        alt="im"
+      />
+
+      <svg
+        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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">
+          Risk Classification
+          <button
+            (click)="activateSelector('riskCalculator', true)"
+            class="button"
+          >
+            + Risk Calculator
+          </button>
+        </label>
+
+        <div class="classification">
+          <label
+            class="low"
+            *ngFor="let risk of riskClassification"
+            [ngClass]="[risk.class]"
+          >
+            <input
+              type="radio"
+              name="classification"
+              [(ngModel)]="responsibilityForm.riskClass"
+              [value]="risk?.value"
+            />
+            <span>{{ risk?.name }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Reviewer -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.REVIEWER"
+    [attr.id]="'REVIEWER'"
+    [class.active]="
+      activeSelector === 'reviewerFrequency' || activeSelector === 'reviewer'
+    "
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'reviewer' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left" [class.checked]="false">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg"
+        alt=""
+        *ngIf="
+          responsibilityForm?.reviewers?.list?.length == 0 ||
+          activeSelector === 'reviewer'
+        "
+      />
+
+      <svg
+        *ngIf="
+          responsibilityForm?.reviewers?.list?.length > 0 &&
+          activeSelector !== 'reviewer'
+        "
+        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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">Reviewer</label>
+        <div
+          class="select"
+          *ngIf="
+            (responsibilityForm?.reviewers?.list?.length == 0 &&
+              !featureFlag_groups) ||
+            (responsibilityForm?.reviewers?.list?.length == 0 &&
+              responsibilityForm?.groupReviewers?.list?.length == 0 &&
+              featureFlag_groups)
+          "
+        >
+          <input
+            type="text"
+            (click)="activateSelector('reviewer', true)"
+            placeholder="Select Reviewer"
+            readonly
+          />
+        </div>
+        <div
+          class="selected"
+          *ngIf="
+            (responsibilityForm?.reviewers?.list?.length > 0 &&
+              !featureFlag_groups) ||
+            ((responsibilityForm?.reviewers?.list?.length > 0 ||
+              responsibilityForm?.groupReviewers?.list?.length > 0) &&
+              featureFlag_groups)
+          "
+        >
+          <div
+            class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            *ngIf="!featureFlag_groups"
+          >
+            <ng-container
+              *ngFor="
+                let reviewer of responsibilityForm?.reviewers?.list?.slice(0, 1)
+              "
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="remove('reviewer', reviewer)"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="reviewer.member_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ reviewer.member_name }}</span
+              >
+            </ng-container>
+            <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)="reviewer.popover()"
+              placement="right"
+              *ngIf="responsibilityForm?.reviewers?.list?.length > 1"
+            >
+              +{{ responsibilityForm?.reviewers?.list?.slice(1).length }}
+            </button>
+          </div>
+
+          <!-- <div class="chip-container" *ngIf="!featureFlag_groups" [class.more-one]="responsibilityForm?.reviewers?.list?.length>1"
+                      [class.plus]="responsibilityForm?.reviewers?.list?.length>2">
+                      <span class="chip" *ngFor="let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)"><i class="icons" (click)="remove('reviewer',reviewer)">&#xe90d;</i> {{reviewer.member_name}}</span>
+                      <button class="count" *ngIf="responsibilityForm?.reviewers?.list?.length > 2" type="button" appPopover (click)="reviewer.popover()" placement="right">+{{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>
+                  </div> -->
+
+          <div class="vx-d-flex vx-align-center" *ngIf="featureFlag_groups">
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="responsibilityForm?.reviewers?.list.length > 0"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="
+                  remove('reviewer', responsibilityForm?.reviewers?.list[0])
+                "
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="
+                  responsibilityForm?.reviewers?.list[0]?.employee_name
+                "
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{
+                  responsibilityForm?.reviewers?.list[0]?.employee_name
+                }}</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 greenBg"
+                appPopover
+                (click)="user.popover()"
+                placement="right"
+                *ngIf="responsibilityForm?.reviewers?.list?.length > 1"
+              >
+                +{{ responsibilityForm?.reviewers?.list?.length - 1 }}
+              </button>
+            </div>
+            <div
+              class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"
+              *ngIf="
+                responsibilityForm?.reviewers?.list.length > 0 &&
+                responsibilityForm?.groupReviewers?.list?.length > 0
+              "
+            >
+              &
+            </div>
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="responsibilityForm?.groupReviewers?.list.length > 0"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="
+                  remove(
+                    'groupReviewer',
+                    responsibilityForm?.groupReviewers?.list[0]
+                  )
+                "
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="
+                  responsibilityForm?.groupReviewers?.list[0]?.group_name
+                "
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{
+                  responsibilityForm?.groupReviewers?.list[0]?.group_name
+                }}</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)="group.popover()"
+                placement="right"
+                *ngIf="responsibilityForm?.groupReviewers?.list?.length > 1"
+              >
+                +{{ responsibilityForm?.groupReviewers?.list?.length - 1 }}
+              </button>
+            </div>
+          </div>
+
+          <!-- <div class="chip-container" *ngIf="featureFlag_groups">
+                      <div class="chip-inner" *ngIf="responsibilityForm?.reviewers?.list.length > 0 ">
+                          <i class="icons cross vx-mr-1" (click)="remove('reviewer',responsibilityForm?.reviewers?.list[0])" >&#xe90d;</i>
+                          <span class="chip" [appTooltip]="responsibilityForm?.reviewers?.list[0]?.employee_name" placement="bottom-left" type="black" delay="0" [tooltipMandatory]="false"><span class="vx-fs-11 vx-paragraph-txt vx-fw-500">{{responsibilityForm?.reviewers?.list[0]?.employee_name}}</span></span>
+                          <button *ngIf="responsibilityForm?.reviewers?.list?.length > 1" class="count user" appPopover (click)="user.popover()" placement="left"> +{{responsibilityForm?.reviewers?.list?.length - 1}}</button>
+                      </div>
+                      <span class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2" *ngIf="responsibilityForm?.reviewers?.list.length > 0 && responsibilityForm?.groupReviewers?.list?.length > 0">&</span>
+                      <div class="chip-inner" *ngIf="responsibilityForm?.groupReviewers?.list.length > 0 " >
+                          <i class="icons cross vx-mr-1" (click)="remove('groupReviewer',responsibilityForm?.groupReviewers?.list[0])">&#xe90d;</i>
+                          <span class="chip" [appTooltip]="responsibilityForm?.groupReviewers?.list[0]?.group_name" placement="bottom-left" type="black" delay="0" [tooltipMandatory]="false"><span class="vx-fs-11 vx-paragraph-txt vx-fw-500">{{responsibilityForm?.groupReviewers?.list[0]?.group_name}}</span></span>
+                          <button *ngIf="responsibilityForm?.groupReviewers?.list?.length > 1" class="count" appPopover (click)="group.popover()" placement="right">+{{responsibilityForm?.groupReviewers?.list?.length - 1}}</button>
+
+                      </div>
+                  </div> -->
+
+          <button
+            *ngIf="activeSelector !== 'reviewer'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('reviewer', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <app-cs-radio
+          [checked]="responsibilityForm.reviewers.sequentialWorkflow"
+          [name]="'reviewer'"
+          (checkedEvent)="onReviewerWorkflowChange('sequential')"
+          [class.disabled]="
+            responsibilityForm?.groupReviewers?.list?.length > 0
+          "
+        >
+          SEQUENTIAL<i
+            class="icons"
+            [appTooltip]="
+              'The responsibility will be sent for review one at a time in the sequence defined by you.'
+            "
+            placement="bottom-right"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          >
+        </app-cs-radio>
+        <app-cs-radio
+          [checked]="!responsibilityForm.reviewers.sequentialWorkflow"
+          [name]="'reviewer'"
+          (checkedEvent)="onReviewerWorkflowChange('anyReviewer')"
+        >
+          ANY REVIEWER CAN MARK THIS AS REVIEWED<i
+            class="icons"
+            [appTooltip]="
+              'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'
+            "
+            placement="bottom-right"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          >
+        </app-cs-radio>
+        <app-popover #reviewer [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let reviewer of responsibilityForm?.reviewers?.list
+                    | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('reviewer', reviewer)"
+                      >&#xe90d;</i
+                    >
+                    {{ reviewer.member_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <app-popover #user [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let reviewer of responsibilityForm?.reviewers?.list
+                    | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('reviewer', reviewer)"
+                      >&#xe90d;</i
+                    >
+                    {{ reviewer.member_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <app-popover #group [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let group of responsibilityForm?.groupReviewers?.list
+                    | slice : 1;
+                  let i = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('groupReviewer', group)"
+                      >&#xe90d;</i
+                    >
+                    {{ group.group_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+      </div>
+    </div>
+  </div>
+
+  <!-- Overseer -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.OVERSEER"
+    [attr.id]="'OVERSEER'"
+    [class.active]="
+      activeSelector === 'overseerNotify' || activeSelector === 'overseer'
+    "
+    [class.disabled]="
+      activeSelector &&
+      !['overseerNotify', 'overseerNotify'].includes(activeSelector) &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left" [class.checked]="false">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg"
+        alt=""
+        *ngIf="
+          (responsibilityForm?.overseers?.list?.length == 0 &&
+            responsibilityForm?.overseers?.notifyList?.length == 0) ||
+          activeSelector === 'overseerNotify' ||
+          activeSelector === 'overseer'
+        "
+      />
+      <svg
+        class="checkIcon"
+        *ngIf="
+          (responsibilityForm?.overseers?.list?.length > 0 ||
+            responsibilityForm?.overseers?.notifyList?.length > 0) &&
+          !(
+            activeSelector === 'overseerNotify' || activeSelector === 'overseer'
+          )
+        "
+        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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">Oversight</label>
+        <div
+          class="select"
+          *ngIf="
+            (responsibilityForm?.overseers?.list?.length == 0 &&
+              !featureFlag_groups) ||
+            (responsibilityForm?.overseers?.list?.length == 0 &&
+              responsibilityForm?.overseersGroups?.list?.length == 0 &&
+              featureFlag_groups)
+          "
+        >
+          <input
+            type="text"
+            (click)="activateSelector('overseer', true)"
+            placeholder="Who should have oversight of the responsibility?"
+            readonly
+          />
+        </div>
+        <div
+          class="selected"
+          *ngIf="
+            (responsibilityForm?.overseers?.list?.length > 0 &&
+              !featureFlag_groups) ||
+            ((responsibilityForm?.overseers?.list?.length > 0 ||
+              responsibilityForm?.overseersGroups?.list?.length > 0) &&
+              featureFlag_groups)
+          "
+        >
+          <div
+            class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            *ngIf="!featureFlag_groups"
+          >
+            <ng-container
+              *ngFor="
+                let overseer of responsibilityForm?.overseers?.list?.slice(0, 1)
+              "
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="remove('overseer', overseer)"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="overseer.member_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ overseer.member_name }}</span
+              >
+            </ng-container>
+            <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)="overseers.popover()"
+              placement="right"
+              *ngIf="responsibilityForm?.overseers?.list?.length > 1"
+            >
+              +{{ responsibilityForm?.overseers?.list?.slice(1).length }}
+            </button>
+          </div>
+
+          <!-- <div class="chip-container" [class.more-one]="responsibilityForm?.overseers?.list?.length>1" [class.plus]="responsibilityForm?.overseers?.list?.length>2" *ngIf="!featureFlag_groups" >
+                      <span class="chip" *ngFor="let overseer of responsibilityForm?.overseers?.list?.slice(0,2)"><i class="icons" (click)="remove('overseer',overseer)">&#xe90d;</i> {{overseer.member_name}}</span>
+                      <button class="count" *ngIf="responsibilityForm?.overseers?.list?.length > 2" type="button" appPopover (click)="overseers.popover()" placement="right">+{{responsibilityForm?.overseers?.list?.slice(2).length}}</button>
+                  </div> -->
+
+          <div class="vx-d-flex vx-align-center" *ngIf="featureFlag_groups">
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="responsibilityForm?.overseers?.list.length > 0"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="
+                  remove('overseer', responsibilityForm?.overseers?.list[0])
+                "
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="
+                  responsibilityForm?.overseers?.list[0]?.employee_name
+                "
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{
+                  responsibilityForm?.overseers?.list[0]?.employee_name
+                }}</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 greenBg"
+                appPopover
+                (click)="overseerUser.popover()"
+                placement="right"
+                *ngIf="responsibilityForm?.overseers?.list?.length > 1"
+              >
+                +{{ responsibilityForm?.overseers?.list?.length - 1 }}
+              </button>
+            </div>
+            <span
+              class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"
+              *ngIf="
+                responsibilityForm?.overseers?.list.length > 0 &&
+                responsibilityForm?.overseersGroups?.list?.length > 0
+              "
+              >&</span
+            >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="responsibilityForm?.overseersGroups?.list?.length > 0"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="
+                  remove(
+                    'overseerGroup',
+                    responsibilityForm?.overseersGroups?.list[0]
+                  )
+                "
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="
+                  responsibilityForm?.overseersGroups?.list[0].group_name
+                "
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{
+                  responsibilityForm?.overseersGroups?.list[0].group_name
+                }}</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)="overseerGroup.popover()"
+                placement="right"
+                *ngIf="responsibilityForm?.overseersGroups?.list?.length > 1"
+              >
+                +{{ responsibilityForm?.overseersGroups?.list?.length - 1 }}
+              </button>
+            </div>
+          </div>
+
+          <!-- <div class="chip-container" *ngIf="featureFlag_groups">
+                      <div class="chip-inner" *ngIf="responsibilityForm?.overseers?.list.length > 0" >
+                          <i class="icons cross vx-mr-1" (click)="remove('overseer',responsibilityForm?.overseers?.list[0])">&#xe90d;</i>
+                          <span class="chip" [appTooltip]="responsibilityForm?.overseers?.list[0]?.employee_name" placement="bottom-left" type="black" delay="0" [tooltipMandatory]="false"><span class="vx-fs-11 vx-paragraph-txt vx-fw-500">{{responsibilityForm?.overseers?.list[0]?.employee_name}}</span></span>
+                          <button *ngIf="responsibilityForm?.overseers?.list?.length > 1" class="count user" appPopover (click)="overseerUser.popover()" placement="left"> +{{responsibilityForm?.overseers?.list?.length -1}}</button>
+                      </div>
+                      <span class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"  *ngIf="responsibilityForm?.overseers?.list.length > 0 && responsibilityForm?.overseersGroups?.list?.length > 0" >&</span>
+                      <div class="chip-inner" *ngIf="responsibilityForm?.overseersGroups?.list?.length > 0 " >
+                          <i class="icons cross vx-mr-1" (click)="remove('overseerGroup',responsibilityForm?.overseersGroups?.list[0])">&#xe90d;</i>
+                          <span class="chip" [appTooltip]="responsibilityForm?.overseersGroups?.list[0].group_name" placement="bottom-left" type="black" delay="0" [tooltipMandatory]="false"><span class="vx-fs-11 vx-paragraph-txt vx-fw-500"  >{{responsibilityForm?.overseersGroups?.list[0].group_name}}</span></span>
+                          <button *ngIf="responsibilityForm?.overseersGroups?.list?.length > 1" class="count" appPopover (click)="overseerGroup.popover()" placement="right">+{{responsibilityForm?.overseersGroups?.list?.length -1}}</button>
+                      </div>
+                  </div> -->
+          <button
+            *ngIf="activeSelector !== 'overseer'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('overseer', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+
+        <div
+          class="select"
+          *ngIf="
+            (responsibilityForm?.overseers?.notifyList?.length == 0 &&
+              !featureFlag_groups) ||
+            (responsibilityForm?.overseers?.notifyList?.length == 0 &&
+              responsibilityForm?.overseersGroups?.notifyList?.length == 0 &&
+              featureFlag_groups)
+          "
+        >
+          <input
+            type="text"
+            (click)="activateSelector('overseerNotify', true)"
+            placeholder="Who should be notified if the responsibility is not complet..."
+            readonly
+            [appTooltip]="
+              'Who should be notified if the responsibility is not completed?'
+            "
+            placement="bottom"
+            delay="0"
+            [tooltipMandatory]="true"
+          />
+        </div>
+        <div
+          class="selected"
+          *ngIf="
+            (responsibilityForm?.overseers?.notifyList?.length > 0 &&
+              !featureFlag_groups) ||
+            ((responsibilityForm?.overseers?.notifyList?.length > 0 ||
+              responsibilityForm?.overseersGroups?.notifyList?.length > 0) &&
+              featureFlag_groups)
+          "
+        >
+          <div
+            class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            *ngIf="!featureFlag_groups"
+          >
+            <ng-container
+              *ngFor="
+                let overseer of responsibilityForm?.overseers?.notifyList?.slice(
+                  0,
+                  1
+                )
+              "
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="remove('overseerNotifyList', overseer)"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="overseer.member_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ overseer.member_name }}</span
+              >
+            </ng-container>
+            <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)="notify.popover()"
+              placement="right"
+              *ngIf="responsibilityForm?.overseers?.notifyList?.length > 1"
+            >
+              +{{ responsibilityForm?.overseers?.notifyList?.slice(1).length }}
+            </button>
+          </div>
+
+          <!-- <div class="chip-container" [class.more-one]="responsibilityForm?.overseers?.notifyList?.length>1" [class.plus]="responsibilityForm?.overseers?.notifyList?.length>2" *ngIf="!featureFlag_groups">
+                      <span class="chip" *ngFor="let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)"><i class="icons" (click)="remove('overseerNotifyList',overseer)">&#xe90d;</i> {{overseer.member_name}}</span>
+                      <button class="count" *ngIf="responsibilityForm?.overseers?.notifyList?.length > 2" type="button" appPopover (click)="notify.popover()" placement="right">+{{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>
+                  </div> -->
+
+          <div class="vx-d-flex vx-align-center">
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="responsibilityForm?.overseers?.notifyList.length > 0"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="
+                  remove(
+                    'overseerNotifyList',
+                    responsibilityForm?.overseers?.notifyList[0]
+                  )
+                "
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="
+                  responsibilityForm?.overseers?.notifyList[0]?.employee_name
+                "
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{
+                  responsibilityForm?.overseers?.notifyList[0]?.employee_name
+                }}</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 greenBg"
+                appPopover
+                (click)="notifyUser.popover()"
+                placement="right"
+                *ngIf="responsibilityForm?.overseers?.notifyList?.length > 1"
+              >
+                +{{ responsibilityForm?.overseers?.notifyList?.length - 1 }}
+              </button>
+            </div>
+            <span
+              class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"
+              *ngIf="
+                responsibilityForm?.overseers?.notifyList.length > 0 &&
+                responsibilityForm?.overseersGroups?.notifyList?.length > 0
+              "
+              >&</span
+            >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="
+                responsibilityForm?.overseersGroups?.notifyList?.length > 0
+              "
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="
+                  remove(
+                    'overseerGroupNotifyList',
+                    responsibilityForm?.overseersGroups?.notifyList[0]
+                  )
+                "
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="
+                  responsibilityForm?.overseersGroups?.notifyList[0]?.group_name
+                "
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{
+                  responsibilityForm?.overseersGroups?.notifyList[0]?.group_name
+                }}</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)="notifyGroup.popover()"
+                placement="right"
+                *ngIf="
+                  responsibilityForm?.overseersGroups?.notifyList?.length > 1
+                "
+              >
+                +{{
+                  responsibilityForm?.overseersGroups?.notifyList?.length - 1
+                }}
+              </button>
+            </div>
+          </div>
+
+          <!-- <div class="chip-container" *ngIf="featureFlag_groups">
+                      <div class="chip-inner" *ngIf="responsibilityForm?.overseers?.notifyList.length > 0">
+                          <i class="icons cross vx-mr-1" (click)="remove('overseerNotifyList',responsibilityForm?.overseers?.notifyList[0])">&#xe90d;</i>
+                          <span class="chip" [appTooltip]="responsibilityForm?.overseers?.notifyList[0]?.employee_name" placement="bottom-left" type="black" delay="0" [tooltipMandatory]="false"><span class="vx-fs-11 vx-paragraph-txt vx-fw-500">{{responsibilityForm?.overseers?.notifyList[0]?.employee_name}}</span></span>
+                          <button *ngIf="responsibilityForm?.overseers?.notifyList?.length > 1" class="count user" appPopover (click)="notifyUser.popover()" placement="left"> +{{responsibilityForm?.overseers?.notifyList?.length - 1}}</button>
+                      </div>
+                      <span class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"  *ngIf="responsibilityForm?.overseers?.notifyList.length > 0 && responsibilityForm?.overseersGroups?.notifyList?.length > 0" >&</span>
+                      <div class="chip-inner" *ngIf="responsibilityForm?.overseersGroups?.notifyList?.length > 0 " >
+                          <i class="icons cross vx-mr-1" (click)="remove('overseerGroupNotifyList',responsibilityForm?.overseersGroups?.notifyList[0])">&#xe90d;</i>
+                          <span class="chip" [appTooltip]="responsibilityForm?.overseersGroups?.notifyList[0]?.group_name" placement="bottom-left" type="black" delay="0" [tooltipMandatory]="false"><span class="vx-fs-11 vx-paragraph-txt vx-fw-500"  >{{responsibilityForm?.overseersGroups?.notifyList[0]?.group_name}}</span></span>
+                          <button *ngIf="responsibilityForm?.overseersGroups?.notifyList?.length > 1" class="count" appPopover (click)="notifyGroup.popover()" placement="right">+{{responsibilityForm?.overseersGroups?.notifyList?.length - 1}}</button>
+                      </div>
+                  </div> -->
+          <button
+            *ngIf="activeSelector !== 'overseerNotify'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('overseerNotify', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <app-popover #overseers [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let overseer of responsibilityForm?.overseers?.list
+                    | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('overseer', overseer)"
+                      >&#xe90d;</i
+                    >
+                    {{ overseer?.member_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <app-popover #overseerUser [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let overseers of responsibilityForm?.overseers?.list
+                    | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('overseer', overseers)"
+                      >&#xe90d;</i
+                    >
+                    {{ overseers?.member_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <app-popover #overseerGroup [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let overseer of responsibilityForm?.overseersGroups?.list
+                    | slice : 1;
+                  let i = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('overseerGroup', overseer)"
+                      >&#xe90d;</i
+                    >
+                    {{ overseer?.group_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <app-popover #notify [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let overseer of responsibilityForm?.overseers?.notifyList
+                    | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i
+                      class="icons"
+                      (click)="remove('overseerNotifyList', overseer)"
+                      >&#xe90d;</i
+                    >
+                    {{ overseer?.member_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <app-popover #notifyUser [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let overseer of responsibilityForm?.overseers?.notifyList
+                    | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i
+                      class="icons"
+                      (click)="remove('overseerNotifyList', overseer)"
+                      >&#xe90d;</i
+                    >
+                    {{ overseer?.member_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <app-popover #notifyGroup [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let group of responsibilityForm?.overseersGroups?.notifyList
+                    | slice : 1;
+                  let i = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i
+                      class="icons"
+                      (click)="remove('overseerGroupNotifyList', group)"
+                      >&#xe90d;</i
+                    >
+                    {{ group?.group_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+      </div>
+    </div>
+  </div>
+
+  <!-- Assurance -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.ASSURANCE"
+    [attr.id]="'ASSURANCE'"
+    [class.active]="activeSelector === 'assurance'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'assurance' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left" [class.checked]="false">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg"
+        alt=""
+        *ngIf="
+          responsibilityForm?.assuranceList?.length == 0 ||
+          activeSelector === 'assurance'
+        "
+      />
+
+      <svg
+        *ngIf="
+          responsibilityForm?.assuranceList?.length > 0 &&
+          activeSelector !== 'assurance'
+        "
+        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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">Assurance</label>
+        <div
+          class="select"
+          *ngIf="responsibilityForm?.assuranceList?.length == 0"
+        >
+          <div
+            class="custom-input"
+            (click)="activateSelector('assurance', true)"
+            aria-placeholder="Select the test plan categories that you would like to add this responsibility to."
+          ></div>
+        </div>
+        <div
+          class="selected"
+          *ngIf="responsibilityForm?.assuranceList?.length > 0"
+        >
+          <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
+            <ng-container
+              *ngFor="
+                let assurance of responsibilityForm?.assuranceList?.slice(0, 1)
+              "
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="remove('assurance', assurance)"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="assurance.category_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ assurance.category_name }}</span
+              >
+            </ng-container>
+            <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)="assurance.popover()"
+              placement="right"
+              *ngIf="responsibilityForm?.assuranceList?.length > 1"
+            >
+              +{{ responsibilityForm?.assuranceList?.slice(1).length }}
+            </button>
+          </div>
+
+          <button
+            *ngIf="activeSelector !== 'assurance'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('assurance', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <app-popover #assurance [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let assurance of responsibilityForm?.assuranceList
+                    | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('assurance', assurance)"
+                      >&#xe90d;</i
+                    >
+                    {{ assurance.category_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+      </div>
+    </div>
+  </div>
+
+  <!-- Requires Audit -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0"
+    [attr.id]="'REQUIRES_AUDIT'"
+    [class.active]="activeSelector === 'requires_audit'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'requires_audit' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left" [class.checked]="false">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg"
+        alt=""
+        *ngIf="
+          responsibilityForm?.requiresAuditList?.length == 0 ||
+          activeSelector === 'requires_audit'
+        "
+      />
+
+      <svg
+        *ngIf="
+          responsibilityForm?.requiresAuditList?.length > 0 &&
+          activeSelector !== 'requires_audit'
+        "
+        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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">REQUIRES AUDIT?</label>
+        <div
+          class="select"
+          *ngIf="responsibilityForm?.requiresAuditList?.length == 0"
+        >
+          <input
+            type="text"
+            placeholder="If yes, select an Audit Category."
+            readonly
+            (click)="activateSelector('requires_audit', true)"
+          />
+        </div>
+        <div
+          class="selected"
+          *ngIf="responsibilityForm?.requiresAuditList?.length > 0"
+        >
+          <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
+            <i
+              class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+              (click)="remove('requires_audit', overseer)"
+              >&#xe9ae;</i
+            >
+            <span
+              class="chipName vx-fs-11 vx-label-txt"
+              [appTooltip]="
+                responsibilityForm?.requiresAuditList[0]?.category_name
+              "
+              placement="bottom-left"
+              delay="0"
+              type="black"
+              [tooltipMandatory]="false"
+              >{{
+                responsibilityForm?.requiresAuditList[0]?.category_name
+              }}</span
+            >
+          </div>
+
+          <button
+            class="edit"
+            type="button"
+            (click)="activateSelector('requires_audit', true)"
+          >
+            <i class="icons">&#xe90c;</i> Edit
+          </button>
+          <!-- class="icons">&#xe9ba;</i>
+                      Edit</button> -->
+        </div>
+        <ng-container *ngIf="responsibilityForm?.requiresAuditList?.length">
+          <label class="vx-control-panel vx-mt-8">
+            SAMPLE SIZE
+            <app-cs-switch
+              [(ngValue)]="isSample"
+              (ngValueChange)="switchEnable($event)"
+            ></app-cs-switch>
+          </label>
+          <div class="sample-part" [class.disabled]="!isSample">
+            <app-cs-radio
+              value="0"
+              class="sample-radio"
+              (click)="selectedSampleData(0)"
+              [checked]="selectedSample === 0"
+            >
+              <div class="name">COUNT</div>
+              <input
+                type="number"
+                placeholder="--"
+                (keypress)="checkInputValue($event)"
+                [(ngModel)]="sampleValue"
+              />
+            </app-cs-radio>
+            <div class="or">OR</div>
+            <app-cs-radio
+              value="1"
+              class="sample-radio"
+              (click)="selectedSampleData(1)"
+              [checked]="selectedSample === 1"
+            >
+              <div class="name">PERCENTAGE</div>
+              <input
+                type="number"
+                (keypress)="checkInputValue($event)"
+                [(ngModel)]="samplePercentage"
+                placeholder="--"
+              />
+            </app-cs-radio>
+          </div>
+          <label class="vx-control-panel vx-mt-8"
+            >SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label
+          >
+          <div class="reminder-part">
+            Send reminder every
+            <input
+              type="number"
+              value="2"
+              [(ngModel)]="sendAuditRemindersValue"
+            />
+            Day by
+            <div class="picker-group">
+              <input
+                class="time"
+                aria-label="12hr format"
+                [(ngModel)]="auditTime"
+                [ngxTimepicker]="dailyTime"
+                placeholder="auditTime.toUpperCase()"
+                type="text"
+                [min]="currentTime"
+                readonly
+              />
+              <i class="icons">&#xe955;</i>
+              <ngx-material-timepicker #dailyTime [defaultTime]="auditTime">
+              </ngx-material-timepicker>
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+
+  <!-- Link of GRC objects -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="moreOptions?.GRC_OBJECTS && responsibilityForm.rc.length > 0"
+    [attr.id]="'GRC_OBJECTS'"
+    [class.active]="activeSelector === 'GRC_OBJECTS'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'GRC_OBJECTS' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left" [class.checked]="false">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg"
+        alt=""
+        *ngIf="
+          responsibilityForm?.selectedGRCObjects?.length == 0 ||
+          activeSelector === 'GRC_OBJECTS'
+        "
+      />
+
+      <svg
+        *ngIf="
+          responsibilityForm?.selectedGRCObjects?.length > 0 &&
+          activeSelector !== 'GRC_OBJECTS'
+        "
+        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="right">
+      <div class="vx-form-group">
+        <label class="vx-control-panel">LINK GRC OBJECT(S)</label>
+        <div
+          class="select"
+          *ngIf="responsibilityForm?.selectedGRCObjects?.length === 0"
+        >
+          <input
+            type="text"
+            placeholder="Select GRC object(s) to link with this responsibility"
+            readonly
+            (click)="activateSelector('GRC_OBJECTS', true)"
+          />
+        </div>
+        <ng-container *ngIf="responsibilityForm?.selectedGRCObjects?.length">
+          <ng-container
+            *ngFor="let selectedGRC of GRC_TYPE_ARRAY; let i = index"
+          >
+            <div
+              *ngIf="grcDataWithTypes[selectedGRC]?.length"
+              class="selected vx-mb-2"
+            >
+              <div
+                class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              >
+                <ng-container
+                  *ngFor="let grc of grcDataWithTypes[selectedGRC]?.slice(0, 1)"
+                >
+                  <i
+                    class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                    (click)="remove('GRC_OBJECTS', grc, 0)"
+                    >&#xe9ae;</i
+                  >
+                  <div
+                    class="workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center"
+                  >
+                    {{ selectedGRC | titlecase }}
+                  </div>
+
+                  <span
+                    class="chipName vx-fs-11 vx-label-txt"
+                    [appTooltip]="grc?.name"
+                    placement="bottom-left"
+                    delay="0"
+                    type="black"
+                    [tooltipMandatory]="false"
+                    >{{ grc?.name }}</span
+                  >
+                </ng-container>
+
+                <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)="popoverGRC.popover()"
+                  placement="left"
+                  *ngIf="grcDataWithTypes[selectedGRC]?.length > 1"
+                >
+                  +{{ grcDataWithTypes[selectedGRC].length - 1 }}
+                </button>
+              </div>
+
+              <button
+                *ngIf="activeSelector !== 'GRC'"
+                class="edit"
+                type="button"
+                (click)="
+                  selectedGRCTab = grcDataWithTypes[selectedGRC][0]?.type;
+                  getOtherGRCObjects();
+                  activateSelector('GRC_OBJECTS', true)
+                "
+              >
+                <i class="icons">&#xe9ba;</i> Edit
+              </button>
+            </div>
+            <app-popover #popoverGRC [dontCloseonClick]="true">
+              <div class="wf-action-list">
+                <ul class="action-item">
+                  <li
+                    *ngFor="
+                      let grc of grcDataWithTypes[selectedGRC] | slice : 1;
+                      let j = index
+                    "
+                  >
+                    <div class="avatar-card">
+                      <span class="value">
+                        <i
+                          class="icons"
+                          (click)="remove('GRC_OBJECTS', grc, j + 1)"
+                          >&#xe90d;</i
+                        >
+                        {{ grc.name }}
+                      </span>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </app-popover>
+          </ng-container>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>
+
+<app-users-radio-list
+  *ngIf="activeSelector === 'assignors'"
+  [usersList]="assignorsList"
+  [selectedUsers]="responsibilityForm.assignors.list"
+  [itemEmailKey]="'member_email'"
+  [userIdKey]="'member_id'"
+  [itemNameKey]="'member_name'"
+  (saveSelectedList)="saveSelectedList('assignors', $event)"
+  (closeUsersList)="activeDeselector()"
+>
+</app-users-radio-list>
+
+<ng-container *ngIf="activeSelector === 'assignees'">
+  <app-group-users-list
+    *ngIf="
+      isEntrust || responsibilityForm?.assignees?.whoCanComplete === 'ANY_ONE'
+    "
+    [openedFrom]="openedFrom"
+    [usersList]="assigneesList"
+    [disabledId]="disableAssigneeIds"
+    [fromResponsibility]="'Assignee'"
+    [reviewerIds]="reviewerIds"
+    [overseerIds]="overseerIds"
+    [assignorId]="assignorId"
+    [groupsList]="groupsList"
+    [assigneeGroupsList]="groupAssigneeList"
+    [selectedUsers]="responsibilityForm?.assignees?.list"
+    [selectedGroups]="responsibilityForm?.assigneeGroups?.list"
+    [userIdKey]="'my_member_id'"
+    [groupIdKey]="'group_id'"
+    [loader]="userListLoader || assignorsListLoader"
+    (saveSelectedList)="saveSelectedList('assignees', $event)"
+    (closeUsersList)="activeDeselector()"
+    [groupsEnabled]="featureFlag_groups"
+  >
+  </app-group-users-list>
+  <app-users-radio-list
+    *ngIf="
+      !isEntrust && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'
+    "
+    [itemEmailKey]="'employee_email'"
+    [usersList]="assigneesList"
+    [selectedUsers]="responsibilityForm.assignees.list"
+    [userIdKey]="'employee_id'"
+    [itemNameKey]="'employee_name'"
+    [disabledId]="disableRadioAssignee"
+    [fromResponsibility]="'Assignee'"
+    [reviewerIds]="reviewerIds"
+    [overseerIds]="overseerIds"
+    [assignorId]="assignorId"
+    (saveSelectedList)="saveSelectedList('assignees', $event)"
+    (closeUsersList)="activeDeselector()"
+  >
+  </app-users-radio-list>
+</ng-container>
+
+<app-checkpoints
+  *ngIf="activeSelector === 'checkpoints'"
+  [checkpointInstruction]="responsibilityForm?.checkpointInstruction"
+  [checkpointData]="responsibilityForm?.checkpoints"
+  (saveCheckPoint)="saveSelectedList('checkpoints', $event)"
+  (closeCheckPoint)="activeDeselector()"
+></app-checkpoints>
+<app-frequency-container
+  *ngIf="activeSelector === 'frequency'"
+  [frequencyDetails]="frequencyDetails"
+  [feature]="feature"
+  (selectedFrequency)="frequencyData($event)"
+  [mode]="'responsibility'"
+  (closeFrequency)="activeDeselector()"
+>
+</app-frequency-container>
+
+<app-responsibility-centers-list
+  *ngIf="activeSelector === 'rc'"
+  [responsibilityCentersList]="responsibilityCentersList"
+  [radioSelection]="
+    mode == 'EDIT' && responsibilityCenterType === 0 ? true : false
+  "
+  [selectedResponsibilityCenters]="responsibilityForm.rc"
+  [rcIdKey]="'item_id'"
+  (saveSelectedList)="saveSelectedList('rc', $event)"
+  (closeRcList)="activeDeselector()"
+>
+</app-responsibility-centers-list>
+
+<app-category-multi-select
+  *ngIf="activeSelector === 'category'"
+  [categoryList]="categories"
+  [allCategories]="allCategories"
+  [categoryIdKey]="'category_id'"
+  [selectedCategories]="responsibilityForm.category"
+  (saveSelectedCategory)="saveSelectedList('category', $event)"
+  (closeCategoriesList)="activeDeselector()"
+>
+</app-category-multi-select>
+
+<!-- [hideProgramsList]="(selectedProgram  && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false" -->
+<app-program-listing
+  *ngIf="activeSelector === 'program'"
+  [feature]="feature"
+  [programsList]="programsList"
+  [selectedCategories]="responsibilityForm.category | refDisconnect"
+  [selectedProgram]="responsibilityForm.program | refDisconnect"
+  (saveSelectedProgram)="saveSelectedList('program', $event)"
+  (closeEvent)="activeDeselector()"
+  [linkedProgram]="responsibilityForm?.linkedProgram"
+  [mode]="
+    this.selectedProgram?.programType === 0 &&
+    this.selectedProgram?.name?.toLowerCase() === 'uncategorized'
+      ? ''
+      : mode
+  "
+  [openedFrom]="openedFrom"
+  [responsibilityId]="responsibilityId"
+></app-program-listing>
+
+<app-owner-list
+  *ngIf="activeSelector === 'reviewer' && !featureFlag_groups"
+  [listHeading]="'Select a Reviewer'"
+  [singularText]="'User selected'"
+  [pluralText]="'Users selected'"
+  [usersList]="allUsersList"
+  [showWorkflow]="true"
+  [selectedUsers]="responsibilityForm.reviewers.list"
+  [userIdKey]="'employee_id'"
+  [itemEmailKey]="'employee_email'"
+  [itemNameKey]="'member_name'"
+  [disabledIds]="disableReviewerIds"
+  (saveSelectedList)="
+    saveSelectedList('reviewer', $event);
+    activateSelector('reviewerFrequency', true)
+  "
+  (closeUsersList)="activeDeselector()"
+  [mode]="mode"
+  [fromResponsibility]="'Reviewer'"
+  [assignorId]="assignorId"
+  [assigneeIds]="assigneeIds"
+  [overseerIds]="overseerIds"
+  [reviewerWorkflowType]="
+    responsibilityForm?.reviewers?.sequentialWorkflow
+      ? 'SEQUENTIAL'
+      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'
+  "
+  (reviewerWorkflowTypeChange)="reviewerTypeChange($event)"
+>
+</app-owner-list>
+<user-group-list
+  *ngIf="activeSelector === 'reviewer' && featureFlag_groups"
+  [selectedReviewer]="true"
+  [userlist]="reviewerMemberIdsList"
+  [groupEnabled]="true"
+  [groupList]="groupReviewerList"
+  [selectedGroups]="responsibilityForm?.groupReviewers?.list"
+  [selectedUsers]="responsibilityForm?.reviewers?.list"
+  (cancel)="activeDeselector()"
+  (save)="
+    saveSelectedList('reviewer', $event);
+    activateSelector('reviewerFrequency', true)
+  "
+  [mode]="mode"
+  [disabledIds]="disableReviewerIds"
+  [fromResponsibility]="'Reviewer'"
+  [assignorId]="assignorId"
+  [assigneeIds]="assigneeIds"
+  [overseerIds]="overseerIds"
+  [loading]="userListLoader || assignorsListLoader"
+  (reviewerWorkflowTypeChange)="reviewerTypeChange($event)"
+  [reviewerWorkflowType]="
+    responsibilityForm?.reviewers?.sequentialWorkflow
+      ? 'SEQUENTIAL'
+      : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'
+  "
+  [featureflag]="featureFlag_groups"
+>
+</user-group-list>
+<app-owner-list
+  *ngIf="activeSelector === 'overseer' && !featureFlag_groups"
+  [singularText]="'User selected'"
+  [pluralText]="'Users selected'"
+  [usersList]="allUsersList"
+  [selectedUsers]="responsibilityForm.overseers.list"
+  [userIdKey]="'employee_id'"
+  [fromResponsibility]="'Overseer'"
+  [assignorId]="assignorId"
+  [assigneeIds]="assigneeIds"
+  [reviewerIds]="reviewerIds"
+  [itemNameKey]="'member_name'"
+  (saveSelectedList)="saveSelectedList('overseer', $event)"
+  [disabledIds]="disableOverseerIds"
+  (closeUsersList)="activeDeselector()"
+  [itemEmailKey]="'employee_email'"
+>
+</app-owner-list>
+<user-group-list
+  *ngIf="activeSelector === 'overseer' && featureFlag_groups"
+  [groupEnabled]="true"
+  [groupList]="groupOverseerList"
+  [selectedGroups]="responsibilityForm?.overseersGroups?.list"
+  [userlist]="overseersList"
+  [selectedUsers]="responsibilityForm.overseers.list"
+  [disabledIds]="disableOverseerIds"
+  [fromResponsibility]="'Overseer'"
+  [assignorId]="assignorId"
+  [assigneeIds]="assigneeIds"
+  [reviewerIds]="reviewerIds"
+  [loading]="userListLoader || assignorsListLoader"
+  (save)="saveSelectedList('overseer', $event)"
+  (cancel)="activeDeselector()"
+  [featureflag]="featureFlag_groups"
+>
+</user-group-list>
+
+<app-owner-list
+  *ngIf="activeSelector === 'overseerNotify' && !featureFlag_groups"
+  [singularText]="'User selected'"
+  [pluralText]="'Users selected'"
+  [usersList]="allUsersList"
+  [disabledIds]="disableOverseerIds"
+  [fromResponsibility]="'Overseer'"
+  [assignorId]="assignorId"
+  [assigneeIds]="assigneeIds"
+  [reviewerIds]="reviewerIds"
+  [selectedUsers]="responsibilityForm.overseers.notifyList"
+  [userIdKey]="'employee_id'"
+  [itemNameKey]="'member_name'"
+  (saveSelectedList)="saveSelectedList('overseerNotify', $event)"
+  (closeUsersList)="activeDeselector()"
+  [itemEmailKey]="'employee_email'"
+></app-owner-list>
+<user-group-list
+  *ngIf="activeSelector === 'overseerNotify' && featureFlag_groups"
+  [userlist]="overseersList"
+  [groupEnabled]="true"
+  [groupList]="groupOverseerList"
+  [selectedGroups]="responsibilityForm?.overseersGroups?.notifyList"
+  [selectedUsers]="responsibilityForm.overseers.notifyList"
+  [disabledIds]="disableOverseerIds"
+  [fromResponsibility]="'Overseer'"
+  [assignorId]="assignorId"
+  [assigneeIds]="assigneeIds"
+  [reviewerIds]="reviewerIds"
+  [loading]="userListLoader || assignorsListLoader"
+  (save)="saveSelectedList('overseerNotify', $event)"
+  (cancel)="activeDeselector()"
+  [featureflag]="featureFlag_groups"
+>
+</user-group-list>
+
+<app-owner-list
+  *ngIf="activeSelector === 'assurance'"
+  [singularText]="'Test Category selected'"
+  [pluralText]="'Test Categories selected'"
+  [searchPlaceholder]="'Search Test Category...'"
+  [listHeading]="'Select Test Categories'"
+  [usersList]="assuranceCategoriesList"
+  [noDataText]="'No Test Categories Found'"
+  [selectedUsers]="responsibilityForm.assuranceList"
+  [userIdKey]="'category_id'"
+  [itemEmailKey]="'category_name'"
+  [itemNameKey]="'category_name'"
+  (saveSelectedList)="saveSelectedList('assurance', $event)"
+  (closeUsersList)="activeDeselector()"
+  [searchPlaceholder]="'Search Category'"
+>
+</app-owner-list>
+
+<app-audit-category-list
+  *ngIf="activeSelector === 'requires_audit'"
+  (closeList)="activeDeselector()"
+  [auditCategory]="assuranceRequiresAuditList"
+  (saveSelectedList)="saveSelectedList('requires_audit', $event)"
+  [selectedData]="responsibilityForm?.requiresAuditList[0]"
+></app-audit-category-list>
+
+<app-loader-inline *ngIf="loader"></app-loader-inline>
+<app-framework-list
+  *ngIf="activeSelector === 'framework'"
+  (assignControl)="assignFromFramework($event)"
+  [previousSelectedValues]="selectedFrameworkValues"
+  (closeFramework)="activeDeselector()"
+  (entrustFramework)="entrustFramework($event)"
+></app-framework-list>
+
+<!-- risk-calculator here -->
+<app-risk-classification
+  *ngIf="activeSelector === 'riskCalculator'"
+  [currentRiskValue]="responsibilityForm.riskClass"
+  (saveList)="saveSelectedList('calculatedrisk', $event)"
+  (closeList)="activeDeselector()"
+>
+</app-risk-classification>
+
+<app-review-frequency
+  *ngIf="activeSelector === 'reviewerFrequency'"
+  [reviewCompleteDays]="
+    responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays
+  "
+  [reviewNOtCompletedDays]="
+    responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays
+  "
+  (saveReviewFrequency)="saveSelectedList('reviewFrequency', $event)"
+  (closeReviewFrequency)="
+    activeDeselector();
+    activateSelector('reviewer', false);
+    responsibilityForm.reviewers.list = [];
+    responsibilityForm.groupReviewers.list = []
+  "
+  (backToUserList)="activeDeselector(); activateSelector('reviewer', true)"
+>
+</app-review-frequency>
+
+<app-assessment-list
+  *ngIf="isAssessment"
+  [program_ids]="responsibilityForm.program[0]?._id"
+  (cancelAssessment)="
+    isAssessment = false; activateSelector('isAssessment', false)
+  "
+  [isEdit]="responsibilityForm?.assessment?.assessment_id ? true : false"
+  [selectedAssessment]="responsibilityForm?.assessment"
+  (onAssessmentSelect)="
+    onAssessmentSelect($event); activateSelector('isAssessment', false)
+  "
+></app-assessment-list>
+
+<app-smiley-dialog-inline
+  *ngIf="showSmiley"
+  [message]="smileyMessage"
+  [actionButtons]="actionButtons"
+  (action)="action($event)"
+  (closeSmiley)="closeSmiley($event)"
+></app-smiley-dialog-inline>
+
+<div class="import" *ngIf="activeSelector === 'checkpoints-new'">
+  <app-create-assessment-container
+    #editor
+    [openPortal]="'RESPONSIBILITY_CHECKPOINT'"
+    (postAssessment)="postAssessment($event)"
+    (setIsUploaded)="setIsUploaded($event)"
+    [checkpointJSON]="responsibilityForm.new_checkpoints"
+  >
+  </app-create-assessment-container>
+</div>
+
+<app-grc-object-list
+  *ngIf="activeSelector === 'GRC_OBJECTS'"
+  [grcObject]="grcList"
+  [selectedGRC]="responsibilityForm.selectedGRCObjects | refDisconnect"
+  [loader]="grcLoader"
+  [tableCard]="otherGRCCard"
+  [selectedTab]="selectedGRCTab"
+  [cardLoader]="grcTabLoader"
+  (getOtherGRCObjects)="getOtherGRCObjects($event)"
+  (saveOtherGRC)="saveSelectedList('GRC_OBJECTS', $event)"
+  (closeOtherGRC)="activateSelector('GRC_OBJECTS', false)"
+></app-grc-object-list>