npm - vcomply-workflow-engine - Versions diffs - 2.6.194 → 2.6.196 - Mend

vcomply-workflow-engine 2.6.194 → 2.6.196

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (605) hide show

package/bundles/vcomply-workflow-engine.umd.js CHANGED Viewed

@@ -7926,6 +7926,7 @@
             var _this = this;
             if (mode) {
                 var list = __spreadArray([], __read(this.usersList));
+                list = list.filter(function (user) { return !_this.disabledIds.includes(user[_this.userIdKey]); });
                 this.selectedIds = [];
                 list.forEach(function (element) {
                     _this.selectedIds.push(element[_this.userIdKey]);
@@ -11860,6 +11861,7 @@
             this.isLifecycleModified = false;
             this.selectedResponsibility = 0;
             this.placeholder = 'Loading...';
+            this.selectedResponsibilityDetails = {};
             this.startDate = Math.floor(Date.now() / 1000);
             this.lifecycleDetails = '0000-00-00~~0';
             this.frequencyDetails = new i0.EventEmitter();
@@ -11875,7 +11877,7 @@
             this.frequencyInfo = Object.assign(this.frequencyService.frequencyInfo);
             console.log("this.frequencyData ==>", this.frequencyData);
             this.getOnCompletionFrequency();
-            this.isSelectedData = ((_a = Object.keys(this.selectedResponsibilityDetails)) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            this.isSelectedData = this.selectedResponsibilityDetails ? ((_a = Object.keys(this.selectedResponsibilityDetails)) === null || _a === void 0 ? void 0 : _a.length) > 0 : false;
         };
         FrequencyOnCompletionOfComponent.prototype.populateFrequency = function () {
             var _this = this;
@@ -11887,7 +11889,7 @@
             this.onCompletionOfTime = this.frequencyData.failedTime;
             this.selectedResponsibilityDetails = this.onCompletionOfResponsibility.find(function (res) { return res.ReportId === _this.frequencyData.selectedReport; });
             this.getOnCompletionFrequency();
-            this.isSelectedData = ((_a = Object.keys(this.selectedResponsibilityDetails)) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            this.isSelectedData = this.selectedResponsibilityDetails ? ((_a = Object.keys(this.selectedResponsibilityDetails)) === null || _a === void 0 ? void 0 : _a.length) > 0 : false;
         };
         FrequencyOnCompletionOfComponent.prototype.onTimeChanged = function (event) {
             console.log(event);
@@ -11907,7 +11909,7 @@
             var _a, _b;
             if (this.featureFlag_on_completion_of) {
                 this.selectedResponsibilityDetails = event;
-                this.isSelectedData = ((_a = Object.keys(this.selectedResponsibilityDetails)) === null || _a === void 0 ? void 0 : _a.length) > 0;
+                this.isSelectedData = this.selectedResponsibilityDetails ? ((_a = Object.keys(this.selectedResponsibilityDetails)) === null || _a === void 0 ? void 0 : _a.length) > 0 : false;
             }
             console.log("event ==>", event, this.selectedResponsibilityDetails);
             if (typeof (this.selectedResponsibilityDetails) === 'object') {
@@ -11975,7 +11977,7 @@
         FrequencyOnCompletionOfComponent.prototype.remove = function () {
             var _a;
             this.selectedResponsibilityDetails = {};
-            this.isSelectedData = ((_a = Object.keys(this.selectedResponsibilityDetails)) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            this.isSelectedData = this.selectedResponsibilityDetails ? ((_a = Object.keys(this.selectedResponsibilityDetails)) === null || _a === void 0 ? void 0 : _a.length) > 0 : false;
         };
         return FrequencyOnCompletionOfComponent;
     }());
@@ -15961,8 +15963,11 @@
         };
         GroupUsersListComponent.prototype.selectAll = function (mode) {
             var _this = this;
+            console.log("68", mode, this.usersList);
             if (mode) {
                 var list = __spreadArray([], __read(this.usersList));
+                list = list.filter(function (user) { return !_this.disabledId.includes(user[_this.userIdKey]); });
+                console.log("733", list, this.disabledId);
                 this.selectedIds = [];
                 list.forEach(function (element) {
                     _this.selectedIds.push(element[_this.userIdKey]);
@@ -16089,7 +16094,7 @@
     GroupUsersListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-group-users-list',
-                    template: "<div class=\"add-risk-group-user-list\" [class.animate]=\"animation\">\r\n    <div class=\"add-risk-group-user-list-head\">\r\n        <h3 class=\"add-risk-group-user-list-title\">Select User(s)</h3>\r\n        <!-- <button class=\"add-risk-group-user-list-close\" (click)=\"close()\">\r\n            <i class=\"icons\">&#xe90d;</i>\r\n        </button> -->\r\n    </div>\r\n    <div class=\"add-risk-group-user-list-body\">\r\n        <div class=\"search-block vx-mb-2\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} \" />\r\n        </div>\r\n        <div class=\"add-risk-group-user-list-tab vx-d-flex vx-align-center vx-mt-1 vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n            <button  (click)=\"switchTab('USER')\" 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\" [class.active]=\"currentTab === 'USER'\">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\">{{ usersList?.length}}</span></button>\r\n            <button (click)=\"switchTab('GROUP')\" 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\" [class.active]=\"currentTab === 'GROUP'\">USER 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\">{{assigneeGroupsList?.length}}</span></button>\r\n        </div>\r\n        <ng-container *ngIf=\"!groupsEnabled\">\r\n            <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n                <ng-container *ngIf=\"(groupsList | filter:search) as grouplist\">\r\n                    <div class=\"body-top\" *ngIf=\"( userlist?.length > 0 || userlist?.length > 0 && grouplist?.length > 0) && search?.trim()?.length === 0\">\r\n                        <app-cs-checkbox\r\n                            *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n                            [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                            <strong>\r\n                                {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n                            </strong>\r\n                        </app-cs-checkbox>\r\n                    </div>\r\n                    <div class=\"list-block\">\r\n    \r\n                        <ul class=\"group-user-list\" *ngIf=\"grouplist?.length  > 0\">\r\n                            <ng-container *ngFor=\"let group of grouplist\">\r\n                                <li *ngIf=\"!hideGroup(group.userIds)\">\r\n                                    <app-cs-checkbox [ngValue]=\"checkGroupList(group.userIds) && group.userIds?.length !== 0\"\r\n                                        (ngValueChange)=\"selectGroup(group.userIds,$event)\"\r\n                                        [disabled]=\"openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds) || group.userIds?.length === 0\"\r\n                                        (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds)))\">\r\n                                        <span class=\"name\">{{group.groupName}}<span\r\n                                                class=\"counter\">{{(group.userIds?.length>1)?\r\n                                                group.userIds?.length+' USERS':group.userIds?.length+' USER' }}</span></span>\r\n                                    </app-cs-checkbox>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                        <ul class=\"group-user-list\" *ngIf=\"userlist?.length  > 0\">\r\n                            <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId:[]:'my_member_id':(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\" placement=\"bottom-left\" delay=\"0\"\r\n                            [tooltipMandatory]=\"true\">\r\n                                <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n                                    (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n                                    [disabled]=\"(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\"\r\n                                    (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n                                    <span class=\"name\">{{user.employee_name}}</span>\r\n                                </app-cs-checkbox>\r\n                            </li>\r\n                        </ul>\r\n                        <app-no-data *ngIf=\"userlist?.length === 0 && grouplist?.length === 0\"\r\n                            [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                            [noDataText]=\"'No Users Found'\"></app-no-data>\r\n                    </div>\r\n                </ng-container>\r\n            </ng-container>\r\n    </ng-container>\r\n        \r\n        <ng-container *ngIf=\"currentTab === 'USER' && groupsEnabled\">\r\n            <ng-container  *ngIf=\"(usersList | filter:search) as userlist\">\r\n                <div class=\"body-top\" *ngIf=\"( userlist?.length > 0) && search?.trim()?.length === 0\">\r\n                    <app-cs-checkbox\r\n                        *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n                        [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                        <strong>\r\n                            {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n                        </strong>\r\n                    </app-cs-checkbox>\r\n                </div>\r\n                <!-- when pagination was show then with-pagination this class was true -->\r\n                <div class=\"list-block\" [class.with-pagination]=\"false\">\r\n                    <ul class=\"group-user-list\" *ngIf=\"userlist?.length  > 0\">\r\n                        <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId\" placement=\"bottom-left\" delay=\"0\"\r\n                        [tooltipMandatory]=\"true\" >\r\n                            <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n                                (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n                                [disabled]=\"((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey])))||(disabledId?.includes(user[userIdKey])))\"\r\n                                (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n                                <span class=\"name\">{{user.employee_name}}</span>\r\n                            </app-cs-checkbox>\r\n                        </li>\r\n                    </ul>\r\n                    <app-no-data *ngIf=\"userlist?.length === 0\"\r\n                        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                        [noDataText]=\"'No Users Found'\"></app-no-data>\r\n                </div>\r\n            </ng-container>      \r\n        </ng-container>\r\n        <ng-container  *ngIf=\"currentTab === 'GROUP' && groupsEnabled\" >\r\n            <ng-container *ngIf=\"(assigneeGroupsList | filter:search) as grouplist\">\r\n                <div class=\"body-top\" *ngIf=\"grouplist?.length > 0 && search?.trim()?.length === 0\">\r\n                    <app-cs-checkbox [ngValue]=\"checkselectAllgroups()\" (ngValueChange)=\"selectAllGroups($event)\">\r\n                        <strong>\r\n                            {{checkselectAllgroups() ? 'Deselect All' : 'Select All'}}\r\n                        </strong>\r\n                    </app-cs-checkbox>\r\n                </div>\r\n                <div class=\"list-block\" [class.with-pagination]=\"false\">\r\n                    <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n                        <ng-container>\r\n                            <li  *ngFor=\"let group of grouplist; let i = index\">\r\n                                <app-cs-checkbox [ngValue]=\"selectedGroupIds?.includes(group[groupIdKey])\"\r\n                                    (ngValueChange)=\"selectGroupElement(group,$event)\"\r\n                                    [disabled]=\"(openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group))\"\r\n                                    (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group)))\">\r\n                                    <span class=\"name vx-d-flex vx-align-center vx-w-100\" >\r\n                                        <span class=\"group-name\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                        [tooltipMandatory]=\"true\">{{group?.group_name}}</span>\r\n                                        <span class=\"counter\">{{group[\"member_count\"]}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span>\r\n                                    </span>\r\n                                </app-cs-checkbox>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                    <app-no-data *ngIf=\"grouplist?.length === 0\"\r\n                        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                        [noDataText]=\"'No Groups Found'\"></app-no-data>\r\n                </div>  \r\n            </ng-container>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <app-floating-bar [selectedData]=\"selectedUsers\" [selectedGroups]=\"selectedGroups\" [displayElementKey]=\"'employee_name'\" [elementId]=\"userIdKey\"\r\n        [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" (closeEvent)=\"save(selectedIds)\"\r\n        (closeList)=\"close()\" (deleteEvent)=\"deleteEvent($event)\" (deleteGroupEvent)=\"deleteGroupEvent($event)\" [groupsEnabled]=\"groupsEnabled\"\r\n        [isDisabled]=\"(groupsList?.length + usersList?.length) === 0 || selectedUsers?.length === 0 && selectedGroups?.length === 0\">\r\n    </app-floating-bar>\r\n</div>",
+                    template: "<div class=\"add-risk-group-user-list\" [class.animate]=\"animation\">\r\n    <div class=\"add-risk-group-user-list-head\">\r\n        <h3 class=\"add-risk-group-user-list-title\">Select User(s)</h3>\r\n        <!-- <button class=\"add-risk-group-user-list-close\" (click)=\"close()\">\r\n            <i class=\"icons\">&#xe90d;</i>\r\n        </button> -->\r\n    </div>\r\n    <div class=\"add-risk-group-user-list-body\">\r\n        <div class=\"search-block vx-mb-2\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} \" />\r\n        </div>\r\n        <div class=\"add-risk-group-user-list-tab vx-d-flex vx-align-center vx-mt-1 vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n            <button  (click)=\"switchTab('USER')\" 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\" [class.active]=\"currentTab === 'USER'\">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\">{{search?.length && currentTab === 'USER' ? (usersList | filter : search)?.length :usersList?.length}}</span></button>\r\n            <button (click)=\"switchTab('GROUP')\" 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\" [class.active]=\"currentTab === 'GROUP'\">USER 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\">{{search?.length && currentTab === 'GROUP' ? (assigneeGroupsList | filter : search)?.length :assigneeGroupsList?.length}}</span></button>\r\n        </div>\r\n        <ng-container *ngIf=\"!groupsEnabled\">\r\n            <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n                <ng-container *ngIf=\"(groupsList | filter:search) as grouplist\">\r\n                    <div class=\"body-top\" *ngIf=\"( userlist?.length > 0 || userlist?.length > 0 && grouplist?.length > 0) && search?.trim()?.length === 0\">\r\n                        <app-cs-checkbox\r\n                            *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n                            [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                            <strong>\r\n                                {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n                            </strong>\r\n                        </app-cs-checkbox>\r\n                    </div>\r\n                    <div class=\"list-block\">\r\n    \r\n                        <ul class=\"group-user-list\" *ngIf=\"grouplist?.length  > 0\">\r\n                            <ng-container *ngFor=\"let group of grouplist\">\r\n                                <li *ngIf=\"!hideGroup(group.userIds)\">\r\n                                    <app-cs-checkbox [ngValue]=\"checkGroupList(group.userIds) && group.userIds?.length !== 0\"\r\n                                        (ngValueChange)=\"selectGroup(group.userIds,$event)\"\r\n                                        [disabled]=\"openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds) || group.userIds?.length === 0\"\r\n                                        (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds)))\">\r\n                                        <span class=\"name\">{{group.groupName}}<span\r\n                                                class=\"counter\">{{(group.userIds?.length>1)?\r\n                                                group.userIds?.length+' USERS':group.userIds?.length+' USER' }}</span></span>\r\n                                    </app-cs-checkbox>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                        <ul class=\"group-user-list\" *ngIf=\"userlist?.length  > 0\">\r\n                            <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId:[]:'my_member_id':(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\" placement=\"bottom-left\" delay=\"0\"\r\n                            [tooltipMandatory]=\"true\">\r\n                                <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n                                    (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n                                    [disabled]=\"(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\"\r\n                                    (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n                                    <span class=\"name\">{{user.employee_name}}</span>\r\n                                </app-cs-checkbox>\r\n                            </li>\r\n                        </ul>\r\n                        <app-no-data *ngIf=\"userlist?.length === 0 && grouplist?.length === 0\"\r\n                            [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                            [noDataText]=\"'No Users Found'\"></app-no-data>\r\n                    </div>\r\n                </ng-container>\r\n            </ng-container>\r\n    </ng-container>\r\n        \r\n        <ng-container *ngIf=\"currentTab === 'USER' && groupsEnabled\">\r\n            <ng-container  *ngIf=\"(usersList | filter:search) as userlist\">\r\n                <div class=\"body-top\" *ngIf=\"( userlist?.length > 0) && search?.trim()?.length === 0\">\r\n                    <app-cs-checkbox\r\n                        *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n                        [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n                        <strong>\r\n                            {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n                        </strong>\r\n                    </app-cs-checkbox>\r\n                </div>\r\n                <!-- when pagination was show then with-pagination this class was true -->\r\n                <div class=\"list-block\" [class.with-pagination]=\"false\">\r\n                    <ul class=\"group-user-list\" *ngIf=\"userlist?.length  > 0\">\r\n                        <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId\" placement=\"bottom-left\" delay=\"0\"\r\n                        [tooltipMandatory]=\"true\" >\r\n                            <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n                                (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n                                [disabled]=\"((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey])))||(disabledId?.includes(user[userIdKey])))\"\r\n                                (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n                                <span class=\"name\">{{user.employee_name}}</span>\r\n                            </app-cs-checkbox>\r\n                        </li>\r\n                    </ul>\r\n                    <app-no-data *ngIf=\"userlist?.length === 0\"\r\n                        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                        [noDataText]=\"'No Users Found'\"></app-no-data>\r\n                </div>\r\n            </ng-container>      \r\n        </ng-container>\r\n        <ng-container  *ngIf=\"currentTab === 'GROUP' && groupsEnabled\" >\r\n            <ng-container *ngIf=\"(assigneeGroupsList | filter:search) as grouplist\">\r\n                <div class=\"body-top\" *ngIf=\"grouplist?.length > 0 && search?.trim()?.length === 0\">\r\n                    <app-cs-checkbox [ngValue]=\"checkselectAllgroups()\" (ngValueChange)=\"selectAllGroups($event)\">\r\n                        <strong>\r\n                            {{checkselectAllgroups() ? 'Deselect All' : 'Select All'}}\r\n                        </strong>\r\n                    </app-cs-checkbox>\r\n                </div>\r\n                <div class=\"list-block\" [class.with-pagination]=\"false\">\r\n                    <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n                        <ng-container>\r\n                            <li  *ngFor=\"let group of grouplist; let i = index\">\r\n                                <app-cs-checkbox [ngValue]=\"selectedGroupIds?.includes(group[groupIdKey])\"\r\n                                    (ngValueChange)=\"selectGroupElement(group,$event)\"\r\n                                    [disabled]=\"(openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group))\"\r\n                                    (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group)))\">\r\n                                    <span class=\"name vx-d-flex vx-align-center vx-w-100\" >\r\n                                        <span class=\"group-name\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                        [tooltipMandatory]=\"true\">{{group?.group_name}}</span>\r\n                                        <span class=\"counter\">{{group[\"member_count\"]}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span>\r\n                                    </span>\r\n                                </app-cs-checkbox>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                    <app-no-data *ngIf=\"grouplist?.length === 0\"\r\n                        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                        [noDataText]=\"'No Groups Found'\"></app-no-data>\r\n                </div>  \r\n            </ng-container>\r\n        </ng-container>\r\n\r\n    </div>\r\n    <app-floating-bar [selectedData]=\"selectedUsers\" [selectedGroups]=\"selectedGroups\" [displayElementKey]=\"'employee_name'\" [elementId]=\"userIdKey\"\r\n        [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" (closeEvent)=\"save(selectedIds)\"\r\n        (closeList)=\"close()\" (deleteEvent)=\"deleteEvent($event)\" (deleteGroupEvent)=\"deleteGroupEvent($event)\" [groupsEnabled]=\"groupsEnabled\"\r\n        [isDisabled]=\"(groupsList?.length + usersList?.length) === 0 || selectedUsers?.length === 0 && selectedGroups?.length === 0\">\r\n    </app-floating-bar>\r\n</div>",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .add-risk-group-user-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-group-user-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .add-risk-group-user-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-group-user-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-group-user-list-tab{border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-group-user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!important}::ng-deep .add-risk-group-user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .add-risk-group-user-list-tab button.active{pointer-events:none}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn span{background:#1e5dd3;color:#fff;font-weight:500}::ng-deep .add-risk-group-user-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .add-risk-group-user-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .add-risk-group-user-list-body .search-block{position:relative}::ng-deep .add-risk-group-user-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-group-user-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-group-user-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-group-user-list-body app-pagination .wk-pagination-sec-ds{padding-top:0!important}::ng-deep .add-risk-group-user-list-body .body-top{display:flex;justify-content:space-between}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value span.name span.counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body .list-block{height:calc(100vh - 244px);overflow:hidden;overflow-y:auto}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block.with-pagination{height:calc(100vh - 280px)}::ng-deep .add-risk-group-user-list-body .list-block.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-group-user-list-body .list-block app-no-data{height:calc(100vh - 240px)}::ng-deep .add-risk-group-user-list-body ul{padding:0;margin:0}::ng-deep .add-risk-group-user-list-body ul.group-user-list{display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li{width:50%;padding:16px 0 0;list-style:none}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label{width:100%}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:12px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name .group-name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name span.counter{background:#f1f1f1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-group-user-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
                 },] }
     ];
@@ -28671,6 +28676,7 @@
             this.searchPipe = new SearchPipe();
             this.userCurrentPage = 1;
             this.groupCurrentPage = 1;
+            this.nonDisabledUsers = [];
             this.defaultSelectedUsers = [];
             this.defaultSelectedUserIds = [];
             this.userType = 'assignees';
@@ -28804,9 +28810,12 @@
         UserGroupListComponent.prototype.selectAllUser = function (evt) {
             var _this = this;
             var _a;
+            if (this.fromResponsibility) {
+                this.nonDisabledUsers = this.disableUsers();
+            }
             if (((_a = evt === null || evt === void 0 ? void 0 : evt.target) === null || _a === void 0 ? void 0 : _a.checked) === true) {
-                this.selectedUsers = this.usersList;
-                this.selectedUserIds = this.usersList.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele.member_id; });
+                this.selectedUsers = this.fromResponsibility ? this.nonDisabledUsers : this.usersList;
+                this.selectedUserIds = this.fromResponsibility ? this.nonDisabledUsers.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele.member_id; }) : this.usersList.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele.member_id; });
             }
             else {
                 this.selectedUsers = this.usersList.filter(function (ele) { return _this.nonRemovableUserIds.includes(ele === null || ele === void 0 ? void 0 : ele.member_id); });
@@ -28929,12 +28938,25 @@
             this.reviewerWorkflowType = event;
             this.reviewerWorkflowTypeChange.emit(event);
         };
