vcomply-workflow-engine 6.6.9 → 7.0.0

package/fesm2022/vcomply-workflow-engine.mjs

@@ -8935,19 +8935,27 @@ class OrganizationUserService {
     }
     getOrganizationUsersWithPagination(page = 1, searchKey = '', paginationType = 'medium') {
         const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
+        let params = this.setParamsForPagination("all", paginationType, page, searchKey, true);
+        const url = `${this.env.organizationGet}getAllUsers`;
+        return this.http.get(url, { headers, params }).pipe(catchError((error) => {
+            console.error('Error fetching paginated users:', error);
+            return of(null);
+        }));
+    }
+    setParamsForPagination(type = 'all', paginationType = 'medium', page = 1, searchKey = '', isPaginationEnabled = false) {
+        let paginationEnabled = 0;
+        if (isPaginationEnabled) {
+            paginationEnabled = 1;
+        }
         let params = new HttpParams()
-            .set('type', 'all')
-            .set('isPaginationEnabled', '1')
+            .set('type', type)
+            .set('isPaginationEnabled', paginationEnabled.toString())
             .set('paginationType', paginationType)
             .set('pageNo', page.toString());
         if (searchKey) {
             params = params.set('searchQuery', searchKey);
         }
-        const url = `${this.env.organizationGet}getAllUsers`;
-        return this.http.get(url, { headers, params }).pipe(catchError((error) => {
-            console.error('Error fetching paginated users:', error);
-            return of(null);
-        }));
+        return params;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganizationUserService, deps: [{ token: i1.HttpClient }, { token: AuthService$1 }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganizationUserService, providedIn: 'root' }); }
@@ -15728,10 +15736,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 let FilterPipe$1 = class FilterPipe {
-    transform(items, searchText) {
+    transform(items, searchText, isPaginationEnabled) {
         if (!items) {
             return [];
         }
+        if (isPaginationEnabled) {
+            return items;
+        }
         if (!searchText) {
             return items;
         }
@@ -15980,6 +15991,7 @@ class UserGroupListComponent {
         this.showConfirmation = false;
         this.animation = true;
         this.currentTab = 'USER';
+        this.setupDebounceForUserSearch();
     }
     ngOnInit() {
         let disabledIds = [...this.disabledIds, ...this.nonRemovableUserIds];
@@ -15990,17 +16002,6 @@ class UserGroupListComponent {
             this.animation = false;
         }, 300);
         // Setup debounced search
-        this.searchSubject.pipe(debounceTime(800), // Wait 1s after user stops typing
-        distinctUntilChanged(), // Only emit if the value has changed
-        takeUntil(this.destroy$)).subscribe(searchKey => {
-            console.log("Search Key");
-            this.userCurrentPage = 1;
-            if (this.isPaginationEnabled) {
-                // Server-side search: fetch new data
-                this.fetchUserData.emit({ page: 1, searchKey: searchKey });
-            }
-            // Client-side search: handled automatically by the filter pipe
-        });
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -16097,30 +16098,37 @@ class UserGroupListComponent {
     setAllUsersSelected(event) {
         this.futureUsersWillSelect = event;
         if (event) {
+            // Clear any existing search and reset to first page
+            this.searchKey = '';
+            this.userCurrentPage = 1;
+            this.fetchUserData.emit({ page: 1, searchKey: '' });
             this.selectedUsers = [];
             this.selectedGroups = [];
             this.selectedUserIds = [];
             this.selectedGroupIds = [];
         }
     }
-    // onSearchKeyChange(searchKey: any) {
-    //   this.userCurrentPage = 1;
-    //   if(this.userListInfo) {
-    //     this.fetchUserData.emit({ page: 1, searchKey: searchKey });
-    //   }
-    // }
     onSearchKeyChange(searchKey) {
-        // Update the searchKey immediately for UI binding
-        // this.searchKey = searchKey;
-        // Emit to subject for debounced processing
         this.searchSubject.next(searchKey || '');
     }
+    setupDebounceForUserSearch() {
+        this.searchSubject.pipe(debounceTime(800), // Wait 800ms after user stops typing
+        distinctUntilChanged(), // Only emit if the value has changed
+        takeUntil(this.destroy$)).subscribe(searchKey => {
+            this.userCurrentPage = 1;
+            if (this.isPaginationEnabled) {
+                // Server-side search: fetch new data
+                this.fetchUserData.emit({ page: 1, searchKey: searchKey });
+            }
+            // Client-side search: handled automatically by the filter pipe
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserGroupListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserGroupListComponent, selector: "user-group-list", inputs: { groupEnabled: "groupEnabled", panelTitle: "panelTitle", singleSelect: "singleSelect", selectedReviewer: "selectedReviewer", featureflag: "featureflag", reviewerWorkflowType: "reviewerWorkflowType", mode: "mode", fieldType: "fieldType", fromResponsibility: "fromResponsibility", assignorId: "assignorId", assigneeIds: "assigneeIds", reviewerIds: "reviewerIds", overseerIds: "overseerIds", FromProgram: "FromProgram", userListInfo: "userListInfo", groupListInfo: "groupListInfo", fromApprovalWorkflow: "fromApprovalWorkflow", approvalType: "approvalType", showFutureUsersSwitch: "showFutureUsersSwitch", futureUsersWillSelect: "futureUsersWillSelect", isAllDisabled: "isAllDisabled", isGroupTabShow: "isGroupTabShow", disabledIds: "disabledIds", nonRemovableUserIds: "nonRemovableUserIds", allUserSelectedDisabled: "allUserSelectedDisabled", nonRemovableGroupIds: "nonRemovableGroupIds", loading: "loading", setUserList: ["userlist", "setUserList"], setSelectedUser: ["selectedUsers", "setSelectedUser"], setDefaultSelectedUsers: ["defaultSelectedUsers", "setDefaultSelectedUsers"], userType: "userType", isPaginationEnabled: "isPaginationEnabled", setGroupList: ["groupList", "setGroupList"], setSelectedGroup: ["selectedGroups", "setSelectedGroup"] }, outputs: { save: "save", cancel: "cancel", reviewerWorkflowTypeChange: "reviewerWorkflowTypeChange", fetchUserData: "fetchUserData" }, ngImport: i0, template: "<div class=\"user-group-list\" [class.animate]=\"animation\">\n  <div class=\"user-group-list-head\">\n    <h3 class=\"user-group-list-title\">{{ panelTitle }}</h3>\n  </div>\n  <div class=\"user-group-list-body\">\n    <div class=\"user-group-list-body-inner\">\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\n      <div\n        class=\"user-group-list-tab vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n        *ngIf=\"groupEnabled\"\n      >\n        <div class=\"vx-d-flex vx-align-center\">\n          <button\n            *ngIf=\"!isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\"\n                  ? (usersList | filter : searchKey)?.length\n                  : usersList?.length || userListInfo?.total_items\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\" && isPaginationEnabled\n                  ? userListInfo?.total_items\n                  : userListInfo?.total\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isGroupTabShow\"\n            (click)=\"switchTab('GROUP')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'GROUP'\"\n          >\n            {{ featureflag ? \"USER GROUPS\" : \"GROUPS\" }}\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"GROUP\"\n                  ? (groupsList | search : searchKey : \"group_name\")?.length\n                  : groupsList?.length || groupListInfo?.total_items\n              }}</span\n            >\n          </button>\n        </div>\n\n        <div\n          class=\"future-user vx-d-flex vx-align-center\"\n          *ngIf=\"showFutureUsersSwitch\"\n        >\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">\n            Visible to All Current & Future Users\n          </div>\n          <i\n            class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-1\"\n            [appTooltip]=\"\n              'If selected, this policy will be visible to all users that are currently active in your VComply account and users that might be added in the future.'\n            \"\n            placement=\"bottom-right\"\n            delay=\"0\"\n            type=\"white\"\n            [tooltipMandatory]=\"true\"\n            >&#xe91f;</i\n          >\n          <app-cs-switch\n            [ngValue]=\"futureUsersWillSelect\"\n            (ngValueChange)=\"setAllUsersSelected($event)\"\n          >\n          </app-cs-switch>\n        </div>\n      </div>\n\n      <div class=\"search-block vx-mb-2\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input\n          *ngIf=\"!featureflag\"\n          [(ngModel)]=\"searchKey\"\n          type=\"text\"\n          placeholder=\"{{\n            currentTab === 'USER' ? 'Search User' : 'Search Group'\n          }}\"\n        />\n        <input\n          *ngIf=\"featureflag && isPaginationEnabled\"\n          [(ngModel)]=\"searchKey\"\n          (ngModelChange)=\"onSearchKeyChange($event)\"\n          type=\"text\"\n          placeholder=\"{{\n            currentTab === 'USER' ? 'Search User' : 'Search User Group'\n          }}\"\n        />\n        <input\n          *ngIf=\"featureflag && !isPaginationEnabled\"\n          [(ngModel)]=\"searchKey\"\n          type=\"text\"\n          placeholder=\"{{\n            currentTab === 'USER' ? 'Search User' : 'Search User Group'\n          }}\"\n        />\n      </div>\n\n      <ng-container *ngIf=\"currentTab === 'USER' && !loading\">\n        <ng-container *ngIf=\"isPaginationEnabled && usersList as users\">\n          <vui-pagination\n            *ngIf=\"\n              userListInfo?.total_pages > 1 &&\n              usersList?.length !== userListInfo?.total_items\n            \"\n            [from]=\"userListInfo?.from \"\n            [to]=\"userListInfo?.to\"\n            [total]=\"userListInfo?.total\"\n            [currentPage]=\"userCurrentPage\"\n            [totalPage]=\"userListInfo?.total_pages\"\n            (pageChanged)=\"userPageChange($event)\"\n          ></vui-pagination>\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"userListInfo?.users.length > 0 && users?.length > 0; else nouser\">\n              <div class=\"user-list-select vx-mb-2\">\n                <vui-checkbox\n                  *ngIf=\"!singleSelect\"\n                  #user\n                  [checked]=\"allUserSelected || futureUsersWillSelect\"\n                  [disabled]=\"\n                    allUserSelectedDisabled ||\n                    futureUsersWillSelect ||\n                    isAllDisabled\n                  \"\n                  (change)=\"selectAllUser($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\n                  </div>\n                </vui-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <ng-container *ngFor=\"let user of users\">\n                    <li\n                      class=\"vx-mb-3\"\n                      *ngIf=\"!singleSelect\"\n                      [appTooltip]=\"\n                        user\n                          | tooltipMessage\n                            : fromResponsibility\n                            : reviewerIds\n                            : overseerIds\n                            : assignorId\n                            : assigneeIds\n                            : 'member_id'\n                            : disabledIds?.includes(user?.member_id)\n                            : FromProgram\n                      \"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"true\"\n                    >\n                      <vui-checkbox\n                        (change)=\"selectItem($event, user)\"\n                        [disabled]=\"\n                          disabledIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect ||\n                          isAllDisabled\n                        \"\n                        [checked]=\"\n                          selectedUserIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect\n                        \"\n                        ><div class=\"user-name\">\n                          {{ user?.member_name }}\n                        </div></vui-checkbox\n                      >\n                    </li>\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\n                      <app-cs-radio\n                        [name]=\"'radio-selector'\"\n                        (checkedEvent)=\"selectItemRadio($event, user)\"\n                        [name]=\"'rx-category'\"\n                        [checked]=\"selectedUserIds?.includes(user?.member_id)\"\n                        [appTooltip]=\"user?.member_email\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        {{ user?.member_name }}\n                      </app-cs-radio>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nouser>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\n                \"\n              ></app-no-data>\n            </ng-template>\n            <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!isPaginationEnabled && (usersList | filter : searchKey) as users\">\n          <vui-pagination\n            *ngIf=\"\n              userListInfo?.total_pages > 1 &&\n              usersList?.length !== userListInfo?.total_items\n            \"\n            [currentPage]=\"userCurrentPage\"\n            [totalPage]=\"userListInfo?.total_pages\"\n            (pageChanged)=\"userPageChange($event)\"\n          ></vui-pagination>\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"users?.length > 0; else nouser\">\n              <div class=\"user-list-select vx-mb-2\">\n                <vui-checkbox\n                  *ngIf=\"!singleSelect\"\n                  #user\n                  [checked]=\"allUserSelected || futureUsersWillSelect\"\n                  [disabled]=\"\n                    allUserSelectedDisabled ||\n                    futureUsersWillSelect ||\n                    isAllDisabled\n                  \"\n                  (change)=\"selectAllUser($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\n                  </div>\n                </vui-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <ng-container *ngFor=\"let user of users\">\n                    <li\n                      class=\"vx-mb-3\"\n                      *ngIf=\"!singleSelect\"\n                      [appTooltip]=\"\n                        user\n                          | tooltipMessage\n                            : fromResponsibility\n                            : reviewerIds\n                            : overseerIds\n                            : assignorId\n                            : assigneeIds\n                            : 'member_id'\n                            : disabledIds?.includes(user?.member_id)\n                            : FromProgram\n                      \"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"true\"\n                    >\n                      <vui-checkbox\n                        (change)=\"selectItem($event, user)\"\n                        [disabled]=\"\n                          disabledIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect ||\n                          isAllDisabled\n                        \"\n                        [checked]=\"\n                          selectedUserIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect\n                        \"\n                        ><div class=\"user-name\">\n                          {{ user?.member_name }}\n                        </div></vui-checkbox\n                      >\n                    </li>\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\n                      <app-cs-radio\n                        [name]=\"'radio-selector'\"\n                        (checkedEvent)=\"selectItemRadio($event, user)\"\n                        [name]=\"'rx-category'\"\n                        [checked]=\"selectedUserIds?.includes(user?.member_id)\"\n                        [appTooltip]=\"user?.member_email\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        {{ user?.member_name }}\n                      </app-cs-radio>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nouser>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"currentTab === 'GROUP'\">\n        <ng-container\n          *ngIf=\"groupsList | search : searchKey : 'group_name' as groups\"\n        >\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\n              <div class=\"user-list-select vx-mb-2\">\n                <vui-checkbox\n                  #group\n                  [checked]=\"allGroupSelected\"\n                  [disabled]=\"allGroupSelectedDisabled\"\n                  (change)=\"selectAllGroup($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{ !group?.checked ? \"Select All\" : \"Deselect All\" }}\n                  </div>\n                </vui-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li class=\"vx-mb-3\" *ngFor=\"let group of groups\">\n                    <vui-checkbox\n                      (change)=\"selectGroup($event, group)\"\n                      [disabled]=\"\n                        nonRemovableGroupIds?.includes(group?.group_id)\n                      \"\n                      [checked]=\"selectedGroupIds?.includes(group?.group_id)\"\n                    >\n                      <div\n                        class=\"user-name vx-d-flex vx-align-center vx-w-100\"\n                        [appTooltip]=\"group?.group_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        <div class=\"group-name\">{{ group?.group_name }}</div>\n                        <span\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\"\n                          >{{ group?.member_count }}\n                          {{ group?.member_count > 1 ? \"USERS\" : \"USER\" }}</span\n                        >\n                      </div>\n                    </vui-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nogroup>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"user-group-list-footer\">\n      <vui-floating-bar\n        *ngIf=\"\n          (!singleSelect || (!singleSelect && selectedReviewer)) && !loading\n        \"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        (workflowTypeChanged)=\"workflowTypeChanged($event)\"\n        [selectedWorkflow]=\"reviewerWorkflowType\"\n        [showWorkflow]=\"selectedReviewer\"\n        [groupSelected]=\"selectedGroups\"\n        [mode]=\"mode\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <ng-container *ngIf=\"!groupEnabled\">\n          <div\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n            *ngFor=\"let element of selectedUsers?.slice(0, 1); let i = index\"\n          >\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n              (click)=\"selectItem({ target: { checked: false } }, element)\"\n              >&#xe9ae;</i\n            >\n            <div\n              *ngIf=\"\n                fromApprovalWorkflow &&\n                approvalWorkflowType.toLowerCase() === 'sequential'\n              \"\n              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n            >\n              {{ 1 == selectedUsers?.length ? \"Final\" : 1 }}\n            </div>\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"element?.member_name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{ element?.member_name }}</span\n            >\n            <button\n              *ngIf=\"selectedUsers?.length > 1\"\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n              appPopover\n              (click)=\"groupDisable.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.slice(1)?.length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"selectItem({target:{checked:false}},element)\" class=\"icons\">&#xe90d;</i> <span>{{element?.member_name}}</span></div>\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div> -->\n        </ng-container>\n        <div\n          class=\"user-group-chip\"\n          *ngIf=\"selectedUsers?.length && groupEnabled\"\n        >\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\"\n            (click)=\"\n              selectItem({ target: { checked: false } }, selectedUsers[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedUsers[0]?.member_name }}</div>\n          <ng-container *ngIf=\"groupEnabled\">\n            <div\n              class=\"counter\"\n              *ngIf=\"selectedUsers?.length > 1\"\n              appPopover\n              (click)=\"userCount.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.length - 1 }}\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"name userGroup-name\">\n          <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\"\n            >User {{ selectedGroups?.length > 0 ? \" & \" : \" selected\" }}</span\n          >\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\"\n            >Users {{ selectedGroups?.length > 0 ? \" & \" : \"selected\" }}</span\n          >\n        </div>\n\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\"\n            (click)=\"\n              selectGroup({ target: { checked: false } }, selectedGroups[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedGroups[0]?.group_name }}</div>\n          <div\n            class=\"counter group\"\n            *ngIf=\"selectedGroups?.length > 1\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            +{{ selectedGroups?.length - 1 }}\n          </div>\n        </div>\n        <div class=\"name userGroup-name\">\n          <span *ngIf=\"selectedGroups?.length === 1\">{{\n            featureflag ? \"User Group selected\" : \"Group selected\"\n          }}</span>\n          <span *ngIf=\"selectedGroups?.length > 1\">{{\n            featureflag ? \"User Groups selected\" : \"Groups selected\"\n          }}</span>\n        </div>\n\n        <app-popover #userCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"let element of selectedUsers | slice : 1; let i = index\"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupDisable [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"let element of selectedUsers.slice(1); let i = index\">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    <span\n                      *ngIf=\"\n                        fromApprovalWorkflow &&\n                        approvalWorkflowType.toLowerCase() === 'sequential'\n                      \"\n                      class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                      >{{\n                        i + 1 === selectedUsers?.length - 1 ? \"Final\" : i + 2\n                      }}</span\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"\n                  let element of selectedGroups | slice : 1;\n                  let i = index\n                \"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\n                      (click)=\"\n                        selectGroup({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </vui-floating-bar>\n      <vui-floating-bar\n        *ngIf=\"singleSelect && !loading\"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <div class=\"chip\" *ngIf=\"selectedUsers?.length\">\n          <ng-container>\n            <i\n              class=\"icons\"\n              (click)=\"\n                selectItem({ target: { checked: false } }, selectedUsers[0])\n              \"\n              >&#xe90d;</i\n            >\n            <span class=\"value\"> {{ selectedUsers[0]?.member_name }}</span>\n          </ng-container>\n        </div>\n      </vui-floating-bar>\n    </div>\n  </div>\n\n  <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\">\n        This action will reset the default {{ userType }} selected for the\n        Program.\n      </div>\n    </div>\n    <div class=\"confirmation-bottom\">\n      <div class=\"message\">Are you sure you would like to proceed?</div>\n      <div class=\"button-group\">\n        <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\n        <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";::ng-deep .user-group-list{background:#fff;position:fixed;inset:0 500px 0 0}::ng-deep .user-group-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .user-group-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .user-group-list-head{background:#fbfbfb;height:44px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .user-group-list-title{color:#161b2f;font-size:14px;font-weight:500;margin:0!important;padding:0}::ng-deep .user-group-list-body{padding:32px 32px 0;height:calc(100vh - 124px)}::ng-deep .user-group-list-body .search-block{position:relative}::ng-deep .user-group-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .user-group-list-body .search-block input::placeholder{font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-group-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.75rem);overflow:hidden;overflow-y:auto;margin-bottom:.5rem;padding-right:.75rem}::ng-deep .user-group-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-group-list-mid.with-pagination{height:calc(100vh - 17.5rem)}::ng-deep .user-group-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-group-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkbox,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkmark,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value{color:#161b2f!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value .user-name,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-group-list-mid .user-list-item ul li{width:50%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-group-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:1.75rem!important}::ng-deep .user-group-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-group-list-tab button.active{pointer-events:none}::ng-deep .user-group-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-group-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-group-list-tab .future-user{margin-top:-.75rem}::ng-deep .user-group-list-tab .future-user .info{cursor:pointer}::ng-deep .user-group-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .user-group-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block{height:2.25rem;width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .user-group-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .user-group-list-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .user-group-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.group{background:#1e5dd3!important;border-color:#1e5dd3!important}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PaginationComponent, selector: "vui-pagination", inputs: ["from", "to", "total", "showPageDetail", "totalPage", "currentPage", "pageInSingleView"], outputs: ["pageChanged"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "component", type: CsRadioComponentUI, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponentUI, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: CheckboxComponent$1, selector: "vui-checkbox", inputs: ["disabled", "checked", "indeterminateEnabled"] }, { kind: "component", type: VuiFloatingBarComponent, selector: "vui-floating-bar", inputs: ["selectedData", "groupSelected", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "nextDisabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "workflowTypeChanged"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: TooltipMessagePipe, name: "tooltipMessage" }, { kind: "pipe", type: SearchPipe, name: "search" }, { kind: "pipe", type: FilterPipe$1, name: "filter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserGroupListComponent, selector: "user-group-list", inputs: { groupEnabled: "groupEnabled", panelTitle: "panelTitle", singleSelect: "singleSelect", selectedReviewer: "selectedReviewer", featureflag: "featureflag", reviewerWorkflowType: "reviewerWorkflowType", mode: "mode", fieldType: "fieldType", fromResponsibility: "fromResponsibility", assignorId: "assignorId", assigneeIds: "assigneeIds", reviewerIds: "reviewerIds", overseerIds: "overseerIds", FromProgram: "FromProgram", userListInfo: "userListInfo", groupListInfo: "groupListInfo", fromApprovalWorkflow: "fromApprovalWorkflow", approvalType: "approvalType", showFutureUsersSwitch: "showFutureUsersSwitch", futureUsersWillSelect: "futureUsersWillSelect", isAllDisabled: "isAllDisabled", isGroupTabShow: "isGroupTabShow", disabledIds: "disabledIds", nonRemovableUserIds: "nonRemovableUserIds", allUserSelectedDisabled: "allUserSelectedDisabled", nonRemovableGroupIds: "nonRemovableGroupIds", loading: "loading", setUserList: ["userlist", "setUserList"], setSelectedUser: ["selectedUsers", "setSelectedUser"], setDefaultSelectedUsers: ["defaultSelectedUsers", "setDefaultSelectedUsers"], userType: "userType", isPaginationEnabled: "isPaginationEnabled", setGroupList: ["groupList", "setGroupList"], setSelectedGroup: ["selectedGroups", "setSelectedGroup"] }, outputs: { save: "save", cancel: "cancel", reviewerWorkflowTypeChange: "reviewerWorkflowTypeChange", fetchUserData: "fetchUserData" }, ngImport: i0, template: "<div class=\"user-group-list\" [class.animate]=\"animation\">\n  <div class=\"user-group-list-head\">\n    <h3 class=\"user-group-list-title\">{{ panelTitle }}</h3>\n  </div>\n  <div class=\"user-group-list-body\">\n    <div class=\"user-group-list-body-inner\">\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\n      <div\n        class=\"user-group-list-tab vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n        *ngIf=\"groupEnabled\"\n      >\n        <div class=\"vx-d-flex vx-align-center\">\n          <button\n            *ngIf=\"!isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\"\n                  ? (usersList | filter : searchKey)?.length\n                  : usersList?.length || userListInfo?.total_items\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\" && isPaginationEnabled\n                  ? userListInfo?.total_items\n                  : userListInfo?.total\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isGroupTabShow\"\n            (click)=\"switchTab('GROUP')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'GROUP'\"\n          >\n            {{ featureflag ? \"USER GROUPS\" : \"GROUPS\" }}\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"GROUP\"\n                  ? (groupsList | search : searchKey : \"group_name\")?.length\n                  : groupsList?.length || groupListInfo?.total_items\n              }}</span\n            >\n          </button>\n        </div>\n\n        <div\n          class=\"future-user vx-d-flex vx-align-center\"\n          *ngIf=\"showFutureUsersSwitch\"\n        >\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">\n            Visible to All Current & Future Users\n          </div>\n          <i\n            class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-1\"\n            [appTooltip]=\"\n              'If selected, this policy will be visible to all users that are currently active in your VComply account and users that might be added in the future.'\n            \"\n            placement=\"bottom-right\"\n            delay=\"0\"\n            type=\"white\"\n            [tooltipMandatory]=\"true\"\n            >&#xe91f;</i\n          >\n          <app-cs-switch\n            [ngValue]=\"futureUsersWillSelect\"\n            (ngValueChange)=\"setAllUsersSelected($event)\"\n          >\n          </app-cs-switch>\n        </div>\n      </div>\n\n      <div class=\"search-block vx-mb-2\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input\n          *ngIf=\"!featureflag\"\n          [(ngModel)]=\"searchKey\"\n          [disabled]=\"futureUsersWillSelect\"\n          type=\"text\"\n          placeholder=\"{{\n            currentTab === 'USER' ? 'Search User' : 'Search Group'\n          }}\"\n        />\n        <ng-container *ngIf=\"featureflag\">\n          <input\n            *ngIf=\"isPaginationEnabled; else searchInputWithoutPagination\"\n            [(ngModel)]=\"searchKey\"\n            (ngModelChange)=\"onSearchKeyChange($event)\"\n            [disabled]=\"futureUsersWillSelect\"\n            type=\"text\"\n            placeholder=\"{{\n              currentTab === 'USER' ? 'Search User' : 'Search User Group'\n            }}\"\n          />\n          <ng-template #searchInputWithoutPagination>\n            <input\n              [(ngModel)]=\"searchKey\"\n              [disabled]=\"futureUsersWillSelect\"\n              type=\"text\"\n              placeholder=\"{{\n                currentTab === 'USER' ? 'Search User' : 'Search User Group'\n              }}\"\n            />\n          </ng-template>\n        </ng-container>\n      </div>\n\n      <ng-container *ngIf=\"currentTab === 'USER' && !loading\">\n        <ng-container *ngIf=\"usersList | filter : searchKey : isPaginationEnabled as users\">\n          <vui-pagination\n            *ngIf=\"\n              userListInfo?.total_pages > 1 &&\n              usersList?.length !== userListInfo?.total_items\n            \"\n            [currentPage]=\"userCurrentPage\"\n            [totalPage]=\"userListInfo?.total_pages\"\n            (pageChanged)=\"userPageChange($event)\"\n            [from]=\"userListInfo?.from\"\n            [to]=\"userListInfo?.to\"\n            [total]=\"userListInfo?.total\"\n          ></vui-pagination>\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"users?.length > 0; else nouser\">\n              <ng-container *ngIf=\"!isPaginationEnabled\">\n                <div class=\"user-list-select vx-mb-2\">\n                  <vui-checkbox\n                    *ngIf=\"!singleSelect\"\n                    #user\n                    [checked]=\"allUserSelected || futureUsersWillSelect\"\n                    [disabled]=\"\n                      allUserSelectedDisabled ||\n                      futureUsersWillSelect ||\n                      isAllDisabled\n                    \"\n                    (change)=\"selectAllUser($event)\"\n                  >\n                    <div\n                      class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                    >\n                      {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\n                    </div>\n                  </vui-checkbox>\n                </div>\n              </ng-container>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <ng-container *ngFor=\"let user of users\">\n                    <li\n                      class=\"vx-mb-3\"\n                      *ngIf=\"!singleSelect\"\n                      [appTooltip]=\"\n                        user\n                          | tooltipMessage\n                            : fromResponsibility\n                            : reviewerIds\n                            : overseerIds\n                            : assignorId\n                            : assigneeIds\n                            : 'member_id'\n                            : disabledIds?.includes(user?.member_id)\n                            : FromProgram\n                      \"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"true\"\n                    >\n                      <vui-checkbox\n                        (change)=\"selectItem($event, user)\"\n                        [disabled]=\"\n                          disabledIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect ||\n                          isAllDisabled\n                        \"\n                        [checked]=\"\n                          selectedUserIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect\n                        \"\n                        ><div class=\"user-name\">\n                          {{ user?.member_name }}\n                        </div></vui-checkbox\n                      >\n                    </li>\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\n                      <app-cs-radio\n                        [name]=\"'radio-selector'\"\n                        (checkedEvent)=\"selectItemRadio($event, user)\"\n                        [name]=\"'rx-category'\"\n                        [checked]=\"selectedUserIds?.includes(user?.member_id)\"\n                        [appTooltip]=\"user?.member_email\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        {{ user?.member_name }}\n                      </app-cs-radio>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nouser>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"currentTab === 'GROUP'\">\n        <ng-container\n          *ngIf=\"groupsList | search : searchKey : 'group_name' as groups\"\n        >\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\n              <div class=\"user-list-select vx-mb-2\">\n                <vui-checkbox\n                  #group\n                  [checked]=\"allGroupSelected\"\n                  [disabled]=\"allGroupSelectedDisabled\"\n                  (change)=\"selectAllGroup($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{ !group?.checked ? \"Select All\" : \"Deselect All\" }}\n                  </div>\n                </vui-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li class=\"vx-mb-3\" *ngFor=\"let group of groups\">\n                    <vui-checkbox\n                      (change)=\"selectGroup($event, group)\"\n                      [disabled]=\"\n                        nonRemovableGroupIds?.includes(group?.group_id)\n                      \"\n                      [checked]=\"selectedGroupIds?.includes(group?.group_id)\"\n                    >\n                      <div\n                        class=\"user-name vx-d-flex vx-align-center vx-w-100\"\n                        [appTooltip]=\"group?.group_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        <div class=\"group-name\">{{ group?.group_name }}</div>\n                        <span\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\"\n                          >{{ group?.member_count }}\n                          {{ group?.member_count > 1 ? \"USERS\" : \"USER\" }}</span\n                        >\n                      </div>\n                    </vui-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nogroup>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"user-group-list-footer\">\n      <vui-floating-bar\n        *ngIf=\"\n          (!singleSelect || (!singleSelect && selectedReviewer)) && !loading\n        \"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        (workflowTypeChanged)=\"workflowTypeChanged($event)\"\n        [selectedWorkflow]=\"reviewerWorkflowType\"\n        [showWorkflow]=\"selectedReviewer\"\n        [groupSelected]=\"selectedGroups\"\n        [mode]=\"mode\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <ng-container *ngIf=\"!groupEnabled\">\n          <div\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n            *ngFor=\"let element of selectedUsers?.slice(0, 1); let i = index\"\n          >\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n              (click)=\"selectItem({ target: { checked: false } }, element)\"\n              >&#xe9ae;</i\n            >\n            <div\n              *ngIf=\"\n                fromApprovalWorkflow &&\n                approvalWorkflowType.toLowerCase() === 'sequential'\n              \"\n              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n            >\n              {{ 1 == selectedUsers?.length ? \"Final\" : 1 }}\n            </div>\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"element?.member_name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{ element?.member_name }}</span\n            >\n            <button\n              *ngIf=\"selectedUsers?.length > 1\"\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n              appPopover\n              (click)=\"groupDisable.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.slice(1)?.length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"selectItem({target:{checked:false}},element)\" class=\"icons\">&#xe90d;</i> <span>{{element?.member_name}}</span></div>\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div> -->\n        </ng-container>\n        <div\n          class=\"user-group-chip\"\n          *ngIf=\"selectedUsers?.length && groupEnabled\"\n        >\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\"\n            (click)=\"\n              selectItem({ target: { checked: false } }, selectedUsers[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedUsers[0]?.member_name }}</div>\n          <ng-container *ngIf=\"groupEnabled\">\n            <div\n              class=\"counter\"\n              *ngIf=\"selectedUsers?.length > 1\"\n              appPopover\n              (click)=\"userCount.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.length - 1 }}\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"name userGroup-name\">\n          <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\"\n            >User {{ selectedGroups?.length > 0 ? \" & \" : \" selected\" }}</span\n          >\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\"\n            >Users {{ selectedGroups?.length > 0 ? \" & \" : \"selected\" }}</span\n          >\n        </div>\n\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\"\n            (click)=\"\n              selectGroup({ target: { checked: false } }, selectedGroups[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedGroups[0]?.group_name }}</div>\n          <div\n            class=\"counter group\"\n            *ngIf=\"selectedGroups?.length > 1\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            +{{ selectedGroups?.length - 1 }}\n          </div>\n        </div>\n        <div class=\"name userGroup-name\">\n          <span *ngIf=\"selectedGroups?.length === 1\">{{\n            featureflag ? \"User Group selected\" : \"Group selected\"\n          }}</span>\n          <span *ngIf=\"selectedGroups?.length > 1\">{{\n            featureflag ? \"User Groups selected\" : \"Groups selected\"\n          }}</span>\n        </div>\n\n        <app-popover #userCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"let element of selectedUsers | slice : 1; let i = index\"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupDisable [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"let element of selectedUsers.slice(1); let i = index\">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    <span\n                      *ngIf=\"\n                        fromApprovalWorkflow &&\n                        approvalWorkflowType.toLowerCase() === 'sequential'\n                      \"\n                      class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                      >{{\n                        i + 1 === selectedUsers?.length - 1 ? \"Final\" : i + 2\n                      }}</span\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"\n                  let element of selectedGroups | slice : 1;\n                  let i = index\n                \"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\n                      (click)=\"\n                        selectGroup({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </vui-floating-bar>\n      <vui-floating-bar\n        *ngIf=\"singleSelect && !loading\"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <div class=\"chip\" *ngIf=\"selectedUsers?.length\">\n          <ng-container>\n            <i\n              class=\"icons\"\n              (click)=\"\n                selectItem({ target: { checked: false } }, selectedUsers[0])\n              \"\n              >&#xe90d;</i\n            >\n            <span class=\"value\"> {{ selectedUsers[0]?.member_name }}</span>\n          </ng-container>\n        </div>\n      </vui-floating-bar>\n    </div>\n  </div>\n\n  <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\">\n        This action will reset the default {{ userType }} selected for the\n        Program.\n      </div>\n    </div>\n    <div class=\"confirmation-bottom\">\n      <div class=\"message\">Are you sure you would like to proceed?</div>\n      <div class=\"button-group\">\n        <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\n        <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";::ng-deep .user-group-list{background:#fff;position:fixed;inset:0 500px 0 0}::ng-deep .user-group-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .user-group-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .user-group-list-head{background:#fbfbfb;height:44px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .user-group-list-title{color:#161b2f;font-size:14px;font-weight:500;margin:0!important;padding:0}::ng-deep .user-group-list-body{padding:32px 32px 0;height:calc(100vh - 124px)}::ng-deep .user-group-list-body .search-block{position:relative}::ng-deep .user-group-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .user-group-list-body .search-block input::placeholder{font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-group-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.75rem);overflow:hidden;overflow-y:auto;margin-bottom:.5rem;padding-right:.75rem}::ng-deep .user-group-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-group-list-mid.with-pagination{height:calc(100vh - 17.5rem)}::ng-deep .user-group-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-group-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkbox,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkmark,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value{color:#161b2f!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value .user-name,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-group-list-mid .user-list-item ul li{width:50%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-group-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:1.75rem!important}::ng-deep .user-group-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-group-list-tab button.active{pointer-events:none}::ng-deep .user-group-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-group-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-group-list-tab .future-user{margin-top:-.75rem}::ng-deep .user-group-list-tab .future-user .info{cursor:pointer}::ng-deep .user-group-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .user-group-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block{height:2.25rem;width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .user-group-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .user-group-list-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .user-group-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.group{background:#1e5dd3!important;border-color:#1e5dd3!important}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PaginationComponent, selector: "vui-pagination", inputs: ["from", "to", "total", "showPageDetail", "totalPage", "currentPage", "pageInSingleView"], outputs: ["pageChanged"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "component", type: CsRadioComponentUI, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponentUI, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: CheckboxComponent$1, selector: "vui-checkbox", inputs: ["disabled", "checked", "indeterminateEnabled"] }, { kind: "component", type: VuiFloatingBarComponent, selector: "vui-floating-bar", inputs: ["selectedData", "groupSelected", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "nextDisabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "workflowTypeChanged"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: TooltipMessagePipe, name: "tooltipMessage" }, { kind: "pipe", type: SearchPipe, name: "search" }, { kind: "pipe", type: FilterPipe$1, name: "filter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserGroupListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'user-group-list', template: "<div class=\"user-group-list\" [class.animate]=\"animation\">\n  <div class=\"user-group-list-head\">\n    <h3 class=\"user-group-list-title\">{{ panelTitle }}</h3>\n  </div>\n  <div class=\"user-group-list-body\">\n    <div class=\"user-group-list-body-inner\">\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\n      <div\n        class=\"user-group-list-tab vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n        *ngIf=\"groupEnabled\"\n      >\n        <div class=\"vx-d-flex vx-align-center\">\n          <button\n            *ngIf=\"!isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\"\n                  ? (usersList | filter : searchKey)?.length\n                  : usersList?.length || userListInfo?.total_items\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\" && isPaginationEnabled\n                  ? userListInfo?.total_items\n                  : userListInfo?.total\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isGroupTabShow\"\n            (click)=\"switchTab('GROUP')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'GROUP'\"\n          >\n            {{ featureflag ? \"USER GROUPS\" : \"GROUPS\" }}\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"GROUP\"\n                  ? (groupsList | search : searchKey : \"group_name\")?.length\n                  : groupsList?.length || groupListInfo?.total_items\n              }}</span\n            >\n          </button>\n        </div>\n\n        <div\n          class=\"future-user vx-d-flex vx-align-center\"\n          *ngIf=\"showFutureUsersSwitch\"\n        >\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">\n            Visible to All Current & Future Users\n          </div>\n          <i\n            class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-1\"\n            [appTooltip]=\"\n              'If selected, this policy will be visible to all users that are currently active in your VComply account and users that might be added in the future.'\n            \"\n            placement=\"bottom-right\"\n            delay=\"0\"\n            type=\"white\"\n            [tooltipMandatory]=\"true\"\n            >&#xe91f;</i\n          >\n          <app-cs-switch\n            [ngValue]=\"futureUsersWillSelect\"\n            (ngValueChange)=\"setAllUsersSelected($event)\"\n          >\n          </app-cs-switch>\n        </div>\n      </div>\n\n      <div class=\"search-block vx-mb-2\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input\n          *ngIf=\"!featureflag\"\n          [(ngModel)]=\"searchKey\"\n          type=\"text\"\n          placeholder=\"{{\n            currentTab === 'USER' ? 'Search User' : 'Search Group'\n          }}\"\n        />\n        <input\n          *ngIf=\"featureflag && isPaginationEnabled\"\n          [(ngModel)]=\"searchKey\"\n          (ngModelChange)=\"onSearchKeyChange($event)\"\n          type=\"text\"\n          placeholder=\"{{\n            currentTab === 'USER' ? 'Search User' : 'Search User Group'\n          }}\"\n        />\n        <input\n          *ngIf=\"featureflag && !isPaginationEnabled\"\n          [(ngModel)]=\"searchKey\"\n          type=\"text\"\n          placeholder=\"{{\n            currentTab === 'USER' ? 'Search User' : 'Search User Group'\n          }}\"\n        />\n      </div>\n\n      <ng-container *ngIf=\"currentTab === 'USER' && !loading\">\n        <ng-container *ngIf=\"isPaginationEnabled && usersList as users\">\n          <vui-pagination\n            *ngIf=\"\n              userListInfo?.total_pages > 1 &&\n              usersList?.length !== userListInfo?.total_items\n            \"\n            [from]=\"userListInfo?.from \"\n            [to]=\"userListInfo?.to\"\n            [total]=\"userListInfo?.total\"\n            [currentPage]=\"userCurrentPage\"\n            [totalPage]=\"userListInfo?.total_pages\"\n            (pageChanged)=\"userPageChange($event)\"\n          ></vui-pagination>\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"userListInfo?.users.length > 0 && users?.length > 0; else nouser\">\n              <div class=\"user-list-select vx-mb-2\">\n                <vui-checkbox\n                  *ngIf=\"!singleSelect\"\n                  #user\n                  [checked]=\"allUserSelected || futureUsersWillSelect\"\n                  [disabled]=\"\n                    allUserSelectedDisabled ||\n                    futureUsersWillSelect ||\n                    isAllDisabled\n                  \"\n                  (change)=\"selectAllUser($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\n                  </div>\n                </vui-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <ng-container *ngFor=\"let user of users\">\n                    <li\n                      class=\"vx-mb-3\"\n                      *ngIf=\"!singleSelect\"\n                      [appTooltip]=\"\n                        user\n                          | tooltipMessage\n                            : fromResponsibility\n                            : reviewerIds\n                            : overseerIds\n                            : assignorId\n                            : assigneeIds\n                            : 'member_id'\n                            : disabledIds?.includes(user?.member_id)\n                            : FromProgram\n                      \"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"true\"\n                    >\n                      <vui-checkbox\n                        (change)=\"selectItem($event, user)\"\n                        [disabled]=\"\n                          disabledIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect ||\n                          isAllDisabled\n                        \"\n                        [checked]=\"\n                          selectedUserIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect\n                        \"\n                        ><div class=\"user-name\">\n                          {{ user?.member_name }}\n                        </div></vui-checkbox\n                      >\n                    </li>\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\n                      <app-cs-radio\n                        [name]=\"'radio-selector'\"\n                        (checkedEvent)=\"selectItemRadio($event, user)\"\n                        [name]=\"'rx-category'\"\n                        [checked]=\"selectedUserIds?.includes(user?.member_id)\"\n                        [appTooltip]=\"user?.member_email\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        {{ user?.member_name }}\n                      </app-cs-radio>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nouser>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\n                \"\n              ></app-no-data>\n            </ng-template>\n            <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"!isPaginationEnabled && (usersList | filter : searchKey) as users\">\n          <vui-pagination\n            *ngIf=\"\n              userListInfo?.total_pages > 1 &&\n              usersList?.length !== userListInfo?.total_items\n            \"\n            [currentPage]=\"userCurrentPage\"\n            [totalPage]=\"userListInfo?.total_pages\"\n            (pageChanged)=\"userPageChange($event)\"\n          ></vui-pagination>\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"users?.length > 0; else nouser\">\n              <div class=\"user-list-select vx-mb-2\">\n                <vui-checkbox\n                  *ngIf=\"!singleSelect\"\n                  #user\n                  [checked]=\"allUserSelected || futureUsersWillSelect\"\n                  [disabled]=\"\n                    allUserSelectedDisabled ||\n                    futureUsersWillSelect ||\n                    isAllDisabled\n                  \"\n                  (change)=\"selectAllUser($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\n                  </div>\n                </vui-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <ng-container *ngFor=\"let user of users\">\n                    <li\n                      class=\"vx-mb-3\"\n                      *ngIf=\"!singleSelect\"\n                      [appTooltip]=\"\n                        user\n                          | tooltipMessage\n                            : fromResponsibility\n                            : reviewerIds\n                            : overseerIds\n                            : assignorId\n                            : assigneeIds\n                            : 'member_id'\n                            : disabledIds?.includes(user?.member_id)\n                            : FromProgram\n                      \"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"true\"\n                    >\n                      <vui-checkbox\n                        (change)=\"selectItem($event, user)\"\n                        [disabled]=\"\n                          disabledIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect ||\n                          isAllDisabled\n                        \"\n                        [checked]=\"\n                          selectedUserIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect\n                        \"\n                        ><div class=\"user-name\">\n                          {{ user?.member_name }}\n                        </div></vui-checkbox\n                      >\n                    </li>\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\n                      <app-cs-radio\n                        [name]=\"'radio-selector'\"\n                        (checkedEvent)=\"selectItemRadio($event, user)\"\n                        [name]=\"'rx-category'\"\n                        [checked]=\"selectedUserIds?.includes(user?.member_id)\"\n                        [appTooltip]=\"user?.member_email\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        {{ user?.member_name }}\n                      </app-cs-radio>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nouser>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"currentTab === 'GROUP'\">\n        <ng-container\n          *ngIf=\"groupsList | search : searchKey : 'group_name' as groups\"\n        >\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\n              <div class=\"user-list-select vx-mb-2\">\n                <vui-checkbox\n                  #group\n                  [checked]=\"allGroupSelected\"\n                  [disabled]=\"allGroupSelectedDisabled\"\n                  (change)=\"selectAllGroup($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{ !group?.checked ? \"Select All\" : \"Deselect All\" }}\n                  </div>\n                </vui-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li class=\"vx-mb-3\" *ngFor=\"let group of groups\">\n                    <vui-checkbox\n                      (change)=\"selectGroup($event, group)\"\n                      [disabled]=\"\n                        nonRemovableGroupIds?.includes(group?.group_id)\n                      \"\n                      [checked]=\"selectedGroupIds?.includes(group?.group_id)\"\n                    >\n                      <div\n                        class=\"user-name vx-d-flex vx-align-center vx-w-100\"\n                        [appTooltip]=\"group?.group_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        <div class=\"group-name\">{{ group?.group_name }}</div>\n                        <span\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\"\n                          >{{ group?.member_count }}\n                          {{ group?.member_count > 1 ? \"USERS\" : \"USER\" }}</span\n                        >\n                      </div>\n                    </vui-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nogroup>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"user-group-list-footer\">\n      <vui-floating-bar\n        *ngIf=\"\n          (!singleSelect || (!singleSelect && selectedReviewer)) && !loading\n        \"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        (workflowTypeChanged)=\"workflowTypeChanged($event)\"\n        [selectedWorkflow]=\"reviewerWorkflowType\"\n        [showWorkflow]=\"selectedReviewer\"\n        [groupSelected]=\"selectedGroups\"\n        [mode]=\"mode\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <ng-container *ngIf=\"!groupEnabled\">\n          <div\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n            *ngFor=\"let element of selectedUsers?.slice(0, 1); let i = index\"\n          >\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n              (click)=\"selectItem({ target: { checked: false } }, element)\"\n              >&#xe9ae;</i\n            >\n            <div\n              *ngIf=\"\n                fromApprovalWorkflow &&\n                approvalWorkflowType.toLowerCase() === 'sequential'\n              \"\n              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n            >\n              {{ 1 == selectedUsers?.length ? \"Final\" : 1 }}\n            </div>\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"element?.member_name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{ element?.member_name }}</span\n            >\n            <button\n              *ngIf=\"selectedUsers?.length > 1\"\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n              appPopover\n              (click)=\"groupDisable.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.slice(1)?.length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"selectItem({target:{checked:false}},element)\" class=\"icons\">&#xe90d;</i> <span>{{element?.member_name}}</span></div>\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div> -->\n        </ng-container>\n        <div\n          class=\"user-group-chip\"\n          *ngIf=\"selectedUsers?.length && groupEnabled\"\n        >\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\"\n            (click)=\"\n              selectItem({ target: { checked: false } }, selectedUsers[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedUsers[0]?.member_name }}</div>\n          <ng-container *ngIf=\"groupEnabled\">\n            <div\n              class=\"counter\"\n              *ngIf=\"selectedUsers?.length > 1\"\n              appPopover\n              (click)=\"userCount.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.length - 1 }}\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"name userGroup-name\">\n          <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\"\n            >User {{ selectedGroups?.length > 0 ? \" & \" : \" selected\" }}</span\n          >\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\"\n            >Users {{ selectedGroups?.length > 0 ? \" & \" : \"selected\" }}</span\n          >\n        </div>\n\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\"\n            (click)=\"\n              selectGroup({ target: { checked: false } }, selectedGroups[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedGroups[0]?.group_name }}</div>\n          <div\n            class=\"counter group\"\n            *ngIf=\"selectedGroups?.length > 1\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            +{{ selectedGroups?.length - 1 }}\n          </div>\n        </div>\n        <div class=\"name userGroup-name\">\n          <span *ngIf=\"selectedGroups?.length === 1\">{{\n            featureflag ? \"User Group selected\" : \"Group selected\"\n          }}</span>\n          <span *ngIf=\"selectedGroups?.length > 1\">{{\n            featureflag ? \"User Groups selected\" : \"Groups selected\"\n          }}</span>\n        </div>\n\n        <app-popover #userCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"let element of selectedUsers | slice : 1; let i = index\"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupDisable [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"let element of selectedUsers.slice(1); let i = index\">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    <span\n                      *ngIf=\"\n                        fromApprovalWorkflow &&\n                        approvalWorkflowType.toLowerCase() === 'sequential'\n                      \"\n                      class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                      >{{\n                        i + 1 === selectedUsers?.length - 1 ? \"Final\" : i + 2\n                      }}</span\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"\n                  let element of selectedGroups | slice : 1;\n                  let i = index\n                \"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\n                      (click)=\"\n                        selectGroup({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </vui-floating-bar>\n      <vui-floating-bar\n        *ngIf=\"singleSelect && !loading\"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <div class=\"chip\" *ngIf=\"selectedUsers?.length\">\n          <ng-container>\n            <i\n              class=\"icons\"\n              (click)=\"\n                selectItem({ target: { checked: false } }, selectedUsers[0])\n              \"\n              >&#xe90d;</i\n            >\n            <span class=\"value\"> {{ selectedUsers[0]?.member_name }}</span>\n          </ng-container>\n        </div>\n      </vui-floating-bar>\n    </div>\n  </div>\n\n  <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\">\n        This action will reset the default {{ userType }} selected for the\n        Program.\n      </div>\n    </div>\n    <div class=\"confirmation-bottom\">\n      <div class=\"message\">Are you sure you would like to proceed?</div>\n      <div class=\"button-group\">\n        <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\n        <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";::ng-deep .user-group-list{background:#fff;position:fixed;inset:0 500px 0 0}::ng-deep .user-group-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .user-group-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .user-group-list-head{background:#fbfbfb;height:44px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .user-group-list-title{color:#161b2f;font-size:14px;font-weight:500;margin:0!important;padding:0}::ng-deep .user-group-list-body{padding:32px 32px 0;height:calc(100vh - 124px)}::ng-deep .user-group-list-body .search-block{position:relative}::ng-deep .user-group-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .user-group-list-body .search-block input::placeholder{font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-group-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.75rem);overflow:hidden;overflow-y:auto;margin-bottom:.5rem;padding-right:.75rem}::ng-deep .user-group-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-group-list-mid.with-pagination{height:calc(100vh - 17.5rem)}::ng-deep .user-group-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-group-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkbox,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkmark,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value{color:#161b2f!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value .user-name,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-group-list-mid .user-list-item ul li{width:50%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-group-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:1.75rem!important}::ng-deep .user-group-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-group-list-tab button.active{pointer-events:none}::ng-deep .user-group-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-group-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-group-list-tab .future-user{margin-top:-.75rem}::ng-deep .user-group-list-tab .future-user .info{cursor:pointer}::ng-deep .user-group-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .user-group-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block{height:2.25rem;width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .user-group-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .user-group-list-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .user-group-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.group{background:#1e5dd3!important;border-color:#1e5dd3!important}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'user-group-list', template: "<div class=\"user-group-list\" [class.animate]=\"animation\">\n  <div class=\"user-group-list-head\">\n    <h3 class=\"user-group-list-title\">{{ panelTitle }}</h3>\n  </div>\n  <div class=\"user-group-list-body\">\n    <div class=\"user-group-list-body-inner\">\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\n      <div\n        class=\"user-group-list-tab vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n        *ngIf=\"groupEnabled\"\n      >\n        <div class=\"vx-d-flex vx-align-center\">\n          <button\n            *ngIf=\"!isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\"\n                  ? (usersList | filter : searchKey)?.length\n                  : usersList?.length || userListInfo?.total_items\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isPaginationEnabled\"\n            (click)=\"switchTab('USER')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'USER'\"\n          >\n            USERS\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"USER\" && isPaginationEnabled\n                  ? userListInfo?.total_items\n                  : userListInfo?.total\n              }}</span\n            >\n          </button>\n          <button\n            *ngIf=\"isGroupTabShow\"\n            (click)=\"switchTab('GROUP')\"\n            class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n            [class.active]=\"currentTab === 'GROUP'\"\n          >\n            {{ featureflag ? \"USER GROUPS\" : \"GROUPS\" }}\n            <span\n              class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\"\n              >{{\n                searchKey?.length && currentTab === \"GROUP\"\n                  ? (groupsList | search : searchKey : \"group_name\")?.length\n                  : groupsList?.length || groupListInfo?.total_items\n              }}</span\n            >\n          </button>\n        </div>\n\n        <div\n          class=\"future-user vx-d-flex vx-align-center\"\n          *ngIf=\"showFutureUsersSwitch\"\n        >\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">\n            Visible to All Current & Future Users\n          </div>\n          <i\n            class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-1\"\n            [appTooltip]=\"\n              'If selected, this policy will be visible to all users that are currently active in your VComply account and users that might be added in the future.'\n            \"\n            placement=\"bottom-right\"\n            delay=\"0\"\n            type=\"white\"\n            [tooltipMandatory]=\"true\"\n            >&#xe91f;</i\n          >\n          <app-cs-switch\n            [ngValue]=\"futureUsersWillSelect\"\n            (ngValueChange)=\"setAllUsersSelected($event)\"\n          >\n          </app-cs-switch>\n        </div>\n      </div>\n\n      <div class=\"search-block vx-mb-2\">\n        <i class=\"icons\">&#xe90b;</i>\n        <input\n          *ngIf=\"!featureflag\"\n          [(ngModel)]=\"searchKey\"\n          [disabled]=\"futureUsersWillSelect\"\n          type=\"text\"\n          placeholder=\"{{\n            currentTab === 'USER' ? 'Search User' : 'Search Group'\n          }}\"\n        />\n        <ng-container *ngIf=\"featureflag\">\n          <input\n            *ngIf=\"isPaginationEnabled; else searchInputWithoutPagination\"\n            [(ngModel)]=\"searchKey\"\n            (ngModelChange)=\"onSearchKeyChange($event)\"\n            [disabled]=\"futureUsersWillSelect\"\n            type=\"text\"\n            placeholder=\"{{\n              currentTab === 'USER' ? 'Search User' : 'Search User Group'\n            }}\"\n          />\n          <ng-template #searchInputWithoutPagination>\n            <input\n              [(ngModel)]=\"searchKey\"\n              [disabled]=\"futureUsersWillSelect\"\n              type=\"text\"\n              placeholder=\"{{\n                currentTab === 'USER' ? 'Search User' : 'Search User Group'\n              }}\"\n            />\n          </ng-template>\n        </ng-container>\n      </div>\n\n      <ng-container *ngIf=\"currentTab === 'USER' && !loading\">\n        <ng-container *ngIf=\"usersList | filter : searchKey : isPaginationEnabled as users\">\n          <vui-pagination\n            *ngIf=\"\n              userListInfo?.total_pages > 1 &&\n              usersList?.length !== userListInfo?.total_items\n            \"\n            [currentPage]=\"userCurrentPage\"\n            [totalPage]=\"userListInfo?.total_pages\"\n            (pageChanged)=\"userPageChange($event)\"\n            [from]=\"userListInfo?.from\"\n            [to]=\"userListInfo?.to\"\n            [total]=\"userListInfo?.total\"\n          ></vui-pagination>\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"users?.length > 0; else nouser\">\n              <ng-container *ngIf=\"!isPaginationEnabled\">\n                <div class=\"user-list-select vx-mb-2\">\n                  <vui-checkbox\n                    *ngIf=\"!singleSelect\"\n                    #user\n                    [checked]=\"allUserSelected || futureUsersWillSelect\"\n                    [disabled]=\"\n                      allUserSelectedDisabled ||\n                      futureUsersWillSelect ||\n                      isAllDisabled\n                    \"\n                    (change)=\"selectAllUser($event)\"\n                  >\n                    <div\n                      class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                    >\n                      {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\n                    </div>\n                  </vui-checkbox>\n                </div>\n              </ng-container>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <ng-container *ngFor=\"let user of users\">\n                    <li\n                      class=\"vx-mb-3\"\n                      *ngIf=\"!singleSelect\"\n                      [appTooltip]=\"\n                        user\n                          | tooltipMessage\n                            : fromResponsibility\n                            : reviewerIds\n                            : overseerIds\n                            : assignorId\n                            : assigneeIds\n                            : 'member_id'\n                            : disabledIds?.includes(user?.member_id)\n                            : FromProgram\n                      \"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"true\"\n                    >\n                      <vui-checkbox\n                        (change)=\"selectItem($event, user)\"\n                        [disabled]=\"\n                          disabledIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect ||\n                          isAllDisabled\n                        \"\n                        [checked]=\"\n                          selectedUserIds?.includes(user?.member_id) ||\n                          futureUsersWillSelect\n                        \"\n                        ><div class=\"user-name\">\n                          {{ user?.member_name }}\n                        </div></vui-checkbox\n                      >\n                    </li>\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\n                      <app-cs-radio\n                        [name]=\"'radio-selector'\"\n                        (checkedEvent)=\"selectItemRadio($event, user)\"\n                        [name]=\"'rx-category'\"\n                        [checked]=\"selectedUserIds?.includes(user?.member_id)\"\n                        [appTooltip]=\"user?.member_email\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        {{ user?.member_name }}\n                      </app-cs-radio>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nouser>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"currentTab === 'GROUP'\">\n        <ng-container\n          *ngIf=\"groupsList | search : searchKey : 'group_name' as groups\"\n        >\n          <div\n            class=\"user-group-list-mid\"\n            [class.with-pagination]=\"isPagination\"\n          >\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\n              <div class=\"user-list-select vx-mb-2\">\n                <vui-checkbox\n                  #group\n                  [checked]=\"allGroupSelected\"\n                  [disabled]=\"allGroupSelectedDisabled\"\n                  (change)=\"selectAllGroup($event)\"\n                >\n                  <div\n                    class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\"\n                  >\n                    {{ !group?.checked ? \"Select All\" : \"Deselect All\" }}\n                  </div>\n                </vui-checkbox>\n              </div>\n              <div class=\"user-list-item\">\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\n                  <li class=\"vx-mb-3\" *ngFor=\"let group of groups\">\n                    <vui-checkbox\n                      (change)=\"selectGroup($event, group)\"\n                      [disabled]=\"\n                        nonRemovableGroupIds?.includes(group?.group_id)\n                      \"\n                      [checked]=\"selectedGroupIds?.includes(group?.group_id)\"\n                    >\n                      <div\n                        class=\"user-name vx-d-flex vx-align-center vx-w-100\"\n                        [appTooltip]=\"group?.group_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        [tooltipMandatory]=\"true\"\n                      >\n                        <div class=\"group-name\">{{ group?.group_name }}</div>\n                        <span\n                          class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\"\n                          >{{ group?.member_count }}\n                          {{ group?.member_count > 1 ? \"USERS\" : \"USER\" }}</span\n                        >\n                      </div>\n                    </vui-checkbox>\n                  </li>\n                </ul>\n              </div>\n            </ng-container>\n            <ng-template #nogroup>\n              <app-no-data\n                *ngIf=\"!loading\"\n                [noDataImage]=\"ASSETS.search_data\"\n                [noDataText]=\"\n                  searchKey?.length > 0\n                    ? 'No match found.'\n                    : 'No data to display.'\n                \"\n              ></app-no-data>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"user-group-list-footer\">\n      <vui-floating-bar\n        *ngIf=\"\n          (!singleSelect || (!singleSelect && selectedReviewer)) && !loading\n        \"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        (workflowTypeChanged)=\"workflowTypeChanged($event)\"\n        [selectedWorkflow]=\"reviewerWorkflowType\"\n        [showWorkflow]=\"selectedReviewer\"\n        [groupSelected]=\"selectedGroups\"\n        [mode]=\"mode\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <ng-container *ngIf=\"!groupEnabled\">\n          <div\n            class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n            *ngFor=\"let element of selectedUsers?.slice(0, 1); let i = index\"\n          >\n            <i\n              class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n              *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n              (click)=\"selectItem({ target: { checked: false } }, element)\"\n              >&#xe9ae;</i\n            >\n            <div\n              *ngIf=\"\n                fromApprovalWorkflow &&\n                approvalWorkflowType.toLowerCase() === 'sequential'\n              \"\n              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n            >\n              {{ 1 == selectedUsers?.length ? \"Final\" : 1 }}\n            </div>\n            <span\n              class=\"chipName vx-fs-11 vx-label-txt\"\n              [appTooltip]=\"element?.member_name\"\n              placement=\"bottom-left\"\n              delay=\"0\"\n              type=\"black\"\n              [tooltipMandatory]=\"false\"\n              >{{ element?.member_name }}</span\n            >\n            <button\n              *ngIf=\"selectedUsers?.length > 1\"\n              class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n              appPopover\n              (click)=\"groupDisable.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.slice(1)?.length }}\n            </button>\n          </div>\n\n          <!-- <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"selectItem({target:{checked:false}},element)\" class=\"icons\">&#xe90d;</i> <span>{{element?.member_name}}</span></div>\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div> -->\n        </ng-container>\n        <div\n          class=\"user-group-chip\"\n          *ngIf=\"selectedUsers?.length && groupEnabled\"\n        >\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\"\n            (click)=\"\n              selectItem({ target: { checked: false } }, selectedUsers[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedUsers[0]?.member_name }}</div>\n          <ng-container *ngIf=\"groupEnabled\">\n            <div\n              class=\"counter\"\n              *ngIf=\"selectedUsers?.length > 1\"\n              appPopover\n              (click)=\"userCount.popover()\"\n              placement=\"left\"\n            >\n              +{{ selectedUsers?.length - 1 }}\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"name userGroup-name\">\n          <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\"\n            >User {{ selectedGroups?.length > 0 ? \" & \" : \" selected\" }}</span\n          >\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\"\n            >Users {{ selectedGroups?.length > 0 ? \" & \" : \"selected\" }}</span\n          >\n        </div>\n\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n          <i\n            class=\"icons cross\"\n            *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\"\n            (click)=\"\n              selectGroup({ target: { checked: false } }, selectedGroups[0])\n            \"\n            >&#xe9ae;</i\n          >\n          <div class=\"user-group-name\">{{ selectedGroups[0]?.group_name }}</div>\n          <div\n            class=\"counter group\"\n            *ngIf=\"selectedGroups?.length > 1\"\n            appPopover\n            (click)=\"groupCount.popover()\"\n            placement=\"left\"\n          >\n            +{{ selectedGroups?.length - 1 }}\n          </div>\n        </div>\n        <div class=\"name userGroup-name\">\n          <span *ngIf=\"selectedGroups?.length === 1\">{{\n            featureflag ? \"User Group selected\" : \"Group selected\"\n          }}</span>\n          <span *ngIf=\"selectedGroups?.length > 1\">{{\n            featureflag ? \"User Groups selected\" : \"Groups selected\"\n          }}</span>\n        </div>\n\n        <app-popover #userCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"let element of selectedUsers | slice : 1; let i = index\"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupDisable [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li *ngFor=\"let element of selectedUsers.slice(1); let i = index\">\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\n                      (click)=\"\n                        selectItem({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    <span\n                      *ngIf=\"\n                        fromApprovalWorkflow &&\n                        approvalWorkflowType.toLowerCase() === 'sequential'\n                      \"\n                      class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                      >{{\n                        i + 1 === selectedUsers?.length - 1 ? \"Final\" : i + 2\n                      }}</span\n                    >\n                    {{ element?.member_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n\n        <app-popover #groupCount [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"\n                  let element of selectedGroups | slice : 1;\n                  let i = index\n                \"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i\n                      class=\"icons\"\n                      *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\n                      (click)=\"\n                        selectGroup({ target: { checked: false } }, element)\n                      \"\n                      >&#xe90d;</i\n                    >\n                    {{ element?.group_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n      </vui-floating-bar>\n      <vui-floating-bar\n        *ngIf=\"singleSelect && !loading\"\n        (closeEvent)=\"saveList()\"\n        (closeList)=\"closeList()\"\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\"\n      >\n        <div class=\"chip\" *ngIf=\"selectedUsers?.length\">\n          <ng-container>\n            <i\n              class=\"icons\"\n              (click)=\"\n                selectItem({ target: { checked: false } }, selectedUsers[0])\n              \"\n              >&#xe90d;</i\n            >\n            <span class=\"value\"> {{ selectedUsers[0]?.member_name }}</span>\n          </ng-container>\n        </div>\n      </vui-floating-bar>\n    </div>\n  </div>\n\n  <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\">\n        This action will reset the default {{ userType }} selected for the\n        Program.\n      </div>\n    </div>\n    <div class=\"confirmation-bottom\">\n      <div class=\"message\">Are you sure you would like to proceed?</div>\n      <div class=\"button-group\">\n        <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\n        <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";::ng-deep .user-group-list{background:#fff;position:fixed;inset:0 500px 0 0}::ng-deep .user-group-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .user-group-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .user-group-list-head{background:#fbfbfb;height:44px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .user-group-list-title{color:#161b2f;font-size:14px;font-weight:500;margin:0!important;padding:0}::ng-deep .user-group-list-body{padding:32px 32px 0;height:calc(100vh - 124px)}::ng-deep .user-group-list-body .search-block{position:relative}::ng-deep .user-group-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .user-group-list-body .search-block input::placeholder{font-size:14px;color:#747576}::ng-deep .user-group-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .user-group-list-mid{width:calc(100% + .75rem);height:calc(100vh - 15.75rem);overflow:hidden;overflow-y:auto;margin-bottom:.5rem;padding-right:.75rem}::ng-deep .user-group-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .user-group-list-mid.with-pagination{height:calc(100vh - 17.5rem)}::ng-deep .user-group-list-mid .selected-owners{border-bottom:1px solid #dbdbdb}::ng-deep .user-group-list-mid .user-list-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkbox,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkmark,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value{color:#161b2f!important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value .user-name,::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul{list-style-type:none;align-items:flex-start;flex-wrap:wrap}::ng-deep .user-group-list-mid .user-list-item ul li{width:50%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox{width:calc(100% - 4.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value{color:#161b2f!important;font-size:12px!important;width:100%}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .user-name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .user-group-list-mid .user-list-item ul li vui-checkbox .checkbox-item span.value .counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;margin-left:.5rem!important}::ng-deep .user-group-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:1.75rem!important}::ng-deep .user-group-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .user-group-list-tab button.active{pointer-events:none}::ng-deep .user-group-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .user-group-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .user-group-list-tab .future-user{margin-top:-.75rem}::ng-deep .user-group-list-tab .future-user .info{cursor:pointer}::ng-deep .user-group-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .user-group-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block{height:2.25rem;width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .user-group-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .user-group-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .user-group-list-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .user-group-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .user-group-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.group{background:#1e5dd3!important;border-color:#1e5dd3!important}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { save: [{
                 type: Output
             }], cancel: [{
@@ -37115,9 +37123,14 @@ class PolicyAccessComponent {
         this.groupsAccessList = [];
         this.disabledGroupIds = [];
         this.futureUsersWillSelect = false;
+        this.loading = false;
+        this.userListInfo = {};
+        this.isPaginationEnabled = false;
+        this.featureflag = false;
         this.close = new EventEmitter();
         this.saveCheckPoint = new EventEmitter();
         this.setPolicyAccessType = new EventEmitter();
+        this.fetchUserData = new EventEmitter();
         this.isConfirmationAlertVisible = false;
     }
     ngOnInit() { }
@@ -37148,12 +37161,15 @@ class PolicyAccessComponent {
             this.setPolicyAccessType.emit(this.policyAccessType);
         }
     }
+    getUsersListWithPagination(event) {
+        this.fetchUserData.emit(event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PolicyAccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PolicyAccessComponent, selector: "app-policy-access", inputs: { policyAccessType: "policyAccessType", SelectedCategory: "SelectedCategory", orgUsersList: "orgUsersList", groupList: "groupList", selectedUsers: "selectedUsers", selectedGroups: "selectedGroups", disabledIds: "disabledIds", usersAccessList: "usersAccessList", groupsAccessList: "groupsAccessList", disabledGroupIds: "disabledGroupIds", futureUsersWillSelect: "futureUsersWillSelect" }, outputs: { close: "close", saveCheckPoint: "saveCheckPoint", setPolicyAccessType: "setPolicyAccessType" }, ngImport: i0, template: "<div class=\"policy-access-dialog\">\n  <div\n    class=\"policy-access-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Specify Policy Portal Access Type\n    </div>\n  </div>\n  <div class=\"policy-access-dialog-body\">\n    <div class=\"policy-access-dialog-body-inner\">\n      <!-- Step 1 -->\n      <div class=\"approvers-form-group vx-mb-2\">\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n          STEP 1: ACCESS TYPE <span class=\"vx-fs-14 vx-txt-red\">*</span>\n        </div>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n          <app-cs-radio\n            [name]=\"'policyAccessType'\"\n            [checked]=\"policyAccessType === 0\"\n            (checkedEvent)=\"setAccessField(0)\"\n          >\n            <div\n              class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\"\n            >\n              <div class=\"vx-d-flex vx-align-center\">\n                <img [src]=\"ASSETS.select_users\" />\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\"\n                >\n                  EVERYONE WHO HAS ACCESS TO THIS POLICY CATEGORY\n                </div>\n                <i\n                  class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\"\n                  [appTooltip]=\"\n                    'If selected, this policy will be visible to all users selected as authors, approvers and category owners of the policy categories linked with this policy.'\n                  \"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"white\"\n                  [tooltipMandatory]=\"true\"\n                  >&#xe91f;</i\n                >\n              </div>\n              <div class=\"vx-d-block\">\n                <span class=\"circle-selection\"></span>\n                <i class=\"icons ckeck-selection vx-fs-16\">&#xe949;</i>\n              </div>\n            </div>\n          </app-cs-radio>\n          <app-cs-radio\n            [name]=\"'policyAccessType'\"\n            [checked]=\"policyAccessType === 1\"\n            (checkedEvent)=\"setAccessField(1)\"\n          >\n            <div\n              class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\"\n            >\n              <div class=\"vx-d-flex vx-align-center\">\n                <img [src]=\"ASSETS.everyone_as_per_category\" />\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\"\n                >\n                  SELECT USERS & GROUPS\n                </div>\n                <i\n                  class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\"\n                  [appTooltip]=\"\n                    'This option allows you to specify users or groups that can view this policy, This is the list of all users within your VComply account.'\n                  \"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"white\"\n                  [tooltipMandatory]=\"true\"\n                  >&#xe91f;</i\n                >\n              </div>\n              <div class=\"vx-d-block\">\n                <span class=\"circle-selection\"></span>\n                <i class=\"icons ckeck-selection vx-fs-16\">&#xe949;</i>\n              </div>\n            </div>\n          </app-cs-radio>\n        </div>\n      </div>\n\n      <!-- Step 2 -->\n      <div class=\"approvers-form-group vx-mb-2\">\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n          STEP 2: SELECT USER(S) <span class=\"vx-fs-14 vx-txt-red\">*</span>\n        </div>\n        <div class=\"approvers-user-group\">\n          <user-group-list\n            *ngIf=\"policyAccessType === 0\"\n            [userlist]=\"orgUsersList\"\n            [groupEnabled]=\"true\"\n            [isGroupTabShow]=\"true\"\n            [selectedUsers]=\"usersAccessList\"\n            [selectedGroups]=\"groupsAccessList\"\n            [disabledIds]=\"disabledIds\"\n            [nonRemovableUserIds]=\"disabledIds\"\n            [nonRemovableGroupIds]=\"disabledGroupIds\"\n            [groupList]=\"groupsAccessList\"\n            [allUserSelectedDisabled]=\"true\"\n            [showFutureUsersSwitch]=\"false\"\n            [isAllDisabled]=\"true\"\n            (cancel)=\"disableSelector()\"\n            (save)=\"saveSelectedUsers($event)\"\n          ></user-group-list>\n\n          <user-group-list\n            *ngIf=\"policyAccessType === 1\"\n            [userlist]=\"orgUsersList\"\n            [groupEnabled]=\"true\"\n            [groupList]=\"groupList\"\n            [selectedUsers]=\"selectedUsers\"\n            [selectedGroups]=\"selectedGroups\"\n            [showFutureUsersSwitch]=\"true\"\n            [futureUsersWillSelect]=\"futureUsersWillSelect\"\n            (cancel)=\"disableSelector()\"\n            (save)=\"saveSelectedUsers($event)\"\n          ></user-group-list>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"policy-access-dialog-confirmation\"\n    *ngIf=\"isConfirmationAlertVisible\"\n  >\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\">\n        The policies that you intend to make accessible to the entire\n        organization can be added to the policy portal. It is like a shared\n        catalog of all active & updated policies that any logged in user can\n        read/ download for reference. Hence, if this option is enabled, it is\n        not necessary for you to set up an attestation schedule or select\n        readers to attest the policies.\n      </div>\n    </div>\n    <div class=\"confirmation-bottom\">\n      <div class=\"message\">Are you sure you would like to proceed?</div>\n      <div class=\"button-group\">\n        <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\n        <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- [selectedUsers]=\"policyForm.CCFailEmail\"\n[selectedGroups]=\"policyForm.CCFailEmailGroup\"\n(save)=\"saveSelectedList('ccFail', $event)\" -->\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .policy-access-dialog{position:fixed;inset:0 500px 0 0}::ng-deep .policy-access-dialog:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .policy-access-dialog-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .policy-access-dialog-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem;overflow:hidden}::ng-deep .policy-access-dialog-body-inner{height:calc(100vh - 6.75rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio{width:calc(50% - .25rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item{width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .radio,::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .radiomark{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value{margin-left:0!important;max-width:100%!important;width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type{border-radius:.25rem;border:1px solid #dbdbdb;width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type img{height:2rem;margin-right:.75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type .circle-selection{border-radius:50%;border:1px solid #dbdbdb;display:block;width:1rem;min-width:1rem;height:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type .ckeck-selection{color:#34aa44;display:none}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type{background:#eefcf0;border:1px solid #34AA44}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type .circle-selection{display:none}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type .ckeck-selection{display:block}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list{position:static!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list:before{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-head{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body{padding:0!important;height:auto!important;margin-bottom:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body-inner{border-radius:.25rem;border:1px solid #dbdbdb;margin-bottom:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .user-group-list-tab{border-bottom:1px solid #dbdbdb;padding:.75rem .75rem 0}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .search-block{padding:0 .75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .search-block i{left:1.75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .user-group-list-mid{padding:0 .75rem;width:100%;height:calc(100vh - 24.4rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-mid{height:calc(100vh - 25.95rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-footer vui-floating-bar .reviewer-floating-bar{padding:0!important}::ng-deep .policy-access-dialog-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:1}::ng-deep .policy-access-dialog-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .policy-access-dialog-confirmation .confirmation-top .icon-block{height:2.25rem;min-width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .policy-access-dialog-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .policy-access-dialog-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}::ng-deep .policy-access-dialog-confirmation.error-confirmation{background:#eb2424}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top{justify-content:space-between}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top button{height:1.5rem;width:3rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top button.ok-btn{background:#fff;color:#eb2424;margin-left:.25rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "isPaginationEnabled", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PolicyAccessComponent, selector: "app-policy-access", inputs: { policyAccessType: "policyAccessType", SelectedCategory: "SelectedCategory", orgUsersList: "orgUsersList", groupList: "groupList", selectedUsers: "selectedUsers", selectedGroups: "selectedGroups", disabledIds: "disabledIds", usersAccessList: "usersAccessList", groupsAccessList: "groupsAccessList", disabledGroupIds: "disabledGroupIds", futureUsersWillSelect: "futureUsersWillSelect", loading: "loading", userListInfo: "userListInfo", isPaginationEnabled: "isPaginationEnabled", featureflag: "featureflag" }, outputs: { close: "close", saveCheckPoint: "saveCheckPoint", setPolicyAccessType: "setPolicyAccessType", fetchUserData: "fetchUserData" }, ngImport: i0, template: "<div class=\"policy-access-dialog\">\n  <div\n    class=\"policy-access-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Specify Policy Portal Access Type\n    </div>\n  </div>\n  <div class=\"policy-access-dialog-body\">\n    <div class=\"policy-access-dialog-body-inner\">\n      <!-- Step 1 -->\n      <div class=\"approvers-form-group vx-mb-2\">\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n          STEP 1: ACCESS TYPE <span class=\"vx-fs-14 vx-txt-red\">*</span>\n        </div>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n          <app-cs-radio\n            [name]=\"'policyAccessType'\"\n            [checked]=\"policyAccessType === 0\"\n            (checkedEvent)=\"setAccessField(0)\"\n          >\n            <div\n              class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\"\n            >\n              <div class=\"vx-d-flex vx-align-center\">\n                <img [src]=\"ASSETS.select_users\" />\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\"\n                >\n                  EVERYONE WHO HAS ACCESS TO THIS POLICY CATEGORY\n                </div>\n                <i\n                  class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\"\n                  [appTooltip]=\"\n                    'If selected, this policy will be visible to all users selected as authors, approvers and category owners of the policy categories linked with this policy.'\n                  \"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"white\"\n                  [tooltipMandatory]=\"true\"\n                  >&#xe91f;</i\n                >\n              </div>\n              <div class=\"vx-d-block\">\n                <span class=\"circle-selection\"></span>\n                <i class=\"icons ckeck-selection vx-fs-16\">&#xe949;</i>\n              </div>\n            </div>\n          </app-cs-radio>\n          <app-cs-radio\n            [name]=\"'policyAccessType'\"\n            [checked]=\"policyAccessType === 1\"\n            (checkedEvent)=\"setAccessField(1)\"\n          >\n            <div\n              class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\"\n            >\n              <div class=\"vx-d-flex vx-align-center\">\n                <img [src]=\"ASSETS.everyone_as_per_category\" />\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\"\n                >\n                  SELECT USERS & GROUPS\n                </div>\n                <i\n                  class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\"\n                  [appTooltip]=\"\n                    'This option allows you to specify users or groups that can view this policy, This is the list of all users within your VComply account.'\n                  \"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"white\"\n                  [tooltipMandatory]=\"true\"\n                  >&#xe91f;</i\n                >\n              </div>\n              <div class=\"vx-d-block\">\n                <span class=\"circle-selection\"></span>\n                <i class=\"icons ckeck-selection vx-fs-16\">&#xe949;</i>\n              </div>\n            </div>\n          </app-cs-radio>\n        </div>\n      </div>\n\n      <!-- Step 2 -->\n      <div class=\"approvers-form-group vx-mb-2\">\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n          STEP 2: SELECT USER(S) <span class=\"vx-fs-14 vx-txt-red\">*</span>\n        </div>\n        <div class=\"approvers-user-group\">\n          <user-group-list\n            *ngIf=\"policyAccessType === 0\"\n            [userlist]=\"orgUsersList\"\n            [groupEnabled]=\"true\"\n            [isGroupTabShow]=\"true\"\n            [selectedUsers]=\"usersAccessList\"\n            [selectedGroups]=\"groupsAccessList\"\n            [disabledIds]=\"disabledIds\"\n            [nonRemovableUserIds]=\"disabledIds\"\n            [nonRemovableGroupIds]=\"disabledGroupIds\"\n            [groupList]=\"groupsAccessList\"\n            [allUserSelectedDisabled]=\"true\"\n            [showFutureUsersSwitch]=\"false\"\n            [isAllDisabled]=\"true\"\n            (cancel)=\"disableSelector()\"\n            (save)=\"saveSelectedUsers($event)\"\n          ></user-group-list>\n\n          <user-group-list\n            *ngIf=\"policyAccessType === 1\"\n            [userlist]=\"orgUsersList\"\n            [groupEnabled]=\"true\"\n            [groupList]=\"groupList\"\n            [selectedUsers]=\"selectedUsers\"\n            [selectedGroups]=\"selectedGroups\"\n            [showFutureUsersSwitch]=\"true\"\n            [futureUsersWillSelect]=\"futureUsersWillSelect\"\n            (cancel)=\"disableSelector()\"\n            (save)=\"saveSelectedUsers($event)\"\n            [loading]=\"loading\" \n            [userListInfo]=\"userListInfo\" \n            [isPaginationEnabled]=\"isPaginationEnabled\"\n            (fetchUserData)=\"getUsersListWithPagination($event)\"\n            [featureflag]=\"featureflag\">\n          ></user-group-list>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"policy-access-dialog-confirmation\"\n    *ngIf=\"isConfirmationAlertVisible\"\n  >\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\">\n        The policies that you intend to make accessible to the entire\n        organization can be added to the policy portal. It is like a shared\n        catalog of all active & updated policies that any logged in user can\n        read/ download for reference. Hence, if this option is enabled, it is\n        not necessary for you to set up an attestation schedule or select\n        readers to attest the policies.\n      </div>\n    </div>\n    <div class=\"confirmation-bottom\">\n      <div class=\"message\">Are you sure you would like to proceed?</div>\n      <div class=\"button-group\">\n        <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\n        <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- [selectedUsers]=\"policyForm.CCFailEmail\"\n[selectedGroups]=\"policyForm.CCFailEmailGroup\"\n(save)=\"saveSelectedList('ccFail', $event)\" -->\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .policy-access-dialog{position:fixed;inset:0 500px 0 0}::ng-deep .policy-access-dialog:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .policy-access-dialog-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .policy-access-dialog-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem;overflow:hidden}::ng-deep .policy-access-dialog-body-inner{height:calc(100vh - 6.75rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio{width:calc(50% - .25rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item{width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .radio,::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .radiomark{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value{margin-left:0!important;max-width:100%!important;width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type{border-radius:.25rem;border:1px solid #dbdbdb;width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type img{height:2rem;margin-right:.75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type .circle-selection{border-radius:50%;border:1px solid #dbdbdb;display:block;width:1rem;min-width:1rem;height:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type .ckeck-selection{color:#34aa44;display:none}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type{background:#eefcf0;border:1px solid #34AA44}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type .circle-selection{display:none}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type .ckeck-selection{display:block}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list{position:static!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list:before{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-head{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body{padding:0!important;height:auto!important;margin-bottom:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body-inner{border-radius:.25rem;border:1px solid #dbdbdb;margin-bottom:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .user-group-list-tab{border-bottom:1px solid #dbdbdb;padding:.75rem .75rem 0}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .search-block{padding:0 .75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .search-block i{left:1.75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .user-group-list-mid{padding:0 .75rem;width:100%;height:calc(100vh - 24.4rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body vui-pagination .pagination-sec-ds{padding-left:.75rem!important;padding-right:.75rem!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-mid{height:calc(100vh - 25.95rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-footer vui-floating-bar .reviewer-floating-bar{padding:0!important}::ng-deep .policy-access-dialog-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:1}::ng-deep .policy-access-dialog-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .policy-access-dialog-confirmation .confirmation-top .icon-block{height:2.25rem;min-width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .policy-access-dialog-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .policy-access-dialog-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}::ng-deep .policy-access-dialog-confirmation.error-confirmation{background:#eb2424}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top{justify-content:space-between}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top button{height:1.5rem;width:3rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top button.ok-btn{background:#fff;color:#eb2424;margin-left:.25rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "isPaginationEnabled", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PolicyAccessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-policy-access', template: "<div class=\"policy-access-dialog\">\n  <div\n    class=\"policy-access-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Specify Policy Portal Access Type\n    </div>\n  </div>\n  <div class=\"policy-access-dialog-body\">\n    <div class=\"policy-access-dialog-body-inner\">\n      <!-- Step 1 -->\n      <div class=\"approvers-form-group vx-mb-2\">\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n          STEP 1: ACCESS TYPE <span class=\"vx-fs-14 vx-txt-red\">*</span>\n        </div>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n          <app-cs-radio\n            [name]=\"'policyAccessType'\"\n            [checked]=\"policyAccessType === 0\"\n            (checkedEvent)=\"setAccessField(0)\"\n          >\n            <div\n              class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\"\n            >\n              <div class=\"vx-d-flex vx-align-center\">\n                <img [src]=\"ASSETS.select_users\" />\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\"\n                >\n                  EVERYONE WHO HAS ACCESS TO THIS POLICY CATEGORY\n                </div>\n                <i\n                  class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\"\n                  [appTooltip]=\"\n                    'If selected, this policy will be visible to all users selected as authors, approvers and category owners of the policy categories linked with this policy.'\n                  \"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"white\"\n                  [tooltipMandatory]=\"true\"\n                  >&#xe91f;</i\n                >\n              </div>\n              <div class=\"vx-d-block\">\n                <span class=\"circle-selection\"></span>\n                <i class=\"icons ckeck-selection vx-fs-16\">&#xe949;</i>\n              </div>\n            </div>\n          </app-cs-radio>\n          <app-cs-radio\n            [name]=\"'policyAccessType'\"\n            [checked]=\"policyAccessType === 1\"\n            (checkedEvent)=\"setAccessField(1)\"\n          >\n            <div\n              class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\"\n            >\n              <div class=\"vx-d-flex vx-align-center\">\n                <img [src]=\"ASSETS.everyone_as_per_category\" />\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\"\n                >\n                  SELECT USERS & GROUPS\n                </div>\n                <i\n                  class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\"\n                  [appTooltip]=\"\n                    'This option allows you to specify users or groups that can view this policy, This is the list of all users within your VComply account.'\n                  \"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"white\"\n                  [tooltipMandatory]=\"true\"\n                  >&#xe91f;</i\n                >\n              </div>\n              <div class=\"vx-d-block\">\n                <span class=\"circle-selection\"></span>\n                <i class=\"icons ckeck-selection vx-fs-16\">&#xe949;</i>\n              </div>\n            </div>\n          </app-cs-radio>\n        </div>\n      </div>\n\n      <!-- Step 2 -->\n      <div class=\"approvers-form-group vx-mb-2\">\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n          STEP 2: SELECT USER(S) <span class=\"vx-fs-14 vx-txt-red\">*</span>\n        </div>\n        <div class=\"approvers-user-group\">\n          <user-group-list\n            *ngIf=\"policyAccessType === 0\"\n            [userlist]=\"orgUsersList\"\n            [groupEnabled]=\"true\"\n            [isGroupTabShow]=\"true\"\n            [selectedUsers]=\"usersAccessList\"\n            [selectedGroups]=\"groupsAccessList\"\n            [disabledIds]=\"disabledIds\"\n            [nonRemovableUserIds]=\"disabledIds\"\n            [nonRemovableGroupIds]=\"disabledGroupIds\"\n            [groupList]=\"groupsAccessList\"\n            [allUserSelectedDisabled]=\"true\"\n            [showFutureUsersSwitch]=\"false\"\n            [isAllDisabled]=\"true\"\n            (cancel)=\"disableSelector()\"\n            (save)=\"saveSelectedUsers($event)\"\n          ></user-group-list>\n\n          <user-group-list\n            *ngIf=\"policyAccessType === 1\"\n            [userlist]=\"orgUsersList\"\n            [groupEnabled]=\"true\"\n            [groupList]=\"groupList\"\n            [selectedUsers]=\"selectedUsers\"\n            [selectedGroups]=\"selectedGroups\"\n            [showFutureUsersSwitch]=\"true\"\n            [futureUsersWillSelect]=\"futureUsersWillSelect\"\n            (cancel)=\"disableSelector()\"\n            (save)=\"saveSelectedUsers($event)\"\n          ></user-group-list>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"policy-access-dialog-confirmation\"\n    *ngIf=\"isConfirmationAlertVisible\"\n  >\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\">\n        The policies that you intend to make accessible to the entire\n        organization can be added to the policy portal. It is like a shared\n        catalog of all active & updated policies that any logged in user can\n        read/ download for reference. Hence, if this option is enabled, it is\n        not necessary for you to set up an attestation schedule or select\n        readers to attest the policies.\n      </div>\n    </div>\n    <div class=\"confirmation-bottom\">\n      <div class=\"message\">Are you sure you would like to proceed?</div>\n      <div class=\"button-group\">\n        <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\n        <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- [selectedUsers]=\"policyForm.CCFailEmail\"\n[selectedGroups]=\"policyForm.CCFailEmailGroup\"\n(save)=\"saveSelectedList('ccFail', $event)\" -->\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .policy-access-dialog{position:fixed;inset:0 500px 0 0}::ng-deep .policy-access-dialog:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .policy-access-dialog-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .policy-access-dialog-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem;overflow:hidden}::ng-deep .policy-access-dialog-body-inner{height:calc(100vh - 6.75rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio{width:calc(50% - .25rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item{width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .radio,::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .radiomark{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value{margin-left:0!important;max-width:100%!important;width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type{border-radius:.25rem;border:1px solid #dbdbdb;width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type img{height:2rem;margin-right:.75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type .circle-selection{border-radius:50%;border:1px solid #dbdbdb;display:block;width:1rem;min-width:1rem;height:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type .ckeck-selection{color:#34aa44;display:none}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type{background:#eefcf0;border:1px solid #34AA44}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type .circle-selection{display:none}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type .ckeck-selection{display:block}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list{position:static!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list:before{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-head{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body{padding:0!important;height:auto!important;margin-bottom:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body-inner{border-radius:.25rem;border:1px solid #dbdbdb;margin-bottom:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .user-group-list-tab{border-bottom:1px solid #dbdbdb;padding:.75rem .75rem 0}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .search-block{padding:0 .75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .search-block i{left:1.75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .user-group-list-mid{padding:0 .75rem;width:100%;height:calc(100vh - 24.4rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-mid{height:calc(100vh - 25.95rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-footer vui-floating-bar .reviewer-floating-bar{padding:0!important}::ng-deep .policy-access-dialog-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:1}::ng-deep .policy-access-dialog-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .policy-access-dialog-confirmation .confirmation-top .icon-block{height:2.25rem;min-width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .policy-access-dialog-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .policy-access-dialog-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}::ng-deep .policy-access-dialog-confirmation.error-confirmation{background:#eb2424}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top{justify-content:space-between}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top button{height:1.5rem;width:3rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top button.ok-btn{background:#fff;color:#eb2424;margin-left:.25rem}\n"] }]
+            args: [{ selector: 'app-policy-access', template: "<div class=\"policy-access-dialog\">\n  <div\n    class=\"policy-access-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\n      Specify Policy Portal Access Type\n    </div>\n  </div>\n  <div class=\"policy-access-dialog-body\">\n    <div class=\"policy-access-dialog-body-inner\">\n      <!-- Step 1 -->\n      <div class=\"approvers-form-group vx-mb-2\">\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n          STEP 1: ACCESS TYPE <span class=\"vx-fs-14 vx-txt-red\">*</span>\n        </div>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n          <app-cs-radio\n            [name]=\"'policyAccessType'\"\n            [checked]=\"policyAccessType === 0\"\n            (checkedEvent)=\"setAccessField(0)\"\n          >\n            <div\n              class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\"\n            >\n              <div class=\"vx-d-flex vx-align-center\">\n                <img [src]=\"ASSETS.select_users\" />\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\"\n                >\n                  EVERYONE WHO HAS ACCESS TO THIS POLICY CATEGORY\n                </div>\n                <i\n                  class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\"\n                  [appTooltip]=\"\n                    'If selected, this policy will be visible to all users selected as authors, approvers and category owners of the policy categories linked with this policy.'\n                  \"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"white\"\n                  [tooltipMandatory]=\"true\"\n                  >&#xe91f;</i\n                >\n              </div>\n              <div class=\"vx-d-block\">\n                <span class=\"circle-selection\"></span>\n                <i class=\"icons ckeck-selection vx-fs-16\">&#xe949;</i>\n              </div>\n            </div>\n          </app-cs-radio>\n          <app-cs-radio\n            [name]=\"'policyAccessType'\"\n            [checked]=\"policyAccessType === 1\"\n            (checkedEvent)=\"setAccessField(1)\"\n          >\n            <div\n              class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\"\n            >\n              <div class=\"vx-d-flex vx-align-center\">\n                <img [src]=\"ASSETS.everyone_as_per_category\" />\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\"\n                >\n                  SELECT USERS & GROUPS\n                </div>\n                <i\n                  class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\"\n                  [appTooltip]=\"\n                    'This option allows you to specify users or groups that can view this policy, This is the list of all users within your VComply account.'\n                  \"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"white\"\n                  [tooltipMandatory]=\"true\"\n                  >&#xe91f;</i\n                >\n              </div>\n              <div class=\"vx-d-block\">\n                <span class=\"circle-selection\"></span>\n                <i class=\"icons ckeck-selection vx-fs-16\">&#xe949;</i>\n              </div>\n            </div>\n          </app-cs-radio>\n        </div>\n      </div>\n\n      <!-- Step 2 -->\n      <div class=\"approvers-form-group vx-mb-2\">\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n          STEP 2: SELECT USER(S) <span class=\"vx-fs-14 vx-txt-red\">*</span>\n        </div>\n        <div class=\"approvers-user-group\">\n          <user-group-list\n            *ngIf=\"policyAccessType === 0\"\n            [userlist]=\"orgUsersList\"\n            [groupEnabled]=\"true\"\n            [isGroupTabShow]=\"true\"\n            [selectedUsers]=\"usersAccessList\"\n            [selectedGroups]=\"groupsAccessList\"\n            [disabledIds]=\"disabledIds\"\n            [nonRemovableUserIds]=\"disabledIds\"\n            [nonRemovableGroupIds]=\"disabledGroupIds\"\n            [groupList]=\"groupsAccessList\"\n            [allUserSelectedDisabled]=\"true\"\n            [showFutureUsersSwitch]=\"false\"\n            [isAllDisabled]=\"true\"\n            (cancel)=\"disableSelector()\"\n            (save)=\"saveSelectedUsers($event)\"\n          ></user-group-list>\n\n          <user-group-list\n            *ngIf=\"policyAccessType === 1\"\n            [userlist]=\"orgUsersList\"\n            [groupEnabled]=\"true\"\n            [groupList]=\"groupList\"\n            [selectedUsers]=\"selectedUsers\"\n            [selectedGroups]=\"selectedGroups\"\n            [showFutureUsersSwitch]=\"true\"\n            [futureUsersWillSelect]=\"futureUsersWillSelect\"\n            (cancel)=\"disableSelector()\"\n            (save)=\"saveSelectedUsers($event)\"\n            [loading]=\"loading\" \n            [userListInfo]=\"userListInfo\" \n            [isPaginationEnabled]=\"isPaginationEnabled\"\n            (fetchUserData)=\"getUsersListWithPagination($event)\"\n            [featureflag]=\"featureflag\">\n          ></user-group-list>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"policy-access-dialog-confirmation\"\n    *ngIf=\"isConfirmationAlertVisible\"\n  >\n    <div class=\"confirmation-top\">\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\n      <div class=\"text\">\n        The policies that you intend to make accessible to the entire\n        organization can be added to the policy portal. It is like a shared\n        catalog of all active & updated policies that any logged in user can\n        read/ download for reference. Hence, if this option is enabled, it is\n        not necessary for you to set up an attestation schedule or select\n        readers to attest the policies.\n      </div>\n    </div>\n    <div class=\"confirmation-bottom\">\n      <div class=\"message\">Are you sure you would like to proceed?</div>\n      <div class=\"button-group\">\n        <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\n        <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- [selectedUsers]=\"policyForm.CCFailEmail\"\n[selectedGroups]=\"policyForm.CCFailEmailGroup\"\n(save)=\"saveSelectedList('ccFail', $event)\" -->\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .policy-access-dialog{position:fixed;inset:0 500px 0 0}::ng-deep .policy-access-dialog:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .policy-access-dialog-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .policy-access-dialog-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem;overflow:hidden}::ng-deep .policy-access-dialog-body-inner{height:calc(100vh - 6.75rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio{width:calc(50% - .25rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item{width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .radio,::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .radiomark{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value{margin-left:0!important;max-width:100%!important;width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type{border-radius:.25rem;border:1px solid #dbdbdb;width:100%}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type img{height:2rem;margin-right:.75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type .circle-selection{border-radius:50%;border:1px solid #dbdbdb;display:block;width:1rem;min-width:1rem;height:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type .ckeck-selection{color:#34aa44;display:none}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type{background:#eefcf0;border:1px solid #34AA44}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type .circle-selection{display:none}::ng-deep .policy-access-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type .ckeck-selection{display:block}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list{position:static!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list:before{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-head{display:none!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body{padding:0!important;height:auto!important;margin-bottom:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body-inner{border-radius:.25rem;border:1px solid #dbdbdb;margin-bottom:1rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .user-group-list-tab{border-bottom:1px solid #dbdbdb;padding:.75rem .75rem 0}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .search-block{padding:0 .75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .search-block i{left:1.75rem}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .user-group-list-mid{padding:0 .75rem;width:100%;height:calc(100vh - 24.4rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body vui-pagination .pagination-sec-ds{padding-left:.75rem!important;padding-right:.75rem!important}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-mid{height:calc(100vh - 25.95rem)}::ng-deep .policy-access-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-footer vui-floating-bar .reviewer-floating-bar{padding:0!important}::ng-deep .policy-access-dialog-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:1}::ng-deep .policy-access-dialog-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .policy-access-dialog-confirmation .confirmation-top .icon-block{height:2.25rem;min-width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .policy-access-dialog-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .policy-access-dialog-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .policy-access-dialog-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}::ng-deep .policy-access-dialog-confirmation.error-confirmation{background:#eb2424}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top{justify-content:space-between}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top button{height:1.5rem;width:3rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .policy-access-dialog-confirmation.error-confirmation .confirmation-top button.ok-btn{background:#fff;color:#eb2424;margin-left:.25rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { policyAccessType: [{
                 type: Input
             }], SelectedCategory: [{
@@ -37176,12 +37192,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], futureUsersWillSelect: [{
                 type: Input
+            }], loading: [{
+                type: Input
+            }], userListInfo: [{
+                type: Input
+            }], isPaginationEnabled: [{
+                type: Input
+            }], featureflag: [{
+                type: Input
             }], close: [{
                 type: Output
             }], saveCheckPoint: [{
                 type: Output
             }], setPolicyAccessType: [{
                 type: Output
+            }], fetchUserData: [{
+                type: Output
             }] } });
 
 class TooltipValidationPipe {
@@ -38065,6 +38091,7 @@ class WorkflowPolicyComponent {
             policy_access_type: 0,
             policy_access_owners: [],
             policy_access_groups: [],
+            selectedAllAttestors: false,
         };
         this.baseURL = location?.origin;
         if (this.baseURL == 'http://localhost:4200') {
@@ -38091,7 +38118,7 @@ class WorkflowPolicyComponent {
         this.changeRef.detectChanges();
         this.policyForm.businessCycle = this.restApiService?.getBusinessCycle();
         //this.showCreateDocuments = true;
-        this.getOverseersListWithPagination();
+        this.getUsersListWithPagination();
     }
     _initiateEditAPI() {
         this.getRCList();
@@ -38167,6 +38194,9 @@ class WorkflowPolicyComponent {
         this.addMoreLevels = false;
         this.activeSelector = '';
         this.pickerChanged.emit(false);
+        if (this.isPaginationEnabled) {
+            this.refreshPaginatedUsersList();
+        }
     }
     /**
      * Fetches Responsibility centers list
@@ -38195,9 +38225,11 @@ class WorkflowPolicyComponent {
                 this.usersList = res;
             }
             this.usersListLoaded = true;
+            this.checkWhetherAllListsLoaded();
         }, (err) => {
             console.error(err);
             this.usersListLoaded = true;
+            this.checkWhetherAllListsLoaded();
         });
     }
     // replace member_id value to my_member_id
@@ -38652,6 +38684,7 @@ class WorkflowPolicyComponent {
      * @param selectedItems contains the list of selected items from the list
      */
     saveSelectedList(type, selectedItems) {
+        console.log("Type:: ", type);
         switch (type) {
             case 'rc':
                 this.policyForm.selectedRCs = this.setList(this.rcList, selectedItems, 'item_id');
@@ -38775,6 +38808,7 @@ class WorkflowPolicyComponent {
                 }
                 this.policyForm.policy_access_owners = this.setList(this.assigneesList, accessIds, 'my_member_id');
                 this.refreshAllLists();
+                this.refreshPaginatedUsersList();
                 break;
             case 'isLinkedPolices':
                 this.policyForm.LinkedPolicies = this.listOfSelectedPolicies(selectedItems?.selectedPolicyList);
@@ -39233,7 +39267,7 @@ class WorkflowPolicyComponent {
             is_suggetion_enable: policy.acceptSuggestions ? 1 : 0,
             category_id_arr: this.returnIds(policy.selectedCategories, 'item_id'),
             approvers: approversData,
-            assignee_ids: this.returnIds(policy?.selectedAssignees, 'employee_id').map((id) => Number(id)),
+            assignee_ids: policy.selectedAllAttestors ? [] : this.returnIds(policy?.selectedAssignees, 'employee_id').map((id) => Number(id)),
             usergroup_ids: this.returnIds(policy.selectedGroupAssignee, '_id') ?? [],
             Is_approval: 0,
             associated_documents: policy.addAssociatedDocuments
@@ -39331,6 +39365,7 @@ class WorkflowPolicyComponent {
                 : policyAccessGroupsIds ?? [],
             displayOnPortal: policy.isPortalDisplayEnabled ?? false,
             linkedPolicies: [...new Set(policy.LinkedPolicies)],
+            selectedAllAttestors: policy.selectedAllAttestors ? 1 : 0
         };
         if (this.mode == 'CREATE') {
             this.policyService.submitPolicy(payload).subscribe((res) => {
@@ -39505,6 +39540,7 @@ class WorkflowPolicyComponent {
         }
     }
     populatePolicyForm(data, categoryIds) {
+        console.log("Data For edit:: ", data);
         const reviewerFiles = data.ReviewerAttachments.map((file) => {
             file.filename = file.name;
             file.filepath = file.file_path;
@@ -39622,6 +39658,7 @@ class WorkflowPolicyComponent {
                 : {};
         this.populateOptionalFields();
         this.loader = false;
+        this.policyForm.selectedAllAttestors = data.selectedAllAttestors ? true : false;
     }
     changeName(event) {
         let text = event;
@@ -39860,25 +39897,13 @@ class WorkflowPolicyComponent {
             return false;
         }
     }
-    getOverseersListWithPagination(event) {
-        console.log("Event:: ", event);
-        let page = event?.page || 1, searchKey = event?.searchKey.toLowerCase() || '', paginationType = 'medium';
+    getUsersListWithPagination(event) {
+        let page = event?.page || 1, searchKey = event?.searchKey.toLowerCase().trim() || '', paginationType = 'medium';
         this.paginatedUsersList['loading'] = true;
-        this.paginatedUsersList['searchKey'] = '';
-        // console.log("Page", page, 'Search Key:: ',searchKey, 'Pagination Type:: ', paginationType);
         this.organizationUserService.getOrganizationUsersWithPagination(page, searchKey, paginationType).subscribe((res) => {
             if (res?.success && res?.data) {
                 this.isPaginationEnabled = true;
-                this.paginatedUsersList = {
-                    users: res?.data?.users,
-                    total_pages: res?.data?.totalPages,
-                    total_items: res?.data?.totalUsers,
-                    loading: false,
-                    from: res?.data?.displayFrom,
-                    to: res?.data?.displayTo,
-                    searchKey: searchKey,
-                    total: res?.data?.totalUsers
-                };
+                this.setPaginationOptions(res?.data, searchKey);
             }
             this.usersListLoaded = true;
         }, (err) => {
@@ -39891,14 +39916,37 @@ class WorkflowPolicyComponent {
     }
     refreshPaginatedUsersList() {
         this.paginatedUsersList['searchKey'] = '';
-        this.getOverseersListWithPagination({ page: 1, searchKey: '' });
+        this.getUsersListWithPagination({ page: 1, searchKey: '' });
+    }
+    setPaginationOptions(data, searchKey) {
+        this.paginatedUsersList = {
+            users: data?.users,
+            total_pages: data?.totalPages,
+            total_items: data?.totalUsers,
+            loading: false,
+            from: data?.displayFrom,
+            to: data?.displayTo,
+            searchKey: searchKey,
+            total: data?.totalUsers
+        };
+    }
+    onAllAttestorsToggle(selected) {
+        this.policyForm.selectedAllAttestors = selected;
+        if (selected) {
+            // Deselect all currently selected assignees and groups
+            this.policyForm.selectedAssignees = [];
+            this.policyForm.selectedGroupAssignee = [];
+            // Keep the derived lists in sync
+            this.refreshAllLists();
+            this.refreshPaginatedUsersList();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowPolicyComponent, deps: [{ token: PolicyService }, { token: SnackBarService }, { token: UiKitService }, { token: AuthService$1 }, { token: ResponsibilityService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: FrequencyService }, { token: i1$1.PlatformLocation }, { token: i0.ChangeDetectorRef }, { token: RestApiService }, { token: CommonService }, { token: OrganizationUserService }, { token: OrganizationCommonService }, { token: ComplianceCommonService }, { token: IframeService }, { token: DateUtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WorkflowPolicyComponent, selector: "app-workflow-policy", inputs: { mode: "mode", policyId: "policyId", feature: "feature", convertFileData: "convertFileData", selectedCategory: "selectedCategory", isSendForAttestation: "isSendForAttestation", templateId: "templateId" }, outputs: { pickerChanged: "pickerChanged", showConfirmationAlert: "showConfirmationAlert", populateOption: "populateOption", disconnectRefresh: "disconnectRefresh", shiftToEditMode: "shiftToEditMode" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "formatEvidence", first: true, predicate: ["formatEvidence"], descendants: true }, { propertyName: "datePickerPopUp", first: true, predicate: ["datePicker"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- <p>workflow-policy works!</p> -->\n\n<ng-container *ngIf=\"!showCreateDocuments\">\n  <div class=\"workflow-policy\">\n    <!-- Policy Name -->\n    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\n        <img [src]=\"ASSETS.what\" alt=\"name\" *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\" />\n\n        <svg *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Policy Name <span class=\"required\">*</span>\n          </label>\n          <input type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name', true)\"\n            *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\n            (focusout)=\"activateSelector('name', false)\" [ngModel]=\"policyForm.policyName\"\n            (ngModelChange)=\"policyForm.policyName = changeName($event)\" placeholder=\"Name this policy\" />\n          <div class=\"selected\" *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\">\n            <div class=\"chip-container\">\n              <span class=\"value\">{{ policyForm.policyName }}</span>\n            </div>\n            <button class=\"edit\" (click)=\"activateSelector('name', true)\" type=\"button\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n\n          <p *ngIf=\"submitted && !policyForm.policyName.trim()\" [appScrollInView]=\"true\" class=\"error-message\">\n            Please enter a name for this policy.\n          </p>\n          <vcomply-editor [(ngModel)]=\"policyForm.policyNotes\" [editorConfig]=\"description\"></vcomply-editor>\n          <!-- <app-cs-switch\n            [(ngValue)]=\"policyForm.availableOnPortal\"\n            (ngValueChange)=\"availabilityOnPortal($event)\"\n          >\n            Do you want this policy to be available on the portal?\n            <i\n              class=\"icons\"\n              [appTooltip]=\"\n                '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.'\n              \"\n              placement=\"bottom-right\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe932;</i\n            >\n          </app-cs-switch>\n          <app-cs-switch\n            *ngIf=\"policyForm.availableOnPortal\"\n            [(ngValue)]=\"policyForm.acceptSuggestions\"\n          >\n            Accept suggestions\n            <i\n              class=\"icons\"\n              [appTooltip]=\"\n                'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n              \"\n              placement=\"bottom-right\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe932;</i\n            ></app-cs-switch> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Category -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'category' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedCategories?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedCategories?.length == 0 ||\n            activeSelector === 'category'\n          \" [src]=\"ASSETS.case_category\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedCategories?.length > 0 &&\n            activeSelector !== 'category'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Policy Category <span class=\"required\">*</span>\n          </label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedCategories?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('category', true)\"\n              placeholder=\"Select a category for this policy.\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedCategories?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"\n                  let category of policyForm?.selectedCategories?.slice(0, 1)\n                \">\n                <i (click)=\"remove('category', category)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"category.item_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ category.item_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                *ngIf=\"policyForm?.selectedCategories?.length > 1\" type=\"button\" appPopover (click)=\"category.popover()\"\n                placement=\"left\">\n                +{{ policyForm?.selectedCategories?.slice(1).length }}\n              </button>\n            </div>\n\n            <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\n                          [class.plus]=\"policyForm?.selectedCategories?.length>2\">\n                          <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\n                                  class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\n                              {{category.item_name}}</span>\n                          <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\n                              appPopover (click)=\"category.popover()\" placement=\"right\">+\n                              {{policyForm?.selectedCategories?.slice(2).length}}</button>\n                      </div> -->\n            <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\n              (click)=\"activateSelector('category', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #category [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let category of policyForm?.selectedCategories | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('category', category)\">&#xe90d;</i>\n                      {{ category.item_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <p *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\" [appScrollInView]=\"true\"\n            class=\"error-message\">\n            Please select the category for this policy.\n          </p>\n        </div>\n\n        <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\n          <ng-container *ngFor=\"let tag of policyForm?.customTags\">\n            <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\n            <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{ tag.tagname }}\" />\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <!-- Effective Date -->\n    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"false\">\n        <img [src]=\"ASSETS.when\" alt=\"\" />\n\n        <svg *ngIf=\"false\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Effective Date</label>\n          <div class=\"date-time-picker\">\n            <div class=\"picker-group\">\n              <input type=\"text\" readonly placeholder=\"Select the effective date of the policy.\"\n                [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\" (click)=\"openDatePicker()\"\n                id=\"effective-date\" />\n              <i class=\"icons\">&#xe92d;</i>\n              <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\n                [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n              </dp-date-picker>\n              <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Owner -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'owners'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'owners' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\n        <img *ngIf=\"!policyForm.policy_owners?.length\" [src]=\"ASSETS.im_creating\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm.policy_owners?.length\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\n          </div>\n          <div *ngIf=\"!policyForm.policy_owners?.length\" (click)=\"activateSelector('owners', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select owners for this policy.\n            </div>\n          </div>\n\n          <div *ngIf=\"policyForm.policy_owners?.length\"\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"vx-d-flex vx-align-center\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.policy_owners[0]?.member_name }}</span>\n\n                <button *ngIf=\"policyForm?.policy_owners?.length > 1\"\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"policyUserPopover.popover()\" placement=\"left\">\n                  + {{ policyForm?.policy_owners.length - 1 }}\n                </button>\n              </div>\n              <div *ngIf=\"false\" class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\">\n                &\n              </div>\n              <div *ngIf=\"false\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"'Samantha Jones'\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Samantha Jones</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"policyGroupPopover.popover()\" placement=\"right\">\n                  +4\n                </button>\n              </div>\n              <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\n                <div class=\"wf-action-list\">\n                  <ul class=\"action-item\">\n                    <li *ngFor=\"\n                        let owner of policyForm?.policy_owners | slice : 1;\n                        let i = index\n                      \">\n                      <div class=\"avatar-card\">\n                        <span class=\"value\" [appTooltip]=\"owner?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                          type=\"black\" [tooltipMandatory]=\"false\">\n                          <i (click)=\"remove('owners', owner, i + 1)\" class=\"icons\">&#xe90d;</i>\n                          {{ owner?.member_name }}\n                        </span>\n                      </div>\n                    </li>\n                  </ul>\n                </div>\n              </app-popover>\n              <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\n                <div class=\"wf-action-list\">\n                  <ul class=\"action-item\">\n                    <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n                      <div class=\"avatar-card\">\n                        <span class=\"value\" [appTooltip]=\"'Harshvardhan Kariwala'\" placement=\"bottom-left\" delay=\"0\"\n                          type=\"black\" [tooltipMandatory]=\"false\">\n                          <i class=\"icons\">&#xe90d;</i>\n                          Harshvardhan Kariwala\n                        </span>\n                      </div>\n                    </li>\n                  </ul>\n                </div>\n              </app-popover>\n            </div>\n            <button (click)=\"activateSelector('owners', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n          <p *ngIf=\"submitted && !policyForm?.policy_owners?.length\" [appScrollInView]=\"true\" class=\"error-message\">\n            Select owners for this policy.\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Review -->\n    <div class=\"form-group-row\" [class.active]=\"\n        activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\n      \" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'reviewer' &&\n        activeSelector !== 'reviewerFrequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\n        <img *ngIf=\"!policyForm?.addReviewers\" [src]=\"ASSETS.reviewer\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.addReviewers\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">REVIEW</label>\n          <div class=\"reviewSelection vx-p-3 vx-pb-0\" [class.disabled]=\"\n              activeSelector && sideSelectorElements.includes(activeSelector)\n            \">\n            <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\n              Does this policy need to be reviewed?\n            </div>\n            <app-cs-radio name=\"review-type\" [checked]=\"policyForm?.addReviewers\" (checkedEvent)=\"typeSelected(true)\">\n              <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n                YES\n              </div>\n            </app-cs-radio>\n            <app-cs-radio name=\"review-type\" [checked]=\"!policyForm?.addReviewers\" (checkedEvent)=\"typeSelected(false)\">\n              <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n                NO\n              </div>\n            </app-cs-radio>\n          </div>\n\n          <ng-container *ngIf=\"policyForm?.addReviewers\">\n            <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\n            <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n              *ngIf=\"policyForm?.selectedReviewers?.length == 0\" [appScrollInView]=\"scrollToBottom\"\n              [class.active]=\"activeSelector === 'reviewer'\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewer' &&\n                sideSelectorElements.includes(activeSelector)\n              \" (click)=\"activateSelector('reviewer', true)\">\n              <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                Select the person responsible for reviewing this policy\n              </div>\n            </div>\n\n            <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n              *ngIf=\"policyForm?.selectedReviewers?.length > 0\" [class.active]=\"activeSelector === 'reviewer'\"\n              [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewer' &&\n                sideSelectorElements.includes(activeSelector)\n              \">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\">\n                <i (click)=\"remove('reviewer', reviewer)\"\n                  class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"'Samantha Jones'\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                  {{ reviewer?.member_name }}</span>\n              </div>\n              <button\n                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\"\n                *ngIf=\"activeSelector !== 'reviewer'\" (click)=\"activateSelector('reviewer', true)\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n            <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\n            <div *ngIf=\"policyForm?.review_frequency_details == ''\"\n              class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n              [class.active]=\"activeSelector === 'reviewerFrequency'\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewerFrequency' &&\n                sideSelectorElements.includes(activeSelector)\n              \" (click)=\"activateSelector('reviewerFrequency', true)\">\n              <div class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                When does this policy needs to be reviewed?\n              </div>\n              <div (click)=\"activateSelector('reviewerFrequency', true)\"\n                class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\n                SET A FREQUENCY\n              </div>\n            </div>\n\n            <div *ngIf=\"policyForm?.review_frequency_details != ''\"\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewerFrequency' &&\n                sideSelectorElements.includes(activeSelector)\n              \" [class.active]=\"activeSelector === 'reviewerFrequency'\">\n              <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [appTooltip]=\"reviewerFrequencyPlaceholder\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                {{ reviewerFrequencyPlaceholder }}\n              </div>\n              <button *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n                (click)=\"activateSelector('reviewerFrequency', true)\"\n                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\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n            <p *ngIf=\"\n                submitted &&\n                policyForm?.selectedReviewers?.length > 0 &&\n                !policyForm?.review_frequency_details\n              \" class=\"error-message\" [appScrollInView]=\"true\">\n              Select the review schedule for this policy.\n            </p>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <!-- New Approval Workflow -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'approvers'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'approvers' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedApprovers?.length == 0 ||\n            activeSelector === 'approvers'\n          \" [src]=\"ASSETS.approval\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedApprovers?.length > 0 &&\n            activeSelector !== 'approvers'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">APPROVAL <span class=\"required\">*</span></label>\n            <button (click)=\"\n                createApprovalWorkflow(); activateSelector('approvers', true)\n              \" [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n              class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\">\n              CREATE A NEW APPROVAL WORKFLOW\n            </button>\n          </div>\n          <div *ngIf=\"\n              selectedWorkflow?.length === 0 ||\n              !selectedWorkflow[0]?.workflow_name\n            \" (click)=\"\n              clickApprovalWorkflow(true); activateSelector('approvers', true)\n            \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select the approval workflow for this policy\n            </div>\n          </div>\n          <div *ngIf=\"\n              selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\n            \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\">\n            <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i (click)=\"removeWorkflow()\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  selectedWorkflow[0]?.workflow_name }}</span>\n              </div>\n              <button (click)=\"editWorkflow(selectedWorkflow[0])\"\n                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\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\n            <div *ngFor=\"\n                let approval of selectedWorkflow[0]?.approval_workflow;\n                let approvalIndex = index\n              \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\">\n              <div class=\"vx-d-flex vx-align-center\">\n                <div class=\"level-left vx-d-flex vx-align-center\">\n                  <div class=\"vx-d-block\">\n                    <div class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\" [appTooltip]=\"\n                        approval?.alias_name\n                          ? approval?.alias_name\n                          : approval?.level1\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                      {{\n                      approval?.alias_name\n                      ? approval?.alias_name\n                      : approval?.level1\n                      }}\n                    </div>\n                    <div class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\">\n                      {{\n                      approval?.type === \"ROUNDROBIN\"\n                      ? \"ROUND-ROBIN\"\n                      : approval?.type === \"ANYONE\"\n                      ? \"ANY ONE\"\n                      : approval?.type\n                      }}\n                    </div>\n                  </div>\n                </div>\n                <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\">\n                  <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                    >&#xe9ae;</i\n                  > -->\n                  <div *ngIf=\"\n                      approval?.type?.toLowerCase() === 'sequential' &&\n                      approval?.approvers?.length < 2\n                    \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\n                  </div>\n                  <div *ngIf=\"\n                      approval?.approvers?.length > 1 &&\n                      approval?.type?.toLowerCase() === 'sequential'\n                    \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    1\n                  </div>\n                  <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"approval?.approvers[0]?.member_name\"\n                    placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                    approval?.approvers[0]?.member_name }}</span>\n                  <button *ngIf=\"approval?.approvers?.length > 1\"\n                    class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                    appPopover (click)=\"workflowPopover.popover()\" placement=\"right\">\n                    +{{ approval?.approvers?.length - 1 }}\n                  </button>\n                </div>\n                <app-popover #workflowPopover [dontCloseonClick]=\"true\">\n                  <div class=\"wf-action-list\">\n                    <ul class=\"action-item\">\n                      <li *ngFor=\"\n                          let approver of approval?.approvers | slice : 1;\n                          let approvalIndex = index\n                        \">\n                        <div class=\"avatar-card\">\n                          <span class=\"value\" [appTooltip]=\"approver?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                            type=\"black\" [tooltipMandatory]=\"false\">\n                            <!-- <i class=\"icons\">&#xe90d;</i> -->\n                            <span *ngIf=\"\n                                approval?.type?.toLowerCase() === 'sequential'\n                              \"\n                              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">{{\n                              approvalIndex + 1 ===\n                              approval?.approvers?.length - 1\n                              ? \"Final\"\n                              : approvalIndex + 2\n                              }}</span>\n                            {{ approver?.member_name }}\n                          </span>\n                        </div>\n                      </li>\n                    </ul>\n                  </div>\n                </app-popover>\n              </div>\n\n              <!-- <div class=\"vx-d-flex vx-align-center\">\n                <button (click)=\"editLevelClicked(approval,approvalIndex)\"\n                  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\"\n                >\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                </button>\n                <button (click)=\"deleteLevel(approvalIndex)\"\n                  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\"\n                >\n                  <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\n                </button>\n              </div> -->\n            </div>\n          </ng-container>\n          <p *ngIf=\"\n              submitted &&\n              !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\n              !policyApprovalFlag &&\n              !policyForm?.selectedApprovers[0]?.approvers?.length\n            \" [appScrollInView]=\"true\" class=\"error-message\">\n            Select or create an approval workflow for this policy.\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Access -->\n    <div *ngIf=\"true\" class=\"form-group-row\" [class.active]=\"activeSelector === 'policyAccess'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'policyAccess' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"true\">\n        <img *ngIf=\"\n            !policyForm?.policy_access_owners?.length &&\n            !policyForm?.policy_access_groups?.length &&\n            !policyForm?.availableOnPortal\n          \" [src]=\"ASSETS.lock_scope\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.policy_access_owners?.length ||\n            policyForm?.policy_access_groups?.length ||\n            policyForm?.availableOnPortal\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">POLICY PORTAL ACCESS</label>\n          </div>\n          <div *ngIf=\"\n              !policyForm?.policy_access_owners?.length &&\n              !policyForm?.policy_access_groups?.length &&\n              !policyForm?.availableOnPortal\n            \" (click)=\"activateSelector('policyAccess', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Who should be able to view this policy?\n            </div>\n          </div>\n\n          <ng-container *ngIf=\"!policyForm?.availableOnPortal\">\n            <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3\" *ngIf=\"\n                policyForm?.policy_access_owners?.length ||\n                policyForm?.policy_access_groups?.length\n              \">\n              <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\">\n                <div class=\"vx-d-flex vx-align-center\">\n                  <div *ngIf=\"policyForm?.policy_access_owners?.length\"\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                      *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"\n                        remove(\n                          'policyAccess',\n                          policyForm?.policy_access_owners[0]\n                        )\n                      \">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                        policyForm?.policy_access_owners[0]?.employee_name\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                      policyForm?.policy_access_owners[0]?.employee_name\n                      }}</span>\n                    <button *ngIf=\"policyForm?.policy_access_owners?.length > 1\"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                      appPopover (click)=\"policyAccessPopover.popover()\" placement=\"left\">\n                      +{{ policyForm?.policy_access_owners.length - 1 }}\n                    </button>\n                  </div>\n\n                  <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                      policyForm?.policy_access_owners.length > 0 &&\n                      policyForm?.policy_access_groups.length > 0\n                    \">\n                    &\n                  </div>\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngIf=\"policyForm?.policy_access_groups.length > 0\">\n                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                      *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"\n                        remove(\n                          'accessGroup',\n                          policyForm?.policy_access_groups[0]\n                        )\n                      \">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                        policyForm?.policy_access_groups[0]?.group_name\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                      policyForm?.policy_access_groups[0]?.group_name\n                      }}</span>\n                    <button\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"accessGroup.popover()\" placement=\"right\"\n                      *ngIf=\"policyForm?.policy_access_groups.length > 1\">\n                      +{{ policyForm?.policy_access_groups.length - 1 }}\n                    </button>\n                  </div>\n\n                  <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let user of policyForm?.policy_access_owners\n                              | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\" [appTooltip]=\"user?.employee_name\" placement=\"bottom-left\" delay=\"0\"\n                              type=\"black\" [tooltipMandatory]=\"false\">\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\"\n                                (click)=\"remove('policyAccess', user)\">&#xe90d;</i>\n                              {{ user?.employee_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                  <app-popover #accessGroup [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let data of policyForm?.policy_access_groups\n                              | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\">\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\"\n                                (click)=\"remove('accessGroup', data)\">&#xe90d;</i>\n                              {{ data?.group_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </div>\n\n                <button (click)=\"activateSelector('policyAccess', true)\"\n                  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\">\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                </button>\n              </div>\n\n              <!-- <div class=\"vx-mt-4 vx-mb-2\">\n                <app-cs-radio\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 0\" (checkedEvent)=\"setAccessField(0)\"\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\n                    Everyone who has access to this Policy Category\n                  </div></app-cs-radio\n                >\n                <app-cs-radio\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 1\" (checkedEvent)=\"setAccessField(1)\"\n                class=\"vx-mt-1\"\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\n                    Select users/groups\n                  </div></app-cs-radio\n                >\n              </div> -->\n            </div>\n          </ng-container>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n            *ngIf=\"policyForm?.availableOnPortal\">\n            <span class=\"vx-fs-13 vx-paragraph-txt\">Visible to All Current & Future Users</span>\n\n            <button (click)=\"activateSelector('policyAccess', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n\n          <div class=\"vx-mt-2\">\n            <app-cs-switch *ngIf=\"\n                policyForm.availableOnPortal ||\n                policyForm?.policy_access_owners?.length ||\n                policyForm?.policy_access_groups?.length\n              \" [(ngValue)]=\"policyForm.acceptSuggestions\">ACCEPT SUGGESTIONS\n              <i class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\" [appTooltip]=\"\n                  'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n                \" placement=\"bottom-right\" delay=\"0\" type=\"white\"\n                [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Approval Workflow -->\n    <div class=\"form-group-row\" *ngIf=\"false\" [class.active]=\"activeSelector === 'approvers'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'approvers' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedApprovers?.length == 0 ||\n            activeSelector === 'approvers'\n          \" [src]=\"ASSETS.approval\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedApprovers?.length > 0 &&\n            activeSelector !== 'approvers'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group approval-workflow\" [class.disabled]=\"policyApprovalFlag !== 0\">\n          <label class=\"vx-control-panel\">\n            Approval workflow <span class=\"required\">*</span>\n            <button (click)=\"\n                activateSelector('approvers', true);\n                addMoreLevels = true;\n                workflowType = 'SEQUENTIAL'\n              \" class=\"button\">\n              Create a new Approval Workflow\n            </button>\n          </label>\n          <div class=\"select\" [class.disabled]=\"approverWorkFlowList?.length == 0\" *ngIf=\"\n              policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\n              policyForm?.selectedApprovers.length == 0\n            \">\n            <cs-select [ngModel]=\"selectedApprovalWorkflow\" (ngModelChange)=\"selectedWorkflowChange($event)\"\n              [placeholder]=\"'Select approval workflow for this policy'\" name=\"selectedApprovalWorkflow\"\n              [setMaxWidth]=\"true\">\n              <cs-option *ngFor=\"let data of approverWorkFlowList\" [value]=\"data\">\n                {{ data.workflow_name }}\n              </cs-option>\n              <cs-option [value]=\"-1\" (click)=\"\n                  activateSelector('approvers', true);\n                  addMoreLevels = true;\n                  workflowType = 'SEQUENTIAL'\n                \">Create a new approval workflow</cs-option>\n            </cs-select>\n          </div>\n          <ng-container *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\">\n            <div class=\"selected\" *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\">\n              <div class=\"workflow-label\">\n                <p class=\"title\">Level {{ i + 1 }}</p>\n                <p class=\"description\">{{ level.name }}</p>\n              </div>\n              <div class=\"vx-d-flex vx-align-center\">\n                <div class=\"chip-container\">\n                  <span class=\"chip\" *ngFor=\"\n                      let approver of level.approvers.slice(0, 1);\n                      let j = index\n                    \"><i class=\"icons\" (click)=\"remove('approvers', approver, i)\">&#xe90d;</i>\n                    <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\n                      j + 1\n                      }}</span>{{ approver.member_name }}</span>\n\n                  <button class=\"count\" *ngIf=\"level.approvers?.length > 1\" type=\"button\" appPopover\n                    (click)=\"labelName.popover()\" placement=\"left\">\n                    +\n\n                    {{ level.approvers.slice(1).length }}\n                  </button>\n                  <app-popover #labelName [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let approver of level.approvers | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\">\n                              <i class=\"icons\" (click)=\"remove('approvers', approver, i)\">&#xe90d;</i>\n                              <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">\n                                {{\n                                j == level.approvers.slice(1).length - 1\n                                ? \"Final\"\n                                : j + 2\n                                }}\n                              </span>\n                              {{ approver.member_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </div>\n                <button class=\"edit\" type=\"button\" (click)=\"\n                    activateSelector('approvers', true, level.name);\n                    approversListIndex = i\n                  \">\n                  <i class=\"icons\">&#xe9ba;</i>Edit\n                </button>\n                <button class=\"close-btn\" (click)=\"remove('workflowLevel', level, i)\">\n                  <i class=\"icons\">&#xe90d;</i>\n                </button>\n              </div>\n            </div>\n          </ng-container>\n\n          <p *ngIf=\"\n              submitted &&\n              !policyForm?.selectedApprovers?.length &&\n              !policyApprovalFlag\n            \" [appScrollInView]=\"true\" class=\"error-message\">\n            Select or create an approval workflow for this policy.\n          </p>\n\n          <label class=\"vx-control-panel\" *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"><button\n              class=\"button\" (click)=\"\n                activateSelector('approvers', true);\n                addMoreLevels = true;\n                workflowType = 'SEQUENTIAL'\n              \">\n              + Add More Levels\n            </button></label>\n        </div>\n      </div>\n    </div>\n\n    <!-- Who / now Attestation -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'assignees' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedAssignees?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedAssignees?.length == 0 ||\n            activeSelector === 'assignees'\n          \" [src]=\"ASSETS.case_assignees\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedAssignees?.length > 0 &&\n            activeSelector !== 'assignees'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Attestation</label>\n          <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"\n              (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\n              (policyForm?.selectedAssignees?.length == 0 &&\n                groupEnabled &&\n                policyForm?.selectedGroupAssignee.length == 0)\n            \" (click)=\"activateSelector('assignees', true)\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select the persons responsible for attesting this policy.\n            </div>\n          </div>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\" *ngIf=\"\n              policyForm?.selectedAssignees?.length > 0 ||\n              policyForm?.selectedGroupAssignee?.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"\n                  let assignee of policyForm?.selectedAssignees?.slice(0, 1)\n                \">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('assignees', assignee)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assignee.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ assignee.employee_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"assigneePopover.popover()\" placement=\"left\"\n                *ngIf=\"policyForm?.selectedAssignees?.length > 1\">\n                +{{ policyForm?.selectedAssignees?.slice(1).length }}\n              </button>\n            </div>\n            <ng-container *ngIf=\"groupEnabled\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove('assignees', policyForm?.selectedAssignees[0])\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\"\n                  [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\"\n                  type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.selectedAssignees[0]?.employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"UserPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.selectedAssignees.length > 1\">\n                  +{{ policyForm?.selectedAssignees.length - 1 }}\n                </button>\n              </div>\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.selectedAssignees.length > 0 &&\n                  policyForm?.selectedGroupAssignee.length > 0\n                \">\n                &\n              </div>\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove(\n                      'groupAssignees',\n                      policyForm?.selectedGroupAssignee[0]\n                    )\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                    policyForm?.selectedGroupAssignee[0]?.group_name\n                  \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.selectedGroupAssignee[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"group.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\">\n                  +{{ policyForm?.selectedGroupAssignee.length - 1 }}\n                </button>\n              </div>\n            </ng-container>\n            <button\n              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\"\n              (click)=\"activateSelector('assignees', true)\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n\n          <p *ngIf=\"\n              submitted &&\n              ((policyForm?.selectedAssignees?.length == 0 &&\n                policyForm?.frequency_details &&\n                !groupEnabled) ||\n                (policyForm?.selectedAssignees?.length == 0 &&\n                  policyForm.selectedGroupAssignee.length == 0 &&\n                  policyForm?.frequency_details &&\n                  groupEnabled) ||\n                (isSendForAttestation &&\n                  policyForm?.selectedAssignees?.length === 0))\n            \" id=\"whovalidatemsg\" class=\"error-message\" [appScrollInView]=\"true\">\n            Select the persons required to attest to this Policy.\n          </p>\n          <app-cs-switch [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\n            [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\" class=\"who-toggle\">THIS POLICY REQUIRES\n            E-SIGNATURE FOR ATTESTATION\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, the readers will be required to attest this policy using their electronic signature.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n          <app-popover #assigneePopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\">&#xe90d;</i>\n                      {{ assignee.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #UserPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\">&#xe90d;</i>\n                      {{ assignee.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #group [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.selectedGroupAssignee | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('groupAssignees', data)\">&#xe90d;</i>\n                      {{ data.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <!-- overseer -->\n          <app-popover #overseerPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let overseer of policyForm?.CCEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\">&#xe90d;</i>\n                      {{ overseer?.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.CCGroupEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\">&#xe90d;</i>\n                      {{ data?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <!-- overseer end -->\n\n          <!-- overseer fail start -->\n          <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let overseer of policyForm?.CCFailEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccFail', overseer)\">&#xe90d;</i>\n                      {{ overseer?.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.CCFailEmailGroup | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccGroupFailEmail', data)\">&#xe90d;</i>\n                      {{ data?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <!-- overseer fail end -->\n        </div>\n      </div>\n    </div>\n\n    <!-- When -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'frequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">When?</label>\n\n          <div *ngIf=\"policyForm?.frequency_details == ''\" class=\"select button-sec\">\n            <div class=\"custom-input frequency-custom-input\" (click)=\"activateSelector('frequency', true)\">\n              {{ frequencyPlaceholder }}\n            </div>\n\n            <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n              Set A frequency\n            </button>\n          </div>\n          <!-- <div\n            *ngIf=\"policyForm?.frequency_details != ''\"\n            class=\"selected button-sec\"\n          > -->\n          <div *ngIf=\"policyForm?.frequency_details != ''\"\n            class=\"selected button-sec selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i (click)=\"remove('frequency', rc)\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ frequencyPlaceholder }}</span>\n            </div>\n            <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\n              (click)=\"activateSelector('frequency', true)\">\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button>\n            <!-- </div>\n            <span class=\"chip\">{{ frequencyPlaceholder }}</span>\n            <button\n              *ngIf=\"activeSelector !== 'frequency'\"\n              type=\"button\"\n              class=\"edit\"\n              (click)=\"activateSelector('frequency', true)\"\n            >\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button> -->\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              ((policyForm?.selectedAssignees?.length > 0 &&\n                !policyForm?.frequency_details &&\n                !groupEnabled) ||\n                ((policyForm?.selectedAssignees?.length > 0 ||\n                  policyForm?.selectedGroupAssignee?.length > 0) &&\n                  !policyForm?.frequency_details &&\n                  groupEnabled))\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select an attestation schedule for this policy.\n          </p>\n\n          <p *ngIf=\"submitted && policyForm?.frequency_details && policyForm?.selectedAssignees?.length > 0 && isPastDate\"\n            class=\"error-message\">\n            Set a future date.\n          </p>\n\n          <!-- <label class=\"vx-control-panel\">Effective Date</label>\n                  <div class=\"date-time-picker\">\n                      <div class=\"picker-group\">\n                          <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\n                              [value]=\"policyForm.policyDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\n                          <i class=\"icons\">&#xe92d;</i>\n                          <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\n                              [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n                          </dp-date-picker>\n                          <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n                      </div>\n                  </div> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Checkpoints / Assessment of Understanding -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"true\"\n      [class.active]=\"activeSelector === 'checkpoints'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'checkpoints' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Assessment of Understanding\n            <!-- <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n          </label>\n          <div class=\"select\" *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\n            (click)=\"activateSelector('checkpoints', true)\">\n            <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\n            <div class=\"custom-input\">\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\n              of the policy.\n            </div>\n          </div>\n          <div class=\"selected\" *ngIf=\"policyForm?.checkpointDetails?.length > 0\">\n            <!-- <div class=\"chip-container\">\n                      <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\n\n                      <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\n\n                      <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\n\n                    </div> -->\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('checkpoints', policyForm?.checkpointDetails)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\">{{\n                policyForm?.checkpointDetails?.length +\n                (policyForm?.checkpointDetails?.length > 1\n                ? \" Questions\"\n                : \" Question\")\n                }}</span>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\n                  <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                          <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\n                              <div class=\"avatar-card\">\n                                  <span class=\"value\">\n                                      <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\n                                      {{ checkpoint?.question }}\n                                  </span>\n                              </div>\n                          </li>\n                      </ul>\n                  </div>\n              </app-popover> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Risk Classification -->\n    <div class=\"form-group-row\" *ngIf=\"showRiskClassification && false\"\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\n        <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!policyForm?.riskRating\" />\n\n        <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"policyForm?.riskRating\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Risk Classification</label>\n          <div class=\"classification\">\n            <label class=\"low\" *ngFor=\"let class of riskClassification\" [ngClass]=\"[class.class]\">\n              <input type=\"radio\" name=\"classification\" [value]=\"class.value\"\n                [checked]=\"policyForm?.riskRating === class.value\" [(ngModel)]=\"policyForm.riskRating\" />\n              <span>{{ class.name }}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Responsibility Center -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addResponsibilityCenters\"\n      [class.active]=\"activeSelector === 'rc'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'rc' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\n          \" [src]=\"ASSETS.responsibility_center\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Responsibility Center</label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('rc', true)\"\n              placeholder=\"Select Responsibility Center(s) that this policy relates to.\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                appPopover (click)=\"rcPopover.popover()\" placement=\"left\" *ngIf=\"policyForm?.selectedRCs?.length > 1\">\n                +{{ policyForm?.selectedRCs?.slice(1).length }}\n              </button>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('rc', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #rcPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let rc of policyForm?.selectedRCs | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                      {{ rc.item_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n\n    <!-- Version -->\n    <div *ngIf=\"policyForm.addVersion\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.disabled]=\"\n        activeSelector && sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\n        <img [src]=\"ASSETS.associated_risks\" alt=\"name\" *ngIf=\"!policyForm.policy_version\" />\n\n        <svg *ngIf=\"policyForm.policy_version\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">VERSION</label>\n          <input [(ngModel)]=\"policyForm.policy_version\" (change)=\"onVersion($event)\" type=\"text\"\n            placeholder=\"Specify the policy version.\" />\n          <p *ngIf=\"!isVersionValid\" class=\"error-message\" [appScrollInView]=\"true\">\n            {{ versionErrorMessage }}\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Reviewer -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addReviewers && false\"\n      [class.active]=\"activeSelector === 'reviewer'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'reviewer' &&\n        activeSelector !== 'reviewerFrequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedReviewers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedReviewers?.length == 0 ||\n            activeSelector === 'reviewer'\n          \" [src]=\"ASSETS.reviewer\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedReviewers?.length > 0 &&\n            activeSelector !== 'reviewer'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Reviewer </label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedReviewers?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('reviewer', true)\"\n              placeholder=\"Select the person responsible for reviewing this policy\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedReviewers?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let reviewer of policyForm?.selectedReviewers\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('reviewer', reviewer)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ reviewer.member_name }}</span>\n              </ng-container>\n            </div>\n\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              policyForm?.selectedReviewers?.length == 0 &&\n              policyForm?.review_frequency_details\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select a reviewer for this policy.\n          </p>\n\n          <label class=\"vx-control-panel\">When? </label>\n\n          <div *ngIf=\"policyForm?.review_frequency_details == ''\" class=\"select button-sec\">\n            <input type=\"text\" (click)=\"activateSelector('reviewerFrequency', true)\"\n              [placeholder]=\"reviewerFrequencyPlaceholder\" readonly />\n            <button (click)=\"activateSelector('reviewerFrequency', true)\" type=\"button\">\n              Set A frequency\n            </button>\n          </div>\n          <div *ngIf=\"policyForm?.review_frequency_details != ''\" class=\"selected button-sec\">\n            <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\n            <button *ngIf=\"activeSelector !== 'reviewerFrequency'\" type=\"button\" class=\"edit\"\n              (click)=\"activateSelector('reviewerFrequency', true)\">\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button>\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              policyForm?.selectedReviewers?.length > 0 &&\n              !policyForm?.review_frequency_details\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select the review schedule for this policy.\n          </p>\n\n          <app-format-and-evidence (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\" #formatEvidence\n            [mode]=\"'policyReviewer'\" [organization_id]=\"organization_id\"\n            [formatEvidanceData]=\"policyForm?.documentsAndLinks\">\n          </app-format-and-evidence>\n        </div>\n      </div>\n    </div>\n\n    <!-- Overseer -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addOverseers\" [class.active]=\"\n        activeSelector === 'ccEmail' || activeSelector === 'ccFail'\n      \" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'ccEmail' &&\n        activeSelector !== 'ccFail' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"\n          policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\n        \">\n        <img *ngIf=\"\n            (policyForm?.CCFailEmail?.length == 0 &&\n              policyForm?.CCEmail?.length == 0) ||\n            activeSelector === 'ccEmail' ||\n            activeSelector === 'ccFail'\n          \" [src]=\"ASSETS.oversight\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            (policyForm?.CCFailEmail?.length > 0 ||\n              policyForm?.CCEmail?.length > 0) &&\n            activeSelector !== 'ccEmail' &&\n            activeSelector !== 'ccFail'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Oversight</label>\n          <div class=\"select\" *ngIf=\"\n              policyForm?.CCEmail?.length == 0 &&\n              policyForm?.CCGroupEmail.length == 0\n            \">\n            <input type=\"text\" (click)=\"activateSelector('ccEmail', true)\"\n              placeholder=\"Who should have oversight of this policy?\" readonly />\n          </div>\n          <div class=\"selected\" *ngIf=\"\n              policyForm?.CCEmail?.length > 0 ||\n              policyForm?.CCGroupEmail.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccEmail', ccEmail)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"ccEmail.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ ccEmail.employee_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"ccEmailPopover.popover()\" placement=\"left\" *ngIf=\"policyForm?.CCEmail?.length > 1\">\n                +{{ policyForm?.CCEmail?.slice(1).length }}\n              </button>\n            </div>\n\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCEmail[0].employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"overseerPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCEmail?.length > 1\">\n                  +{{ policyForm?.CCEmail?.length - 1 }}\n                </button>\n              </div>\n\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.CCEmail.length > 0 &&\n                  policyForm?.CCGroupEmail?.length > 0\n                \">\n                &\n              </div>\n\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.CCGroupEmail.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCGroupEmail[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"overseerGroup.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCGroupEmail?.length > 1\">\n                  +{{ policyForm?.CCGroupEmail?.length - 1 }}\n                </button>\n              </div>\n            </div>\n\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccEmail', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n\n          <div class=\"select\" *ngIf=\"\n              policyForm?.CCFailEmail?.length == 0 &&\n              policyForm?.CCFailEmailGroup?.length == 0\n            \">\n            <input type=\"text\" (click)=\"activateSelector('ccFail', true)\"\n              placeholder=\"Who should be notified if the policy is not attested on time?\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"\n              policyForm?.CCFailEmail?.length > 0 ||\n              policyForm?.CCFailEmailGroup?.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('ccFail', ccFail)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"ccFail.employee_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ ccFail.employee_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"ccFailPopover.popover()\" placement=\"right\"\n                *ngIf=\"policyForm?.CCFailEmail?.length > 1\">\n                +{{ policyForm?.CCFailEmail?.slice(1).length }}\n              </button>\n            </div>\n\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCFailEmail[0]?.employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"overseerFailPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCFailEmail?.length > 1\">\n                  +{{ policyForm?.CCFailEmail?.length - 1 }}\n                </button>\n              </div>\n\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.CCFailEmail?.length > 0 &&\n                  policyForm?.CCFailEmailGroup?.length > 0\n                \">\n                &\n              </div>\n\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCFailEmailGroup[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"overseerFailGroup.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\">\n                  +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\n                </button>\n              </div>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccFail', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let ccEmail of policyForm?.CCEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\">&#xe90d;</i>\n                      {{ ccEmail.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let ccFail of policyForm?.CCFailEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\">&#xe90d;</i>\n                      {{ ccFail.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n\n    <!-- Related Documents -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addAssociatedDocuments\"\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\">\n        <img *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\" [src]=\"ASSETS.format_evidence\" alt=\"im\" />\n\n        <svg *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RELATED DOCUMENTS</label>\n          <app-format-and-evidence (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\" [mode]=\"'policy'\"\n            [organization_id]=\"organization_id\"\n            [formatEvidanceData]=\"policyForm?.associatedDocuments\"></app-format-and-evidence>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Programs & Responsibilities -->\n    <div *ngIf=\"policyForm?.addLinkProgram\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === 'linkProgram'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'linkProgram' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"\n          policyForm?.programSelectedValues?.program?.category_id\n        \">\n        <img *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\" [src]=\"ASSETS.link_items\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK PROGRAMS & RESPONSIBILITIES</label>\n          <div *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n            (click)=\"activateSelector('linkProgram', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select Programs & responsibilities that are<br />associated with\n              this policy.\n            </div>\n          </div>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n            *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i (click)=\"\n                  remove('linkProgram', policyForm?.programSelectedValues)\n                \" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\"\n                [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\" placement=\"bottom-left\" delay=\"0\"\n                type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.programSelectedValues?.program?.name }}</span>\n              <!-- <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                appPopover\n                (click)=\"programResponsibilityPopover.popover()\"\n                placement=\"left\"\n              >\n                +4\n              </button> -->\n            </div>\n            <app-popover #programResponsibilityPopover [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\" [appTooltip]=\"\n                          'Reporting information security weaknesses'\n                        \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                        <i class=\"icons\">&#xe90d;</i>\n                        Reporting information security weaknesses\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n            <button\n              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\"\n              (click)=\"activateSelector('linkProgram', true)\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Assessment -->\n    <div *ngIf=\"policyForm.addLinkAssessment\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === 'isAssessment'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'isAssessment' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\n        <img *ngIf=\"!policyForm?.assessment?.length\" [src]=\"ASSETS.assessments\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.assessment?.length\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK ASSESSMENTS</label>\n          <div *ngIf=\"policyForm?.assessment?.length === 0\" (click)=\"activateSelector('isAssessment', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select assessments that are associated with this<br />policy.\n            </div>\n          </div>\n\n          <div *ngIf=\"policyForm?.assessment?.length > 0\"\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                policyForm.assessment[0]?.assessmentDetails?.assessment_name\n                }}</span>\n            </div>\n            <app-popover #programResponsibilityPopover [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"let assessment of policyForm.assessment | slice : 1\">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\" [appTooltip]=\"\n                          assessment?.assessmentDetails?.assessment_name\n                        \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                        <i class=\"icons\">&#xe90d;</i>\n                        {{ assessment?.assessmentDetails?.assessment_name }}\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n            <button (click)=\"activateSelector('isAssessment', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Related Polices -->\n\n    <div *ngIf=\"policyForm.addLinkPolicies\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === CONSTANTS.LINK_POLICY\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'isLinkedPolices' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"SelectedListOfPolicies\">\n        <img *ngIf=\"!SelectedListOfPolicies?.length\" [src]=\"LINKS.linkedPolicyImage\" alt=\"\" />\n\n        <svg *ngIf=\"SelectedListOfPolicies?.length\" class=\"checkIcon\" [xmlns]=\"LINKS.checked\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK RELATED POLICIES</label>\n          <div *ngIf=\"SelectedListOfPolicies?.length === 0\" (click)=\"activateSelector('isLinkedPolices', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select policies that are associated with this policy.\n            </div>\n          </div>\n\n          <div class=\"selected\" *ngIf=\"SelectedListOfPolicies?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let policy of SelectedListOfPolicies.slice(0, 1)\">\n                <i (click)=\"remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policy?.contract_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ policy?.contract_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                *ngIf=\"SelectedListOfPolicies?.length > 1\" type=\"button\" appPopover (click)=\"relatedPolicy.popover()\"\n                placement=\"left\">\n                +{{ SelectedListOfPolicies?.slice(1).length }}\n              </button>\n            </div>\n            <button *ngIf=\"activeSelector !== CONSTANTS.LINK_POLICY\" class=\"edit\" type=\"button\"\n              (click)=\"activateSelector(CONSTANTS.LINK_POLICY, true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #relatedPolicy [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let policy of SelectedListOfPolicies | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"\n                          remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\n                        \">&#xe90d;</i>\n                      {{ policy?.contract_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-cs-switch [(ngValue)]=\"policyForm.isPortalDisplayEnabled\"\n            [class.disabled]=\"policyForm?.LinkedPolicies == 0\" class=\"who-toggle\">DISPLAY ON THE POLICY PORTAL\n            <i class=\"icons\" [appTooltip]=\"CONSTANTS.LINK_POLICY_HELP_TEXT\" placement=\"bottom-right\" type=\"white\"\n              delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <app-checkbox-list [config]=\"categoryConfig\" [twoColumn]=\"false\" [itemsList]=\"categoryList\"\n    [selectedItems]=\"policyForm.selectedCategories\" [identifierKey]=\"'_id'\" [displayKey]=\"'item_name'\"\n    [tooltipKey]=\"'item_name'\" *ngIf=\"activeSelector === 'category'\" (saveList)=\"saveSelectedList('category', $event)\"\n    (closeList)=\"disableSelector()\" [loaded]=\"!categoriesListLoaded\">\n  </app-checkbox-list>\n  <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\n  [itemsList]=\"\"\n  [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\n  (closeList)=\"fieldDeselector('ISSUE_CC')\">\n</app-checkbox-list> -->\n\n  <app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"rcList\"\n    [selectedResponsibilityCenters]=\"policyForm.selectedRCs\" [rcIdKey]=\"'item_id'\"\n    (saveSelectedList)=\"saveSelectedList('rc', $event)\" (closeRcList)=\"disableSelector()\" [loaded]=\"rcListLoaded\">\n  </app-responsibility-centers-list>\n\n  <app-link-related-policies *ngIf=\"activeSelector === CONSTANTS.LINK_POLICY\" [policyId]=\"policyId\" [mode]=\"mode\"\n    [selectedPolicies]=\"SelectedListOfPolicies\" (closeLinkPolicyList)=\"disableSelector()\"\n    (selectedList)=\"saveSelectedList(CONSTANTS.LINK_POLICY, $event)\"></app-link-related-policies>\n\n  <app-users-radio-list *ngIf=\"activeSelector === 'reviewer'\" [itemEmailKey]=\"'member_email'\" [usersList]=\"allReviewers\"\n    [headerText]=\"'Select a Reviewer'\" [selectedUsers]=\"policyForm.selectedReviewers\" [userIdKey]=\"'member_id'\"\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-users-radio-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\" [usersList]=\"overseersList\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [selectedUsers]=\"policyForm.CCEmail\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-owner-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\" [groupEnabled]=\"true\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\"\n    [groupList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.CCEmail\" [selectedGroups]=\"policyForm.CCGroupEmail\" [isPaginationEnabled]=\"isPaginationEnabled\"\n    (save)=\"saveSelectedList('ccEmail', $event)\" (cancel)=\"disableSelector()\" [featureflag]=\"groupEnabled\" (fetchUserData)=\"getOverseersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\" [usersList]=\"overseersList\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [selectedUsers]=\"policyForm.CCFailEmail\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-owner-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'ccFail' && groupEnabled\" [groupEnabled]=\"true\"\n    [groupList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.CCFailEmail\"\n    [selectedGroups]=\"policyForm.CCFailEmailGroup\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\" [isPaginationEnabled]=\"isPaginationEnabled\" (save)=\"saveSelectedList('ccFail', $event)\"\n    (cancel)=\"disableSelector()\" [featureflag]=\"groupEnabled\" (fetchUserData)=\"getOverseersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-group-users-list *ngIf=\"activeSelector === 'assignees' && !groupEnabled\" [usersList]=\"assigneesList\"\n    [groupsList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.selectedAssignees\" [userIdKey]=\"'my_member_id'\"\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\" (closeUsersList)=\"disableSelector()\">\n  </app-group-users-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'assignees' && groupEnabled\" [groupEnabled]=\"true\"\n    [groupList]=\"overseerGroupsList\" (save)=\"saveSelectedList('assignees', $event)\" (cancel)=\"disableSelector()\"\n    [selectedGroups]=\"policyForm.selectedGroupAssignee\" [selectedUsers]=\"policyForm.selectedAssignees\"\n    [featureflag]=\"groupEnabled\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\" [isPaginationEnabled]=\"isPaginationEnabled\" (fetchUserData)=\"getOverseersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'approvers' && false\" [listHeading]=\"'Select Approvers'\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"true\"\n    [selectedUsers]=\"\n      addMoreLevels\n        ? []\n        : policyForm.selectedApprovers[approversListIndex].approvers\n    \" [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\n    (saveSelectedList)=\"saveSelectedList('approvers', $event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\n    [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n    [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\n  </app-owner-list>\n\n  <app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [mode]=\"'policy'\"\n    [frequencyDetails]=\"frequencyDetails\" (selectedFrequency)=\"frequencyData($event)\" [feature]=\"feature\"\n    [pageType]=\"'policy'\" (closeFrequency)=\"disableSelector()\"></app-frequency-container>\n\n  <app-frequency-container *ngIf=\"activeSelector === 'reviewerFrequency'\" [mode]=\"'reviewerFrequency'\"\n    [frequencyDetails]=\"reviewerFrequencyDetails\" (selectedFrequency)=\"reviewerFrequencyData($event)\"\n    [feature]=\"feature\" [pageType]=\"'policy'\" (closeFrequency)=\"disableSelector()\"></app-frequency-container>\n\n  <vc-link-program *ngIf=\"activeSelector === 'linkProgram'\" (close)=\"disableSelector()\" [policy]=\"policyForm\"\n    [selectedProgram]=\"policyForm?.programSelectedValues\" [mode]=\"mode\" [selectedLinkProgram]=\"selectedLinkProgram\"\n    (changeTab)=\"changeTab('linkedPrograms')\" (updatedProgramDetails)=\"updatedProgramDetails($event)\">\n  </vc-link-program>\n\n  <app-checkpoints-policy-container (closeCheckPoint)=\"disableSelector()\"\n    [checkpointData]=\"policyForm?.checkpointDetails\" [requiredPoint]=\"policyForm?.passingMarks\"\n    *ngIf=\"activeSelector === 'checkpoints'\"\n    (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"></app-checkpoints-policy-container>\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n  <app-approval-workflow *ngIf=\"enableApprovalWorkflow\" [selectedCategory]=\"policyForm?.selectedCategories\"\n    [approverWorkFlowList]=\"approverWorkFlowList\" [allApprovers]=\"allApprovers\"\n    (listCancelClicked)=\"listCancelClicked($event)\" (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\n    (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\" [editApprovalWorkflow]=\"editApprovalWorkflow\"\n    [createApprovalClick]=\"createApprovalClick\" (closeCreateClicked)=\"closeClickedCreateForm()\"\n    [editWorkflowLevel]=\"editWorkflowLevel\"></app-approval-workflow>\n  <!-- <app-select-approvers></app-select-approvers> -->\n\n  <app-policy-access *ngIf=\"activeSelector === 'policyAccess'\" [policyAccessType]=\"policyForm?.policy_access_type\"\n    (close)=\"disableSelector()\" [orgUsersList]=\"usersList\" [usersAccessList]=\"usersAccessList\"\n    [groupList]=\"overseerGroupsList\" [groupsAccessList]=\"groupsAccessList\"\n    [selectedUsers]=\"policyForm?.policy_access_owners\" [selectedGroups]=\"policyForm?.policy_access_groups\"\n    [disabledIds]=\"usersAccessListIds\" [disabledGroupIds]=\"groupsAccessListIds\"\n    [futureUsersWillSelect]=\"policyForm?.availableOnPortal\" (saveCheckPoint)=\"saveSelectedList('policyAccess', $event)\"\n    (setPolicyAccessType)=\"policyForm.policy_access_type = $event\">\n  </app-policy-access>\n</ng-container>\n<ng-container *ngIf=\"showCreateDocuments\">\n  <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\n   [organization_id]=\"organization_id\"\n   [member_obj_id]=\"member_obj_id\"\n   [userInfo]=\"userInfo\"\n   [policyId]=\"policyId\"\n   [policyName]=\"policyForm.policyName\"\n   (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n   (editPolicy)=\"editPolicyFromDocuments()\"\n   ></app-create-documents> -->\n  <lib-document-section *ngIf=\"showCreateDocuments\" [templateView]=\"templateView\" [organization_id]=\"organization_id\"\n    [member_obj_id]=\"member_obj_id\" [userInfo]=\"userInfo\" [policyId]=\"policyId\" [feature]=\"feature\"\n    [templateUrl]=\"templateUrl\" [policyName]=\"policyForm.policyName\" (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n    (editPolicy)=\"editPolicyFromDocuments()\" (openTemplate)=\"templateView = true\"></lib-document-section>\n</ng-container>\n\n<app-assessment-list *ngIf=\"activeSelector === 'isAssessment'\" [program_ids]=\"''\"\n  [isEdit]=\"policyForm?.assessment?.length\" (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\n  [selectedAssessment]=\"policyForm?.assessment[0]\" [mode]=\"'policy'\" (onAssessmentSelect)=\"\n    onAssessmentSelect($event); saveSelectedList('isAssessment', false)\n  \"></app-assessment-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'approvers' && false\" [listHeading]=\"'Select Approvers'\"\n  [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"true\"\n  [selectedUsers]=\"\n    addMoreLevels\n      ? []\n      : policyForm.selectedApprovers[approversListIndex].approvers\n  \" [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('approvers', $event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\n  [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n  [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\n</app-owner-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'owners'\" [listHeading]=\"'Select Owner(s)'\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"false\" [userIdKey]=\"'member_id'\"\n  [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('owners', $event)\"\n  (closeUsersList)=\"disableSelector()\" [mode]=\"mode\" [selectedUsers]=\"policyForm?.policy_owners ?? []\">\n</app-owner-list>\n\n<app-select-template-list *ngIf=\"templateView\" [selectedCategoryId]=\"policyForm?.selectedCategories\" [feature]=\"feature\"\n  (onTemplateSelect)=\"onTemplateSelect($event)\"></app-select-template-list>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility-inner-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}.who-toggle{margin-top:10px}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.right app-format-and-evidence~.error-message{position:relative;top:-12px}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i4.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponent, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { kind: "component", type: i5.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "isPaginationEnabled", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText", "loaded"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: GroupUsersListComponent, selector: "app-group-users-list", inputs: ["groupsEnabled", "usersList", "groupsList", "selectedUsers", "userIdKey", "groupIdKey", "openedFrom", "selectedGroups", "assigneeGroupsList", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "loader", "isDisabledSelected"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: SelectTemplateListComponent, selector: "app-select-template-list", inputs: ["selectedCategoryId", "feature"], outputs: ["onTemplateSelect"] }, { kind: "component", type: FormatAndEvidenceComponent, selector: "app-format-and-evidence", inputs: ["mode", "categories", "organization_id", "formatEvidanceData", "isMandatory"], outputs: ["updateFiles"] }, { kind: "component", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: ["itemsList", "selectedItems", "identifierKey", "displayKey", "tooltipKey", "config", "twoColumn", "loaded"], outputs: ["closeList", "saveList"] }, { kind: "component", type: OwnerListComponent, selector: "app-owner-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "showWorkflow", "listHeading", "searchPlaceholder", "pluralText", "singularText", "reviewerWorkflowType", "mode", "noDataText", "workflowList", "workflowText", "disabledIds", "nonRemovableUsersList", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds"], outputs: ["saveSelectedList", "closeUsersList", "reviewerWorkflowTypeChange"] }, { kind: "component", type: UserRadioListComponent, selector: "app-users-radio-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "headerText", "loaded"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: FrequencyContainerComponent, selector: "app-frequency-container", inputs: ["frequencyDetails", "mode", "feature", "pageType"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "component", type: CheckpointsPolicyContainerComponent, selector: "app-checkpoints-policy-container", inputs: ["requiredPoint", "checkpointData"], outputs: ["closeCheckPoint", "saveCheckPoint"] }, { kind: "component", type: DocumentSectionComponent, selector: "lib-document-section", inputs: ["selectedDocumentType", "feature", "templateView", "policyId", "policyName", "organization_id", "member_obj_id", "userInfo", "templateUrl"], outputs: ["disconnectRefresh", "editPolicy", "openTemplate"] }, { kind: "component", type: AssessmentListComponent, selector: "app-assessment-list", inputs: ["isEdit", "mode", "selectedAssessment", "selectedAssessmentData", "program_ids"], outputs: ["onAssessmentSelect", "cancelAssessment"] }, { kind: "component", type: ApprovalWorkflowComponent, selector: "app-approval-workflow", inputs: ["approverWorkFlowList", "allApprovers", "selectedCategory", "editApprovalWorkflow", "createApprovalClick", "editWorkflowLevel"], outputs: ["selectedWorkflowNext", "listCancelClicked", "saveApprovalWorkflow", "closeCreateClicked"] }, { kind: "component", type: PolicyAccessComponent, selector: "app-policy-access", inputs: ["policyAccessType", "SelectedCategory", "orgUsersList", "groupList", "selectedUsers", "selectedGroups", "disabledIds", "usersAccessList", "groupsAccessList", "disabledGroupIds", "futureUsersWillSelect"], outputs: ["close", "saveCheckPoint", "setPolicyAccessType"] }, { kind: "component", type: LinkProgramComponent, selector: "vc-link-program", inputs: ["policy", "currentTab", "mode", "programsList", "selectedProgram", "selectedCategories", "selectedLinkProgram", "hideProgramsList"], outputs: ["changeTab", "updatedProgramDetails", "save", "close", "refreshLinkedPolicies"] }, { kind: "component", type: LinkRelatedPoliciesComponent, selector: "app-link-related-policies", inputs: ["selectedPolicies", "mode", "policyId"], outputs: ["closeLinkPolicyList", "selectedList"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WorkflowPolicyComponent, selector: "app-workflow-policy", inputs: { mode: "mode", policyId: "policyId", feature: "feature", convertFileData: "convertFileData", selectedCategory: "selectedCategory", isSendForAttestation: "isSendForAttestation", templateId: "templateId" }, outputs: { pickerChanged: "pickerChanged", showConfirmationAlert: "showConfirmationAlert", populateOption: "populateOption", disconnectRefresh: "disconnectRefresh", shiftToEditMode: "shiftToEditMode" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "formatEvidence", first: true, predicate: ["formatEvidence"], descendants: true }, { propertyName: "datePickerPopUp", first: true, predicate: ["datePicker"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- <p>workflow-policy works!</p> -->\n\n<ng-container *ngIf=\"!showCreateDocuments\">\n  <div class=\"workflow-policy\">\n    <!-- Policy Name -->\n    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\n        <img [src]=\"ASSETS.what\" alt=\"name\" *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\" />\n\n        <svg *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Policy Name <span class=\"required\">*</span>\n          </label>\n          <input type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name', true)\"\n            *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\n            (focusout)=\"activateSelector('name', false)\" [ngModel]=\"policyForm.policyName\"\n            (ngModelChange)=\"policyForm.policyName = changeName($event)\" placeholder=\"Name this policy\" />\n          <div class=\"selected\" *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\">\n            <div class=\"chip-container\">\n              <span class=\"value\">{{ policyForm.policyName }}</span>\n            </div>\n            <button class=\"edit\" (click)=\"activateSelector('name', true)\" type=\"button\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n\n          <p *ngIf=\"submitted && !policyForm.policyName.trim()\" [appScrollInView]=\"true\" class=\"error-message\">\n            Please enter a name for this policy.\n          </p>\n          <vcomply-editor [(ngModel)]=\"policyForm.policyNotes\" [editorConfig]=\"description\"></vcomply-editor>\n          <!-- <app-cs-switch\n            [(ngValue)]=\"policyForm.availableOnPortal\"\n            (ngValueChange)=\"availabilityOnPortal($event)\"\n          >\n            Do you want this policy to be available on the portal?\n            <i\n              class=\"icons\"\n              [appTooltip]=\"\n                '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.'\n              \"\n              placement=\"bottom-right\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe932;</i\n            >\n          </app-cs-switch>\n          <app-cs-switch\n            *ngIf=\"policyForm.availableOnPortal\"\n            [(ngValue)]=\"policyForm.acceptSuggestions\"\n          >\n            Accept suggestions\n            <i\n              class=\"icons\"\n              [appTooltip]=\"\n                'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n              \"\n              placement=\"bottom-right\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe932;</i\n            ></app-cs-switch> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Category -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'category' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedCategories?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedCategories?.length == 0 ||\n            activeSelector === 'category'\n          \" [src]=\"ASSETS.case_category\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedCategories?.length > 0 &&\n            activeSelector !== 'category'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Policy Category <span class=\"required\">*</span>\n          </label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedCategories?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('category', true)\"\n              placeholder=\"Select a category for this policy.\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedCategories?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"\n                  let category of policyForm?.selectedCategories?.slice(0, 1)\n                \">\n                <i (click)=\"remove('category', category)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"category.item_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ category.item_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                *ngIf=\"policyForm?.selectedCategories?.length > 1\" type=\"button\" appPopover (click)=\"category.popover()\"\n                placement=\"left\">\n                +{{ policyForm?.selectedCategories?.slice(1).length }}\n              </button>\n            </div>\n\n            <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\n                          [class.plus]=\"policyForm?.selectedCategories?.length>2\">\n                          <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\n                                  class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\n                              {{category.item_name}}</span>\n                          <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\n                              appPopover (click)=\"category.popover()\" placement=\"right\">+\n                              {{policyForm?.selectedCategories?.slice(2).length}}</button>\n                      </div> -->\n            <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\n              (click)=\"activateSelector('category', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #category [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let category of policyForm?.selectedCategories | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('category', category)\">&#xe90d;</i>\n                      {{ category.item_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <p *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\" [appScrollInView]=\"true\"\n            class=\"error-message\">\n            Please select the category for this policy.\n          </p>\n        </div>\n\n        <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\n          <ng-container *ngFor=\"let tag of policyForm?.customTags\">\n            <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\n            <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{ tag.tagname }}\" />\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <!-- Effective Date -->\n    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"false\">\n        <img [src]=\"ASSETS.when\" alt=\"\" />\n\n        <svg *ngIf=\"false\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Effective Date</label>\n          <div class=\"date-time-picker\">\n            <div class=\"picker-group\">\n              <input type=\"text\" readonly placeholder=\"Select the effective date of the policy.\"\n                [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\" (click)=\"openDatePicker()\"\n                id=\"effective-date\" />\n              <i class=\"icons\">&#xe92d;</i>\n              <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\n                [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n              </dp-date-picker>\n              <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Owner -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'owners'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'owners' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\n        <img *ngIf=\"!policyForm.policy_owners?.length\" [src]=\"ASSETS.im_creating\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm.policy_owners?.length\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\n          </div>\n          <div *ngIf=\"!policyForm.policy_owners?.length\" (click)=\"activateSelector('owners', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select owners for this policy.\n            </div>\n          </div>\n\n          <div *ngIf=\"policyForm.policy_owners?.length\"\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"vx-d-flex vx-align-center\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.policy_owners[0]?.member_name }}</span>\n\n                <button *ngIf=\"policyForm?.policy_owners?.length > 1\"\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"policyUserPopover.popover()\" placement=\"left\">\n                  + {{ policyForm?.policy_owners.length - 1 }}\n                </button>\n              </div>\n              <div *ngIf=\"false\" class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\">\n                &\n              </div>\n              <div *ngIf=\"false\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"'Samantha Jones'\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Samantha Jones</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"policyGroupPopover.popover()\" placement=\"right\">\n                  +4\n                </button>\n              </div>\n              <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\n                <div class=\"wf-action-list\">\n                  <ul class=\"action-item\">\n                    <li *ngFor=\"\n                        let owner of policyForm?.policy_owners | slice : 1;\n                        let i = index\n                      \">\n                      <div class=\"avatar-card\">\n                        <span class=\"value\" [appTooltip]=\"owner?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                          type=\"black\" [tooltipMandatory]=\"false\">\n                          <i (click)=\"remove('owners', owner, i + 1)\" class=\"icons\">&#xe90d;</i>\n                          {{ owner?.member_name }}\n                        </span>\n                      </div>\n                    </li>\n                  </ul>\n                </div>\n              </app-popover>\n              <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\n                <div class=\"wf-action-list\">\n                  <ul class=\"action-item\">\n                    <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n                      <div class=\"avatar-card\">\n                        <span class=\"value\" [appTooltip]=\"'Harshvardhan Kariwala'\" placement=\"bottom-left\" delay=\"0\"\n                          type=\"black\" [tooltipMandatory]=\"false\">\n                          <i class=\"icons\">&#xe90d;</i>\n                          Harshvardhan Kariwala\n                        </span>\n                      </div>\n                    </li>\n                  </ul>\n                </div>\n              </app-popover>\n            </div>\n            <button (click)=\"activateSelector('owners', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n          <p *ngIf=\"submitted && !policyForm?.policy_owners?.length\" [appScrollInView]=\"true\" class=\"error-message\">\n            Select owners for this policy.\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Review -->\n    <div class=\"form-group-row\" [class.active]=\"\n        activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\n      \" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'reviewer' &&\n        activeSelector !== 'reviewerFrequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\n        <img *ngIf=\"!policyForm?.addReviewers\" [src]=\"ASSETS.reviewer\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.addReviewers\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">REVIEW</label>\n          <div class=\"reviewSelection vx-p-3 vx-pb-0\" [class.disabled]=\"\n              activeSelector && sideSelectorElements.includes(activeSelector)\n            \">\n            <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\n              Does this policy need to be reviewed?\n            </div>\n            <app-cs-radio name=\"review-type\" [checked]=\"policyForm?.addReviewers\" (checkedEvent)=\"typeSelected(true)\">\n              <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n                YES\n              </div>\n            </app-cs-radio>\n            <app-cs-radio name=\"review-type\" [checked]=\"!policyForm?.addReviewers\" (checkedEvent)=\"typeSelected(false)\">\n              <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n                NO\n              </div>\n            </app-cs-radio>\n          </div>\n\n          <ng-container *ngIf=\"policyForm?.addReviewers\">\n            <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\n            <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n              *ngIf=\"policyForm?.selectedReviewers?.length == 0\" [appScrollInView]=\"scrollToBottom\"\n              [class.active]=\"activeSelector === 'reviewer'\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewer' &&\n                sideSelectorElements.includes(activeSelector)\n              \" (click)=\"activateSelector('reviewer', true)\">\n              <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                Select the person responsible for reviewing this policy\n              </div>\n            </div>\n\n            <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n              *ngIf=\"policyForm?.selectedReviewers?.length > 0\" [class.active]=\"activeSelector === 'reviewer'\"\n              [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewer' &&\n                sideSelectorElements.includes(activeSelector)\n              \">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\">\n                <i (click)=\"remove('reviewer', reviewer)\"\n                  class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"'Samantha Jones'\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                  {{ reviewer?.member_name }}</span>\n              </div>\n              <button\n                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\"\n                *ngIf=\"activeSelector !== 'reviewer'\" (click)=\"activateSelector('reviewer', true)\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n            <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\n            <div *ngIf=\"policyForm?.review_frequency_details == ''\"\n              class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n              [class.active]=\"activeSelector === 'reviewerFrequency'\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewerFrequency' &&\n                sideSelectorElements.includes(activeSelector)\n              \" (click)=\"activateSelector('reviewerFrequency', true)\">\n              <div class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                When does this policy needs to be reviewed?\n              </div>\n              <div (click)=\"activateSelector('reviewerFrequency', true)\"\n                class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\n                SET A FREQUENCY\n              </div>\n            </div>\n\n            <div *ngIf=\"policyForm?.review_frequency_details != ''\"\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewerFrequency' &&\n                sideSelectorElements.includes(activeSelector)\n              \" [class.active]=\"activeSelector === 'reviewerFrequency'\">\n              <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [appTooltip]=\"reviewerFrequencyPlaceholder\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                {{ reviewerFrequencyPlaceholder }}\n              </div>\n              <button *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n                (click)=\"activateSelector('reviewerFrequency', true)\"\n                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\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n            <p *ngIf=\"\n                submitted &&\n                policyForm?.selectedReviewers?.length > 0 &&\n                !policyForm?.review_frequency_details\n              \" class=\"error-message\" [appScrollInView]=\"true\">\n              Select the review schedule for this policy.\n            </p>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <!-- New Approval Workflow -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'approvers'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'approvers' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedApprovers?.length == 0 ||\n            activeSelector === 'approvers'\n          \" [src]=\"ASSETS.approval\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedApprovers?.length > 0 &&\n            activeSelector !== 'approvers'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">APPROVAL <span class=\"required\">*</span></label>\n            <button (click)=\"\n                createApprovalWorkflow(); activateSelector('approvers', true)\n              \" [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n              class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\">\n              CREATE A NEW APPROVAL WORKFLOW\n            </button>\n          </div>\n          <div *ngIf=\"\n              selectedWorkflow?.length === 0 ||\n              !selectedWorkflow[0]?.workflow_name\n            \" (click)=\"\n              clickApprovalWorkflow(true); activateSelector('approvers', true)\n            \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select the approval workflow for this policy\n            </div>\n          </div>\n          <div *ngIf=\"\n              selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\n            \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\">\n            <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i (click)=\"removeWorkflow()\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  selectedWorkflow[0]?.workflow_name }}</span>\n              </div>\n              <button (click)=\"editWorkflow(selectedWorkflow[0])\"\n                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\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\n            <div *ngFor=\"\n                let approval of selectedWorkflow[0]?.approval_workflow;\n                let approvalIndex = index\n              \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\">\n              <div class=\"vx-d-flex vx-align-center\">\n                <div class=\"level-left vx-d-flex vx-align-center\">\n                  <div class=\"vx-d-block\">\n                    <div class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\" [appTooltip]=\"\n                        approval?.alias_name\n                          ? approval?.alias_name\n                          : approval?.level1\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                      {{\n                      approval?.alias_name\n                      ? approval?.alias_name\n                      : approval?.level1\n                      }}\n                    </div>\n                    <div class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\">\n                      {{\n                      approval?.type === \"ROUNDROBIN\"\n                      ? \"ROUND-ROBIN\"\n                      : approval?.type === \"ANYONE\"\n                      ? \"ANY ONE\"\n                      : approval?.type\n                      }}\n                    </div>\n                  </div>\n                </div>\n                <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\">\n                  <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                    >&#xe9ae;</i\n                  > -->\n                  <div *ngIf=\"\n                      approval?.type?.toLowerCase() === 'sequential' &&\n                      approval?.approvers?.length < 2\n                    \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\n                  </div>\n                  <div *ngIf=\"\n                      approval?.approvers?.length > 1 &&\n                      approval?.type?.toLowerCase() === 'sequential'\n                    \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    1\n                  </div>\n                  <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"approval?.approvers[0]?.member_name\"\n                    placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                    approval?.approvers[0]?.member_name }}</span>\n                  <button *ngIf=\"approval?.approvers?.length > 1\"\n                    class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                    appPopover (click)=\"workflowPopover.popover()\" placement=\"right\">\n                    +{{ approval?.approvers?.length - 1 }}\n                  </button>\n                </div>\n                <app-popover #workflowPopover [dontCloseonClick]=\"true\">\n                  <div class=\"wf-action-list\">\n                    <ul class=\"action-item\">\n                      <li *ngFor=\"\n                          let approver of approval?.approvers | slice : 1;\n                          let approvalIndex = index\n                        \">\n                        <div class=\"avatar-card\">\n                          <span class=\"value\" [appTooltip]=\"approver?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                            type=\"black\" [tooltipMandatory]=\"false\">\n                            <!-- <i class=\"icons\">&#xe90d;</i> -->\n                            <span *ngIf=\"\n                                approval?.type?.toLowerCase() === 'sequential'\n                              \"\n                              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">{{\n                              approvalIndex + 1 ===\n                              approval?.approvers?.length - 1\n                              ? \"Final\"\n                              : approvalIndex + 2\n                              }}</span>\n                            {{ approver?.member_name }}\n                          </span>\n                        </div>\n                      </li>\n                    </ul>\n                  </div>\n                </app-popover>\n              </div>\n\n              <!-- <div class=\"vx-d-flex vx-align-center\">\n                <button (click)=\"editLevelClicked(approval,approvalIndex)\"\n                  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\"\n                >\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                </button>\n                <button (click)=\"deleteLevel(approvalIndex)\"\n                  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\"\n                >\n                  <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\n                </button>\n              </div> -->\n            </div>\n          </ng-container>\n          <p *ngIf=\"\n              submitted &&\n              !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\n              !policyApprovalFlag &&\n              !policyForm?.selectedApprovers[0]?.approvers?.length\n            \" [appScrollInView]=\"true\" class=\"error-message\">\n            Select or create an approval workflow for this policy.\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Access -->\n    <div *ngIf=\"true\" class=\"form-group-row\" [class.active]=\"activeSelector === 'policyAccess'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'policyAccess' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"true\">\n        <img *ngIf=\"\n            !policyForm?.policy_access_owners?.length &&\n            !policyForm?.policy_access_groups?.length &&\n            !policyForm?.availableOnPortal\n          \" [src]=\"ASSETS.lock_scope\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.policy_access_owners?.length ||\n            policyForm?.policy_access_groups?.length ||\n            policyForm?.availableOnPortal\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">POLICY PORTAL ACCESS</label>\n          </div>\n          <div *ngIf=\"\n              !policyForm?.policy_access_owners?.length &&\n              !policyForm?.policy_access_groups?.length &&\n              !policyForm?.availableOnPortal\n            \" (click)=\"activateSelector('policyAccess', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Who should be able to view this policy?\n            </div>\n          </div>\n\n          <ng-container *ngIf=\"!policyForm?.availableOnPortal\">\n            <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3\" *ngIf=\"\n                policyForm?.policy_access_owners?.length ||\n                policyForm?.policy_access_groups?.length\n              \">\n              <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\">\n                <div class=\"vx-d-flex vx-align-center\">\n                  <div *ngIf=\"policyForm?.policy_access_owners?.length\"\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                      *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"\n                        remove(\n                          'policyAccess',\n                          policyForm?.policy_access_owners[0]\n                        )\n                      \">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                        policyForm?.policy_access_owners[0]?.employee_name\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                      policyForm?.policy_access_owners[0]?.employee_name\n                      }}</span>\n                    <button *ngIf=\"policyForm?.policy_access_owners?.length > 1\"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                      appPopover (click)=\"policyAccessPopover.popover()\" placement=\"left\">\n                      +{{ policyForm?.policy_access_owners.length - 1 }}\n                    </button>\n                  </div>\n\n                  <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                      policyForm?.policy_access_owners.length > 0 &&\n                      policyForm?.policy_access_groups.length > 0\n                    \">\n                    &\n                  </div>\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngIf=\"policyForm?.policy_access_groups.length > 0\">\n                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                      *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"\n                        remove(\n                          'accessGroup',\n                          policyForm?.policy_access_groups[0]\n                        )\n                      \">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                        policyForm?.policy_access_groups[0]?.group_name\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                      policyForm?.policy_access_groups[0]?.group_name\n                      }}</span>\n                    <button\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"accessGroup.popover()\" placement=\"right\"\n                      *ngIf=\"policyForm?.policy_access_groups.length > 1\">\n                      +{{ policyForm?.policy_access_groups.length - 1 }}\n                    </button>\n                  </div>\n\n                  <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let user of policyForm?.policy_access_owners\n                              | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\" [appTooltip]=\"user?.employee_name\" placement=\"bottom-left\" delay=\"0\"\n                              type=\"black\" [tooltipMandatory]=\"false\">\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\"\n                                (click)=\"remove('policyAccess', user)\">&#xe90d;</i>\n                              {{ user?.employee_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                  <app-popover #accessGroup [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let data of policyForm?.policy_access_groups\n                              | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\">\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\"\n                                (click)=\"remove('accessGroup', data)\">&#xe90d;</i>\n                              {{ data?.group_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </div>\n\n                <button (click)=\"activateSelector('policyAccess', true)\"\n                  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\">\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                </button>\n              </div>\n\n              <!-- <div class=\"vx-mt-4 vx-mb-2\">\n                <app-cs-radio\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 0\" (checkedEvent)=\"setAccessField(0)\"\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\n                    Everyone who has access to this Policy Category\n                  </div></app-cs-radio\n                >\n                <app-cs-radio\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 1\" (checkedEvent)=\"setAccessField(1)\"\n                class=\"vx-mt-1\"\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\n                    Select users/groups\n                  </div></app-cs-radio\n                >\n              </div> -->\n            </div>\n          </ng-container>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n            *ngIf=\"policyForm?.availableOnPortal\">\n            <span class=\"vx-fs-13 vx-paragraph-txt\">Visible to All Current & Future Users</span>\n\n            <button (click)=\"activateSelector('policyAccess', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n\n          <div class=\"vx-mt-2\">\n            <app-cs-switch *ngIf=\"\n                policyForm.availableOnPortal ||\n                policyForm?.policy_access_owners?.length ||\n                policyForm?.policy_access_groups?.length\n              \" [(ngValue)]=\"policyForm.acceptSuggestions\">ACCEPT SUGGESTIONS\n              <i class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\" [appTooltip]=\"\n                  'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n                \" placement=\"bottom-right\" delay=\"0\" type=\"white\"\n                [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Approval Workflow -->\n    <div class=\"form-group-row\" *ngIf=\"false\" [class.active]=\"activeSelector === 'approvers'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'approvers' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedApprovers?.length == 0 ||\n            activeSelector === 'approvers'\n          \" [src]=\"ASSETS.approval\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedApprovers?.length > 0 &&\n            activeSelector !== 'approvers'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group approval-workflow\" [class.disabled]=\"policyApprovalFlag !== 0\">\n          <label class=\"vx-control-panel\">\n            Approval workflow <span class=\"required\">*</span>\n            <button (click)=\"\n                activateSelector('approvers', true);\n                addMoreLevels = true;\n                workflowType = 'SEQUENTIAL'\n              \" class=\"button\">\n              Create a new Approval Workflow\n            </button>\n          </label>\n          <div class=\"select\" [class.disabled]=\"approverWorkFlowList?.length == 0\" *ngIf=\"\n              policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\n              policyForm?.selectedApprovers.length == 0\n            \">\n            <cs-select [ngModel]=\"selectedApprovalWorkflow\" (ngModelChange)=\"selectedWorkflowChange($event)\"\n              [placeholder]=\"'Select approval workflow for this policy'\" name=\"selectedApprovalWorkflow\"\n              [setMaxWidth]=\"true\">\n              <cs-option *ngFor=\"let data of approverWorkFlowList\" [value]=\"data\">\n                {{ data.workflow_name }}\n              </cs-option>\n              <cs-option [value]=\"-1\" (click)=\"\n                  activateSelector('approvers', true);\n                  addMoreLevels = true;\n                  workflowType = 'SEQUENTIAL'\n                \">Create a new approval workflow</cs-option>\n            </cs-select>\n          </div>\n          <ng-container *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\">\n            <div class=\"selected\" *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\">\n              <div class=\"workflow-label\">\n                <p class=\"title\">Level {{ i + 1 }}</p>\n                <p class=\"description\">{{ level.name }}</p>\n              </div>\n              <div class=\"vx-d-flex vx-align-center\">\n                <div class=\"chip-container\">\n                  <span class=\"chip\" *ngFor=\"\n                      let approver of level.approvers.slice(0, 1);\n                      let j = index\n                    \"><i class=\"icons\" (click)=\"remove('approvers', approver, i)\">&#xe90d;</i>\n                    <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\n                      j + 1\n                      }}</span>{{ approver.member_name }}</span>\n\n                  <button class=\"count\" *ngIf=\"level.approvers?.length > 1\" type=\"button\" appPopover\n                    (click)=\"labelName.popover()\" placement=\"left\">\n                    +\n\n                    {{ level.approvers.slice(1).length }}\n                  </button>\n                  <app-popover #labelName [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let approver of level.approvers | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\">\n                              <i class=\"icons\" (click)=\"remove('approvers', approver, i)\">&#xe90d;</i>\n                              <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">\n                                {{\n                                j == level.approvers.slice(1).length - 1\n                                ? \"Final\"\n                                : j + 2\n                                }}\n                              </span>\n                              {{ approver.member_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </div>\n                <button class=\"edit\" type=\"button\" (click)=\"\n                    activateSelector('approvers', true, level.name);\n                    approversListIndex = i\n                  \">\n                  <i class=\"icons\">&#xe9ba;</i>Edit\n                </button>\n                <button class=\"close-btn\" (click)=\"remove('workflowLevel', level, i)\">\n                  <i class=\"icons\">&#xe90d;</i>\n                </button>\n              </div>\n            </div>\n          </ng-container>\n\n          <p *ngIf=\"\n              submitted &&\n              !policyForm?.selectedApprovers?.length &&\n              !policyApprovalFlag\n            \" [appScrollInView]=\"true\" class=\"error-message\">\n            Select or create an approval workflow for this policy.\n          </p>\n\n          <label class=\"vx-control-panel\" *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"><button\n              class=\"button\" (click)=\"\n                activateSelector('approvers', true);\n                addMoreLevels = true;\n                workflowType = 'SEQUENTIAL'\n              \">\n              + Add More Levels\n            </button></label>\n        </div>\n      </div>\n    </div>\n\n    <!-- Who / now Attestation -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'assignees' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedAssignees?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedAssignees?.length == 0 ||\n            activeSelector === 'assignees'\n          \" [src]=\"ASSETS.case_assignees\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedAssignees?.length > 0 &&\n            activeSelector !== 'assignees'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Attestation</label>\n          <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"\n              (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\n              (policyForm?.selectedAssignees?.length == 0 &&\n                groupEnabled &&\n                policyForm?.selectedGroupAssignee.length == 0)\n            \" (click)=\"activateSelector('assignees', true)\"\n            [class.disabled]=\"policyForm.selectedAllAttestors\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              {{\n                policyForm.selectedAllAttestors ? 'All Users Selected' : \n                'Select the persons responsible for attesting this policy.'\n              }}\n            </div>\n          </div>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\" *ngIf=\"\n              policyForm?.selectedAssignees?.length > 0 ||\n              policyForm?.selectedGroupAssignee?.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"\n                  let assignee of policyForm?.selectedAssignees?.slice(0, 1)\n                \">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('assignees', assignee)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assignee.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ assignee.employee_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"assigneePopover.popover()\" placement=\"left\"\n                *ngIf=\"policyForm?.selectedAssignees?.length > 1\">\n                +{{ policyForm?.selectedAssignees?.slice(1).length }}\n              </button>\n            </div>\n            <ng-container *ngIf=\"groupEnabled\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove('assignees', policyForm?.selectedAssignees[0])\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\"\n                  [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\"\n                  type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.selectedAssignees[0]?.employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"UserPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.selectedAssignees.length > 1\">\n                  +{{ policyForm?.selectedAssignees.length - 1 }}\n                </button>\n              </div>\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.selectedAssignees.length > 0 &&\n                  policyForm?.selectedGroupAssignee.length > 0\n                \">\n                &\n              </div>\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove(\n                      'groupAssignees',\n                      policyForm?.selectedGroupAssignee[0]\n                    )\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                    policyForm?.selectedGroupAssignee[0]?.group_name\n                  \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.selectedGroupAssignee[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"group.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\">\n                  +{{ policyForm?.selectedGroupAssignee.length - 1 }}\n                </button>\n              </div>\n            </ng-container>\n            <button\n              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\"\n              (click)=\"activateSelector('assignees', true)\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n\n          <p *ngIf=\"\n              submitted &&\n              ((policyForm?.selectedAssignees?.length == 0 &&\n                policyForm?.frequency_details &&\n                !groupEnabled) ||\n                (policyForm?.selectedAssignees?.length == 0 &&\n                  policyForm.selectedGroupAssignee.length == 0 &&\n                  policyForm?.frequency_details &&\n                  groupEnabled) ||\n                (isSendForAttestation &&\n                  policyForm?.selectedAssignees?.length === 0))\n            \" id=\"whovalidatemsg\" class=\"error-message\" [appScrollInView]=\"true\">\n            Select the persons required to attest to this Policy.\n          </p>\n          <app-cs-switch [(ngValue)]=\"policyForm.selectedAllAttestors\"\n          (ngValueChange)=\"onAllAttestorsToggle($event)\"\n            class=\"who-toggle\">Select all users within your organization\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, all users within your organization will be required to attest this policy.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n          <app-popover #assigneePopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\">&#xe90d;</i>\n                      {{ assignee.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #UserPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\">&#xe90d;</i>\n                      {{ assignee.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #group [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.selectedGroupAssignee | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('groupAssignees', data)\">&#xe90d;</i>\n                      {{ data.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <!-- overseer -->\n          <app-popover #overseerPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let overseer of policyForm?.CCEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\">&#xe90d;</i>\n                      {{ overseer?.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.CCGroupEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\">&#xe90d;</i>\n                      {{ data?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <!-- overseer end -->\n\n          <!-- overseer fail start -->\n          <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let overseer of policyForm?.CCFailEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccFail', overseer)\">&#xe90d;</i>\n                      {{ overseer?.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.CCFailEmailGroup | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccGroupFailEmail', data)\">&#xe90d;</i>\n                      {{ data?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <!-- overseer fail end -->\n        </div>\n      </div>\n    </div>\n\n    <!-- When -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'frequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">When?</label>\n\n          <div *ngIf=\"policyForm?.frequency_details == ''\" class=\"select button-sec\">\n            <div class=\"custom-input frequency-custom-input\" (click)=\"activateSelector('frequency', true)\">\n              {{ frequencyPlaceholder }}\n            </div>\n\n            <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n              Set A frequency\n            </button>\n          </div>\n          <!-- <div\n            *ngIf=\"policyForm?.frequency_details != ''\"\n            class=\"selected button-sec\"\n          > -->\n          <div *ngIf=\"policyForm?.frequency_details != ''\"\n            class=\"selected button-sec selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i (click)=\"remove('frequency', rc)\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ frequencyPlaceholder }}</span>\n            </div>\n            <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\n              (click)=\"activateSelector('frequency', true)\">\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button>\n            <!-- </div>\n            <span class=\"chip\">{{ frequencyPlaceholder }}</span>\n            <button\n              *ngIf=\"activeSelector !== 'frequency'\"\n              type=\"button\"\n              class=\"edit\"\n              (click)=\"activateSelector('frequency', true)\"\n            >\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button> -->\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              ((policyForm?.selectedAssignees?.length > 0 &&\n                !policyForm?.frequency_details &&\n                !groupEnabled) ||\n                ((policyForm?.selectedAssignees?.length > 0 ||\n                  policyForm?.selectedGroupAssignee?.length > 0) &&\n                  !policyForm?.frequency_details &&\n                  groupEnabled))\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select an attestation schedule for this policy.\n          </p>\n\n          <p *ngIf=\"submitted && policyForm?.frequency_details && policyForm?.selectedAssignees?.length > 0 && isPastDate\"\n            class=\"error-message\">\n            Set a future date.\n          </p>\n\n          <!-- <label class=\"vx-control-panel\">Effective Date</label>\n                  <div class=\"date-time-picker\">\n                      <div class=\"picker-group\">\n                          <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\n                              [value]=\"policyForm.policyDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\n                          <i class=\"icons\">&#xe92d;</i>\n                          <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\n                              [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n                          </dp-date-picker>\n                          <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n                      </div>\n                  </div> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Checkpoints / Assessment of Understanding -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"true\"\n      [class.active]=\"activeSelector === 'checkpoints'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'checkpoints' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Assessment of Understanding\n            <!-- <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n          </label>\n          <div class=\"select\" *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\n            (click)=\"activateSelector('checkpoints', true)\">\n            <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\n            <div class=\"custom-input\">\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\n              of the policy.\n            </div>\n          </div>\n          <div class=\"selected\" *ngIf=\"policyForm?.checkpointDetails?.length > 0\">\n            <!-- <div class=\"chip-container\">\n                      <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\n\n                      <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\n\n                      <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\n\n                    </div> -->\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('checkpoints', policyForm?.checkpointDetails)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\">{{\n                policyForm?.checkpointDetails?.length +\n                (policyForm?.checkpointDetails?.length > 1\n                ? \" Questions\"\n                : \" Question\")\n                }}</span>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\n                  <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                          <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\n                              <div class=\"avatar-card\">\n                                  <span class=\"value\">\n                                      <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\n                                      {{ checkpoint?.question }}\n                                  </span>\n                              </div>\n                          </li>\n                      </ul>\n                  </div>\n              </app-popover> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Risk Classification -->\n    <div class=\"form-group-row\" *ngIf=\"showRiskClassification && false\"\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\n        <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!policyForm?.riskRating\" />\n\n        <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"policyForm?.riskRating\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Risk Classification</label>\n          <div class=\"classification\">\n            <label class=\"low\" *ngFor=\"let class of riskClassification\" [ngClass]=\"[class.class]\">\n              <input type=\"radio\" name=\"classification\" [value]=\"class.value\"\n                [checked]=\"policyForm?.riskRating === class.value\" [(ngModel)]=\"policyForm.riskRating\" />\n              <span>{{ class.name }}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Responsibility Center -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addResponsibilityCenters\"\n      [class.active]=\"activeSelector === 'rc'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'rc' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\n          \" [src]=\"ASSETS.responsibility_center\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Responsibility Center</label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('rc', true)\"\n              placeholder=\"Select Responsibility Center(s) that this policy relates to.\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                appPopover (click)=\"rcPopover.popover()\" placement=\"left\" *ngIf=\"policyForm?.selectedRCs?.length > 1\">\n                +{{ policyForm?.selectedRCs?.slice(1).length }}\n              </button>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('rc', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #rcPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let rc of policyForm?.selectedRCs | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                      {{ rc.item_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n\n    <!-- Version -->\n    <div *ngIf=\"policyForm.addVersion\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.disabled]=\"\n        activeSelector && sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\n        <img [src]=\"ASSETS.associated_risks\" alt=\"name\" *ngIf=\"!policyForm.policy_version\" />\n\n        <svg *ngIf=\"policyForm.policy_version\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">VERSION</label>\n          <input [(ngModel)]=\"policyForm.policy_version\" (change)=\"onVersion($event)\" type=\"text\"\n            placeholder=\"Specify the policy version.\" />\n          <p *ngIf=\"!isVersionValid\" class=\"error-message\" [appScrollInView]=\"true\">\n            {{ versionErrorMessage }}\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Reviewer -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addReviewers && false\"\n      [class.active]=\"activeSelector === 'reviewer'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'reviewer' &&\n        activeSelector !== 'reviewerFrequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedReviewers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedReviewers?.length == 0 ||\n            activeSelector === 'reviewer'\n          \" [src]=\"ASSETS.reviewer\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedReviewers?.length > 0 &&\n            activeSelector !== 'reviewer'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Reviewer </label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedReviewers?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('reviewer', true)\"\n              placeholder=\"Select the person responsible for reviewing this policy\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedReviewers?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let reviewer of policyForm?.selectedReviewers\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('reviewer', reviewer)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ reviewer.member_name }}</span>\n              </ng-container>\n            </div>\n\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              policyForm?.selectedReviewers?.length == 0 &&\n              policyForm?.review_frequency_details\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select a reviewer for this policy.\n          </p>\n\n          <label class=\"vx-control-panel\">When? </label>\n\n          <div *ngIf=\"policyForm?.review_frequency_details == ''\" class=\"select button-sec\">\n            <input type=\"text\" (click)=\"activateSelector('reviewerFrequency', true)\"\n              [placeholder]=\"reviewerFrequencyPlaceholder\" readonly />\n            <button (click)=\"activateSelector('reviewerFrequency', true)\" type=\"button\">\n              Set A frequency\n            </button>\n          </div>\n          <div *ngIf=\"policyForm?.review_frequency_details != ''\" class=\"selected button-sec\">\n            <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\n            <button *ngIf=\"activeSelector !== 'reviewerFrequency'\" type=\"button\" class=\"edit\"\n              (click)=\"activateSelector('reviewerFrequency', true)\">\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button>\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              policyForm?.selectedReviewers?.length > 0 &&\n              !policyForm?.review_frequency_details\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select the review schedule for this policy.\n          </p>\n\n          <app-format-and-evidence (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\" #formatEvidence\n            [mode]=\"'policyReviewer'\" [organization_id]=\"organization_id\"\n            [formatEvidanceData]=\"policyForm?.documentsAndLinks\">\n          </app-format-and-evidence>\n        </div>\n      </div>\n    </div>\n\n    <!-- Overseer -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addOverseers\" [class.active]=\"\n        activeSelector === 'ccEmail' || activeSelector === 'ccFail'\n      \" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'ccEmail' &&\n        activeSelector !== 'ccFail' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"\n          policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\n        \">\n        <img *ngIf=\"\n            (policyForm?.CCFailEmail?.length == 0 &&\n              policyForm?.CCEmail?.length == 0) ||\n            activeSelector === 'ccEmail' ||\n            activeSelector === 'ccFail'\n          \" [src]=\"ASSETS.oversight\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            (policyForm?.CCFailEmail?.length > 0 ||\n              policyForm?.CCEmail?.length > 0) &&\n            activeSelector !== 'ccEmail' &&\n            activeSelector !== 'ccFail'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Oversight</label>\n          <div class=\"select\" *ngIf=\"\n              policyForm?.CCEmail?.length == 0 &&\n              policyForm?.CCGroupEmail.length == 0\n            \">\n            <input type=\"text\" (click)=\"activateSelector('ccEmail', true)\"\n              placeholder=\"Who should have oversight of this policy?\" readonly />\n          </div>\n          <div class=\"selected\" *ngIf=\"\n              policyForm?.CCEmail?.length > 0 ||\n              policyForm?.CCGroupEmail.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccEmail', ccEmail)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"ccEmail.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ ccEmail.employee_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"ccEmailPopover.popover()\" placement=\"left\" *ngIf=\"policyForm?.CCEmail?.length > 1\">\n                +{{ policyForm?.CCEmail?.slice(1).length }}\n              </button>\n            </div>\n\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCEmail[0].employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"overseerPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCEmail?.length > 1\">\n                  +{{ policyForm?.CCEmail?.length - 1 }}\n                </button>\n              </div>\n\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.CCEmail.length > 0 &&\n                  policyForm?.CCGroupEmail?.length > 0\n                \">\n                &\n              </div>\n\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.CCGroupEmail.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCGroupEmail[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"overseerGroup.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCGroupEmail?.length > 1\">\n                  +{{ policyForm?.CCGroupEmail?.length - 1 }}\n                </button>\n              </div>\n            </div>\n\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccEmail', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n\n          <div class=\"select\" *ngIf=\"\n              policyForm?.CCFailEmail?.length == 0 &&\n              policyForm?.CCFailEmailGroup?.length == 0\n            \">\n            <input type=\"text\" (click)=\"activateSelector('ccFail', true)\"\n              placeholder=\"Who should be notified if the policy is not attested on time?\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"\n              policyForm?.CCFailEmail?.length > 0 ||\n              policyForm?.CCFailEmailGroup?.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('ccFail', ccFail)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"ccFail.employee_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ ccFail.employee_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"ccFailPopover.popover()\" placement=\"right\"\n                *ngIf=\"policyForm?.CCFailEmail?.length > 1\">\n                +{{ policyForm?.CCFailEmail?.slice(1).length }}\n              </button>\n            </div>\n\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCFailEmail[0]?.employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"overseerFailPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCFailEmail?.length > 1\">\n                  +{{ policyForm?.CCFailEmail?.length - 1 }}\n                </button>\n              </div>\n\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.CCFailEmail?.length > 0 &&\n                  policyForm?.CCFailEmailGroup?.length > 0\n                \">\n                &\n              </div>\n\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCFailEmailGroup[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"overseerFailGroup.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\">\n                  +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\n                </button>\n              </div>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccFail', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let ccEmail of policyForm?.CCEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\">&#xe90d;</i>\n                      {{ ccEmail.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let ccFail of policyForm?.CCFailEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\">&#xe90d;</i>\n                      {{ ccFail.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n\n    <!-- Related Documents -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addAssociatedDocuments\"\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\">\n        <img *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\" [src]=\"ASSETS.format_evidence\" alt=\"im\" />\n\n        <svg *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RELATED DOCUMENTS</label>\n          <app-format-and-evidence (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\" [mode]=\"'policy'\"\n            [organization_id]=\"organization_id\"\n            [formatEvidanceData]=\"policyForm?.associatedDocuments\"></app-format-and-evidence>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Programs & Responsibilities -->\n    <div *ngIf=\"policyForm?.addLinkProgram\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === 'linkProgram'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'linkProgram' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"\n          policyForm?.programSelectedValues?.program?.category_id\n        \">\n        <img *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\" [src]=\"ASSETS.link_items\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK PROGRAMS & RESPONSIBILITIES</label>\n          <div *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n            (click)=\"activateSelector('linkProgram', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select Programs & responsibilities that are<br />associated with\n              this policy.\n            </div>\n          </div>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n            *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i (click)=\"\n                  remove('linkProgram', policyForm?.programSelectedValues)\n                \" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\"\n                [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\" placement=\"bottom-left\" delay=\"0\"\n                type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.programSelectedValues?.program?.name }}</span>\n              <!-- <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                appPopover\n                (click)=\"programResponsibilityPopover.popover()\"\n                placement=\"left\"\n              >\n                +4\n              </button> -->\n            </div>\n            <app-popover #programResponsibilityPopover [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\" [appTooltip]=\"\n                          'Reporting information security weaknesses'\n                        \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                        <i class=\"icons\">&#xe90d;</i>\n                        Reporting information security weaknesses\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n            <button\n              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\"\n              (click)=\"activateSelector('linkProgram', true)\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Assessment -->\n    <div *ngIf=\"policyForm.addLinkAssessment\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === 'isAssessment'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'isAssessment' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\n        <img *ngIf=\"!policyForm?.assessment?.length\" [src]=\"ASSETS.assessments\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.assessment?.length\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK ASSESSMENTS</label>\n          <div *ngIf=\"policyForm?.assessment?.length === 0\" (click)=\"activateSelector('isAssessment', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select assessments that are associated with this<br />policy.\n            </div>\n          </div>\n\n          <div *ngIf=\"policyForm?.assessment?.length > 0\"\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                policyForm.assessment[0]?.assessmentDetails?.assessment_name\n                }}</span>\n            </div>\n            <app-popover #programResponsibilityPopover [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"let assessment of policyForm.assessment | slice : 1\">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\" [appTooltip]=\"\n                          assessment?.assessmentDetails?.assessment_name\n                        \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                        <i class=\"icons\">&#xe90d;</i>\n                        {{ assessment?.assessmentDetails?.assessment_name }}\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n            <button (click)=\"activateSelector('isAssessment', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Related Polices -->\n\n    <div *ngIf=\"policyForm.addLinkPolicies\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === CONSTANTS.LINK_POLICY\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'isLinkedPolices' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"SelectedListOfPolicies\">\n        <img *ngIf=\"!SelectedListOfPolicies?.length\" [src]=\"LINKS.linkedPolicyImage\" alt=\"\" />\n\n        <svg *ngIf=\"SelectedListOfPolicies?.length\" class=\"checkIcon\" [xmlns]=\"LINKS.checked\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK RELATED POLICIES</label>\n          <div *ngIf=\"SelectedListOfPolicies?.length === 0\" (click)=\"activateSelector('isLinkedPolices', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select policies that are associated with this policy.\n            </div>\n          </div>\n\n          <div class=\"selected\" *ngIf=\"SelectedListOfPolicies?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let policy of SelectedListOfPolicies.slice(0, 1)\">\n                <i (click)=\"remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policy?.contract_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ policy?.contract_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                *ngIf=\"SelectedListOfPolicies?.length > 1\" type=\"button\" appPopover (click)=\"relatedPolicy.popover()\"\n                placement=\"left\">\n                +{{ SelectedListOfPolicies?.slice(1).length }}\n              </button>\n            </div>\n            <button *ngIf=\"activeSelector !== CONSTANTS.LINK_POLICY\" class=\"edit\" type=\"button\"\n              (click)=\"activateSelector(CONSTANTS.LINK_POLICY, true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #relatedPolicy [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let policy of SelectedListOfPolicies | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"\n                          remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\n                        \">&#xe90d;</i>\n                      {{ policy?.contract_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-cs-switch [(ngValue)]=\"policyForm.isPortalDisplayEnabled\"\n            [class.disabled]=\"policyForm?.LinkedPolicies == 0\" class=\"who-toggle\">DISPLAY ON THE POLICY PORTAL\n            <i class=\"icons\" [appTooltip]=\"CONSTANTS.LINK_POLICY_HELP_TEXT\" placement=\"bottom-right\" type=\"white\"\n              delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <app-checkbox-list [config]=\"categoryConfig\" [twoColumn]=\"false\" [itemsList]=\"categoryList\"\n    [selectedItems]=\"policyForm.selectedCategories\" [identifierKey]=\"'_id'\" [displayKey]=\"'item_name'\"\n    [tooltipKey]=\"'item_name'\" *ngIf=\"activeSelector === 'category'\" (saveList)=\"saveSelectedList('category', $event)\"\n    (closeList)=\"disableSelector()\" [loaded]=\"!categoriesListLoaded\">\n  </app-checkbox-list>\n  <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\n  [itemsList]=\"\"\n  [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\n  (closeList)=\"fieldDeselector('ISSUE_CC')\">\n</app-checkbox-list> -->\n\n  <app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"rcList\"\n    [selectedResponsibilityCenters]=\"policyForm.selectedRCs\" [rcIdKey]=\"'item_id'\"\n    (saveSelectedList)=\"saveSelectedList('rc', $event)\" (closeRcList)=\"disableSelector()\" [loaded]=\"rcListLoaded\">\n  </app-responsibility-centers-list>\n\n  <app-link-related-policies *ngIf=\"activeSelector === CONSTANTS.LINK_POLICY\" [policyId]=\"policyId\" [mode]=\"mode\"\n    [selectedPolicies]=\"SelectedListOfPolicies\" (closeLinkPolicyList)=\"disableSelector()\"\n    (selectedList)=\"saveSelectedList(CONSTANTS.LINK_POLICY, $event)\"></app-link-related-policies>\n\n  <app-users-radio-list *ngIf=\"activeSelector === 'reviewer'\" [itemEmailKey]=\"'member_email'\" [usersList]=\"allReviewers\"\n    [headerText]=\"'Select a Reviewer'\" [selectedUsers]=\"policyForm.selectedReviewers\" [userIdKey]=\"'member_id'\"\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-users-radio-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\" [usersList]=\"overseersList\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [selectedUsers]=\"policyForm.CCEmail\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-owner-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\" [groupEnabled]=\"true\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\"\n    [groupList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.CCEmail\" [selectedGroups]=\"policyForm.CCGroupEmail\" [isPaginationEnabled]=\"isPaginationEnabled\"\n    (save)=\"saveSelectedList('ccEmail', $event)\" (cancel)=\"disableSelector()\" [featureflag]=\"groupEnabled\" (fetchUserData)=\"getUsersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\" [usersList]=\"overseersList\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [selectedUsers]=\"policyForm.CCFailEmail\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-owner-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'ccFail' && groupEnabled\" [groupEnabled]=\"true\"\n    [groupList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.CCFailEmail\"\n    [selectedGroups]=\"policyForm.CCFailEmailGroup\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\" [isPaginationEnabled]=\"isPaginationEnabled\" (save)=\"saveSelectedList('ccFail', $event)\"\n    (cancel)=\"disableSelector()\" [featureflag]=\"groupEnabled\" (fetchUserData)=\"getUsersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-group-users-list *ngIf=\"activeSelector === 'assignees' && !groupEnabled\" [usersList]=\"assigneesList\"\n    [groupsList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.selectedAssignees\" [userIdKey]=\"'my_member_id'\"\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\" (closeUsersList)=\"disableSelector()\">\n  </app-group-users-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'assignees' && groupEnabled\" [groupEnabled]=\"true\"\n    [groupList]=\"overseerGroupsList\" (save)=\"saveSelectedList('assignees', $event)\" (cancel)=\"disableSelector()\"\n    [selectedGroups]=\"policyForm.selectedGroupAssignee\" [selectedUsers]=\"policyForm.selectedAssignees\"\n    [featureflag]=\"groupEnabled\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\" [isPaginationEnabled]=\"isPaginationEnabled\" (fetchUserData)=\"getUsersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'approvers' && false\" [listHeading]=\"'Select Approvers'\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"true\"\n    [selectedUsers]=\"\n      addMoreLevels\n        ? []\n        : policyForm.selectedApprovers[approversListIndex].approvers\n    \" [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\n    (saveSelectedList)=\"saveSelectedList('approvers', $event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\n    [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n    [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\n  </app-owner-list>\n\n  <app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [mode]=\"'policy'\"\n    [frequencyDetails]=\"frequencyDetails\" (selectedFrequency)=\"frequencyData($event)\" [feature]=\"feature\"\n    [pageType]=\"'policy'\" (closeFrequency)=\"disableSelector()\"></app-frequency-container>\n\n  <app-frequency-container *ngIf=\"activeSelector === 'reviewerFrequency'\" [mode]=\"'reviewerFrequency'\"\n    [frequencyDetails]=\"reviewerFrequencyDetails\" (selectedFrequency)=\"reviewerFrequencyData($event)\"\n    [feature]=\"feature\" [pageType]=\"'policy'\" (closeFrequency)=\"disableSelector()\"></app-frequency-container>\n\n  <vc-link-program *ngIf=\"activeSelector === 'linkProgram'\" (close)=\"disableSelector()\" [policy]=\"policyForm\"\n    [selectedProgram]=\"policyForm?.programSelectedValues\" [mode]=\"mode\" [selectedLinkProgram]=\"selectedLinkProgram\"\n    (changeTab)=\"changeTab('linkedPrograms')\" (updatedProgramDetails)=\"updatedProgramDetails($event)\">\n  </vc-link-program>\n\n  <app-checkpoints-policy-container (closeCheckPoint)=\"disableSelector()\"\n    [checkpointData]=\"policyForm?.checkpointDetails\" [requiredPoint]=\"policyForm?.passingMarks\"\n    *ngIf=\"activeSelector === 'checkpoints'\"\n    (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"></app-checkpoints-policy-container>\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n  <app-approval-workflow *ngIf=\"enableApprovalWorkflow\" [selectedCategory]=\"policyForm?.selectedCategories\"\n    [approverWorkFlowList]=\"approverWorkFlowList\" [allApprovers]=\"allApprovers\"\n    (listCancelClicked)=\"listCancelClicked($event)\" (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\n    (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\" [editApprovalWorkflow]=\"editApprovalWorkflow\"\n    [createApprovalClick]=\"createApprovalClick\" (closeCreateClicked)=\"closeClickedCreateForm()\"\n    [editWorkflowLevel]=\"editWorkflowLevel\"></app-approval-workflow>\n  <!-- <app-select-approvers></app-select-approvers> -->\n\n  <app-policy-access *ngIf=\"activeSelector === 'policyAccess'\" [policyAccessType]=\"policyForm?.policy_access_type\"\n    (close)=\"disableSelector()\" [orgUsersList]=\"paginatedUsersList?.users\" [usersAccessList]=\"usersAccessList\"\n    [groupList]=\"overseerGroupsList\" [groupsAccessList]=\"groupsAccessList\"\n    [selectedUsers]=\"policyForm?.policy_access_owners\" [selectedGroups]=\"policyForm?.policy_access_groups\"\n    [disabledIds]=\"usersAccessListIds\" [disabledGroupIds]=\"groupsAccessListIds\"\n    [futureUsersWillSelect]=\"policyForm?.availableOnPortal\" (saveCheckPoint)=\"saveSelectedList('policyAccess', $event)\"\n    (setPolicyAccessType)=\"policyForm.policy_access_type = $event\" [loading]=\"paginatedUsersList?.loading\" [userListInfo]=\"paginatedUsersList\" [isPaginationEnabled]=\"isPaginationEnabled\" (fetchUserData)=\"getUsersListWithPagination($event)\" [featureflag]=\"groupEnabled\">\n  </app-policy-access>\n</ng-container>\n<ng-container *ngIf=\"showCreateDocuments\">\n  <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\n   [organization_id]=\"organization_id\"\n   [member_obj_id]=\"member_obj_id\"\n   [userInfo]=\"userInfo\"\n   [policyId]=\"policyId\"\n   [policyName]=\"policyForm.policyName\"\n   (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n   (editPolicy)=\"editPolicyFromDocuments()\"\n   ></app-create-documents> -->\n  <lib-document-section *ngIf=\"showCreateDocuments\" [templateView]=\"templateView\" [organization_id]=\"organization_id\"\n    [member_obj_id]=\"member_obj_id\" [userInfo]=\"userInfo\" [policyId]=\"policyId\" [feature]=\"feature\"\n    [templateUrl]=\"templateUrl\" [policyName]=\"policyForm.policyName\" (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n    (editPolicy)=\"editPolicyFromDocuments()\" (openTemplate)=\"templateView = true\"></lib-document-section>\n</ng-container>\n\n<app-assessment-list *ngIf=\"activeSelector === 'isAssessment'\" [program_ids]=\"''\"\n  [isEdit]=\"policyForm?.assessment?.length\" (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\n  [selectedAssessment]=\"policyForm?.assessment[0]\" [mode]=\"'policy'\" (onAssessmentSelect)=\"\n    onAssessmentSelect($event); saveSelectedList('isAssessment', false)\n  \"></app-assessment-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'approvers' && false\" [listHeading]=\"'Select Approvers'\"\n  [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"true\"\n  [selectedUsers]=\"\n    addMoreLevels\n      ? []\n      : policyForm.selectedApprovers[approversListIndex].approvers\n  \" [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('approvers', $event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\n  [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n  [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\n</app-owner-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'owners'\" [listHeading]=\"'Select Owner(s)'\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"false\" [userIdKey]=\"'member_id'\"\n  [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('owners', $event)\"\n  (closeUsersList)=\"disableSelector()\" [mode]=\"mode\" [selectedUsers]=\"policyForm?.policy_owners ?? []\">\n</app-owner-list>\n\n<app-select-template-list *ngIf=\"templateView\" [selectedCategoryId]=\"policyForm?.selectedCategories\" [feature]=\"feature\"\n  (onTemplateSelect)=\"onTemplateSelect($event)\"></app-select-template-list>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility-inner-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}.who-toggle{margin-top:10px}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.right app-format-and-evidence~.error-message{position:relative;top:-12px}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i4.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponent, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { kind: "component", type: i5.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "isPaginationEnabled", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText", "loaded"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: GroupUsersListComponent, selector: "app-group-users-list", inputs: ["groupsEnabled", "usersList", "groupsList", "selectedUsers", "userIdKey", "groupIdKey", "openedFrom", "selectedGroups", "assigneeGroupsList", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "loader", "isDisabledSelected"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: SelectTemplateListComponent, selector: "app-select-template-list", inputs: ["selectedCategoryId", "feature"], outputs: ["onTemplateSelect"] }, { kind: "component", type: FormatAndEvidenceComponent, selector: "app-format-and-evidence", inputs: ["mode", "categories", "organization_id", "formatEvidanceData", "isMandatory"], outputs: ["updateFiles"] }, { kind: "component", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: ["itemsList", "selectedItems", "identifierKey", "displayKey", "tooltipKey", "config", "twoColumn", "loaded"], outputs: ["closeList", "saveList"] }, { kind: "component", type: OwnerListComponent, selector: "app-owner-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "showWorkflow", "listHeading", "searchPlaceholder", "pluralText", "singularText", "reviewerWorkflowType", "mode", "noDataText", "workflowList", "workflowText", "disabledIds", "nonRemovableUsersList", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds"], outputs: ["saveSelectedList", "closeUsersList", "reviewerWorkflowTypeChange"] }, { kind: "component", type: UserRadioListComponent, selector: "app-users-radio-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "headerText", "loaded"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: FrequencyContainerComponent, selector: "app-frequency-container", inputs: ["frequencyDetails", "mode", "feature", "pageType"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "component", type: CheckpointsPolicyContainerComponent, selector: "app-checkpoints-policy-container", inputs: ["requiredPoint", "checkpointData"], outputs: ["closeCheckPoint", "saveCheckPoint"] }, { kind: "component", type: DocumentSectionComponent, selector: "lib-document-section", inputs: ["selectedDocumentType", "feature", "templateView", "policyId", "policyName", "organization_id", "member_obj_id", "userInfo", "templateUrl"], outputs: ["disconnectRefresh", "editPolicy", "openTemplate"] }, { kind: "component", type: AssessmentListComponent, selector: "app-assessment-list", inputs: ["isEdit", "mode", "selectedAssessment", "selectedAssessmentData", "program_ids"], outputs: ["onAssessmentSelect", "cancelAssessment"] }, { kind: "component", type: ApprovalWorkflowComponent, selector: "app-approval-workflow", inputs: ["approverWorkFlowList", "allApprovers", "selectedCategory", "editApprovalWorkflow", "createApprovalClick", "editWorkflowLevel"], outputs: ["selectedWorkflowNext", "listCancelClicked", "saveApprovalWorkflow", "closeCreateClicked"] }, { kind: "component", type: PolicyAccessComponent, selector: "app-policy-access", inputs: ["policyAccessType", "SelectedCategory", "orgUsersList", "groupList", "selectedUsers", "selectedGroups", "disabledIds", "usersAccessList", "groupsAccessList", "disabledGroupIds", "futureUsersWillSelect", "loading", "userListInfo", "isPaginationEnabled", "featureflag"], outputs: ["close", "saveCheckPoint", "setPolicyAccessType", "fetchUserData"] }, { kind: "component", type: LinkProgramComponent, selector: "vc-link-program", inputs: ["policy", "currentTab", "mode", "programsList", "selectedProgram", "selectedCategories", "selectedLinkProgram", "hideProgramsList"], outputs: ["changeTab", "updatedProgramDetails", "save", "close", "refreshLinkedPolicies"] }, { kind: "component", type: LinkRelatedPoliciesComponent, selector: "app-link-related-policies", inputs: ["selectedPolicies", "mode", "policyId"], outputs: ["closeLinkPolicyList", "selectedList"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowPolicyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-workflow-policy', template: "<!-- <p>workflow-policy works!</p> -->\n\n<ng-container *ngIf=\"!showCreateDocuments\">\n  <div class=\"workflow-policy\">\n    <!-- Policy Name -->\n    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\n        <img [src]=\"ASSETS.what\" alt=\"name\" *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\" />\n\n        <svg *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Policy Name <span class=\"required\">*</span>\n          </label>\n          <input type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name', true)\"\n            *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\n            (focusout)=\"activateSelector('name', false)\" [ngModel]=\"policyForm.policyName\"\n            (ngModelChange)=\"policyForm.policyName = changeName($event)\" placeholder=\"Name this policy\" />\n          <div class=\"selected\" *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\">\n            <div class=\"chip-container\">\n              <span class=\"value\">{{ policyForm.policyName }}</span>\n            </div>\n            <button class=\"edit\" (click)=\"activateSelector('name', true)\" type=\"button\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n\n          <p *ngIf=\"submitted && !policyForm.policyName.trim()\" [appScrollInView]=\"true\" class=\"error-message\">\n            Please enter a name for this policy.\n          </p>\n          <vcomply-editor [(ngModel)]=\"policyForm.policyNotes\" [editorConfig]=\"description\"></vcomply-editor>\n          <!-- <app-cs-switch\n            [(ngValue)]=\"policyForm.availableOnPortal\"\n            (ngValueChange)=\"availabilityOnPortal($event)\"\n          >\n            Do you want this policy to be available on the portal?\n            <i\n              class=\"icons\"\n              [appTooltip]=\"\n                '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.'\n              \"\n              placement=\"bottom-right\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe932;</i\n            >\n          </app-cs-switch>\n          <app-cs-switch\n            *ngIf=\"policyForm.availableOnPortal\"\n            [(ngValue)]=\"policyForm.acceptSuggestions\"\n          >\n            Accept suggestions\n            <i\n              class=\"icons\"\n              [appTooltip]=\"\n                'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n              \"\n              placement=\"bottom-right\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe932;</i\n            ></app-cs-switch> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Category -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'category' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedCategories?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedCategories?.length == 0 ||\n            activeSelector === 'category'\n          \" [src]=\"ASSETS.case_category\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedCategories?.length > 0 &&\n            activeSelector !== 'category'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Policy Category <span class=\"required\">*</span>\n          </label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedCategories?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('category', true)\"\n              placeholder=\"Select a category for this policy.\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedCategories?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"\n                  let category of policyForm?.selectedCategories?.slice(0, 1)\n                \">\n                <i (click)=\"remove('category', category)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"category.item_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ category.item_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                *ngIf=\"policyForm?.selectedCategories?.length > 1\" type=\"button\" appPopover (click)=\"category.popover()\"\n                placement=\"left\">\n                +{{ policyForm?.selectedCategories?.slice(1).length }}\n              </button>\n            </div>\n\n            <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\n                          [class.plus]=\"policyForm?.selectedCategories?.length>2\">\n                          <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\n                                  class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\n                              {{category.item_name}}</span>\n                          <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\n                              appPopover (click)=\"category.popover()\" placement=\"right\">+\n                              {{policyForm?.selectedCategories?.slice(2).length}}</button>\n                      </div> -->\n            <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\n              (click)=\"activateSelector('category', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #category [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let category of policyForm?.selectedCategories | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('category', category)\">&#xe90d;</i>\n                      {{ category.item_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <p *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\" [appScrollInView]=\"true\"\n            class=\"error-message\">\n            Please select the category for this policy.\n          </p>\n        </div>\n\n        <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\n          <ng-container *ngFor=\"let tag of policyForm?.customTags\">\n            <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\n            <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{ tag.tagname }}\" />\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <!-- Effective Date -->\n    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"false\">\n        <img [src]=\"ASSETS.when\" alt=\"\" />\n\n        <svg *ngIf=\"false\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Effective Date</label>\n          <div class=\"date-time-picker\">\n            <div class=\"picker-group\">\n              <input type=\"text\" readonly placeholder=\"Select the effective date of the policy.\"\n                [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\" (click)=\"openDatePicker()\"\n                id=\"effective-date\" />\n              <i class=\"icons\">&#xe92d;</i>\n              <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\n                [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n              </dp-date-picker>\n              <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Owner -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'owners'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'owners' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\n        <img *ngIf=\"!policyForm.policy_owners?.length\" [src]=\"ASSETS.im_creating\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm.policy_owners?.length\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\n          </div>\n          <div *ngIf=\"!policyForm.policy_owners?.length\" (click)=\"activateSelector('owners', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select owners for this policy.\n            </div>\n          </div>\n\n          <div *ngIf=\"policyForm.policy_owners?.length\"\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"vx-d-flex vx-align-center\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.policy_owners[0]?.member_name }}</span>\n\n                <button *ngIf=\"policyForm?.policy_owners?.length > 1\"\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"policyUserPopover.popover()\" placement=\"left\">\n                  + {{ policyForm?.policy_owners.length - 1 }}\n                </button>\n              </div>\n              <div *ngIf=\"false\" class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\">\n                &\n              </div>\n              <div *ngIf=\"false\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"'Samantha Jones'\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Samantha Jones</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"policyGroupPopover.popover()\" placement=\"right\">\n                  +4\n                </button>\n              </div>\n              <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\n                <div class=\"wf-action-list\">\n                  <ul class=\"action-item\">\n                    <li *ngFor=\"\n                        let owner of policyForm?.policy_owners | slice : 1;\n                        let i = index\n                      \">\n                      <div class=\"avatar-card\">\n                        <span class=\"value\" [appTooltip]=\"owner?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                          type=\"black\" [tooltipMandatory]=\"false\">\n                          <i (click)=\"remove('owners', owner, i + 1)\" class=\"icons\">&#xe90d;</i>\n                          {{ owner?.member_name }}\n                        </span>\n                      </div>\n                    </li>\n                  </ul>\n                </div>\n              </app-popover>\n              <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\n                <div class=\"wf-action-list\">\n                  <ul class=\"action-item\">\n                    <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n                      <div class=\"avatar-card\">\n                        <span class=\"value\" [appTooltip]=\"'Harshvardhan Kariwala'\" placement=\"bottom-left\" delay=\"0\"\n                          type=\"black\" [tooltipMandatory]=\"false\">\n                          <i class=\"icons\">&#xe90d;</i>\n                          Harshvardhan Kariwala\n                        </span>\n                      </div>\n                    </li>\n                  </ul>\n                </div>\n              </app-popover>\n            </div>\n            <button (click)=\"activateSelector('owners', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n          <p *ngIf=\"submitted && !policyForm?.policy_owners?.length\" [appScrollInView]=\"true\" class=\"error-message\">\n            Select owners for this policy.\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Review -->\n    <div class=\"form-group-row\" [class.active]=\"\n        activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\n      \" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'reviewer' &&\n        activeSelector !== 'reviewerFrequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\n        <img *ngIf=\"!policyForm?.addReviewers\" [src]=\"ASSETS.reviewer\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.addReviewers\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">REVIEW</label>\n          <div class=\"reviewSelection vx-p-3 vx-pb-0\" [class.disabled]=\"\n              activeSelector && sideSelectorElements.includes(activeSelector)\n            \">\n            <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\n              Does this policy need to be reviewed?\n            </div>\n            <app-cs-radio name=\"review-type\" [checked]=\"policyForm?.addReviewers\" (checkedEvent)=\"typeSelected(true)\">\n              <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n                YES\n              </div>\n            </app-cs-radio>\n            <app-cs-radio name=\"review-type\" [checked]=\"!policyForm?.addReviewers\" (checkedEvent)=\"typeSelected(false)\">\n              <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n                NO\n              </div>\n            </app-cs-radio>\n          </div>\n\n          <ng-container *ngIf=\"policyForm?.addReviewers\">\n            <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\n            <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n              *ngIf=\"policyForm?.selectedReviewers?.length == 0\" [appScrollInView]=\"scrollToBottom\"\n              [class.active]=\"activeSelector === 'reviewer'\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewer' &&\n                sideSelectorElements.includes(activeSelector)\n              \" (click)=\"activateSelector('reviewer', true)\">\n              <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                Select the person responsible for reviewing this policy\n              </div>\n            </div>\n\n            <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n              *ngIf=\"policyForm?.selectedReviewers?.length > 0\" [class.active]=\"activeSelector === 'reviewer'\"\n              [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewer' &&\n                sideSelectorElements.includes(activeSelector)\n              \">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\">\n                <i (click)=\"remove('reviewer', reviewer)\"\n                  class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"'Samantha Jones'\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                  {{ reviewer?.member_name }}</span>\n              </div>\n              <button\n                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\"\n                *ngIf=\"activeSelector !== 'reviewer'\" (click)=\"activateSelector('reviewer', true)\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n            <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\n            <div *ngIf=\"policyForm?.review_frequency_details == ''\"\n              class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n              [class.active]=\"activeSelector === 'reviewerFrequency'\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewerFrequency' &&\n                sideSelectorElements.includes(activeSelector)\n              \" (click)=\"activateSelector('reviewerFrequency', true)\">\n              <div class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                When does this policy needs to be reviewed?\n              </div>\n              <div (click)=\"activateSelector('reviewerFrequency', true)\"\n                class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\n                SET A FREQUENCY\n              </div>\n            </div>\n\n            <div *ngIf=\"policyForm?.review_frequency_details != ''\"\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewerFrequency' &&\n                sideSelectorElements.includes(activeSelector)\n              \" [class.active]=\"activeSelector === 'reviewerFrequency'\">\n              <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [appTooltip]=\"reviewerFrequencyPlaceholder\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                {{ reviewerFrequencyPlaceholder }}\n              </div>\n              <button *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n                (click)=\"activateSelector('reviewerFrequency', true)\"\n                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\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n            <p *ngIf=\"\n                submitted &&\n                policyForm?.selectedReviewers?.length > 0 &&\n                !policyForm?.review_frequency_details\n              \" class=\"error-message\" [appScrollInView]=\"true\">\n              Select the review schedule for this policy.\n            </p>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <!-- New Approval Workflow -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'approvers'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'approvers' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedApprovers?.length == 0 ||\n            activeSelector === 'approvers'\n          \" [src]=\"ASSETS.approval\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedApprovers?.length > 0 &&\n            activeSelector !== 'approvers'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">APPROVAL <span class=\"required\">*</span></label>\n            <button (click)=\"\n                createApprovalWorkflow(); activateSelector('approvers', true)\n              \" [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n              class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\">\n              CREATE A NEW APPROVAL WORKFLOW\n            </button>\n          </div>\n          <div *ngIf=\"\n              selectedWorkflow?.length === 0 ||\n              !selectedWorkflow[0]?.workflow_name\n            \" (click)=\"\n              clickApprovalWorkflow(true); activateSelector('approvers', true)\n            \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select the approval workflow for this policy\n            </div>\n          </div>\n          <div *ngIf=\"\n              selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\n            \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\">\n            <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i (click)=\"removeWorkflow()\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  selectedWorkflow[0]?.workflow_name }}</span>\n              </div>\n              <button (click)=\"editWorkflow(selectedWorkflow[0])\"\n                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\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\n            <div *ngFor=\"\n                let approval of selectedWorkflow[0]?.approval_workflow;\n                let approvalIndex = index\n              \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\">\n              <div class=\"vx-d-flex vx-align-center\">\n                <div class=\"level-left vx-d-flex vx-align-center\">\n                  <div class=\"vx-d-block\">\n                    <div class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\" [appTooltip]=\"\n                        approval?.alias_name\n                          ? approval?.alias_name\n                          : approval?.level1\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                      {{\n                      approval?.alias_name\n                      ? approval?.alias_name\n                      : approval?.level1\n                      }}\n                    </div>\n                    <div class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\">\n                      {{\n                      approval?.type === \"ROUNDROBIN\"\n                      ? \"ROUND-ROBIN\"\n                      : approval?.type === \"ANYONE\"\n                      ? \"ANY ONE\"\n                      : approval?.type\n                      }}\n                    </div>\n                  </div>\n                </div>\n                <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\">\n                  <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                    >&#xe9ae;</i\n                  > -->\n                  <div *ngIf=\"\n                      approval?.type?.toLowerCase() === 'sequential' &&\n                      approval?.approvers?.length < 2\n                    \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\n                  </div>\n                  <div *ngIf=\"\n                      approval?.approvers?.length > 1 &&\n                      approval?.type?.toLowerCase() === 'sequential'\n                    \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    1\n                  </div>\n                  <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"approval?.approvers[0]?.member_name\"\n                    placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                    approval?.approvers[0]?.member_name }}</span>\n                  <button *ngIf=\"approval?.approvers?.length > 1\"\n                    class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                    appPopover (click)=\"workflowPopover.popover()\" placement=\"right\">\n                    +{{ approval?.approvers?.length - 1 }}\n                  </button>\n                </div>\n                <app-popover #workflowPopover [dontCloseonClick]=\"true\">\n                  <div class=\"wf-action-list\">\n                    <ul class=\"action-item\">\n                      <li *ngFor=\"\n                          let approver of approval?.approvers | slice : 1;\n                          let approvalIndex = index\n                        \">\n                        <div class=\"avatar-card\">\n                          <span class=\"value\" [appTooltip]=\"approver?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                            type=\"black\" [tooltipMandatory]=\"false\">\n                            <!-- <i class=\"icons\">&#xe90d;</i> -->\n                            <span *ngIf=\"\n                                approval?.type?.toLowerCase() === 'sequential'\n                              \"\n                              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">{{\n                              approvalIndex + 1 ===\n                              approval?.approvers?.length - 1\n                              ? \"Final\"\n                              : approvalIndex + 2\n                              }}</span>\n                            {{ approver?.member_name }}\n                          </span>\n                        </div>\n                      </li>\n                    </ul>\n                  </div>\n                </app-popover>\n              </div>\n\n              <!-- <div class=\"vx-d-flex vx-align-center\">\n                <button (click)=\"editLevelClicked(approval,approvalIndex)\"\n                  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\"\n                >\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                </button>\n                <button (click)=\"deleteLevel(approvalIndex)\"\n                  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\"\n                >\n                  <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\n                </button>\n              </div> -->\n            </div>\n          </ng-container>\n          <p *ngIf=\"\n              submitted &&\n              !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\n              !policyApprovalFlag &&\n              !policyForm?.selectedApprovers[0]?.approvers?.length\n            \" [appScrollInView]=\"true\" class=\"error-message\">\n            Select or create an approval workflow for this policy.\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Access -->\n    <div *ngIf=\"true\" class=\"form-group-row\" [class.active]=\"activeSelector === 'policyAccess'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'policyAccess' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"true\">\n        <img *ngIf=\"\n            !policyForm?.policy_access_owners?.length &&\n            !policyForm?.policy_access_groups?.length &&\n            !policyForm?.availableOnPortal\n          \" [src]=\"ASSETS.lock_scope\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.policy_access_owners?.length ||\n            policyForm?.policy_access_groups?.length ||\n            policyForm?.availableOnPortal\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">POLICY PORTAL ACCESS</label>\n          </div>\n          <div *ngIf=\"\n              !policyForm?.policy_access_owners?.length &&\n              !policyForm?.policy_access_groups?.length &&\n              !policyForm?.availableOnPortal\n            \" (click)=\"activateSelector('policyAccess', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Who should be able to view this policy?\n            </div>\n          </div>\n\n          <ng-container *ngIf=\"!policyForm?.availableOnPortal\">\n            <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3\" *ngIf=\"\n                policyForm?.policy_access_owners?.length ||\n                policyForm?.policy_access_groups?.length\n              \">\n              <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\">\n                <div class=\"vx-d-flex vx-align-center\">\n                  <div *ngIf=\"policyForm?.policy_access_owners?.length\"\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                      *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"\n                        remove(\n                          'policyAccess',\n                          policyForm?.policy_access_owners[0]\n                        )\n                      \">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                        policyForm?.policy_access_owners[0]?.employee_name\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                      policyForm?.policy_access_owners[0]?.employee_name\n                      }}</span>\n                    <button *ngIf=\"policyForm?.policy_access_owners?.length > 1\"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                      appPopover (click)=\"policyAccessPopover.popover()\" placement=\"left\">\n                      +{{ policyForm?.policy_access_owners.length - 1 }}\n                    </button>\n                  </div>\n\n                  <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                      policyForm?.policy_access_owners.length > 0 &&\n                      policyForm?.policy_access_groups.length > 0\n                    \">\n                    &\n                  </div>\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngIf=\"policyForm?.policy_access_groups.length > 0\">\n                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                      *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"\n                        remove(\n                          'accessGroup',\n                          policyForm?.policy_access_groups[0]\n                        )\n                      \">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                        policyForm?.policy_access_groups[0]?.group_name\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                      policyForm?.policy_access_groups[0]?.group_name\n                      }}</span>\n                    <button\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"accessGroup.popover()\" placement=\"right\"\n                      *ngIf=\"policyForm?.policy_access_groups.length > 1\">\n                      +{{ policyForm?.policy_access_groups.length - 1 }}\n                    </button>\n                  </div>\n\n                  <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let user of policyForm?.policy_access_owners\n                              | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\" [appTooltip]=\"user?.employee_name\" placement=\"bottom-left\" delay=\"0\"\n                              type=\"black\" [tooltipMandatory]=\"false\">\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\"\n                                (click)=\"remove('policyAccess', user)\">&#xe90d;</i>\n                              {{ user?.employee_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                  <app-popover #accessGroup [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let data of policyForm?.policy_access_groups\n                              | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\">\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\"\n                                (click)=\"remove('accessGroup', data)\">&#xe90d;</i>\n                              {{ data?.group_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </div>\n\n                <button (click)=\"activateSelector('policyAccess', true)\"\n                  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\">\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                </button>\n              </div>\n\n              <!-- <div class=\"vx-mt-4 vx-mb-2\">\n                <app-cs-radio\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 0\" (checkedEvent)=\"setAccessField(0)\"\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\n                    Everyone who has access to this Policy Category\n                  </div></app-cs-radio\n                >\n                <app-cs-radio\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 1\" (checkedEvent)=\"setAccessField(1)\"\n                class=\"vx-mt-1\"\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\n                    Select users/groups\n                  </div></app-cs-radio\n                >\n              </div> -->\n            </div>\n          </ng-container>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n            *ngIf=\"policyForm?.availableOnPortal\">\n            <span class=\"vx-fs-13 vx-paragraph-txt\">Visible to All Current & Future Users</span>\n\n            <button (click)=\"activateSelector('policyAccess', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n\n          <div class=\"vx-mt-2\">\n            <app-cs-switch *ngIf=\"\n                policyForm.availableOnPortal ||\n                policyForm?.policy_access_owners?.length ||\n                policyForm?.policy_access_groups?.length\n              \" [(ngValue)]=\"policyForm.acceptSuggestions\">ACCEPT SUGGESTIONS\n              <i class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\" [appTooltip]=\"\n                  'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n                \" placement=\"bottom-right\" delay=\"0\" type=\"white\"\n                [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Approval Workflow -->\n    <div class=\"form-group-row\" *ngIf=\"false\" [class.active]=\"activeSelector === 'approvers'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'approvers' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedApprovers?.length == 0 ||\n            activeSelector === 'approvers'\n          \" [src]=\"ASSETS.approval\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedApprovers?.length > 0 &&\n            activeSelector !== 'approvers'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group approval-workflow\" [class.disabled]=\"policyApprovalFlag !== 0\">\n          <label class=\"vx-control-panel\">\n            Approval workflow <span class=\"required\">*</span>\n            <button (click)=\"\n                activateSelector('approvers', true);\n                addMoreLevels = true;\n                workflowType = 'SEQUENTIAL'\n              \" class=\"button\">\n              Create a new Approval Workflow\n            </button>\n          </label>\n          <div class=\"select\" [class.disabled]=\"approverWorkFlowList?.length == 0\" *ngIf=\"\n              policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\n              policyForm?.selectedApprovers.length == 0\n            \">\n            <cs-select [ngModel]=\"selectedApprovalWorkflow\" (ngModelChange)=\"selectedWorkflowChange($event)\"\n              [placeholder]=\"'Select approval workflow for this policy'\" name=\"selectedApprovalWorkflow\"\n              [setMaxWidth]=\"true\">\n              <cs-option *ngFor=\"let data of approverWorkFlowList\" [value]=\"data\">\n                {{ data.workflow_name }}\n              </cs-option>\n              <cs-option [value]=\"-1\" (click)=\"\n                  activateSelector('approvers', true);\n                  addMoreLevels = true;\n                  workflowType = 'SEQUENTIAL'\n                \">Create a new approval workflow</cs-option>\n            </cs-select>\n          </div>\n          <ng-container *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\">\n            <div class=\"selected\" *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\">\n              <div class=\"workflow-label\">\n                <p class=\"title\">Level {{ i + 1 }}</p>\n                <p class=\"description\">{{ level.name }}</p>\n              </div>\n              <div class=\"vx-d-flex vx-align-center\">\n                <div class=\"chip-container\">\n                  <span class=\"chip\" *ngFor=\"\n                      let approver of level.approvers.slice(0, 1);\n                      let j = index\n                    \"><i class=\"icons\" (click)=\"remove('approvers', approver, i)\">&#xe90d;</i>\n                    <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\n                      j + 1\n                      }}</span>{{ approver.member_name }}</span>\n\n                  <button class=\"count\" *ngIf=\"level.approvers?.length > 1\" type=\"button\" appPopover\n                    (click)=\"labelName.popover()\" placement=\"left\">\n                    +\n\n                    {{ level.approvers.slice(1).length }}\n                  </button>\n                  <app-popover #labelName [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let approver of level.approvers | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\">\n                              <i class=\"icons\" (click)=\"remove('approvers', approver, i)\">&#xe90d;</i>\n                              <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">\n                                {{\n                                j == level.approvers.slice(1).length - 1\n                                ? \"Final\"\n                                : j + 2\n                                }}\n                              </span>\n                              {{ approver.member_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </div>\n                <button class=\"edit\" type=\"button\" (click)=\"\n                    activateSelector('approvers', true, level.name);\n                    approversListIndex = i\n                  \">\n                  <i class=\"icons\">&#xe9ba;</i>Edit\n                </button>\n                <button class=\"close-btn\" (click)=\"remove('workflowLevel', level, i)\">\n                  <i class=\"icons\">&#xe90d;</i>\n                </button>\n              </div>\n            </div>\n          </ng-container>\n\n          <p *ngIf=\"\n              submitted &&\n              !policyForm?.selectedApprovers?.length &&\n              !policyApprovalFlag\n            \" [appScrollInView]=\"true\" class=\"error-message\">\n            Select or create an approval workflow for this policy.\n          </p>\n\n          <label class=\"vx-control-panel\" *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"><button\n              class=\"button\" (click)=\"\n                activateSelector('approvers', true);\n                addMoreLevels = true;\n                workflowType = 'SEQUENTIAL'\n              \">\n              + Add More Levels\n            </button></label>\n        </div>\n      </div>\n    </div>\n\n    <!-- Who / now Attestation -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'assignees' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedAssignees?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedAssignees?.length == 0 ||\n            activeSelector === 'assignees'\n          \" [src]=\"ASSETS.case_assignees\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedAssignees?.length > 0 &&\n            activeSelector !== 'assignees'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Attestation</label>\n          <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"\n              (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\n              (policyForm?.selectedAssignees?.length == 0 &&\n                groupEnabled &&\n                policyForm?.selectedGroupAssignee.length == 0)\n            \" (click)=\"activateSelector('assignees', true)\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select the persons responsible for attesting this policy.\n            </div>\n          </div>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\" *ngIf=\"\n              policyForm?.selectedAssignees?.length > 0 ||\n              policyForm?.selectedGroupAssignee?.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"\n                  let assignee of policyForm?.selectedAssignees?.slice(0, 1)\n                \">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('assignees', assignee)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assignee.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ assignee.employee_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"assigneePopover.popover()\" placement=\"left\"\n                *ngIf=\"policyForm?.selectedAssignees?.length > 1\">\n                +{{ policyForm?.selectedAssignees?.slice(1).length }}\n              </button>\n            </div>\n            <ng-container *ngIf=\"groupEnabled\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove('assignees', policyForm?.selectedAssignees[0])\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\"\n                  [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\"\n                  type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.selectedAssignees[0]?.employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"UserPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.selectedAssignees.length > 1\">\n                  +{{ policyForm?.selectedAssignees.length - 1 }}\n                </button>\n              </div>\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.selectedAssignees.length > 0 &&\n                  policyForm?.selectedGroupAssignee.length > 0\n                \">\n                &\n              </div>\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove(\n                      'groupAssignees',\n                      policyForm?.selectedGroupAssignee[0]\n                    )\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                    policyForm?.selectedGroupAssignee[0]?.group_name\n                  \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.selectedGroupAssignee[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"group.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\">\n                  +{{ policyForm?.selectedGroupAssignee.length - 1 }}\n                </button>\n              </div>\n            </ng-container>\n            <button\n              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\"\n              (click)=\"activateSelector('assignees', true)\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n\n          <p *ngIf=\"\n              submitted &&\n              ((policyForm?.selectedAssignees?.length == 0 &&\n                policyForm?.frequency_details &&\n                !groupEnabled) ||\n                (policyForm?.selectedAssignees?.length == 0 &&\n                  policyForm.selectedGroupAssignee.length == 0 &&\n                  policyForm?.frequency_details &&\n                  groupEnabled) ||\n                (isSendForAttestation &&\n                  policyForm?.selectedAssignees?.length === 0))\n            \" id=\"whovalidatemsg\" class=\"error-message\" [appScrollInView]=\"true\">\n            Select the persons required to attest to this Policy.\n          </p>\n          <app-cs-switch [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\n            [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\" class=\"who-toggle\">THIS POLICY REQUIRES\n            E-SIGNATURE FOR ATTESTATION\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, the readers will be required to attest this policy using their electronic signature.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n          <app-popover #assigneePopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\">&#xe90d;</i>\n                      {{ assignee.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #UserPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\">&#xe90d;</i>\n                      {{ assignee.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #group [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.selectedGroupAssignee | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('groupAssignees', data)\">&#xe90d;</i>\n                      {{ data.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <!-- overseer -->\n          <app-popover #overseerPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let overseer of policyForm?.CCEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\">&#xe90d;</i>\n                      {{ overseer?.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.CCGroupEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\">&#xe90d;</i>\n                      {{ data?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <!-- overseer end -->\n\n          <!-- overseer fail start -->\n          <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let overseer of policyForm?.CCFailEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccFail', overseer)\">&#xe90d;</i>\n                      {{ overseer?.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.CCFailEmailGroup | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccGroupFailEmail', data)\">&#xe90d;</i>\n                      {{ data?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <!-- overseer fail end -->\n        </div>\n      </div>\n    </div>\n\n    <!-- When -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'frequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">When?</label>\n\n          <div *ngIf=\"policyForm?.frequency_details == ''\" class=\"select button-sec\">\n            <div class=\"custom-input frequency-custom-input\" (click)=\"activateSelector('frequency', true)\">\n              {{ frequencyPlaceholder }}\n            </div>\n\n            <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n              Set A frequency\n            </button>\n          </div>\n          <!-- <div\n            *ngIf=\"policyForm?.frequency_details != ''\"\n            class=\"selected button-sec\"\n          > -->\n          <div *ngIf=\"policyForm?.frequency_details != ''\"\n            class=\"selected button-sec selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i (click)=\"remove('frequency', rc)\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ frequencyPlaceholder }}</span>\n            </div>\n            <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\n              (click)=\"activateSelector('frequency', true)\">\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button>\n            <!-- </div>\n            <span class=\"chip\">{{ frequencyPlaceholder }}</span>\n            <button\n              *ngIf=\"activeSelector !== 'frequency'\"\n              type=\"button\"\n              class=\"edit\"\n              (click)=\"activateSelector('frequency', true)\"\n            >\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button> -->\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              ((policyForm?.selectedAssignees?.length > 0 &&\n                !policyForm?.frequency_details &&\n                !groupEnabled) ||\n                ((policyForm?.selectedAssignees?.length > 0 ||\n                  policyForm?.selectedGroupAssignee?.length > 0) &&\n                  !policyForm?.frequency_details &&\n                  groupEnabled))\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select an attestation schedule for this policy.\n          </p>\n\n          <p *ngIf=\"submitted && policyForm?.frequency_details && policyForm?.selectedAssignees?.length > 0 && isPastDate\"\n            class=\"error-message\">\n            Set a future date.\n          </p>\n\n          <!-- <label class=\"vx-control-panel\">Effective Date</label>\n                  <div class=\"date-time-picker\">\n                      <div class=\"picker-group\">\n                          <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\n                              [value]=\"policyForm.policyDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\n                          <i class=\"icons\">&#xe92d;</i>\n                          <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\n                              [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n                          </dp-date-picker>\n                          <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n                      </div>\n                  </div> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Checkpoints / Assessment of Understanding -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"true\"\n      [class.active]=\"activeSelector === 'checkpoints'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'checkpoints' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Assessment of Understanding\n            <!-- <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n          </label>\n          <div class=\"select\" *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\n            (click)=\"activateSelector('checkpoints', true)\">\n            <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\n            <div class=\"custom-input\">\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\n              of the policy.\n            </div>\n          </div>\n          <div class=\"selected\" *ngIf=\"policyForm?.checkpointDetails?.length > 0\">\n            <!-- <div class=\"chip-container\">\n                      <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\n\n                      <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\n\n                      <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\n\n                    </div> -->\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('checkpoints', policyForm?.checkpointDetails)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\">{{\n                policyForm?.checkpointDetails?.length +\n                (policyForm?.checkpointDetails?.length > 1\n                ? \" Questions\"\n                : \" Question\")\n                }}</span>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\n                  <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                          <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\n                              <div class=\"avatar-card\">\n                                  <span class=\"value\">\n                                      <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\n                                      {{ checkpoint?.question }}\n                                  </span>\n                              </div>\n                          </li>\n                      </ul>\n                  </div>\n              </app-popover> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Risk Classification -->\n    <div class=\"form-group-row\" *ngIf=\"showRiskClassification && false\"\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\n        <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!policyForm?.riskRating\" />\n\n        <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"policyForm?.riskRating\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Risk Classification</label>\n          <div class=\"classification\">\n            <label class=\"low\" *ngFor=\"let class of riskClassification\" [ngClass]=\"[class.class]\">\n              <input type=\"radio\" name=\"classification\" [value]=\"class.value\"\n                [checked]=\"policyForm?.riskRating === class.value\" [(ngModel)]=\"policyForm.riskRating\" />\n              <span>{{ class.name }}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Responsibility Center -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addResponsibilityCenters\"\n      [class.active]=\"activeSelector === 'rc'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'rc' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\n          \" [src]=\"ASSETS.responsibility_center\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Responsibility Center</label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('rc', true)\"\n              placeholder=\"Select Responsibility Center(s) that this policy relates to.\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                appPopover (click)=\"rcPopover.popover()\" placement=\"left\" *ngIf=\"policyForm?.selectedRCs?.length > 1\">\n                +{{ policyForm?.selectedRCs?.slice(1).length }}\n              </button>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('rc', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #rcPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let rc of policyForm?.selectedRCs | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                      {{ rc.item_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n\n    <!-- Version -->\n    <div *ngIf=\"policyForm.addVersion\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.disabled]=\"\n        activeSelector && sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\n        <img [src]=\"ASSETS.associated_risks\" alt=\"name\" *ngIf=\"!policyForm.policy_version\" />\n\n        <svg *ngIf=\"policyForm.policy_version\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">VERSION</label>\n          <input [(ngModel)]=\"policyForm.policy_version\" (change)=\"onVersion($event)\" type=\"text\"\n            placeholder=\"Specify the policy version.\" />\n          <p *ngIf=\"!isVersionValid\" class=\"error-message\" [appScrollInView]=\"true\">\n            {{ versionErrorMessage }}\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Reviewer -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addReviewers && false\"\n      [class.active]=\"activeSelector === 'reviewer'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'reviewer' &&\n        activeSelector !== 'reviewerFrequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedReviewers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedReviewers?.length == 0 ||\n            activeSelector === 'reviewer'\n          \" [src]=\"ASSETS.reviewer\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedReviewers?.length > 0 &&\n            activeSelector !== 'reviewer'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Reviewer </label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedReviewers?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('reviewer', true)\"\n              placeholder=\"Select the person responsible for reviewing this policy\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedReviewers?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let reviewer of policyForm?.selectedReviewers\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('reviewer', reviewer)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ reviewer.member_name }}</span>\n              </ng-container>\n            </div>\n\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              policyForm?.selectedReviewers?.length == 0 &&\n              policyForm?.review_frequency_details\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select a reviewer for this policy.\n          </p>\n\n          <label class=\"vx-control-panel\">When? </label>\n\n          <div *ngIf=\"policyForm?.review_frequency_details == ''\" class=\"select button-sec\">\n            <input type=\"text\" (click)=\"activateSelector('reviewerFrequency', true)\"\n              [placeholder]=\"reviewerFrequencyPlaceholder\" readonly />\n            <button (click)=\"activateSelector('reviewerFrequency', true)\" type=\"button\">\n              Set A frequency\n            </button>\n          </div>\n          <div *ngIf=\"policyForm?.review_frequency_details != ''\" class=\"selected button-sec\">\n            <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\n            <button *ngIf=\"activeSelector !== 'reviewerFrequency'\" type=\"button\" class=\"edit\"\n              (click)=\"activateSelector('reviewerFrequency', true)\">\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button>\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              policyForm?.selectedReviewers?.length > 0 &&\n              !policyForm?.review_frequency_details\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select the review schedule for this policy.\n          </p>\n\n          <app-format-and-evidence (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\" #formatEvidence\n            [mode]=\"'policyReviewer'\" [organization_id]=\"organization_id\"\n            [formatEvidanceData]=\"policyForm?.documentsAndLinks\">\n          </app-format-and-evidence>\n        </div>\n      </div>\n    </div>\n\n    <!-- Overseer -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addOverseers\" [class.active]=\"\n        activeSelector === 'ccEmail' || activeSelector === 'ccFail'\n      \" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'ccEmail' &&\n        activeSelector !== 'ccFail' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"\n          policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\n        \">\n        <img *ngIf=\"\n            (policyForm?.CCFailEmail?.length == 0 &&\n              policyForm?.CCEmail?.length == 0) ||\n            activeSelector === 'ccEmail' ||\n            activeSelector === 'ccFail'\n          \" [src]=\"ASSETS.oversight\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            (policyForm?.CCFailEmail?.length > 0 ||\n              policyForm?.CCEmail?.length > 0) &&\n            activeSelector !== 'ccEmail' &&\n            activeSelector !== 'ccFail'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Oversight</label>\n          <div class=\"select\" *ngIf=\"\n              policyForm?.CCEmail?.length == 0 &&\n              policyForm?.CCGroupEmail.length == 0\n            \">\n            <input type=\"text\" (click)=\"activateSelector('ccEmail', true)\"\n              placeholder=\"Who should have oversight of this policy?\" readonly />\n          </div>\n          <div class=\"selected\" *ngIf=\"\n              policyForm?.CCEmail?.length > 0 ||\n              policyForm?.CCGroupEmail.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccEmail', ccEmail)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"ccEmail.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ ccEmail.employee_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"ccEmailPopover.popover()\" placement=\"left\" *ngIf=\"policyForm?.CCEmail?.length > 1\">\n                +{{ policyForm?.CCEmail?.slice(1).length }}\n              </button>\n            </div>\n\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCEmail[0].employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"overseerPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCEmail?.length > 1\">\n                  +{{ policyForm?.CCEmail?.length - 1 }}\n                </button>\n              </div>\n\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.CCEmail.length > 0 &&\n                  policyForm?.CCGroupEmail?.length > 0\n                \">\n                &\n              </div>\n\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.CCGroupEmail.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCGroupEmail[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"overseerGroup.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCGroupEmail?.length > 1\">\n                  +{{ policyForm?.CCGroupEmail?.length - 1 }}\n                </button>\n              </div>\n            </div>\n\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccEmail', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n\n          <div class=\"select\" *ngIf=\"\n              policyForm?.CCFailEmail?.length == 0 &&\n              policyForm?.CCFailEmailGroup?.length == 0\n            \">\n            <input type=\"text\" (click)=\"activateSelector('ccFail', true)\"\n              placeholder=\"Who should be notified if the policy is not attested on time?\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"\n              policyForm?.CCFailEmail?.length > 0 ||\n              policyForm?.CCFailEmailGroup?.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('ccFail', ccFail)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"ccFail.employee_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ ccFail.employee_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"ccFailPopover.popover()\" placement=\"right\"\n                *ngIf=\"policyForm?.CCFailEmail?.length > 1\">\n                +{{ policyForm?.CCFailEmail?.slice(1).length }}\n              </button>\n            </div>\n\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCFailEmail[0]?.employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"overseerFailPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCFailEmail?.length > 1\">\n                  +{{ policyForm?.CCFailEmail?.length - 1 }}\n                </button>\n              </div>\n\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.CCFailEmail?.length > 0 &&\n                  policyForm?.CCFailEmailGroup?.length > 0\n                \">\n                &\n              </div>\n\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCFailEmailGroup[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"overseerFailGroup.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\">\n                  +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\n                </button>\n              </div>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccFail', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let ccEmail of policyForm?.CCEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\">&#xe90d;</i>\n                      {{ ccEmail.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let ccFail of policyForm?.CCFailEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\">&#xe90d;</i>\n                      {{ ccFail.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n\n    <!-- Related Documents -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addAssociatedDocuments\"\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\">\n        <img *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\" [src]=\"ASSETS.format_evidence\" alt=\"im\" />\n\n        <svg *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RELATED DOCUMENTS</label>\n          <app-format-and-evidence (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\" [mode]=\"'policy'\"\n            [organization_id]=\"organization_id\"\n            [formatEvidanceData]=\"policyForm?.associatedDocuments\"></app-format-and-evidence>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Programs & Responsibilities -->\n    <div *ngIf=\"policyForm?.addLinkProgram\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === 'linkProgram'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'linkProgram' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"\n          policyForm?.programSelectedValues?.program?.category_id\n        \">\n        <img *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\" [src]=\"ASSETS.link_items\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK PROGRAMS & RESPONSIBILITIES</label>\n          <div *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n            (click)=\"activateSelector('linkProgram', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select Programs & responsibilities that are<br />associated with\n              this policy.\n            </div>\n          </div>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n            *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i (click)=\"\n                  remove('linkProgram', policyForm?.programSelectedValues)\n                \" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\"\n                [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\" placement=\"bottom-left\" delay=\"0\"\n                type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.programSelectedValues?.program?.name }}</span>\n              <!-- <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                appPopover\n                (click)=\"programResponsibilityPopover.popover()\"\n                placement=\"left\"\n              >\n                +4\n              </button> -->\n            </div>\n            <app-popover #programResponsibilityPopover [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\" [appTooltip]=\"\n                          'Reporting information security weaknesses'\n                        \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                        <i class=\"icons\">&#xe90d;</i>\n                        Reporting information security weaknesses\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n            <button\n              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\"\n              (click)=\"activateSelector('linkProgram', true)\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Assessment -->\n    <div *ngIf=\"policyForm.addLinkAssessment\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === 'isAssessment'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'isAssessment' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\n        <img *ngIf=\"!policyForm?.assessment?.length\" [src]=\"ASSETS.assessments\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.assessment?.length\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK ASSESSMENTS</label>\n          <div *ngIf=\"policyForm?.assessment?.length === 0\" (click)=\"activateSelector('isAssessment', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select assessments that are associated with this<br />policy.\n            </div>\n          </div>\n\n          <div *ngIf=\"policyForm?.assessment?.length > 0\"\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                policyForm.assessment[0]?.assessmentDetails?.assessment_name\n                }}</span>\n            </div>\n            <app-popover #programResponsibilityPopover [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"let assessment of policyForm.assessment | slice : 1\">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\" [appTooltip]=\"\n                          assessment?.assessmentDetails?.assessment_name\n                        \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                        <i class=\"icons\">&#xe90d;</i>\n                        {{ assessment?.assessmentDetails?.assessment_name }}\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n            <button (click)=\"activateSelector('isAssessment', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Related Polices -->\n\n    <div *ngIf=\"policyForm.addLinkPolicies\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === CONSTANTS.LINK_POLICY\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'isLinkedPolices' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"SelectedListOfPolicies\">\n        <img *ngIf=\"!SelectedListOfPolicies?.length\" [src]=\"LINKS.linkedPolicyImage\" alt=\"\" />\n\n        <svg *ngIf=\"SelectedListOfPolicies?.length\" class=\"checkIcon\" [xmlns]=\"LINKS.checked\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK RELATED POLICIES</label>\n          <div *ngIf=\"SelectedListOfPolicies?.length === 0\" (click)=\"activateSelector('isLinkedPolices', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select policies that are associated with this policy.\n            </div>\n          </div>\n\n          <div class=\"selected\" *ngIf=\"SelectedListOfPolicies?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let policy of SelectedListOfPolicies.slice(0, 1)\">\n                <i (click)=\"remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policy?.contract_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ policy?.contract_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                *ngIf=\"SelectedListOfPolicies?.length > 1\" type=\"button\" appPopover (click)=\"relatedPolicy.popover()\"\n                placement=\"left\">\n                +{{ SelectedListOfPolicies?.slice(1).length }}\n              </button>\n            </div>\n            <button *ngIf=\"activeSelector !== CONSTANTS.LINK_POLICY\" class=\"edit\" type=\"button\"\n              (click)=\"activateSelector(CONSTANTS.LINK_POLICY, true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #relatedPolicy [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let policy of SelectedListOfPolicies | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"\n                          remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\n                        \">&#xe90d;</i>\n                      {{ policy?.contract_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-cs-switch [(ngValue)]=\"policyForm.isPortalDisplayEnabled\"\n            [class.disabled]=\"policyForm?.LinkedPolicies == 0\" class=\"who-toggle\">DISPLAY ON THE POLICY PORTAL\n            <i class=\"icons\" [appTooltip]=\"CONSTANTS.LINK_POLICY_HELP_TEXT\" placement=\"bottom-right\" type=\"white\"\n              delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <app-checkbox-list [config]=\"categoryConfig\" [twoColumn]=\"false\" [itemsList]=\"categoryList\"\n    [selectedItems]=\"policyForm.selectedCategories\" [identifierKey]=\"'_id'\" [displayKey]=\"'item_name'\"\n    [tooltipKey]=\"'item_name'\" *ngIf=\"activeSelector === 'category'\" (saveList)=\"saveSelectedList('category', $event)\"\n    (closeList)=\"disableSelector()\" [loaded]=\"!categoriesListLoaded\">\n  </app-checkbox-list>\n  <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\n  [itemsList]=\"\"\n  [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\n  (closeList)=\"fieldDeselector('ISSUE_CC')\">\n</app-checkbox-list> -->\n\n  <app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"rcList\"\n    [selectedResponsibilityCenters]=\"policyForm.selectedRCs\" [rcIdKey]=\"'item_id'\"\n    (saveSelectedList)=\"saveSelectedList('rc', $event)\" (closeRcList)=\"disableSelector()\" [loaded]=\"rcListLoaded\">\n  </app-responsibility-centers-list>\n\n  <app-link-related-policies *ngIf=\"activeSelector === CONSTANTS.LINK_POLICY\" [policyId]=\"policyId\" [mode]=\"mode\"\n    [selectedPolicies]=\"SelectedListOfPolicies\" (closeLinkPolicyList)=\"disableSelector()\"\n    (selectedList)=\"saveSelectedList(CONSTANTS.LINK_POLICY, $event)\"></app-link-related-policies>\n\n  <app-users-radio-list *ngIf=\"activeSelector === 'reviewer'\" [itemEmailKey]=\"'member_email'\" [usersList]=\"allReviewers\"\n    [headerText]=\"'Select a Reviewer'\" [selectedUsers]=\"policyForm.selectedReviewers\" [userIdKey]=\"'member_id'\"\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-users-radio-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\" [usersList]=\"overseersList\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [selectedUsers]=\"policyForm.CCEmail\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-owner-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\" [groupEnabled]=\"true\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\"\n    [groupList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.CCEmail\" [selectedGroups]=\"policyForm.CCGroupEmail\" [isPaginationEnabled]=\"isPaginationEnabled\"\n    (save)=\"saveSelectedList('ccEmail', $event)\" (cancel)=\"disableSelector()\" [featureflag]=\"groupEnabled\" (fetchUserData)=\"getOverseersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\" [usersList]=\"overseersList\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [selectedUsers]=\"policyForm.CCFailEmail\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-owner-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'ccFail' && groupEnabled\" [groupEnabled]=\"true\"\n    [groupList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.CCFailEmail\"\n    [selectedGroups]=\"policyForm.CCFailEmailGroup\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\" [isPaginationEnabled]=\"isPaginationEnabled\" (save)=\"saveSelectedList('ccFail', $event)\"\n    (cancel)=\"disableSelector()\" [featureflag]=\"groupEnabled\" (fetchUserData)=\"getOverseersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-group-users-list *ngIf=\"activeSelector === 'assignees' && !groupEnabled\" [usersList]=\"assigneesList\"\n    [groupsList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.selectedAssignees\" [userIdKey]=\"'my_member_id'\"\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\" (closeUsersList)=\"disableSelector()\">\n  </app-group-users-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'assignees' && groupEnabled\" [groupEnabled]=\"true\"\n    [groupList]=\"overseerGroupsList\" (save)=\"saveSelectedList('assignees', $event)\" (cancel)=\"disableSelector()\"\n    [selectedGroups]=\"policyForm.selectedGroupAssignee\" [selectedUsers]=\"policyForm.selectedAssignees\"\n    [featureflag]=\"groupEnabled\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\" [isPaginationEnabled]=\"isPaginationEnabled\" (fetchUserData)=\"getOverseersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'approvers' && false\" [listHeading]=\"'Select Approvers'\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"true\"\n    [selectedUsers]=\"\n      addMoreLevels\n        ? []\n        : policyForm.selectedApprovers[approversListIndex].approvers\n    \" [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\n    (saveSelectedList)=\"saveSelectedList('approvers', $event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\n    [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n    [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\n  </app-owner-list>\n\n  <app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [mode]=\"'policy'\"\n    [frequencyDetails]=\"frequencyDetails\" (selectedFrequency)=\"frequencyData($event)\" [feature]=\"feature\"\n    [pageType]=\"'policy'\" (closeFrequency)=\"disableSelector()\"></app-frequency-container>\n\n  <app-frequency-container *ngIf=\"activeSelector === 'reviewerFrequency'\" [mode]=\"'reviewerFrequency'\"\n    [frequencyDetails]=\"reviewerFrequencyDetails\" (selectedFrequency)=\"reviewerFrequencyData($event)\"\n    [feature]=\"feature\" [pageType]=\"'policy'\" (closeFrequency)=\"disableSelector()\"></app-frequency-container>\n\n  <vc-link-program *ngIf=\"activeSelector === 'linkProgram'\" (close)=\"disableSelector()\" [policy]=\"policyForm\"\n    [selectedProgram]=\"policyForm?.programSelectedValues\" [mode]=\"mode\" [selectedLinkProgram]=\"selectedLinkProgram\"\n    (changeTab)=\"changeTab('linkedPrograms')\" (updatedProgramDetails)=\"updatedProgramDetails($event)\">\n  </vc-link-program>\n\n  <app-checkpoints-policy-container (closeCheckPoint)=\"disableSelector()\"\n    [checkpointData]=\"policyForm?.checkpointDetails\" [requiredPoint]=\"policyForm?.passingMarks\"\n    *ngIf=\"activeSelector === 'checkpoints'\"\n    (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"></app-checkpoints-policy-container>\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n  <app-approval-workflow *ngIf=\"enableApprovalWorkflow\" [selectedCategory]=\"policyForm?.selectedCategories\"\n    [approverWorkFlowList]=\"approverWorkFlowList\" [allApprovers]=\"allApprovers\"\n    (listCancelClicked)=\"listCancelClicked($event)\" (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\n    (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\" [editApprovalWorkflow]=\"editApprovalWorkflow\"\n    [createApprovalClick]=\"createApprovalClick\" (closeCreateClicked)=\"closeClickedCreateForm()\"\n    [editWorkflowLevel]=\"editWorkflowLevel\"></app-approval-workflow>\n  <!-- <app-select-approvers></app-select-approvers> -->\n\n  <app-policy-access *ngIf=\"activeSelector === 'policyAccess'\" [policyAccessType]=\"policyForm?.policy_access_type\"\n    (close)=\"disableSelector()\" [orgUsersList]=\"usersList\" [usersAccessList]=\"usersAccessList\"\n    [groupList]=\"overseerGroupsList\" [groupsAccessList]=\"groupsAccessList\"\n    [selectedUsers]=\"policyForm?.policy_access_owners\" [selectedGroups]=\"policyForm?.policy_access_groups\"\n    [disabledIds]=\"usersAccessListIds\" [disabledGroupIds]=\"groupsAccessListIds\"\n    [futureUsersWillSelect]=\"policyForm?.availableOnPortal\" (saveCheckPoint)=\"saveSelectedList('policyAccess', $event)\"\n    (setPolicyAccessType)=\"policyForm.policy_access_type = $event\">\n  </app-policy-access>\n</ng-container>\n<ng-container *ngIf=\"showCreateDocuments\">\n  <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\n   [organization_id]=\"organization_id\"\n   [member_obj_id]=\"member_obj_id\"\n   [userInfo]=\"userInfo\"\n   [policyId]=\"policyId\"\n   [policyName]=\"policyForm.policyName\"\n   (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n   (editPolicy)=\"editPolicyFromDocuments()\"\n   ></app-create-documents> -->\n  <lib-document-section *ngIf=\"showCreateDocuments\" [templateView]=\"templateView\" [organization_id]=\"organization_id\"\n    [member_obj_id]=\"member_obj_id\" [userInfo]=\"userInfo\" [policyId]=\"policyId\" [feature]=\"feature\"\n    [templateUrl]=\"templateUrl\" [policyName]=\"policyForm.policyName\" (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n    (editPolicy)=\"editPolicyFromDocuments()\" (openTemplate)=\"templateView = true\"></lib-document-section>\n</ng-container>\n\n<app-assessment-list *ngIf=\"activeSelector === 'isAssessment'\" [program_ids]=\"''\"\n  [isEdit]=\"policyForm?.assessment?.length\" (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\n  [selectedAssessment]=\"policyForm?.assessment[0]\" [mode]=\"'policy'\" (onAssessmentSelect)=\"\n    onAssessmentSelect($event); saveSelectedList('isAssessment', false)\n  \"></app-assessment-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'approvers' && false\" [listHeading]=\"'Select Approvers'\"\n  [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"true\"\n  [selectedUsers]=\"\n    addMoreLevels\n      ? []\n      : policyForm.selectedApprovers[approversListIndex].approvers\n  \" [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('approvers', $event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\n  [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n  [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\n</app-owner-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'owners'\" [listHeading]=\"'Select Owner(s)'\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"false\" [userIdKey]=\"'member_id'\"\n  [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('owners', $event)\"\n  (closeUsersList)=\"disableSelector()\" [mode]=\"mode\" [selectedUsers]=\"policyForm?.policy_owners ?? []\">\n</app-owner-list>\n\n<app-select-template-list *ngIf=\"templateView\" [selectedCategoryId]=\"policyForm?.selectedCategories\" [feature]=\"feature\"\n  (onTemplateSelect)=\"onTemplateSelect($event)\"></app-select-template-list>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility-inner-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}.who-toggle{margin-top:10px}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.right app-format-and-evidence~.error-message{position:relative;top:-12px}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
+            args: [{ selector: 'app-workflow-policy', template: "<!-- <p>workflow-policy works!</p> -->\n\n<ng-container *ngIf=\"!showCreateDocuments\">\n  <div class=\"workflow-policy\">\n    <!-- Policy Name -->\n    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\n        <img [src]=\"ASSETS.what\" alt=\"name\" *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\" />\n\n        <svg *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Policy Name <span class=\"required\">*</span>\n          </label>\n          <input type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name', true)\"\n            *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\n            (focusout)=\"activateSelector('name', false)\" [ngModel]=\"policyForm.policyName\"\n            (ngModelChange)=\"policyForm.policyName = changeName($event)\" placeholder=\"Name this policy\" />\n          <div class=\"selected\" *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\">\n            <div class=\"chip-container\">\n              <span class=\"value\">{{ policyForm.policyName }}</span>\n            </div>\n            <button class=\"edit\" (click)=\"activateSelector('name', true)\" type=\"button\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n\n          <p *ngIf=\"submitted && !policyForm.policyName.trim()\" [appScrollInView]=\"true\" class=\"error-message\">\n            Please enter a name for this policy.\n          </p>\n          <vcomply-editor [(ngModel)]=\"policyForm.policyNotes\" [editorConfig]=\"description\"></vcomply-editor>\n          <!-- <app-cs-switch\n            [(ngValue)]=\"policyForm.availableOnPortal\"\n            (ngValueChange)=\"availabilityOnPortal($event)\"\n          >\n            Do you want this policy to be available on the portal?\n            <i\n              class=\"icons\"\n              [appTooltip]=\"\n                '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.'\n              \"\n              placement=\"bottom-right\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe932;</i\n            >\n          </app-cs-switch>\n          <app-cs-switch\n            *ngIf=\"policyForm.availableOnPortal\"\n            [(ngValue)]=\"policyForm.acceptSuggestions\"\n          >\n            Accept suggestions\n            <i\n              class=\"icons\"\n              [appTooltip]=\"\n                'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n              \"\n              placement=\"bottom-right\"\n              type=\"white\"\n              delay=\"0\"\n              [tooltipMandatory]=\"true\"\n              >&#xe932;</i\n            ></app-cs-switch> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Category -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'category' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedCategories?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedCategories?.length == 0 ||\n            activeSelector === 'category'\n          \" [src]=\"ASSETS.case_category\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedCategories?.length > 0 &&\n            activeSelector !== 'category'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Policy Category <span class=\"required\">*</span>\n          </label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedCategories?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('category', true)\"\n              placeholder=\"Select a category for this policy.\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedCategories?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"\n                  let category of policyForm?.selectedCategories?.slice(0, 1)\n                \">\n                <i (click)=\"remove('category', category)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"category.item_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ category.item_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                *ngIf=\"policyForm?.selectedCategories?.length > 1\" type=\"button\" appPopover (click)=\"category.popover()\"\n                placement=\"left\">\n                +{{ policyForm?.selectedCategories?.slice(1).length }}\n              </button>\n            </div>\n\n            <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\n                          [class.plus]=\"policyForm?.selectedCategories?.length>2\">\n                          <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\n                                  class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\n                              {{category.item_name}}</span>\n                          <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\n                              appPopover (click)=\"category.popover()\" placement=\"right\">+\n                              {{policyForm?.selectedCategories?.slice(2).length}}</button>\n                      </div> -->\n            <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\n              (click)=\"activateSelector('category', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #category [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let category of policyForm?.selectedCategories | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('category', category)\">&#xe90d;</i>\n                      {{ category.item_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <p *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\" [appScrollInView]=\"true\"\n            class=\"error-message\">\n            Please select the category for this policy.\n          </p>\n        </div>\n\n        <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\n          <ng-container *ngFor=\"let tag of policyForm?.customTags\">\n            <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\n            <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{ tag.tagname }}\" />\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <!-- Effective Date -->\n    <div class=\"form-group-row\" [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"false\">\n        <img [src]=\"ASSETS.when\" alt=\"\" />\n\n        <svg *ngIf=\"false\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Effective Date</label>\n          <div class=\"date-time-picker\">\n            <div class=\"picker-group\">\n              <input type=\"text\" readonly placeholder=\"Select the effective date of the policy.\"\n                [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\" (click)=\"openDatePicker()\"\n                id=\"effective-date\" />\n              <i class=\"icons\">&#xe92d;</i>\n              <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\n                [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n              </dp-date-picker>\n              <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Owner -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'owners'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'owners' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\n        <img *ngIf=\"!policyForm.policy_owners?.length\" [src]=\"ASSETS.im_creating\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm.policy_owners?.length\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\n          </div>\n          <div *ngIf=\"!policyForm.policy_owners?.length\" (click)=\"activateSelector('owners', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select owners for this policy.\n            </div>\n          </div>\n\n          <div *ngIf=\"policyForm.policy_owners?.length\"\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"vx-d-flex vx-align-center\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.policy_owners[0]?.member_name }}</span>\n\n                <button *ngIf=\"policyForm?.policy_owners?.length > 1\"\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"policyUserPopover.popover()\" placement=\"left\">\n                  + {{ policyForm?.policy_owners.length - 1 }}\n                </button>\n              </div>\n              <div *ngIf=\"false\" class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\">\n                &\n              </div>\n              <div *ngIf=\"false\" class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"'Samantha Jones'\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Samantha Jones</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"policyGroupPopover.popover()\" placement=\"right\">\n                  +4\n                </button>\n              </div>\n              <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\n                <div class=\"wf-action-list\">\n                  <ul class=\"action-item\">\n                    <li *ngFor=\"\n                        let owner of policyForm?.policy_owners | slice : 1;\n                        let i = index\n                      \">\n                      <div class=\"avatar-card\">\n                        <span class=\"value\" [appTooltip]=\"owner?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                          type=\"black\" [tooltipMandatory]=\"false\">\n                          <i (click)=\"remove('owners', owner, i + 1)\" class=\"icons\">&#xe90d;</i>\n                          {{ owner?.member_name }}\n                        </span>\n                      </div>\n                    </li>\n                  </ul>\n                </div>\n              </app-popover>\n              <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\n                <div class=\"wf-action-list\">\n                  <ul class=\"action-item\">\n                    <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n                      <div class=\"avatar-card\">\n                        <span class=\"value\" [appTooltip]=\"'Harshvardhan Kariwala'\" placement=\"bottom-left\" delay=\"0\"\n                          type=\"black\" [tooltipMandatory]=\"false\">\n                          <i class=\"icons\">&#xe90d;</i>\n                          Harshvardhan Kariwala\n                        </span>\n                      </div>\n                    </li>\n                  </ul>\n                </div>\n              </app-popover>\n            </div>\n            <button (click)=\"activateSelector('owners', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n          <p *ngIf=\"submitted && !policyForm?.policy_owners?.length\" [appScrollInView]=\"true\" class=\"error-message\">\n            Select owners for this policy.\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Review -->\n    <div class=\"form-group-row\" [class.active]=\"\n        activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\n      \" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'reviewer' &&\n        activeSelector !== 'reviewerFrequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\n        <img *ngIf=\"!policyForm?.addReviewers\" [src]=\"ASSETS.reviewer\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.addReviewers\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">REVIEW</label>\n          <div class=\"reviewSelection vx-p-3 vx-pb-0\" [class.disabled]=\"\n              activeSelector && sideSelectorElements.includes(activeSelector)\n            \">\n            <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\n              Does this policy need to be reviewed?\n            </div>\n            <app-cs-radio name=\"review-type\" [checked]=\"policyForm?.addReviewers\" (checkedEvent)=\"typeSelected(true)\">\n              <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n                YES\n              </div>\n            </app-cs-radio>\n            <app-cs-radio name=\"review-type\" [checked]=\"!policyForm?.addReviewers\" (checkedEvent)=\"typeSelected(false)\">\n              <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n                NO\n              </div>\n            </app-cs-radio>\n          </div>\n\n          <ng-container *ngIf=\"policyForm?.addReviewers\">\n            <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\n            <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n              *ngIf=\"policyForm?.selectedReviewers?.length == 0\" [appScrollInView]=\"scrollToBottom\"\n              [class.active]=\"activeSelector === 'reviewer'\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewer' &&\n                sideSelectorElements.includes(activeSelector)\n              \" (click)=\"activateSelector('reviewer', true)\">\n              <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                Select the person responsible for reviewing this policy\n              </div>\n            </div>\n\n            <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n              *ngIf=\"policyForm?.selectedReviewers?.length > 0\" [class.active]=\"activeSelector === 'reviewer'\"\n              [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewer' &&\n                sideSelectorElements.includes(activeSelector)\n              \">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngFor=\"let reviewer of policyForm?.selectedReviewers\">\n                <i (click)=\"remove('reviewer', reviewer)\"\n                  class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"'Samantha Jones'\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                  {{ reviewer?.member_name }}</span>\n              </div>\n              <button\n                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\"\n                *ngIf=\"activeSelector !== 'reviewer'\" (click)=\"activateSelector('reviewer', true)\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n            <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\n            <div *ngIf=\"policyForm?.review_frequency_details == ''\"\n              class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n              [class.active]=\"activeSelector === 'reviewerFrequency'\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewerFrequency' &&\n                sideSelectorElements.includes(activeSelector)\n              \" (click)=\"activateSelector('reviewerFrequency', true)\">\n              <div class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n                When does this policy needs to be reviewed?\n              </div>\n              <div (click)=\"activateSelector('reviewerFrequency', true)\"\n                class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\n                SET A FREQUENCY\n              </div>\n            </div>\n\n            <div *ngIf=\"policyForm?.review_frequency_details != ''\"\n              class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\" [class.disabled]=\"\n                activeSelector &&\n                activeSelector !== 'reviewerFrequency' &&\n                sideSelectorElements.includes(activeSelector)\n              \" [class.active]=\"activeSelector === 'reviewerFrequency'\">\n              <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [appTooltip]=\"reviewerFrequencyPlaceholder\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                {{ reviewerFrequencyPlaceholder }}\n              </div>\n              <button *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n                (click)=\"activateSelector('reviewerFrequency', true)\"\n                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\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n            <p *ngIf=\"\n                submitted &&\n                policyForm?.selectedReviewers?.length > 0 &&\n                !policyForm?.review_frequency_details\n              \" class=\"error-message\" [appScrollInView]=\"true\">\n              Select the review schedule for this policy.\n            </p>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <!-- New Approval Workflow -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'approvers'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'approvers' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedApprovers?.length == 0 ||\n            activeSelector === 'approvers'\n          \" [src]=\"ASSETS.approval\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedApprovers?.length > 0 &&\n            activeSelector !== 'approvers'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">APPROVAL <span class=\"required\">*</span></label>\n            <button (click)=\"\n                createApprovalWorkflow(); activateSelector('approvers', true)\n              \" [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n              class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\">\n              CREATE A NEW APPROVAL WORKFLOW\n            </button>\n          </div>\n          <div *ngIf=\"\n              selectedWorkflow?.length === 0 ||\n              !selectedWorkflow[0]?.workflow_name\n            \" (click)=\"\n              clickApprovalWorkflow(true); activateSelector('approvers', true)\n            \" class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select the approval workflow for this policy\n            </div>\n          </div>\n          <div *ngIf=\"\n              selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\n            \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\">\n            <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                <i (click)=\"removeWorkflow()\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  selectedWorkflow[0]?.workflow_name }}</span>\n              </div>\n              <button (click)=\"editWorkflow(selectedWorkflow[0])\"\n                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\">\n                <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n              </button>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\n            <div *ngFor=\"\n                let approval of selectedWorkflow[0]?.approval_workflow;\n                let approvalIndex = index\n              \" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\">\n              <div class=\"vx-d-flex vx-align-center\">\n                <div class=\"level-left vx-d-flex vx-align-center\">\n                  <div class=\"vx-d-block\">\n                    <div class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\" [appTooltip]=\"\n                        approval?.alias_name\n                          ? approval?.alias_name\n                          : approval?.level1\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                      {{\n                      approval?.alias_name\n                      ? approval?.alias_name\n                      : approval?.level1\n                      }}\n                    </div>\n                    <div class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\">\n                      {{\n                      approval?.type === \"ROUNDROBIN\"\n                      ? \"ROUND-ROBIN\"\n                      : approval?.type === \"ANYONE\"\n                      ? \"ANY ONE\"\n                      : approval?.type\n                      }}\n                    </div>\n                  </div>\n                </div>\n                <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\">\n                  <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                    >&#xe9ae;</i\n                  > -->\n                  <div *ngIf=\"\n                      approval?.type?.toLowerCase() === 'sequential' &&\n                      approval?.approvers?.length < 2\n                    \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\n                  </div>\n                  <div *ngIf=\"\n                      approval?.approvers?.length > 1 &&\n                      approval?.type?.toLowerCase() === 'sequential'\n                    \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\n                    1\n                  </div>\n                  <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"approval?.approvers[0]?.member_name\"\n                    placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                    approval?.approvers[0]?.member_name }}</span>\n                  <button *ngIf=\"approval?.approvers?.length > 1\"\n                    class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                    appPopover (click)=\"workflowPopover.popover()\" placement=\"right\">\n                    +{{ approval?.approvers?.length - 1 }}\n                  </button>\n                </div>\n                <app-popover #workflowPopover [dontCloseonClick]=\"true\">\n                  <div class=\"wf-action-list\">\n                    <ul class=\"action-item\">\n                      <li *ngFor=\"\n                          let approver of approval?.approvers | slice : 1;\n                          let approvalIndex = index\n                        \">\n                        <div class=\"avatar-card\">\n                          <span class=\"value\" [appTooltip]=\"approver?.member_name\" placement=\"bottom-left\" delay=\"0\"\n                            type=\"black\" [tooltipMandatory]=\"false\">\n                            <!-- <i class=\"icons\">&#xe90d;</i> -->\n                            <span *ngIf=\"\n                                approval?.type?.toLowerCase() === 'sequential'\n                              \"\n                              class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">{{\n                              approvalIndex + 1 ===\n                              approval?.approvers?.length - 1\n                              ? \"Final\"\n                              : approvalIndex + 2\n                              }}</span>\n                            {{ approver?.member_name }}\n                          </span>\n                        </div>\n                      </li>\n                    </ul>\n                  </div>\n                </app-popover>\n              </div>\n\n              <!-- <div class=\"vx-d-flex vx-align-center\">\n                <button (click)=\"editLevelClicked(approval,approvalIndex)\"\n                  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\"\n                >\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                </button>\n                <button (click)=\"deleteLevel(approvalIndex)\"\n                  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\"\n                >\n                  <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\n                </button>\n              </div> -->\n            </div>\n          </ng-container>\n          <p *ngIf=\"\n              submitted &&\n              !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\n              !policyApprovalFlag &&\n              !policyForm?.selectedApprovers[0]?.approvers?.length\n            \" [appScrollInView]=\"true\" class=\"error-message\">\n            Select or create an approval workflow for this policy.\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Policy Access -->\n    <div *ngIf=\"true\" class=\"form-group-row\" [class.active]=\"activeSelector === 'policyAccess'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'policyAccess' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"true\">\n        <img *ngIf=\"\n            !policyForm?.policy_access_owners?.length &&\n            !policyForm?.policy_access_groups?.length &&\n            !policyForm?.availableOnPortal\n          \" [src]=\"ASSETS.lock_scope\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.policy_access_owners?.length ||\n            policyForm?.policy_access_groups?.length ||\n            policyForm?.availableOnPortal\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <label class=\"vx-control-panel\">POLICY PORTAL ACCESS</label>\n          </div>\n          <div *ngIf=\"\n              !policyForm?.policy_access_owners?.length &&\n              !policyForm?.policy_access_groups?.length &&\n              !policyForm?.availableOnPortal\n            \" (click)=\"activateSelector('policyAccess', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n            [class.disabled]=\"!policyForm?.selectedCategories?.length\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Who should be able to view this policy?\n            </div>\n          </div>\n\n          <ng-container *ngIf=\"!policyForm?.availableOnPortal\">\n            <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3\" *ngIf=\"\n                policyForm?.policy_access_owners?.length ||\n                policyForm?.policy_access_groups?.length\n              \">\n              <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\">\n                <div class=\"vx-d-flex vx-align-center\">\n                  <div *ngIf=\"policyForm?.policy_access_owners?.length\"\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                      *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"\n                        remove(\n                          'policyAccess',\n                          policyForm?.policy_access_owners[0]\n                        )\n                      \">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                        policyForm?.policy_access_owners[0]?.employee_name\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                      policyForm?.policy_access_owners[0]?.employee_name\n                      }}</span>\n                    <button *ngIf=\"policyForm?.policy_access_owners?.length > 1\"\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                      appPopover (click)=\"policyAccessPopover.popover()\" placement=\"left\">\n                      +{{ policyForm?.policy_access_owners.length - 1 }}\n                    </button>\n                  </div>\n\n                  <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                      policyForm?.policy_access_owners.length > 0 &&\n                      policyForm?.policy_access_groups.length > 0\n                    \">\n                    &\n                  </div>\n                  <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                    *ngIf=\"policyForm?.policy_access_groups.length > 0\">\n                    <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                      *ngIf=\"policyForm?.policy_access_type === 1\" (click)=\"\n                        remove(\n                          'accessGroup',\n                          policyForm?.policy_access_groups[0]\n                        )\n                      \">&#xe9ae;</i>\n                    <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                        policyForm?.policy_access_groups[0]?.group_name\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                      policyForm?.policy_access_groups[0]?.group_name\n                      }}</span>\n                    <button\n                      class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                      appPopover (click)=\"accessGroup.popover()\" placement=\"right\"\n                      *ngIf=\"policyForm?.policy_access_groups.length > 1\">\n                      +{{ policyForm?.policy_access_groups.length - 1 }}\n                    </button>\n                  </div>\n\n                  <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let user of policyForm?.policy_access_owners\n                              | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\" [appTooltip]=\"user?.employee_name\" placement=\"bottom-left\" delay=\"0\"\n                              type=\"black\" [tooltipMandatory]=\"false\">\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\"\n                                (click)=\"remove('policyAccess', user)\">&#xe90d;</i>\n                              {{ user?.employee_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                  <app-popover #accessGroup [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let data of policyForm?.policy_access_groups\n                              | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\">\n                              <i class=\"icons\" *ngIf=\"policyForm?.policy_access_type === 1\"\n                                (click)=\"remove('accessGroup', data)\">&#xe90d;</i>\n                              {{ data?.group_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </div>\n\n                <button (click)=\"activateSelector('policyAccess', true)\"\n                  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\">\n                  <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n                </button>\n              </div>\n\n              <!-- <div class=\"vx-mt-4 vx-mb-2\">\n                <app-cs-radio\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 0\" (checkedEvent)=\"setAccessField(0)\"\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\n                    Everyone who has access to this Policy Category\n                  </div></app-cs-radio\n                >\n                <app-cs-radio\n                  [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 1\" (checkedEvent)=\"setAccessField(1)\"\n                class=\"vx-mt-1\"\n                  ><div class=\"vx-fs-12 vx-paragraph-txt\">\n                    Select users/groups\n                  </div></app-cs-radio\n                >\n              </div> -->\n            </div>\n          </ng-container>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n            *ngIf=\"policyForm?.availableOnPortal\">\n            <span class=\"vx-fs-13 vx-paragraph-txt\">Visible to All Current & Future Users</span>\n\n            <button (click)=\"activateSelector('policyAccess', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n\n          <div class=\"vx-mt-2\">\n            <app-cs-switch *ngIf=\"\n                policyForm.availableOnPortal ||\n                policyForm?.policy_access_owners?.length ||\n                policyForm?.policy_access_groups?.length\n              \" [(ngValue)]=\"policyForm.acceptSuggestions\">ACCEPT SUGGESTIONS\n              <i class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\" [appTooltip]=\"\n                  'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n                \" placement=\"bottom-right\" delay=\"0\" type=\"white\"\n                [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Approval Workflow -->\n    <div class=\"form-group-row\" *ngIf=\"false\" [class.active]=\"activeSelector === 'approvers'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'approvers' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedApprovers?.length == 0 ||\n            activeSelector === 'approvers'\n          \" [src]=\"ASSETS.approval\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedApprovers?.length > 0 &&\n            activeSelector !== 'approvers'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group approval-workflow\" [class.disabled]=\"policyApprovalFlag !== 0\">\n          <label class=\"vx-control-panel\">\n            Approval workflow <span class=\"required\">*</span>\n            <button (click)=\"\n                activateSelector('approvers', true);\n                addMoreLevels = true;\n                workflowType = 'SEQUENTIAL'\n              \" class=\"button\">\n              Create a new Approval Workflow\n            </button>\n          </label>\n          <div class=\"select\" [class.disabled]=\"approverWorkFlowList?.length == 0\" *ngIf=\"\n              policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\n              policyForm?.selectedApprovers.length == 0\n            \">\n            <cs-select [ngModel]=\"selectedApprovalWorkflow\" (ngModelChange)=\"selectedWorkflowChange($event)\"\n              [placeholder]=\"'Select approval workflow for this policy'\" name=\"selectedApprovalWorkflow\"\n              [setMaxWidth]=\"true\">\n              <cs-option *ngFor=\"let data of approverWorkFlowList\" [value]=\"data\">\n                {{ data.workflow_name }}\n              </cs-option>\n              <cs-option [value]=\"-1\" (click)=\"\n                  activateSelector('approvers', true);\n                  addMoreLevels = true;\n                  workflowType = 'SEQUENTIAL'\n                \">Create a new approval workflow</cs-option>\n            </cs-select>\n          </div>\n          <ng-container *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\">\n            <div class=\"selected\" *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\">\n              <div class=\"workflow-label\">\n                <p class=\"title\">Level {{ i + 1 }}</p>\n                <p class=\"description\">{{ level.name }}</p>\n              </div>\n              <div class=\"vx-d-flex vx-align-center\">\n                <div class=\"chip-container\">\n                  <span class=\"chip\" *ngFor=\"\n                      let approver of level.approvers.slice(0, 1);\n                      let j = index\n                    \"><i class=\"icons\" (click)=\"remove('approvers', approver, i)\">&#xe90d;</i>\n                    <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\n                      j + 1\n                      }}</span>{{ approver.member_name }}</span>\n\n                  <button class=\"count\" *ngIf=\"level.approvers?.length > 1\" type=\"button\" appPopover\n                    (click)=\"labelName.popover()\" placement=\"left\">\n                    +\n\n                    {{ level.approvers.slice(1).length }}\n                  </button>\n                  <app-popover #labelName [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li *ngFor=\"\n                            let approver of level.approvers | slice : 1;\n                            let j = index\n                          \">\n                          <div class=\"avatar-card\">\n                            <span class=\"value\">\n                              <i class=\"icons\" (click)=\"remove('approvers', approver, i)\">&#xe90d;</i>\n                              <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">\n                                {{\n                                j == level.approvers.slice(1).length - 1\n                                ? \"Final\"\n                                : j + 2\n                                }}\n                              </span>\n                              {{ approver.member_name }}\n                            </span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </div>\n                <button class=\"edit\" type=\"button\" (click)=\"\n                    activateSelector('approvers', true, level.name);\n                    approversListIndex = i\n                  \">\n                  <i class=\"icons\">&#xe9ba;</i>Edit\n                </button>\n                <button class=\"close-btn\" (click)=\"remove('workflowLevel', level, i)\">\n                  <i class=\"icons\">&#xe90d;</i>\n                </button>\n              </div>\n            </div>\n          </ng-container>\n\n          <p *ngIf=\"\n              submitted &&\n              !policyForm?.selectedApprovers?.length &&\n              !policyApprovalFlag\n            \" [appScrollInView]=\"true\" class=\"error-message\">\n            Select or create an approval workflow for this policy.\n          </p>\n\n          <label class=\"vx-control-panel\" *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"><button\n              class=\"button\" (click)=\"\n                activateSelector('approvers', true);\n                addMoreLevels = true;\n                workflowType = 'SEQUENTIAL'\n              \">\n              + Add More Levels\n            </button></label>\n        </div>\n      </div>\n    </div>\n\n    <!-- Who / now Attestation -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'assignees' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedAssignees?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedAssignees?.length == 0 ||\n            activeSelector === 'assignees'\n          \" [src]=\"ASSETS.case_assignees\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedAssignees?.length > 0 &&\n            activeSelector !== 'assignees'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Attestation</label>\n          <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"\n              (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\n              (policyForm?.selectedAssignees?.length == 0 &&\n                groupEnabled &&\n                policyForm?.selectedGroupAssignee.length == 0)\n            \" (click)=\"activateSelector('assignees', true)\"\n            [class.disabled]=\"policyForm.selectedAllAttestors\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              {{\n                policyForm.selectedAllAttestors ? 'All Users Selected' : \n                'Select the persons responsible for attesting this policy.'\n              }}\n            </div>\n          </div>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\" *ngIf=\"\n              policyForm?.selectedAssignees?.length > 0 ||\n              policyForm?.selectedGroupAssignee?.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"\n                  let assignee of policyForm?.selectedAssignees?.slice(0, 1)\n                \">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('assignees', assignee)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assignee.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ assignee.employee_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"assigneePopover.popover()\" placement=\"left\"\n                *ngIf=\"policyForm?.selectedAssignees?.length > 1\">\n                +{{ policyForm?.selectedAssignees?.slice(1).length }}\n              </button>\n            </div>\n            <ng-container *ngIf=\"groupEnabled\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove('assignees', policyForm?.selectedAssignees[0])\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\"\n                  [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\"\n                  type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.selectedAssignees[0]?.employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"UserPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.selectedAssignees.length > 1\">\n                  +{{ policyForm?.selectedAssignees.length - 1 }}\n                </button>\n              </div>\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.selectedAssignees.length > 0 &&\n                  policyForm?.selectedGroupAssignee.length > 0\n                \">\n                &\n              </div>\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove(\n                      'groupAssignees',\n                      policyForm?.selectedGroupAssignee[0]\n                    )\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                    policyForm?.selectedGroupAssignee[0]?.group_name\n                  \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.selectedGroupAssignee[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"group.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\">\n                  +{{ policyForm?.selectedGroupAssignee.length - 1 }}\n                </button>\n              </div>\n            </ng-container>\n            <button\n              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\"\n              (click)=\"activateSelector('assignees', true)\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n\n          <p *ngIf=\"\n              submitted &&\n              ((policyForm?.selectedAssignees?.length == 0 &&\n                policyForm?.frequency_details &&\n                !groupEnabled) ||\n                (policyForm?.selectedAssignees?.length == 0 &&\n                  policyForm.selectedGroupAssignee.length == 0 &&\n                  policyForm?.frequency_details &&\n                  groupEnabled) ||\n                (isSendForAttestation &&\n                  policyForm?.selectedAssignees?.length === 0))\n            \" id=\"whovalidatemsg\" class=\"error-message\" [appScrollInView]=\"true\">\n            Select the persons required to attest to this Policy.\n          </p>\n          <app-cs-switch [(ngValue)]=\"policyForm.selectedAllAttestors\"\n          (ngValueChange)=\"onAllAttestorsToggle($event)\"\n            class=\"who-toggle\">Select all users within your organization\n            <i class=\"icons\" [appTooltip]=\"\n                'If selected, all users within your organization will be required to attest this policy.'\n              \" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n          <app-popover #assigneePopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\">&#xe90d;</i>\n                      {{ assignee.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #UserPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let assignee of policyForm?.selectedAssignees | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('assignees', assignee)\">&#xe90d;</i>\n                      {{ assignee.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #group [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.selectedGroupAssignee | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('groupAssignees', data)\">&#xe90d;</i>\n                      {{ data.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n\n          <!-- overseer -->\n          <app-popover #overseerPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let overseer of policyForm?.CCEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\">&#xe90d;</i>\n                      {{ overseer?.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.CCGroupEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\">&#xe90d;</i>\n                      {{ data?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <!-- overseer end -->\n\n          <!-- overseer fail start -->\n          <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let overseer of policyForm?.CCFailEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccFail', overseer)\">&#xe90d;</i>\n                      {{ overseer?.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let data of policyForm?.CCFailEmailGroup | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccGroupFailEmail', data)\">&#xe90d;</i>\n                      {{ data?.group_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <!-- overseer fail end -->\n        </div>\n      </div>\n    </div>\n\n    <!-- When -->\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'frequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">When?</label>\n\n          <div *ngIf=\"policyForm?.frequency_details == ''\" class=\"select button-sec\">\n            <div class=\"custom-input frequency-custom-input\" (click)=\"activateSelector('frequency', true)\">\n              {{ frequencyPlaceholder }}\n            </div>\n\n            <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n              Set A frequency\n            </button>\n          </div>\n          <!-- <div\n            *ngIf=\"policyForm?.frequency_details != ''\"\n            class=\"selected button-sec\"\n          > -->\n          <div *ngIf=\"policyForm?.frequency_details != ''\"\n            class=\"selected button-sec selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i (click)=\"remove('frequency', rc)\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"frequencyPlaceholder\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ frequencyPlaceholder }}</span>\n            </div>\n            <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\n              (click)=\"activateSelector('frequency', true)\">\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button>\n            <!-- </div>\n            <span class=\"chip\">{{ frequencyPlaceholder }}</span>\n            <button\n              *ngIf=\"activeSelector !== 'frequency'\"\n              type=\"button\"\n              class=\"edit\"\n              (click)=\"activateSelector('frequency', true)\"\n            >\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button> -->\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              ((policyForm?.selectedAssignees?.length > 0 &&\n                !policyForm?.frequency_details &&\n                !groupEnabled) ||\n                ((policyForm?.selectedAssignees?.length > 0 ||\n                  policyForm?.selectedGroupAssignee?.length > 0) &&\n                  !policyForm?.frequency_details &&\n                  groupEnabled))\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select an attestation schedule for this policy.\n          </p>\n\n          <p *ngIf=\"submitted && policyForm?.frequency_details && policyForm?.selectedAssignees?.length > 0 && isPastDate\"\n            class=\"error-message\">\n            Set a future date.\n          </p>\n\n          <!-- <label class=\"vx-control-panel\">Effective Date</label>\n                  <div class=\"date-time-picker\">\n                      <div class=\"picker-group\">\n                          <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\n                              [value]=\"policyForm.policyDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\n                          <i class=\"icons\">&#xe92d;</i>\n                          <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\n                              [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n                          </dp-date-picker>\n                          <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n                      </div>\n                  </div> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Checkpoints / Assessment of Understanding -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"true\"\n      [class.active]=\"activeSelector === 'checkpoints'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'checkpoints' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">\n            Assessment of Understanding\n            <!-- <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n          </label>\n          <div class=\"select\" *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\n            (click)=\"activateSelector('checkpoints', true)\">\n            <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\n            <div class=\"custom-input\">\n              Set up a questionnaire to confirm the reader\u2019s<br />understanding\n              of the policy.\n            </div>\n          </div>\n          <div class=\"selected\" *ngIf=\"policyForm?.checkpointDetails?.length > 0\">\n            <!-- <div class=\"chip-container\">\n                      <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\n\n                      <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\n\n                      <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\n\n                    </div> -->\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                (click)=\"remove('checkpoints', policyForm?.checkpointDetails)\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\">{{\n                policyForm?.checkpointDetails?.length +\n                (policyForm?.checkpointDetails?.length > 1\n                ? \" Questions\"\n                : \" Question\")\n                }}</span>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\n                  <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                          <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\n                              <div class=\"avatar-card\">\n                                  <span class=\"value\">\n                                      <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\n                                      {{ checkpoint?.question }}\n                                  </span>\n                              </div>\n                          </li>\n                      </ul>\n                  </div>\n              </app-popover> -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Risk Classification -->\n    <div class=\"form-group-row\" *ngIf=\"showRiskClassification && false\"\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\n        <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!policyForm?.riskRating\" />\n\n        <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"policyForm?.riskRating\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Risk Classification</label>\n          <div class=\"classification\">\n            <label class=\"low\" *ngFor=\"let class of riskClassification\" [ngClass]=\"[class.class]\">\n              <input type=\"radio\" name=\"classification\" [value]=\"class.value\"\n                [checked]=\"policyForm?.riskRating === class.value\" [(ngModel)]=\"policyForm.riskRating\" />\n              <span>{{ class.name }}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Responsibility Center -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addResponsibilityCenters\"\n      [class.active]=\"activeSelector === 'rc'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'rc' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\n          \" [src]=\"ASSETS.responsibility_center\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Responsibility Center</label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('rc', true)\"\n              placeholder=\"Select Responsibility Center(s) that this policy relates to.\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc.item_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                appPopover (click)=\"rcPopover.popover()\" placement=\"left\" *ngIf=\"policyForm?.selectedRCs?.length > 1\">\n                +{{ policyForm?.selectedRCs?.slice(1).length }}\n              </button>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('rc', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #rcPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let rc of policyForm?.selectedRCs | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n                      {{ rc.item_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n\n    <!-- Version -->\n    <div *ngIf=\"policyForm.addVersion\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.disabled]=\"\n        activeSelector && sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\n        <img [src]=\"ASSETS.associated_risks\" alt=\"name\" *ngIf=\"!policyForm.policy_version\" />\n\n        <svg *ngIf=\"policyForm.policy_version\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">VERSION</label>\n          <input [(ngModel)]=\"policyForm.policy_version\" (change)=\"onVersion($event)\" type=\"text\"\n            placeholder=\"Specify the policy version.\" />\n          <p *ngIf=\"!isVersionValid\" class=\"error-message\" [appScrollInView]=\"true\">\n            {{ versionErrorMessage }}\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Reviewer -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addReviewers && false\"\n      [class.active]=\"activeSelector === 'reviewer'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'reviewer' &&\n        activeSelector !== 'reviewerFrequency' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.selectedReviewers?.length > 0\">\n        <img *ngIf=\"\n            policyForm?.selectedReviewers?.length == 0 ||\n            activeSelector === 'reviewer'\n          \" [src]=\"ASSETS.reviewer\" alt=\"\" />\n\n        <svg *ngIf=\"\n            policyForm?.selectedReviewers?.length > 0 &&\n            activeSelector !== 'reviewer'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Reviewer </label>\n          <div class=\"select\" *ngIf=\"policyForm?.selectedReviewers?.length == 0\">\n            <input type=\"text\" (click)=\"activateSelector('reviewer', true)\"\n              placeholder=\"Select the person responsible for reviewing this policy\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"policyForm?.selectedReviewers?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let reviewer of policyForm?.selectedReviewers\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('reviewer', reviewer)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ reviewer.member_name }}</span>\n              </ng-container>\n            </div>\n\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              policyForm?.selectedReviewers?.length == 0 &&\n              policyForm?.review_frequency_details\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select a reviewer for this policy.\n          </p>\n\n          <label class=\"vx-control-panel\">When? </label>\n\n          <div *ngIf=\"policyForm?.review_frequency_details == ''\" class=\"select button-sec\">\n            <input type=\"text\" (click)=\"activateSelector('reviewerFrequency', true)\"\n              [placeholder]=\"reviewerFrequencyPlaceholder\" readonly />\n            <button (click)=\"activateSelector('reviewerFrequency', true)\" type=\"button\">\n              Set A frequency\n            </button>\n          </div>\n          <div *ngIf=\"policyForm?.review_frequency_details != ''\" class=\"selected button-sec\">\n            <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\n            <button *ngIf=\"activeSelector !== 'reviewerFrequency'\" type=\"button\" class=\"edit\"\n              (click)=\"activateSelector('reviewerFrequency', true)\">\n              <i class=\"icons\">&#xe9ba;</i>Edit\n            </button>\n          </div>\n          <p *ngIf=\"\n              submitted &&\n              policyForm?.selectedReviewers?.length > 0 &&\n              !policyForm?.review_frequency_details\n            \" class=\"error-message\" [appScrollInView]=\"true\">\n            Select the review schedule for this policy.\n          </p>\n\n          <app-format-and-evidence (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\" #formatEvidence\n            [mode]=\"'policyReviewer'\" [organization_id]=\"organization_id\"\n            [formatEvidanceData]=\"policyForm?.documentsAndLinks\">\n          </app-format-and-evidence>\n        </div>\n      </div>\n    </div>\n\n    <!-- Overseer -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addOverseers\" [class.active]=\"\n        activeSelector === 'ccEmail' || activeSelector === 'ccFail'\n      \" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'ccEmail' &&\n        activeSelector !== 'ccFail' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"\n          policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\n        \">\n        <img *ngIf=\"\n            (policyForm?.CCFailEmail?.length == 0 &&\n              policyForm?.CCEmail?.length == 0) ||\n            activeSelector === 'ccEmail' ||\n            activeSelector === 'ccFail'\n          \" [src]=\"ASSETS.oversight\" alt=\"im\" />\n\n        <svg *ngIf=\"\n            (policyForm?.CCFailEmail?.length > 0 ||\n              policyForm?.CCEmail?.length > 0) &&\n            activeSelector !== 'ccEmail' &&\n            activeSelector !== 'ccFail'\n          \" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">Oversight</label>\n          <div class=\"select\" *ngIf=\"\n              policyForm?.CCEmail?.length == 0 &&\n              policyForm?.CCGroupEmail.length == 0\n            \">\n            <input type=\"text\" (click)=\"activateSelector('ccEmail', true)\"\n              placeholder=\"Who should have oversight of this policy?\" readonly />\n          </div>\n          <div class=\"selected\" *ngIf=\"\n              policyForm?.CCEmail?.length > 0 ||\n              policyForm?.CCGroupEmail.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccEmail', ccEmail)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"ccEmail.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ ccEmail.employee_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"ccEmailPopover.popover()\" placement=\"left\" *ngIf=\"policyForm?.CCEmail?.length > 1\">\n                +{{ policyForm?.CCEmail?.slice(1).length }}\n              </button>\n            </div>\n\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCEmail[0].employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"overseerPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCEmail?.length > 1\">\n                  +{{ policyForm?.CCEmail?.length - 1 }}\n                </button>\n              </div>\n\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.CCEmail.length > 0 &&\n                  policyForm?.CCGroupEmail?.length > 0\n                \">\n                &\n              </div>\n\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.CCGroupEmail.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCGroupEmail[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"overseerGroup.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCGroupEmail?.length > 1\">\n                  +{{ policyForm?.CCGroupEmail?.length - 1 }}\n                </button>\n              </div>\n            </div>\n\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccEmail', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n\n          <div class=\"select\" *ngIf=\"\n              policyForm?.CCFailEmail?.length == 0 &&\n              policyForm?.CCFailEmailGroup?.length == 0\n            \">\n            <input type=\"text\" (click)=\"activateSelector('ccFail', true)\"\n              placeholder=\"Who should be notified if the policy is not attested on time?\" readonly />\n          </div>\n\n          <div class=\"selected\" *ngIf=\"\n              policyForm?.CCFailEmail?.length > 0 ||\n              policyForm?.CCFailEmailGroup?.length > 0\n            \">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\n              <ng-container *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('ccFail', ccFail)\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"ccFail.employee_name\" placement=\"bottom-left\"\n                  delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ ccFail.employee_name }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                appPopover (click)=\"ccFailPopover.popover()\" placement=\"right\"\n                *ngIf=\"policyForm?.CCFailEmail?.length > 1\">\n                +{{ policyForm?.CCFailEmail?.slice(1).length }}\n              </button>\n            </div>\n\n            <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCFailEmail[0]?.employee_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n                  appPopover (click)=\"overseerFailPopover.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCFailEmail?.length > 1\">\n                  +{{ policyForm?.CCFailEmail?.length - 1 }}\n                </button>\n              </div>\n\n              <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"\n                  policyForm?.CCFailEmail?.length > 0 &&\n                  policyForm?.CCFailEmailGroup?.length > 0\n                \">\n                &\n              </div>\n\n              <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n                *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\">\n                <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"\n                    remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\n                  \">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                  policyForm?.CCFailEmailGroup[0]?.group_name }}</span>\n                <button\n                  class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                  appPopover (click)=\"overseerFailGroup.popover()\" placement=\"right\"\n                  *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\">\n                  +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\n                </button>\n              </div>\n            </div>\n            <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccFail', true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let ccEmail of policyForm?.CCEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\">&#xe90d;</i>\n                      {{ ccEmail.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let ccFail of policyForm?.CCFailEmail | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\">&#xe90d;</i>\n                      {{ ccFail.employee_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n\n    <!-- Related Documents -->\n    <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addAssociatedDocuments\"\n      [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\n      <div class=\"left\">\n        <img *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\" [src]=\"ASSETS.format_evidence\" alt=\"im\" />\n\n        <svg *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">RELATED DOCUMENTS</label>\n          <app-format-and-evidence (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\" [mode]=\"'policy'\"\n            [organization_id]=\"organization_id\"\n            [formatEvidanceData]=\"policyForm?.associatedDocuments\"></app-format-and-evidence>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Programs & Responsibilities -->\n    <div *ngIf=\"policyForm?.addLinkProgram\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === 'linkProgram'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'linkProgram' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"\n          policyForm?.programSelectedValues?.program?.category_id\n        \">\n        <img *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\" [src]=\"ASSETS.link_items\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\" class=\"checkIcon\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK PROGRAMS & RESPONSIBILITIES</label>\n          <div *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n            (click)=\"activateSelector('linkProgram', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select Programs & responsibilities that are<br />associated with\n              this policy.\n            </div>\n          </div>\n\n          <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n            *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i (click)=\"\n                  remove('linkProgram', policyForm?.programSelectedValues)\n                \" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\"\n                [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\" placement=\"bottom-left\" delay=\"0\"\n                type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.programSelectedValues?.program?.name }}</span>\n              <!-- <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                appPopover\n                (click)=\"programResponsibilityPopover.popover()\"\n                placement=\"left\"\n              >\n                +4\n              </button> -->\n            </div>\n            <app-popover #programResponsibilityPopover [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\" [appTooltip]=\"\n                          'Reporting information security weaknesses'\n                        \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                        <i class=\"icons\">&#xe90d;</i>\n                        Reporting information security weaknesses\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n            <button\n              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\"\n              (click)=\"activateSelector('linkProgram', true)\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Assessment -->\n    <div *ngIf=\"policyForm.addLinkAssessment\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === 'isAssessment'\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'isAssessment' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\n        <img *ngIf=\"!policyForm?.assessment?.length\" [src]=\"ASSETS.assessments\" alt=\"\" />\n\n        <svg *ngIf=\"policyForm?.assessment?.length\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK ASSESSMENTS</label>\n          <div *ngIf=\"policyForm?.assessment?.length === 0\" (click)=\"activateSelector('isAssessment', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select assessments that are associated with this<br />policy.\n            </div>\n          </div>\n\n          <div *ngIf=\"policyForm?.assessment?.length > 0\"\n            class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n              <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"\n                  policyForm.assessment[0]?.assessmentDetails?.assessment_name\n                \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{\n                policyForm.assessment[0]?.assessmentDetails?.assessment_name\n                }}</span>\n            </div>\n            <app-popover #programResponsibilityPopover [dontCloseonClick]=\"true\">\n              <div class=\"wf-action-list\">\n                <ul class=\"action-item\">\n                  <li *ngFor=\"let assessment of policyForm.assessment | slice : 1\">\n                    <div class=\"avatar-card\">\n                      <span class=\"value\" [appTooltip]=\"\n                          assessment?.assessmentDetails?.assessment_name\n                        \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n                        <i class=\"icons\">&#xe90d;</i>\n                        {{ assessment?.assessmentDetails?.assessment_name }}\n                      </span>\n                    </div>\n                  </li>\n                </ul>\n              </div>\n            </app-popover>\n            <button (click)=\"activateSelector('isAssessment', true)\"\n              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\">\n              <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Link Related Polices -->\n\n    <div *ngIf=\"policyForm.addLinkPolicies\" [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\"\n      [class.active]=\"activeSelector === CONSTANTS.LINK_POLICY\" [class.disabled]=\"\n        activeSelector &&\n        activeSelector !== 'isLinkedPolices' &&\n        sideSelectorElements.includes(activeSelector)\n      \">\n      <div class=\"left\" [class.checked]=\"SelectedListOfPolicies\">\n        <img *ngIf=\"!SelectedListOfPolicies?.length\" [src]=\"LINKS.linkedPolicyImage\" alt=\"\" />\n\n        <svg *ngIf=\"SelectedListOfPolicies?.length\" class=\"checkIcon\" [xmlns]=\"LINKS.checked\" viewBox=\"0 0 52 52\">\n          <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n          <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n        </svg>\n      </div>\n      <div class=\"right\">\n        <div class=\"vx-form-group\">\n          <label class=\"vx-control-panel\">LINK RELATED POLICIES</label>\n          <div *ngIf=\"SelectedListOfPolicies?.length === 0\" (click)=\"activateSelector('isLinkedPolices', true)\"\n            class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\" [class.disabled]=\"false\">\n            <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n              Select policies that are associated with this policy.\n            </div>\n          </div>\n\n          <div class=\"selected\" *ngIf=\"SelectedListOfPolicies?.length > 0\">\n            <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\n              <ng-container *ngFor=\"let policy of SelectedListOfPolicies.slice(0, 1)\">\n                <i (click)=\"remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\">&#xe9ae;</i>\n                <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policy?.contract_name\"\n                  placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ policy?.contract_name\n                  }}</span>\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                *ngIf=\"SelectedListOfPolicies?.length > 1\" type=\"button\" appPopover (click)=\"relatedPolicy.popover()\"\n                placement=\"left\">\n                +{{ SelectedListOfPolicies?.slice(1).length }}\n              </button>\n            </div>\n            <button *ngIf=\"activeSelector !== CONSTANTS.LINK_POLICY\" class=\"edit\" type=\"button\"\n              (click)=\"activateSelector(CONSTANTS.LINK_POLICY, true)\">\n              <i class=\"icons\">&#xe9ba;</i> Edit\n            </button>\n          </div>\n          <app-popover #relatedPolicy [dontCloseonClick]=\"true\">\n            <div class=\"wf-action-list\">\n              <ul class=\"action-item\">\n                <li *ngFor=\"\n                    let policy of SelectedListOfPolicies | slice : 1;\n                    let j = index\n                  \">\n                  <div class=\"avatar-card\">\n                    <span class=\"value\">\n                      <i class=\"icons\" (click)=\"\n                          remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\n                        \">&#xe90d;</i>\n                      {{ policy?.contract_name }}\n                    </span>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </app-popover>\n          <app-cs-switch [(ngValue)]=\"policyForm.isPortalDisplayEnabled\"\n            [class.disabled]=\"policyForm?.LinkedPolicies == 0\" class=\"who-toggle\">DISPLAY ON THE POLICY PORTAL\n            <i class=\"icons\" [appTooltip]=\"CONSTANTS.LINK_POLICY_HELP_TEXT\" placement=\"bottom-right\" type=\"white\"\n              delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <app-checkbox-list [config]=\"categoryConfig\" [twoColumn]=\"false\" [itemsList]=\"categoryList\"\n    [selectedItems]=\"policyForm.selectedCategories\" [identifierKey]=\"'_id'\" [displayKey]=\"'item_name'\"\n    [tooltipKey]=\"'item_name'\" *ngIf=\"activeSelector === 'category'\" (saveList)=\"saveSelectedList('category', $event)\"\n    (closeList)=\"disableSelector()\" [loaded]=\"!categoriesListLoaded\">\n  </app-checkbox-list>\n  <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\n  [itemsList]=\"\"\n  [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\n  *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\n  (closeList)=\"fieldDeselector('ISSUE_CC')\">\n</app-checkbox-list> -->\n\n  <app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"rcList\"\n    [selectedResponsibilityCenters]=\"policyForm.selectedRCs\" [rcIdKey]=\"'item_id'\"\n    (saveSelectedList)=\"saveSelectedList('rc', $event)\" (closeRcList)=\"disableSelector()\" [loaded]=\"rcListLoaded\">\n  </app-responsibility-centers-list>\n\n  <app-link-related-policies *ngIf=\"activeSelector === CONSTANTS.LINK_POLICY\" [policyId]=\"policyId\" [mode]=\"mode\"\n    [selectedPolicies]=\"SelectedListOfPolicies\" (closeLinkPolicyList)=\"disableSelector()\"\n    (selectedList)=\"saveSelectedList(CONSTANTS.LINK_POLICY, $event)\"></app-link-related-policies>\n\n  <app-users-radio-list *ngIf=\"activeSelector === 'reviewer'\" [itemEmailKey]=\"'member_email'\" [usersList]=\"allReviewers\"\n    [headerText]=\"'Select a Reviewer'\" [selectedUsers]=\"policyForm.selectedReviewers\" [userIdKey]=\"'member_id'\"\n    [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-users-radio-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\" [usersList]=\"overseersList\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [selectedUsers]=\"policyForm.CCEmail\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-owner-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\" [groupEnabled]=\"true\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\"\n    [groupList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.CCEmail\" [selectedGroups]=\"policyForm.CCGroupEmail\" [isPaginationEnabled]=\"isPaginationEnabled\"\n    (save)=\"saveSelectedList('ccEmail', $event)\" (cancel)=\"disableSelector()\" [featureflag]=\"groupEnabled\" (fetchUserData)=\"getUsersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\" [usersList]=\"overseersList\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [selectedUsers]=\"policyForm.CCFailEmail\"\n    [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\" (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\n    (closeUsersList)=\"disableSelector()\">\n  </app-owner-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'ccFail' && groupEnabled\" [groupEnabled]=\"true\"\n    [groupList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.CCFailEmail\"\n    [selectedGroups]=\"policyForm.CCFailEmailGroup\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\" [isPaginationEnabled]=\"isPaginationEnabled\" (save)=\"saveSelectedList('ccFail', $event)\"\n    (cancel)=\"disableSelector()\" [featureflag]=\"groupEnabled\" (fetchUserData)=\"getUsersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-group-users-list *ngIf=\"activeSelector === 'assignees' && !groupEnabled\" [usersList]=\"assigneesList\"\n    [groupsList]=\"overseerGroupsList\" [selectedUsers]=\"policyForm.selectedAssignees\" [userIdKey]=\"'my_member_id'\"\n    (saveSelectedList)=\"saveSelectedList('assignees', $event)\" (closeUsersList)=\"disableSelector()\">\n  </app-group-users-list>\n\n  <user-group-list *ngIf=\"activeSelector === 'assignees' && groupEnabled\" [groupEnabled]=\"true\"\n    [groupList]=\"overseerGroupsList\" (save)=\"saveSelectedList('assignees', $event)\" (cancel)=\"disableSelector()\"\n    [selectedGroups]=\"policyForm.selectedGroupAssignee\" [selectedUsers]=\"policyForm.selectedAssignees\"\n    [featureflag]=\"groupEnabled\" [loading]=\"paginatedUsersList?.loading\" [userlist]=\"paginatedUsersList?.users\" [userListInfo]=\"paginatedUsersList\" [isPaginationEnabled]=\"isPaginationEnabled\" (fetchUserData)=\"getUsersListWithPagination($event)\">\n  </user-group-list>\n\n  <app-owner-list *ngIf=\"activeSelector === 'approvers' && false\" [listHeading]=\"'Select Approvers'\"\n    [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"true\"\n    [selectedUsers]=\"\n      addMoreLevels\n        ? []\n        : policyForm.selectedApprovers[approversListIndex].approvers\n    \" [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\n    (saveSelectedList)=\"saveSelectedList('approvers', $event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\n    [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n    [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\n  </app-owner-list>\n\n  <app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [mode]=\"'policy'\"\n    [frequencyDetails]=\"frequencyDetails\" (selectedFrequency)=\"frequencyData($event)\" [feature]=\"feature\"\n    [pageType]=\"'policy'\" (closeFrequency)=\"disableSelector()\"></app-frequency-container>\n\n  <app-frequency-container *ngIf=\"activeSelector === 'reviewerFrequency'\" [mode]=\"'reviewerFrequency'\"\n    [frequencyDetails]=\"reviewerFrequencyDetails\" (selectedFrequency)=\"reviewerFrequencyData($event)\"\n    [feature]=\"feature\" [pageType]=\"'policy'\" (closeFrequency)=\"disableSelector()\"></app-frequency-container>\n\n  <vc-link-program *ngIf=\"activeSelector === 'linkProgram'\" (close)=\"disableSelector()\" [policy]=\"policyForm\"\n    [selectedProgram]=\"policyForm?.programSelectedValues\" [mode]=\"mode\" [selectedLinkProgram]=\"selectedLinkProgram\"\n    (changeTab)=\"changeTab('linkedPrograms')\" (updatedProgramDetails)=\"updatedProgramDetails($event)\">\n  </vc-link-program>\n\n  <app-checkpoints-policy-container (closeCheckPoint)=\"disableSelector()\"\n    [checkpointData]=\"policyForm?.checkpointDetails\" [requiredPoint]=\"policyForm?.passingMarks\"\n    *ngIf=\"activeSelector === 'checkpoints'\"\n    (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"></app-checkpoints-policy-container>\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n  <app-approval-workflow *ngIf=\"enableApprovalWorkflow\" [selectedCategory]=\"policyForm?.selectedCategories\"\n    [approverWorkFlowList]=\"approverWorkFlowList\" [allApprovers]=\"allApprovers\"\n    (listCancelClicked)=\"listCancelClicked($event)\" (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\n    (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\" [editApprovalWorkflow]=\"editApprovalWorkflow\"\n    [createApprovalClick]=\"createApprovalClick\" (closeCreateClicked)=\"closeClickedCreateForm()\"\n    [editWorkflowLevel]=\"editWorkflowLevel\"></app-approval-workflow>\n  <!-- <app-select-approvers></app-select-approvers> -->\n\n  <app-policy-access *ngIf=\"activeSelector === 'policyAccess'\" [policyAccessType]=\"policyForm?.policy_access_type\"\n    (close)=\"disableSelector()\" [orgUsersList]=\"paginatedUsersList?.users\" [usersAccessList]=\"usersAccessList\"\n    [groupList]=\"overseerGroupsList\" [groupsAccessList]=\"groupsAccessList\"\n    [selectedUsers]=\"policyForm?.policy_access_owners\" [selectedGroups]=\"policyForm?.policy_access_groups\"\n    [disabledIds]=\"usersAccessListIds\" [disabledGroupIds]=\"groupsAccessListIds\"\n    [futureUsersWillSelect]=\"policyForm?.availableOnPortal\" (saveCheckPoint)=\"saveSelectedList('policyAccess', $event)\"\n    (setPolicyAccessType)=\"policyForm.policy_access_type = $event\" [loading]=\"paginatedUsersList?.loading\" [userListInfo]=\"paginatedUsersList\" [isPaginationEnabled]=\"isPaginationEnabled\" (fetchUserData)=\"getUsersListWithPagination($event)\" [featureflag]=\"groupEnabled\">\n  </app-policy-access>\n</ng-container>\n<ng-container *ngIf=\"showCreateDocuments\">\n  <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\n   [organization_id]=\"organization_id\"\n   [member_obj_id]=\"member_obj_id\"\n   [userInfo]=\"userInfo\"\n   [policyId]=\"policyId\"\n   [policyName]=\"policyForm.policyName\"\n   (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n   (editPolicy)=\"editPolicyFromDocuments()\"\n   ></app-create-documents> -->\n  <lib-document-section *ngIf=\"showCreateDocuments\" [templateView]=\"templateView\" [organization_id]=\"organization_id\"\n    [member_obj_id]=\"member_obj_id\" [userInfo]=\"userInfo\" [policyId]=\"policyId\" [feature]=\"feature\"\n    [templateUrl]=\"templateUrl\" [policyName]=\"policyForm.policyName\" (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n    (editPolicy)=\"editPolicyFromDocuments()\" (openTemplate)=\"templateView = true\"></lib-document-section>\n</ng-container>\n\n<app-assessment-list *ngIf=\"activeSelector === 'isAssessment'\" [program_ids]=\"''\"\n  [isEdit]=\"policyForm?.assessment?.length\" (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\n  [selectedAssessment]=\"policyForm?.assessment[0]\" [mode]=\"'policy'\" (onAssessmentSelect)=\"\n    onAssessmentSelect($event); saveSelectedList('isAssessment', false)\n  \"></app-assessment-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'approvers' && false\" [listHeading]=\"'Select Approvers'\"\n  [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"true\"\n  [selectedUsers]=\"\n    addMoreLevels\n      ? []\n      : policyForm.selectedApprovers[approversListIndex].approvers\n  \" [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\n  (saveSelectedList)=\"saveSelectedList('approvers', $event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\n  [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n  [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\n</app-owner-list>\n\n<app-owner-list *ngIf=\"activeSelector === 'owners'\" [listHeading]=\"'Select Owner(s)'\" [singularText]=\"'User selected'\"\n  [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"false\" [userIdKey]=\"'member_id'\"\n  [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('owners', $event)\"\n  (closeUsersList)=\"disableSelector()\" [mode]=\"mode\" [selectedUsers]=\"policyForm?.policy_owners ?? []\">\n</app-owner-list>\n\n<app-select-template-list *ngIf=\"templateView\" [selectedCategoryId]=\"policyForm?.selectedCategories\" [feature]=\"feature\"\n  (onTemplateSelect)=\"onTemplateSelect($event)\"></app-select-template-list>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility-inner-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}.who-toggle{margin-top:10px}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.right app-format-and-evidence~.error-message{position:relative;top:-12px}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
         }], ctorParameters: function () { return [{ type: PolicyService }, { type: SnackBarService }, { type: UiKitService }, { type: AuthService$1 }, { type: ResponsibilityService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: FrequencyService }, { type: i1$1.PlatformLocation }, { type: i0.ChangeDetectorRef }, { type: RestApiService }, { type: CommonService }, { type: OrganizationUserService }, { type: OrganizationCommonService }, { type: ComplianceCommonService }, { type: IframeService }, { type: DateUtilityService }]; }, propDecorators: { pickerChanged: [{
                 type: Output
             }], mode: [{