vcomply-workflow-engine 7.3.4 → 7.3.6

package/fesm2022/vcomply-workflow-engine.mjs

@@ -16837,7 +16837,6 @@ class UserGroupListComponent {
         this.defaultSelectedUsers = [];
         this.defaultSelectedUserIds = [];
         this.userType = 'assignees';
-        this.showConfirmation = false;
         this.animation = true;
         this.currentTab = 'USER';
     }
@@ -16855,37 +16854,11 @@ class UserGroupListComponent {
         this.searchKey = '';
     }
     saveList() {
-        if (this.defaultSelectedUserIds &&
-            this.defaultSelectedUserIds?.length &&
-            this.selectedUserIds &&
-            this.selectedUserIds?.length) {
-            this.defaultSelectedUserIds?.forEach((id) => {
-                if (!this.selectedUserIds?.includes(id)) {
-                    this.showConfirmation = true;
-                }
-            });
-        }
-        else {
-            this.showConfirmation = false;
-        }
-        if (!this.showConfirmation)
-            this.save.emit({
-                users: this.selectedUsers,
-                groups: this.selectedGroups,
-                futureUsersWillSelect: this.futureUsersWillSelect,
-            });
-    }
-    confirmAction(evt) {
-        if (evt === 'YES') {
-            this.save.emit({
-                users: this.selectedUsers,
-                groups: this.selectedGroups,
-                futureUsersWillSelect: this.futureUsersWillSelect,
-            });
-        }
-        else if (evt === 'NO') {
-            this.showConfirmation = false;
-        }
+        this.save.emit({
+            users: this.selectedUsers,
+            groups: this.selectedGroups,
+            futureUsersWillSelect: this.futureUsersWillSelect,
+        });
     }
     closeList() {
         this.cancel.emit();
@@ -16948,11 +16921,11 @@ class UserGroupListComponent {
         }
     }
     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", 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\">\r\n  <div class=\"user-group-list-head\">\r\n    <h3 class=\"user-group-list-title\">{{ panelTitle }}</h3>\r\n  </div>\r\n  <div class=\"user-group-list-body\">\r\n    <div class=\"user-group-list-body-inner\">\r\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\r\n      <div class=\"user-group-list-tab vx-d-flex vx-align-center vx-justify-between vx-mb-2\" *ngIf=\"groupEnabled\">\r\n        <div class=\"vx-d-flex vx-align-center\">\r\n          <button (click)=\"switchTab('USER')\"\r\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\"\r\n            [class.active]=\"currentTab === 'USER'\">\r\n            USERS\r\n            <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{\r\n              searchKey?.length && currentTab === \"USER\"\r\n              ? ((usersList | search : searchKey : 'member_name')?.length ?? 0)\r\n              : (usersList?.length ?? userListInfo?.total_items ?? 0)\r\n              }}</span>\r\n          </button>\r\n          <button *ngIf=\"isGroupTabShow\" (click)=\"switchTab('GROUP')\"\r\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\"\r\n            [class.active]=\"currentTab === 'GROUP'\">\r\n            {{ featureflag ? \"USER GROUPS\" : \"GROUPS\" }}\r\n            <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{\r\n              searchKey?.length && currentTab === \"GROUP\"\r\n              ? ((groupsList | search : searchKey : \"group_name\")?.length ?? 0)\r\n              : (groupsList?.length ?? groupListInfo?.total_items ?? 0)\r\n              }}</span>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"future-user vx-d-flex vx-align-center\" *ngIf=\"showFutureUsersSwitch\">\r\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">\r\n            Visible to All Current & Future Users\r\n          </div>\r\n          <i class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-1\" [appTooltip]=\"\r\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.'\r\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n          <app-cs-switch [ngValue]=\"futureUsersWillSelect\" (ngValueChange)=\"setAllUsersSelected($event)\">\r\n          </app-cs-switch>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"search-block vx-mb-2\">\r\n        <i class=\"icons\">&#xe90b;</i>\r\n        <input *ngIf=\"!featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{\r\n            currentTab === 'USER' ? 'Search User' : 'Search Group'\r\n          }}\" />\r\n        <input *ngIf=\"featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{\r\n            currentTab === 'USER' ? 'Search User' : 'Search User Group'\r\n          }}\" />\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'USER' && !loading\">\r\n        <ng-container *ngIf=\"usersList | search : searchKey : 'member_name' as users\">\r\n          <vui-pagination *ngIf=\"\r\n              userListInfo?.total_pages > 1 &&\r\n              usersList?.length !== userListInfo?.total_items\r\n            \" [currentPage]=\"userCurrentPage\" [totalPage]=\"userListInfo?.total_pages\"\r\n            (pageChanged)=\"userPageChange($event)\"></vui-pagination>\r\n          <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n            <ng-container *ngIf=\"users?.length > 0; else nouser\">\r\n              <div class=\"user-list-select vx-mb-2\">\r\n                <vui-checkbox *ngIf=\"!singleSelect\" #user [checked]=\"allUserSelected || futureUsersWillSelect\"\r\n                  [disabled]=\"\r\n                    allUserSelectedDisabled ||\r\n                    futureUsersWillSelect ||\r\n                    isAllDisabled\r\n                  \" (change)=\"selectAllUser($event)\">\r\n                  <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">\r\n                    {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\r\n                  </div>\r\n                </vui-checkbox>\r\n              </div>\r\n              <div class=\"user-list-item\">\r\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                  <ng-container *ngFor=\"let user of users\">\r\n                    <li class=\"vx-mb-3\" *ngIf=\"!singleSelect\" [appTooltip]=\"\r\n                        user\r\n                          | tooltipMessage\r\n                            : fromResponsibility\r\n                            : reviewerIds\r\n                            : overseerIds\r\n                            : assignorId\r\n                            : assigneeIds\r\n                            : 'member_id'\r\n                            : disabledIds?.includes(user?.member_id)\r\n                            : FromProgram\r\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                      <vui-checkbox (change)=\"selectItem($event, user)\" [disabled]=\"\r\n                          disabledIds?.includes(user?.member_id) ||\r\n                          futureUsersWillSelect ||\r\n                          isAllDisabled\r\n                        \" [checked]=\"\r\n                          selectedUserIds?.includes(user?.member_id) ||\r\n                          futureUsersWillSelect\r\n                        \">\r\n                        <div class=\"user-name\">\r\n                          {{ user?.member_name }}\r\n                        </div>\r\n                      </vui-checkbox>\r\n                    </li>\r\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\r\n                      <app-cs-radio [name]=\"'radio-selector'\" (checkedEvent)=\"selectItemRadio($event, user)\"\r\n                        [name]=\"'rx-category'\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"\r\n                        [appTooltip]=\"user?.member_email\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                        {{ user?.member_name }}\r\n                      </app-cs-radio>\r\n                    </li>\r\n                  </ng-container>\r\n                </ul>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #nouser>\r\n              <app-no-data *ngIf=\"!loading\" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\r\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\r\n                \"></app-no-data>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'GROUP'\">\r\n        <ng-container *ngIf=\"groupsList | search : searchKey : 'group_name' as groups\">\r\n          <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\r\n              <div class=\"user-list-select vx-mb-2\">\r\n                <vui-checkbox #group [checked]=\"allGroupSelected\" [disabled]=\"allGroupSelectedDisabled\"\r\n                  (change)=\"selectAllGroup($event)\">\r\n                  <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">\r\n                    {{ !group?.checked ? \"Select All\" : \"Deselect All\" }}\r\n                  </div>\r\n                </vui-checkbox>\r\n              </div>\r\n              <div class=\"user-list-item\">\r\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                  <li class=\"vx-mb-3\" *ngFor=\"let group of groups\">\r\n                    <vui-checkbox (change)=\"selectGroup($event, group)\" [disabled]=\"\r\n                        nonRemovableGroupIds?.includes(group?.group_id)\r\n                      \" [checked]=\"selectedGroupIds?.includes(group?.group_id)\">\r\n                      <div class=\"user-name vx-d-flex vx-align-center vx-w-100\" [appTooltip]=\"group?.group_name\"\r\n                        placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                        <div class=\"group-name\">{{ group?.group_name }}</div>\r\n                        <span class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\">{{\r\n                          group?.member_count ?? 0 }}\r\n                          {{ (group?.member_count ?? 0) > 1 ? \"USERS\" : \"USER\" }}</span>\r\n                      </div>\r\n                    </vui-checkbox>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #nogroup>\r\n              <app-no-data *ngIf=\"!loading\" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\r\n                  searchKey?.length > 0\r\n                    ? 'No match found.'\r\n                    : 'No data to display.'\r\n                \"></app-no-data>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"user-group-list-footer\">\r\n      <vui-floating-bar *ngIf=\"\r\n          (!singleSelect || (!singleSelect && selectedReviewer)) && !loading\r\n        \" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\" (workflowTypeChanged)=\"workflowTypeChanged($event)\"\r\n        [selectedWorkflow]=\"reviewerWorkflowType\" [showWorkflow]=\"selectedReviewer\" [groupSelected]=\"selectedGroups\"\r\n        [mode]=\"mode\" [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\">\r\n        <ng-container *ngIf=\"!groupEnabled\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\r\n            *ngFor=\"let element of selectedUsers?.slice(0, 1); let i = index\">\r\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n              (click)=\"selectItem({ target: { checked: false } }, element)\">&#xe9ae;</i>\r\n            <div *ngIf=\"\r\n                fromApprovalWorkflow &&\r\n                approvalWorkflowType.toLowerCase() === 'sequential'\r\n              \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\r\n              {{ 1 == selectedUsers?.length ? \"Final\" : 1 }}\r\n            </div>\r\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"element?.member_name\" placement=\"bottom-left\"\r\n              delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ element?.member_name }}</span>\r\n            <button *ngIf=\"selectedUsers?.length > 1\"\r\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\"\r\n              appPopover (click)=\"groupDisable.popover()\" placement=\"left\">\r\n              +{{ selectedUsers?.slice(1)?.length }}\r\n            </button>\r\n          </div>\r\n\r\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>\r\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\r\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div> -->\r\n        </ng-container>\r\n        <div class=\"user-group-chip\" *ngIf=\"selectedUsers?.length && groupEnabled\">\r\n          <i class=\"icons cross\" *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\" (click)=\"\r\n              selectItem({ target: { checked: false } }, selectedUsers[0])\r\n            \">&#xe9ae;</i>\r\n          <div class=\"user-group-name\">{{ selectedUsers[0]?.member_name }}</div>\r\n          <ng-container *ngIf=\"groupEnabled\">\r\n            <div class=\"counter\" *ngIf=\"selectedUsers?.length > 1\" appPopover (click)=\"userCount.popover()\"\r\n              placement=\"left\">\r\n              +{{ selectedUsers?.length - 1 }}\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"name userGroup-name\">\r\n          <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\r\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\">User {{ selectedGroups?.length > 0 ? \" & \" :\r\n            \" selected\" }}</span>\r\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\">Users {{ selectedGroups?.length > 0 ? \" & \" :\r\n            \"selected\" }}</span>\r\n        </div>\r\n\r\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\r\n          <i class=\"icons cross\" *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\" (click)=\"\r\n              selectGroup({ target: { checked: false } }, selectedGroups[0])\r\n            \">&#xe9ae;</i>\r\n          <div class=\"user-group-name\">{{ selectedGroups[0]?.group_name }}</div>\r\n          <div class=\"counter group\" *ngIf=\"selectedGroups?.length > 1\" appPopover (click)=\"groupCount.popover()\"\r\n            placement=\"left\">\r\n            +{{ selectedGroups?.length - 1 }}\r\n          </div>\r\n        </div>\r\n        <div class=\"name userGroup-name\">\r\n          <span *ngIf=\"selectedGroups?.length === 1\">{{\r\n            featureflag ? \"User Group selected\" : \"Group selected\"\r\n            }}</span>\r\n          <span *ngIf=\"selectedGroups?.length > 1\">{{\r\n            featureflag ? \"User Groups selected\" : \"Groups selected\"\r\n            }}</span>\r\n        </div>\r\n\r\n        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"let element of selectedUsers | slice : 1; let i = index\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"\r\n                        selectItem({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    {{ element?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n\r\n        <app-popover #groupDisable [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"let element of selectedUsers.slice(1); let i = index\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"\r\n                        selectItem({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    <span *ngIf=\"\r\n                        fromApprovalWorkflow &&\r\n                        approvalWorkflowType.toLowerCase() === 'sequential'\r\n                      \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">{{\r\n                      i + 1 === selectedUsers?.length - 1 ? \"Final\" : i + 2\r\n                      }}</span>\r\n                    {{ element?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n\r\n        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"\r\n                  let element of selectedGroups | slice : 1;\r\n                  let i = index\r\n                \">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\" (click)=\"\r\n                        selectGroup({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    {{ element?.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </vui-floating-bar>\r\n      <vui-floating-bar *ngIf=\"singleSelect && !loading\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\"\r\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\">\r\n        <div class=\"chip\" *ngIf=\"selectedUsers?.length\">\r\n          <ng-container>\r\n            <i class=\"icons\" (click)=\"\r\n                selectItem({ target: { checked: false } }, selectedUsers[0])\r\n              \">&#xe90d;</i>\r\n            <span class=\"value\"> {{ selectedUsers[0]?.member_name }}</span>\r\n          </ng-container>\r\n        </div>\r\n      </vui-floating-bar>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\r\n    <div class=\"confirmation-top\">\r\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n      <div class=\"text\">\r\n        This action will reset the default {{ userType }} selected for the\r\n        Program.\r\n      </div>\r\n    </div>\r\n    <div class=\"confirmation-bottom\">\r\n      <div class=\"message\">Are you sure you would like to proceed?</div>\r\n      <div class=\"button-group\">\r\n        <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\r\n        <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", 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"], outputs: ["closePopoverEvent"] }, { 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" }] }); }