+        UserGroupListComponent.prototype.disableUsers = function () {
+            var _this = this;
+            switch (this.fromResponsibility) {
+                case "Reviewer":
+                    this.nonDisabledUsers = this.usersList.filter(function (user) { var _a, _b; return !(((_a = _this.overseerIds) === null || _a === void 0 ? void 0 : _a.includes(user === null || user === void 0 ? void 0 : user.member_id)) || ((_b = _this.assigneeIds) === null || _b === void 0 ? void 0 : _b.includes(user === null || user === void 0 ? void 0 : user.member_id))); });
+                    break;
+                case "Overseer":
+                    this.nonDisabledUsers = this.usersList.filter(function (user) { var _a, _b, _c; return !(((_a = _this.assignorId) === null || _a === void 0 ? void 0 : _a.includes(user === null || user === void 0 ? void 0 : user.member_id)) || ((_b = _this.reviewerIds) === null || _b === void 0 ? void 0 : _b.includes(user === null || user === void 0 ? void 0 : user.member_id)) || ((_c = _this.assigneeIds) === null || _c === void 0 ? void 0 : _c.includes(user === null || user === void 0 ? void 0 : user.member_id))); });
+                    break;
+                default:
+            }
+            return this.nonDisabledUsers;
+        };
         return UserGroupListComponent;
     }());
     UserGroupListComponent.decorators = [
         { type: i0.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      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\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=\"{{currentTab === 'USER' ? 'Search User' :'Search Group'}}\" />\r\n            <input *ngIf=\"featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{currentTab === 'USER' ? 'Search User' :'Search User Group'}}\" />\r\n        </div>\r\n\r\n        <div class=\"user-group-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupEnabled\">\r\n            <button (click)=\"switchTab('USER')\" 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\" [class.active]=\"currentTab === 'USER'\">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\">{{userListInfo?.total_items || usersList?.length}}</span></button>\r\n            <button (click)=\"switchTab('GROUP')\" 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\" [class.active]=\"currentTab === 'GROUP'\">{{featureflag ? 'USER GROUPS':'GROUPS'}} <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{groupListInfo?.total_items || groupsList?.length}}</span></button>\r\n        </div>\r\n\r\n\r\n\r\n        <ng-container *ngIf=\"currentTab === 'USER'\">\r\n           <ng-container *ngIf=\"(usersList|filter:searchKey) as users\">\r\n            <vui-pagination *ngIf=\"userListInfo?.total_pages  > 1 && usersList?.length !== userListInfo?.total_items\" [currentPage]=\"userCurrentPage\"  [totalPage]=\"userListInfo?.total_pages\" (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\" [disabled]=\"allUserSelectedDisabled\" (change)=\"selectAllUser($event)\">\r\n                            <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!user?.checked ? 'Select All' : 'Deselect All'}}</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-4\" *ngIf=\"!singleSelect\" [appTooltip]=\"user |tooltipMessage: fromResponsibility:reviewerIds:overseerIds:assignorId:assigneeIds:'member_id':disabledIds?.includes(user?.member_id)\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                                <vui-checkbox (change)=\"selectItem($event,user)\" [disabled]=\"disabledIds?.includes(user?.member_id)\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"><div class=\"user-name\" >{{user?.member_name}}</div></vui-checkbox>\r\n                              </li>\r\n                                <li class=\"vx-mb-4\" *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\"\r\n                                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  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No Users found.')\"></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\" (change)=\"selectAllGroup($event)\">\r\n                        <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!group?.checked ? 'Select All' : 'Deselect All'}}</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-4\" *ngFor=\"let group of groups\">\r\n                            <vui-checkbox (change)=\"selectGroup($event,group)\" [disabled]=\"nonRemovableGroupIds?.includes(group?.group_id)\" [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\" placement=\"bottom-left\" delay=\"0\"\r\n                                [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\">{{group?.member_count}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span></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  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n            </ng-template>\r\n        </div>\r\n        </ng-container>\r\n       </ng-container>\r\n\r\n    </div>\r\n\r\n    <div class=\"user-group-list-footer\">\r\n        <vui-floating-bar *ngIf=\"(!singleSelect || (!singleSelect && selectedReviewer))\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\" (workflowTypeChanged) = \"workflowTypeChanged($event)\" [selectedWorkflow]=\"reviewerWorkflowType\" [showWorkflow]=\"selectedReviewer\" [groupSelected]=\"selectedGroups\" [mode]=\"mode\">\r\n          <ng-container *ngIf=\"!groupEnabled\">\r\n            <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n              (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            <ng-container *ngIf=\"groupEnabled\">\r\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length\" appPopover (click)=\"userCount.popover()\"\r\n              placement=\"left\">{{selectedUsers?.length}}</div>\r\n            </ng-container>\r\n          <div class=\"name\">\r\n            <span *ngIf=\"selectedUsers?.length === 1\">User {{selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n            <span *ngIf=\"selectedUsers?.length > 1\">Users {{selectedGroups?.length > 0 ?' & ':'are selected'}}</span>\r\n          </div>\r\n\r\n          <div class=\"counter group\" *ngIf=\"selectedGroups?.length\"   appPopover (click)=\"groupCount.popover()\"\r\n          placement=\"left\">{{selectedGroups?.length}}</div>\r\n        <div class=\"name\" >\r\n          <span *ngIf=\"selectedGroups?.length === 1\">{{featureflag ?'User Group selected':'Group selected'}}</span>\r\n          <span *ngIf=\"selectedGroups?.length > 1\">{{featureflag ?'User Groups selected':'Groups selected'}}</span>\r\n        </div>\r\n\r\n        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let element of selectedUsers 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)\"\r\n                        (click)=\"selectItem({target:{checked:false}},element)\">&#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=\"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)\"\r\n                          (click)=\"selectItem({target:{checked:false}},element)\">&#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 #groupCount [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let element of selectedGroups; let i =index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\r\n                        (click)=\"selectGroup({target:{checked:false}},element)\">&#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\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\">\r\n            <div class=\"chip\" *ngIf=\"selectedUsers?.length\" >\r\n                <ng-container>\r\n                  <i class=\"icons\" (click)=\"selectItem({target:{checked:false}},selectedUsers[0])\">&#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\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\">This action will reset the default {{userType}} selected for the Program.</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\r\n</div>\r\n",
+                    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      <app-loader-inline *ngIf=\"loading\"></app-loader-inline>\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=\"{{currentTab === 'USER' ? 'Search User' :'Search Group'}}\" />\r\n            <input *ngIf=\"featureflag\" [(ngModel)]=\"searchKey\" type=\"text\" placeholder=\"{{currentTab === 'USER' ? 'Search User' :'Search User Group'}}\" />\r\n        </div>\r\n\r\n        <div class=\"user-group-list-tab vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"groupEnabled\">\r\n            <button (click)=\"switchTab('USER')\" 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\" [class.active]=\"currentTab === 'USER'\">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\">{{searchKey?.length && currentTab === 'USER' ? (usersList| filter : searchKey)?.length : usersList?.length || userListInfo?.total_items}}</span></button>\r\n            <button (click)=\"switchTab('GROUP')\" 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\" [class.active]=\"currentTab === 'GROUP'\">{{featureflag ? 'USER GROUPS':'GROUPS'}} <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{searchKey?.length && currentTab === 'GROUP' ? (groupsList|search:searchKey:'group_name')?.length :groupsList?.length || groupListInfo?.total_items}}</span></button>\r\n        </div>\r\n\r\n\r\n\r\n        <ng-container *ngIf=\"currentTab === 'USER'\">\r\n           <ng-container *ngIf=\"(usersList|filter:searchKey) as users\">\r\n            <vui-pagination *ngIf=\"userListInfo?.total_pages  > 1 && usersList?.length !== userListInfo?.total_items\" [currentPage]=\"userCurrentPage\"  [totalPage]=\"userListInfo?.total_pages\" (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\" [disabled]=\"allUserSelectedDisabled\" (change)=\"selectAllUser($event)\">\r\n                            <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!user?.checked ? 'Select All' : 'Deselect All'}}</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-4\" *ngIf=\"!singleSelect\" [appTooltip]=\"user |tooltipMessage: fromResponsibility:reviewerIds:overseerIds:assignorId:assigneeIds:'member_id':disabledIds?.includes(user?.member_id)\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                                <vui-checkbox (change)=\"selectItem($event,user)\" [disabled]=\"disabledIds?.includes(user?.member_id)\" [checked]=\"selectedUserIds?.includes(user?.member_id)\"><div class=\"user-name\" >{{user?.member_name}}</div></vui-checkbox>\r\n                              </li>\r\n                                <li class=\"vx-mb-4\" *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\"\r\n                                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  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No Users found.')\"></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\" (change)=\"selectAllGroup($event)\">\r\n                        <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none\">{{!group?.checked ? 'Select All' : 'Deselect All'}}</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-4\" *ngFor=\"let group of groups\">\r\n                            <vui-checkbox (change)=\"selectGroup($event,group)\" [disabled]=\"nonRemovableGroupIds?.includes(group?.group_id)\" [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\" placement=\"bottom-left\" delay=\"0\"\r\n                                [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\">{{group?.member_count}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span></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  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(searchKey?.length > 0 ?'No match found.':'No data to display.')\"></app-no-data>\r\n            </ng-template>\r\n        </div>\r\n        </ng-container>\r\n       </ng-container>\r\n\r\n    </div>\r\n\r\n    <div class=\"user-group-list-footer\">\r\n        <vui-floating-bar *ngIf=\"(!singleSelect || (!singleSelect && selectedReviewer))\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\" (workflowTypeChanged) = \"workflowTypeChanged($event)\" [selectedWorkflow]=\"reviewerWorkflowType\" [showWorkflow]=\"selectedReviewer\" [groupSelected]=\"selectedGroups\" [mode]=\"mode\">\r\n          <ng-container *ngIf=\"!groupEnabled\">\r\n            <div class=\"chip\" *ngFor=\"let element of selectedUsers?.slice(0,1);let i = index\"><i *ngIf=\"!nonRemovableUserIds?.includes(element?.member_id)\"\r\n              (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            <ng-container *ngIf=\"groupEnabled\">\r\n              <div class=\"counter\" *ngIf=\"selectedUsers?.length\" appPopover (click)=\"userCount.popover()\"\r\n              placement=\"left\">{{selectedUsers?.length}}</div>\r\n            </ng-container>\r\n          <div class=\"name\">\r\n            <span *ngIf=\"selectedUsers?.length === 1\">User {{selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n            <span *ngIf=\"selectedUsers?.length > 1\">Users {{selectedGroups?.length > 0 ?' & ':'are selected'}}</span>\r\n          </div>\r\n\r\n          <div class=\"counter group\" *ngIf=\"selectedGroups?.length\"   appPopover (click)=\"groupCount.popover()\"\r\n          placement=\"left\">{{selectedGroups?.length}}</div>\r\n        <div class=\"name\" >\r\n          <span *ngIf=\"selectedGroups?.length === 1\">{{featureflag ?'User Group selected':'Group selected'}}</span>\r\n          <span *ngIf=\"selectedGroups?.length > 1\">{{featureflag ?'User Groups selected':'Groups selected'}}</span>\r\n        </div>\r\n\r\n        <app-popover #userCount [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let element of selectedUsers 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)\"\r\n                        (click)=\"selectItem({target:{checked:false}},element)\">&#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=\"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)\"\r\n                          (click)=\"selectItem({target:{checked:false}},element)\">&#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 #groupCount [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n              <ul class=\"action-item\">\r\n                <li *ngFor=\"let element of selectedGroups; let i =index\">\r\n                  <div class=\"avatar-card\">\r\n                    <span class=\"value\">\r\n                      <i class=\"icons\" *ngIf=\"!nonRemovableGroupIds?.includes(element?.group_id)\"\r\n                        (click)=\"selectGroup({target:{checked:false}},element)\">&#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\" (closeEvent)=\"saveList()\" (closeList)=\"closeList()\">\r\n            <div class=\"chip\" *ngIf=\"selectedUsers?.length\" >\r\n                <ng-container>\r\n                  <i class=\"icons\" (click)=\"selectItem({target:{checked:false}},selectedUsers[0])\">&#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\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\">This action will reset the default {{userType}} selected for the Program.</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\r\n</div>\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");::ng-deep .user-group-list{background:#fff;position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3}::ng-deep .user-group-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .user-group-list-head{background:#fbfbfb;height:42px;padding:0 18px;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:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .user-group-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 124px)}::ng-deep .user-group-list-body .search-block{position:relative}::ng-deep .user-group-list-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;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 i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .user-group-list-mid{width:calc(100% + .75rem);height:calc(100vh - 13.5rem);overflow:auto;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-indeterminate .checkbox-item,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item .checkmark,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .user-group-list-mid .user-list-select vui-checkbox-indeterminate .checkbox-item span.value,::ng-deep .user-group-list-mid .user-list-select vui-checkbox .checkbox-item span.value{color:#747576!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-indeterminate .checkbox-item span.value .user-name,::ng-deep .user-group-list-mid .user-list-select 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{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:#747576!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{border-bottom:1px solid #f1f1f1}::ng-deep .user-group-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:2.5rem!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-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}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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}.action-list ul.action-item{display:block}.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}.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}.action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.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;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.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}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.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}.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}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}"]
                 },] }
     ];
