vcomply-workflow-engine 6.1.72 → 6.1.74

package/fesm2022/vcomply-workflow-engine.mjs

@@ -15,6 +15,7 @@ import { cloneDeep, shuffle, some, uniqBy, isEqual } from 'lodash';
 import * as i1$2 from '@angular/platform-browser';
 import * as i4 from '@vcomply/editor';
 import { VcomplyEditorModule } from '@vcomply/editor';
+import { PipesModule as PipesModule$1 } from 'projects/vx-workflow-engine/src/lib/pipes/pipes.module';
 import * as i5 from 'ng2-date-picker';
 import { DpDatePickerModule } from 'ng2-date-picker';
 import { nanoid } from 'nanoid';
@@ -2847,7 +2848,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 let SearchPipe$1 = class SearchPipe {
     transform(items, ...args) {
-        console.log('items', items, args);
         let searchText = args[0];
         const searchKey = args[1];
         if (!items) {
@@ -6233,6 +6233,7 @@ class GrcResponsibilityListingComponent {
         this.MODE = 'CREATE';
         this.allSelectedResponsibilityIds = [];
         this.selectedProgramAndResp = [];
+        this.searchString = '';
         this.getUpdatedDataList = new EventEmitter();
         this.changeSelectedProgramAndResp = new EventEmitter();
         this.env = config?.envConfig;
@@ -6361,7 +6362,7 @@ class GrcResponsibilityListingComponent {
         return [...Array.from(idSet)].filter((item) => Array.isArray(item) ? item.length > 0 : true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GrcResponsibilityListingComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GrcResponsibilityListingComponent, isStandalone: true, selector: "app-grc-responsibility-listing", inputs: { tableCard: "tableCard", activeProgram: "activeProgram", headerText: "headerText", currentPage: "currentPage", perPageLimit: "perPageLimit", totalListData: "totalListData", totalPages: "totalPages", selectedListData: "selectedListData", selectedListDataIds: "selectedListDataIds", MODE: "MODE", allSelectedResponsibilityIds: "allSelectedResponsibilityIds", getResponsibilityList: ["responsibilityData", "getResponsibilityList"], selectedProgramAndResp: "selectedProgramAndResp" }, outputs: { getUpdatedDataList: "getUpdatedDataList", changeSelectedProgramAndResp: "changeSelectedProgramAndResp" }, ngImport: i0, template: "<div class=\"grc-responsibility-listing\">\n    <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n        <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\"\n            (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n        <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\"\n            (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n    </div>\n    <div class=\"grc-responsibility-listing-inner\">\n        <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n            <div class=\"grc-responsibility-table-row\" *ngFor=\"let list of dataList?.data; let i = index\"\n                [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n                <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\"\n                        delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}\n                    </div>\n                    <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\"\n                        (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n                </div>\n                <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n                    <div class=\"vx-avatar-group vx-mr-1\">\n                        <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\"\n                            delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                            <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.name |\n                                userShortName }}</span>\n                            <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\"\n                                src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n                        </div>\n                        <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\"\n                            [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                            [tooltipMandatory]=\"true\">\n                            <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.name |\n                                userShortName }}</span>\n                            <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\"\n                                src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n                        </div>\n                        <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\"\n                            appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n                            <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n                        </div>\n                        <app-popover #multiUser>\n                            <div class=\"wf-action-list\">\n                                <ul class=\"action-item\">\n                                    <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n                                        <div class=\"avatar-card\">\n                                            <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_name |\n                                                userShortName }}</div>\n                                            <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img\n                                                    src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n                                            <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\"\n                                                delay=\"0\" type=\"black\"\n                                                [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n                                        </div>\n                                    </li>\n                                </ul>\n                            </div>\n                        </app-popover>\n                    </div>\n                    <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n                    <div class=\"name-inner\">\n                        <div class=\"vx-d-flex vx-align-center\">\n                            <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\"\n                                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.controlId}}{{list?.name}}\n                            </div>\n                        </div>\n                        <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n                            <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:\n                            </div>\n                            <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                                <div\n                                    class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                                    Within</div>\n                                <div class=\"within-value vx-fs-11 vx-paragraph-txt\"><span\n                                        *ngFor=\"let parent of list?.withinData; let last = last\"\n                                        [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                                        [tooltipMandatory]=\"false\">{{parent?.name}}\n                                        <span *ngIf=\"!last\">\n                                            < </span>\n                                        </span></div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\"\n            [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\"\n            (selectedPage)=\"changePage($event)\"></app-pagination>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 16rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 16rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "ngmodule", type: FormgroupModule }, { kind: "component", type: CsCheckboxComponentUI, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsCheckboxIndeterminateComponentUI, selector: "app-cs-checkbox-indeterminate", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "ngmodule", type: WorkflowPipesModule }, { kind: "pipe", type: GetUserShortNamePipe, name: "userShortName" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GrcResponsibilityListingComponent, isStandalone: true, selector: "app-grc-responsibility-listing", inputs: { tableCard: "tableCard", activeProgram: "activeProgram", headerText: "headerText", currentPage: "currentPage", perPageLimit: "perPageLimit", totalListData: "totalListData", totalPages: "totalPages", selectedListData: "selectedListData", selectedListDataIds: "selectedListDataIds", MODE: "MODE", allSelectedResponsibilityIds: "allSelectedResponsibilityIds", getResponsibilityList: ["responsibilityData", "getResponsibilityList"], selectedProgramAndResp: "selectedProgramAndResp", searchString: "searchString" }, outputs: { getUpdatedDataList: "getUpdatedDataList", changeSelectedProgramAndResp: "changeSelectedProgramAndResp" }, ngImport: i0, template: "<div class=\"grc-responsibility-listing\">\n    <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n        <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\"\n            (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n        <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\"\n            (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n    </div>\n    <div class=\"grc-responsibility-listing-inner\">\n        <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n            <div class=\"grc-responsibility-table-row\"\n                *ngFor=\"let list of dataList?.data | search: searchString : 'name' ; let i = index\"\n                [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n                <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\"\n                        delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}\n                    </div>\n                    <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\"\n                        (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n                </div>\n                <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n                    <div class=\"vx-avatar-group vx-mr-1\">\n                        <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\"\n                            delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                            <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.name |\n                                userShortName }}</span>\n                            <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\"\n                                src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n                        </div>\n                        <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\"\n                            [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                            [tooltipMandatory]=\"true\">\n                            <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.name |\n                                userShortName }}</span>\n                            <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\"\n                                src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n                        </div>\n                        <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\"\n                            appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n                            <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n                        </div>\n                        <app-popover #multiUser>\n                            <div class=\"wf-action-list\">\n                                <ul class=\"action-item\">\n                                    <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n                                        <div class=\"avatar-card\">\n                                            <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_name |\n                                                userShortName }}</div>\n                                            <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img\n                                                    src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n                                            <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\"\n                                                delay=\"0\" type=\"black\"\n                                                [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n                                        </div>\n                                    </li>\n                                </ul>\n                            </div>\n                        </app-popover>\n                    </div>\n                    <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n                    <div class=\"name-inner\">\n                        <div class=\"vx-d-flex vx-align-center\">\n                            <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\"\n                                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.controlId}}{{list?.name}}\n                            </div>\n                        </div>\n                        <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n                            <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:\n                            </div>\n                            <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                                <div\n                                    class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                                    Within</div>\n                                <div class=\"within-value vx-fs-11 vx-paragraph-txt\"><span\n                                        *ngFor=\"let parent of list?.withinData; let last = last\"\n                                        [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                                        [tooltipMandatory]=\"false\">{{parent?.name}}\n                                        <span *ngIf=\"!last\">\n                                            < </span>\n                                        </span></div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\"\n            [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\"\n            (selectedPage)=\"changePage($event)\"></app-pagination>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 16rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 16rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "ngmodule", type: FormgroupModule }, { kind: "component", type: CsCheckboxComponentUI, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsCheckboxIndeterminateComponentUI, selector: "app-cs-checkbox-indeterminate", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "ngmodule", type: WorkflowPipesModule }, { kind: "pipe", type: GetUserShortNamePipe, name: "userShortName" }, { kind: "ngmodule", type: PipesModule$1 }, { kind: "pipe", type: SearchPipe$1, name: "search" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GrcResponsibilityListingComponent, decorators: [{
             type: Component,
@@ -6373,6 +6374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FloatingBarModule,
                         PaginationModule$1,
                         WorkflowPipesModule,
+                        PipesModule$1,
                     ], inputs: [
                         'tableCard',
                         'activeProgram',
@@ -6384,7 +6386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         'selectedListData',
                         'selectedListDataIds',
                         'MODE'
-                    ], template: "<div class=\"grc-responsibility-listing\">\n    <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n        <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\"\n            (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n        <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\"\n            (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n    </div>\n    <div class=\"grc-responsibility-listing-inner\">\n        <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n            <div class=\"grc-responsibility-table-row\" *ngFor=\"let list of dataList?.data; let i = index\"\n                [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n                <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\"\n                        delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}\n                    </div>\n                    <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\"\n                        (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n                </div>\n                <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n                    <div class=\"vx-avatar-group vx-mr-1\">\n                        <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\"\n                            delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                            <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.name |\n                                userShortName }}</span>\n                            <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\"\n                                src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n                        </div>\n                        <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\"\n                            [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                            [tooltipMandatory]=\"true\">\n                            <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.name |\n                                userShortName }}</span>\n                            <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\"\n                                src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n                        </div>\n                        <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\"\n                            appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n                            <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n                        </div>\n                        <app-popover #multiUser>\n                            <div class=\"wf-action-list\">\n                                <ul class=\"action-item\">\n                                    <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n                                        <div class=\"avatar-card\">\n                                            <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_name |\n                                                userShortName }}</div>\n                                            <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img\n                                                    src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n                                            <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\"\n                                                delay=\"0\" type=\"black\"\n                                                [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n                                        </div>\n                                    </li>\n                                </ul>\n                            </div>\n                        </app-popover>\n                    </div>\n                    <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n                    <div class=\"name-inner\">\n                        <div class=\"vx-d-flex vx-align-center\">\n                            <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\"\n                                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.controlId}}{{list?.name}}\n                            </div>\n                        </div>\n                        <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n                            <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:\n                            </div>\n                            <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                                <div\n                                    class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                                    Within</div>\n                                <div class=\"within-value vx-fs-11 vx-paragraph-txt\"><span\n                                        *ngFor=\"let parent of list?.withinData; let last = last\"\n                                        [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                                        [tooltipMandatory]=\"false\">{{parent?.name}}\n                                        <span *ngIf=\"!last\">\n                                            < </span>\n                                        </span></div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\"\n            [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\"\n            (selectedPage)=\"changePage($event)\"></app-pagination>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 16rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 16rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
+                    ], template: "<div class=\"grc-responsibility-listing\">\n    <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n        <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\"\n            (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n        <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\"\n            (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n        <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n    </div>\n    <div class=\"grc-responsibility-listing-inner\">\n        <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n            <div class=\"grc-responsibility-table-row\"\n                *ngFor=\"let list of dataList?.data | search: searchString : 'name' ; let i = index\"\n                [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n                <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\"\n                        delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}\n                    </div>\n                    <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\"\n                        (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n                </div>\n                <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n                    <div class=\"vx-avatar-group vx-mr-1\">\n                        <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\"\n                            delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                            <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.name |\n                                userShortName }}</span>\n                            <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\"\n                                src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n                        </div>\n                        <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\"\n                            [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                            [tooltipMandatory]=\"true\">\n                            <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.name |\n                                userShortName }}</span>\n                            <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\"\n                                src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n                        </div>\n                        <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\"\n                            appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n                            <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n                        </div>\n                        <app-popover #multiUser>\n                            <div class=\"wf-action-list\">\n                                <ul class=\"action-item\">\n                                    <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n                                        <div class=\"avatar-card\">\n                                            <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_name |\n                                                userShortName }}</div>\n                                            <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img\n                                                    src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n                                            <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\"\n                                                delay=\"0\" type=\"black\"\n                                                [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n                                        </div>\n                                    </li>\n                                </ul>\n                            </div>\n                        </app-popover>\n                    </div>\n                    <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n                    <div class=\"name-inner\">\n                        <div class=\"vx-d-flex vx-align-center\">\n                            <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\"\n                                delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.controlId}}{{list?.name}}\n                            </div>\n                        </div>\n                        <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n                            <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:\n                            </div>\n                            <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                                <div\n                                    class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n                                    Within</div>\n                                <div class=\"within-value vx-fs-11 vx-paragraph-txt\"><span\n                                        *ngFor=\"let parent of list?.withinData; let last = last\"\n                                        [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                                        [tooltipMandatory]=\"false\">{{parent?.name}}\n                                        <span *ngIf=\"!last\">\n                                            < </span>\n                                        </span></div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\"\n            [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\"\n            (selectedPage)=\"changePage($event)\"></app-pagination>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 16rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 16rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
         }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { allSelectedResponsibilityIds: [{
@@ -6394,6 +6396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['responsibilityData']
             }], selectedProgramAndResp: [{
                 type: Input
+            }], searchString: [{
+                type: Input
             }], getUpdatedDataList: [{
                 type: Output
             }], changeSelectedProgramAndResp: [{
@@ -6610,10 +6614,8 @@ class ProgramResponsibilityListingComponent {
         if (this.searchString != event) {
             this.programCurrentPage = 1;
             this.searchString = event;
-            this.onSelectedProgramChange();
-            this.getProgramsList();
-            this.getProgramsCount();
         }
+        console.log(this.searchString);
     }
     getProgramsCount(paramsObject) {
         this.programCountLoader = true;
@@ -6870,7 +6872,7 @@ class ProgramResponsibilityListingComponent {
         return selectedRCIds;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramResponsibilityListingComponent, deps: [{ token: GrcService }, { token: ResponsibilityService }, { token: GetUserDetailsPipe$1 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgramResponsibilityListingComponent, isStandalone: true, selector: "app-program-responsibility-listing", inputs: { getSelectedProgramAndResp: ["selectedProgramAndResp", "getSelectedProgramAndResp"], selectedRC: "selectedRC", MODE: "MODE" }, outputs: { closeList: "closeList" }, providers: [GetUserDetailsPipe$1], viewQueries: [{ propertyName: "responsibilityListingComponent", first: true, predicate: ["dataListing"], descendants: true }], ngImport: i0, template: "<div class=\"program-responsibility-listing\" [class.animate]=\"animation\">\n  <div class=\"program-responsibility-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n    <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibilities</h3>\n  </div>\n  <div class=\"program-responsibility-listing-body\">\n    <!-- <app-table-card-loader *ngIf=\"programCountLoader\"></app-table-card-loader> -->\n    <!-- <app-table-card\n            *ngIf=\"!programCountLoader\"\n            class=\"vx-w-100\"\n            [tableCard]=\"programTypes\"\n            [singleSelectedText]=\"'Responsibility Selected'\"\n            [selectedTab]=\"selectedTab\"\n            [multipleSelectedText]=\"'Responsibilities Selected'\"\n            (setSelectedTab)=\"setSelectedTab($event)\">\n        </app-table-card> -->\n    <div class=\"search-block vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <div class=\"program-responsibility-listing-body-inner vx-mb-2 vx-d-flex\" [class.vx-justify-center]=\"\n        !responsibilityLoader && !responsibilityData?.data?.length\n      \">\n      <ng-container *ngIf=\"responsibilityLoader || responsibilityData?.data?.length\">\n        <!-- <div class=\"inner-item-left vx-pr-2\">\n\n                    <app-grc-category-listing *ngIf=\"!programLoader\" [headerText]=\"'Programs'\" [programData]=\"programData\"  [selectedCatAndRisk]=\"selectedCatAndRisk\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"programCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedProgramIds\" (activeSelectedCategory)=\"activeSelectedProgram($event)\" (onCategoryPageChange)=\"onProgramPageChange($event)\"></app-grc-category-listing>\n                        \n                    <app-list-loader *ngIf=\"programLoader\"></app-list-loader>\n\n                </div> -->\n\n        <!-- <div class=\"inner-item-mid vx-pr-2\">\n                    <app-grc-sub-category-listing *ngIf=\"!categoryLoader && !programLoader\"  [headerText]=\"'Programs'\" [categories]=\"categoryData\"  [nameDisplayKey]=\"'item_name'\"  [currentPage]=\"categoryCurrentPage\" [selectedCategoryIds]=\"selectedCategoryIds\" [activeProgram]=\"selectedProgram\" [selectedProgramAndResp]=\"selectedProgramAndResp\" (activeSelectedCategory)=\"activeSelectedSubCategory($event)\" (onCategoryPageChange)=\"onSubCategoryPageChange($event)\"></app-grc-sub-category-listing>\n                    <app-list-loader *ngIf=\"categoryLoader || programLoader\"></app-list-loader>\n                </div> -->\n\n        <div class=\"inner-item-right\">\n          <!-- <app-grc-responsibility-listing></app-grc-responsibility-listing> -->\n\n          <app-grc-responsibility-listing #dataListing *ngIf=\"\n              !responsibilityLoader &&\n              !categoryLoader &&\n              !programLoader &&\n              responsibilityData?.data?.length !== 0\n            \" [headerText]=\"'Responsibilities'\" [MODE]=\"MODE\" [responsibilityData]=\"responsibilityData\"\n            [activeProgram]=\"selectedProgram\" [activeCategory]=\"selectedCategory\"\n            [selectedProgramAndResp]=\"selectedProgramAndResp\" [allSelectedResponsibilityIds]=\"selectedResponsibilities\"\n            (changeSelectedProgramAndResp)=\"\n              changeSelectedProgramAndResp($event)\n            \" [currentPage]=\"responsibilityCurrentPage\" [perPageLimit]=\"30\"\n            [totalListData]=\"responsibilityData?.total_items\" [totalPages]=\"responsibilityData?.total_pages\"\n            (getUpdatedDataList)=\"getUpdatedDataList($event)\"></app-grc-responsibility-listing>\n\n          <app-list-loader *ngIf=\"responsibilityLoader || categoryLoader || programLoader\"\n            [fullWidth]=\"true\"></app-list-loader>\n\n          <app-no-data *ngIf=\"\n              responsibilityData?.data?.length === 0 &&\n              !(responsibilityLoader || categoryLoader || programLoader)\n            \" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\n        </div>\n      </ng-container>\n      <app-no-data *ngIf=\"!responsibilityLoader && !responsibilityData?.data?.length\" [noDataImage]=\"CDN_LINK?.noData\"\n        [noDataText]=\"'No data to display'\"></app-no-data>\n    </div>\n    <app-floating-bar [selectedData]=\"\n        selectedResponsibilities | filterResponsibility : responsibilityData?.data\n      \" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'title'\"\n      [singularText]=\"'Responsibility selected'\" [pluralText]=\"'Responsibilities selected'\"\n      (deleteEvent)=\"deleteEvent($event)\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .program-responsibility-listing{position:fixed;inset:0 30px 0 0}::ng-deep .program-responsibility-listing:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .program-responsibility-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-responsibility-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .program-responsibility-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .program-responsibility-listing-body .search-block{position:relative}::ng-deep .program-responsibility-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .program-responsibility-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-responsibility-listing-body .search-block input::placeholder{color:#747576}::ng-deep .program-responsibility-listing-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .program-responsibility-listing-body-inner{height:calc(100vh - 14.25rem)}::ng-deep .program-responsibility-listing-body-inner .inner-item-left{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-mid{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-right{width:100%}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: FormgroupModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: GrcResponsibilityListingComponent, selector: "app-grc-responsibility-listing", inputs: ["tableCard", "activeProgram", "headerText", "currentPage", "perPageLimit", "totalListData", "totalPages", "selectedListData", "selectedListDataIds", "MODE", "allSelectedResponsibilityIds", "responsibilityData", "selectedProgramAndResp"], outputs: ["getUpdatedDataList", "changeSelectedProgramAndResp"] }, { kind: "ngmodule", type: ListLoaderModule }, { kind: "component", type: ListLoaderComponent, selector: "app-list-loader", inputs: ["fullWidth"] }, { kind: "ngmodule", type: NoDataModule }, { kind: "component", type: NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "ngmodule", type: WorkflowPipesModule }, { kind: "pipe", type: FilterResponsibilityPipe, name: "filterResponsibility" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgramResponsibilityListingComponent, isStandalone: true, selector: "app-program-responsibility-listing", inputs: { getSelectedProgramAndResp: ["selectedProgramAndResp", "getSelectedProgramAndResp"], selectedRC: "selectedRC", MODE: "MODE" }, outputs: { closeList: "closeList" }, providers: [GetUserDetailsPipe$1], viewQueries: [{ propertyName: "responsibilityListingComponent", first: true, predicate: ["dataListing"], descendants: true }], ngImport: i0, template: "<div class=\"program-responsibility-listing\" [class.animate]=\"animation\">\n  <div class=\"program-responsibility-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n    <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibilities</h3>\n  </div>\n  <div class=\"program-responsibility-listing-body\">\n    <!-- <app-table-card-loader *ngIf=\"programCountLoader\"></app-table-card-loader> -->\n    <!-- <app-table-card\n            *ngIf=\"!programCountLoader\"\n            class=\"vx-w-100\"\n            [tableCard]=\"programTypes\"\n            [singleSelectedText]=\"'Responsibility Selected'\"\n            [selectedTab]=\"selectedTab\"\n            [multipleSelectedText]=\"'Responsibilities Selected'\"\n            (setSelectedTab)=\"setSelectedTab($event)\">\n        </app-table-card> -->\n    <div class=\"search-block vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <div class=\"program-responsibility-listing-body-inner vx-mb-2 vx-d-flex\" [class.vx-justify-center]=\"\n        !responsibilityLoader && !responsibilityData?.data?.length\n      \">\n      <ng-container *ngIf=\"responsibilityLoader || responsibilityData?.data?.length\">\n        <!-- <div class=\"inner-item-left vx-pr-2\">\n\n                    <app-grc-category-listing *ngIf=\"!programLoader\" [headerText]=\"'Programs'\" [programData]=\"programData\"  [selectedCatAndRisk]=\"selectedCatAndRisk\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"programCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedProgramIds\" (activeSelectedCategory)=\"activeSelectedProgram($event)\" (onCategoryPageChange)=\"onProgramPageChange($event)\"></app-grc-category-listing>\n                        \n                    <app-list-loader *ngIf=\"programLoader\"></app-list-loader>\n\n                </div> -->\n\n        <!-- <div class=\"inner-item-mid vx-pr-2\">\n                    <app-grc-sub-category-listing *ngIf=\"!categoryLoader && !programLoader\"  [headerText]=\"'Programs'\" [categories]=\"categoryData\"  [nameDisplayKey]=\"'item_name'\"  [currentPage]=\"categoryCurrentPage\" [selectedCategoryIds]=\"selectedCategoryIds\" [activeProgram]=\"selectedProgram\" [selectedProgramAndResp]=\"selectedProgramAndResp\" (activeSelectedCategory)=\"activeSelectedSubCategory($event)\" (onCategoryPageChange)=\"onSubCategoryPageChange($event)\"></app-grc-sub-category-listing>\n                    <app-list-loader *ngIf=\"categoryLoader || programLoader\"></app-list-loader>\n                </div> -->\n\n        <div class=\"inner-item-right\">\n          <!-- <app-grc-responsibility-listing></app-grc-responsibility-listing> -->\n\n          <app-grc-responsibility-listing #dataListing *ngIf=\"\n              !responsibilityLoader &&\n              !categoryLoader &&\n              !programLoader &&\n              responsibilityData?.data?.length !== 0\n            \" [headerText]=\"'Responsibilities'\" [MODE]=\"MODE\" [responsibilityData]=\"responsibilityData\"\n            [searchString]=\"searchString\" [activeProgram]=\"selectedProgram\" [activeCategory]=\"selectedCategory\"\n            [selectedProgramAndResp]=\"selectedProgramAndResp\" [allSelectedResponsibilityIds]=\"selectedResponsibilities\"\n            (changeSelectedProgramAndResp)=\"\n              changeSelectedProgramAndResp($event)\n            \" [currentPage]=\"responsibilityCurrentPage\" [perPageLimit]=\"30\"\n            [totalListData]=\"responsibilityData?.total_items\" [totalPages]=\"responsibilityData?.total_pages\"\n            (getUpdatedDataList)=\"getUpdatedDataList($event)\"></app-grc-responsibility-listing>\n\n          <app-list-loader *ngIf=\"responsibilityLoader || categoryLoader || programLoader\"\n            [fullWidth]=\"true\"></app-list-loader>\n\n          <app-no-data *ngIf=\"\n              responsibilityData?.data?.length === 0 &&\n              !(responsibilityLoader || categoryLoader || programLoader)\n            \" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\n        </div>\n      </ng-container>\n      <app-no-data *ngIf=\"!responsibilityLoader && !responsibilityData?.data?.length\" [noDataImage]=\"CDN_LINK?.noData\"\n        [noDataText]=\"'No data to display'\"></app-no-data>\n    </div>\n    <app-floating-bar [selectedData]=\"\n        selectedResponsibilities | filterResponsibility : responsibilityData?.data\n      \" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'title'\"\n      [singularText]=\"'Responsibility selected'\" [pluralText]=\"'Responsibilities selected'\"\n      (deleteEvent)=\"deleteEvent($event)\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .program-responsibility-listing{position:fixed;inset:0 30px 0 0}::ng-deep .program-responsibility-listing:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .program-responsibility-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-responsibility-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .program-responsibility-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .program-responsibility-listing-body .search-block{position:relative}::ng-deep .program-responsibility-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .program-responsibility-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-responsibility-listing-body .search-block input::placeholder{color:#747576}::ng-deep .program-responsibility-listing-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .program-responsibility-listing-body-inner{height:calc(100vh - 14.25rem)}::ng-deep .program-responsibility-listing-body-inner .inner-item-left{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-mid{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-right{width:100%}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: FormgroupModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: GrcResponsibilityListingComponent, selector: "app-grc-responsibility-listing", inputs: ["tableCard", "activeProgram", "headerText", "currentPage", "perPageLimit", "totalListData", "totalPages", "selectedListData", "selectedListDataIds", "MODE", "allSelectedResponsibilityIds", "responsibilityData", "selectedProgramAndResp", "searchString"], outputs: ["getUpdatedDataList", "changeSelectedProgramAndResp"] }, { kind: "ngmodule", type: ListLoaderModule }, { kind: "component", type: ListLoaderComponent, selector: "app-list-loader", inputs: ["fullWidth"] }, { kind: "ngmodule", type: NoDataModule }, { kind: "component", type: NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "ngmodule", type: WorkflowPipesModule }, { kind: "pipe", type: FilterResponsibilityPipe, name: "filterResponsibility" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramResponsibilityListingComponent, decorators: [{
             type: Component,
@@ -6889,7 +6891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NoDataModule,
                         TableCardLoaderComponent,
                         WorkflowPipesModule,
-                    ], outputs: ['closeList'], providers: [GetUserDetailsPipe$1], template: "<div class=\"program-responsibility-listing\" [class.animate]=\"animation\">\n  <div class=\"program-responsibility-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n    <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibilities</h3>\n  </div>\n  <div class=\"program-responsibility-listing-body\">\n    <!-- <app-table-card-loader *ngIf=\"programCountLoader\"></app-table-card-loader> -->\n    <!-- <app-table-card\n            *ngIf=\"!programCountLoader\"\n            class=\"vx-w-100\"\n            [tableCard]=\"programTypes\"\n            [singleSelectedText]=\"'Responsibility Selected'\"\n            [selectedTab]=\"selectedTab\"\n            [multipleSelectedText]=\"'Responsibilities Selected'\"\n            (setSelectedTab)=\"setSelectedTab($event)\">\n        </app-table-card> -->\n    <div class=\"search-block vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <div class=\"program-responsibility-listing-body-inner vx-mb-2 vx-d-flex\" [class.vx-justify-center]=\"\n        !responsibilityLoader && !responsibilityData?.data?.length\n      \">\n      <ng-container *ngIf=\"responsibilityLoader || responsibilityData?.data?.length\">\n        <!-- <div class=\"inner-item-left vx-pr-2\">\n\n                    <app-grc-category-listing *ngIf=\"!programLoader\" [headerText]=\"'Programs'\" [programData]=\"programData\"  [selectedCatAndRisk]=\"selectedCatAndRisk\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"programCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedProgramIds\" (activeSelectedCategory)=\"activeSelectedProgram($event)\" (onCategoryPageChange)=\"onProgramPageChange($event)\"></app-grc-category-listing>\n                        \n                    <app-list-loader *ngIf=\"programLoader\"></app-list-loader>\n\n                </div> -->\n\n        <!-- <div class=\"inner-item-mid vx-pr-2\">\n                    <app-grc-sub-category-listing *ngIf=\"!categoryLoader && !programLoader\"  [headerText]=\"'Programs'\" [categories]=\"categoryData\"  [nameDisplayKey]=\"'item_name'\"  [currentPage]=\"categoryCurrentPage\" [selectedCategoryIds]=\"selectedCategoryIds\" [activeProgram]=\"selectedProgram\" [selectedProgramAndResp]=\"selectedProgramAndResp\" (activeSelectedCategory)=\"activeSelectedSubCategory($event)\" (onCategoryPageChange)=\"onSubCategoryPageChange($event)\"></app-grc-sub-category-listing>\n                    <app-list-loader *ngIf=\"categoryLoader || programLoader\"></app-list-loader>\n                </div> -->\n\n        <div class=\"inner-item-right\">\n          <!-- <app-grc-responsibility-listing></app-grc-responsibility-listing> -->\n\n          <app-grc-responsibility-listing #dataListing *ngIf=\"\n              !responsibilityLoader &&\n              !categoryLoader &&\n              !programLoader &&\n              responsibilityData?.data?.length !== 0\n            \" [headerText]=\"'Responsibilities'\" [MODE]=\"MODE\" [responsibilityData]=\"responsibilityData\"\n            [activeProgram]=\"selectedProgram\" [activeCategory]=\"selectedCategory\"\n            [selectedProgramAndResp]=\"selectedProgramAndResp\" [allSelectedResponsibilityIds]=\"selectedResponsibilities\"\n            (changeSelectedProgramAndResp)=\"\n              changeSelectedProgramAndResp($event)\n            \" [currentPage]=\"responsibilityCurrentPage\" [perPageLimit]=\"30\"\n            [totalListData]=\"responsibilityData?.total_items\" [totalPages]=\"responsibilityData?.total_pages\"\n            (getUpdatedDataList)=\"getUpdatedDataList($event)\"></app-grc-responsibility-listing>\n\n          <app-list-loader *ngIf=\"responsibilityLoader || categoryLoader || programLoader\"\n            [fullWidth]=\"true\"></app-list-loader>\n\n          <app-no-data *ngIf=\"\n              responsibilityData?.data?.length === 0 &&\n              !(responsibilityLoader || categoryLoader || programLoader)\n            \" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\n        </div>\n      </ng-container>\n      <app-no-data *ngIf=\"!responsibilityLoader && !responsibilityData?.data?.length\" [noDataImage]=\"CDN_LINK?.noData\"\n        [noDataText]=\"'No data to display'\"></app-no-data>\n    </div>\n    <app-floating-bar [selectedData]=\"\n        selectedResponsibilities | filterResponsibility : responsibilityData?.data\n      \" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'title'\"\n      [singularText]=\"'Responsibility selected'\" [pluralText]=\"'Responsibilities selected'\"\n      (deleteEvent)=\"deleteEvent($event)\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .program-responsibility-listing{position:fixed;inset:0 30px 0 0}::ng-deep .program-responsibility-listing:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .program-responsibility-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-responsibility-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .program-responsibility-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .program-responsibility-listing-body .search-block{position:relative}::ng-deep .program-responsibility-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .program-responsibility-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-responsibility-listing-body .search-block input::placeholder{color:#747576}::ng-deep .program-responsibility-listing-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .program-responsibility-listing-body-inner{height:calc(100vh - 14.25rem)}::ng-deep .program-responsibility-listing-body-inner .inner-item-left{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-mid{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-right{width:100%}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+                    ], outputs: ['closeList'], providers: [GetUserDetailsPipe$1], template: "<div class=\"program-responsibility-listing\" [class.animate]=\"animation\">\n  <div class=\"program-responsibility-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n    <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibilities</h3>\n  </div>\n  <div class=\"program-responsibility-listing-body\">\n    <!-- <app-table-card-loader *ngIf=\"programCountLoader\"></app-table-card-loader> -->\n    <!-- <app-table-card\n            *ngIf=\"!programCountLoader\"\n            class=\"vx-w-100\"\n            [tableCard]=\"programTypes\"\n            [singleSelectedText]=\"'Responsibility Selected'\"\n            [selectedTab]=\"selectedTab\"\n            [multipleSelectedText]=\"'Responsibilities Selected'\"\n            (setSelectedTab)=\"setSelectedTab($event)\">\n        </app-table-card> -->\n    <div class=\"search-block vx-mb-2\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <div class=\"program-responsibility-listing-body-inner vx-mb-2 vx-d-flex\" [class.vx-justify-center]=\"\n        !responsibilityLoader && !responsibilityData?.data?.length\n      \">\n      <ng-container *ngIf=\"responsibilityLoader || responsibilityData?.data?.length\">\n        <!-- <div class=\"inner-item-left vx-pr-2\">\n\n                    <app-grc-category-listing *ngIf=\"!programLoader\" [headerText]=\"'Programs'\" [programData]=\"programData\"  [selectedCatAndRisk]=\"selectedCatAndRisk\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"programCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedProgramIds\" (activeSelectedCategory)=\"activeSelectedProgram($event)\" (onCategoryPageChange)=\"onProgramPageChange($event)\"></app-grc-category-listing>\n                        \n                    <app-list-loader *ngIf=\"programLoader\"></app-list-loader>\n\n                </div> -->\n\n        <!-- <div class=\"inner-item-mid vx-pr-2\">\n                    <app-grc-sub-category-listing *ngIf=\"!categoryLoader && !programLoader\"  [headerText]=\"'Programs'\" [categories]=\"categoryData\"  [nameDisplayKey]=\"'item_name'\"  [currentPage]=\"categoryCurrentPage\" [selectedCategoryIds]=\"selectedCategoryIds\" [activeProgram]=\"selectedProgram\" [selectedProgramAndResp]=\"selectedProgramAndResp\" (activeSelectedCategory)=\"activeSelectedSubCategory($event)\" (onCategoryPageChange)=\"onSubCategoryPageChange($event)\"></app-grc-sub-category-listing>\n                    <app-list-loader *ngIf=\"categoryLoader || programLoader\"></app-list-loader>\n                </div> -->\n\n        <div class=\"inner-item-right\">\n          <!-- <app-grc-responsibility-listing></app-grc-responsibility-listing> -->\n\n          <app-grc-responsibility-listing #dataListing *ngIf=\"\n              !responsibilityLoader &&\n              !categoryLoader &&\n              !programLoader &&\n              responsibilityData?.data?.length !== 0\n            \" [headerText]=\"'Responsibilities'\" [MODE]=\"MODE\" [responsibilityData]=\"responsibilityData\"\n            [searchString]=\"searchString\" [activeProgram]=\"selectedProgram\" [activeCategory]=\"selectedCategory\"\n            [selectedProgramAndResp]=\"selectedProgramAndResp\" [allSelectedResponsibilityIds]=\"selectedResponsibilities\"\n            (changeSelectedProgramAndResp)=\"\n              changeSelectedProgramAndResp($event)\n            \" [currentPage]=\"responsibilityCurrentPage\" [perPageLimit]=\"30\"\n            [totalListData]=\"responsibilityData?.total_items\" [totalPages]=\"responsibilityData?.total_pages\"\n            (getUpdatedDataList)=\"getUpdatedDataList($event)\"></app-grc-responsibility-listing>\n\n          <app-list-loader *ngIf=\"responsibilityLoader || categoryLoader || programLoader\"\n            [fullWidth]=\"true\"></app-list-loader>\n\n          <app-no-data *ngIf=\"\n              responsibilityData?.data?.length === 0 &&\n              !(responsibilityLoader || categoryLoader || programLoader)\n            \" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\n        </div>\n      </ng-container>\n      <app-no-data *ngIf=\"!responsibilityLoader && !responsibilityData?.data?.length\" [noDataImage]=\"CDN_LINK?.noData\"\n        [noDataText]=\"'No data to display'\"></app-no-data>\n    </div>\n    <app-floating-bar [selectedData]=\"\n        selectedResponsibilities | filterResponsibility : responsibilityData?.data\n      \" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'title'\"\n      [singularText]=\"'Responsibility selected'\" [pluralText]=\"'Responsibilities selected'\"\n      (deleteEvent)=\"deleteEvent($event)\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .program-responsibility-listing{position:fixed;inset:0 30px 0 0}::ng-deep .program-responsibility-listing:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .program-responsibility-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-responsibility-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .program-responsibility-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .program-responsibility-listing-body .search-block{position:relative}::ng-deep .program-responsibility-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .program-responsibility-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-responsibility-listing-body .search-block input::placeholder{color:#747576}::ng-deep .program-responsibility-listing-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .program-responsibility-listing-body-inner{height:calc(100vh - 14.25rem)}::ng-deep .program-responsibility-listing-body-inner .inner-item-left{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-mid{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-right{width:100%}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
         }], ctorParameters: function () { return [{ type: GrcService }, { type: ResponsibilityService }, { type: GetUserDetailsPipe$1 }]; }, propDecorators: { getSelectedProgramAndResp: [{
                 type: Input,
                 args: ['selectedProgramAndResp']
@@ -29465,9 +29467,15 @@ class FrequencyResponsibilityListComponent {
         return ids.map((id) => rcMap.get(id)).filter(Boolean);
     }
     mapResponsibilityItem(item, userMap, rcMap) {
-        const assigneeDetails = (item.assigneeDetails || [])
-            .filter((ad) => ad.status && ad.status.toLowerCase() === 'active')
-            .map((ad) => ({
+        let assigneeDetails = (item.assigneeDetails || [])
+            .filter((ad) => ad.status && ad.status.toLowerCase() === 'active');
+        if (assigneeDetails?.length === 0 && item?.assigneeType === 'any' && [null, 'any'].includes(item?.rcType)) {
+            assigneeDetails = [{
+                    ...item.assigneeDetails,
+                    status: 'active',
+                }];
+        }
+        assigneeDetails = assigneeDetails.map((ad) => ({
             ...ad,
             assigneeInfo: this.mapAssigneeUsers(ad, item.assignees?.activeUserId || [], userMap),
             responsibilityCenterInfo: this.mapResponsibilityCenters(ad, item.responsibilityCenters || [], rcMap),
@@ -29525,7 +29533,6 @@ class FrequencyResponsibilityListComponent {
     }
     onCompletionChange(event) {
         this.selectedResponsibilityValues = event;
-        console.log(this.selectedResponsibilityValues, 'selectedResponsibilityValues');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyResponsibilityListComponent, deps: [{ token: FrequencyService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyResponsibilityListComponent, selector: "app-frequency-responsibility-list", inputs: { selectedResponsibilityDetails: "selectedResponsibilityDetails" }, outputs: { backButton: "backButton", selectedResponsibility: "selectedResponsibility" }, ngImport: i0, template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\">&#xe91d;</i>\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\n    </div>\n  </div>\n  <div class=\"frequency-responsibility-list-body\">\n    <!-- <app-loader-inline *ngIf=\"othersCount === 0\"></app-loader-inline> -->\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <ng-container *ngIf=\"responsibilitiesData?.pagination as pagination\">\n      <app-pagination *ngIf=\"pagination?.total_pages > 1\" [start]=\"pagination?.responsibilities_from\"\n        [end]=\"pagination?.responsibilities_to\" [total]=\"pagination?.total_responsibilities\"\n        [pageCount]=\"pagination?.total_pages\" [currentPage]=\"responsibilityCurrentPage\"\n        (selectedPage)=\"responsibilityPageChange($event)\">\n      </app-pagination>\n    </ng-container>\n\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \">\n      <app-no-data *ngIf=\"\n          responsibilitiesData?.responsibilities?.length === 0 &&\n          !responsibilityLoader\n        \" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n      <ng-container *ngIf=\"\n          responsibilitiesData?.responsibilities?.length > 0 &&\n          !responsibilityLoader\n        \">\n        <div class=\"table-header\">\n          <div class=\"table-row\">\n            <div\n              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\">\n              #\n            </div>\n            <div\n              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\">\n              RESPONSIBILITIES\n            </div>\n            <div\n              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-center\">\n              RESPONSIBILITY CENTER\n            </div>\n            <div\n              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 action\">\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <!-- when click on radio then active class should be true -->\n          <ng-container *ngFor=\"\n              let responsibility of responsibilitiesData?.responsibilities;\n              let i = index\n            \">\n            <ng-container *ngIf=\"(responsibilitiesData?.page * responsibilitiesData?.limit -\n            responsibilitiesData?.limit +\n            i +\n            1) as srNo\">\n              <div class=\"table-row\" [class.resp]=\"responsibility?.assigneeDetails?.length === 1\" [class.active]=\"\n                selectedResponsibilityValues?.responsibility?.id === responsibility?.id && responsibility?.assigneeDetails?.length === 1\n              \" [class.with-sub-responsibility]=\"openedResponsibility.includes(responsibility?.id)\">\n                <ng-container *ngIf=\"responsibility?.assigneeDetails as assigneeDetails\">\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"\n                      srNo  \n                    \" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{srNo}}\n                    </div>\n                    <app-cs-radio *ngIf=\"assigneeDetails?.length === 1\" [name]=\"'onCompletion'\" [checked]=\"\n                      selectedResponsibilityValues?.responsibility?.id === responsibility?.id\n                    \"\n                      (checkedEvent)=\"onCompletionChange({eachAssignee: assigneeDetails[0], responsibility})\"></app-cs-radio>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility with-rc\">\n\n                    <div class=\"value vx-fs-12 vx-label-txt vx-pr-5  vx-d-flex vx-align-center\">\n                      <div class=\"avatar-list vx-d-flex vx-align-center\">\n                        <lib-avatar-v2 [avatarList]=\"responsibility?.allAssignee\"\n                          [type]=\"'SINGLE_AVATAR'\"></lib-avatar-v2>\n                      </div>\n\n                      <span class=\"value-text vx-ml-1 resp-name\" [appTooltip]=\"responsibility?.title\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n                        responsibility?.controlId }} {{\n                        responsibility?.title\n                        }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n                    <ng-container *ngIf=\"responsibility?.allRc as rc\">\n                      <div class=\"program-inner vx-d-block\">\n                        <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n                        rc?.length\n                          ? rc[0]?.name\n                          : '--'\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                          {{\n                          rc?.length\n                          ? rc[0]?.name\n                          : \"--\"\n                          }}\n                        </div>\n                        <ng-container *ngIf=\"\n                        rc?.length \n                      \">\n                        </ng-container>\n                      </div>\n                      <button *ngIf=\"rc?.length > 1\" appPopover (click)=\"rcPopup.popover()\" placement=\"right\"\n                        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\">\n                        +{{ rc?.length - 1 }}\n                      </button>\n                      <app-popover #rcPopup>\n                        <div class=\"wf-action-list\">\n                          <ul class=\"action-item\">\n                            <li *ngFor=\"\n                            let data of rc?.slice(\n                              1,\n                              rc?.length\n                            )\n                          \">\n                              <div class=\"avatar-card\">\n                                <div class=\"vx-d-block vx-w-100\">\n                                  <span class=\"value\" [appTooltip]=\"data?.name\" placement=\"bottom-left\" delay=\"0\"\n                                    type=\"black\" [tooltipMandatory]=\"true\">{{ data?.name }}</span>\n                                </div>\n                              </div>\n                            </li>\n                          </ul>\n                        </div>\n                      </app-popover>\n                    </ng-container>\n                  </div>\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                    (click)=\"onToggleResponsibility(responsibility)\">\n                    <ng-container *ngIf=\"assigneeDetails?.length > 1; else closeIcon\">\n                      <i *ngIf=\"\n                        openedResponsibility.includes(responsibility.id);\n                        else closeIcon\n                      \" class=\"icons vx-fs-10\">&#xe9e7;</i>\n                      <ng-template #closeIcon>\n                        <i class=\"icons vx-fs-10\"> &#xe9e8;</i>\n                      </ng-template>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              </div>\n              <lib-sub-responsibility *ngIf=\"openedResponsibility.includes(responsibility.id)\"\n                [responsibility]=\"responsibility\" [srNo]=\"srNo\" [selectedResponsibility]=\"selectedResponsibilityValues\"\n                (onCompletionChange)=\"onCompletionChange($event)\"></lib-sub-responsibility>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-floating-bar [selectedData]=\"[selectedResponsibilityValues?.responsibility]\" [displayElementKey]=\"'title'\"\n      (closeList)=\"back()\" (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!selectedResponsibilityValues?.responsibility?.id\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"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:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::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(100% - 2.75rem);padding:1.5rem .75rem 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-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::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::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(100% - 8rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100% - 10rem)}::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.resp:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row lib-sub-responsibility{position:relative;top:2.5rem;left:0;width:100%;z-index:1;background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;padding:.5rem}::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;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% - 19rem);min-width:calc(100% - 19rem)}::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.responsibility .avatar-list{width:2.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .resp-name{text-overflow:ellipsis;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:14rem;min-width:14rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:3rem;min-width:3rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action.active{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-row.with-sub-responsibility{background:#f9f9fa;margin-bottom:0}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: SubResponsibilityComponent, selector: "lib-sub-responsibility", inputs: ["responsibility", "srNo", "selectedResponsibility"], outputs: ["onCompletionChange"] }, { kind: "component", type: AvatarV2Component, selector: "lib-avatar-v2", inputs: ["avatarList", "type"] }] }); }