vcomply-workflow-engine 2.0.4 → 2.0.167

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

@@ -0,0 +1,3586 @@
+<!-- <p>workflow-policy works!</p> -->
+
+<ng-container *ngIf="!showCreateDocuments">
+  <div class="workflow-policy">
+    <!-- Policy Name -->
+    <div
+      class="form-group-row"
+      [class.disabled]="activeSelector && activeSelector !== 'name'"
+    >
+      <div class="left" [class.checked]="policyForm?.policyName">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg"
+          alt="name"
+          *ngIf="!policyForm?.policyName || activeSelector === 'name'"
+        />
+
+        <svg
+          *ngIf="policyForm?.policyName && 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">
+            Policy Name <span class="required">*</span>
+          </label>
+          <input
+            type="text"
+            (keydown)="activeSelector = 'name'"
+            (focusin)="activateSelector('name', true)"
+            *ngIf="policyForm.policyName == '' || activeSelector === 'name'"
+            (focusout)="activateSelector('name', false)"
+            [ngModel]="policyForm.policyName"
+            (ngModelChange)="policyForm.policyName = changeName($event)"
+            placeholder="Name this policy"
+          />
+          <div
+            class="selected"
+            *ngIf="policyForm.policyName.length && activeSelector !== 'name'"
+          >
+            <div class="chip-container">
+              <span class="value">{{ policyForm.policyName }}</span>
+            </div>
+            <button
+              class="edit"
+              (click)="activateSelector('name', true)"
+              type="button"
+            >
+              <i class="icons">&#xe9ba;</i> Edit
+            </button>
+          </div>
+
+          <p
+            *ngIf="submitted && !policyForm.policyName.trim()"
+            [appScrollInView]="true"
+            class="error-message"
+          >
+            Please enter a name for this policy.
+          </p>
+          <vcomply-editor
+            [(ngModel)]="policyForm.policyNotes"
+            [editorConfig]="description"
+          ></vcomply-editor>
+          <!-- <app-cs-switch
+            [(ngValue)]="policyForm.availableOnPortal"
+            (ngValueChange)="availabilityOnPortal($event)"
+          >
+            Do you want this policy to be available on the portal?
+            <i
+              class="icons"
+              [appTooltip]="
+                'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'
+              "
+              placement="bottom-right"
+              type="white"
+              delay="0"
+              [tooltipMandatory]="true"
+              >&#xe932;</i
+            >
+          </app-cs-switch>
+          <app-cs-switch
+            *ngIf="policyForm.availableOnPortal"
+            [(ngValue)]="policyForm.acceptSuggestions"
+          >
+            Accept suggestions
+            <i
+              class="icons"
+              [appTooltip]="
+                'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'
+              "
+              placement="bottom-right"
+              type="white"
+              delay="0"
+              [tooltipMandatory]="true"
+              >&#xe932;</i
+            ></app-cs-switch> -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Policy Category -->
+    <div
+      class="form-group-row"
+      [class.active]="activeSelector === 'category'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'category' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div
+        class="left"
+        [class.checked]="policyForm?.selectedCategories?.length > 0"
+      >
+        <img
+          *ngIf="
+            policyForm?.selectedCategories?.length == 0 ||
+            activeSelector === 'category'
+          "
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg"
+          alt=""
+        />
+
+        <svg
+          *ngIf="
+            policyForm?.selectedCategories?.length > 0 &&
+            activeSelector !== 'category'
+          "
+          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"
+            >Policy Category <span class="required">*</span>
+          </label>
+          <div
+            class="select"
+            *ngIf="policyForm?.selectedCategories?.length == 0"
+          >
+            <input
+              type="text"
+              (click)="activateSelector('category', true)"
+              placeholder="Select a category for this policy."
+              readonly
+            />
+          </div>
+
+          <div
+            class="selected"
+            *ngIf="policyForm?.selectedCategories?.length > 0"
+          >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            >
+              <ng-container
+                *ngFor="
+                  let category of policyForm?.selectedCategories?.slice(0, 1)
+                "
+              >
+                <i
+                  (click)="remove('category', category)"
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="category.item_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ category.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"
+                *ngIf="policyForm?.selectedCategories?.length > 1"
+                type="button"
+                appPopover
+                (click)="category.popover()"
+                placement="left"
+              >
+                +{{ policyForm?.selectedCategories?.slice(1).length }}
+              </button>
+            </div>
+
+            <!-- <div class="chip-container" [class.more-one]="policyForm?.selectedCategories?.length>1"
+                          [class.plus]="policyForm?.selectedCategories?.length>2">
+                          <span class="chip" *ngFor="let category of policyForm?.selectedCategories?.slice(0,2)"><i
+                                  class="icons" (click)="remove('category',category)">&#xe90d;</i>
+                              {{category.item_name}}</span>
+                          <button class="count" *ngIf="policyForm?.selectedCategories?.length > 2" type="button"
+                              appPopover (click)="category.popover()" placement="right">+
+                              {{policyForm?.selectedCategories?.slice(2).length}}</button>
+                      </div> -->
+            <button
+              *ngIf="activeSelector !== 'category'"
+              class="edit"
+              type="button"
+              (click)="activateSelector('category', true)"
+            >
+              <i class="icons">&#xe9ba;</i> Edit
+            </button>
+          </div>
+          <app-popover #category [dontCloseonClick]="true">
+            <div class="wf-action-list">
+              <ul class="action-item">
+                <li
+                  *ngFor="
+                    let category of policyForm?.selectedCategories | slice : 1;
+                    let j = index
+                  "
+                >
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i class="icons" (click)="remove('category', category)"
+                        >&#xe90d;</i
+                      >
+                      {{ category.item_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </app-popover>
+          <p
+            *ngIf="submitted && policyForm?.selectedCategories?.length == 0"
+            [appScrollInView]="true"
+            class="error-message"
+          >
+            Please select the category for this policy.
+          </p>
+        </div>
+
+        <div class="vx-form-group" *ngIf="policyForm?.customTags?.length > 0">
+          <ng-container *ngFor="let tag of policyForm?.customTags">
+            <label class="vx-control-panel vx-mt-2">{{ tag.tagname }}</label>
+            <input
+              type="text"
+              [(ngModel)]="tag.value"
+              placeholder="{{ tag.tagname }}"
+            />
+          </ng-container>
+        </div>
+      </div>
+    </div>
+
+    <!-- Effective Date -->
+    <div
+      class="form-group-row"
+      [class.disabled]="activeSelector && activeSelector !== 'name'"
+    >
+      <div class="left" [class.checked]="false">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg"
+          alt=""
+        />
+
+        <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">Effective Date</label>
+          <div class="date-time-picker">
+            <div class="picker-group">
+              <input
+                type="text"
+                readonly
+                placeholder="Select the effective date of the policy."
+                [value]="policyForm.policyDueDate | date : 'dd MMM yyyy'"
+                (click)="openDatePicker()"
+              />
+              <i class="icons">&#xe92d;</i>
+              <dp-date-picker
+                #datePicker
+                (onSelect)="datePickerOverlay = false; closeDatePicker($event)"
+                [config]="dateConfig"
+                [(ngModel)]="policyForm.policyDueDate"
+              >
+              </dp-date-picker>
+              <div
+                class="vx-overlay"
+                (click)="closeDatePicker($event)"
+                *ngIf="datePickerOverlay"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Policy Owner -->
+    <div
+      class="form-group-row"
+      [class.active]="activeSelector === 'owners'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'owners' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div class="left" [class.checked]="policyForm.policy_owners?.length">
+        <img
+          *ngIf="!policyForm.policy_owners?.length"
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg"
+          alt=""
+        />
+
+        <svg
+          *ngIf="policyForm.policy_owners?.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">
+        <div class="vx-form-group">
+          <div class="vx-d-flex vx-align-center vx-justify-between">
+            <label class="vx-control-panel">POLICY OWNER(S)</label>
+          </div>
+          <div
+            *ngIf="!policyForm.policy_owners?.length"
+            (click)="activateSelector('owners', true)"
+            class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
+            [class.disabled]="!policyForm?.selectedCategories?.length"
+          >
+            <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
+              Select owners for this policy.
+            </div>
+          </div>
+
+          <div
+            *ngIf="policyForm.policy_owners?.length"
+            class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
+          >
+            <div class="vx-d-flex vx-align-center">
+              <div
+                class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              >
+                <i
+                  (click)="remove('owners', policyForm?.policy_owners[0], 0)"
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="policyForm?.policy_owners[0]?.member_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ policyForm?.policy_owners[0]?.member_name }}</span
+                >
+
+                <button
+                  *ngIf="policyForm?.policy_owners?.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 greenBg"
+                  appPopover
+                  (click)="policyUserPopover.popover()"
+                  placement="left"
+                >
+                  + {{ policyForm?.policy_owners.length - 1 }}
+                </button>
+              </div>
+              <div
+                *ngIf="false"
+                class="vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1"
+              >
+                &
+              </div>
+              <div
+                *ngIf="false"
+                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"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="'Samantha Jones'"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >Samantha Jones</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)="policyGroupPopover.popover()"
+                  placement="right"
+                >
+                  +4
+                </button>
+              </div>
+              <app-popover #policyUserPopover [dontCloseonClick]="true">
+                <div class="wf-action-list">
+                  <ul class="action-item">
+                    <li
+                      *ngFor="
+                        let owner of policyForm?.policy_owners | slice : 1;
+                        let i = index
+                      "
+                    >
+                      <div class="avatar-card">
+                        <span
+                          class="value"
+                          [appTooltip]="owner?.member_name"
+                          placement="bottom-left"
+                          delay="0"
+                          type="black"
+                          [tooltipMandatory]="false"
+                        >
+                          <i
+                            (click)="remove('owners', owner, i + 1)"
+                            class="icons"
+                            >&#xe90d;</i
+                          >
+                          {{ owner?.member_name }}
+                        </span>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </app-popover>
+              <app-popover #policyGroupPopover [dontCloseonClick]="true">
+                <div class="wf-action-list">
+                  <ul class="action-item">
+                    <li *ngFor="let data of [1, 1, 1, 1, 1, 1, 1]">
+                      <div class="avatar-card">
+                        <span
+                          class="value"
+                          [appTooltip]="'Harshvardhan Kariwala'"
+                          placement="bottom-left"
+                          delay="0"
+                          type="black"
+                          [tooltipMandatory]="false"
+                        >
+                          <i class="icons">&#xe90d;</i>
+                          Harshvardhan Kariwala
+                        </span>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </app-popover>
+            </div>
+            <button
+              (click)="activateSelector('owners', true)"
+              class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+            >
+              <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+            </button>
+          </div>
+          <p
+            *ngIf="submitted && !policyForm?.policy_owners?.length"
+            [appScrollInView]="true"
+            class="error-message"
+          >
+            Select owners for this policy.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Review -->
+    <div
+      class="form-group-row"
+      [class.active]="
+        activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'
+      "
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'reviewer' &&
+        activeSelector !== 'reviewerFrequency' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div class="left" [class.checked]="policyForm?.addReviewers">
+        <img
+          *ngIf="!policyForm?.addReviewers"
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg"
+          alt=""
+        />
+
+        <svg
+          *ngIf="policyForm?.addReviewers"
+          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">REVIEW</label>
+          <div
+            class="reviewSelection vx-p-3 vx-pb-0"
+            [class.disabled]="
+              activeSelector && sideSelectorElements.includes(activeSelector)
+            "
+          >
+            <div class="vx-fs-13 vx-paragraph-txt vx-mb-1">
+              Does this policy need to be reviewed?
+            </div>
+            <app-cs-radio
+              name="review-type"
+              [checked]="policyForm?.addReviewers"
+              (checkedEvent)="typeSelected(true)"
+              ><div class="vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3">
+                YES
+              </div></app-cs-radio
+            >
+            <app-cs-radio
+              name="review-type"
+              [checked]="!policyForm?.addReviewers"
+              (checkedEvent)="typeSelected(false)"
+              ><div class="vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3">
+                NO
+              </div></app-cs-radio
+            >
+          </div>
+
+          <ng-container *ngIf="policyForm?.addReviewers">
+            <label class="vx-control-panel vx-mt-2">REVIEWER</label>
+            <div
+              class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
+              *ngIf="policyForm?.selectedReviewers?.length == 0"
+              [appScrollInView]="scrollToBottom"
+              [class.active]="activeSelector === 'reviewer'"
+              [class.disabled]="
+                activeSelector &&
+                activeSelector !== 'reviewer' &&
+                sideSelectorElements.includes(activeSelector)
+              "
+              (click)="activateSelector('reviewer', true)"
+            >
+              <div
+                class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4"
+              >
+                Select the person responsible for reviewing this policy
+              </div>
+            </div>
+
+            <div
+              class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
+              *ngIf="policyForm?.selectedReviewers?.length > 0"
+              [class.active]="activeSelector === 'reviewer'"
+              [class.disabled]="
+                activeSelector &&
+                activeSelector !== 'reviewer' &&
+                sideSelectorElements.includes(activeSelector)
+              "
+            >
+              <div
+                class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+                *ngFor="let reviewer of policyForm?.selectedReviewers"
+              >
+                <i
+                  (click)="remove('reviewer', reviewer)"
+                  class="icons cross vx-fs-12 vx-paragraph-txt vx-mr-1"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="'Samantha Jones'"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                >
+                  {{ reviewer?.member_name }}</span
+                >
+              </div>
+              <button
+                class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+                *ngIf="activeSelector !== 'reviewer'"
+                (click)="activateSelector('reviewer', true)"
+              >
+                <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+              </button>
+            </div>
+            <label class="vx-control-panel vx-mt-3">REVIEW FREQUENCY</label>
+            <div
+              *ngIf="policyForm?.review_frequency_details == ''"
+              class="selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
+              [class.active]="activeSelector === 'reviewerFrequency'"
+              [class.disabled]="
+                activeSelector &&
+                activeSelector !== 'reviewerFrequency' &&
+                sideSelectorElements.includes(activeSelector)
+              "
+              (click)="activateSelector('reviewerFrequency', true)"
+            >
+              <div
+                class="selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4"
+              >
+                When does this policy needs to be reviewed?
+              </div>
+              <div
+                (click)="activateSelector('reviewerFrequency', true)"
+                class="vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase"
+              >
+                SET A FREQUENCY
+              </div>
+            </div>
+
+            <div
+              *ngIf="policyForm?.review_frequency_details != ''"
+              class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
+              [class.disabled]="
+                activeSelector &&
+                activeSelector !== 'reviewerFrequency' &&
+                sideSelectorElements.includes(activeSelector)
+              "
+              [class.active]="activeSelector === 'reviewerFrequency'"
+            >
+              <div
+                class="selectBoxText vx-fs-13 vx-paragraph-txt"
+                [appTooltip]="reviewerFrequencyPlaceholder"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+              >
+                {{ reviewerFrequencyPlaceholder }}
+              </div>
+              <button
+                *ngIf="activeSelector !== 'reviewerFrequency'"
+                (click)="activateSelector('reviewerFrequency', true)"
+                class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+              >
+                <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+              </button>
+            </div>
+            <p
+              *ngIf="
+                submitted &&
+                policyForm?.selectedReviewers?.length > 0 &&
+                !policyForm?.review_frequency_details
+              "
+              class="error-message"
+              [appScrollInView]="true"
+            >
+              Select the review schedule for this policy.
+            </p>
+          </ng-container>
+        </div>
+      </div>
+    </div>
+
+    <!-- New Approval Workflow -->
+    <div
+      class="form-group-row"
+      [class.active]="activeSelector === 'approvers'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'approvers' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div
+        class="left"
+        [class.checked]="policyForm?.selectedApprovers?.length > 0"
+      >
+        <img
+          *ngIf="
+            policyForm?.selectedApprovers?.length == 0 ||
+            activeSelector === 'approvers'
+          "
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg"
+          alt="im"
+        />
+
+        <svg
+          *ngIf="
+            policyForm?.selectedApprovers?.length > 0 &&
+            activeSelector !== 'approvers'
+          "
+          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" [class.disabled]="policyApprovalFlag !== 0">
+        <div class="vx-form-group">
+          <div class="vx-d-flex vx-align-center vx-justify-between">
+            <label class="vx-control-panel"
+              >APPROVAL <span class="required">*</span></label
+            >
+            <button
+              (click)="
+                createApprovalWorkflow(); activateSelector('approvers', true)
+              "
+              [class.disabled]="!policyForm?.selectedCategories?.length"
+              class="createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0"
+            >
+              CREATE A NEW APPROVAL WORKFLOW
+            </button>
+          </div>
+          <div
+            *ngIf="
+              selectedWorkflow?.length === 0 ||
+              !selectedWorkflow[0]?.workflow_name
+            "
+            (click)="
+              clickApprovalWorkflow(true); activateSelector('approvers', true)
+            "
+            class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
+            [class.disabled]="!policyForm?.selectedCategories?.length"
+          >
+            <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
+              Select the approval workflow for this policy
+            </div>
+          </div>
+          <div
+            *ngIf="
+              selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name
+            "
+            class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2"
+          >
+            <div
+              class="vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2"
+            >
+              <div
+                class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              >
+                <i
+                  (click)="removeWorkflow()"
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="selectedWorkflow[0]?.workflow_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ selectedWorkflow[0]?.workflow_name }}</span
+                >
+              </div>
+              <button
+                (click)="editWorkflow(selectedWorkflow[0])"
+                class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+              >
+                <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+              </button>
+            </div>
+          </div>
+          <ng-container *ngIf="selectedWorkflow?.length > 0">
+            <div
+              *ngFor="
+                let approval of selectedWorkflow[0]?.approval_workflow;
+                let approvalIndex = index
+              "
+              class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2"
+            >
+              <div class="vx-d-flex vx-align-center">
+                <div class="level-left vx-d-flex vx-align-center">
+                  <div class="vx-d-block">
+                    <div
+                      class="level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3"
+                      [appTooltip]="
+                        approval?.alias_name
+                          ? approval?.alias_name
+                          : approval?.level1
+                      "
+                      placement="bottom-left"
+                      delay="0"
+                      type="black"
+                      [tooltipMandatory]="false"
+                    >
+                      {{
+                        approval?.alias_name
+                          ? approval?.alias_name
+                          : approval?.level1
+                      }}
+                    </div>
+                    <div
+                      class="vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3"
+                    >
+                      {{
+                        approval?.type === "ROUNDROBIN"
+                          ? "ROUND-ROBIN"
+                          : approval?.type === "ANYONE"
+                          ? "ANY ONE"
+                          : approval?.type
+                      }}
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2"
+                >
+                  <!-- <i class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                    >&#xe9ae;</i
+                  > -->
+                  <div
+                    *ngIf="
+                      approval?.type?.toLowerCase() === 'sequential' &&
+                      approval?.approvers?.length < 2
+                    "
+                    class="workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center"
+                  >
+                    {{ 1 == approval?.approvers?.length ? "Final" : 1 }}
+                  </div>
+                  <div
+                    *ngIf="
+                      approval?.approvers?.length > 1 &&
+                      approval?.type?.toLowerCase() === 'sequential'
+                    "
+                    class="workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center"
+                  >
+                    1
+                  </div>
+                  <span
+                    class="chipName vx-fs-11 vx-label-txt"
+                    [appTooltip]="approval?.approvers[0]?.member_name"
+                    placement="bottom-left"
+                    delay="0"
+                    type="black"
+                    [tooltipMandatory]="false"
+                    >{{ approval?.approvers[0]?.member_name }}</span
+                  >
+                  <button
+                    *ngIf="approval?.approvers?.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)="workflowPopover.popover()"
+                    placement="right"
+                  >
+                    +{{ approval?.approvers?.length - 1 }}
+                  </button>
+                </div>
+                <app-popover #workflowPopover [dontCloseonClick]="true">
+                  <div class="wf-action-list">
+                    <ul class="action-item">
+                      <li
+                        *ngFor="
+                          let approver of approval?.approvers | slice : 1;
+                          let approvalIndex = index
+                        "
+                      >
+                        <div class="avatar-card">
+                          <span
+                            class="value"
+                            [appTooltip]="approver?.member_name"
+                            placement="bottom-left"
+                            delay="0"
+                            type="black"
+                            [tooltipMandatory]="false"
+                          >
+                            <!-- <i class="icons">&#xe90d;</i> -->
+                            <span
+                              *ngIf="
+                                approval?.type?.toLowerCase() === 'sequential'
+                              "
+                              class="workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center"
+                              >{{
+                                approvalIndex + 1 ===
+                                approval?.approvers?.length - 1
+                                  ? "Final"
+                                  : approvalIndex + 2
+                              }}</span
+                            >
+                            {{ approver?.member_name }}
+                          </span>
+                        </div>
+                      </li>
+                    </ul>
+                  </div>
+                </app-popover>
+              </div>
+
+              <!-- <div class="vx-d-flex vx-align-center">
+                <button (click)="editLevelClicked(approval,approvalIndex)"
+                  class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+                >
+                  <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+                </button>
+                <button (click)="deleteLevel(approvalIndex)"
+                  class="deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center"
+                >
+                  <i class="icons vx-mr-1">&#xe9ae;</i> DELETE
+                </button>
+              </div> -->
+            </div>
+          </ng-container>
+          <p
+            *ngIf="
+              submitted &&
+              !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&
+              !policyApprovalFlag &&
+              !policyForm?.selectedApprovers[0]?.approvers?.length
+            "
+            [appScrollInView]="true"
+            class="error-message"
+          >
+            Select or create an approval workflow for this policy.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Policy Access -->
+    <div
+      *ngIf="true"
+      class="form-group-row"
+      [class.active]="activeSelector === 'policyAccess'"
+      [class.disabled]="activeSelector &&
+      activeSelector !== 'policyAccess' &&
+      sideSelectorElements.includes(activeSelector)"
+    >
+      <div class="left" [class.checked]="true">
+        <img
+          *ngIf="!policyForm?.policy_access_owners?.length && !policyForm?.policy_access_groups?.length && !policyForm?.availableOnPortal"
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/lock-scope.svg"
+          alt=""
+        />
+
+        <svg
+          *ngIf="policyForm?.policy_access_owners?.length || policyForm?.policy_access_groups?.length || policyForm?.availableOnPortal"
+          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">
+          <div class="vx-d-flex vx-align-center vx-justify-between">
+            <label class="vx-control-panel">POLICY PORTAL ACCESS</label>
+          </div>
+          <div *ngIf="!policyForm?.policy_access_owners?.length && !policyForm?.policy_access_groups?.length && !policyForm?.availableOnPortal"
+            (click)="activateSelector('policyAccess', true)"
+            class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
+            [class.disabled]="!policyForm?.selectedCategories?.length"
+          >
+            <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
+              Who should be able to view this policy?
+            </div>
+          </div>
+
+          <ng-container *ngIf="!policyForm?.availableOnPortal">
+            <div class="selectBoxSuccess vx-pl-2 vx-pr-3" *ngIf="policyForm?.policy_access_owners?.length || policyForm?.policy_access_groups?.length">
+              <div class="vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2">
+                <div class="vx-d-flex vx-align-center">
+                  <div *ngIf="policyForm?.policy_access_owners?.length"
+                    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="policyForm?.policy_access_type === 1"
+                    (click)="
+                        remove(
+                          'policyAccess',
+                          policyForm?.policy_access_owners[0]
+                        )
+                      "
+                      >&#xe9ae;</i
+                    >
+                    <span
+                      class="chipName vx-fs-11 vx-label-txt"
+                      [appTooltip]="policyForm?.policy_access_owners[0]?.employee_name"
+                      placement="bottom-left"
+                      delay="0"
+                      type="black"
+                      [tooltipMandatory]="false"
+                      >{{policyForm?.policy_access_owners[0]?.employee_name}}</span
+                    >
+                    <button
+                    *ngIf="policyForm?.policy_access_owners?.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 greenBg"
+                      appPopover
+                      (click)="policyAccessPopover.popover()"
+                      placement="left"
+                    >
+                      +{{ policyForm?.policy_access_owners.length - 1 }}
+                    </button>
+                  </div>
+
+                  <div
+                    class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"
+                    *ngIf="
+                      policyForm?.policy_access_owners.length > 0 &&
+                      policyForm?.policy_access_groups.length > 0
+                    "
+                  >
+                    &
+                  </div>
+                  <div
+                    class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+                    *ngIf="policyForm?.policy_access_groups.length > 0"
+                  >
+                    <i
+                      class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1" *ngIf="policyForm?.policy_access_type === 1"
+                      (click)="
+                        remove(
+                          'accessGroup',
+                          policyForm?.policy_access_groups[0]
+                        )
+                      "
+                      >&#xe9ae;</i
+                    >
+                    <span
+                      class="chipName vx-fs-11 vx-label-txt"
+                      [appTooltip]="
+                        policyForm?.policy_access_groups[0]?.group_name
+                      "
+                      placement="bottom-left"
+                      delay="0"
+                      type="black"
+                      [tooltipMandatory]="false"
+                      >{{ policyForm?.policy_access_groups[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)="accessGroup.popover()"
+                      placement="right"
+                      *ngIf="policyForm?.policy_access_groups.length > 1"
+                    >
+                      +{{ policyForm?.policy_access_groups.length - 1 }}
+                    </button>
+                  </div>
+
+                  <app-popover #policyAccessPopover [dontCloseonClick]="true">
+                    <div class="wf-action-list">
+                      <ul class="action-item">
+                        <li *ngFor="
+                        let user of policyForm?.policy_access_owners | slice : 1;
+                        let j = index
+                      ">
+                          <div class="avatar-card">
+                            <span
+                              class="value"
+                              [appTooltip]="user?.employee_name"
+                              placement="bottom-left"
+                              delay="0"
+                              type="black"
+                              [tooltipMandatory]="false"
+                            >
+                              <i class="icons" *ngIf="policyForm?.policy_access_type === 1" (click)="
+                              remove(
+                                'policyAccess',
+                                user
+                              )
+                            ">&#xe90d;</i>
+                              {{user?.employee_name}}
+                            </span>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </app-popover>
+                  <app-popover #accessGroup [dontCloseonClick]="true">
+                    <div class="wf-action-list">
+                      <ul class="action-item">
+                        <li
+                          *ngFor="
+                            let data of policyForm?.policy_access_groups | slice : 1;
+                            let j = index
+                          "
+                        >
+                          <div class="avatar-card">
+                            <span class="value">
+                              <i class="icons" *ngIf="policyForm?.policy_access_type === 1" (click)="remove('accessGroup', data)"
+                                >&#xe90d;</i
+                              >
+                              {{ data?.group_name }}
+                            </span>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </app-popover>
+                </div>
+
+                <button (click)="activateSelector('policyAccess', true)"
+                  class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+                >
+                  <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+                </button>
+              </div>
+
+              <!-- <div class="vx-mt-4 vx-mb-2">
+                <app-cs-radio
+                  [name]="'policyFormAccessType'" [checked]="policyForm?.policy_access_type === 0" (checkedEvent)="setAccessField(0)"
+                  ><div class="vx-fs-12 vx-paragraph-txt">
+                    Everyone who has access to this Policy Category
+                  </div></app-cs-radio
+                >
+                <app-cs-radio
+                  [name]="'policyFormAccessType'" [checked]="policyForm?.policy_access_type === 1" (checkedEvent)="setAccessField(1)"
+                class="vx-mt-1"
+                  ><div class="vx-fs-12 vx-paragraph-txt">
+                    Select users/groups
+                  </div></app-cs-radio
+                >
+              </div> -->
+            </div>
+          </ng-container>
+
+          <div class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between" *ngIf="policyForm?.availableOnPortal">
+            <span class="vx-fs-13 vx-paragraph-txt">Visible to All Current & Future Users</span>
+
+            <button (click)="activateSelector('policyAccess', true)" class="edit vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"><i class="icons vx-mr-1">&#xe90c;</i> EDIT</button>
+          </div>
+
+          <div class="vx-mt-2">
+            <app-cs-switch
+            *ngIf="policyForm.availableOnPortal || policyForm?.policy_access_owners?.length || policyForm?.policy_access_groups?.length"
+            [(ngValue)]="policyForm.acceptSuggestions"
+              >ACCEPT SUGGESTIONS
+              <i
+                class="icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2"
+                [appTooltip]="'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'"
+                placement="bottom-right"
+                delay="0"
+                type="white"
+                [tooltipMandatory]="true"
+                >&#xe91f;</i
+              ></app-cs-switch
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Attestations -->
+    <div
+      class="form-group-row"
+      [class.active]="false"
+      [class.disabled]="false"
+      *ngIf="false"
+    >
+      <div class="left" [class.checked]="false">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/attestations.svg"
+          alt=""
+        />
+
+        <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">
+          <div class="vx-d-flex vx-align-center vx-justify-between">
+            <label class="vx-control-panel">ATTESTATIONS</label>
+          </div>
+          <div
+            class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
+            [class.disabled]="false"
+          >
+            <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
+              Select the persons required to attest to this Policy
+            </div>
+          </div>
+
+          <div
+            class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
+          >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            >
+              <i class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="'Samantha Jones'"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >Samantha Jones</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)="policyAttestationPopover.popover()"
+                placement="left"
+              >
+                +4
+              </button>
+            </div>
+            <app-popover #policyAttestationPopover [dontCloseonClick]="true">
+              <div class="wf-action-list">
+                <ul class="action-item">
+                  <li *ngFor="let data of [1, 1, 1, 1, 1, 1, 1]">
+                    <div class="avatar-card">
+                      <span
+                        class="value"
+                        [appTooltip]="'Harshvardhan Kariwala'"
+                        placement="bottom-left"
+                        delay="0"
+                        type="black"
+                        [tooltipMandatory]="false"
+                      >
+                        <i class="icons">&#xe90d;</i>
+                        Harshvardhan Kariwala
+                      </span>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </app-popover>
+            <button
+              class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+            >
+              <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+            </button>
+          </div>
+
+          <div class="vx-mt-2">
+            <app-cs-switch
+              >REQUIRES E-SIGNATURE FOR ATTESTATION
+              <i
+                class="icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2"
+                [appTooltip]="
+                  'Requires e-signature for attestation info text here...'
+                "
+                placement="bottom-right"
+                delay="0"
+                type="white"
+                [tooltipMandatory]="true"
+                >&#xe91f;</i
+              ></app-cs-switch
+            >
+          </div>
+
+          <label class="vx-control-panel vx-mt-2">WHEN?</label>
+          <div
+            class="selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
+          >
+            <div
+              class="selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4"
+            >
+              What is the attestation schedule for this<br />policy?
+            </div>
+            <div class="vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase">
+              SET A FREQUENCY
+            </div>
+          </div>
+
+          <div
+            class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
+          >
+            <div class="selectBoxText vx-fs-13 vx-paragraph-txt">
+              Every Wednesday by 11:59 pm
+            </div>
+            <button
+              class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+            >
+              <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+            </button>
+          </div>
+
+          <label class="vx-control-panel vx-mt-2"
+            >ASSESSMENT OF UNDERSTANDING</label
+          >
+          <div
+            class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
+            [class.disabled]="false"
+          >
+            <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
+              Set up a questionnaire to confirm the reader’s<br />understanding
+              of the policy.
+            </div>
+          </div>
+
+          <div
+            class="selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
+          >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            >
+              <span class="chipName vx-fs-11 vx-label-txt">5 Questions</span>
+            </div>
+            <button
+              class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+            >
+              <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Approval Workflow -->
+    <div
+      class="form-group-row"
+      *ngIf="false"
+      [class.active]="activeSelector === 'approvers'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'approvers' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div
+        class="left"
+        [class.checked]="policyForm?.selectedApprovers?.length > 0"
+      >
+        <img
+          *ngIf="
+            policyForm?.selectedApprovers?.length == 0 ||
+            activeSelector === 'approvers'
+          "
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg"
+          alt="im"
+        />
+
+        <svg
+          *ngIf="
+            policyForm?.selectedApprovers?.length > 0 &&
+            activeSelector !== 'approvers'
+          "
+          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 approval-workflow"
+          [class.disabled]="policyApprovalFlag !== 0"
+        >
+          <label class="vx-control-panel">
+            Approval workflow <span class="required">*</span>
+            <button
+              (click)="
+                activateSelector('approvers', true);
+                addMoreLevels = true;
+                workflowType = 'SEQUENTIAL'
+              "
+              class="button"
+            >
+              Create a new Approval Workflow
+            </button>
+          </label>
+          <div
+            class="select"
+            [class.disabled]="approverWorkFlowList?.length == 0"
+            *ngIf="
+              policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||
+              policyForm?.selectedApprovers.length == 0
+            "
+          >
+            <cs-select
+              [ngModel]="selectedApprovalWorkflow"
+              (ngModelChange)="selectedWorkflowChange($event)"
+              [placeholder]="'Select approval workflow for this policy'"
+              name="selectedApprovalWorkflow"
+              [setMaxWidth]="true"
+            >
+              <cs-option
+                *ngFor="let data of approverWorkFlowList"
+                [value]="data"
+              >
+                {{ data.workflow_name }}
+              </cs-option>
+              <cs-option
+                [value]="-1"
+                (click)="
+                  activateSelector('approvers', true);
+                  addMoreLevels = true;
+                  workflowType = 'SEQUENTIAL'
+                "
+                >Create a new approval workflow</cs-option
+              >
+            </cs-select>
+          </div>
+          <ng-container
+            *ngIf="policyForm?.selectedApprovers[0]?.approvers?.length > 0"
+          >
+            <div
+              class="selected"
+              *ngFor="let level of policyForm?.selectedApprovers; let i = index"
+            >
+              <div class="workflow-label">
+                <p class="title">Level {{ i + 1 }}</p>
+                <p class="description">{{ level.name }}</p>
+              </div>
+              <div class="vx-d-flex vx-align-center">
+                <div class="chip-container">
+                  <span
+                    class="chip"
+                    *ngFor="
+                      let approver of level.approvers.slice(0, 1);
+                      let j = index
+                    "
+                    ><i class="icons" (click)="remove('approvers', approver, i)"
+                      >&#xe90d;</i
+                    >
+                    <span class="step" *ngIf="level.name == 'SEQUENTIAL'">{{
+                      j + 1
+                    }}</span
+                    >{{ approver.member_name }}</span
+                  >
+
+                  <button
+                    class="count"
+                    *ngIf="level.approvers?.length > 1"
+                    type="button"
+                    appPopover
+                    (click)="labelName.popover()"
+                    placement="left"
+                  >
+                    +
+
+                    {{ level.approvers.slice(1).length }}
+                  </button>
+                  <app-popover #labelName [dontCloseonClick]="true">
+                    <div class="wf-action-list">
+                      <ul class="action-item">
+                        <li
+                          *ngFor="
+                            let approver of level.approvers | slice : 1;
+                            let j = index
+                          "
+                        >
+                          <div class="avatar-card">
+                            <span class="value">
+                              <i
+                                class="icons"
+                                (click)="remove('approvers', approver, i)"
+                                >&#xe90d;</i
+                              >
+                              <span
+                                class="step"
+                                *ngIf="level.name == 'SEQUENTIAL'"
+                              >
+                                {{
+                                  j == level.approvers.slice(1).length - 1
+                                    ? "Final"
+                                    : j + 2
+                                }}
+                              </span>
+                              {{ approver.member_name }}
+                            </span>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </app-popover>
+                </div>
+                <button
+                  class="edit"
+                  type="button"
+                  (click)="
+                    activateSelector('approvers', true, level.name);
+                    approversListIndex = i
+                  "
+                >
+                  <i class="icons">&#xe9ba;</i>Edit
+                </button>
+                <button
+                  class="close-btn"
+                  (click)="remove('workflowLevel', level, i)"
+                >
+                  <i class="icons">&#xe90d;</i>
+                </button>
+              </div>
+            </div>
+          </ng-container>
+
+          <p
+            *ngIf="
+              submitted &&
+              !policyForm?.selectedApprovers?.length &&
+              !policyApprovalFlag
+            "
+            [appScrollInView]="true"
+            class="error-message"
+          >
+            Select or create an approval workflow for this policy.
+          </p>
+
+          <label
+            class="vx-control-panel"
+            *ngIf="policyForm.selectedApprovers[0]?.approvers?.length > 0"
+            ><button
+              class="button"
+              (click)="
+                activateSelector('approvers', true);
+                addMoreLevels = true;
+                workflowType = 'SEQUENTIAL'
+              "
+            >
+              + Add More Levels
+            </button></label
+          >
+        </div>
+      </div>
+    </div>
+
+    <!-- Who / now Attestation -->
+    <div
+      class="form-group-row"
+      [class.active]="activeSelector === 'assignees'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'assignees' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div
+        class="left"
+        [class.checked]="policyForm?.selectedAssignees?.length > 0"
+      >
+        <img
+          *ngIf="
+            policyForm?.selectedAssignees?.length == 0 ||
+            activeSelector === 'assignees'
+          "
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg"
+          alt="im"
+        />
+
+        <svg
+          *ngIf="
+            policyForm?.selectedAssignees?.length > 0 &&
+            activeSelector !== 'assignees'
+          "
+          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">Attestation</label>
+          <div
+            class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2"
+            *ngIf="
+              (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||
+              (policyForm?.selectedAssignees?.length == 0 &&
+                groupEnabled &&
+                policyForm?.selectedGroupAssignee.length == 0)
+            "
+            (click)="activateSelector('assignees', true)"
+          >
+            <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
+              Select the persons responsible for attesting this policy.
+            </div>
+          </div>
+
+          <div
+            class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2"
+            *ngIf="
+              policyForm?.selectedAssignees?.length > 0 ||
+              policyForm?.selectedGroupAssignee?.length > 0
+            "
+          >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="!groupEnabled"
+            >
+              <ng-container
+                *ngFor="
+                  let assignee of policyForm?.selectedAssignees?.slice(0, 1)
+                "
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="remove('assignees', assignee)"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="assignee.employee_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ assignee.employee_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)="assigneePopover.popover()"
+                placement="left"
+                *ngIf="policyForm?.selectedAssignees?.length > 1"
+              >
+                +{{ policyForm?.selectedAssignees?.slice(1).length }}
+              </button>
+            </div>
+            <ng-container *ngIf="groupEnabled">
+              <div
+                class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+                *ngIf="groupEnabled && policyForm?.selectedAssignees.length > 0"
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="
+                    remove('assignees', policyForm?.selectedAssignees[0])
+                  "
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="policyForm?.selectedAssignees[0]?.employee_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ policyForm?.selectedAssignees[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"
+                  appPopover
+                  (click)="UserPopover.popover()"
+                  placement="right"
+                  *ngIf="policyForm?.selectedAssignees.length > 1"
+                >
+                  +{{ policyForm?.selectedAssignees.length - 1 }}
+                </button>
+              </div>
+              <div
+                class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"
+                *ngIf="
+                  policyForm?.selectedAssignees.length > 0 &&
+                  policyForm?.selectedGroupAssignee.length > 0
+                "
+              >
+                &
+              </div>
+              <div
+                class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+                *ngIf="policyForm?.selectedGroupAssignee.length > 0"
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="
+                    remove(
+                      'groupAssignees',
+                      policyForm?.selectedGroupAssignee[0]
+                    )
+                  "
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="
+                    policyForm?.selectedGroupAssignee[0]?.group_name
+                  "
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ policyForm?.selectedGroupAssignee[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="policyForm?.selectedGroupAssignee.length > 1"
+                >
+                  +{{ policyForm?.selectedGroupAssignee.length - 1 }}
+                </button>
+              </div>
+            </ng-container>
+            <button
+              class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+              (click)="activateSelector('assignees', true)"
+            >
+              <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+            </button>
+          </div>
+
+          <p
+            *ngIf="
+              submitted &&
+              ((policyForm?.selectedAssignees?.length == 0 &&
+                policyForm?.frequency_details &&
+                !groupEnabled) ||
+                (policyForm?.selectedAssignees?.length == 0 &&
+                  policyForm.selectedGroupAssignee.length == 0 &&
+                  policyForm?.frequency_details &&
+                  groupEnabled) || (isSendForAttestation && policyForm?.selectedAssignees?.length === 0))
+            "
+            id="whovalidatemsg"
+            class="error-message"
+            [appScrollInView]="true"
+          >
+            Select the persons required to attest to this Policy.
+          </p>
+          <app-cs-switch
+            [(ngValue)]="policyForm.requiresSignatureForAttestation"
+            [class.disabled]="policyForm?.selectedAssignees?.length == 0"
+            class="who-toggle"
+            >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION
+            <i
+              class="icons"
+              [appTooltip]="
+                'If selected, the readers will be required to attest this policy using their electronic signature.'
+              "
+              placement="bottom-right"
+              type="white"
+              delay="0"
+              [tooltipMandatory]="true"
+              >&#xe91f;</i
+            ></app-cs-switch
+          >
+          <app-popover #assigneePopover [dontCloseonClick]="true">
+            <div class="wf-action-list">
+              <ul class="action-item">
+                <li
+                  *ngFor="
+                    let assignee of policyForm?.selectedAssignees | slice : 1;
+                    let j = index
+                  "
+                >
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i class="icons" (click)="remove('assignees', assignee)"
+                        >&#xe90d;</i
+                      >
+                      {{ assignee.employee_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </app-popover>
+          <app-popover #UserPopover [dontCloseonClick]="true">
+            <div class="wf-action-list">
+              <ul class="action-item">
+                <li
+                  *ngFor="
+                    let assignee of policyForm?.selectedAssignees | slice : 1;
+                    let j = index
+                  "
+                >
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i class="icons" (click)="remove('assignees', assignee)"
+                        >&#xe90d;</i
+                      >
+                      {{ assignee.employee_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 data of policyForm?.selectedGroupAssignee | slice : 1;
+                    let j = index
+                  "
+                >
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i class="icons" (click)="remove('groupAssignees', data)"
+                        >&#xe90d;</i
+                      >
+                      {{ data.group_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </app-popover>
+
+          <!-- overseer -->
+          <app-popover #overseerPopover [dontCloseonClick]="true">
+            <div class="wf-action-list">
+              <ul class="action-item">
+                <li
+                  *ngFor="
+                    let overseer of policyForm?.CCEmail | slice : 1;
+                    let j = index
+                  "
+                >
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i class="icons" (click)="remove('ccEmail', overseer)"
+                        >&#xe90d;</i
+                      >
+                      {{ overseer?.employee_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 policyForm?.CCGroupEmail | slice : 1;
+                    let j = index
+                  "
+                >
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i class="icons" (click)="remove('ccGroupEmail', data)"
+                        >&#xe90d;</i
+                      >
+                      {{ data?.group_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </app-popover>
+          <!-- overseer end -->
+
+          <!-- overseer fail start -->
+          <app-popover #overseerFailPopover [dontCloseonClick]="true">
+            <div class="wf-action-list">
+              <ul class="action-item">
+                <li
+                  *ngFor="
+                    let overseer of policyForm?.CCFailEmail | slice : 1;
+                    let j = index
+                  "
+                >
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i class="icons" (click)="remove('ccFail', overseer)"
+                        >&#xe90d;</i
+                      >
+                      {{ overseer?.employee_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </app-popover>
+          <app-popover #overseerFailGroup [dontCloseonClick]="true">
+            <div class="wf-action-list">
+              <ul class="action-item">
+                <li
+                  *ngFor="
+                    let data of policyForm?.CCFailEmailGroup | slice : 1;
+                    let j = index
+                  "
+                >
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i
+                        class="icons"
+                        (click)="remove('ccGroupFailEmail', data)"
+                        >&#xe90d;</i
+                      >
+                      {{ data?.group_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </app-popover>
+          <!-- overseer fail end -->
+        </div>
+      </div>
+    </div>
+
+    <!-- When -->
+    <div
+      class="form-group-row"
+      [class.active]="activeSelector === 'frequency'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'frequency' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div
+        *ngIf="false"
+        class="left"
+        [class.checked]="policyForm?.frequency_details"
+      >
+        <img
+          *ngIf="
+            !policyForm?.frequency_details || activeSelector === 'frequency'
+          "
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg"
+          alt="im"
+        />
+
+        <svg
+          *ngIf="
+            policyForm?.frequency_details && activeSelector !== 'frequency'
+          "
+          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">When?</label>
+
+          <div
+            *ngIf="policyForm?.frequency_details == ''"
+            class="select button-sec"
+          >
+            <div
+              class="custom-input frequency-custom-input"
+              (click)="activateSelector('frequency', true)"
+            >
+              {{ frequencyPlaceholder }}
+            </div>
+
+            <button (click)="activateSelector('frequency', true)" type="button">
+              Set A frequency
+            </button>
+          </div>
+          <div
+            *ngIf="policyForm?.frequency_details != ''"
+            class="selected button-sec"
+          >
+            <span class="chip">{{ frequencyPlaceholder }}</span>
+            <button
+              *ngIf="activeSelector !== 'frequency'"
+              type="button"
+              class="edit"
+              (click)="activateSelector('frequency', true)"
+            >
+              <i class="icons">&#xe9ba;</i>Edit
+            </button>
+          </div>
+          <p
+            *ngIf="
+              submitted &&
+              ((policyForm?.selectedAssignees?.length > 0 &&
+                !policyForm?.frequency_details &&
+                !groupEnabled) ||
+                ((policyForm?.selectedAssignees?.length > 0 ||
+                  policyForm?.selectedGroupAssignee?.length > 0) &&
+                  !policyForm?.frequency_details &&
+                  groupEnabled))
+            "
+            class="error-message"
+            [appScrollInView]="true"
+          >
+            Select an attestation schedule for this policy.
+          </p>
+
+          <!-- <label class="vx-control-panel">Effective Date</label>
+                  <div class="date-time-picker">
+                      <div class="picker-group">
+                          <input type="text" readonly placeholder="Select the date from which this policy goes into effect."
+                              [value]="policyForm.policyDueDate  | date: 'dd MMM yyyy'" (click)="openDatePicker();">
+                          <i class="icons">&#xe92d;</i>
+                          <dp-date-picker #datePicker (onSelect)="datePickerOverlay = false;closeDatePicker($event)"
+                              [config]="dateConfig" [(ngModel)]="policyForm.policyDueDate">
+                          </dp-date-picker>
+                          <div class="vx-overlay" (click)="closeDatePicker($event)" *ngIf="datePickerOverlay"></div>
+                      </div>
+                  </div> -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Checkpoints / Assessment of Understanding -->
+    <div
+      class="form-group-row"
+      [appScrollInView]="scrollToBottom"
+      *ngIf="true"
+      [class.active]="activeSelector === 'checkpoints'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'checkpoints' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div
+        *ngIf="false"
+        class="left"
+        [class.checked]="policyForm?.checkpointDetails?.length > 0"
+      >
+        <img
+          *ngIf="
+            policyForm?.checkpointDetails?.length == 0 ||
+            activeSelector === 'checkpoints'
+          "
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg"
+          alt="im"
+        />
+
+        <svg
+          *ngIf="
+            policyForm?.checkpointDetails?.length > 0 &&
+            activeSelector !== 'checkpoints'
+          "
+          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">
+            Assessment of Understanding
+            <!-- <button  *ngIf="policyForm?.checkpointDetails?.length===0" class="button" (click)="activateSelector('checkpoints',true)">+ Add Checkpoints</button> -->
+          </label>
+          <div
+            class="select"
+            *ngIf="policyForm?.checkpointDetails?.length === 0"
+            (click)="activateSelector('checkpoints', true)"
+          >
+            <!-- <input type="text" placeholder="Set up a questionnaire to confirm the reader’s understanding of the policy." readonly> -->
+            <div class="custom-input">
+              Set up a questionnaire to confirm the reader’s<br />understanding
+              of the policy.
+            </div>
+          </div>
+          <div
+            class="selected"
+            *ngIf="policyForm?.checkpointDetails?.length > 0"
+          >
+            <!-- <div class="chip-container">
+                      <span class="chip">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>
+
+                      <span class="checkpoint-point-text first">TOTAL POINTS: <span class="no">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>
+
+                      <span class="checkpoint-point-text">POINTS REQUIRED TO ATTEST : <span class="no">{{policyForm?.passingMarks}}</span></span>
+
+                    </div> -->
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            >
+              <span class="chipName vx-fs-11 vx-label-txt">{{
+                policyForm?.checkpointDetails?.length +
+                  (policyForm?.checkpointDetails?.length > 1
+                    ? " Questions"
+                    : " Question")
+              }}</span>
+            </div>
+            <button
+              class="edit"
+              type="button"
+              (click)="activateSelector('checkpoints', true)"
+            >
+              <i class="icons">&#xe9ba;</i> Edit
+            </button>
+          </div>
+          <!-- <app-popover #checkpointPopOver [dontCloseonClick]="true">
+                  <div class="wf-action-list">
+                      <ul class="action-item">
+                          <li *ngFor="let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index">
+                              <div class="avatar-card">
+                                  <span class="value">
+                                      <i class="icons" (click)="remove('checkpoints',checkpoint,j+1)">&#xe90d;</i>
+                                      {{ checkpoint?.question }}
+                                  </span>
+                              </div>
+                          </li>
+                      </ul>
+                  </div>
+              </app-popover> -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Risk Classification -->
+    <div
+      class="form-group-row"
+      *ngIf="showRiskClassification && false"
+      [class.disabled]="activeSelector && activeSelector !== 'name'"
+    >
+      <div class="left" [class.checked]="policyForm.riskRating">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg"
+          alt="im"
+          *ngIf="!policyForm?.riskRating"
+        />
+
+        <svg
+          class="checkIcon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 52 52"
+          *ngIf="policyForm?.riskRating"
+        >
+          <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</label>
+          <div class="classification">
+            <label
+              class="low"
+              *ngFor="let class of riskClassification"
+              [ngClass]="[class.class]"
+            >
+              <input
+                type="radio"
+                name="classification"
+                [value]="class.value"
+                [checked]="policyForm?.riskRating === class.value"
+                [(ngModel)]="policyForm.riskRating"
+              />
+              <span>{{ class.name }}</span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Responsibility Center -->
+    <div
+      class="form-group-row"
+      [appScrollInView]="scrollToBottom"
+      *ngIf="policyForm.addResponsibilityCenters"
+      [class.active]="activeSelector === 'rc'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'rc' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div class="left" [class.checked]="policyForm?.selectedRCs?.length > 0">
+        <img
+          *ngIf="
+            policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'
+          "
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg"
+          alt=""
+        />
+
+        <svg
+          *ngIf="policyForm?.selectedRCs?.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</label>
+          <div class="select" *ngIf="policyForm?.selectedRCs?.length == 0">
+            <input
+              type="text"
+              (click)="activateSelector('rc', true)"
+              placeholder="Select Responsibility Center(s) that this policy relates to."
+              readonly
+            />
+          </div>
+
+          <div class="selected" *ngIf="policyForm?.selectedRCs?.length > 0">
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            >
+              <ng-container
+                *ngFor="let rc of policyForm?.selectedRCs?.slice(0, 1)"
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="remove('rc', rc)"
+                  >&#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
+                >
+              </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)="rcPopover.popover()"
+                placement="left"
+                *ngIf="policyForm?.selectedRCs?.length > 1"
+              >
+                +{{ policyForm?.selectedRCs?.slice(1).length }}
+              </button>
+            </div>
+            <button
+              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 policyForm?.selectedRCs | 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>
+        </div>
+      </div>
+    </div>
+
+    <!-- Version -->
+    <div
+      *ngIf="policyForm.addVersion"
+      class="form-group-row"
+      [class.disabled]="
+        activeSelector && sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div class="left" [class.checked]="policyForm.policy_version">
+        <img
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg"
+          alt="name"
+          *ngIf="!policyForm.policy_version"
+        />
+
+        <svg
+          *ngIf="policyForm.policy_version"
+          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">VERSION</label>
+          <input
+            [(ngModel)]="policyForm.policy_version"
+            (change)="onVersion($event)"
+            type="text"
+            placeholder="Specify the policy version."
+          />
+          <p
+            *ngIf="!isVersionValid"
+            class="error-message"
+            [appScrollInView]="true"
+          >
+            {{ versionErrorMessage }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Reviewer -->
+    <div
+      class="form-group-row"
+      [appScrollInView]="scrollToBottom"
+      *ngIf="policyForm.addReviewers && false"
+      [class.active]="activeSelector === 'reviewer'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'reviewer' &&
+        activeSelector !== 'reviewerFrequency' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div
+        class="left"
+        [class.checked]="policyForm?.selectedReviewers?.length > 0"
+      >
+        <img
+          *ngIf="
+            policyForm?.selectedReviewers?.length == 0 ||
+            activeSelector === 'reviewer'
+          "
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg"
+          alt=""
+        />
+
+        <svg
+          *ngIf="
+            policyForm?.selectedReviewers?.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="policyForm?.selectedReviewers?.length == 0"
+          >
+            <input
+              type="text"
+              (click)="activateSelector('reviewer', true)"
+              placeholder="Select the person responsible for reviewing this policy"
+              readonly
+            />
+          </div>
+
+          <div
+            class="selected"
+            *ngIf="policyForm?.selectedReviewers?.length > 0"
+          >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            >
+              <ng-container
+                *ngFor="let reviewer of policyForm?.selectedReviewers"
+              >
+                <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>
+            </div>
+
+            <button
+              class="edit"
+              type="button"
+              (click)="activateSelector('reviewer', true)"
+            >
+              <i class="icons">&#xe9ba;</i> Edit
+            </button>
+          </div>
+          <p
+            *ngIf="
+              submitted &&
+              policyForm?.selectedReviewers?.length == 0 &&
+              policyForm?.review_frequency_details
+            "
+            class="error-message"
+            [appScrollInView]="true"
+          >
+            Select a reviewer for this policy.
+          </p>
+
+          <label class="vx-control-panel">When? </label>
+
+          <div
+            *ngIf="policyForm?.review_frequency_details == ''"
+            class="select button-sec"
+          >
+            <input
+              type="text"
+              (click)="activateSelector('reviewerFrequency', true)"
+              [placeholder]="reviewerFrequencyPlaceholder"
+              readonly
+            />
+            <button
+              (click)="activateSelector('reviewerFrequency', true)"
+              type="button"
+            >
+              Set A frequency
+            </button>
+          </div>
+          <div
+            *ngIf="policyForm?.review_frequency_details != ''"
+            class="selected button-sec"
+          >
+            <span class="chip">{{ reviewerFrequencyPlaceholder }}</span>
+            <button
+              *ngIf="activeSelector !== 'reviewerFrequency'"
+              type="button"
+              class="edit"
+              (click)="activateSelector('reviewerFrequency', true)"
+            >
+              <i class="icons">&#xe9ba;</i>Edit
+            </button>
+          </div>
+          <p
+            *ngIf="
+              submitted &&
+              policyForm?.selectedReviewers?.length > 0 &&
+              !policyForm?.review_frequency_details
+            "
+            class="error-message"
+            [appScrollInView]="true"
+          >
+            Select the review schedule for this policy.
+          </p>
+
+          <app-format-and-evidence
+            (updateFiles)="saveSelectedList('reviewer_attachments', $event)"
+            #formatEvidence
+            [mode]="'policyReviewer'"
+            [organization_id]="organization_id"
+            [formatEvidanceData]="policyForm?.documentsAndLinks"
+          >
+          </app-format-and-evidence>
+        </div>
+      </div>
+    </div>
+
+    <!-- Overseer -->
+    <div
+      class="form-group-row"
+      [appScrollInView]="scrollToBottom"
+      *ngIf="policyForm.addOverseers"
+      [class.active]="
+        activeSelector === 'ccEmail' || activeSelector === 'ccFail'
+      "
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'ccEmail' &&
+        activeSelector !== 'ccFail' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div
+        class="left"
+        [class.checked]="
+          policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0
+        "
+      >
+        <img
+          *ngIf="
+            (policyForm?.CCFailEmail?.length == 0 &&
+              policyForm?.CCEmail?.length == 0) ||
+            activeSelector === 'ccEmail' ||
+            activeSelector === 'ccFail'
+          "
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg"
+          alt="im"
+        />
+
+        <svg
+          *ngIf="
+            (policyForm?.CCFailEmail?.length > 0 ||
+              policyForm?.CCEmail?.length > 0) &&
+            activeSelector !== 'ccEmail' &&
+            activeSelector !== 'ccFail'
+          "
+          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">Oversight</label>
+          <div
+            class="select"
+            *ngIf="
+              policyForm?.CCEmail?.length == 0 &&
+              policyForm?.CCGroupEmail.length == 0
+            "
+          >
+            <input
+              type="text"
+              (click)="activateSelector('ccEmail', true)"
+              placeholder="Who should have oversight of this policy?"
+              readonly
+            />
+          </div>
+          <div
+            class="selected"
+            *ngIf="
+              policyForm?.CCEmail?.length > 0 ||
+              policyForm?.CCGroupEmail.length > 0
+            "
+          >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="!groupEnabled"
+            >
+              <ng-container
+                *ngFor="let ccEmail of policyForm?.CCEmail?.slice(0, 1)"
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="remove('ccEmail', ccEmail)"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="ccEmail.employee_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ ccEmail.employee_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)="ccEmailPopover.popover()"
+                placement="left"
+                *ngIf="policyForm?.CCEmail?.length > 1"
+              >
+                +{{ policyForm?.CCEmail?.slice(1).length }}
+              </button>
+            </div>
+
+            <div *ngIf="groupEnabled" class="chip-container">
+              <div
+                class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+                *ngIf="groupEnabled && policyForm?.CCEmail?.length > 0"
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="remove('ccEmail', policyForm?.CCEmail[0])"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="policyForm?.CCEmail[0].employee_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ policyForm?.CCEmail[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)="overseerPopover.popover()"
+                  placement="right"
+                  *ngIf="policyForm?.CCEmail?.length > 1"
+                >
+                  +{{ policyForm?.CCEmail?.length - 1 }}
+                </button>
+              </div>
+
+              <div
+                class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"
+                *ngIf="
+                  policyForm?.CCEmail.length > 0 &&
+                  policyForm?.CCGroupEmail?.length > 0
+                "
+              >
+                &
+              </div>
+
+              <div
+                class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+                *ngIf="policyForm?.CCGroupEmail.length > 0"
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="remove('ccGroupEmail', policyForm?.CCGroupEmail[0])"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="policyForm?.CCGroupEmail[0]?.group_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ policyForm?.CCGroupEmail[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="policyForm?.CCGroupEmail?.length > 1"
+                >
+                  +{{ policyForm?.CCGroupEmail?.length - 1 }}
+                </button>
+              </div>
+            </div>
+
+            <button
+              class="edit"
+              type="button"
+              (click)="activateSelector('ccEmail', true)"
+            >
+              <i class="icons">&#xe9ba;</i> Edit
+            </button>
+          </div>
+
+          <div
+            class="select"
+            *ngIf="
+              policyForm?.CCFailEmail?.length == 0 &&
+              policyForm?.CCFailEmailGroup?.length == 0
+            "
+          >
+            <input
+              type="text"
+              (click)="activateSelector('ccFail', true)"
+              placeholder="Who should be notified if the policy is not attested on time?"
+              readonly
+            />
+          </div>
+
+          <div
+            class="selected"
+            *ngIf="
+              policyForm?.CCFailEmail?.length > 0 ||
+              policyForm?.CCFailEmailGroup?.length > 0
+            "
+          >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+              *ngIf="!groupEnabled"
+            >
+              <ng-container
+                *ngFor="let ccFail of policyForm?.CCFailEmail?.slice(0, 1)"
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="remove('ccFail', ccFail)"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="ccFail.employee_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ ccFail.employee_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)="ccFailPopover.popover()"
+                placement="right"
+                *ngIf="policyForm?.CCFailEmail?.length > 1"
+              >
+                +{{ policyForm?.CCFailEmail?.slice(1).length }}
+              </button>
+            </div>
+
+            <div *ngIf="groupEnabled" class="chip-container">
+              <div
+                class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+                *ngIf="groupEnabled && policyForm?.CCFailEmail.length > 0"
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="remove('ccFail', policyForm?.CCFailEmail[0])"
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="policyForm?.CCFailEmail[0]?.employee_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ policyForm?.CCFailEmail[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)="overseerFailPopover.popover()"
+                  placement="right"
+                  *ngIf="policyForm?.CCFailEmail?.length > 1"
+                >
+                  +{{ policyForm?.CCFailEmail?.length - 1 }}
+                </button>
+              </div>
+
+              <div
+                class="vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2"
+                *ngIf="
+                  policyForm?.CCFailEmail?.length > 0 &&
+                  policyForm?.CCFailEmailGroup?.length > 0
+                "
+              >
+                &
+              </div>
+
+              <div
+                class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+                *ngIf="policyForm?.CCFailEmailGroup?.length > 0"
+              >
+                <i
+                  class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                  (click)="
+                    remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])
+                  "
+                  >&#xe9ae;</i
+                >
+                <span
+                  class="chipName vx-fs-11 vx-label-txt"
+                  [appTooltip]="policyForm?.CCFailEmailGroup[0]?.group_name"
+                  placement="bottom-left"
+                  delay="0"
+                  type="black"
+                  [tooltipMandatory]="false"
+                  >{{ policyForm?.CCFailEmailGroup[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)="overseerFailGroup.popover()"
+                  placement="right"
+                  *ngIf="policyForm?.CCFailEmailGroup?.length > 1"
+                >
+                  +{{ policyForm?.CCFailEmailGroup?.length - 1 }}
+                </button>
+              </div>
+            </div>
+            <button
+              class="edit"
+              type="button"
+              (click)="activateSelector('ccFail', true)"
+            >
+              <i class="icons">&#xe9ba;</i> Edit
+            </button>
+          </div>
+          <app-popover #ccEmailPopover [dontCloseonClick]="true">
+            <div class="wf-action-list">
+              <ul class="action-item">
+                <li
+                  *ngFor="
+                    let ccEmail of policyForm?.CCEmail | slice : 1;
+                    let j = index
+                  "
+                >
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i class="icons" (click)="remove('ccEmail', ccEmail)"
+                        >&#xe90d;</i
+                      >
+                      {{ ccEmail.employee_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </app-popover>
+          <app-popover #ccFailPopover [dontCloseonClick]="true">
+            <div class="wf-action-list">
+              <ul class="action-item">
+                <li
+                  *ngFor="
+                    let ccFail of policyForm?.CCFailEmail | slice : 1;
+                    let j = index
+                  "
+                >
+                  <div class="avatar-card">
+                    <span class="value">
+                      <i class="icons" (click)="remove('ccFail', ccFail)"
+                        >&#xe90d;</i
+                      >
+                      {{ ccFail.employee_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </app-popover>
+        </div>
+      </div>
+    </div>
+
+    <!-- Related Documents -->
+    <div
+      class="form-group-row"
+      [appScrollInView]="scrollToBottom"
+      *ngIf="policyForm.addAssociatedDocuments"
+      [class.disabled]="activeSelector && activeSelector !== 'name'"
+    >
+      <div class="left">
+        <img
+          *ngIf="policyForm.associatedDocuments.formatFiles?.length == 0"
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg"
+          alt="im"
+        />
+
+        <svg
+          *ngIf="policyForm.associatedDocuments.formatFiles?.length > 0"
+          class="checkIcon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 52 52"
+        >
+          <circle
+            class="checkIcon__circle"
+            cx="26"
+            cy="26"
+            r="25"
+            fill="none"
+          />
+          <path
+            class="checkIcon__check"
+            fill="none"
+            d="M14.1 27.2l7.1 7.2 16.7-16.8"
+          />
+        </svg>
+      </div>
+      <div class="right">
+        <div class="vx-form-group">
+          <label class="vx-control-panel">RELATED DOCUMENTS</label>
+          <app-format-and-evidence
+            (updateFiles)="saveSelectedList('associatedDocuments', $event)"
+            [mode]="'policy'"
+            [organization_id]="organization_id"
+            [formatEvidanceData]="policyForm?.associatedDocuments"
+          ></app-format-and-evidence>
+        </div>
+      </div>
+    </div>
+
+    <!-- Link Programs & Responsibilities -->
+    <div
+      *ngIf="policyForm?.addLinkProgram"
+      class="form-group-row"
+      [class.active]="activeSelector === 'linkProgram'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'linkProgram' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div
+        class="left"
+        [class.checked]="
+          policyForm?.programSelectedValues?.program?.category_id
+        "
+      >
+        <img
+          *ngIf="!policyForm?.programSelectedValues?.program?.category_id"
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg"
+          alt=""
+        />
+
+        <svg
+          *ngIf="policyForm?.programSelectedValues?.program?.category_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"
+            >LINK PROGRAMS & RESPONSIBILITIES</label
+          >
+          <div
+            *ngIf="!policyForm?.programSelectedValues?.program?.category_id"
+            (click)="activateSelector('linkProgram', true)"
+            class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
+            [class.disabled]="false"
+          >
+            <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
+              Select Programs & responsibilities that are<br />associated with
+              this policy.
+            </div>
+          </div>
+
+          <div
+            class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
+            *ngIf="policyForm?.programSelectedValues?.program?.category_id"
+          >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            >
+              <i
+                (click)="
+                  remove('linkProgram', policyForm?.programSelectedValues)
+                "
+                class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="policyForm?.programSelectedValues?.program?.name"
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{ policyForm?.programSelectedValues?.program?.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)="programResponsibilityPopover.popover()"
+                placement="left"
+              >
+                +4
+              </button> -->
+            </div>
+            <app-popover
+              #programResponsibilityPopover
+              [dontCloseonClick]="true"
+            >
+              <div class="wf-action-list">
+                <ul class="action-item">
+                  <li *ngFor="let data of [1, 1, 1, 1, 1, 1, 1]">
+                    <div class="avatar-card">
+                      <span
+                        class="value"
+                        [appTooltip]="
+                          'Reporting information security weaknesses'
+                        "
+                        placement="bottom-left"
+                        delay="0"
+                        type="black"
+                        [tooltipMandatory]="false"
+                      >
+                        <i class="icons">&#xe90d;</i>
+                        Reporting information security weaknesses
+                      </span>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </app-popover>
+            <button
+              class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+              (click)="activateSelector('linkProgram', true)"
+            >
+              <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Link Assessment -->
+    <div
+      *ngIf="policyForm.addLinkAssessment"
+      class="form-group-row"
+      [class.active]="activeSelector === 'isAssessment'"
+      [class.disabled]="
+        activeSelector &&
+        activeSelector !== 'isAssessment' &&
+        sideSelectorElements.includes(activeSelector)
+      "
+    >
+      <div class="left" [class.checked]="policyForm?.assessment?.length">
+        <img
+          *ngIf="!policyForm?.assessment?.length"
+          src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg"
+          alt=""
+        />
+
+        <svg
+          *ngIf="policyForm?.assessment?.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">
+        <div class="vx-form-group">
+          <label class="vx-control-panel">LINK ASSESSMENTS</label>
+          <div
+            *ngIf="policyForm?.assessment?.length === 0"
+            (click)="activateSelector('isAssessment', true)"
+            class="selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center"
+            [class.disabled]="false"
+          >
+            <div class="selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4">
+              Select assessments that are associated with this<br />policy.
+            </div>
+          </div>
+
+          <div
+            *ngIf="policyForm?.assessment?.length > 0"
+            class="selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between"
+          >
+            <div
+              class="chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2"
+            >
+              <i class="icons cross vx-fs-10 vx-paragraph-txt vx-mr-1"
+                >&#xe9ae;</i
+              >
+              <span
+                class="chipName vx-fs-11 vx-label-txt"
+                [appTooltip]="
+                  policyForm.assessment[0]?.assessmentDetails?.assessment_name
+                "
+                placement="bottom-left"
+                delay="0"
+                type="black"
+                [tooltipMandatory]="false"
+                >{{
+                  policyForm.assessment[0]?.assessmentDetails?.assessment_name
+                }}</span
+              >
+            </div>
+            <app-popover
+              #programResponsibilityPopover
+              [dontCloseonClick]="true"
+            >
+              <div class="wf-action-list">
+                <ul class="action-item">
+                  <li
+                    *ngFor="let assessment of policyForm.assessment | slice : 1"
+                  >
+                    <div class="avatar-card">
+                      <span
+                        class="value"
+                        [appTooltip]="
+                          assessment?.assessmentDetails?.assessment_name
+                        "
+                        placement="bottom-left"
+                        delay="0"
+                        type="black"
+                        [tooltipMandatory]="false"
+                      >
+                        <i class="icons">&#xe90d;</i>
+                        {{ assessment?.assessmentDetails?.assessment_name }}
+                      </span>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </app-popover>
+            <button
+              (click)="activateSelector('isAssessment', true)"
+              class="editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center"
+            >
+              <i class="icons vx-mr-1">&#xe90c;</i> EDIT
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <app-checkbox-list
+    [config]="categoryConfig"
+    [twoColumn]="false"
+    [itemsList]="categoryList"
+    [selectedItems]="policyForm.selectedCategories"
+    [identifierKey]="'_id'"
+    [displayKey]="'item_name'"
+    [tooltipKey]="'item_name'"
+    *ngIf="activeSelector === 'category'"
+    (saveList)="saveSelectedList('category', $event)"
+    (closeList)="disableSelector()"
+  >
+  </app-checkbox-list>
+  <!-- <app-checkbox-list [config]="approvalWorkflowConfig" [twoColumn]="true"
+  [itemsList]=""
+  [selectedItems]="policyForm.issueCCUsers" [identifierKey]="'employee_email'" [displayKey]="'employee_name'" [tooltipKey]="'employee_email'"
+  *ngIf="activeSelector==='ISSUE_CC'" (saveList)="selectorAction($event,'ISSUE_CC')"
+  (closeList)="fieldDeselector('ISSUE_CC')">
+</app-checkbox-list> -->
+
+  <app-responsibility-centers-list
+    *ngIf="activeSelector === 'rc'"
+    [responsibilityCentersList]="rcList"
+    [selectedResponsibilityCenters]="policyForm.selectedRCs"
+    [rcIdKey]="'item_id'"
+    (saveSelectedList)="saveSelectedList('rc', $event)"
+    (closeRcList)="disableSelector()"
+  >
+  </app-responsibility-centers-list>
+
+  <app-users-radio-list
+    *ngIf="activeSelector === 'reviewer'"
+    [itemEmailKey]="'member_email'"
+    [usersList]="allReviewers"
+    [headerText]="'Select a Reviewer'"
+    [selectedUsers]="policyForm.selectedReviewers"
+    [userIdKey]="'member_id'"
+    [itemNameKey]="'member_name'"
+    (saveSelectedList)="saveSelectedList('reviewer', $event)"
+    (closeUsersList)="disableSelector()"
+  >
+  </app-users-radio-list>
+
+  <app-owner-list
+    *ngIf="activeSelector === 'ccEmail' && !groupEnabled"
+    [usersList]="overseersList"
+    [singularText]="'User selected'"
+    [pluralText]="'Users selected'"
+    [selectedUsers]="policyForm.CCEmail"
+    [userIdKey]="'employee_id'"
+    [itemNameKey]="'employee_name'"
+    (saveSelectedList)="saveSelectedList('ccEmail', $event)"
+    (closeUsersList)="disableSelector()"
+  >
+  </app-owner-list>
+
+  <user-group-list
+    *ngIf="activeSelector === 'ccEmail' && groupEnabled"
+    [groupEnabled]="true"
+    [userlist]="overseersList"
+    [groupList]="overseerGroupsList"
+    [selectedUsers]="policyForm.CCEmail"
+    [selectedGroups]="policyForm.CCGroupEmail"
+    (save)="saveSelectedList('ccEmail', $event)"
+    (cancel)="disableSelector()"
+    [featureflag]="groupEnabled"
+  >
+  </user-group-list>
+
+  <app-owner-list
+    *ngIf="activeSelector === 'ccFail' && !groupEnabled"
+    [usersList]="overseersList"
+    [singularText]="'User selected'"
+    [pluralText]="'Users selected'"
+    [selectedUsers]="policyForm.CCFailEmail"
+    [userIdKey]="'employee_id'"
+    [itemNameKey]="'employee_name'"
+    (saveSelectedList)="saveSelectedList('ccFail', $event)"
+    (closeUsersList)="disableSelector()"
+  >
+  </app-owner-list>
+
+  <user-group-list
+    *ngIf="activeSelector === 'ccFail' && groupEnabled"
+    [groupEnabled]="true"
+    [userlist]="overseersList"
+    [groupList]="overseerGroupsList"
+    [selectedUsers]="policyForm.CCFailEmail"
+    [selectedGroups]="policyForm.CCFailEmailGroup"
+    (save)="saveSelectedList('ccFail', $event)"
+    (cancel)="disableSelector()"
+    [featureflag]="groupEnabled"
+  >
+  </user-group-list>
+
+  <app-group-users-list
+    *ngIf="activeSelector === 'assignees' && !groupEnabled"
+    [usersList]="assigneesList"
+    [groupsList]="groupsList"
+    [selectedUsers]="policyForm.selectedAssignees"
+    [userIdKey]="'my_member_id'"
+    (saveSelectedList)="saveSelectedList('assignees', $event)"
+    (closeUsersList)="disableSelector()"
+  >
+  </app-group-users-list>
+
+  <user-group-list
+    *ngIf="activeSelector === 'assignees' && groupEnabled"
+    [groupEnabled]="true"
+    [userlist]="ownerlist"
+    [groupList]="groupsList"
+    (save)="saveSelectedList('assignees', $event)"
+    (cancel)="disableSelector()"
+    [selectedGroups]="policyForm.selectedGroupAssignee"
+    [selectedUsers]="policyForm.selectedAssignees"
+    [featureflag]="groupEnabled"
+  >
+  </user-group-list>
+
+  <app-owner-list
+    *ngIf="activeSelector === 'approvers' && false"
+    [listHeading]="'Select Approvers'"
+    [singularText]="'User selected'"
+    [pluralText]="'Users selected'"
+    [usersList]="allApprovers"
+    [showWorkflow]="true"
+    [selectedUsers]="
+      addMoreLevels
+        ? []
+        : policyForm.selectedApprovers[approversListIndex].approvers
+    "
+    [userIdKey]="'member_id'"
+    [itemEmailKey]="'member_email'"
+    [itemNameKey]="'member_name'"
+    (saveSelectedList)="saveSelectedList('approvers', $event)"
+    (closeUsersList)="disableSelector()"
+    [mode]="mode"
+    [reviewerWorkflowType]="workflowType"
+    (reviewerWorkflowTypeChange)="reviewerTypeChange($event)"
+    [workflowList]="workflowList"
+    [workflowText]="'Approval Workflow'"
+  >
+  </app-owner-list>
+
+  <app-frequency-container
+    *ngIf="activeSelector === 'frequency'"
+    [mode]="'policy'"
+    [frequencyDetails]="frequencyDetails"
+    (selectedFrequency)="frequencyData($event)"
+    [feature]="feature"
+    [pageType]="'policy'"
+    (closeFrequency)="disableSelector()"
+  ></app-frequency-container>
+
+  <app-frequency-container
+    *ngIf="activeSelector === 'reviewerFrequency'"
+    [mode]="'reviewerFrequency'"
+    [frequencyDetails]="reviewerFrequencyDetails"
+    (selectedFrequency)="reviewerFrequencyData($event)"
+    [feature]="feature"
+    [pageType]="'policy'"
+    (closeFrequency)="disableSelector()"
+  ></app-frequency-container>
+
+  <vc-link-program
+    *ngIf="activeSelector === 'linkProgram'"
+    (close)="disableSelector()"
+    [policy]="policyForm"
+    [selectedProgram]="policyForm?.programSelectedValues"
+    [mode]="mode"
+    [selectedLinkProgram]="selectedLinkProgram"
+    (changeTab)="changeTab('linkedPrograms')"
+    (updatedProgramDetails)="updatedProgramDetails($event)"
+  >
+  </vc-link-program>
+
+  <app-checkpoints-policy-container
+    (closeCheckPoint)="disableSelector()"
+    [checkpointData]="policyForm?.checkpointDetails"
+    [requiredPoint]="policyForm?.passingMarks"
+    *ngIf="activeSelector === 'checkpoints'"
+    (saveCheckPoint)="saveSelectedList('checkpoints', $event)"
+  ></app-checkpoints-policy-container>
+  <app-loader-inline *ngIf="loader"></app-loader-inline>
+
+  <app-approval-workflow
+    *ngIf="enableApprovalWorkflow"
+    [selectedCategory]="policyForm?.selectedCategories"
+    [approverWorkFlowList]="approverWorkFlowList"
+    [allApprovers]="allApprovers"
+    (listCancelClicked)="listCancelClicked($event)"
+    (selectedWorkflowNext)="selectedApprovalWorkflow($event)"
+    (saveApprovalWorkflow)="approvalWorkflowAPICall($event)"
+    [editApprovalWorkflow]="editApprovalWorkflow"
+    [createApprovalClick]="createApprovalClick"
+    (closeCreateClicked)="closeClickedCreateForm()"
+    [editWorkflowLevel]="editWorkflowLevel"
+  ></app-approval-workflow>
+  <!-- <app-select-approvers></app-select-approvers> -->
+
+  <app-policy-access *ngIf="activeSelector === 'policyAccess'"
+    [policyAccessType]="policyForm?.policy_access_type"
+    (close)="disableSelector()"
+    [orgUsersList]="usersList"
+    [usersAccessList]="usersAccessList"
+    [groupList]="overseerGroupsList"
+    [groupsAccessList]="groupsAccessList"
+    [selectedUsers]="policyForm?.policy_access_owners"
+    [selectedGroups]="policyForm?.policy_access_groups"
+    [disabledIds]="usersAccessListIds"
+    [disabledGroupIds]="groupsAccessListIds"
+    [futureUsersWillSelect]="policyForm?.availableOnPortal"
+    (saveCheckPoint)="saveSelectedList('policyAccess', $event)"
+    (setPolicyAccessType)="policyForm.policy_access_type = $event"
+  >
+
+  </app-policy-access>
+</ng-container>
+<ng-container *ngIf="showCreateDocuments">
+  <!-- <app-create-documents *ngIf="showCreateDocuments"
+   [organization_id]="organization_id"
+   [member_obj_id]="member_obj_id"
+   [userInfo]="userInfo"
+   [policyId]="policyId"
+   [policyName]="policyForm.policyName"
+   (disconnectRefresh)="disconnectRefresh.emit(false)"
+   (editPolicy)="editPolicyFromDocuments()"
+   ></app-create-documents> -->
+  <lib-document-section
+    *ngIf="showCreateDocuments"
+    [organization_id]="organization_id"
+    [member_obj_id]="member_obj_id"
+    [userInfo]="userInfo"
+    [policyId]="policyId"
+    [policyName]="policyForm.policyName"
+    (disconnectRefresh)="disconnectRefresh.emit(false)"
+    (editPolicy)="editPolicyFromDocuments()"
+  ></lib-document-section>
+</ng-container>
+
+<app-assessment-list
+  *ngIf="activeSelector === 'isAssessment'"
+  [program_ids]="''"
+  [isEdit]="policyForm?.assessment?.length"
+  (cancelAssessment)="saveSelectedList('isAssessment', false)"
+  [selectedAssessment]="policyForm?.assessment[0]"
+  [mode]="'policy'"
+  (onAssessmentSelect)="
+    onAssessmentSelect($event); saveSelectedList('isAssessment', false)
+  "
+></app-assessment-list>
+
+<app-owner-list
+  *ngIf="activeSelector === 'approvers' && false"
+  [listHeading]="'Select Approvers'"
+  [singularText]="'User selected'"
+  [pluralText]="'Users selected'"
+  [usersList]="allApprovers"
+  [showWorkflow]="true"
+  [selectedUsers]="
+    addMoreLevels
+      ? []
+      : policyForm.selectedApprovers[approversListIndex].approvers
+  "
+  [userIdKey]="'member_id'"
+  [itemEmailKey]="'member_email'"
+  [itemNameKey]="'member_name'"
+  (saveSelectedList)="saveSelectedList('approvers', $event)"
+  (closeUsersList)="disableSelector()"
+  [mode]="mode"
+  [reviewerWorkflowType]="workflowType"
+  (reviewerWorkflowTypeChange)="reviewerTypeChange($event)"
+  [workflowList]="workflowList"
+  [workflowText]="'Approval Workflow'"
+>
+</app-owner-list>
+
+<app-owner-list
+  *ngIf="activeSelector === 'owners'"
+  [listHeading]="'Select Owner(s)'"
+  [singularText]="'User selected'"
+  [pluralText]="'Users selected'"
+  [usersList]="allApprovers"
+  [showWorkflow]="false"
+  [userIdKey]="'member_id'"
+  [itemEmailKey]="'member_email'"
+  [itemNameKey]="'member_name'"
+  (saveSelectedList)="saveSelectedList('owners', $event)"
+  (closeUsersList)="disableSelector()"
+  [mode]="mode"
+  [selectedUsers]="policyForm?.policy_owners ?? []"
+>
+</app-owner-list>