vcomply-workflow-engine 6.1.46 → 6.1.47

package/fesm2022/vcomply-workflow-engine.mjs

@@ -29000,20 +29000,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class AvatarV2Component {
     constructor(config) {
         this.avatarList = [];
+        this.type = 'MULTI_AVATAR';
         this.imagePath = '';
+        this.sliceCount = 3;
+        this.popoverSliceCount = 3;
+        this.showPopover = false;
         this.env = config?.envConfig;
         this.imagePath = this.env?.s3Url + this.env?.s3Bucket + '/profile_pic/thumb/';
     }
+    ngOnInit() {
+        console.log('avatarList', this.avatarList);
+        this.getSliceCount();
+    }
+    getSliceCount() {
+        if (this.type === 'SINGLE_AVATAR' && this.avatarList?.length > 1) {
+            this.sliceCount = 0;
+            this.popoverSliceCount = 0;
+            this.showPopover = true;
+        }
+        else {
+            if (this.avatarList?.length > 3) {
+                this.showPopover = true;
+            }
+            else {
+                this.showPopover = false;
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarV2Component, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarV2Component, isStandalone: true, selector: "lib-avatar-v2", inputs: { avatarList: "avatarList" }, ngImport: i0, template: "<div class=\"vx-avatar md vx-d-flex vx-align-center\">\n\n    <ng-container *ngFor=\"let eachAvatar of avatarList | slice:0:3\">\n        <div class=\" shortName vx-p-3\">\n            <img *ngIf=\"eachAvatar?.imagePath; else avatar\" [src]=\"imagePath + eachAvatar?.imagePath\"\n                [alt]=\"eachAvatar?.shortName\" [appTooltip]=\"eaeachAvatar?.name\" placement=\"bottom-left\" delay=\"0\"\n                type=\"black\" [tooltipMandatory]=\"true\" />\n            <ng-template #avatar>\n                <span *ngIf=\"!eachAvatar?.avatar\" [appTooltip]=\"eachAvatar?.name\" placement=\"bottom-left\" delay=\"0\"\n                    type=\"black\" [tooltipMandatory]=\"true\">{{ eachAvatar?.shortName\n                    }}</span>\n            </ng-template>\n        </div>\n\n    </ng-container>\n\n    <span *ngIf=\"avatarList?.length > 3\" appPopover (click)=\"users.popover()\" placement=\"left\">+{{ avatarList?.length-\n        1 }}</span>\n\n\n</div>\n\n<app-popover #users>\n    <div class=\"wf-action-list\">\n        <ul class=\"action-item\">\n            <li *ngFor=\"let user of avatarList | slice: 3\" appTooltip=\"{{ user?.name }}\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                <div class=\"avatar-card\">\n                    <div class=\"avatar\">\n                        <ng-container *ngIf=\"!user?.avatar\">{{\n                            user?.shortName\n                            }}</ng-container>\n                        <img *ngIf=\"user?.avatar\" [src]=\"user?.avatar\" alt=\"\" width=\"24\" height=\"24\" />\n                    </div>\n                    <span class=\"value\">{{ user?.name }}</span>\n                </div>\n            </li>\n        </ul>\n    </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";.shortName{height:24px;width:24px!important;overflow:hidden;color:#fff;font-size:10px;border-radius:50%;text-transform:uppercase;background:#1e5dd3}\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: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarV2Component, isStandalone: true, selector: "lib-avatar-v2", inputs: { avatarList: "avatarList", type: "type" }, ngImport: i0, template: "<div class=\"vx-avatar-group \">\n\n    <ng-container *ngFor=\"let eachAvatar of avatarList | slice:0:sliceCount\">\n        <div class=\"vx-avatar md\">\n            <img *ngIf=\"eachAvatar?.imagePath; else avatar\" [src]=\"imagePath + eachAvatar?.imagePath\"\n                [alt]=\"eachAvatar?.shortName\" [appTooltip]=\"eaeachAvatar?.name\" placement=\"bottom-left\" delay=\"0\"\n                type=\"black\" [tooltipMandatory]=\"true\" />\n            <ng-template #avatar>\n                <span *ngIf=\"!eachAvatar?.avatar\" [appTooltip]=\"eachAvatar?.name\" [tooltipMandatory]=\"true\"\n                    class=\"blue\">{{ eachAvatar?.shortName\n                    }}</span>\n            </ng-template>\n        </div>\n\n    </ng-container>\n    <div *ngIf=\"showPopover \" appPopover (click)=\"users.popover()\" placement=\"left\" class=\"vx-avatar md multi-user\">\n        <span class=\"user\">\n            <i class=\"icons user-icons vx-fs-12\">&#xea35;</i>\n            <span class=\"count vx-txt-white vx-d-flex vx-align-center vx-justify-center\">{{ avatarList?.length -\n                popoverSliceCount\n                }}</span>\n        </span>\n    </div>\n\n\n</div>\n\n<app-popover #users>\n    <div class=\"wf-action-list\">\n        <ul class=\"action-item\">\n            <li *ngFor=\"let user of avatarList | slice: popoverSliceCount\" appTooltip=\"{{ user?.name }}\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                <div class=\"avatar-card\">\n                    <div class=\"avatar\">\n                        <ng-container *ngIf=\"!user?.avatar\">{{\n                            user?.shortName\n                            }}</ng-container>\n                        <img *ngIf=\"user?.avatar\" [src]=\"user?.avatar\" alt=\"\" width=\"24\" height=\"24\" />\n                    </div>\n                    <span class=\"value\">{{ user?.name }}</span>\n                </div>\n            </li>\n        </ul>\n    </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";.multi-user{background:#f9f9fa;border:2px solid #F2F2F5}.multi-user .user{background:transparent;position:relative;cursor:pointer}.multi-user .user .user-icons{color:#565a6f;position:absolute}.multi-user .user .count{background:#1e5dd3;border:2px solid #FFFFFF;border-radius:20px;min-width:1.125rem;height:1rem;position:absolute;top:unset;bottom:-.125rem;right:-10px;width:auto;padding:0 .125rem;font-size:9px}\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: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-avatar-v2', standalone: true, imports: [CommonModule, PopoverModule], template: "<div class=\"vx-avatar md vx-d-flex vx-align-center\">\n\n    <ng-container *ngFor=\"let eachAvatar of avatarList | slice:0:3\">\n        <div class=\" shortName vx-p-3\">\n            <img *ngIf=\"eachAvatar?.imagePath; else avatar\" [src]=\"imagePath + eachAvatar?.imagePath\"\n                [alt]=\"eachAvatar?.shortName\" [appTooltip]=\"eaeachAvatar?.name\" placement=\"bottom-left\" delay=\"0\"\n                type=\"black\" [tooltipMandatory]=\"true\" />\n            <ng-template #avatar>\n                <span *ngIf=\"!eachAvatar?.avatar\" [appTooltip]=\"eachAvatar?.name\" placement=\"bottom-left\" delay=\"0\"\n                    type=\"black\" [tooltipMandatory]=\"true\">{{ eachAvatar?.shortName\n                    }}</span>\n            </ng-template>\n        </div>\n\n    </ng-container>\n\n    <span *ngIf=\"avatarList?.length > 3\" appPopover (click)=\"users.popover()\" placement=\"left\">+{{ avatarList?.length-\n        1 }}</span>\n\n\n</div>\n\n<app-popover #users>\n    <div class=\"wf-action-list\">\n        <ul class=\"action-item\">\n            <li *ngFor=\"let user of avatarList | slice: 3\" appTooltip=\"{{ user?.name }}\" placement=\"bottom-left\"\n                delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                <div class=\"avatar-card\">\n                    <div class=\"avatar\">\n                        <ng-container *ngIf=\"!user?.avatar\">{{\n                            user?.shortName\n                            }}</ng-container>\n                        <img *ngIf=\"user?.avatar\" [src]=\"user?.avatar\" alt=\"\" width=\"24\" height=\"24\" />\n                    </div>\n                    <span class=\"value\">{{ user?.name }}</span>\n                </div>\n            </li>\n        </ul>\n    </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";.shortName{height:24px;width:24px!important;overflow:hidden;color:#fff;font-size:10px;border-radius:50%;text-transform:uppercase;background:#1e5dd3}\n"] }]
+            args: [{ selector: 'lib-avatar-v2', standalone: true, imports: [CommonModule, PopoverModule], template: "<div class=\"vx-avatar-group \">\n\n    <ng-container *ngFor=\"let eachAvatar of avatarList | slice:0:sliceCount\">\n        <div class=\"vx-avatar md\">\n            <img *ngIf=\"eachAvatar?.imagePath; else avatar\" [src]=\"imagePath + eachAvatar?.imagePath\"\n                [alt]=\"eachAvatar?.shortName\" [appTooltip]=\"eaeachAvatar?.name\" placement=\"bottom-left\" delay=\"0\"\n                type=\"black\" [tooltipMandatory]=\"true\" />\n            <ng-template #avatar>\n                <span *ngIf=\"!eachAvatar?.avatar\" [appTooltip]=\"eachAvatar?.name\" [tooltipMandatory]=\"true\"\n                    class=\"blue\">{{ eachAvatar?.shortName\n                    }}</span>\n            </ng-template>\n        </div>\n\n    </ng-container>\n    <div *ngIf=\"showPopover \" appPopover (click)=\"users.popover()\" placement=\"left\" class=\"vx-avatar md multi-user\">\n        <span class=\"user\">\n            <i class=\"icons user-icons vx-fs-12\">&#xea35;</i>\n            <span class=\"count vx-txt-white vx-d-flex vx-align-center vx-justify-center\">{{ avatarList?.length -\n                popoverSliceCount\n                }}</span>\n        </span>\n    </div>\n\n\n</div>\n\n<app-popover #users>\n    <div class=\"wf-action-list\">\n        <ul class=\"action-item\">\n            <li *ngFor=\"let user of avatarList | slice: popoverSliceCount\" appTooltip=\"{{ user?.name }}\"\n                placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                <div class=\"avatar-card\">\n                    <div class=\"avatar\">\n                        <ng-container *ngIf=\"!user?.avatar\">{{\n                            user?.shortName\n                            }}</ng-container>\n                        <img *ngIf=\"user?.avatar\" [src]=\"user?.avatar\" alt=\"\" width=\"24\" height=\"24\" />\n                    </div>\n                    <span class=\"value\">{{ user?.name }}</span>\n                </div>\n            </li>\n        </ul>\n    </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";.multi-user{background:#f9f9fa;border:2px solid #F2F2F5}.multi-user .user{background:transparent;position:relative;cursor:pointer}.multi-user .user .user-icons{color:#565a6f;position:absolute}.multi-user .user .count{background:#1e5dd3;border:2px solid #FFFFFF;border-radius:20px;min-width:1.125rem;height:1rem;position:absolute;top:unset;bottom:-.125rem;right:-10px;width:auto;padding:0 .125rem;font-size:9px}\n"] }]
         }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { avatarList: [{
                 type: Input
+            }], type: [{
+                type: Input
             }] } });
 
 class SubResponsibilityComponent {
@@ -29022,7 +29047,7 @@ class SubResponsibilityComponent {
         this.onCompletionChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubResponsibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubResponsibilityComponent, isStandalone: true, selector: "lib-sub-responsibility", inputs: { responsibility: "responsibility", srNo: "srNo" }, outputs: { onCompletionChange: "onCompletionChange" }, ngImport: i0, template: "<div class=\"sub-responsibility vx-mb-1\">\n    <div class=\"vc-table-row\" *ngFor=\"let eachAssignee of responsibility?.assigneeDetails; let i = index\">\n        <div class=\"vc-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n            <div class=\"sr-no\" [appTooltip]=\"srNo + '.' + i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\"\n                [tooltipMandatory]=\"true\">\n                {{ srNo + '.' +(i + 1) }}\n            </div>\n            <app-cs-radio [name]=\"'onCompletion'\" [checked]=\"\n          \" (checkedEvent)=\"onCompletionChange.emit({eachAssignee, responsibility})\"></app-cs-radio>\n        </div>\n        <div class=\"vc-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vc-title\">\n            <lib-avatar-v2 [avatarList]=\"eachAssignee?.assigneeInfo\"></lib-avatar-v2>\n            <div *ngIf=\"eachAssignee?.assigneeInfo?.length === 1\" class=\"value vx-fs-12 vx-label-txt vx-pr-5 vx-ml-2\"\n                [appTooltip]=\"eachAssignee?.assigneeInfo[0]?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                [tooltipMandatory]=\"true\">\n                {{ eachAssignee?.assigneeInfo[0]?.name }}\n            </div>\n        </div>\n        <div class=\"vc-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center rc\">\n            <div class=\"rc-inner vx-d-block\">\n                <div class=\"rc-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n              eachAssignee?.responsibilityCenterInfo?.length\n                ? eachAssignee?.responsibilityCenterInfo[0]?.name\n                : '--'\n            \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                    {{\n                    eachAssignee?.responsibilityCenterInfo?.length\n                    ? eachAssignee?.responsibilityCenterInfo[0]?.name\n                    : \"--\"\n                    }}\n                </div>\n\n            </div>\n            <ng-container *ngIf=\"\n            eachAssignee?.responsibilityCenterInfo?.length  > 1&&\n            eachAssignee?.responsibilityCenterInfo as rcArray\n          \">\n                <button appPopover\n                    class=\"count-btn vx-fs-11 vx-txt-blue vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-ml-2 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\"\n                    (click)=\"rc.popover()\" placement=\"left\">+{{ rcArray?.length-\n                    1 }}</button>\n                <app-popover #rc>\n                    <div class=\"wf-action-list\">\n                        <ul class=\"action-item\">\n                            <li *ngFor=\"let rc of eachAssignee?.responsibilityCenterInfo | slice: 1\"\n                                appTooltip=\"{{ rc?.name }}\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                                [tooltipMandatory]=\"true\">\n                                <div class=\"avatar-card\">\n                                    <span class=\"value\">{{ rc?.name }}</span>\n                                </div>\n                            </li>\n                        </ul>\n                    </div>\n                </app-popover>\n            </ng-container>\n        </div>\n        <div class=\"vc-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n        </div>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::ng-deep .sub-responsibility{top:0;position:relative;background:#f9f9fa;border-radius:0 0 .25rem .25rem;border:1px solid #F2F2F5;overflow:auto}::ng-deep .sub-responsibility::-webkit-scrollbar-track{background-color:#fff}::ng-deep .sub-responsibility .vc-table-row{display:flex;justify-content:space-between;position:relative;border-bottom:1px solid #F2F2F5;width:100%}::ng-deep .sub-responsibility .vc-table-row:only-child,::ng-deep .sub-responsibility .vc-table-row:last-of-type{border-bottom:none}::ng-deep .sub-responsibility .vc-table-row:hover .vc-table-column.serial .sr-no,::ng-deep .sub-responsibility .vc-table-row.active .vc-table-column.serial .sr-no{opacity:0}::ng-deep .sub-responsibility .vc-table-row:hover .vc-table-column.serial app-cs-radio,::ng-deep .sub-responsibility .vc-table-row.active .vc-table-column.serial app-cs-radio{opacity:1}::ng-deep .sub-responsibility .vc-table-row .vc-table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.serial .sr-no{width:1rem;background:#e3e3e9;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 .sub-responsibility .vc-table-row .vc-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 .sub-responsibility .vc-table-row .vc-table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.vc-title{width:calc(100% - 19rem);min-width:calc(100% - 19rem)}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.vc-title .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.rc{width:15rem;min-width:15rem}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.rc .rc-inner{max-width:calc(100% - 2rem)}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.rc .rc-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.action{width:2rem;min-width:2rem}::ng-deep .sub-responsibility .count-btn{background:#fff;border-radius:.125rem;border:1px solid #dbdbdb}\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: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormgroupModule }, { kind: "component", type: CsRadioComponentUI, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: AvatarV2Component, selector: "lib-avatar-v2", inputs: ["avatarList"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubResponsibilityComponent, isStandalone: true, selector: "lib-sub-responsibility", inputs: { responsibility: "responsibility", srNo: "srNo" }, outputs: { onCompletionChange: "onCompletionChange" }, ngImport: i0, template: "<div class=\"sub-responsibility vx-mb-1\">\n    <div class=\"vc-table-row\" *ngFor=\"let eachAssignee of responsibility?.assigneeDetails; let i = index\">\n        <div class=\"vc-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n            <div class=\"sr-no\" [appTooltip]=\"srNo + '.' + i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\"\n                [tooltipMandatory]=\"true\">\n                {{ srNo + '.' +(i + 1) }}\n            </div>\n            <app-cs-radio [name]=\"'onCompletion'\" [checked]=\"\n          \" (checkedEvent)=\"onCompletionChange.emit({eachAssignee, responsibility})\"></app-cs-radio>\n        </div>\n        <div class=\"vc-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vc-title\">\n            <lib-avatar-v2 [avatarList]=\"eachAssignee?.assigneeInfo\"></lib-avatar-v2>\n            <div *ngIf=\"eachAssignee?.assigneeInfo?.length === 1\" class=\"value vx-fs-12 vx-label-txt vx-pr-5 vx-ml-2\"\n                [appTooltip]=\"eachAssignee?.assigneeInfo[0]?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                [tooltipMandatory]=\"true\">\n                {{ eachAssignee?.assigneeInfo[0]?.name }}\n            </div>\n        </div>\n        <div class=\"vc-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center rc\">\n            <div class=\"rc-inner vx-d-block\">\n                <div class=\"rc-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n              eachAssignee?.responsibilityCenterInfo?.length\n                ? eachAssignee?.responsibilityCenterInfo[0]?.name\n                : '--'\n            \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                    {{\n                    eachAssignee?.responsibilityCenterInfo?.length\n                    ? eachAssignee?.responsibilityCenterInfo[0]?.name\n                    : \"--\"\n                    }}\n                </div>\n\n            </div>\n            <ng-container *ngIf=\"\n            eachAssignee?.responsibilityCenterInfo?.length  > 1&&\n            eachAssignee?.responsibilityCenterInfo as rcArray\n          \">\n                <button appPopover\n                    class=\"count-btn vx-fs-11 vx-txt-blue vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-ml-2 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\"\n                    (click)=\"rc.popover()\" placement=\"left\">+{{ rcArray?.length-\n                    1 }}</button>\n                <app-popover #rc>\n                    <div class=\"wf-action-list\">\n                        <ul class=\"action-item\">\n                            <li *ngFor=\"let rc of eachAssignee?.responsibilityCenterInfo | slice: 1\"\n                                appTooltip=\"{{ rc?.name }}\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n                                [tooltipMandatory]=\"true\">\n                                <div class=\"avatar-card\">\n                                    <span class=\"value\">{{ rc?.name }}</span>\n                                </div>\n                            </li>\n                        </ul>\n                    </div>\n                </app-popover>\n            </ng-container>\n        </div>\n        <div class=\"vc-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n        </div>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::ng-deep .sub-responsibility{top:0;position:relative;background:#f9f9fa;border-radius:0 0 .25rem .25rem;border:1px solid #F2F2F5;overflow:auto}::ng-deep .sub-responsibility::-webkit-scrollbar-track{background-color:#fff}::ng-deep .sub-responsibility .vc-table-row{display:flex;justify-content:space-between;position:relative;border-bottom:1px solid #F2F2F5;width:100%}::ng-deep .sub-responsibility .vc-table-row:only-child,::ng-deep .sub-responsibility .vc-table-row:last-of-type{border-bottom:none}::ng-deep .sub-responsibility .vc-table-row:hover .vc-table-column.serial .sr-no,::ng-deep .sub-responsibility .vc-table-row.active .vc-table-column.serial .sr-no{opacity:0}::ng-deep .sub-responsibility .vc-table-row:hover .vc-table-column.serial app-cs-radio,::ng-deep .sub-responsibility .vc-table-row.active .vc-table-column.serial app-cs-radio{opacity:1}::ng-deep .sub-responsibility .vc-table-row .vc-table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.serial .sr-no{width:1rem;background:#e3e3e9;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 .sub-responsibility .vc-table-row .vc-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 .sub-responsibility .vc-table-row .vc-table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.vc-title{width:calc(100% - 19rem);min-width:calc(100% - 19rem)}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.vc-title .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.rc{width:15rem;min-width:15rem}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.rc .rc-inner{max-width:calc(100% - 2rem)}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.rc .rc-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .sub-responsibility .vc-table-row .vc-table-column.action{width:2rem;min-width:2rem}::ng-deep .sub-responsibility .count-btn{background:#fff;border-radius:.125rem;border:1px solid #dbdbdb}\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: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormgroupModule }, { kind: "component", type: CsRadioComponentUI, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value"], outputs: ["checkedEvent"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: AvatarV2Component, selector: "lib-avatar-v2", inputs: ["avatarList", "type"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubResponsibilityComponent, decorators: [{
             type: Component,
@@ -29039,26 +29064,13 @@ class FrequencyResponsibilityListComponent {
     constructor(frequencyService) {
         this.frequencyService = frequencyService;
         this.selectedResponsibilityDetails = [];
-        this.animation = false;
-        this.ASSETS = ASSETS;
         this.backButton = new EventEmitter();
         this.selectedResponsibility = new EventEmitter();
+        this.animation = false;
+        this.ASSETS = ASSETS;
         this.responsibilitiesData = {};
         this.responsibilityLoader = false;
         this.selectedResponsibilityId = [];
-        this.currentTab = 1;
-        this.responsibilityTabs = [
-            { name: 'REGULATIONS', type: 1 },
-            { name: 'STANDARDS', type: 2 },
-            { name: 'INTERNAL CONTROLS', type: 3 },
-            { name: 'OTHERS', type: 0 },
-        ];
-        this.responsibilityTabCount = {
-            regulationCount: 0,
-            standardCount: 0,
-            internalCount: 0,
-            othersCount: 0,
-        };
         this.responsibilitySearchText = '';
         this.responsibilityCurrentPage = 1;
         this.isValidObj = false;
@@ -29084,67 +29096,18 @@ class FrequencyResponsibilityListComponent {
             },
             pageName: 'overview',
         };
-        this.regulationCount = 0;
-        this.standardsCount = 0;
-        this.internalsCount = 0;
-        this.othersCount = 0;
-        this.isOnCompletionRc = false;
         this.openedResponsibility = [];
     }
     ngOnInit() {
-        this.featureFlagInitialization();
-        if (this.selectedResponsibilityDetails) {
-            this.selectedResponsibilityId[0] = Object.keys(this.selectedResponsibilityDetails)?.length
-                ? this.selectedResponsibilityDetails?.ReportId
-                : [];
-            this.selectedResponsibilityValues = Object.keys(this.selectedResponsibilityDetails)?.length
-                ? this.selectedResponsibilityDetails
-                : {};
-            this.isValidObj = this.selectedResponsibilityDetails
-                ? Object.keys(this.selectedResponsibilityDetails)?.length > 0
-                : false;
-        }
         this.animation = true;
         setTimeout(() => {
             this.animation = false;
         }, 300);
         this.getResponsibilityList();
-        //this.setResponsibilitiesCount();
     }
     back() {
         this.backButton.emit('backToOnCompletion');
     }
-    filterByResponsibilityType(type) {
-        this.responsibilityPayload.filterData.complianceType = [];
-        this.responsibilityPayload.filterData.complianceType.push(type);
-        this.frequencyService
-            ?.getResponsibilityList(this.responsibilityPayload)
-            .subscribe((res) => {
-            this.responsibilityList = res[0];
-            if (this.responsibilityList) {
-                switch (type) {
-                    case 0:
-                        this.othersCount =
-                            this.responsibilityList['total_responsibilities'];
-                        break;
-                    case 1:
-                        this.regulationCount =
-                            this.responsibilityList['total_responsibilities'];
-                        break;
-                    case 2:
-                        this.standardsCount =
-                            this.responsibilityList['total_responsibilities'];
-                        break;
-                    case 3:
-                        this.internalsCount =
-                            this.responsibilityList['total_responsibilities'];
-                        break;
-                    default:
-                        break;
-                }
-            }
-        });
-    }
     getResponsibilityList() {
         this.responsibilityLoader = true;
         this.frequencyService
@@ -29174,38 +29137,11 @@ class FrequencyResponsibilityListComponent {
         this.backButton.emit('backToOnCompletion');
         this.selectedResponsibility.emit(this.selectedResponsibilityValues);
     }
-    onClickTabChange(tab) {
-        this.currentTab = tab?.type;
-        this.responsibilityPayload.filterData.complianceType = [this.currentTab];
-        // this.responsibilitySearchText = '';
-        this.responsibilityCurrentPage = 1;
-        this.responsibilityPayload.pageNo = this.responsibilityCurrentPage;
-        this.responsibilityPayload.searchText = this.responsibilitySearchText;
-        this.getResponsibilityList();
-    }
     search() {
         this.responsibilityPayload.searchText = this.responsibilitySearchText;
         this.responsibilityCurrentPage = 1;
         this.responsibilityPayload.pageNo = this.responsibilityCurrentPage;
         this.getResponsibilityList();
-        this.setResponsibilitiesCount();
-    }
-    setResponsibilitiesCount() {
-        const payload = JSON.parse(JSON.stringify(this.responsibilityPayload));
-        payload.filterData.complianceType = [0, 1, 2, 3];
-        this.frequencyService
-            ?.getResponsibilitiesCount(payload)
-            .subscribe((res) => {
-            this.responsibilityTabCount.regulationCount = res?.regulation_count;
-            this.responsibilityTabCount.standardCount = res?.standard_count;
-            this.responsibilityTabCount.internalCount = res?.internal_count;
-            this.responsibilityTabCount.othersCount = res?.others_count;
-        });
-    }
-    // This function is used to initialize all the Feature flag based variables
-    featureFlagInitialization() {
-        this.featureFlag_on_completion_of = this.feature.isFeatureEnabled('ff_frequency_on_completion_of');
-        this.isOnCompletionRc = this.feature.isFeatureEnabled('ff_on_completion_rc');
     }
     onToggleResponsibility(responsibility) {
         if (this.openedResponsibility.includes(responsibility.id)) {
@@ -29215,36 +29151,6 @@ class FrequencyResponsibilityListComponent {
             this.openedResponsibility.push(responsibility.id);
         }
     }
-    // mapResponsibilityData(responsibility: any) {
-    //   const mappedData: any[] = [];
-    //   responsibility.users = responsibility?.users?.map((user: any) => {
-    //     user.shortName = this.mapShortName(user?.name);
-    //     return user
-    //   }) || [];
-    //   responsibility?.responsibilities?.forEach((item: any) => {
-    //     item.assigneeDetails = item?.assigneeDetails?.filter((eachAssignee: any) => eachAssignee?.status?.toLowerCase() === 'active');
-    //     const assigneeDetails = item?.assigneeDetails?.map((eachAssignee: any) => {
-    //       if(!eachAssignee?.assignee) {
-    //         eachAssignee.assignee = responsibility?.users.filter((user: any) => item?.assignees.activeUserId?.includes(user?.id));
-    //       } else {
-    //         eachAssignee.assignee = [responsibility?.users.find((user: any) => eachAssignee?.assignee === user?.id)];
-    //       }
-    //       if(!eachAssignee?.responsibilityCenter) {
-    //         eachAssignee.responsibilityCenter = responsibility?.responsibilityCenters.filter((rc: any) => item?.responsibilityCenters?.includes(rc?.id));
-    //       } else {
-    //         eachAssignee.responsibilityCenter = [responsibility?.responsibilityCenters.find((rc: any) => eachAssignee?.responsibilityCenter === rc?.id)];
-    //       }
-    //       return eachAssignee;
-    //     });
-    //     const data = {
-    //       title: item?.title,
-    //       assigneeDetails: assigneeDetails,
-    //       id: item?.id,
-    //     }
-    //     mappedData.push(data );
-    //   })
-    //   return mappedData;
-    // }
     // Main method exposed outside
     mapResponsibilityData(responsibility) {
         if (!responsibility)
@@ -29252,7 +29158,7 @@ class FrequencyResponsibilityListComponent {
         const users = this.mapShortNames(responsibility.users, this.mapShortName);
         const userMap = this.buildMap(users);
         const rcMap = this.buildMap(responsibility.responsibilityCenters);
-        return (responsibility.responsibilities || []).map((item) => this.mapResponsibilityItem(item, userMap, rcMap, users));
+        return (responsibility.responsibilities || []).map((item) => this.mapResponsibilityItem(item, userMap, rcMap));
     }
     // Helper methods below:
     mapShortNames(users, mapShortName) {
@@ -29278,20 +29184,35 @@ class FrequencyResponsibilityListComponent {
         const ids = Array.isArray(assignee.responsibilityCenter) ? assignee.responsibilityCenter : [assignee.responsibilityCenter];
         return ids.map((id) => rcMap.get(id)).filter(Boolean);
     }
-    mapResponsibilityItem(item, userMap, rcMap, users) {
+    mapResponsibilityItem(item, userMap, rcMap) {
         const assigneeDetails = (item.assigneeDetails || [])
             .filter((ad) => ad.status && ad.status.toLowerCase() === 'active')
             .map((ad) => ({
             ...ad,
-            assigneeInfo: users ?? this.mapAssigneeUsers(ad, item.assignees?.activeUserId || [], userMap),
+            assigneeInfo: this.mapAssigneeUsers(ad, item.assignees?.activeUserId || [], userMap),
             responsibilityCenterInfo: this.mapResponsibilityCenters(ad, item.responsibilityCenters || [], rcMap),
         }));
+        const allAssignee = this.removeDuplicateAssignee(assigneeDetails).map((ad) => ad.assigneeInfo[0]);
+        const allRc = this.mapRcs(item.responsibilityCenters);
         return {
             id: item.id,
             title: item.title,
             assigneeDetails,
+            allAssignee,
+            allRc
         };
     }
+    removeDuplicateAssignee(assigneeDetails) {
+        const uniqueMap = new Map();
+        assigneeDetails.forEach((obj) => {
+            uniqueMap.set(obj.assignee, obj);
+        });
+        const uniqueArray = Array.from(uniqueMap.values());
+        return uniqueArray;
+    }
+    mapRcs(rcs) {
+        return this.responsibilitiesData?.responsibilityCenters?.filter((rc) => rcs?.includes(rc?.id));
+    }
     mapShortName(name) {
         const nameArray = name?.split(' ');
         if (nameArray?.length > 1) {
@@ -29303,15 +29224,13 @@ class FrequencyResponsibilityListComponent {
         this.selectedResponsibilityValues = event;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyResponsibilityListComponent, deps: [{ token: FrequencyService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyResponsibilityListComponent, selector: "app-frequency-responsibility-list", inputs: { onCompletionOfResponsibility: "onCompletionOfResponsibility", feature: "feature", selectedResponsibilityDetails: "selectedResponsibilityDetails" }, outputs: { backButton: "backButton", selectedResponsibility: "selectedResponsibility" }, ngImport: i0, template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\">&#xe91d;</i>\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\n    </div>\n  </div>\n  <div class=\"frequency-responsibility-list-body\">\n    <!-- <app-loader-inline *ngIf=\"othersCount === 0\"></app-loader-inline> -->\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <app-pagination *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\n      [start]=\"responsibilitiesData?.responsibilities_from\" [end]=\"responsibilitiesData?.responsibilities_to\"\n      [total]=\"responsibilitiesData?.total_responsibilities\" [pageCount]=\"responsibilitiesData?.total_pages\"\n      [currentPage]=\"responsibilityCurrentPage\" (selectedPage)=\"responsibilityPageChange($event)\">\n    </app-pagination>\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \">\n      <app-no-data *ngIf=\"\n          responsibilitiesData?.responsibilities?.length === 0 &&\n          !responsibilityLoader\n        \" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n      <ng-container *ngIf=\"\n          responsibilitiesData?.responsibilities?.length > 0 &&\n          !responsibilityLoader\n        \">\n        <div class=\"table-header\">\n          <div class=\"table-row\">\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n              #\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\n              [class.with-rc]=\"isOnCompletionRc\">\n              RESPONSIBILITIES\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\"\n              *ngIf=\"isOnCompletionRc\">\n              RESPONSIBILITY CENTER\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <!-- when click on radio then active class should be true -->\n          <ng-container *ngFor=\"\n              let responsibility of responsibilitiesData?.responsibilities;\n              let i = index\n            \">\n            <div class=\"table-row\" [class.active]=\"\n                selectedResponsibilityValues?.responsibility?.id === responsibility?.id\n              \" [class.with-sub-responsibility]=\"openedResponsibility.includes(responsibility?.id)\">\n              <ng-container *ngIf=\"responsibility?.assigneeDetails as assigneeDetails\">\n                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                  <div class=\"sr-no\" [appTooltip]=\"\n                      responsibilitiesData?.page * responsibilitiesData?.limit -\n                      responsibilitiesData?.limit +\n                      i +\n                      1\n                    \" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                    {{\n                    responsibilitiesData?.page * responsibilitiesData?.limit -\n                    responsibilitiesData?.limit +\n                    i +\n                    1\n                    }}\n                  </div>\n                  <app-cs-radio *ngIf=\"assigneeDetails?.length === 1\" [name]=\"'onCompletion'\" [checked]=\"\n                      selectedResponsibilityId?.includes(\n                        responsibility?.ReportId\n                      )\n                    \"\n                    (checkedEvent)=\"onCompletionChange({eachAssignee: assigneeDetails[0], responsibility})\"></app-cs-radio>\n                </div>\n\n                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility with-rc\">\n\n                  <div class=\"value vx-fs-12 vx-label-txt vx-pr-5\" [appTooltip]=\"responsibility?.title\"\n                    placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                    {{ responsibility?.ControlId }} {{ responsibility?.title }}\n                  </div>\n                </div>\n\n                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n                  <ng-container *ngIf=\"responsibility?.assigneeDetails[0]?.responsibilityCenterInfo as rc\">\n                    <div class=\"program-inner vx-d-block\">\n                      <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n                        rc?.length\n                          ? rc[0]?.name\n                          : '--'\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                        {{\n                        rc?.length\n                        ? rc[0]?.name\n                        : \"--\"\n                        }}\n                      </div>\n                      <ng-container *ngIf=\"\n                        rc?.length \n                      \">\n                      </ng-container>\n                    </div>\n                    <button *ngIf=\"rc?.length > 1\" appPopover (click)=\"rcPopup.popover()\" placement=\"right\"\n                      class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                      +{{ rc?.length - 1 }}\n                    </button>\n                    <app-popover #rcPopup>\n                      <div class=\"wf-action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                            let data of rc?.slice(\n                              1,\n                              rc?.length\n                            )\n                          \">\n                            <div class=\"avatar-card\">\n                              <div class=\"vx-d-block vx-w-100\">\n                                <span class=\"value\" [appTooltip]=\"data?.name\" placement=\"bottom-left\" delay=\"0\"\n                                  type=\"black\" [tooltipMandatory]=\"true\">{{ data?.name }}</span>\n                              </div>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n                </div>\n\n                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                  (click)=\"onToggleResponsibility(responsibility)\">\n                  <ng-container *ngIf=\"assigneeDetails?.length > 1; else closeIcon\">\n                    <i *ngIf=\"\n                        openedResponsibility.includes(responsibility.id);\n                        else closeIcon\n                      \" class=\"icons vx-fs-10\">&#xe9e7;</i>\n                    <ng-template #closeIcon>\n                      <i class=\"icons vx-fs-10\"> &#xe9e8;</i>\n                    </ng-template>\n                  </ng-container>\n                </div>\n              </ng-container>\n            </div>\n            <lib-sub-responsibility *ngIf=\"openedResponsibility.includes(responsibility.id)\"\n              [responsibility]=\"responsibility\"\n              (onCompletionChange)=\"onCompletionChange($event)\"></lib-sub-responsibility>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-floating-bar [selectedData]=\"[selectedResponsibilityValues?.responsibility]\" [displayElementKey]=\"'title'\"\n      (closeList)=\"back()\" (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!selectedResponsibilityValues?.responsibility?.id\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100% - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100% - 8rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100% - 10rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row lib-sub-responsibility{position:relative;top:2.5rem;left:0;width:100%;z-index:1;background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;padding:.5rem}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 19rem);min-width:calc(100% - 19rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:15rem;min-width:15rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:2rem;min-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action.active{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-row.with-sub-responsibility{background:#f9f9fa;margin-bottom:0}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: SubResponsibilityComponent, selector: "lib-sub-responsibility", inputs: ["responsibility", "srNo"], outputs: ["onCompletionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyResponsibilityListComponent, selector: "app-frequency-responsibility-list", inputs: { onCompletionOfResponsibility: "onCompletionOfResponsibility", selectedResponsibilityDetails: "selectedResponsibilityDetails" }, outputs: { backButton: "backButton", selectedResponsibility: "selectedResponsibility" }, ngImport: i0, template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\">&#xe91d;</i>\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\n    </div>\n  </div>\n  <div class=\"frequency-responsibility-list-body\">\n    <!-- <app-loader-inline *ngIf=\"othersCount === 0\"></app-loader-inline> -->\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <app-pagination *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\n      [start]=\"responsibilitiesData?.responsibilities_from\" [end]=\"responsibilitiesData?.responsibilities_to\"\n      [total]=\"responsibilitiesData?.total_responsibilities\" [pageCount]=\"responsibilitiesData?.total_pages\"\n      [currentPage]=\"responsibilityCurrentPage\" (selectedPage)=\"responsibilityPageChange($event)\">\n    </app-pagination>\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \">\n      <app-no-data *ngIf=\"\n          responsibilitiesData?.responsibilities?.length === 0 &&\n          !responsibilityLoader\n        \" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n      <ng-container *ngIf=\"\n          responsibilitiesData?.responsibilities?.length > 0 &&\n          !responsibilityLoader\n        \">\n        <div class=\"table-header\">\n          <div class=\"table-row\">\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n              #\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">\n              RESPONSIBILITIES\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n              RESPONSIBILITY CENTER\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <!-- when click on radio then active class should be true -->\n          <ng-container *ngFor=\"\n              let responsibility of responsibilitiesData?.responsibilities;\n              let i = index\n            \">\n            <ng-container *ngIf=\"(responsibilitiesData?.page * responsibilitiesData?.limit -\n            responsibilitiesData?.limit +\n            i +\n            1) as srNo\">\n              <div class=\"table-row\" [class.active]=\"\n                selectedResponsibilityValues?.responsibility?.id === responsibility?.id\n              \" [class.with-sub-responsibility]=\"openedResponsibility.includes(responsibility?.id)\">\n                <ng-container *ngIf=\"responsibility?.assigneeDetails as assigneeDetails\">\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"\n                      srNo  \n                    \" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{srNo}}\n                    </div>\n                    <app-cs-radio *ngIf=\"assigneeDetails?.length === 1\" [name]=\"'onCompletion'\" [checked]=\"\n                      selectedResponsibilityId?.includes(\n                        responsibility?.ReportId\n                      )\n                    \"\n                      (checkedEvent)=\"onCompletionChange({eachAssignee: assigneeDetails[0], responsibility})\"></app-cs-radio>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility with-rc\">\n\n                    <div class=\"value vx-fs-12 vx-label-txt vx-pr-5  vx-d-flex vx-align-center\">\n                      <div class=\"avatar-list vx-d-flex vx-align-center\">\n                        <lib-avatar-v2 [avatarList]=\"responsibility?.allAssignee\"\n                          [type]=\"'SINGLE_AVATAR'\"></lib-avatar-v2>\n                      </div>\n\n                      <span class=\"value-text\" [appTooltip]=\"responsibility?.title\" placement=\"bottom-left\" delay=\"0\"\n                        type=\"black\" [tooltipMandatory]=\"true\">{{ responsibility?.ControlId }} {{ responsibility?.title\n                        }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n                    <ng-container *ngIf=\"responsibility?.allRc as rc\">\n                      <div class=\"program-inner vx-d-block\">\n                        <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n                        rc?.length\n                          ? rc[0]?.name\n                          : '--'\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                          {{\n                          rc?.length\n                          ? rc[0]?.name\n                          : \"--\"\n                          }}\n                        </div>\n                        <ng-container *ngIf=\"\n                        rc?.length \n                      \">\n                        </ng-container>\n                      </div>\n                      <button *ngIf=\"rc?.length > 1\" appPopover (click)=\"rcPopup.popover()\" placement=\"right\"\n                        class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                        +{{ rc?.length - 1 }}\n                      </button>\n                      <app-popover #rcPopup>\n                        <div class=\"wf-action-list\">\n                          <ul class=\"action-item\">\n                            <li *ngFor=\"\n                            let data of rc?.slice(\n                              1,\n                              rc?.length\n                            )\n                          \">\n                              <div class=\"avatar-card\">\n                                <div class=\"vx-d-block vx-w-100\">\n                                  <span class=\"value\" [appTooltip]=\"data?.name\" placement=\"bottom-left\" delay=\"0\"\n                                    type=\"black\" [tooltipMandatory]=\"true\">{{ data?.name }}</span>\n                                </div>\n                              </div>\n                            </li>\n                          </ul>\n                        </div>\n                      </app-popover>\n                    </ng-container>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                    (click)=\"onToggleResponsibility(responsibility)\">\n                    <ng-container *ngIf=\"assigneeDetails?.length > 1; else closeIcon\">\n                      <i *ngIf=\"\n                        openedResponsibility.includes(responsibility.id);\n                        else closeIcon\n                      \" class=\"icons vx-fs-10\">&#xe9e7;</i>\n                      <ng-template #closeIcon>\n                        <i class=\"icons vx-fs-10\"> &#xe9e8;</i>\n                      </ng-template>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              </div>\n              <lib-sub-responsibility *ngIf=\"openedResponsibility.includes(responsibility.id)\"\n                [responsibility]=\"responsibility\" [srNo]=\"srNo\"\n                (onCompletionChange)=\"onCompletionChange($event)\"></lib-sub-responsibility>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-floating-bar [selectedData]=\"[selectedResponsibilityValues?.responsibility]\" [displayElementKey]=\"'title'\"\n      (closeList)=\"back()\" (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!selectedResponsibilityValues?.responsibility?.id\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100% - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100% - 8rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100% - 10rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row lib-sub-responsibility{position:relative;top:2.5rem;left:0;width:100%;z-index:1;background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;padding:.5rem}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 19rem);min-width:calc(100% - 19rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list{width:2.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:14rem;min-width:14rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:3rem;min-width:3rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action.active{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-row.with-sub-responsibility{background:#f9f9fa;margin-bottom:0}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: SubResponsibilityComponent, selector: "lib-sub-responsibility", inputs: ["responsibility", "srNo"], outputs: ["onCompletionChange"] }, { kind: "component", type: AvatarV2Component, selector: "lib-avatar-v2", inputs: ["avatarList", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyResponsibilityListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-frequency-responsibility-list', template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\">&#xe91d;</i>\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\n    </div>\n  </div>\n  <div class=\"frequency-responsibility-list-body\">\n    <!-- <app-loader-inline *ngIf=\"othersCount === 0\"></app-loader-inline> -->\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <app-pagination *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\n      [start]=\"responsibilitiesData?.responsibilities_from\" [end]=\"responsibilitiesData?.responsibilities_to\"\n      [total]=\"responsibilitiesData?.total_responsibilities\" [pageCount]=\"responsibilitiesData?.total_pages\"\n      [currentPage]=\"responsibilityCurrentPage\" (selectedPage)=\"responsibilityPageChange($event)\">\n    </app-pagination>\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \">\n      <app-no-data *ngIf=\"\n          responsibilitiesData?.responsibilities?.length === 0 &&\n          !responsibilityLoader\n        \" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n      <ng-container *ngIf=\"\n          responsibilitiesData?.responsibilities?.length > 0 &&\n          !responsibilityLoader\n        \">\n        <div class=\"table-header\">\n          <div class=\"table-row\">\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n              #\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\n              [class.with-rc]=\"isOnCompletionRc\">\n              RESPONSIBILITIES\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\"\n              *ngIf=\"isOnCompletionRc\">\n              RESPONSIBILITY CENTER\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <!-- when click on radio then active class should be true -->\n          <ng-container *ngFor=\"\n              let responsibility of responsibilitiesData?.responsibilities;\n              let i = index\n            \">\n            <div class=\"table-row\" [class.active]=\"\n                selectedResponsibilityValues?.responsibility?.id === responsibility?.id\n              \" [class.with-sub-responsibility]=\"openedResponsibility.includes(responsibility?.id)\">\n              <ng-container *ngIf=\"responsibility?.assigneeDetails as assigneeDetails\">\n                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                  <div class=\"sr-no\" [appTooltip]=\"\n                      responsibilitiesData?.page * responsibilitiesData?.limit -\n                      responsibilitiesData?.limit +\n                      i +\n                      1\n                    \" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                    {{\n                    responsibilitiesData?.page * responsibilitiesData?.limit -\n                    responsibilitiesData?.limit +\n                    i +\n                    1\n                    }}\n                  </div>\n                  <app-cs-radio *ngIf=\"assigneeDetails?.length === 1\" [name]=\"'onCompletion'\" [checked]=\"\n                      selectedResponsibilityId?.includes(\n                        responsibility?.ReportId\n                      )\n                    \"\n                    (checkedEvent)=\"onCompletionChange({eachAssignee: assigneeDetails[0], responsibility})\"></app-cs-radio>\n                </div>\n\n                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility with-rc\">\n\n                  <div class=\"value vx-fs-12 vx-label-txt vx-pr-5\" [appTooltip]=\"responsibility?.title\"\n                    placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                    {{ responsibility?.ControlId }} {{ responsibility?.title }}\n                  </div>\n                </div>\n\n                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n                  <ng-container *ngIf=\"responsibility?.assigneeDetails[0]?.responsibilityCenterInfo as rc\">\n                    <div class=\"program-inner vx-d-block\">\n                      <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n                        rc?.length\n                          ? rc[0]?.name\n                          : '--'\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                        {{\n                        rc?.length\n                        ? rc[0]?.name\n                        : \"--\"\n                        }}\n                      </div>\n                      <ng-container *ngIf=\"\n                        rc?.length \n                      \">\n                      </ng-container>\n                    </div>\n                    <button *ngIf=\"rc?.length > 1\" appPopover (click)=\"rcPopup.popover()\" placement=\"right\"\n                      class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                      +{{ rc?.length - 1 }}\n                    </button>\n                    <app-popover #rcPopup>\n                      <div class=\"wf-action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"\n                            let data of rc?.slice(\n                              1,\n                              rc?.length\n                            )\n                          \">\n                            <div class=\"avatar-card\">\n                              <div class=\"vx-d-block vx-w-100\">\n                                <span class=\"value\" [appTooltip]=\"data?.name\" placement=\"bottom-left\" delay=\"0\"\n                                  type=\"black\" [tooltipMandatory]=\"true\">{{ data?.name }}</span>\n                              </div>\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </ng-container>\n                </div>\n\n                <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                  (click)=\"onToggleResponsibility(responsibility)\">\n                  <ng-container *ngIf=\"assigneeDetails?.length > 1; else closeIcon\">\n                    <i *ngIf=\"\n                        openedResponsibility.includes(responsibility.id);\n                        else closeIcon\n                      \" class=\"icons vx-fs-10\">&#xe9e7;</i>\n                    <ng-template #closeIcon>\n                      <i class=\"icons vx-fs-10\"> &#xe9e8;</i>\n                    </ng-template>\n                  </ng-container>\n                </div>\n              </ng-container>\n            </div>\n            <lib-sub-responsibility *ngIf=\"openedResponsibility.includes(responsibility.id)\"\n              [responsibility]=\"responsibility\"\n              (onCompletionChange)=\"onCompletionChange($event)\"></lib-sub-responsibility>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-floating-bar [selectedData]=\"[selectedResponsibilityValues?.responsibility]\" [displayElementKey]=\"'title'\"\n      (closeList)=\"back()\" (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!selectedResponsibilityValues?.responsibility?.id\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100% - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100% - 8rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100% - 10rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row lib-sub-responsibility{position:relative;top:2.5rem;left:0;width:100%;z-index:1;background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;padding:.5rem}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 19rem);min-width:calc(100% - 19rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:15rem;min-width:15rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:2rem;min-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action.active{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-row.with-sub-responsibility{background:#f9f9fa;margin-bottom:0}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
+            args: [{ selector: 'app-frequency-responsibility-list', template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\">&#xe91d;</i>\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\n    </div>\n  </div>\n  <div class=\"frequency-responsibility-list-body\">\n    <!-- <app-loader-inline *ngIf=\"othersCount === 0\"></app-loader-inline> -->\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <app-pagination *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\n      [start]=\"responsibilitiesData?.responsibilities_from\" [end]=\"responsibilitiesData?.responsibilities_to\"\n      [total]=\"responsibilitiesData?.total_responsibilities\" [pageCount]=\"responsibilitiesData?.total_pages\"\n      [currentPage]=\"responsibilityCurrentPage\" (selectedPage)=\"responsibilityPageChange($event)\">\n    </app-pagination>\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \">\n      <app-no-data *ngIf=\"\n          responsibilitiesData?.responsibilities?.length === 0 &&\n          !responsibilityLoader\n        \" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n      <ng-container *ngIf=\"\n          responsibilitiesData?.responsibilities?.length > 0 &&\n          !responsibilityLoader\n        \">\n        <div class=\"table-header\">\n          <div class=\"table-row\">\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n              #\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">\n              RESPONSIBILITIES\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n              RESPONSIBILITY CENTER\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <!-- when click on radio then active class should be true -->\n          <ng-container *ngFor=\"\n              let responsibility of responsibilitiesData?.responsibilities;\n              let i = index\n            \">\n            <ng-container *ngIf=\"(responsibilitiesData?.page * responsibilitiesData?.limit -\n            responsibilitiesData?.limit +\n            i +\n            1) as srNo\">\n              <div class=\"table-row\" [class.active]=\"\n                selectedResponsibilityValues?.responsibility?.id === responsibility?.id\n              \" [class.with-sub-responsibility]=\"openedResponsibility.includes(responsibility?.id)\">\n                <ng-container *ngIf=\"responsibility?.assigneeDetails as assigneeDetails\">\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"\n                      srNo  \n                    \" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{srNo}}\n                    </div>\n                    <app-cs-radio *ngIf=\"assigneeDetails?.length === 1\" [name]=\"'onCompletion'\" [checked]=\"\n                      selectedResponsibilityId?.includes(\n                        responsibility?.ReportId\n                      )\n                    \"\n                      (checkedEvent)=\"onCompletionChange({eachAssignee: assigneeDetails[0], responsibility})\"></app-cs-radio>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility with-rc\">\n\n                    <div class=\"value vx-fs-12 vx-label-txt vx-pr-5  vx-d-flex vx-align-center\">\n                      <div class=\"avatar-list vx-d-flex vx-align-center\">\n                        <lib-avatar-v2 [avatarList]=\"responsibility?.allAssignee\"\n                          [type]=\"'SINGLE_AVATAR'\"></lib-avatar-v2>\n                      </div>\n\n                      <span class=\"value-text\" [appTooltip]=\"responsibility?.title\" placement=\"bottom-left\" delay=\"0\"\n                        type=\"black\" [tooltipMandatory]=\"true\">{{ responsibility?.ControlId }} {{ responsibility?.title\n                        }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n                    <ng-container *ngIf=\"responsibility?.allRc as rc\">\n                      <div class=\"program-inner vx-d-block\">\n                        <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n                        rc?.length\n                          ? rc[0]?.name\n                          : '--'\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                          {{\n                          rc?.length\n                          ? rc[0]?.name\n                          : \"--\"\n                          }}\n                        </div>\n                        <ng-container *ngIf=\"\n                        rc?.length \n                      \">\n                        </ng-container>\n                      </div>\n                      <button *ngIf=\"rc?.length > 1\" appPopover (click)=\"rcPopup.popover()\" placement=\"right\"\n                        class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                        +{{ rc?.length - 1 }}\n                      </button>\n                      <app-popover #rcPopup>\n                        <div class=\"wf-action-list\">\n                          <ul class=\"action-item\">\n                            <li *ngFor=\"\n                            let data of rc?.slice(\n                              1,\n                              rc?.length\n                            )\n                          \">\n                              <div class=\"avatar-card\">\n                                <div class=\"vx-d-block vx-w-100\">\n                                  <span class=\"value\" [appTooltip]=\"data?.name\" placement=\"bottom-left\" delay=\"0\"\n                                    type=\"black\" [tooltipMandatory]=\"true\">{{ data?.name }}</span>\n                                </div>\n                              </div>\n                            </li>\n                          </ul>\n                        </div>\n                      </app-popover>\n                    </ng-container>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                    (click)=\"onToggleResponsibility(responsibility)\">\n                    <ng-container *ngIf=\"assigneeDetails?.length > 1; else closeIcon\">\n                      <i *ngIf=\"\n                        openedResponsibility.includes(responsibility.id);\n                        else closeIcon\n                      \" class=\"icons vx-fs-10\">&#xe9e7;</i>\n                      <ng-template #closeIcon>\n                        <i class=\"icons vx-fs-10\"> &#xe9e8;</i>\n                      </ng-template>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              </div>\n              <lib-sub-responsibility *ngIf=\"openedResponsibility.includes(responsibility.id)\"\n                [responsibility]=\"responsibility\" [srNo]=\"srNo\"\n                (onCompletionChange)=\"onCompletionChange($event)\"></lib-sub-responsibility>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-floating-bar [selectedData]=\"[selectedResponsibilityValues?.responsibility]\" [displayElementKey]=\"'title'\"\n      (closeList)=\"back()\" (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!selectedResponsibilityValues?.responsibility?.id\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100% - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100% - 8rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100% - 10rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row lib-sub-responsibility{position:relative;top:2.5rem;left:0;width:100%;z-index:1;background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;padding:.5rem}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 19rem);min-width:calc(100% - 19rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list{width:2.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:14rem;min-width:14rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:3rem;min-width:3rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action.active{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-row.with-sub-responsibility{background:#f9f9fa;margin-bottom:0}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
         }], ctorParameters: function () { return [{ type: FrequencyService }]; }, propDecorators: { onCompletionOfResponsibility: [{
                 type: Input
-            }], feature: [{
-                type: Input
             }], selectedResponsibilityDetails: [{
                 type: Input
             }], backButton: [{
@@ -29451,7 +29370,7 @@ class FrequencyOnCompletionOfComponent {
         this.onTimeChanged(selectedValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyOnCompletionOfComponent, deps: [{ token: FrequencyService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyOnCompletionOfComponent, selector: "app-frequency-on-completion-of", inputs: { mode: "mode", feature: "feature", startDate: "startDate", frequencyData: "frequencyData" }, outputs: { frequencyDetails: "frequencyDetails", radioForm: "radioForm" }, ngImport: i0, template: "<div class=\"frequency-completion\" *ngIf=\"mode !== 'policy' || backButton\">\n  <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n    DUE DATE FREQUENCY:\n  </div>\n  <div class=\"frequency-completion-inner\">\n    <div class=\"frequency-completion-top vx-p-3 vx-d-flex vx-align-center\">\n      <input class=\"countNum\" type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\"\n        onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" />\n      <div class=\"vx-fs-13 vx-paragraph-txt\">day after completion of</div>\n    </div>\n    <div class=\"frequency-completion-bottom vx-p-3\">\n      <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n        RESPONSIBILITY\n      </div>\n      <div class=\"vx-d-flex vx-align-center\">\n        <ng-container>\n          <div *ngIf=\"!selectedResponsibilityDetails?.responsibility?.title\"\n            [class.disabled]=\"placeholder === 'Loading...'\"\n            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\"\n            (click)=\"openRadioResponsibility($event)\">\n            {{\n            placeholder === \"Loading...\"\n            ? \"Loading...\"\n            : \"Select a Responsibility\"\n            }}\n            <i class=\"icons vx-fs-10\">&#xe9e8;</i>\n          </div>\n          <div *ngIf=\"selectedResponsibilityDetails?.responsibility?.title as respName\"\n            class=\"after-select-box vx-p-1 vx-mr-3 vx-d-flex vx-align-center vx-justify-between vx-w-100\">\n            <div class=\"select-chip vx-fs-12 vx-paragraph-txt vx-p-1 vx-pl-2 vx-pr-2 vx-d-flex vx-align-center\">\n              <i class=\"icons cross vx-fs-14 vx-mr-1\" (click)=\"remove()\">&#xe9ae;</i>\n              <span [appTooltip]=\"respName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n                respName }}</span>\n            </div>\n            <button\n              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\"\n              (click)=\"openRadioResponsibility($event)\">\n              <i class=\"icons vx-mr-1\" (click)=\"openRadioResponsibility($event)\">&#xe90c;</i>\n              EDIT\n            </button>\n          </div>\n          <app-frequency-responsibility-list *ngIf=\"openRadio\" [feature]=\"feature\" [selectedResponsibilityDetails]=\"\n              selectedResponsibilityDetails ? selectedResponsibilityDetails : {}\n            \" (backButton)=\"openRadioResponsibility($event)\"\n            (selectedResponsibility)=\"onResponsibilitySelection($event)\"></app-frequency-responsibility-list>\n        </ng-container>\n\n        <div class=\"time-picker-group vx-d-flex\" *ngIf=\"!openRadio\">\n          <div class=\"time-field\" appPopover (click)=\"timePicker.popover()\" placement=\"right\">\n            <input class=\"input\" [placeholder]=\"onCompletionOfTime | uppercase\" readonly />\n            <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\n              <i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i>\n            </div>\n          </div>\n          <app-popover #timePicker [dontCloseonClick]=\"true\">\n            <app-time-picker [time]=\"onCompletionOfTime\" (onTimeSelection)=\"\n                timeSelection($event); timePicker.closePopover('top')\n              \"></app-time-picker>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n  </div>\n  <app-frequency-due-date [id]=\"3\" [pageName]=\"'onCompletion'\" [mode]=\"mode\" [isDeactivated]=\"false\"\n    [completedValue]=\"onCompletionOfWindow\" [notCompletedValue]=\"onCompletionOfFailed\"\n    (valueChange)=\"onValueChange($event)\"></app-frequency-due-date>\n</div>\n\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-on-completion-of\">\n  <div class=\"frequency-on-completion-of-message\">\n    <input type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\"\n      onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" />\n    <p>{{ onCompletionOfInput > 1 ? \"days\" : \"day\" }} after completion of</p>\n  </div>\n  <div class=\"frequency-on-completion-of-row\">\n    <div class=\"responsibility\">\n      <cs-select [class.disabled]=\"placeholder === 'Loading...'\" [(ngModel)]=\"selectedResponsibilityDetails\"\n        (valueChanged)=\"onResponsibilitySelection($event)\" [placeholder]=\"placeholder\">\n        <cs-option *ngFor=\"\n            let responsibility of onCompletionOfResponsibility;\n            let i = index\n          \" [value]=\"responsibility\" [optionTooltip]=\"responsibility?.ReportName\">{{ responsibility?.ReportName\n          }}</cs-option>\n      </cs-select>\n    </div>\n    <div class=\"time\">\n      <input type=\"text\" readonly aria-label=\"12hr format\" [(ngModel)]=\"onCompletionOfTime\" placeholder=\"Select Time\" />\n    </div>\n  </div>\n  <app-frequency-due-date [id]=\"3\" [pageName]=\"'onCompletion'\" [mode]=\"mode\" [isDeactivated]=\"false\"\n    [completedValue]=\"onCompletionOfWindow\" [notCompletedValue]=\"onCompletionOfFailed\"\n    (valueChange)=\"onValueChange($event)\"></app-frequency-due-date>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::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:30rem}::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;cursor:pointer}::ng-deep .frequency-completion-bottom .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-completion-bottom .time-picker-group .time-field.disable{background:#f1f1f1;border-radius:.25rem}::ng-deep .frequency-completion-bottom .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}::ng-deep .selection-wrap .input-group i{top:12px!important}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { kind: "component", type: TimePickerComponent, selector: "app-time-picker", inputs: ["time"], outputs: ["onTimeSelection"] }, { kind: "component", type: FrequencyDueDateComponent, selector: "app-frequency-due-date", inputs: ["mode", "pageType", "completedRequired", "notCompletedRequired", "completedValue", "notCompletedValue", "deactivateValue", "isDeactivated", "id", "pageName"], outputs: ["valueChange"] }, { kind: "component", type: FrequencyResponsibilityListComponent, selector: "app-frequency-responsibility-list", inputs: ["onCompletionOfResponsibility", "feature", "selectedResponsibilityDetails"], outputs: ["backButton", "selectedResponsibility"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyOnCompletionOfComponent, selector: "app-frequency-on-completion-of", inputs: { mode: "mode", feature: "feature", startDate: "startDate", frequencyData: "frequencyData" }, outputs: { frequencyDetails: "frequencyDetails", radioForm: "radioForm" }, ngImport: i0, template: "<div class=\"frequency-completion\" *ngIf=\"mode !== 'policy' || backButton\">\n  <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n    DUE DATE FREQUENCY:\n  </div>\n  <div class=\"frequency-completion-inner\">\n    <div class=\"frequency-completion-top vx-p-3 vx-d-flex vx-align-center\">\n      <input class=\"countNum\" type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\"\n        onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" />\n      <div class=\"vx-fs-13 vx-paragraph-txt\">day after completion of</div>\n    </div>\n    <div class=\"frequency-completion-bottom vx-p-3\">\n      <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n        RESPONSIBILITY\n      </div>\n      <div class=\"vx-d-flex vx-align-center\">\n        <ng-container>\n          <div *ngIf=\"!selectedResponsibilityDetails?.responsibility?.title\"\n            [class.disabled]=\"placeholder === 'Loading...'\"\n            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\"\n            (click)=\"openRadioResponsibility($event)\">\n            {{\n            placeholder === \"Loading...\"\n            ? \"Loading...\"\n            : \"Select a Responsibility\"\n            }}\n            <i class=\"icons vx-fs-10\">&#xe9e8;</i>\n          </div>\n          <div *ngIf=\"selectedResponsibilityDetails?.responsibility?.title as respName\"\n            class=\"after-select-box vx-p-1 vx-mr-3 vx-d-flex vx-align-center vx-justify-between vx-w-100\">\n            <div class=\"select-chip vx-fs-12 vx-paragraph-txt vx-p-1 vx-pl-2 vx-pr-2 vx-d-flex vx-align-center\">\n              <i class=\"icons cross vx-fs-14 vx-mr-1\" (click)=\"remove()\">&#xe9ae;</i>\n              <span [appTooltip]=\"respName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n                respName }}</span>\n            </div>\n            <button\n              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\"\n              (click)=\"openRadioResponsibility($event)\">\n              <i class=\"icons vx-mr-1\" (click)=\"openRadioResponsibility($event)\">&#xe90c;</i>\n              EDIT\n            </button>\n          </div>\n          <app-frequency-responsibility-list *ngIf=\"openRadio\" [feature]=\"feature\" [selectedResponsibilityDetails]=\"\n              selectedResponsibilityDetails ? selectedResponsibilityDetails : {}\n            \" (backButton)=\"openRadioResponsibility($event)\"\n            (selectedResponsibility)=\"onResponsibilitySelection($event)\"></app-frequency-responsibility-list>\n        </ng-container>\n\n        <div class=\"time-picker-group vx-d-flex\" *ngIf=\"!openRadio\">\n          <div class=\"time-field\" appPopover (click)=\"timePicker.popover()\" placement=\"right\">\n            <input class=\"input\" [placeholder]=\"onCompletionOfTime | uppercase\" readonly />\n            <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\n              <i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i>\n            </div>\n          </div>\n          <app-popover #timePicker [dontCloseonClick]=\"true\">\n            <app-time-picker [time]=\"onCompletionOfTime\" (onTimeSelection)=\"\n                timeSelection($event); timePicker.closePopover('top')\n              \"></app-time-picker>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n  </div>\n  <app-frequency-due-date [id]=\"3\" [pageName]=\"'onCompletion'\" [mode]=\"mode\" [isDeactivated]=\"false\"\n    [completedValue]=\"onCompletionOfWindow\" [notCompletedValue]=\"onCompletionOfFailed\"\n    (valueChange)=\"onValueChange($event)\"></app-frequency-due-date>\n</div>\n\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-on-completion-of\">\n  <div class=\"frequency-on-completion-of-message\">\n    <input type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\"\n      onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" />\n    <p>{{ onCompletionOfInput > 1 ? \"days\" : \"day\" }} after completion of</p>\n  </div>\n  <div class=\"frequency-on-completion-of-row\">\n    <div class=\"responsibility\">\n      <cs-select [class.disabled]=\"placeholder === 'Loading...'\" [(ngModel)]=\"selectedResponsibilityDetails\"\n        (valueChanged)=\"onResponsibilitySelection($event)\" [placeholder]=\"placeholder\">\n        <cs-option *ngFor=\"\n            let responsibility of onCompletionOfResponsibility;\n            let i = index\n          \" [value]=\"responsibility\" [optionTooltip]=\"responsibility?.ReportName\">{{ responsibility?.ReportName\n          }}</cs-option>\n      </cs-select>\n    </div>\n    <div class=\"time\">\n      <input type=\"text\" readonly aria-label=\"12hr format\" [(ngModel)]=\"onCompletionOfTime\" placeholder=\"Select Time\" />\n    </div>\n  </div>\n  <app-frequency-due-date [id]=\"3\" [pageName]=\"'onCompletion'\" [mode]=\"mode\" [isDeactivated]=\"false\"\n    [completedValue]=\"onCompletionOfWindow\" [notCompletedValue]=\"onCompletionOfFailed\"\n    (valueChange)=\"onValueChange($event)\"></app-frequency-due-date>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::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:30rem}::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;cursor:pointer}::ng-deep .frequency-completion-bottom .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-completion-bottom .time-picker-group .time-field.disable{background:#f1f1f1;border-radius:.25rem}::ng-deep .frequency-completion-bottom .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}::ng-deep .selection-wrap .input-group i{top:12px!important}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { kind: "component", type: TimePickerComponent, selector: "app-time-picker", inputs: ["time"], outputs: ["onTimeSelection"] }, { kind: "component", type: FrequencyDueDateComponent, selector: "app-frequency-due-date", inputs: ["mode", "pageType", "completedRequired", "notCompletedRequired", "completedValue", "notCompletedValue", "deactivateValue", "isDeactivated", "id", "pageName"], outputs: ["valueChange"] }, { kind: "component", type: FrequencyResponsibilityListComponent, selector: "app-frequency-responsibility-list", inputs: ["onCompletionOfResponsibility", "selectedResponsibilityDetails"], outputs: ["backButton", "selectedResponsibility"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyOnCompletionOfComponent, decorators: [{
             type: Component,
@@ -53676,7 +53595,8 @@ class VComplyWorkflowEngineModule {
             RadioListWithPaginationModule,
             LinkResponsibilityModule,
             ProgramListModule,
-            SubResponsibilityComponent], exports: [WorkflowEngineContainerComponent] }); }
+            SubResponsibilityComponent,
+            AvatarV2Component], exports: [WorkflowEngineContainerComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VComplyWorkflowEngineModule, imports: [ReactiveFormsModule,
             CreateAssessmentModule,
             VcomplyEditorModule,
@@ -53719,7 +53639,8 @@ class VComplyWorkflowEngineModule {
             RadioListWithPaginationModule,
             LinkResponsibilityModule,
             ProgramListModule,
-            SubResponsibilityComponent] }); }
+            SubResponsibilityComponent,
+            AvatarV2Component] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VComplyWorkflowEngineModule, decorators: [{
             type: NgModule,
@@ -53862,7 +53783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         RadioListWithPaginationModule,
                         LinkResponsibilityModule,
                         ProgramListModule,
-                        SubResponsibilityComponent
+                        SubResponsibilityComponent,
+                        AvatarV2Component
                     ],
                     exports: [WorkflowEngineContainerComponent],
                 }]