vcomply-workflow-engine 2.0.4 → 2.0.167

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

@@ -0,0 +1,1574 @@
+<div class="workflw-risk" *ngIf="!showSmiley">
+  <!-- Risk Type -->
+  <div class="form-group-row" [class.active]="false" [class.disabled]="false">
+    <div class="left" [class.checked]="false">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg"
+        alt="im"
+        *ngIf="true"
+      />
+
+      <svg
+        *ngIf="false"
+        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 Type <span class="required">*</span></label
+        >
+        <div class="risk-type-field">
+          <div
+            class="type-item"
+            [class.active]="riskForm?.riskType === 'NORMAL'"
+          >
+            <button
+              [class.disabled]="!riskTypeChangeAllowed"
+              (click)="changeRisk('NORMAL')"
+            >
+              ADD TO RISK REGISTER
+            </button>
+            <i
+              class="icons info"
+              [appTooltip]="
+                'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'
+              "
+              placement="bottom-right"
+              delay="0"
+              type="white"
+              [tooltipMandatory]="true"
+              >&#xe932;</i
+            >
+          </div>
+          <div
+            class="type-item"
+            [class.active]="riskForm?.riskType === 'REPORTED'"
+          >
+            <button
+              [class.disabled]="!riskTypeChangeAllowed"
+              (click)="changeRisk('REPORTED')"
+            >
+              REPORT A RISK
+            </button>
+            <i
+              class="icons info"
+              [appTooltip]="
+                'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'
+              "
+              placement="bottom-right"
+              delay="0"
+              type="white"
+              [tooltipMandatory]="true"
+              >&#xe932;</i
+            >
+          </div>
+          <span class="background-glider"></span>
+        </div>
+        <p *ngIf="false" class="error-message">Add a risk type</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Risk Name -->
+  <div
+    class="form-group-row"
+    [class.active]="false"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'name' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left" [class.checked]="riskForm.title">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg"
+        alt="im"
+        *ngIf="
+          riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'
+        "
+      />
+
+      <svg
+        *ngIf="riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'"
+        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"
+          >WHAT RISK WOULD YOU LIKE TO MANAGE?
+          <span class="required">*</span></label
+        >
+        <input
+          spaceTrim
+          type="text"
+          (keydown)="activeSelector = 'name'"
+          (focusin)="activateSelector('name', true)"
+          (focusout)="activateSelector('name', false)"
+          [(ngModel)]="riskForm.title"
+          placeholder="Add a risk name"
+          *ngIf="riskForm?.title?.trim() == '' || activeSelector === 'name'"
+        />
+        <div
+          class="selected"
+          *ngIf="riskForm?.title?.trim() != '' && activeSelector !== 'name'"
+        >
+          <div class="chip-container">
+            <span class="value">{{ riskForm.title }}</span>
+          </div>
+          <button
+            class="edit"
+            (click)="activateSelector('name', true)"
+            type="button"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <p *ngIf="submitted && !riskForm.title" class="error-message">
+          Add a risk name
+        </p>
+        <vcomply-editor
+          [(ngModel)]="riskForm.description"
+          [editorConfig]="description"
+          (clickOutside)="checkDescription()"
+        ></vcomply-editor>
+        <p
+          *ngIf="
+            submitted &&
+            riskForm.riskType === 'REPORTED' &&
+            !riskForm?.description?.trim()?.length
+          "
+          class="error-message"
+        >
+          Add a risk description
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Risk Owner -->
+  <div
+    class="form-group-row"
+    [class.active]="activeSelector === 'owner'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'owner' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left" [class.checked]="riskForm?.ownersList?.length > 0">
+      <img
+        *ngIf="riskForm?.ownersList?.length == 0 || activeSelector === 'owner'"
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg"
+        alt=""
+      />
+
+      <svg
+        *ngIf="riskForm?.ownersList?.length > 0 && activeSelector !== 'owner'"
+        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"
+          >WHO IS RESPONSIBLE FOR MANAGING THIS RISK?
+          <span class="required">*</span>
+          <i
+            class="icons"
+            [appTooltip]="
+              'This is the person that is responsible for managing the risk.'
+            "
+            placement="bottom"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          >
+        </label>
+        <div class="select" *ngIf="riskForm?.ownersList?.length == 0">
+          <input
+            type="text"
+            (click)="activateSelector('owner', true)"
+            placeholder="Select Risk Owner(s)"
+            readonly
+          />
+        </div>
+
+        <div
+          class="selected"
+          *ngIf="
+            riskForm?.ownersList?.length > 0 || riskForm?.groupsList.length > 0
+          "
+        >
+          <div
+            class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            *ngIf="!featureflag_groups"
+          >
+            <ng-container
+              *ngIf="
+                riskForm?.ownersList
+                  | shortMerge : nonRemovableUsersList as ownerList
+              "
+            >
+              <ng-container *ngFor="let owner of ownerList?.slice(0, 1)">
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  *ngIf="!nonRemovableUsersList.includes(owner?.member_id)"
+                  (click)="remove('owner', owner)"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="owner?.member_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ owner?.member_name }}</span
+                >
+              </ng-container>
+            </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)="popoverOwner.popover()"
+              placement="left"
+              *ngIf="riskForm?.ownersList?.length > 1"
+            >
+              +{{ riskForm?.ownersList?.slice(1).length }}
+            </button>
+          </div>
+
+          <!-- <div class="chip-container" *ngIf="!featureflag_groups" [class.more-one]="riskForm?.ownersList?.length>1" [class.plus]="riskForm?.ownersList?.length>2">
+                      <ng-container *ngIf="(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList">
+                          <span class="chip" *ngFor="let owner of ownerList?.slice(0,2)"><i class="icons" *ngIf="!nonRemovableUsersList.includes(owner?.member_id)" (click)="remove('owner',owner)">&#xe90d;</i> {{owner?.member_name}}</span>
+                          <button class="count" *ngIf="riskForm?.ownersList?.length > 2" type="button" appPopover (click)="popoverOwner.popover()" placement="right">+{{riskForm?.ownersList?.slice(2).length}}</button>
+                      </ng-container>
+                  </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"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                *ngIf="
+                  !nonRemovableUsersList.includes(
+                    riskForm?.ownersList[0]?.member_id
+                  )
+                "
+                (click)="remove('owner', riskForm?.ownersList[0])"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="riskForm?.ownersList[0]?.member_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ riskForm?.ownersList[0]?.member_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)="popoverUser.popover()"
+                placement="right"
+                *ngIf="riskForm?.ownersList.length > 1"
+              >
+                +{{ riskForm?.ownersList.length - 1 }}
+              </button>
+            </div>
+            <span
+              class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"
+              *ngIf="riskForm?.groupsList.length > 0"
+              >&</span
+            >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="riskForm?.groupsList.length > 0"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="remove('Ownergroup', riskForm?.groupsList[0])"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="riskForm?.groupsList[0]?.group_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ riskForm?.groupsList[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="riskForm?.groupsList?.length > 1"
+              >
+                +{{ riskForm?.groupsList?.length - 1 }}
+              </button>
+            </div>
+          </div>
+
+          <!-- <div class="chip-container" *ngIf="featureflag_groups">
+                      <div class="chip-inner" >
+                        <i class="icons cross vx-mr-1" *ngIf="!nonRemovableUsersList.includes(riskForm?.ownersList[0]?.member_id)" (click)="remove('owner',riskForm?.ownersList[0])" >&#xe90d;</i>
+                          <span class="chip">
+                              <span class="vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase">{{riskForm?.ownersList[0]?.member_name}}</span></span>
+                          <button *ngIf="riskForm?.ownersList.length > 1" class="count user" appPopover (click)="popoverUser.popover()" placement="right">+{{riskForm?.ownersList.length - 1}}</button>
+                      </div>
+                      <span class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2" *ngIf="riskForm?.groupsList.length > 0" >&</span>
+                      <div class="chip-inner" *ngIf="riskForm?.groupsList.length > 0" >
+                        <i class="icons cross vx-mr-1" (click)="remove('Ownergroup', riskForm?.groupsList[0])" >&#xe90d;</i>
+                          <span class="chip" [appTooltip]="riskForm?.groupsList[0]?.group_name" placement="bottom-left" type="black" delay="0" [tooltipMandatory]="false"><span class="vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase">{{riskForm?.groupsList[0]?.group_name}}</span></span>
+                          <button *ngIf="riskForm?.groupsList?.length > 1" class="count" appPopover (click)="group.popover()" placement="right">+{{riskForm?.groupsList?.length -1}}</button>
+                      </div>
+                  </div> -->
+
+          <button
+            *ngIf="activeSelector !== 'owner'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('owner', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <p
+          *ngIf="submitted && riskForm?.ownersList?.length === 0"
+          class="error-message"
+        >
+          Select Owner(s) for this risk.
+        </p>
+        <app-popover #popoverOwner [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ng-container
+              *ngIf="
+                riskForm?.ownersList
+                  | shortMerge : nonRemovableUsersList as ownerPop
+              "
+            >
+              <ul class="action-item">
+                <li *ngFor="let owner of ownerPop | slice : 1; let j = index">
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i
+                        *ngIf="
+                          !nonRemovableUsersList.includes(owner?.member_id)
+                        "
+                        class="icons"
+                        (click)="remove('owner', owner)"
+                        >&#xe90d;</i
+                      >
+                      {{ owner.member_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </ng-container>
+          </div>
+        </app-popover>
+        <app-popover #popoverUser [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ng-container
+              *ngIf="
+                riskForm?.ownersList
+                  | shortMerge : nonRemovableUsersList as ownerPop
+              "
+            >
+              <ul class="action-item">
+                <li *ngFor="let owner of ownerPop | slice : 1; let j = index">
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i
+                        *ngIf="
+                          !nonRemovableUsersList.includes(owner?.member_id)
+                        "
+                        class="icons"
+                        (click)="remove('owner', owner)"
+                        >&#xe90d;</i
+                      >
+                      {{ owner.member_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </ng-container>
+          </div>
+        </app-popover>
+        <app-popover #group [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li *ngFor="let data of riskForm?.groupsList | slice : 1">
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('Ownergroup', data)"
+                      >&#xe90d;</i
+                    >
+                    {{ data.group_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+      </div>
+    </div>
+  </div>
+
+  <!-- Responsibility Center -->
+  <div
+    class="form-group-row"
+    [class.active]="activeSelector === 'rc'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'rc' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div
+      class="left"
+      [class.checked]="riskForm?.responsibilityCentersList?.length > 0"
+    >
+      <img
+        *ngIf="
+          riskForm?.responsibilityCentersList?.length == 0 ||
+          activeSelector === 'rc'
+        "
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg"
+        alt=""
+      />
+
+      <svg
+        *ngIf="
+          riskForm?.responsibilityCentersList?.length > 0 &&
+          activeSelector !== 'rc'
+        "
+        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"
+          >Responsibility Center <span class="required">*</span>
+          <i
+            class="icons"
+            [appTooltip]="
+              'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'
+            "
+            placement="bottom"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          >
+        </label>
+        <div
+          class="select"
+          *ngIf="riskForm?.responsibilityCentersList?.length == 0"
+        >
+          <input
+            type="text"
+            (click)="activateSelector('rc', true)"
+            placeholder="Select Responsibility Center(s)"
+            readonly
+          />
+        </div>
+        <div
+          class="selected"
+          *ngIf="riskForm?.responsibilityCentersList?.length > 0"
+        >
+          <div class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2">
+            <ng-container
+              *ngFor="
+                let rcName of riskForm?.responsibilityCentersList?.slice(0, 1)
+              "
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="remove('rc', rcName)"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="rcName.item_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ rcName.item_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)="popoverRC.popover()"
+              placement="left"
+              *ngIf="riskForm?.responsibilityCentersList?.length > 1"
+            >
+              +{{ riskForm?.responsibilityCentersList?.slice(1).length }}
+            </button>
+          </div>
+
+          <!-- <div class="chip-container" [class.more-one]="riskForm?.responsibilityCentersList?.length>1" [class.plus]="riskForm?.responsibilityCentersList?.length>2">
+                      <span class="chip" *ngFor="let rcName of riskForm?.responsibilityCentersList?.slice(0,2)"><i class="icons" (click)="remove('rc',rcName)">&#xe90d;</i> {{rcName.item_name}}</span>
+                      <button class="count" *ngIf="riskForm?.responsibilityCentersList?.length > 2" type="button" appPopover (click)="popoverRC.popover()" placement="right">+{{riskForm?.responsibilityCentersList?.slice(2).length}}</button>
+                  </div> -->
+
+          <button
+            *ngIf="activeSelector !== 'rc'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('rc', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <p
+          *ngIf="submitted && riskForm?.responsibilityCentersList?.length == 0"
+          class="error-message"
+        >
+          Assign this risk to a Responsibility Center(s)
+        </p>
+        <app-popover #popoverRC [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let rcName of riskForm?.responsibilityCentersList | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('rc', rcName)">&#xe90d;</i>
+                    {{ rcName.item_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+      </div>
+    </div>
+  </div>
+
+  <!-- Risk Frequency -->
+  <div
+    class="form-group-row"
+    [class.active]="activeSelector === 'frequency'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'frequency' &&
+      sideSelectorElements?.includes(activeSelector)
+    "
+    *ngIf="riskForm?.riskType !== 'REPORTED'"
+  >
+    <div class="left" [class.checked]="riskForm?.category?.selectedCategory">
+      <img
+        *ngIf="
+          !riskForm?.frequency_details?.frequency ||
+          riskForm?.frequency_details?.frequency === '' ||
+          activeSelector === 'frequency'
+        "
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg"
+        alt=""
+      />
+
+      <svg
+        class="checkIcon"
+        *ngIf="
+          (riskForm?.frequency_details?.frequency &&
+            riskForm?.frequency_details?.frequency !== '') ||
+          activeSelector !== 'frequency'
+        "
+        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"
+          >HOW OFTEN DOES THIS RISK NEED TO BE REASSESSED?
+          <span class="required">*</span>
+          <i
+            class="icons"
+            [appTooltip]="
+              'The option lets you specify the risk reassessment frequency.'
+            "
+            placement="bottom"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          ></label
+        >
+        <div
+          class="select"
+          *ngIf="!riskForm?.frequency_details?.frequency"
+          (click)="activateSelector('frequency', true)"
+        >
+          <input
+            type="text"
+            placeholder="Set a Reassessment Frequency"
+            readonly
+          />
+        </div>
+        <div
+          class="selected button-sec"
+          *ngIf="riskForm?.frequency_details?.frequency"
+        >
+          <span
+            class="chip"
+            [appTooltip]="frequencyPlaceholder"
+            placement="bottom-left"
+            delay="0"
+            type="black"
+            [tooltipMandatory]="false"
+            >{{ frequencyPlaceholder }}</span
+          >
+          <button
+            class="edit"
+            type="button"
+            (click)="activateSelector('frequency', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+        <div class="vx-mt-1">
+          <app-cs-switch
+            [ngValue]="riskForm?.enableAllFutureBusinessCycle"
+            (ngValueChange)="riskForm.enableAllFutureBusinessCycle = $event"
+            >DO YOU WANT THIS TO SHOW IN ALL FUTURE BUSINESS CYCLES?
+          </app-cs-switch>
+        </div>
+        <p
+          *ngIf="
+            submitted &&
+            (!riskForm?.frequency_details?.frequency ||
+              riskForm?.frequency_details?.frequency === '')
+          "
+          class="error-message"
+        >
+          Please select the frequency of occurrence for this risk.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Risk Category -->
+  <div
+    class="form-group-row"
+    [class.active]="activeSelector === 'category'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'category' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+  >
+    <div class="left" [class.checked]="riskForm?.category?.selectedCategory">
+      <img
+        *ngIf="
+          !riskForm?.category?.selectedCategory || activeSelector === 'category'
+        "
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg"
+        alt=""
+      />
+
+      <svg
+        class="checkIcon"
+        *ngIf="
+          riskForm?.category?.selectedCategory && activeSelector !== 'category'
+        "
+        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 Category
+          <i
+            class="icons"
+            [appTooltip]="'Risk Categories are used to group similar risks.'"
+            placement="bottom"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          ></label
+        >
+        <div class="select" *ngIf="!riskForm?.category?.selectedCategory">
+          <input
+            type="text"
+            (click)="activateSelector('category', true)"
+            placeholder="Select Risk Category"
+            readonly
+          />
+        </div>
+        <div class="selected" *ngIf="riskForm?.category?.selectedCategory">
+          <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('category', riskForm.category.selectedCategory)"
+              >&#xe9ae;</i
+            >
+            <span
+              class="chipName vx-fs-11 vx-label-txt"
+              [appTooltip]="riskForm?.category?.selectedCategory?.category_name"
+              placement="bottom-left"
+              delay="0"
+              type="black"
+              [tooltipMandatory]="false"
+              >{{ riskForm?.category?.selectedCategory?.category_name }}</span
+            >
+          </div>
+
+          <!-- <div class="chip-container">
+                      <span class="chip"><i class="icons" (click)="remove('category',riskForm.category.selectedCategory)">&#xe90d;</i>{{riskForm?.category?.selectedCategory?.category_name}}</span>
+                  </div> -->
+          <button
+            *ngIf="activeSelector !== 'category'"
+            class="edit"
+            type="button"
+            (click)="activateSelector('category', true)"
+          >
+            <i class="icons">&#xe9ba;</i> Edit
+          </button>
+        </div>
+      </div>
+      <ng-container *ngIf="riskForm?.categoryCustomTags?.length > 0">
+        <div
+          class="vx-form-group"
+          *ngFor="let tag of riskForm.categoryCustomTags"
+        >
+          <label class="vx-control-panel">{{ tag.custom_tag_name }}</label>
+          <input
+            type="text"
+            [(ngModel)]="tag.custom_tag_value"
+            [placeholder]="tag.custom_tag_name"
+          />
+        </div>
+      </ng-container>
+    </div>
+  </div>
+
+  <!-- Assessment Deadline -->
+  <!-- !settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone ) -->
+  <div
+    class="form-group-row"
+    [class.active]="activeSelector === 'assessment'"
+    id="deadline"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'assessment' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+    *ngIf="false"
+  >
+    <div class="left" [class.checked]="riskForm?.assessment_deadline_days >= 1">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg"
+        *ngIf="
+          riskForm?.assessment_deadline_days < 1 ||
+          activeSelector === 'assessment'
+        "
+        alt=""
+      />
+      <svg
+        class="checkIcon"
+        *ngIf="
+          riskForm?.assessment_deadline_days >= 1 &&
+          activeSelector !== 'assessment'
+        "
+        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"
+          >Assessment Deadline <span class="required">*</span>
+          <i
+            class="icons"
+            [appTooltip]="
+              'This is the date that the inherent risk assessment must be completed by.'
+            "
+            placement="bottom"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          ></label
+        >
+        <div class="input">
+          <span class="text">Set Number of days</span>
+          <div class="input-group counter">
+            <button (click)="changeRiskAssessment('subtract')">
+              <i class="icons">&#xea53;</i>
+            </button>
+            <input
+              type="number"
+              [(ngModel)]="riskForm.assessment_deadline_days"
+              (focusin)="activateSelector('assessment', true)"
+              (focusout)="activateSelector('assessment', false)"
+              name="riskAssessmentDeadline"
+              validateAssessment
+              #deadline="ngModel"
+              (ngModelChange)="changeRiskAssessmentDeadline($event)"
+              onkeydown="return event.keyCode !== 190"
+              min="0"
+              oninput="this.value = Math.abs(this.value)"
+            />
+            <button (click)="changeRiskAssessment('add')">
+              <i class="icons">&#xe915;</i>
+            </button>
+          </div>
+        </div>
+        <p
+          *ngIf="submitted && riskForm?.assessment_deadline_days < 1"
+          class="error-message"
+        >
+          Enter a value greater than 0.
+        </p>
+        <label
+          class="vx-control-panel"
+          *ngIf="riskForm?.assessment_deadline_days >= 1"
+        >
+          This risk assessment needs to be completed by
+          {{ date | date : "dd MMM yyyy" }}
+        </label>
+      </div>
+    </div>
+  </div>
+
+  <!-- Risk Overseer -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    [class.active]="activeSelector === 'overseer'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'overseer' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+    *ngIf="riskForm.addOverseer"
+  >
+    <div class="left" [class.checked]="riskForm?.overseersList?.length > 0">
+      <img
+        *ngIf="
+          riskForm?.overseersList?.length == 0 || activeSelector === 'overseer'
+        "
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg"
+        alt=""
+      />
+      <svg
+        class="checkIcon"
+        *ngIf="
+          riskForm?.overseersList?.length > 0 && 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"
+          >Risk Oversight<i
+            class="icons"
+            [appTooltip]="
+              'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'
+            "
+            placement="bottom"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          ></label
+        >
+        <div
+          class="select"
+          *ngIf="
+            riskForm?.overseersList?.length == 0 &&
+            riskForm?.overseersGroupList?.length == 0
+          "
+        >
+          <input
+            type="text"
+            (click)="activateSelector('overseer', true)"
+            placeholder="Select Risk Oversight(s)"
+            readonly
+          />
+        </div>
+        <div
+          class="selected"
+          *ngIf="
+            riskForm?.overseersList?.length > 0 ||
+            riskForm?.overseersGroupList.length > 0
+          "
+        >
+          <ng-container *ngIf="!featureflag_groups">
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            >
+              <ng-container
+                *ngFor="let owner of riskForm?.overseersList?.slice(0, 1)"
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="remove('overseer', owner)"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="owner.member_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ owner.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)="popoverOverseer.popover()"
+                placement="right"
+                *ngIf="riskForm?.overseersList?.length > 1"
+              >
+                +{{ riskForm?.overseersList?.slice(1).length }}
+              </button>
+            </div>
+          </ng-container>
+
+          <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"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="remove('overseer', riskForm?.overseersList[0])"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="riskForm?.overseersList[0]?.member_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                *ngIf="riskForm?.overseersList.length > 0"
+                >{{ riskForm?.overseersList[0]?.member_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)="overseer.popover()"
+                placement="right"
+                *ngIf="riskForm?.overseersList.length > 1"
+              >
+                +{{ riskForm?.overseersList.length - 1 }}
+              </button>
+            </div>
+            <span
+              class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"
+              *ngIf="
+                riskForm?.overseersList.length > 0 &&
+                riskForm?.overseersGroupList.length > 0
+              "
+              >&</span
+            >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="riskForm?.overseersGroupList.length > 0"
+            >
+              <i
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                (click)="
+                  remove('overseergroup', riskForm?.overseersGroupList[0])
+                "
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="riskForm?.overseersGroupList[0]?.group_name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ riskForm?.overseersGroupList[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="riskForm?.overseersGroupList?.length > 1"
+              >
+                +{{ riskForm?.overseersGroupList?.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>
+        <app-popover #popoverOverseer [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let owner of riskForm?.overseersList | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('overseer', owner)"
+                      >&#xe90d;</i
+                    >
+                    {{ owner.member_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+        <app-popover #overseer [dontCloseonClick]="true">
+          <div class="wf-action-list">
+            <ul class="action-item">
+              <li
+                *ngFor="
+                  let owner of riskForm?.overseersList | slice : 1;
+                  let j = index
+                "
+              >
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('overseer', owner)"
+                      >&#xe90d;</i
+                    >
+                    {{ owner.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 data of riskForm?.overseersGroupList | slice : 1">
+                <div class="avatar-card">
+                  <span class="value">
+                    <i class="icons" (click)="remove('overseergroup', data)"
+                      >&#xe90d;</i
+                    >
+                    {{ data.group_name }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </app-popover>
+      </div>
+    </div>
+  </div>
+
+  <!-- Risk Mitigation Priority -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    [class.active]="false"
+    [class.disabled]="
+      activeSelector && sideSelectorElements.includes(activeSelector)
+    "
+    *ngIf="riskForm.addMitigation"
+  >
+    <div class="left" [class.checked]="riskForm.mitigation">
+      <img
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg"
+        *ngIf="!riskForm.mitigation"
+        alt=""
+      />
+      <!-- <svg viewBox="25 25 50 50" class="edit-loader">
+              <circle cx="50" cy="50" r="20" fill="none" stroke="#1e5dd3" stroke-width="3" class="loader-path"></circle>
+          </svg> -->
+      <svg
+        class="checkIcon"
+        *ngIf="riskForm.mitigation"
+        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 Mitigation Priority
+          <i
+            class="icons"
+            [appTooltip]="
+              'This sets the priority level for the mitigation of each risk.'
+            "
+            placement="bottom"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          ></label
+        >
+
+        <cs-select
+          [(ngModel)]="riskForm.mitigation"
+          [placeholder]="'Select a mitigation priority'"
+          name="riskForm.mitigation"
+        >
+          <cs-option
+            *ngFor="let data of mitigationDetails"
+            [value]="data?.mitigation_id"
+            [color]="data?.mitigation_color"
+          >
+            {{ data.mitigation_name }}
+          </cs-option>
+        </cs-select>
+      </div>
+    </div>
+  </div>
+
+  <!-- Recommended Mitigation Plan -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    *ngIf="riskForm?.addMitigationPlan"
+  >
+    <div
+      id="riskSpace"
+      class="left"
+      [class.checked]="(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''"
+    >
+      <img
+        *ngIf="(riskForm.mitigationDescriptionPlan | spaceTrim) === ''"
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg"
+        alt=""
+      />
+      <svg
+        *ngIf="(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''"
+        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 for="" class="vx-control-panel"
+          >Recommended Mitigation Plans<link
+            rel="manifest"
+            href="./manifest.json"
+          />
+          <i
+            class="icons"
+            [appTooltip]="
+              'Specify the mitigation plan that can be undertaken to mitigate the risk.'
+            "
+            placement="bottom"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          >
+        </label>
+        <vcomply-editor
+          [(ngModel)]="riskForm.mitigationDescriptionPlan"
+          [editorConfig]="mitigationDescriptionPlan"
+          (clickOutside)="checkMitigationPlan()"
+        >
+        </vcomply-editor>
+      </div>
+    </div>
+  </div>
+
+  <!-- Risk Label -->
+  <div
+    class="form-group-row"
+    [class.active]="false"
+    [class.disabled]="
+      activeSelector && sideSelectorElements.includes(activeSelector)
+    "
+    *ngIf="riskForm?.addRiskLabel"
+  >
+    <div class="left" [class.checked]="false">
+      <!-- <img *ngIf="true"
+              src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg" alt="" /> -->
+
+      <svg
+        class="checkIcon"
+        *ngIf="true"
+        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 LABEL
+          <i
+            class="icons"
+            [appTooltip]="'This option lets you specify if this is a newly identified risk or it is a rapidly changing risk.'"
+            placement="bottom"
+            delay="0"
+            type="white"
+            [tooltipMandatory]="true"
+            >&#xe91f;</i
+          ></label
+        >
+        <cs-select
+          [(ngModel)]="riskForm.riskLabelValue"
+          [placeholder]="'Select a risk label'"
+          name="riskForm?.riskLabelValue"
+        >
+          <cs-option *ngFor="let data of riskLabelList" [value]="data?.value">
+            {{ data?.name }}
+          </cs-option>
+        </cs-select>
+      </div>
+    </div>
+  </div>
+  <!-- Link with  GRC -->
+  <div
+    [appScrollInView]="scrollToBottom"
+    class="form-group-row"
+    [class.active]="activeSelector === 'GRC'"
+    [class.disabled]="
+      activeSelector &&
+      activeSelector !== 'GRC' &&
+      sideSelectorElements.includes(activeSelector)
+    "
+    *ngIf="riskForm?.GRC"
+  >
+    <div
+      class="left"
+      [class.checked]="this.riskForm?.selectedGRCObjects?.length > 0"
+    >
+      <img
+        *ngIf="
+          this.riskForm?.selectedGRCObjects?.length == 0 ||
+          activeSelector === 'GRC'
+        "
+        src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg"
+        alt=""
+      />
+
+      <svg
+        *ngIf="
+          this.riskForm?.selectedGRCObjects?.length > 0 &&
+          activeSelector !== 'GRC'
+        "
+        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="riskForm?.selectedGRCObjects?.length === 0">
+          <input
+            type="text"
+            (click)="activateSelector('GRC', true)"
+            placeholder="Select GRC object(s) to link with this risk."
+            readonly
+          />
+        </div>
+        <ng-container *ngIf="riskForm?.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', 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', 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', grc, j + 1)"
+                          >&#xe90d;</i
+                        >
+                        {{ grc.name }}
+                      </span>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </app-popover>
+          </ng-container>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>
+<app-responsibility-centers-list
+  *ngIf="activeSelector === 'rc'"
+  [responsibilityCentersList]="responsibilityCentersList"
+  [selectedResponsibilityCenters]="riskForm.responsibilityCentersList"
+  [rcIdKey]="'rc_id'"
+  (saveSelectedList)="saveSelectedRCList($event)"
+  (closeRcList)="activateSelector('rc', false)"
+  [singularText]="'Responsibility Center selected'"
+  [pluralText]="'Responsibility Centers selected'"
+>
+</app-responsibility-centers-list>
+
+<app-owner-list
+  *ngIf="!featureflag_groups && activeSelector === 'owner'"
+  [usersList]="ownersList"
+  [selectedUsers]="riskForm.ownersList"
+  [userIdKey]="'member_id'"
+  [itemEmailKey]="'member_email'"
+  [itemNameKey]="'member_name'"
+  (saveSelectedList)="saveSelectedOwnersList($event)"
+  [nonRemovableUsersList]="nonRemovableUsersList"
+  (closeUsersList)="activateSelector('owner', false)"
+  [singularText]="'User selected'"
+  [pluralText]="'Users selected'"
+></app-owner-list>
+
+<user-group-list
+  *ngIf="featureflag_groups && activeSelector === 'owner'"
+  [userlist]="ownersList"
+  [selectedUsers]="riskForm.ownersList"
+  [groupList]="groupsList"
+  [nonRemovableUserIds]="nonRemovableUsersList"
+  (save)="saveSelectedOwnersList($event)"
+  [selectedGroups]="riskForm.groupsList"
+  (cancel)="activateSelector('owner', false)"
+  [groupEnabled]="true"
+  [featureflag]="featureflag_groups"
+>
+</user-group-list>
+
+<user-group-list
+  *ngIf="featureflag_groups && activeSelector === 'overseer'"
+  [userlist]="overseersList"
+  [selectedUsers]="riskForm.overseersList"
+  [groupList]="overseersGroupList"
+  (save)="saveSelectedOverseersList($event)"
+  [selectedGroups]="riskForm.overseersGroupList"
+  (cancel)="activateSelector('overseer', false)"
+  [groupEnabled]="true"
+  [featureflag]="featureflag_groups"
+>
+</user-group-list>
+
+<app-category-list
+  *ngIf="activeSelector === 'category'"
+  [categoryList]="categoryList"
+  [selectedCategory]="riskForm.category"
+  (saveSelectedCategory)="saveSelectedCategory($event)"
+  (closeCategoriesList)="activateSelector('category', false)"
+></app-category-list>
+<app-owner-list
+  *ngIf="!featureflag_groups && activeSelector === 'overseer'"
+  [usersList]="overseersList"
+  [selectedUsers]="riskForm.overseersList"
+  [userIdKey]="'member_id'"
+  [itemNameKey]="'member_name'"
+  [itemEmailKey]="'member_email'"
+  (saveSelectedList)="saveSelectedOverseersList($event)"
+  (closeUsersList)="activateSelector('overseer', false)"
+  [singularText]="'User selected'"
+  [pluralText]="'Users selected'"
+>
+</app-owner-list>
+<app-loader-inline *ngIf="loader"></app-loader-inline>
+
+<app-frequency-dialog-container
+  *ngIf="activeSelector === 'frequency'"
+  [frequencyDetails]="frequencyDetails"
+  (selectedFrequency)="frequencyData($event)"
+  (closeFrequency)="activateSelector('frequency', false)"
+>
+</app-frequency-dialog-container>
+
+<app-grc-object-list
+  *ngIf="activeSelector === 'GRC'"
+  [grcObject]="grcList"
+  [selectedGRC]="riskForm.selectedGRCObjects | refDisconnect"
+  [loader]="grcLoader"
+  [tableCard]="otherGRCCard"
+  [selectedTab]="selectedGRCTab"
+  [cardLoader]="grcTabLoader"
+  (getOtherGRCObjects)="getOtherGRCObjects($event)"
+  (saveOtherGRC)="saveSelectedList($event)"
+  (closeOtherGRC)="activateSelector('GRC', false)"
+></app-grc-object-list>
+
+<app-smiley-dialog-inline
+  *ngIf="showSmiley"
+  [message]="smileyMessage"
+  [actionButtons]="actionButtons"
+  (action)="action($event)"
+  (closeSmiley)="closeSmiley($event)"
+>
+</app-smiley-dialog-inline>