@@ -31989,12 +32011,12 @@
         }
         FrequencyResponsibilityListComponent.prototype.ngOnInit = function () {
             var _this = this;
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             this.featureFlag_on_completion_of = this.feature.isFeatureEnabled('ff_frequency_on_completion_of');
             if (this.selectedResponsibilityDetails) {
                 this.selectedResponsibilityId[0] = ((_a = Object.keys(this.selectedResponsibilityDetails)) === null || _a === void 0 ? void 0 : _a.length) ? (_b = this.selectedResponsibilityDetails) === null || _b === void 0 ? void 0 : _b.ReportId : [];
                 this.selectedResponsibilityValues = ((_c = Object.keys(this.selectedResponsibilityDetails)) === null || _c === void 0 ? void 0 : _c.length) ? this.selectedResponsibilityDetails : {};
-                this.isValidObj = Object.keys(this.selectedResponsibilityDetails).length > 0;
+                this.isValidObj = this.selectedResponsibilityDetails ? ((_d = Object.keys(this.selectedResponsibilityDetails)) === null || _d === void 0 ? void 0 : _d.length) > 0 : false;
             }
             this.animation = true;
             setTimeout(function () {
@@ -32069,10 +32091,11 @@
                 _id: event === null || event === void 0 ? void 0 : event.EncryptedReportId,
             };
             this.selectedResponsibilityValues = value;
-            this.isValidObj = ((_a = Object.keys(this.selectedResponsibilityValues)) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            this.isValidObj = this.selectedResponsibilityValues ? ((_a = Object.keys(this.selectedResponsibilityValues)) === null || _a === void 0 ? void 0 : _a.length) > 0 : false;
         };
         FrequencyResponsibilityListComponent.prototype.deleteItem = function (item) {
             this.selectedResponsibilityValues = {};
+            this.isValidObj = false;
             this.selectedResponsibilityId = [];
         };
         FrequencyResponsibilityListComponent.prototype.save = function (event) {
@@ -32081,7 +32104,7 @@
             this.selectedResponsibilityId = [];
             this.selectedResponsibilityId[0] = (_a = event[0]) === null || _a === void 0 ? void 0 : _a.ReportId;
             this.selectedResponsibilityValues = event[0];
-            this.isValidObj = ((_b = Object.keys(this.selectedResponsibilityValues)) === null || _b === void 0 ? void 0 : _b.length) > 0;
+            this.isValidObj = this.selectedResponsibilityValues ? ((_b = Object.keys(this.selectedResponsibilityValues)) === null || _b === void 0 ? void 0 : _b.length) > 0 : false;
             this.backButton.emit('backToOnCompletion');
             this.selectedResponsibility.emit(this.selectedResponsibilityValues);
         };
@@ -32105,8 +32128,8 @@
     FrequencyResponsibilityListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-responsibility-list',
-                    template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\r\n    <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\r\n        <div class=\"vx-d-flex vx-align-center\">\r\n            <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\" >&#xe91d;</i>\r\n            <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"frequency-responsibility-list-body\">\r\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"  >\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 1\" (click)=\"onClickTabChange(responsibilityTabs[0])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">REGULATIONS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{regulationCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 2\" (click)=\"onClickTabChange(responsibilityTabs[1])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">STANDARDS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{standardsCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 3\"(click)=\"onClickTabChange(responsibilityTabs[2])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">INTERNAL CONTROLS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{internalsCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 0\" (click)=\"onClickTabChange(responsibilityTabs[3])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">OTHERS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{othersCount}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"frequency-responsibility-list-search vx-mb-2\">\r\n            <i class=\"icons vx-fs-12\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\" placeholder=\"Search Responsibilities\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\" [start]=\"responsibilitiesData?.responsibilities_from\"\r\n            [end]=\"responsibilitiesData?.responsibilities_to\" [total]=\"responsibilitiesData?.total_responsibilities\"\r\n            [pageCount]=\"responsibilitiesData?.total_pages\" [currentPage]=\"responsibilityCurrentPage\"\r\n            (selectedPage)=\"responsibilityPageChange($event)\" >\r\n        </app-pagination>\r\n        <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"true\">\r\n            <div class=\"table-header\">\r\n                <div class=\"table-row\">\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">#</div>\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">RESPONSIBILITIES</div>\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\">PROGRAMS</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"table-body\">\r\n                <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\r\n\r\n                <!-- when click on radio then active class should be true -->\r\n                <div class=\"table-row\" [class.active]=\"selectedResponsibilityId?.includes(responsibility?.ReportId)\" *ngFor=\"let responsibility of responsibilitiesData?.data; let i = index\">\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                        <div class=\"sr-no\" [appTooltip]=\"responsibilitiesData?.responsibilities_from + i\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibilitiesData?.responsibilities_from + i}}</div>\r\n                        <app-cs-radio  [name]=\"'responsibility'\" [checked]=\"selectedResponsibilityId?.includes(responsibility?.ReportId)\"\r\n                        (checkedEvent)=\"selectResponsibility(responsibility)\"></app-cs-radio>\r\n                    </div>\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">\r\n                        <div class=\"value vx-fs-12 vx-label-txt vx-pr-5\" [appTooltip]=\"responsibility?.ReportName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.ControlId}} {{responsibility?.ReportName}}</div>\r\n                    </div>\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\">\r\n                        <div class=\"vx-d-block vx-w-100\">\r\n                            <div class=\"value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"responsibility?.category_details_array[0]?.category_name ?? '--'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.category_name ?? '--'}}</div>\r\n                            <div *ngIf=\"responsibility?.category_details_array[0]?.parent_category_name?.length\" class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\r\n                                <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\">Within</div>\r\n                                <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')}}</div>\r\n                              </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <app-floating-bar [selectedData]=\"(isValidObj) ? [selectedResponsibilityValues]:[]\" [displayElementKey]=\"'ReportName'\" (closeList)=\"back()\"  (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\"></app-floating-bar>\r\n    </div>\r\n</div>",
-                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\");::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:31.25rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search 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 .frequency-responsibility-list-search input::-moz-placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search input:-ms-input-placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 17.5rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 19.5rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 22rem);min-width:calc(100% - 22rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program{width:20rem;min-width:20rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@-webkit-keyframes animate-right{0%{transform:translateX(5px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes animate-right{0%{transform:translateX(5px);opacity:0}to{transform:translateX(0);opacity:1}}"]
+                    template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\r\n    <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\r\n        <div class=\"vx-d-flex vx-align-center\">\r\n            <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\" >&#xe91d;</i>\r\n            <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"frequency-responsibility-list-body\">\r\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"  >\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 1\" (click)=\"onClickTabChange(responsibilityTabs[0])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">REGULATIONS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{regulationCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 2\" (click)=\"onClickTabChange(responsibilityTabs[1])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">STANDARDS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{standardsCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 3\"(click)=\"onClickTabChange(responsibilityTabs[2])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">INTERNAL CONTROLS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{internalsCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 0\" (click)=\"onClickTabChange(responsibilityTabs[3])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">OTHERS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{othersCount}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"frequency-responsibility-list-search vx-mb-2\">\r\n            <i class=\"icons vx-fs-12\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\" placeholder=\"Search Responsibilities\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\" [start]=\"responsibilitiesData?.responsibilities_from\"\r\n            [end]=\"responsibilitiesData?.responsibilities_to\" [total]=\"responsibilitiesData?.total_responsibilities\" \r\n            [pageCount]=\"responsibilitiesData?.total_pages\" [currentPage]=\"responsibilityCurrentPage\"\r\n            (selectedPage)=\"responsibilityPageChange($event)\" >\r\n        </app-pagination>\r\n        <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"true\">\r\n            <div class=\"table-header\">\r\n                <div class=\"table-row\">\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">#</div>\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">RESPONSIBILITIES</div>\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\">PROGRAMS</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"table-body\">\r\n                <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\r\n\r\n                <!-- when click on radio then active class should be true -->\r\n                <div class=\"table-row\" [class.active]=\"selectedResponsibilityId?.includes(responsibility?.ReportId)\" *ngFor=\"let responsibility of responsibilitiesData?.data; let i = index\">\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                        <div class=\"sr-no\" [appTooltip]=\"responsibilitiesData?.responsibilities_from + i\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibilitiesData?.responsibilities_from + i}}</div>\r\n                        <app-cs-radio  [name]=\"'responsibility'\" [checked]=\"selectedResponsibilityId?.includes(responsibility?.ReportId)\"\r\n                        (checkedEvent)=\"selectResponsibility(responsibility)\"></app-cs-radio>\r\n                    </div>\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">\r\n                        <div class=\"value vx-fs-12 vx-label-txt vx-pr-5\" [appTooltip]=\"responsibility?.ReportName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.ControlId}} {{responsibility?.ReportName}}</div>\r\n                    </div>\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\">\r\n                        <div class=\"program-inner vx-d-block\">\r\n                            <div class=\"value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"responsibility?.category_details_array[0]?.category_name ?? '--'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.category_name ?? '--'}}</div>\r\n                            <div *ngIf=\"responsibility?.category_details_array[0]?.parent_category_name?.length\" class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\r\n                                <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\">Within</div>\r\n                                <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')}}</div>\r\n                              </div>\r\n                        </div>\r\n                        <button *ngIf=\"responsibility?.category_details_array?.length >= 2\" appPopover (click)=\"programPopup.popover()\" placement=\"right\" class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">+{{responsibility?.category_details_array?.length - 1}}</button>\r\n                        <app-popover #programPopup>\r\n                            <div class=\"action-list\">\r\n                              <ul class=\"action-item\">\r\n                                <li *ngFor=\"let subCategory of responsibility?.category_details_array | slice : 1\">\r\n                                  <div class=\"avatar-card\">\r\n                                      <div class=\"vx-d-block vx-w-100\">\r\n                                          <span class=\"value\" [appTooltip]=\"subCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{subCategory?.category_name}}</span>\r\n                                          <div *ngIf=\"responsibility?.category_details_array[0]?.parent_category_name?.length\" class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\r\n                                            <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\">Within</div>\r\n                                            <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')}}</div>\r\n                                        </div>\r\n                                      </div>\r\n                                  </div>\r\n                                </li>\r\n                              </ul>\r\n                            </div>\r\n                        </app-popover>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <app-floating-bar [selectedData]=\"(isValidObj) ? [selectedResponsibilityValues]:[]\" [displayElementKey]=\"'ReportName'\" (closeList)=\"back()\"  (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\" [isDisabled]=\"!isValidObj\" ></app-floating-bar>\r\n    </div>\r\n</div>",
+                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\");::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:31.25rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search 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 .frequency-responsibility-list-search input::-moz-placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search input:-ms-input-placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 17.5rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 19.5rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 22rem);min-width:calc(100% - 22rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program{width:20rem;min-width:20rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}@-webkit-keyframes animate-right{0%{transform:translateX(5px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes animate-right{0%{transform:translateX(5px);opacity:0}to{transform:translateX(0);opacity:1}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;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}.action-list ul.action-item{display:block}.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}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.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;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}"]
                 },] }
     ];
     FrequencyResponsibilityListComponent.ctorParameters = function () { return [