vcomply-workflow-engine 6.1.72 → 6.1.73

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']