+    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", 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\">\r\n  <div class=\"user-group-list-head\">\r\n    <h3 class=\"user-group-list-title\">{{ panelTitle }}</h3>\r\n  </div>\r\n  <div class=\"user-group-list-body\">\r\n    <div class=\"user-group-list-body-inner\">\r\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\r\n      <div class=\"user-group-list-tab vx-d-flex vx-align-center vx-justify-between vx-mb-2\" *ngIf=\"groupEnabled\">\r\n        <div class=\"vx-d-flex vx-align-center\">\r\n          <button (click)=\"switchTab('USER')\"\r\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\"\r\n            [class.active]=\"currentTab === 'USER'\">\r\n            USERS\r\n            <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{\r\n              searchKey?.length && currentTab === \"USER\"\r\n              ? ((usersList | search : searchKey : 'member_name')?.length ?? 0)\r\n              : (usersList?.length ?? userListInfo?.total_items ?? 0)\r\n              }}</span>\r\n          </button>\r\n          <button *ngIf=\"isGroupTabShow\" (click)=\"switchTab('GROUP')\"\r\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\"\r\n            [class.active]=\"currentTab === 'GROUP'\">\r\n            {{ featureflag ? \"USER GROUPS\" : \"GROUPS\" }}\r\n            <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{\r\n              searchKey?.length && currentTab === \"GROUP\"\r\n              ? ((groupsList | search : searchKey : \"group_name\")?.length ?? 0)\r\n              : (groupsList?.length ?? groupListInfo?.total_items ?? 0)\r\n              }}</span>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"future-user vx-d-flex vx-align-center\" *ngIf=\"showFutureUsersSwitch\">\r\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">\r\n            Visible to All Current & Future Users\r\n          </div>\r\n          <i class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-1\" [appTooltip]=\"\r\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.'\r\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n          <app-cs-switch [ngValue]=\"futureUsersWillSelect\" (ngValueChange)=\"setAllUsersSelected($event)\">\r\n          </app-cs-switch>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"search-block vx-mb-2\">\r\n        <i class=\"icons\">&#xe90b;</i>\r\n        <input *ngIf=\"!featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{\r\n            currentTab === 'USER' ? 'Search User' : 'Search Group'\r\n          }}\" />\r\n        <input *ngIf=\"featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{\r\n            currentTab === 'USER' ? 'Search User' : 'Search User Group'\r\n          }}\" />\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'USER' && !loading\">\r\n        <ng-container *ngIf=\"usersList | search : searchKey : 'member_name' as users\">\r\n          <vui-pagination *ngIf=\"\r\n              userListInfo?.total_pages > 1 &&\r\n              usersList?.length !== userListInfo?.total_items\r\n            \" [currentPage]=\"userCurrentPage\" [totalPage]=\"userListInfo?.total_pages\"\r\n            (pageChanged)=\"userPageChange($event)\"></vui-pagination>\r\n          <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n            <ng-container *ngIf=\"users?.length > 0; else nouser\">\r\n              <div class=\"user-list-select vx-mb-2\">\r\n                <vui-checkbox *ngIf=\"!singleSelect\" #user [checked]=\"allUserSelected || futureUsersWillSelect\"\r\n                  [disabled]=\"\r\n                    allUserSelectedDisabled ||\r\n                    futureUsersWillSelect ||\r\n                    isAllDisabled\r\n                  \" (change)=\"selectAllUser($event)\">\r\n                  <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">\r\n                    {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\r\n                  </div>\r\n                </vui-checkbox>\r\n              </div>\r\n              <div class=\"user-list-item\">\r\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                  <ng-container *ngFor=\"let user of users\">\r\n                    <li class=\"vx-mb-3\" *ngIf=\"!singleSelect\" [appTooltip]=\"\r\n                        user\r\n                          | tooltipMessage\r\n                            : fromResponsibility\r\n                            : reviewerIds\r\n                            : overseerIds\r\n                            : assignorId\r\n                            : assigneeIds\r\n                            : 'member_id'\r\n                            : disabledIds?.includes(user?.member_id)\r\n                            : FromProgram\r\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                      <vui-checkbox (change)=\"selectItem($event, user)\" [disabled]=\"\r\n                          disabledIds?.includes(user?.member_id) ||\r\n                          futureUsersWillSelect ||\r\n                          isAllDisabled\r\n                        \" [checked]=\"\r\n                          selectedUserIds?.includes(user?.member_id) ||\r\n                          futureUsersWillSelect\r\n                        \">\r\n                        <div class=\"user-name\">\r\n                          {{ user?.member_name }}\r\n                        </div>\r\n                      </vui-checkbox>\r\n                    </li>\r\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\r\n                      <app-cs-radio [name]=\"'radio-selector'\" (checkedEvent)=\"selectItemRadio($event, user)\"\r\n                        [name]=\"'rx-category'\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"\r\n                        [appTooltip]=\"user?.member_email\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                        {{ user?.member_name }}\r\n                      </app-cs-radio>\r\n                    </li>\r\n                  </ng-container>\r\n                </ul>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #nouser>\r\n              <app-no-data *ngIf=\"!loading\" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\r\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\r\n                \"></app-no-data>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'GROUP'\">\r\n        <ng-container *ngIf=\"groupsList | search : searchKey : 'group_name' as groups\">\r\n          <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\r\n              <div class=\"user-list-select vx-mb-2\">\r\n                <vui-checkbox #group [checked]=\"allGroupSelected\" [disabled]=\"allGroupSelectedDisabled\"\r\n                  (change)=\"selectAllGroup($event)\">\r\n                  <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">\r\n                    {{ !group?.checked ? \"Select All\" : \"Deselect All\" }}\r\n                  </div>\r\n                </vui-checkbox>\r\n              </div>\r\n              <div class=\"user-list-item\">\r\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                  <li class=\"vx-mb-3\" *ngFor=\"let group of groups\">\r\n                    <vui-checkbox (change)=\"selectGroup($event, group)\" [disabled]=\"\r\n                        nonRemovableGroupIds?.includes(group?.group_id)\r\n                      \" [checked]=\"selectedGroupIds?.includes(group?.group_id)\">\r\n                      <div class=\"user-name vx-d-flex vx-align-center vx-w-100\" [appTooltip]=\"group?.group_name\"\r\n                        placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                        <div class=\"group-name\">{{ group?.group_name }}</div>\r\n                        <span class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\">{{\r\n                          group?.member_count ?? 0 }}\r\n                          {{ (group?.member_count ?? 0) > 1 ? \"USERS\" : \"USER\" }}</span>\r\n                      </div>\r\n                    </vui-checkbox>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #nogroup>\r\n              <app-no-data *ngIf=\"!loading\" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\r\n                  searchKey?.length > 0\r\n                    ? 'No match found.'\r\n                    : 'No data to display.'\r\n                \"></app-no-data>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"user-group-list-footer\">\r\n      <vui-floating-bar *ngIf=\"\r\n          (!singleSelect || (!singleSelect && selectedReviewer)) && !loading\r\n        \" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\" (workflowTypeChanged)=\"workflowTypeChanged($event)\"\r\n        [selectedWorkflow]=\"reviewerWorkflowType\" [showWorkflow]=\"selectedReviewer\" [groupSelected]=\"selectedGroups\"\r\n        [mode]=\"mode\" [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\">\r\n        <ng-container *ngIf=\"!groupEnabled\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\r\n            *ngFor=\"let element of selectedUsers?.slice(0, 1); let i = index\">\r\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n              (click)=\"selectItem({ target: { checked: false } }, element)\">&#xe9ae;</i>\r\n            <div *ngIf=\"\r\n                fromApprovalWorkflow &&\r\n                approvalWorkflowType.toLowerCase() === 'sequential'\r\n              \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\r\n              {{ 1 == selectedUsers?.length ? \"Final\" : 1 }}\r\n            </div>\r\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"element?.member_name\" placement=\"bottom-left\"\r\n              delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ element?.member_name }}</span>\r\n            <button *ngIf=\"selectedUsers?.length > 1\"\r\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\"\r\n              appPopover (click)=\"groupDisable.popover()\" placement=\"left\">\r\n              +{{ selectedUsers?.slice(1)?.length }}\r\n            </button>\r\n          </div>\r\n\r\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>\r\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\r\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div> -->\r\n        </ng-container>\r\n        <div class=\"user-group-chip\" *ngIf=\"selectedUsers?.length && groupEnabled\">\r\n          <i class=\"icons cross\" *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\" (click)=\"\r\n              selectItem({ target: { checked: false } }, selectedUsers[0])\r\n            \">&#xe9ae;</i>\r\n          <div class=\"user-group-name\">{{ selectedUsers[0]?.member_name }}</div>\r\n          <ng-container *ngIf=\"groupEnabled\">\r\n            <div class=\"counter\" *ngIf=\"selectedUsers?.length > 1\" appPopover (click)=\"userCount.popover()\"\r\n              placement=\"left\">\r\n              +{{ selectedUsers?.length - 1 }}\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"name userGroup-name\">\r\n          <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\r\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\">User {{ selectedGroups?.length > 0 ? \" & \" :\r\n            \" selected\" }}</span>\r\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\">Users {{ selectedGroups?.length > 0 ? \" & \" :\r\n            \"selected\" }}</span>\r\n        </div>\r\n\r\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\r\n          <i class=\"icons cross\" *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\" (click)=\"\r\n              selectGroup({ target: { checked: false } }, selectedGroups[0])\r\n            \">&#xe9ae;</i>\r\n          <div class=\"user-group-name\">{{ selectedGroups[0]?.group_name }}</div>\r\n          <div class=\"counter group\" *ngIf=\"selectedGroups?.length > 1\" appPopover (click)=\"groupCount.popover()\"\r\n            placement=\"left\">\r\n            +{{ selectedGroups?.length - 1 }}\r\n          </div>\r\n        </div>\r\n        <div class=\"name userGroup-name\">\r\n          <span *ngIf=\"selectedGroups?.length === 1\">{{\r\n            featureflag ? \"User Group selected\" : \"Group selected\"\r\n            }}</span>\r\n          <span *ngIf=\"selectedGroups?.length > 1\">{{\r\n            featureflag ? \"User Groups selected\" : \"Groups selected\"\r\n            }}</span>\r\n        </div>\r\n\r\n        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"let element of selectedUsers | slice : 1; let i = index\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"\r\n                        selectItem({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    {{ element?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n\r\n        <app-popover #groupDisable [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"let element of selectedUsers.slice(1); let i = index\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"\r\n                        selectItem({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    <span *ngIf=\"\r\n                        fromApprovalWorkflow &&\r\n                        approvalWorkflowType.toLowerCase() === 'sequential'\r\n                      \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">{{\r\n                      i + 1 === selectedUsers?.length - 1 ? \"Final\" : i + 2\r\n                      }}</span>\r\n                    {{ element?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n\r\n        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"\r\n                  let element of selectedGroups | slice : 1;\r\n                  let i = index\r\n                \">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\" (click)=\"\r\n                        selectGroup({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    {{ element?.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </vui-floating-bar>\r\n      <vui-floating-bar *ngIf=\"singleSelect && !loading\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\"\r\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\">\r\n        <div class=\"chip\" *ngIf=\"selectedUsers?.length\">\r\n          <ng-container>\r\n            <i class=\"icons\" (click)=\"\r\n                selectItem({ target: { checked: false } }, selectedUsers[0])\r\n              \">&#xe90d;</i>\r\n            <span class=\"value\"> {{ selectedUsers[0]?.member_name }}</span>\r\n          </ng-container>\r\n        </div>\r\n      </vui-floating-bar>\r\n    </div>\r\n  </div>\r\n\r\n</div>", 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"], outputs: ["closePopoverEvent"] }, { 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" }] }); }
 }
 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\">\r\n  <div class=\"user-group-list-head\">\r\n    <h3 class=\"user-group-list-title\">{{ panelTitle }}</h3>\r\n  </div>\r\n  <div class=\"user-group-list-body\">\r\n    <div class=\"user-group-list-body-inner\">\r\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\r\n      <div class=\"user-group-list-tab vx-d-flex vx-align-center vx-justify-between vx-mb-2\" *ngIf=\"groupEnabled\">\r\n        <div class=\"vx-d-flex vx-align-center\">\r\n          <button (click)=\"switchTab('USER')\"\r\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\"\r\n            [class.active]=\"currentTab === 'USER'\">\r\n            USERS\r\n            <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{\r\n              searchKey?.length && currentTab === \"USER\"\r\n              ? ((usersList | search : searchKey : 'member_name')?.length ?? 0)\r\n              : (usersList?.length ?? userListInfo?.total_items ?? 0)\r\n              }}</span>\r\n          </button>\r\n          <button *ngIf=\"isGroupTabShow\" (click)=\"switchTab('GROUP')\"\r\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\"\r\n            [class.active]=\"currentTab === 'GROUP'\">\r\n            {{ featureflag ? \"USER GROUPS\" : \"GROUPS\" }}\r\n            <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{\r\n              searchKey?.length && currentTab === \"GROUP\"\r\n              ? ((groupsList | search : searchKey : \"group_name\")?.length ?? 0)\r\n              : (groupsList?.length ?? groupListInfo?.total_items ?? 0)\r\n              }}</span>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"future-user vx-d-flex vx-align-center\" *ngIf=\"showFutureUsersSwitch\">\r\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">\r\n            Visible to All Current & Future Users\r\n          </div>\r\n          <i class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-1\" [appTooltip]=\"\r\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.'\r\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n          <app-cs-switch [ngValue]=\"futureUsersWillSelect\" (ngValueChange)=\"setAllUsersSelected($event)\">\r\n          </app-cs-switch>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"search-block vx-mb-2\">\r\n        <i class=\"icons\">&#xe90b;</i>\r\n        <input *ngIf=\"!featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{\r\n            currentTab === 'USER' ? 'Search User' : 'Search Group'\r\n          }}\" />\r\n        <input *ngIf=\"featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{\r\n            currentTab === 'USER' ? 'Search User' : 'Search User Group'\r\n          }}\" />\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'USER' && !loading\">\r\n        <ng-container *ngIf=\"usersList | search : searchKey : 'member_name' as users\">\r\n          <vui-pagination *ngIf=\"\r\n              userListInfo?.total_pages > 1 &&\r\n              usersList?.length !== userListInfo?.total_items\r\n            \" [currentPage]=\"userCurrentPage\" [totalPage]=\"userListInfo?.total_pages\"\r\n            (pageChanged)=\"userPageChange($event)\"></vui-pagination>\r\n          <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n            <ng-container *ngIf=\"users?.length > 0; else nouser\">\r\n              <div class=\"user-list-select vx-mb-2\">\r\n                <vui-checkbox *ngIf=\"!singleSelect\" #user [checked]=\"allUserSelected || futureUsersWillSelect\"\r\n                  [disabled]=\"\r\n                    allUserSelectedDisabled ||\r\n                    futureUsersWillSelect ||\r\n                    isAllDisabled\r\n                  \" (change)=\"selectAllUser($event)\">\r\n                  <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">\r\n                    {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\r\n                  </div>\r\n                </vui-checkbox>\r\n              </div>\r\n              <div class=\"user-list-item\">\r\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                  <ng-container *ngFor=\"let user of users\">\r\n                    <li class=\"vx-mb-3\" *ngIf=\"!singleSelect\" [appTooltip]=\"\r\n                        user\r\n                          | tooltipMessage\r\n                            : fromResponsibility\r\n                            : reviewerIds\r\n                            : overseerIds\r\n                            : assignorId\r\n                            : assigneeIds\r\n                            : 'member_id'\r\n                            : disabledIds?.includes(user?.member_id)\r\n                            : FromProgram\r\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                      <vui-checkbox (change)=\"selectItem($event, user)\" [disabled]=\"\r\n                          disabledIds?.includes(user?.member_id) ||\r\n                          futureUsersWillSelect ||\r\n                          isAllDisabled\r\n                        \" [checked]=\"\r\n                          selectedUserIds?.includes(user?.member_id) ||\r\n                          futureUsersWillSelect\r\n                        \">\r\n                        <div class=\"user-name\">\r\n                          {{ user?.member_name }}\r\n                        </div>\r\n                      </vui-checkbox>\r\n                    </li>\r\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\r\n                      <app-cs-radio [name]=\"'radio-selector'\" (checkedEvent)=\"selectItemRadio($event, user)\"\r\n                        [name]=\"'rx-category'\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"\r\n                        [appTooltip]=\"user?.member_email\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                        {{ user?.member_name }}\r\n                      </app-cs-radio>\r\n                    </li>\r\n                  </ng-container>\r\n                </ul>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #nouser>\r\n              <app-no-data *ngIf=\"!loading\" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\r\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\r\n                \"></app-no-data>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'GROUP'\">\r\n        <ng-container *ngIf=\"groupsList | search : searchKey : 'group_name' as groups\">\r\n          <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\r\n              <div class=\"user-list-select vx-mb-2\">\r\n                <vui-checkbox #group [checked]=\"allGroupSelected\" [disabled]=\"allGroupSelectedDisabled\"\r\n                  (change)=\"selectAllGroup($event)\">\r\n                  <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">\r\n                    {{ !group?.checked ? \"Select All\" : \"Deselect All\" }}\r\n                  </div>\r\n                </vui-checkbox>\r\n              </div>\r\n              <div class=\"user-list-item\">\r\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                  <li class=\"vx-mb-3\" *ngFor=\"let group of groups\">\r\n                    <vui-checkbox (change)=\"selectGroup($event, group)\" [disabled]=\"\r\n                        nonRemovableGroupIds?.includes(group?.group_id)\r\n                      \" [checked]=\"selectedGroupIds?.includes(group?.group_id)\">\r\n                      <div class=\"user-name vx-d-flex vx-align-center vx-w-100\" [appTooltip]=\"group?.group_name\"\r\n                        placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                        <div class=\"group-name\">{{ group?.group_name }}</div>\r\n                        <span class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\">{{\r\n                          group?.member_count ?? 0 }}\r\n                          {{ (group?.member_count ?? 0) > 1 ? \"USERS\" : \"USER\" }}</span>\r\n                      </div>\r\n                    </vui-checkbox>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #nogroup>\r\n              <app-no-data *ngIf=\"!loading\" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\r\n                  searchKey?.length > 0\r\n                    ? 'No match found.'\r\n                    : 'No data to display.'\r\n                \"></app-no-data>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"user-group-list-footer\">\r\n      <vui-floating-bar *ngIf=\"\r\n          (!singleSelect || (!singleSelect && selectedReviewer)) && !loading\r\n        \" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\" (workflowTypeChanged)=\"workflowTypeChanged($event)\"\r\n        [selectedWorkflow]=\"reviewerWorkflowType\" [showWorkflow]=\"selectedReviewer\" [groupSelected]=\"selectedGroups\"\r\n        [mode]=\"mode\" [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\">\r\n        <ng-container *ngIf=\"!groupEnabled\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\r\n            *ngFor=\"let element of selectedUsers?.slice(0, 1); let i = index\">\r\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n              (click)=\"selectItem({ target: { checked: false } }, element)\">&#xe9ae;</i>\r\n            <div *ngIf=\"\r\n                fromApprovalWorkflow &&\r\n                approvalWorkflowType.toLowerCase() === 'sequential'\r\n              \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\r\n              {{ 1 == selectedUsers?.length ? \"Final\" : 1 }}\r\n            </div>\r\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"element?.member_name\" placement=\"bottom-left\"\r\n              delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ element?.member_name }}</span>\r\n            <button *ngIf=\"selectedUsers?.length > 1\"\r\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\"\r\n              appPopover (click)=\"groupDisable.popover()\" placement=\"left\">\r\n              +{{ selectedUsers?.slice(1)?.length }}\r\n            </button>\r\n          </div>\r\n\r\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>\r\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\r\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div> -->\r\n        </ng-container>\r\n        <div class=\"user-group-chip\" *ngIf=\"selectedUsers?.length && groupEnabled\">\r\n          <i class=\"icons cross\" *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\" (click)=\"\r\n              selectItem({ target: { checked: false } }, selectedUsers[0])\r\n            \">&#xe9ae;</i>\r\n          <div class=\"user-group-name\">{{ selectedUsers[0]?.member_name }}</div>\r\n          <ng-container *ngIf=\"groupEnabled\">\r\n            <div class=\"counter\" *ngIf=\"selectedUsers?.length > 1\" appPopover (click)=\"userCount.popover()\"\r\n              placement=\"left\">\r\n              +{{ selectedUsers?.length - 1 }}\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"name userGroup-name\">\r\n          <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\r\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\">User {{ selectedGroups?.length > 0 ? \" & \" :\r\n            \" selected\" }}</span>\r\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\">Users {{ selectedGroups?.length > 0 ? \" & \" :\r\n            \"selected\" }}</span>\r\n        </div>\r\n\r\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\r\n          <i class=\"icons cross\" *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\" (click)=\"\r\n              selectGroup({ target: { checked: false } }, selectedGroups[0])\r\n            \">&#xe9ae;</i>\r\n          <div class=\"user-group-name\">{{ selectedGroups[0]?.group_name }}</div>\r\n          <div class=\"counter group\" *ngIf=\"selectedGroups?.length > 1\" appPopover (click)=\"groupCount.popover()\"\r\n            placement=\"left\">\r\n            +{{ selectedGroups?.length - 1 }}\r\n          </div>\r\n        </div>\r\n        <div class=\"name userGroup-name\">\r\n          <span *ngIf=\"selectedGroups?.length === 1\">{{\r\n            featureflag ? \"User Group selected\" : \"Group selected\"\r\n            }}</span>\r\n          <span *ngIf=\"selectedGroups?.length > 1\">{{\r\n            featureflag ? \"User Groups selected\" : \"Groups selected\"\r\n            }}</span>\r\n        </div>\r\n\r\n        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"let element of selectedUsers | slice : 1; let i = index\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"\r\n                        selectItem({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    {{ element?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n\r\n        <app-popover #groupDisable [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"let element of selectedUsers.slice(1); let i = index\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"\r\n                        selectItem({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    <span *ngIf=\"\r\n                        fromApprovalWorkflow &&\r\n                        approvalWorkflowType.toLowerCase() === 'sequential'\r\n                      \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">{{\r\n                      i + 1 === selectedUsers?.length - 1 ? \"Final\" : i + 2\r\n                      }}</span>\r\n                    {{ element?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n\r\n        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"\r\n                  let element of selectedGroups | slice : 1;\r\n                  let i = index\r\n                \">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\" (click)=\"\r\n                        selectGroup({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    {{ element?.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </vui-floating-bar>\r\n      <vui-floating-bar *ngIf=\"singleSelect && !loading\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\"\r\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\">\r\n        <div class=\"chip\" *ngIf=\"selectedUsers?.length\">\r\n          <ng-container>\r\n            <i class=\"icons\" (click)=\"\r\n                selectItem({ target: { checked: false } }, selectedUsers[0])\r\n              \">&#xe90d;</i>\r\n            <span class=\"value\"> {{ selectedUsers[0]?.member_name }}</span>\r\n          </ng-container>\r\n        </div>\r\n      </vui-floating-bar>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"user-group-list-confirmation\" *ngIf=\"showConfirmation\">\r\n    <div class=\"confirmation-top\">\r\n      <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n      <div class=\"text\">\r\n        This action will reset the default {{ userType }} selected for the\r\n        Program.\r\n      </div>\r\n    </div>\r\n    <div class=\"confirmation-bottom\">\r\n      <div class=\"message\">Are you sure you would like to proceed?</div>\r\n      <div class=\"button-group\">\r\n        <button class=\"no-btn\" (click)=\"confirmAction('NO')\">NO</button>\r\n        <button class=\"yes-btn\" (click)=\"confirmAction('YES')\">YES</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", 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\">\r\n  <div class=\"user-group-list-head\">\r\n    <h3 class=\"user-group-list-title\">{{ panelTitle }}</h3>\r\n  </div>\r\n  <div class=\"user-group-list-body\">\r\n    <div class=\"user-group-list-body-inner\">\r\n      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\r\n      <div class=\"user-group-list-tab vx-d-flex vx-align-center vx-justify-between vx-mb-2\" *ngIf=\"groupEnabled\">\r\n        <div class=\"vx-d-flex vx-align-center\">\r\n          <button (click)=\"switchTab('USER')\"\r\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\"\r\n            [class.active]=\"currentTab === 'USER'\">\r\n            USERS\r\n            <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{\r\n              searchKey?.length && currentTab === \"USER\"\r\n              ? ((usersList | search : searchKey : 'member_name')?.length ?? 0)\r\n              : (usersList?.length ?? userListInfo?.total_items ?? 0)\r\n              }}</span>\r\n          </button>\r\n          <button *ngIf=\"isGroupTabShow\" (click)=\"switchTab('GROUP')\"\r\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\"\r\n            [class.active]=\"currentTab === 'GROUP'\">\r\n            {{ featureflag ? \"USER GROUPS\" : \"GROUPS\" }}\r\n            <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{\r\n              searchKey?.length && currentTab === \"GROUP\"\r\n              ? ((groupsList | search : searchKey : \"group_name\")?.length ?? 0)\r\n              : (groupsList?.length ?? groupListInfo?.total_items ?? 0)\r\n              }}</span>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"future-user vx-d-flex vx-align-center\" *ngIf=\"showFutureUsersSwitch\">\r\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">\r\n            Visible to All Current & Future Users\r\n          </div>\r\n          <i class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-1\" [appTooltip]=\"\r\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.'\r\n            \" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n          <app-cs-switch [ngValue]=\"futureUsersWillSelect\" (ngValueChange)=\"setAllUsersSelected($event)\">\r\n          </app-cs-switch>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"search-block vx-mb-2\">\r\n        <i class=\"icons\">&#xe90b;</i>\r\n        <input *ngIf=\"!featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{\r\n            currentTab === 'USER' ? 'Search User' : 'Search Group'\r\n          }}\" />\r\n        <input *ngIf=\"featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{\r\n            currentTab === 'USER' ? 'Search User' : 'Search User Group'\r\n          }}\" />\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'USER' && !loading\">\r\n        <ng-container *ngIf=\"usersList | search : searchKey : 'member_name' as users\">\r\n          <vui-pagination *ngIf=\"\r\n              userListInfo?.total_pages > 1 &&\r\n              usersList?.length !== userListInfo?.total_items\r\n            \" [currentPage]=\"userCurrentPage\" [totalPage]=\"userListInfo?.total_pages\"\r\n            (pageChanged)=\"userPageChange($event)\"></vui-pagination>\r\n          <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n            <ng-container *ngIf=\"users?.length > 0; else nouser\">\r\n              <div class=\"user-list-select vx-mb-2\">\r\n                <vui-checkbox *ngIf=\"!singleSelect\" #user [checked]=\"allUserSelected || futureUsersWillSelect\"\r\n                  [disabled]=\"\r\n                    allUserSelectedDisabled ||\r\n                    futureUsersWillSelect ||\r\n                    isAllDisabled\r\n                  \" (change)=\"selectAllUser($event)\">\r\n                  <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">\r\n                    {{ !user?.checked ? \"Select All\" : \"Deselect All\" }}\r\n                  </div>\r\n                </vui-checkbox>\r\n              </div>\r\n              <div class=\"user-list-item\">\r\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                  <ng-container *ngFor=\"let user of users\">\r\n                    <li class=\"vx-mb-3\" *ngIf=\"!singleSelect\" [appTooltip]=\"\r\n                        user\r\n                          | tooltipMessage\r\n                            : fromResponsibility\r\n                            : reviewerIds\r\n                            : overseerIds\r\n                            : assignorId\r\n                            : assigneeIds\r\n                            : 'member_id'\r\n                            : disabledIds?.includes(user?.member_id)\r\n                            : FromProgram\r\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                      <vui-checkbox (change)=\"selectItem($event, user)\" [disabled]=\"\r\n                          disabledIds?.includes(user?.member_id) ||\r\n                          futureUsersWillSelect ||\r\n                          isAllDisabled\r\n                        \" [checked]=\"\r\n                          selectedUserIds?.includes(user?.member_id) ||\r\n                          futureUsersWillSelect\r\n                        \">\r\n                        <div class=\"user-name\">\r\n                          {{ user?.member_name }}\r\n                        </div>\r\n                      </vui-checkbox>\r\n                    </li>\r\n                    <li class=\"vx-mb-3\" *ngIf=\"singleSelect\">\r\n                      <app-cs-radio [name]=\"'radio-selector'\" (checkedEvent)=\"selectItemRadio($event, user)\"\r\n                        [name]=\"'rx-category'\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"\r\n                        [appTooltip]=\"user?.member_email\" placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                        {{ user?.member_name }}\r\n                      </app-cs-radio>\r\n                    </li>\r\n                  </ng-container>\r\n                </ul>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #nouser>\r\n              <app-no-data *ngIf=\"!loading\" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\r\n                  searchKey?.length > 0 ? 'No match found.' : 'No Users found.'\r\n                \"></app-no-data>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"currentTab === 'GROUP'\">\r\n        <ng-container *ngIf=\"groupsList | search : searchKey : 'group_name' as groups\">\r\n          <div class=\"user-group-list-mid\" [class.with-pagination]=\"isPagination\">\r\n            <ng-container *ngIf=\"groups?.length > 0; else nogroup\">\r\n              <div class=\"user-list-select vx-mb-2\">\r\n                <vui-checkbox #group [checked]=\"allGroupSelected\" [disabled]=\"allGroupSelectedDisabled\"\r\n                  (change)=\"selectAllGroup($event)\">\r\n                  <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">\r\n                    {{ !group?.checked ? \"Select All\" : \"Deselect All\" }}\r\n                  </div>\r\n                </vui-checkbox>\r\n              </div>\r\n              <div class=\"user-list-item\">\r\n                <ul class=\"vx-m-0 vx-p-0 vx-d-flex\">\r\n                  <li class=\"vx-mb-3\" *ngFor=\"let group of groups\">\r\n                    <vui-checkbox (change)=\"selectGroup($event, group)\" [disabled]=\"\r\n                        nonRemovableGroupIds?.includes(group?.group_id)\r\n                      \" [checked]=\"selectedGroupIds?.includes(group?.group_id)\">\r\n                      <div class=\"user-name vx-d-flex vx-align-center vx-w-100\" [appTooltip]=\"group?.group_name\"\r\n                        placement=\"bottom-left\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                        <div class=\"group-name\">{{ group?.group_name }}</div>\r\n                        <span class=\"counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase\">{{\r\n                          group?.member_count ?? 0 }}\r\n                          {{ (group?.member_count ?? 0) > 1 ? \"USERS\" : \"USER\" }}</span>\r\n                      </div>\r\n                    </vui-checkbox>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #nogroup>\r\n              <app-no-data *ngIf=\"!loading\" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"\r\n                  searchKey?.length > 0\r\n                    ? 'No match found.'\r\n                    : 'No data to display.'\r\n                \"></app-no-data>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"user-group-list-footer\">\r\n      <vui-floating-bar *ngIf=\"\r\n          (!singleSelect || (!singleSelect && selectedReviewer)) && !loading\r\n        \" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\" (workflowTypeChanged)=\"workflowTypeChanged($event)\"\r\n        [selectedWorkflow]=\"reviewerWorkflowType\" [showWorkflow]=\"selectedReviewer\" [groupSelected]=\"selectedGroups\"\r\n        [mode]=\"mode\" [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\">\r\n        <ng-container *ngIf=\"!groupEnabled\">\r\n          <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\r\n            *ngFor=\"let element of selectedUsers?.slice(0, 1); let i = index\">\r\n            <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n              *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n              (click)=\"selectItem({ target: { checked: false } }, element)\">&#xe9ae;</i>\r\n            <div *ngIf=\"\r\n                fromApprovalWorkflow &&\r\n                approvalWorkflowType.toLowerCase() === 'sequential'\r\n              \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">\r\n              {{ 1 == selectedUsers?.length ? \"Final\" : 1 }}\r\n            </div>\r\n            <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"element?.member_name\" placement=\"bottom-left\"\r\n              delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ element?.member_name }}</span>\r\n            <button *ngIf=\"selectedUsers?.length > 1\"\r\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\"\r\n              appPopover (click)=\"groupDisable.popover()\" placement=\"left\">\r\n              +{{ selectedUsers?.slice(1)?.length }}\r\n            </button>\r\n          </div>\r\n\r\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>\r\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length>1\" appPopover (click)=\"groupDisable.popover()\"\r\n              placement=\"left\">+{{selectedUsers?.slice(1)?.length}}</div> -->\r\n        </ng-container>\r\n        <div class=\"user-group-chip\" *ngIf=\"selectedUsers?.length && groupEnabled\">\r\n          <i class=\"icons cross\" *ngIf=\"!nonRemovableUserIds?.includes(selectedUsers[0]?.member_id)\" (click)=\"\r\n              selectItem({ target: { checked: false } }, selectedUsers[0])\r\n            \">&#xe9ae;</i>\r\n          <div class=\"user-group-name\">{{ selectedUsers[0]?.member_name }}</div>\r\n          <ng-container *ngIf=\"groupEnabled\">\r\n            <div class=\"counter\" *ngIf=\"selectedUsers?.length > 1\" appPopover (click)=\"userCount.popover()\"\r\n              placement=\"left\">\r\n              +{{ selectedUsers?.length - 1 }}\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"name userGroup-name\">\r\n          <!-- {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}} -->\r\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length === 1\">User {{ selectedGroups?.length > 0 ? \" & \" :\r\n            \" selected\" }}</span>\r\n          <span class=\"userGroup-text\" *ngIf=\"selectedUsers?.length > 1\">Users {{ selectedGroups?.length > 0 ? \" & \" :\r\n            \"selected\" }}</span>\r\n        </div>\r\n\r\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\r\n          <i class=\"icons cross\" *ngIf=\"!nonRemovableGroupIds?.includes(selectedGroups[0]?.group_id)\" (click)=\"\r\n              selectGroup({ target: { checked: false } }, selectedGroups[0])\r\n            \">&#xe9ae;</i>\r\n          <div class=\"user-group-name\">{{ selectedGroups[0]?.group_name }}</div>\r\n          <div class=\"counter group\" *ngIf=\"selectedGroups?.length > 1\" appPopover (click)=\"groupCount.popover()\"\r\n            placement=\"left\">\r\n            +{{ selectedGroups?.length - 1 }}\r\n          </div>\r\n        </div>\r\n        <div class=\"name userGroup-name\">\r\n          <span *ngIf=\"selectedGroups?.length === 1\">{{\r\n            featureflag ? \"User Group selected\" : \"Group selected\"\r\n            }}</span>\r\n          <span *ngIf=\"selectedGroups?.length > 1\">{{\r\n            featureflag ? \"User Groups selected\" : \"Groups selected\"\r\n            }}</span>\r\n        </div>\r\n\r\n        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"let element of selectedUsers | slice : 1; let i = index\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"\r\n                        selectItem({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    {{ element?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n\r\n        <app-popover #groupDisable [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"let element of selectedUsers.slice(1); let i = index\">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\" (click)=\"\r\n                        selectItem({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    <span *ngIf=\"\r\n                        fromApprovalWorkflow &&\r\n                        approvalWorkflowType.toLowerCase() === 'sequential'\r\n                      \" class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\">{{\r\n                      i + 1 === selectedUsers?.length - 1 ? \"Final\" : i + 2\r\n                      }}</span>\r\n                    {{ element?.member_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n\r\n        <app-popover #groupCount [dontCloseonClick]=\"true\">\r\n          <div class=\"wf-action-list\">\r\n            <ul class=\"action-item\">\r\n              <li *ngFor=\"\r\n                  let element of selectedGroups | slice : 1;\r\n                  let i = index\r\n                \">\r\n                <div class=\"avatar-card\">\r\n                  <span class=\"value\">\r\n                    <i class=\"icons\" *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\" (click)=\"\r\n                        selectGroup({ target: { checked: false } }, element)\r\n                      \">&#xe90d;</i>\r\n                    {{ element?.group_name }}\r\n                  </span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </app-popover>\r\n      </vui-floating-bar>\r\n      <vui-floating-bar *ngIf=\"singleSelect && !loading\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\"\r\n        [nextDisabled]=\"fromApprovalWorkflow && selectedUsers?.length === 0\">\r\n        <div class=\"chip\" *ngIf=\"selectedUsers?.length\">\r\n          <ng-container>\r\n            <i class=\"icons\" (click)=\"\r\n                selectItem({ target: { checked: false } }, selectedUsers[0])\r\n              \">&#xe90d;</i>\r\n            <span class=\"value\"> {{ selectedUsers[0]?.member_name }}</span>\r\n          </ng-container>\r\n        </div>\r\n      </vui-floating-bar>\r\n    </div>\r\n  </div>\r\n\r\n</div>", 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: [{
@@ -34050,12 +34023,12 @@ class WorkflowComplianceComponent {
             cost_of_compliance: '',
             created_by: entrustForm.assignors.list?.length < 1 ? 0 : this.memberId,
             creation_window: 0,
-            custom_tags: entrustForm.customFields.map((ele) => {
+            custom_tags: entrustForm?.customFields?.length > 0 ? entrustForm?.customFields?.map((ele) => {
                 return {
                     id: ele.id,
                     value: ele.value,
                 };
-            }),
+            }) : [],
             entity_tree: moreOptions?.RC
                 ? this.isResponsibilityRcLinkEnabled &&
                     this.responsibilityCenterType == 1
@@ -34074,17 +34047,17 @@ class WorkflowComplianceComponent {
             grc_relationship: '',
             if_testplan_failed: 0,
             impact: '',
-            isGroupAssignTo: entrustForm.assignees.whoCanComplete == 'ANY_ONE' ? 1 : 0,
-            is_key_compliance: entrustForm.responsibility.keyResponsibility ? 1 : 0,
+            isGroupAssignTo: entrustForm?.assignees?.whoCanComplete == 'ANY_ONE' ? 1 : 0,
+            is_key_compliance: entrustForm.responsibility?.keyResponsibility ? 1 : 0,
             allowEditDueDate: entrustForm?.allowEditDueDate ? true : false,
             library_report_id: 0,
             lifecycle_details: entrustForm.lifecycleDetails ?? '0000-00-00~~0',
             link_for_details: moreOptions?.FORMATE_EVIDENCE
-                ? entrustForm.formatAndEvidence.formatLinks
+                ? entrustForm.formatAndEvidence?.formatLinks
                 : [],
             linkages: { compliance: [] },
-            member_id: this.returnIds(entrustForm.assignors.list, 'uid')?.length > 0
-                ? this.returnIds(entrustForm.assignors.list, 'uid')[0]
+            member_id: this.returnIds(entrustForm.assignors?.list, 'uid')?.length > 0
+                ? this.returnIds(entrustForm.assignors?.list, 'uid')[0]
                 : this.memberId,
             objective: moreOptions?.OBJECTIVE ? objective : '',
             on_completion_of: entrustForm.reportId ? [entrustForm.reportId] : [],
@@ -34100,38 +34073,38 @@ class WorkflowComplianceComponent {
                 ? entrustForm.formatAndEvidence.formatFiles
                 : [],
             isFormatUpload: moreOptions?.FORMATE_EVIDENCE &&
-                entrustForm.formatAndEvidence.formatRequired
+                entrustForm.formatAndEvidence?.formatRequired
                 ? 1
                 : 0,
             report_format_link: '',
-            report_name: entrustForm.responsibility.name,
-            report_upload_flag: entrustForm.formatAndEvidence.evidenceRequired
+            report_name: entrustForm.responsibility?.name,
+            report_upload_flag: entrustForm.formatAndEvidence?.evidenceRequired
                 ? 1
                 : 0,
             review_after_days: moreOptions?.REVIEWER
-                ? entrustForm.reviewers.reviewFrequency.reviewCompleteDays === ''
+                ? entrustForm.reviewers.reviewFrequency?.reviewCompleteDays === ''
                     ? 0
-                    : Number(entrustForm.reviewers.reviewFrequency.reviewCompleteDays)
+                    : Number(entrustForm.reviewers.reviewFrequency?.reviewCompleteDays)
                 : 0,
             review_failed_after_days: moreOptions?.REVIEWER
-                ? entrustForm.reviewers.reviewFrequency.reviewNOtCompletedDays === ''
+                ? entrustForm.reviewers.reviewFrequency?.reviewNOtCompletedDays === ''
                     ? 0
-                    : Number(entrustForm.reviewers.reviewFrequency.reviewNOtCompletedDays)
+                    : Number(entrustForm.reviewers.reviewFrequency?.reviewNOtCompletedDays)
                 : 0,
             reviewer_arr: moreOptions?.REVIEWER
                 ? {
                     level1: {
-                        reviewers: this.setReviewerPayload(this.reviewerUserList, 'list', entrustForm.reviewers.acceptedData, entrustForm.reviewers.sequentialWorkflow
+                        reviewers: this.setReviewerPayload(this.reviewerUserList, 'list', entrustForm.reviewers.acceptedData, entrustForm.reviewers?.sequentialWorkflow
                             ? 'SEQUENTIAL'
                             : 'ANYONE'),
-                        type: entrustForm.reviewers.sequentialWorkflow
+                        type: entrustForm.reviewers?.sequentialWorkflow
                             ? 'SEQUENTIAL'
                             : 'ANYONE',
                     },
                 }
                 : {},
             userGroupIds: {
-                assigneeAllGroupIds: entrustForm.assignees.whoCanComplete !== 'ANY_ONE'
+                assigneeAllGroupIds: entrustForm.assignees?.whoCanComplete !== 'ANY_ONE'
                     ? this.returnIds(entrustForm?.assigneeGroups?.list, 'ugid')
                     : [],
                 assigneeAnyoneGroupIds: entrustForm.assignees.whoCanComplete === 'ANY_ONE'