vcomply-workflow-engine 2.7.1 → 2.7.3

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

@@ -402,6 +402,7 @@
                 description: ''
             };
             this.programSimplifyFlag = false;
+            this.isResponsibilitySimplifyFlag = false;
             this.animation = true;
             this.workflowList = false;
             this.showMoreOption = true;
@@ -479,6 +480,7 @@
             console.log("addToProgramDetails ===>", this.addToProgramDetails);
             this.programSimplifyFlag = this.feature.isFeatureEnabled('ff_program_simplify');
             this.featureFlag_groups = this.feature.isFeatureEnabled('ff_responsibility_groups');
+            this.isResponsibilitySimplify();
         };
         WorkflowEngineContainerComponent.prototype.setNetworkListner = function () {
             var _this = this;
@@ -833,6 +835,12 @@
             var msg = commonText + (event === 'anyReviewer' ? "If any reviewer had completed the review, the current review due date will be closed and the review status will be updated to 'Completed'." : '');
             this.confirmationAlertConfig = { isVisible: true, message: msg, action: event, };
         };
+        WorkflowEngineContainerComponent.prototype.isResponsibilitySimplify = function () {
+            if (this.feature.isFeatureEnabled('ff_responsibility_simplification')) {
+                this.workflowTypeList[0].workflowName = 'Add a Responsibility';
+                this.workflowTypeList[1].workflowName = 'Add Multiple Responsibilities';
+            }
+        };
         return WorkflowEngineContainerComponent;
     }());
     WorkflowEngineContainerComponent.decorators = [
@@ -3546,6 +3554,8 @@
             this.overseerIds = [];
             this.disableRadioAssignee = [];
             this.isResponsibilitySimplified = false;
+            this.queryParam = '';
+            this.recentResponsibilityUrl = { "byResponsibilities": { "type": ["recent_responsibilities"], "subType": ["CC"] }, "byStatus": { "type": [], "subType": [] }, "filterObject": { "responsibilityCenter": [], "entrustedBy": [], "entrustedTo": [], "riskIds": [], "responsibilityCategory": [] }, "timePeriodDetails": { "type": "", "selectedPeriod": "", "selectedYear": "" }, "status": "" };
             this.url = 'q={"byResponsibilities":{"type":["responsibilities_in_queue"],"subType":["CC"]},"byStatus":{"type":["responsibilities_in_queue"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}';
             this.pickerChanged = new i0.EventEmitter();
             this.populateOption = new i0.EventEmitter();
@@ -5732,7 +5742,8 @@
             }
             else {
                 if (this.isResponsibilitySimplified) {
-                    urlSubstring = 'compliance/manage-responsibility';
+                    this.queryParam = JSON === null || JSON === void 0 ? void 0 : JSON.stringify(this.recentResponsibilityUrl);
+                    urlSubstring = 'compliance/manage-responsibility?q=' + this.queryParam;
                 }
                 else {
                     urlSubstring = 'compliance/manage-responsibilities';
@@ -8270,7 +8281,8 @@
         });
         ;
         MoreOptionComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.isProgramSelected.currentValue !== changes.isProgramSelected.previousValue) {
+            var _a, _b;
+            if (((_a = changes === null || changes === void 0 ? void 0 : changes.isProgramSelected) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes === null || changes === void 0 ? void 0 : changes.isProgramSelected) === null || _b === void 0 ? void 0 : _b.previousValue)) {
                 this.isProgramSelected = changes.isProgramSelected.currentValue;
             }
             if (!this.isRCSelected) {
@@ -12874,8 +12886,8 @@
     FrequencyOnCompletionOfComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-on-completion-of',
-                    template: "<div class=\"frequency-completion\"  *ngIf=\"mode !== 'policy'|| backButton\">\r\n    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">DUE DATE FREQUENCY:</div>\r\n    <div class=\"frequency-completion-inner\">\r\n        <div class=\"frequency-completion-top vx-p-3 vx-d-flex vx-align-center\">\r\n            <input class=\"countNum\" type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n            <div class=\"vx-fs-13 vx-paragraph-txt\">day after completion of</div>\r\n        </div>\r\n        <div class=\"frequency-completion-bottom vx-p-3\">\r\n            <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">RESPONSIBILITY</div>\r\n            <div class=\"vx-d-flex vx-align-center\">\r\n                <ng-container *ngIf=\"featureFlag_on_completion_of\">\r\n                    <div *ngIf=\"featureFlag_on_completion_of && !isSelectedData\" class=\"select-box vx-fs-11 vx-paragraph-txt vx-p-2 vx-pl-3 vx-pr-3 vx-mr-3 vx-d-flex vx-align-center vx-justify-between vx-w-100\" (click)=\"openRadioResponsibility($event)\" >\r\n                        Select a Responsibility\r\n                        <i class=\"icons vx-fs-10\">&#xe9e8;</i>\r\n                        \r\n                    </div>\r\n                    <div *ngIf=\"featureFlag_on_completion_of && isSelectedData\" class=\"after-select-box vx-p-1 vx-mr-3 vx-d-flex vx-align-center vx-justify-between vx-w-100\">\r\n                        <div *ngIf=\"isSelectedData\" class=\"select-chip vx-fs-12 vx-paragraph-txt vx-p-1 vx-pl-2 vx-pr-2 vx-d-flex vx-align-center\">\r\n                            <i  *ngIf=\"isSelectedData\" class=\"icons cross vx-fs-14 vx-mr-1\" (click)=\"remove()\" >&#xe9ae;</i>\r\n                            <span [appTooltip]=\"selectedResponsibilityDetails?.ReportName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{selectedResponsibilityDetails?.ReportName}}</span>\r\n                        </div>\r\n                        <button class=\"edit-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center\" (click)=\"openRadioResponsibility($event)\" ><i class=\"icons vx-mr-1\" (click)=\"openRadioResponsibility($event)\">&#xe90c;</i> EDIT</button>\r\n                    </div>\r\n                    <app-frequency-responsibility-list *ngIf=\"openRadio\"\r\n                        [feature]=\"feature\"\r\n                         [selectedResponsibilityDetails]=\"selectedResponsibilityDetails ? selectedResponsibilityDetails : {}\"\r\n                         (backButton) = \"openRadioResponsibility($event)\"\r\n                         (selectedResponsibility)=\"onResponsibilitySelection($event)\" ></app-frequency-responsibility-list>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!featureFlag_on_completion_of\">\r\n                    <cs-select [class.disabled]=\"placeholder === 'Loading...'\" [(ngModel)]=\"selectedResponsibilityDetails\" (valueChanged)=\"onResponsibilitySelection($event)\" [placeholder]=\"placeholder\">\r\n                        <cs-option  *ngFor=\"let responsibility of onCompletionOfResponsibility; let i  = index;\" [value]=\"responsibility\" [optionTooltip]=\"responsibility?.ReportName\">{{responsibility?.ReportName}}</cs-option>\r\n                    </cs-select>\r\n                </ng-container>\r\n            \r\n                <div class=\"time-picker-group vx-d-flex\" *ngIf=\"!openRadio\" >\r\n                    <div class=\"time-field\">\r\n                        <input class=\"input\" placeholder=\"11:59 PM\" />\r\n                        <!-- <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i></div> -->\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-frequency-due-date\r\n        [id] = '3'\r\n        [pageName]=\"'onCompletion'\"\r\n        [mode]=\"mode\"\r\n        [isDeactivated]=\"false\"\r\n        [completedValue]=\"onCompletionOfWindow\"\r\n        [notCompletedValue]=\"onCompletionOfFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-on-completion-of\">\r\n    <div class=\"frequency-on-completion-of-message\">\r\n        <input type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n        <p>{{onCompletionOfInput > 1 ?'days': 'day'}} after completion of</p>\r\n    </div>\r\n    <div class=\"frequency-on-completion-of-row\">\r\n        <div class=\"responsibility\">\r\n            <cs-select [class.disabled]=\"placeholder === 'Loading...'\" [(ngModel)]=\"selectedResponsibilityDetails\" (valueChanged)=\"onResponsibilitySelection($event)\" [placeholder]=\"placeholder\">\r\n                <cs-option  *ngFor=\"let responsibility of onCompletionOfResponsibility; let i  = index;\" [value]=\"responsibility\" [optionTooltip]=\"responsibility?.ReportName\">{{responsibility?.ReportName}}</cs-option>\r\n            </cs-select>\r\n        </div>\r\n        <div class=\"time\">\r\n            <input type=\"text\" readonly aria-label=\"12hr format\" [(ngModel)]=\"onCompletionOfTime\" placeholder=\"Select Time\">\r\n            <!-- <i class=\"icons\">&#xe955;</i> -->\r\n            <!-- <ngx-material-timepicker (timeChanged)=\"onTimeChanged($event)\" #dailyTime></ngx-material-timepicker> -->\r\n        </div>\r\n    </div>\r\n    <app-frequency-due-date\r\n        [id] = '3'\r\n        [pageName]=\"'onCompletion'\"\r\n        [mode]=\"mode\"\r\n        [isDeactivated]=\"false\"\r\n        [completedValue]=\"onCompletionOfWindow\"\r\n        [notCompletedValue]=\"onCompletionOfFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n\r\n",
-                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .frequency-completion-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-completion-top input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #dbdbdb;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem 0 0;outline:none}::ng-deep .frequency-completion-top input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-completion-top input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-completion-bottom{border-top:1px solid #f1f1f1}::ng-deep .frequency-completion-bottom .select-box{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2rem}::ng-deep .frequency-completion-bottom .after-select-box{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;height:2rem}::ng-deep .frequency-completion-bottom .after-select-box .select-chip{background:#fff;border-radius:.125rem;box-shadow:0 2px 4px #1e5dd31a}::ng-deep .frequency-completion-bottom .after-select-box .select-chip .cross{cursor:pointer}::ng-deep .frequency-completion-bottom .after-select-box .select-chip span{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:9rem}::ng-deep .frequency-completion-bottom .after-select-box button.edit-btn{background:#fff;border-radius:.125rem;border:1px solid #f1f1f1;height:1.5rem}::ng-deep .frequency-completion-bottom cs-select{width:100%;margin-right:.75rem}::ng-deep .frequency-completion-bottom cs-select .selection-wrap .input-group input.value{height:2rem!important;font-size:11px!important}::ng-deep .frequency-completion-bottom .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-completion-bottom .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #dbdbdb;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1}::ng-deep .frequency-completion-bottom .time-picker-group input::-moz-placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group input:-ms-input-placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group .time-field{position:relative}::ng-deep .frequency-completion-bottom .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}"]
+                    template: "<div class=\"frequency-completion\"  *ngIf=\"mode !== 'policy'|| backButton\">\r\n    <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">DUE DATE FREQUENCY:</div>\r\n    <div class=\"frequency-completion-inner\">\r\n        <div class=\"frequency-completion-top vx-p-3 vx-d-flex vx-align-center\">\r\n            <input class=\"countNum\" type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n            <div class=\"vx-fs-13 vx-paragraph-txt\">day after completion of</div>\r\n        </div>\r\n        <div class=\"frequency-completion-bottom vx-p-3\">\r\n            <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">RESPONSIBILITY</div>\r\n            <div class=\"vx-d-flex vx-align-center\">\r\n                <ng-container *ngIf=\"featureFlag_on_completion_of\">\r\n                    <div *ngIf=\"featureFlag_on_completion_of && !isSelectedData\" [class.disabled]=\"placeholder === 'Loading...'\" class=\"select-box vx-fs-11 vx-paragraph-txt vx-p-2 vx-pl-3 vx-pr-3 vx-mr-3 vx-d-flex vx-align-center vx-justify-between vx-w-100\" (click)=\"openRadioResponsibility($event)\" >\r\n                        {{placeholder === 'Loading...' ? 'Loading...' : 'Select a Responsibility'}}\r\n                        <i class=\"icons vx-fs-10\">&#xe9e8;</i>\r\n                        \r\n                    </div>\r\n                    <div *ngIf=\"featureFlag_on_completion_of && isSelectedData\" class=\"after-select-box vx-p-1 vx-mr-3 vx-d-flex vx-align-center vx-justify-between vx-w-100\">\r\n                        <div *ngIf=\"isSelectedData\" class=\"select-chip vx-fs-12 vx-paragraph-txt vx-p-1 vx-pl-2 vx-pr-2 vx-d-flex vx-align-center\">\r\n                            <i  *ngIf=\"isSelectedData\" class=\"icons cross vx-fs-14 vx-mr-1\" (click)=\"remove()\" >&#xe9ae;</i>\r\n                            <span [appTooltip]=\"selectedResponsibilityDetails?.ReportName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{selectedResponsibilityDetails?.ReportName}}</span>\r\n                        </div>\r\n                        <button class=\"edit-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center\" (click)=\"openRadioResponsibility($event)\" ><i class=\"icons vx-mr-1\" (click)=\"openRadioResponsibility($event)\">&#xe90c;</i> EDIT</button>\r\n                    </div>\r\n                    <app-frequency-responsibility-list *ngIf=\"openRadio\"\r\n                        [feature]=\"feature\"\r\n                         [selectedResponsibilityDetails]=\"selectedResponsibilityDetails ? selectedResponsibilityDetails : {}\"\r\n                         (backButton) = \"openRadioResponsibility($event)\"\r\n                         (selectedResponsibility)=\"onResponsibilitySelection($event)\" ></app-frequency-responsibility-list>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!featureFlag_on_completion_of\">\r\n                    <cs-select [class.disabled]=\"placeholder === 'Loading...'\" [(ngModel)]=\"selectedResponsibilityDetails\" (valueChanged)=\"onResponsibilitySelection($event)\" [placeholder]=\"placeholder\">\r\n                        <cs-option  *ngFor=\"let responsibility of onCompletionOfResponsibility; let i  = index;\" [value]=\"responsibility\" [optionTooltip]=\"responsibility?.ReportName\">{{responsibility?.ReportName}}</cs-option>\r\n                    </cs-select>\r\n                </ng-container>\r\n            \r\n                <div class=\"time-picker-group vx-d-flex\" *ngIf=\"!openRadio\" >\r\n                    <div class=\"time-field\">\r\n                        <input class=\"input\" placeholder=\"11:59 PM\" />\r\n                        <!-- <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i></div> -->\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-frequency-due-date\r\n        [id] = '3'\r\n        [pageName]=\"'onCompletion'\"\r\n        [mode]=\"mode\"\r\n        [isDeactivated]=\"false\"\r\n        [completedValue]=\"onCompletionOfWindow\"\r\n        [notCompletedValue]=\"onCompletionOfFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-on-completion-of\">\r\n    <div class=\"frequency-on-completion-of-message\">\r\n        <input type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n        <p>{{onCompletionOfInput > 1 ?'days': 'day'}} after completion of</p>\r\n    </div>\r\n    <div class=\"frequency-on-completion-of-row\">\r\n        <div class=\"responsibility\">\r\n            <cs-select [class.disabled]=\"placeholder === 'Loading...'\" [(ngModel)]=\"selectedResponsibilityDetails\" (valueChanged)=\"onResponsibilitySelection($event)\" [placeholder]=\"placeholder\">\r\n                <cs-option  *ngFor=\"let responsibility of onCompletionOfResponsibility; let i  = index;\" [value]=\"responsibility\" [optionTooltip]=\"responsibility?.ReportName\">{{responsibility?.ReportName}}</cs-option>\r\n            </cs-select>\r\n        </div>\r\n        <div class=\"time\">\r\n            <input type=\"text\" readonly aria-label=\"12hr format\" [(ngModel)]=\"onCompletionOfTime\" placeholder=\"Select Time\">\r\n            <!-- <i class=\"icons\">&#xe955;</i> -->\r\n            <!-- <ngx-material-timepicker (timeChanged)=\"onTimeChanged($event)\" #dailyTime></ngx-material-timepicker> -->\r\n        </div>\r\n    </div>\r\n    <app-frequency-due-date\r\n        [id] = '3'\r\n        [pageName]=\"'onCompletion'\"\r\n        [mode]=\"mode\"\r\n        [isDeactivated]=\"false\"\r\n        [completedValue]=\"onCompletionOfWindow\"\r\n        [notCompletedValue]=\"onCompletionOfFailed\"\r\n        (valueChange)=\"onValueChange($event)\"\r\n    ></app-frequency-due-date>\r\n</div>\r\n\r\n",
+                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .frequency-completion-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-completion-top input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #dbdbdb;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem 0 0;outline:none}::ng-deep .frequency-completion-top input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-completion-top input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-completion-bottom{border-top:1px solid #f1f1f1}::ng-deep .frequency-completion-bottom .select-box{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2rem}::ng-deep .frequency-completion-bottom .select-box.disabled{pointer-events:none;opacity:.5}::ng-deep .frequency-completion-bottom .after-select-box{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;height:2rem}::ng-deep .frequency-completion-bottom .after-select-box .select-chip{background:#fff;border-radius:.125rem;box-shadow:0 2px 4px #1e5dd31a}::ng-deep .frequency-completion-bottom .after-select-box .select-chip .cross{cursor:pointer}::ng-deep .frequency-completion-bottom .after-select-box .select-chip span{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:9rem}::ng-deep .frequency-completion-bottom .after-select-box button.edit-btn{background:#fff;border-radius:.125rem;border:1px solid #f1f1f1;height:1.5rem}::ng-deep .frequency-completion-bottom cs-select{width:100%;margin-right:.75rem}::ng-deep .frequency-completion-bottom cs-select .selection-wrap .input-group input.value{height:2rem!important;font-size:11px!important}::ng-deep .frequency-completion-bottom .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-completion-bottom .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #dbdbdb;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1}::ng-deep .frequency-completion-bottom .time-picker-group input::-moz-placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group input:-ms-input-placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group .time-field{position:relative}::ng-deep .frequency-completion-bottom .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}"]
                 },] }
     ];
     FrequencyOnCompletionOfComponent.ctorParameters = function () { return [
@@ -13374,6 +13386,8 @@
             this.url = 'q={"byResponsibilities":{"type":["responsibilities_in_queue"],"subType":["CC"]},"byStatus":{"type":["responsibilities_in_queue"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}';
             this.isNotificationPending = 0;
             this.closeAddMultipleResponsibility = new i0.EventEmitter();
+            this.queryParam = '';
+            this.recentResponsibilityUrl = { "byResponsibilities": { "type": ["recent_responsibilities"], "subType": ["CC"] }, "byStatus": { "type": [], "subType": [] }, "filterObject": { "responsibilityCenter": [], "entrustedBy": [], "entrustedTo": [], "riskIds": [], "responsibilityCategory": [] }, "timePeriodDetails": { "type": "", "selectedPeriod": "", "selectedYear": "" }, "status": "" };
             this.responsibilityBulkUpload = {
                 header: [],
                 reports: [],
@@ -14072,7 +14086,8 @@
             }
             else {
                 if (this.featureflag) {
-                    urlSubstring = 'compliance/manage-responsibility';
+                    this.queryParam = JSON === null || JSON === void 0 ? void 0 : JSON.stringify(this.recentResponsibilityUrl);
+                    urlSubstring = 'compliance/manage-responsibility?q=' + this.queryParam;
                 }
                 else {
                     urlSubstring = 'compliance/manage-responsibilities';
@@ -32889,6 +32904,8 @@
             this.disconnectRefresh = new i0.EventEmitter();
             this.isNotificationPending = 0;
             this.closeAddMultipleResponsibility = new i0.EventEmitter();
+            this.queryParam = '';
+            this.recentResponsibilityUrl = { "byResponsibilities": { "type": ["recent_responsibilities"], "subType": ["CC"] }, "byStatus": { "type": [], "subType": [] }, "filterObject": { "responsibilityCenter": [], "entrustedBy": [], "entrustedTo": [], "riskIds": [], "responsibilityCategory": [] }, "timePeriodDetails": { "type": "", "selectedPeriod": "", "selectedYear": "" }, "status": "" };
             this.url = 'q={"byResponsibilities":{"type":["responsibilities_in_queue"],"subType":["CC"]},"byStatus":{"type":["responsibilities_in_queue"],"subType":[]},"filterObject":{"responsibilityCenter":[],"entrustedBy":[],"entrustedTo":[],"riskIds":[],"responsibilityCategory":[]},"timePeriodDetails":{"type":"","selectedPeriod":"","selectedYear":""},"status":""}';
             this.responsibilityBulkUpload = {
                 header: [],
@@ -33605,7 +33622,8 @@
             }
             else {
                 if (this.featureflag) {
-                    urlSubstring = 'compliance/manage-responsibility';
+                    this.queryParam = JSON === null || JSON === void 0 ? void 0 : JSON.stringify(this.recentResponsibilityUrl);
+                    urlSubstring = 'compliance/manage-responsibility?q=' + this.queryParam;
                 }
                 else {
                     urlSubstring = 'compliance/manage-responsibilities';
@@ -34422,7 +34440,7 @@
     FrequencyResponsibilityListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-frequency-responsibility-list',
-                    template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\r\n    <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\r\n        <div class=\"vx-d-flex vx-align-center\">\r\n            <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\" >&#xe91d;</i>\r\n            <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"frequency-responsibility-list-body\">\r\n        <div class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"  >\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 1\" (click)=\"onClickTabChange(responsibilityTabs[0])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">REGULATIONS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{regulationCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 2\" (click)=\"onClickTabChange(responsibilityTabs[1])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">STANDARDS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{standardsCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 3\"(click)=\"onClickTabChange(responsibilityTabs[2])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">INTERNAL CONTROLS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{internalsCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 0\" (click)=\"onClickTabChange(responsibilityTabs[3])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">OTHERS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{othersCount}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"frequency-responsibility-list-search vx-mb-2\">\r\n            <i class=\"icons vx-fs-12\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\" placeholder=\"Search Responsibilities\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\" [start]=\"responsibilitiesData?.responsibilities_from\"\r\n            [end]=\"responsibilitiesData?.responsibilities_to\" [total]=\"responsibilitiesData?.total_responsibilities\" \r\n            [pageCount]=\"responsibilitiesData?.total_pages\" [currentPage]=\"responsibilityCurrentPage\"\r\n            (selectedPage)=\"responsibilityPageChange($event)\" >\r\n        </app-pagination>\r\n        <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\r\n        <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"true\">\r\n            <app-no-data *ngIf=\"responsibilitiesData?.data?.length === 0 && !responsibilityLoader \" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data to Display'\"></app-no-data>\r\n            <ng-container *ngIf=\"responsibilitiesData?.data?.length > 0 && !responsibilityLoader\">\r\n            <div class=\"table-header\">\r\n                <div class=\"table-row\">\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">#</div>\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">RESPONSIBILITIES</div>\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\">PROGRAMS</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"table-body\">\r\n\r\n                <!-- when click on radio then active class should be true -->\r\n                <div class=\"table-row\" [class.active]=\"selectedResponsibilityId?.includes(responsibility?.ReportId)\" *ngFor=\"let responsibility of responsibilitiesData?.data; let i = index\">\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                        <div class=\"sr-no\" [appTooltip]=\"responsibilitiesData?.responsibilities_from + i\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibilitiesData?.responsibilities_from + i}}</div>\r\n                        <app-cs-radio  [name]=\"'responsibility'\" [checked]=\"selectedResponsibilityId?.includes(responsibility?.ReportId)\"\r\n                        (checkedEvent)=\"selectResponsibility(responsibility)\"></app-cs-radio>\r\n                    </div>\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">\r\n                        <div class=\"value vx-fs-12 vx-label-txt vx-pr-5\" [appTooltip]=\"responsibility?.ReportName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.ControlId}} {{responsibility?.ReportName}}</div>\r\n                    </div>\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\">\r\n                        <div class=\"program-inner vx-d-block\">\r\n                            <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"responsibility?.category_details_array[0]?.category_name ?? '--'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.category_name ?? '--'}}</div>\r\n                            <div *ngIf=\"responsibility?.category_details_array[0]?.parent_category_name?.length\" class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\r\n                                <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\">Within</div>\r\n                                <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')}}</div>\r\n                              </div>\r\n                        </div>\r\n                        <button *ngIf=\"responsibility?.category_details_array?.length >= 2\" appPopover (click)=\"programPopup.popover()\" placement=\"right\" class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">+{{responsibility?.category_details_array?.length - 1}}</button>\r\n                        <app-popover #programPopup>\r\n                            <div class=\"action-list\">\r\n                              <ul class=\"action-item\">\r\n                                <li *ngFor=\"let subCategory of responsibility?.category_details_array | slice : 1\">\r\n                                  <div class=\"avatar-card\">\r\n                                      <div class=\"vx-d-block vx-w-100\">\r\n                                          <span class=\"value\" [appTooltip]=\"subCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{subCategory?.category_name}}</span>\r\n                                          <div *ngIf=\"responsibility?.category_details_array[0]?.parent_category_name?.length\" class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\r\n                                            <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\">Within</div>\r\n                                            <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')}}</div>\r\n                                        </div>\r\n                                      </div>\r\n                                  </div>\r\n                                </li>\r\n                              </ul>\r\n                            </div>\r\n                        </app-popover>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n        </div>\r\n        <app-floating-bar [selectedData]=\"(isValidObj) ? [selectedResponsibilityValues]:[]\" [displayElementKey]=\"'ReportName'\" (closeList)=\"back()\"  (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\" [isDisabled]=\"!isValidObj\" ></app-floating-bar>\r\n    </div>\r\n</div>",
+                    template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\r\n    <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\r\n        <div class=\"vx-d-flex vx-align-center\">\r\n            <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\" >&#xe91d;</i>\r\n            <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"frequency-responsibility-list-body\">\r\n        <app-loader-inline *ngIf=\"othersCount === 0\"></app-loader-inline>\r\n        <div *ngIf=\"othersCount !== 0\" class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"  >\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 1\" (click)=\"onClickTabChange(responsibilityTabs[0])\" >\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">REGULATIONS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{regulationCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 2\" (click)=\"onClickTabChange(responsibilityTabs[1])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">STANDARDS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{standardsCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 3\"(click)=\"onClickTabChange(responsibilityTabs[2])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">INTERNAL CONTROLS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{internalsCount}}</span>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"currentTab === 0\" (click)=\"onClickTabChange(responsibilityTabs[3])\" [class.pointer-none]=\"responsibilityLoader\">\r\n                <div class=\"left vx-d-block vx-w-100\">\r\n                    <div class=\"label vx-d-flex vx-align-center\">\r\n                        <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">OTHERS</label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n                    <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{othersCount}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"frequency-responsibility-list-search vx-mb-2\">\r\n            <i class=\"icons vx-fs-12\">&#xe90b;</i>\r\n            <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\" placeholder=\"Search Responsibilities\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"!responsibilityLoader && othersCount !== 0 && responsibilitiesData?.total_pages > 1\" [start]=\"responsibilitiesData?.responsibilities_from\"\r\n            [end]=\"responsibilitiesData?.responsibilities_to\" [total]=\"responsibilitiesData?.total_responsibilities\" \r\n            [pageCount]=\"responsibilitiesData?.total_pages\" [currentPage]=\"responsibilityCurrentPage\"\r\n            (selectedPage)=\"responsibilityPageChange($event)\" >\r\n        </app-pagination>\r\n        <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\r\n        <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"true\">\r\n            <app-no-data *ngIf=\"responsibilitiesData?.data?.length === 0 && !responsibilityLoader\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data to Display'\"></app-no-data>\r\n            <ng-container *ngIf=\"responsibilitiesData?.data?.length > 0 && !responsibilityLoader && othersCount !== 0\">\r\n            <div class=\"table-header\">\r\n                <div class=\"table-row\">\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">#</div>\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">RESPONSIBILITIES</div>\r\n                    <div class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\">PROGRAMS</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"table-body\">\r\n\r\n                <!-- when click on radio then active class should be true -->\r\n                <div class=\"table-row\" [class.active]=\"selectedResponsibilityId?.includes(responsibility?.ReportId)\" *ngFor=\"let responsibility of responsibilitiesData?.data; let i = index\">\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n                        <div class=\"sr-no\" [appTooltip]=\"responsibilitiesData?.responsibilities_from + i\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibilitiesData?.responsibilities_from + i}}</div>\r\n                        <app-cs-radio  [name]=\"'responsibility'\" [checked]=\"selectedResponsibilityId?.includes(responsibility?.ReportId)\"\r\n                        (checkedEvent)=\"selectResponsibility(responsibility)\"></app-cs-radio>\r\n                    </div>\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">\r\n                        <div class=\"value vx-fs-12 vx-label-txt vx-pr-5\" [appTooltip]=\"responsibility?.ReportName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.ControlId}} {{responsibility?.ReportName}}</div>\r\n                    </div>\r\n                    <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center program\">\r\n                        <div class=\"program-inner vx-d-block\">\r\n                            <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"responsibility?.category_details_array[0]?.category_name ?? '--'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.category_name ?? '--'}}</div>\r\n                            <div *ngIf=\"responsibility?.category_details_array[0]?.parent_category_name?.length\" class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\r\n                                <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\">Within</div>\r\n                                <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')}}</div>\r\n                              </div>\r\n                        </div>\r\n                        <button *ngIf=\"responsibility?.category_details_array?.length >= 2\" appPopover (click)=\"programPopup.popover()\" placement=\"right\" class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">+{{responsibility?.category_details_array?.length - 1}}</button>\r\n                        <app-popover #programPopup>\r\n                            <div class=\"action-list\">\r\n                              <ul class=\"action-item\">\r\n                                <li *ngFor=\"let subCategory of responsibility?.category_details_array | slice : 1\">\r\n                                  <div class=\"avatar-card\">\r\n                                      <div class=\"vx-d-block vx-w-100\">\r\n                                          <span class=\"value\" [appTooltip]=\"subCategory?.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{subCategory?.category_name}}</span>\r\n                                          <div *ngIf=\"responsibility?.category_details_array[0]?.parent_category_name?.length\" class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\r\n                                            <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3 vx-txt-blue\">Within</div>\r\n                                            <div class=\"within-value vx-fs-11 vx-paragraph-txt\" [appTooltip]=\"responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{responsibility?.category_details_array[0]?.parent_category_name?.slice()?.reverse()?.join(' < ')}}</div>\r\n                                        </div>\r\n                                      </div>\r\n                                  </div>\r\n                                </li>\r\n                              </ul>\r\n                            </div>\r\n                        </app-popover>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n        </div>\r\n        <app-floating-bar *ngIf=\"othersCount !== 0\" [selectedData]=\"(isValidObj) ? [selectedResponsibilityValues]:[]\" [displayElementKey]=\"'ReportName'\" (closeList)=\"back()\"  (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\" [isDisabled]=\"!isValidObj\" ></app-floating-bar>\r\n    </div>\r\n</div>",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\");::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:31.25rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::-moz-placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search input:-ms-input-placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 17.5rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 19.5rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 22rem);min-width:calc(100% - 22rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program{width:20rem;min-width:20rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.program button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}@-webkit-keyframes animate-right{0%{transform:translateX(5px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes animate-right{0%{transform:translateX(5px);opacity:0}to{transform:translateX(0);opacity:1}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}"]
                 },] }
     ];