vcomply-workflow-engine 6.1.11 → 6.1.12

package/esm2022/lib/sharedComponents/link-responsibility/link-responsibility.interface.mjs

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluay1yZXNwb25zaWJpbGl0eS5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92eC13b3JrZmxvdy1lbmdpbmUvc3JjL2xpYi9zaGFyZWRDb21wb25lbnRzL2xpbmstcmVzcG9uc2liaWxpdHkvbGluay1yZXNwb25zaWJpbGl0eS5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgUmVzcG9uc2liaWxpdHkge1xuICBba2V5OiBudW1iZXJdOiB7XG4gICAgcmVzcG9uc2liaWxpdHlJZDogbnVtYmVyO1xuICAgIGFzc2lnbmVlSWRzOiBudW1iZXJbXTtcbiAgICByZXNwb25zaWJpbGl0eUNlbnRlcnM6IChudW1iZXIgfCBudWxsKVtdO1xuICAgIHJlcG9ydE5hbWU6IHN0cmluZztcbiAgfTtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluay1yZXNwb25zaWJpbGl0eS5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92eC13b3JrZmxvdy1lbmdpbmUvc3JjL2xpYi9zaGFyZWRDb21wb25lbnRzL2xpbmstcmVzcG9uc2liaWxpdHkvbGluay1yZXNwb25zaWJpbGl0eS5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgUmVzcG9uc2liaWxpdHkge1xuICBba2V5OiBudW1iZXJdOiB7XG4gICAgcmVzcG9uc2liaWxpdHlJZDogbnVtYmVyO1xuICAgIGFzc2lnbmVlSWRzOiBudW1iZXJbXTtcbiAgICByZXNwb25zaWJpbGl0eUNlbnRlcnM6IChudW1iZXIgfCBudWxsKVtdO1xuICAgIHJlcG9ydE5hbWU6IHN0cmluZztcbiAgICBhc3NpZ25lZUJyaWRnZUlkOiBzdHJpbmdbXTtcbiAgICByZXNwb25zaWJpbGl0eUNlbnRlckJyaWRnZUlkOiBzdHJpbmdbXTtcbiAgfTtcbn1cbiJdfQ==

package/esm2022/lib/sharedComponents/pipes/parentResponsibilitySelection.pipe.mjs

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 export class ParentResponsibilitySelectionPipe {
     transform(value, list, isChild = false) {
         if (isChild) {
-            return list.some((ele) => ele.responsibilityId === value?.id &&
+            return list.some((ele) => ele.responsibilityId === value?.rid &&
                 ele.assigneeId === value?.assignees?.userId[0] &&
                 ele.responsibilityCenter === value?.responsibilityCenters[0]);
         }
@@ -19,4 +19,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     pure: false,
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFyZW50UmVzcG9uc2liaWxpdHlTZWxlY3Rpb24ucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Z4LXdvcmtmbG93LWVuZ2luZS9zcmMvbGliL3NoYXJlZENvbXBvbmVudHMvcGlwZXMvcGFyZW50UmVzcG9uc2liaWxpdHlTZWxlY3Rpb24ucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7QUFNcEQsTUFBTSxPQUFPLGlDQUFpQztJQUM1QyxTQUFTLENBQUMsS0FBVSxFQUFFLElBQVcsRUFBRSxVQUFtQixLQUFLO1FBQ3pELElBQUksT0FBTyxFQUFFO1lBQ1QsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUNaLENBQUMsR0FBUSxFQUFFLEVBQUUsQ0FDWCxHQUFHLENBQUMsZ0JBQWdCLEtBQUssS0FBSyxFQUFFLEVBQUU7Z0JBQ2xDLEdBQUcsQ0FBQyxVQUFVLEtBQUssS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDO2dCQUM5QyxHQUFHLENBQUMsb0JBQW9CLEtBQUssS0FBSyxFQUFFLHFCQUFxQixDQUFDLENBQUMsQ0FBQyxDQUMvRCxDQUFDO1NBQ1A7UUFDRCxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFTLEVBQUUsRUFBRSxDQUFDLElBQUksRUFBRSxnQkFBZ0IsS0FBSyxLQUFLLENBQUMsQ0FBQztJQUNwRSxDQUFDOytHQVhVLGlDQUFpQzs2R0FBakMsaUNBQWlDOzs0RkFBakMsaUNBQWlDO2tCQUo3QyxJQUFJO21CQUFDO29CQUNKLElBQUksRUFBRSxnQkFBZ0I7b0JBQ3RCLElBQUksRUFBRSxLQUFLO2lCQUNaIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AUGlwZSh7XG4gIG5hbWU6ICdpc1Jlc3BTZWxlY3RlZCcsXG4gIHB1cmU6IGZhbHNlLFxufSlcbmV4cG9ydCBjbGFzcyBQYXJlbnRSZXNwb25zaWJpbGl0eVNlbGVjdGlvblBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcbiAgdHJhbnNmb3JtKHZhbHVlOiBhbnksIGxpc3Q6IGFueVtdLCBpc0NoaWxkOiBib29sZWFuID0gZmFsc2UpOiBhbnkge1xuICAgIGlmIChpc0NoaWxkKSB7XG4gICAgICAgIHJldHVybiBsaXN0LnNvbWUoXG4gICAgICAgICAgICAoZWxlOiBhbnkpID0+XG4gICAgICAgICAgICAgIGVsZS5yZXNwb25zaWJpbGl0eUlkID09PSB2YWx1ZT8uaWQgJiZcbiAgICAgICAgICAgICAgZWxlLmFzc2lnbmVlSWQgPT09IHZhbHVlPy5hc3NpZ25lZXM/LnVzZXJJZFswXSAmJlxuICAgICAgICAgICAgICBlbGUucmVzcG9uc2liaWxpdHlDZW50ZXIgPT09IHZhbHVlPy5yZXNwb25zaWJpbGl0eUNlbnRlcnNbMF1cbiAgICAgICAgICApO1xuICAgIH1cbiAgICByZXR1cm4gbGlzdC5zb21lKChpdGVtOiBhbnkpID0+IGl0ZW0/LnJlc3BvbnNpYmlsaXR5SWQgPT09IHZhbHVlKTtcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFyZW50UmVzcG9uc2liaWxpdHlTZWxlY3Rpb24ucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Z4LXdvcmtmbG93LWVuZ2luZS9zcmMvbGliL3NoYXJlZENvbXBvbmVudHMvcGlwZXMvcGFyZW50UmVzcG9uc2liaWxpdHlTZWxlY3Rpb24ucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7QUFNcEQsTUFBTSxPQUFPLGlDQUFpQztJQUM1QyxTQUFTLENBQUMsS0FBVSxFQUFFLElBQVcsRUFBRSxVQUFtQixLQUFLO1FBQ3pELElBQUksT0FBTyxFQUFFO1lBQ1QsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUNaLENBQUMsR0FBUSxFQUFFLEVBQUUsQ0FDWCxHQUFHLENBQUMsZ0JBQWdCLEtBQUssS0FBSyxFQUFFLEdBQUc7Z0JBQ25DLEdBQUcsQ0FBQyxVQUFVLEtBQUssS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDO2dCQUM5QyxHQUFHLENBQUMsb0JBQW9CLEtBQUssS0FBSyxFQUFFLHFCQUFxQixDQUFDLENBQUMsQ0FBQyxDQUMvRCxDQUFDO1NBQ1A7UUFDRCxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFTLEVBQUUsRUFBRSxDQUFDLElBQUksRUFBRSxnQkFBZ0IsS0FBSyxLQUFLLENBQUMsQ0FBQztJQUNwRSxDQUFDOytHQVhVLGlDQUFpQzs2R0FBakMsaUNBQWlDOzs0RkFBakMsaUNBQWlDO2tCQUo3QyxJQUFJO21CQUFDO29CQUNKLElBQUksRUFBRSxnQkFBZ0I7b0JBQ3RCLElBQUksRUFBRSxLQUFLO2lCQUNaIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AUGlwZSh7XG4gIG5hbWU6ICdpc1Jlc3BTZWxlY3RlZCcsXG4gIHB1cmU6IGZhbHNlLFxufSlcbmV4cG9ydCBjbGFzcyBQYXJlbnRSZXNwb25zaWJpbGl0eVNlbGVjdGlvblBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcbiAgdHJhbnNmb3JtKHZhbHVlOiBhbnksIGxpc3Q6IGFueVtdLCBpc0NoaWxkOiBib29sZWFuID0gZmFsc2UpOiBhbnkge1xuICAgIGlmIChpc0NoaWxkKSB7XG4gICAgICAgIHJldHVybiBsaXN0LnNvbWUoXG4gICAgICAgICAgICAoZWxlOiBhbnkpID0+XG4gICAgICAgICAgICAgIGVsZS5yZXNwb25zaWJpbGl0eUlkID09PSB2YWx1ZT8ucmlkICYmXG4gICAgICAgICAgICAgIGVsZS5hc3NpZ25lZUlkID09PSB2YWx1ZT8uYXNzaWduZWVzPy51c2VySWRbMF0gJiZcbiAgICAgICAgICAgICAgZWxlLnJlc3BvbnNpYmlsaXR5Q2VudGVyID09PSB2YWx1ZT8ucmVzcG9uc2liaWxpdHlDZW50ZXJzWzBdXG4gICAgICAgICAgKTtcbiAgICB9XG4gICAgcmV0dXJuIGxpc3Quc29tZSgoaXRlbTogYW55KSA9PiBpdGVtPy5yZXNwb25zaWJpbGl0eUlkID09PSB2YWx1ZSk7XG4gIH1cbn1cbiJdfQ==

package/fesm2022/vcomply-workflow-engine.mjs

@@ -12361,7 +12361,7 @@ class FrequencyService {
         const headers = new HttpHeaders()
             .set('token', this.authService.getAuthorizationToken())
             .set('biz_cycle', formattedCycle);
-        return this.http.get(this.env.complianceGet + API.responsibilityList + `&page=${pageNo}&limit=10&filterData[searchTerm]=${payload?.searchText}`, { headers });
+        return this.http.get(this.env.complianceGet + API.responsibilityList + `&page=${pageNo}&limit=10${payload?.searchText ? `&filterData[searchTerm]=${payload?.searchText}` : ''}`, { headers });
     }
     formatDate() {
         const currentDate = new Date();
@@ -13938,7 +13938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class ParentResponsibilitySelectionPipe {
     transform(value, list, isChild = false) {
         if (isChild) {
-            return list.some((ele) => ele.responsibilityId === value?.id &&
+            return list.some((ele) => ele.responsibilityId === value?.rid &&
                 ele.assigneeId === value?.assignees?.userId[0] &&
                 ele.responsibilityCenter === value?.responsibilityCenters[0]);
         }
@@ -14050,7 +14050,7 @@ class LinkResponsibilityListComponent {
         if (!Array.isArray(this.selectedResponsibilityValues))
             return;
         this.selectedResponsibilityValues =
-            this.selectedResponsibilityValues.flatMap(({ responsibilityId, reportName, assigneeIds = [], responsibilityCenters = [], }) => {
+            this.selectedResponsibilityValues.flatMap(({ responsibilityId, reportName, assigneeIds = [], responsibilityCenters = [], assigneeBridgeId = [], responsibilityCenterBridgeId = [], }) => {
                 if (!Array.isArray(assigneeIds) ||
                     !Array.isArray(responsibilityCenters))
                     return [];
@@ -14059,6 +14059,8 @@ class LinkResponsibilityListComponent {
                     assigneeId,
                     responsibilityCenter,
                     reportName,
+                    assigneeBridgeId,
+                    responsibilityCenterBridgeId,
                 })));
             });
     }
@@ -14136,6 +14138,8 @@ class LinkResponsibilityListComponent {
                 responsibilityId,
                 assigneeIds: [],
                 responsibilityCenters: [],
+                assigneeBridgeId: [],
+                responsibilityCenterBridgeId: [],
                 reportName: item?.reportName,
             };
         }
@@ -14148,6 +14152,24 @@ class LinkResponsibilityListComponent {
             if (!result[responsibilityId]?.responsibilityCenters?.includes(responsibilityCenter)) {
                 result[responsibilityId]?.responsibilityCenters?.push(responsibilityCenter);
             }
+            this.getBridgeIds(result);
+        }
+    }
+    getBridgeIds(result) {
+        for (const key in result) {
+            const item = result[key];
+            item.assigneeIds.forEach((assigneeId) => {
+                const assignee = this.userList.find((user) => user?.id === assigneeId);
+                if (!item.assigneeBridgeId.find((id) => id === assignee?.uid)) {
+                    item.assigneeBridgeId?.push(assignee?.uid);
+                }
+            });
+            item.responsibilityCenters.forEach((responsibilityCenter) => {
+                const rc = this.rcList.find((rc) => rc?.id === responsibilityCenter);
+                if (!item.responsibilityCenterBridgeId.find((id) => id === rc?.rcid)) {
+                    item.responsibilityCenterBridgeId?.push(rc?.rcid);
+                }
+            });
         }
     }
     onClickTabChange(tab) {
@@ -14183,10 +14205,10 @@ class LinkResponsibilityListComponent {
         this.isOnCompletionRc = this.feature.isFeatureEnabled('ff_on_completion_rc');
     }
     selectResp(resp, mode) {
-        const selectedResp = this.generateResponsibilityId(resp);
-        if (!selectedResp?.length)
+        const checkedResp = this.generateResponsibilityId(resp);
+        if (!checkedResp?.length)
             return;
-        selectedResp.forEach((item) => {
+        checkedResp.forEach((item) => {
             const existsIndex = this.selectedResponsibilityValues.findIndex((ele) => ele.responsibilityId === item.responsibilityId &&
                 ele.assigneeId === item.assigneeId &&
                 ele.responsibilityCenter === item.responsibilityCenter);
@@ -14222,10 +14244,12 @@ class LinkResponsibilityListComponent {
     }
     generateRespObj(resp, assigneeId, responsibilityCenter) {
         return {
-            responsibilityId: resp?.id,
+            responsibilityId: resp?.rid,
             assigneeId: assigneeId,
             responsibilityCenter: responsibilityCenter,
             reportName: resp?.title,
+            assigneeBridgeId: [],
+            responsibilityCenterBridgeId: [],
         };
     }
     viewResponsibility(id) {
@@ -14279,11 +14303,11 @@ class LinkResponsibilityListComponent {
         return newResponsibilities;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkResponsibilityListComponent, deps: [{ token: FrequencyService }, { token: ComplianceCommonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinkResponsibilityListComponent, selector: "app-link-responsibility-list", inputs: { onCompletionOfResponsibility: "onCompletionOfResponsibility", feature: "feature", respIdKey: "respIdKey", selectedResponsibilityValues: "selectedResponsibilityValues", radioSelection: "radioSelection" }, outputs: { closeButton: "closeButton", selectedResponsibility: "selectedResponsibility" }, ngImport: i0, template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div\n    class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\"\n  >\n    <div class=\"vx-d-flex vx-align-center\">\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    <div\n      *ngIf=\"responsibilitiesData?.allResponsibilityCount > 0\"\n      class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n    >\n      <ng-container *ngFor=\"let tab of responsibilityTabs; let i = index\">\n        <div\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"currentTab === i + 1 || (currentTab === 0 && i === 3)\"\n          (click)=\"onClickTabChange(tab)\"\n          [class.pointer-none]=\"responsibilityLoader\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >{{ tab.name }}</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{\n                responsibilityTabCount[typeToCountProperty[tab.type]] || 0\n              }}</span\n            >\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"responsibilitySearchText\"\n        (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\"\n      />\n    </div>\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div\n      class=\"frequency-responsibility-list-mid vx-mb-4\"\n      [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \"\n    >\n      <app-no-data\n        *ngIf=\"\n          responsibilitiesData?.data?.length === 0 && !responsibilityLoader\n        \"\n        [noDataImage]=\"noDataImagePath\"\n        [noDataText]=\"noDataMessage\"\n      ></app-no-data>\n      <ng-container\n        *ngIf=\"responsibilitiesData?.data?.length > 0 && !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              #\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            >\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            >\n              RESPONSIBILITY CENTER\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <ng-container\n            *ngFor=\"\n              let responsibility of responsibilitiesData?.data;\n              let i = index\n            \"\n          >\n            <div\n              class=\"table-row clickable\"\n              [class.active]=\"\n                responsibility?.id\n                  | isRespSelected : selectedResponsibilityValues\n              \"\n              [class.open]=\"this.viewResponsibilityId === responsibility?.id\"\n              [class.selected]=\"\n                responsibility?.id\n                  | isRespSelected : selectedResponsibilityValues\n              \"\n            >\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n              >\n                <div\n                  class=\"sr-no\"\n                  [appTooltip]=\"'1'\"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ responsibilitiesData?.responsibilities_from + i }}\n                </div>\n                <app-cs-checkbox\n                  [value]=\"responsibility?.id\"\n                  [ngValue]=\"\n                    responsibility?.id\n                      | isRespSelected : selectedResponsibilityValues\n                  \"\n                  (ngValueChange)=\"selectResp(responsibility, $event)\"\n                >\n                </app-cs-checkbox>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\"\n              >\n                <div class=\"avatarFileArea vx-d-flex vx-align-center\">\n                  <app-avatar\n                    [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\"\n                    [userDetails]=\"\n                      [responsibility?.assignor] | getUserDetails : userList\n                    \"\n                  ></app-avatar>\n                  <ng-container\n                    *ngIf=\"\n                      responsibility?.assignees?.userId\n                        | getUserDetails : userList as assigneeDetails\n                    \"\n                  >\n                    <app-avatar\n                      [avatarClass]=\"AVATAR_CONSTANTS.COLOR.GREEN\"\n                      [type]=\"\n                        assigneeDetails?.length > 1\n                          ? AVATAR_CONSTANTS.ANYONE\n                          : AVATAR_CONSTANTS.ALL\n                      \"\n                      [userDetails]=\"assigneeDetails\"\n                      appStopPropagation\n                    ></app-avatar>\n                  </ng-container>\n                </div>\n                <div class=\"name-details\">\n                  <div\n                    class=\"value vx-fs-13 vx-neutral-100 vx-lh-5\"\n                    [appTooltip]=\"responsibility?.title\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ responsibility?.title }}\n                  </div>\n                  <div class=\"vx-d-flex vx-align-center\">\n                    <div\n                      class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\"\n                    >\n                      RESPONSIBILITY CENTER:\n                    </div>\n                    <ng-container\n                      *ngIf=\"\n                        responsibility?.responsibilityCenters\n                          | getRCList : rcList : allRcList as rcList\n                      \"\n                    >\n                      <div\n                        class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\"\n                        [appTooltip]=\"rcList?.length > 0 ? rcList[0] : '--'\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                      >\n                        {{ rcList?.length > 0 ? rcList[0] : \"--\" }}\n                      </div>\n                    </ng-container>\n                    <button\n                      *ngIf=\"responsibility?.responsibilityCenters?.length > 1\"\n                      class=\"vx-badgeNum xs minimal\"\n                      appPopover\n                      (click)=\"respPopover.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{ responsibility?.responsibilityCenters?.length - 1 }}\n                    </button>\n                    <app-popover #respPopover>\n                      <div class=\"wf-action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let rc of rcList | slice : 1\">\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [appTooltip]=\"rc\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                                >{{ rc }}</span\n                              >\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n                </div>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n              >\n                <button\n                  *ngIf=\"\n                    responsibility?.assigneeType === AVATAR_CONSTANTS.ALL.toLowerCase() ||\n                    responsibility?.rcType === AVATAR_CONSTANTS.ALL.toLowerCase()\n                  \"\n                  (click)=\"viewResponsibility(responsibility?.id)\"\n                  class=\"vx-icon-button minimal small\"\n                >\n                  <i class=\"icons\">\n                    {{\n                      viewResponsibilityId === responsibility?.id\n                        ? \"&#xe9e7;\"\n                        : \"&#xe9e8;\"\n                    }}</i\n                  >\n                </button>\n              </div>\n            </div>\n            <div\n              *ngIf=\"\n                viewResponsibilityId === responsibility?.id &&\n                viewResponsibilityData[viewResponsibilityId]?.length\n              \"\n              class=\"open-more\"\n            >\n              <div\n                class=\"table-row\"\n                *ngFor=\"\n                  let data of viewResponsibilityData[viewResponsibilityId]\n                \"\n              >\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n                >\n                  <app-cs-checkbox\n                    [value]=\"data?.id\"\n                    [ngValue]=\"\n                      data\n                        | isRespSelected : selectedResponsibilityValues : true\n                    \"\n                    (ngValueChange)=\"selectResp(data, $event)\"\n                  >\n                  </app-cs-checkbox>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\"\n                >\n                  <ng-container\n                    *ngIf=\"\n                      data?.assignees?.userId\n                        | getUserDetails : userList as assigneeDetails\n                    \"\n                  >\n                  \n                  <div class=\"avatar-area\">\n                    <app-avatar\n                      [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\"\n                      [userDetails]=\"assigneeDetails\"\n                    ></app-avatar>\n                  </div>\n                  <div class=\"name-details\">\n                    <div\n                      class=\"value vx-fs-11 vx-neutral-100 vx-lh-4\"\n                      [appTooltip]=\"assigneeDetails[0]?.name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      {{ assigneeDetails[0]?.name }}\n                    </div>\n                    <div class=\"vx-d-flex vx-align-center\">\n                      <div\n                        class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\"\n                      >\n                        RESPONSIBILITY CENTER:\n                      </div>\n                      <ng-container\n                        *ngIf=\"\n                          data?.responsibilityCenters\n                            | getRCList : rcList : allRcList as childRcList\n                        \"\n                      >\n                        <div\n                          class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\"\n                          [appTooltip]=\"\n                            childRcList?.length > 0 ? childRcList[0] : '--'\n                          \"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                        >\n                          {{ childRcList?.length > 0 ? childRcList[0] : \"--\" }}\n                        </div>\n                      </ng-container>\n                    </div>\n                  </div>\n                  </ng-container>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                ></div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-pagination\n      *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\n      [start]=\"responsibilitiesData?.responsibilities_from\"\n      [end]=\"responsibilitiesData?.responsibilities_to\"\n      [total]=\"responsibilitiesData?.total_responsibilities\"\n      [pageCount]=\"responsibilitiesData?.total_pages\"\n      [currentPage]=\"responsibilitiesData?.responsibilityCurrentPage\"\n      (selectedPage)=\"responsibilityPageChange($event)\"\n    >\n    </app-pagination>\n    <app-floating-bar\n      *ngIf=\"!responsibilityLoader\"\n      [selectedData]=\"responsibilityFloaterBarData\"\n      [displayElementKey]=\"'ReportName'\"\n      (closeList)=\"back()\"\n      (closeEvent)=\"save($event)\"\n      (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!responsibilityFloaterBarData?.length\"\n      [isResponsibility]=\"true\"\n      [singularText]=\"floaterBarText.SINGULAR_TEXT\"\n      [pluralText]=\"floaterBarText.PLURAL_TEXT\"\n    ></app-floating-bar>\n  </div>\n</div>\n", 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\";@import\"https://cdn.v-comply.com/design-system/css/badge/badge.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:31.25rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{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(100vh - 2.75rem);padding: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 #cdced6;border-radius:.25rem;width:100%;font-size:14px;color:#787a8c}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#787a8c;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#e3e3e9}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 14rem);width:calc(100% + 1rem);padding-right:1rem;overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 16rem)}::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 #e3e3e9;margin-bottom:.25rem;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover{background:#f9f9fa}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-checkbox{background:#fff;opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.open{background:#f2f2f5}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.open .table-column.serial .sr-no{background:#f2f2f5}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.selected .table-column.serial app-cs-checkbox{background:#fff;opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.selected .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .clickable{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-body .open-more{background:#f2f2f5;border:1px solid #e3e3e9;border-radius:0 0 .25rem .25rem;position:relative;top:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row{background:transparent;border-radius:0 0 .25rem .25rem;border:none;margin:0}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column{min-height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.serial .sr-no{background:#f2f2f5;height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.serial app-cs-checkbox{background:#fff;border-radius:.25rem;opacity:1;top:1rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area{padding-left:1.25rem;position:relative;width:5.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area:before{background:#e3e3e9;border-radius:1.25rem;content:\"\";position:absolute;left:9px;top:.625rem;width:.5rem;height:.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area:after{background:#e3e3e9;content:\"\";position:absolute;left:.75rem;top:-.625rem;width:1px;height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .name-details{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .name-details:before{background:#e3e3e9;content:\"\";position:absolute;left:0;right:0;bottom:-.5rem;height:1px;width:100%}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:last-of-type .table-column.responsibility-name .avatar-area:after,::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:only-of-type .table-column.responsibility-name .avatar-area:after{height:1.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:last-of-type .table-column.responsibility-name .name-details:before,::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:only-of-type .table-column.responsibility-name .name-details:before{display:none}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:left;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#787a8c;min-height:4.25rem;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:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;display:flex;height:4.25rem;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-checkbox{position:absolute;top:1.625rem;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-checkbox .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-checkbox{display:flex}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .selected .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .selected app-cs-checkbox{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .avatarFileArea{width:3.75rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .avatarFileArea app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name{width:calc(100% - 4.5rem);min-width:calc(100% - 4.5rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .vx-avatar-group .vx-avatar.pill-avatars .count-pill.green{background:#34aa44}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .start{color:#cdced6}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .start.active{color:#f4c84a}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details{width:calc(100% - 6rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details .resp-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 12rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:2.5rem;min-width:2.5rem}@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 .avatar-card .closeBtn{cursor:pointer}.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { 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: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: AvatarComponent, selector: "app-avatar", inputs: ["userDetails", "type", "avatarClass"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: GetUserDetailsPipe, name: "getUserDetails" }, { kind: "pipe", type: GetRCListPipe, name: "getRCList" }, { kind: "pipe", type: ParentResponsibilitySelectionPipe, name: "isRespSelected" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinkResponsibilityListComponent, selector: "app-link-responsibility-list", inputs: { onCompletionOfResponsibility: "onCompletionOfResponsibility", feature: "feature", respIdKey: "respIdKey", selectedResponsibilityValues: "selectedResponsibilityValues", radioSelection: "radioSelection" }, outputs: { closeButton: "closeButton", selectedResponsibility: "selectedResponsibility" }, ngImport: i0, template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div\n    class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\"\n  >\n    <div class=\"vx-d-flex vx-align-center\">\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    <div\n      *ngIf=\"responsibilitiesData?.allResponsibilityCount > 0\"\n      class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n    >\n      <ng-container *ngFor=\"let tab of responsibilityTabs; let i = index\">\n        <div\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"currentTab === i + 1 || (currentTab === 0 && i === 3)\"\n          (click)=\"onClickTabChange(tab)\"\n          [class.pointer-none]=\"responsibilityLoader\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >{{ tab.name }}</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{\n                responsibilityTabCount[typeToCountProperty[tab.type]] || 0\n              }}</span\n            >\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"responsibilitySearchText\"\n        (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\"\n      />\n    </div>\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div\n      class=\"frequency-responsibility-list-mid vx-mb-4\"\n      [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \"\n    >\n      <app-no-data\n        *ngIf=\"\n          responsibilitiesData?.data?.length === 0 && !responsibilityLoader\n        \"\n        [noDataImage]=\"noDataImagePath\"\n        [noDataText]=\"noDataMessage\"\n      ></app-no-data>\n      <ng-container\n        *ngIf=\"responsibilitiesData?.data?.length > 0 && !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              #\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            >\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            >\n              RESPONSIBILITY CENTER\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <ng-container\n            *ngFor=\"\n              let responsibility of responsibilitiesData?.data;\n              let i = index\n            \"\n          >\n            <div\n              class=\"table-row clickable\"\n              [class.active]=\"\n                responsibility?.rid\n                  | isRespSelected : selectedResponsibilityValues\n              \"\n              [class.open]=\"this.viewResponsibilityId === responsibility?.id\"\n              [class.selected]=\"\n                responsibility?.rid\n                  | isRespSelected : selectedResponsibilityValues\n              \"\n            >\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n              >\n                <div\n                  class=\"sr-no\"\n                  [appTooltip]=\"'1'\"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ responsibilitiesData?.responsibilities_from + i }}\n                </div>\n                <app-cs-checkbox\n                  [value]=\"responsibility?.rid\"\n                  [ngValue]=\"\n                    responsibility?.rid\n                      | isRespSelected : selectedResponsibilityValues\n                  \"\n                  (ngValueChange)=\"selectResp(responsibility, $event)\"\n                >\n                </app-cs-checkbox>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\"\n              >\n                <div class=\"avatarFileArea vx-d-flex vx-align-center\">\n                  <app-avatar\n                    [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\"\n                    [userDetails]=\"\n                      [responsibility?.assignor] | getUserDetails : userList\n                    \"\n                  ></app-avatar>\n                  <ng-container\n                    *ngIf=\"\n                      responsibility?.assignees?.userId\n                        | getUserDetails : userList as assigneeDetails\n                    \"\n                  >\n                    <app-avatar\n                      [avatarClass]=\"AVATAR_CONSTANTS.COLOR.GREEN\"\n                      [type]=\"\n                        assigneeDetails?.length > 1\n                          ? AVATAR_CONSTANTS.ANYONE\n                          : AVATAR_CONSTANTS.ALL\n                      \"\n                      [userDetails]=\"assigneeDetails\"\n                      appStopPropagation\n                    ></app-avatar>\n                  </ng-container>\n                </div>\n                <div class=\"name-details\">\n                  <div\n                    class=\"value vx-fs-13 vx-neutral-100 vx-lh-5\"\n                    [appTooltip]=\"responsibility?.title\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ responsibility?.title }}\n                  </div>\n                  <div class=\"vx-d-flex vx-align-center\">\n                    <div\n                      class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\"\n                    >\n                      RESPONSIBILITY CENTER:\n                    </div>\n                    <ng-container\n                      *ngIf=\"\n                        responsibility?.responsibilityCenters\n                          | getRCList : rcList : allRcList as rcList\n                      \"\n                    >\n                      <div\n                        class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\"\n                        [appTooltip]=\"rcList?.length > 0 ? rcList[0] : '--'\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                      >\n                        {{ rcList?.length > 0 ? rcList[0] : \"--\" }}\n                      </div>\n                    </ng-container>\n                    <button\n                      *ngIf=\"responsibility?.responsibilityCenters?.length > 1\"\n                      class=\"vx-badgeNum xs minimal\"\n                      appPopover\n                      (click)=\"respPopover.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{ responsibility?.responsibilityCenters?.length - 1 }}\n                    </button>\n                    <app-popover #respPopover>\n                      <div class=\"wf-action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let rc of rcList | slice : 1\">\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [appTooltip]=\"rc\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                                >{{ rc }}</span\n                              >\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n                </div>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n              >\n                <button\n                  *ngIf=\"\n                    responsibility?.assigneeType === AVATAR_CONSTANTS.ALL.toLowerCase() ||\n                    responsibility?.rcType === AVATAR_CONSTANTS.ALL.toLowerCase()\n                  \"\n                  (click)=\"viewResponsibility(responsibility?.id)\"\n                  class=\"vx-icon-button minimal small\"\n                >\n                  <i class=\"icons\">\n                    {{\n                      viewResponsibilityId === responsibility?.id\n                        ? \"&#xe9e7;\"\n                        : \"&#xe9e8;\"\n                    }}</i\n                  >\n                </button>\n              </div>\n            </div>\n            <div\n              *ngIf=\"\n                viewResponsibilityId === responsibility?.id &&\n                viewResponsibilityData[viewResponsibilityId]?.length\n              \"\n              class=\"open-more\"\n            >\n              <div\n                class=\"table-row\"\n                *ngFor=\"\n                  let data of viewResponsibilityData[viewResponsibilityId]\n                \"\n              >\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n                >\n                  <app-cs-checkbox\n                    [value]=\"data?.rid\"\n                    [ngValue]=\"\n                      data\n                        | isRespSelected : selectedResponsibilityValues : true\n                    \"\n                    (ngValueChange)=\"selectResp(data, $event)\"\n                  >\n                  </app-cs-checkbox>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\"\n                >\n                  <ng-container\n                    *ngIf=\"\n                      data?.assignees?.userId\n                        | getUserDetails : userList as assigneeDetails\n                    \"\n                  >\n                  \n                  <div class=\"avatar-area\">\n                    <app-avatar\n                      [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\"\n                      [userDetails]=\"assigneeDetails\"\n                    ></app-avatar>\n                  </div>\n                  <div class=\"name-details\">\n                    <div\n                      class=\"value vx-fs-11 vx-neutral-100 vx-lh-4\"\n                      [appTooltip]=\"assigneeDetails[0]?.name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      {{ assigneeDetails[0]?.name }}\n                    </div>\n                    <div class=\"vx-d-flex vx-align-center\">\n                      <div\n                        class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\"\n                      >\n                        RESPONSIBILITY CENTER:\n                      </div>\n                      <ng-container\n                        *ngIf=\"\n                          data?.responsibilityCenters\n                            | getRCList : rcList : allRcList as childRcList\n                        \"\n                      >\n                        <div\n                          class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\"\n                          [appTooltip]=\"\n                            childRcList?.length > 0 ? childRcList[0] : '--'\n                          \"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                        >\n                          {{ childRcList?.length > 0 ? childRcList[0] : \"--\" }}\n                        </div>\n                      </ng-container>\n                    </div>\n                  </div>\n                  </ng-container>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                ></div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-pagination\n      *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\n      [start]=\"responsibilitiesData?.responsibilities_from\"\n      [end]=\"responsibilitiesData?.responsibilities_to\"\n      [total]=\"responsibilitiesData?.total_responsibilities\"\n      [pageCount]=\"responsibilitiesData?.total_pages\"\n      [currentPage]=\"responsibilitiesData?.responsibilityCurrentPage\"\n      (selectedPage)=\"responsibilityPageChange($event)\"\n    >\n    </app-pagination>\n    <app-floating-bar\n      *ngIf=\"!responsibilityLoader\"\n      [selectedData]=\"responsibilityFloaterBarData\"\n      [displayElementKey]=\"'ReportName'\"\n      (closeList)=\"back()\"\n      (closeEvent)=\"save($event)\"\n      (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!responsibilityFloaterBarData?.length\"\n      [isResponsibility]=\"true\"\n      [singularText]=\"floaterBarText.SINGULAR_TEXT\"\n      [pluralText]=\"floaterBarText.PLURAL_TEXT\"\n    ></app-floating-bar>\n  </div>\n</div>\n", 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\";@import\"https://cdn.v-comply.com/design-system/css/badge/badge.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:31.25rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{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(100vh - 2.75rem);padding: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 #cdced6;border-radius:.25rem;width:100%;font-size:14px;color:#787a8c}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#787a8c;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#e3e3e9}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 14rem);width:calc(100% + 1rem);padding-right:1rem;overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 16rem)}::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 #e3e3e9;margin-bottom:.25rem;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover{background:#f9f9fa}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-checkbox{background:#fff;opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.open{background:#f2f2f5}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.open .table-column.serial .sr-no{background:#f2f2f5}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.selected .table-column.serial app-cs-checkbox{background:#fff;opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.selected .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .clickable{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-body .open-more{background:#f2f2f5;border:1px solid #e3e3e9;border-radius:0 0 .25rem .25rem;position:relative;top:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row{background:transparent;border-radius:0 0 .25rem .25rem;border:none;margin:0}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column{min-height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.serial .sr-no{background:#f2f2f5;height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.serial app-cs-checkbox{background:#fff;border-radius:.25rem;opacity:1;top:1rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area{padding-left:1.25rem;position:relative;width:5.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area:before{background:#e3e3e9;border-radius:1.25rem;content:\"\";position:absolute;left:9px;top:.625rem;width:.5rem;height:.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area:after{background:#e3e3e9;content:\"\";position:absolute;left:.75rem;top:-.625rem;width:1px;height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .name-details{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .name-details:before{background:#e3e3e9;content:\"\";position:absolute;left:0;right:0;bottom:-.5rem;height:1px;width:100%}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:last-of-type .table-column.responsibility-name .avatar-area:after,::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:only-of-type .table-column.responsibility-name .avatar-area:after{height:1.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:last-of-type .table-column.responsibility-name .name-details:before,::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:only-of-type .table-column.responsibility-name .name-details:before{display:none}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:left;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#787a8c;min-height:4.25rem;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:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;display:flex;height:4.25rem;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-checkbox{position:absolute;top:1.625rem;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-checkbox .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-checkbox{display:flex}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .selected .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .selected app-cs-checkbox{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .avatarFileArea{width:3.75rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .avatarFileArea app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name{width:calc(100% - 4.5rem);min-width:calc(100% - 4.5rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .vx-avatar-group .vx-avatar.pill-avatars .count-pill.green{background:#34aa44}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .start{color:#cdced6}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .start.active{color:#f4c84a}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details{width:calc(100% - 6rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details .resp-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 12rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:2.5rem;min-width:2.5rem}@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 .avatar-card .closeBtn{cursor:pointer}.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { 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: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: AvatarComponent, selector: "app-avatar", inputs: ["userDetails", "type", "avatarClass"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: GetUserDetailsPipe, name: "getUserDetails" }, { kind: "pipe", type: GetRCListPipe, name: "getRCList" }, { kind: "pipe", type: ParentResponsibilitySelectionPipe, name: "isRespSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkResponsibilityListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-link-responsibility-list', template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div\n    class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\"\n  >\n    <div class=\"vx-d-flex vx-align-center\">\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    <div\n      *ngIf=\"responsibilitiesData?.allResponsibilityCount > 0\"\n      class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n    >\n      <ng-container *ngFor=\"let tab of responsibilityTabs; let i = index\">\n        <div\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"currentTab === i + 1 || (currentTab === 0 && i === 3)\"\n          (click)=\"onClickTabChange(tab)\"\n          [class.pointer-none]=\"responsibilityLoader\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >{{ tab.name }}</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{\n                responsibilityTabCount[typeToCountProperty[tab.type]] || 0\n              }}</span\n            >\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"responsibilitySearchText\"\n        (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\"\n      />\n    </div>\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div\n      class=\"frequency-responsibility-list-mid vx-mb-4\"\n      [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \"\n    >\n      <app-no-data\n        *ngIf=\"\n          responsibilitiesData?.data?.length === 0 && !responsibilityLoader\n        \"\n        [noDataImage]=\"noDataImagePath\"\n        [noDataText]=\"noDataMessage\"\n      ></app-no-data>\n      <ng-container\n        *ngIf=\"responsibilitiesData?.data?.length > 0 && !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              #\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            >\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            >\n              RESPONSIBILITY CENTER\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <ng-container\n            *ngFor=\"\n              let responsibility of responsibilitiesData?.data;\n              let i = index\n            \"\n          >\n            <div\n              class=\"table-row clickable\"\n              [class.active]=\"\n                responsibility?.id\n                  | isRespSelected : selectedResponsibilityValues\n              \"\n              [class.open]=\"this.viewResponsibilityId === responsibility?.id\"\n              [class.selected]=\"\n                responsibility?.id\n                  | isRespSelected : selectedResponsibilityValues\n              \"\n            >\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n              >\n                <div\n                  class=\"sr-no\"\n                  [appTooltip]=\"'1'\"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ responsibilitiesData?.responsibilities_from + i }}\n                </div>\n                <app-cs-checkbox\n                  [value]=\"responsibility?.id\"\n                  [ngValue]=\"\n                    responsibility?.id\n                      | isRespSelected : selectedResponsibilityValues\n                  \"\n                  (ngValueChange)=\"selectResp(responsibility, $event)\"\n                >\n                </app-cs-checkbox>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\"\n              >\n                <div class=\"avatarFileArea vx-d-flex vx-align-center\">\n                  <app-avatar\n                    [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\"\n                    [userDetails]=\"\n                      [responsibility?.assignor] | getUserDetails : userList\n                    \"\n                  ></app-avatar>\n                  <ng-container\n                    *ngIf=\"\n                      responsibility?.assignees?.userId\n                        | getUserDetails : userList as assigneeDetails\n                    \"\n                  >\n                    <app-avatar\n                      [avatarClass]=\"AVATAR_CONSTANTS.COLOR.GREEN\"\n                      [type]=\"\n                        assigneeDetails?.length > 1\n                          ? AVATAR_CONSTANTS.ANYONE\n                          : AVATAR_CONSTANTS.ALL\n                      \"\n                      [userDetails]=\"assigneeDetails\"\n                      appStopPropagation\n                    ></app-avatar>\n                  </ng-container>\n                </div>\n                <div class=\"name-details\">\n                  <div\n                    class=\"value vx-fs-13 vx-neutral-100 vx-lh-5\"\n                    [appTooltip]=\"responsibility?.title\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ responsibility?.title }}\n                  </div>\n                  <div class=\"vx-d-flex vx-align-center\">\n                    <div\n                      class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\"\n                    >\n                      RESPONSIBILITY CENTER:\n                    </div>\n                    <ng-container\n                      *ngIf=\"\n                        responsibility?.responsibilityCenters\n                          | getRCList : rcList : allRcList as rcList\n                      \"\n                    >\n                      <div\n                        class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\"\n                        [appTooltip]=\"rcList?.length > 0 ? rcList[0] : '--'\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                      >\n                        {{ rcList?.length > 0 ? rcList[0] : \"--\" }}\n                      </div>\n                    </ng-container>\n                    <button\n                      *ngIf=\"responsibility?.responsibilityCenters?.length > 1\"\n                      class=\"vx-badgeNum xs minimal\"\n                      appPopover\n                      (click)=\"respPopover.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{ responsibility?.responsibilityCenters?.length - 1 }}\n                    </button>\n                    <app-popover #respPopover>\n                      <div class=\"wf-action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let rc of rcList | slice : 1\">\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [appTooltip]=\"rc\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                                >{{ rc }}</span\n                              >\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n                </div>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n              >\n                <button\n                  *ngIf=\"\n                    responsibility?.assigneeType === AVATAR_CONSTANTS.ALL.toLowerCase() ||\n                    responsibility?.rcType === AVATAR_CONSTANTS.ALL.toLowerCase()\n                  \"\n                  (click)=\"viewResponsibility(responsibility?.id)\"\n                  class=\"vx-icon-button minimal small\"\n                >\n                  <i class=\"icons\">\n                    {{\n                      viewResponsibilityId === responsibility?.id\n                        ? \"&#xe9e7;\"\n                        : \"&#xe9e8;\"\n                    }}</i\n                  >\n                </button>\n              </div>\n            </div>\n            <div\n              *ngIf=\"\n                viewResponsibilityId === responsibility?.id &&\n                viewResponsibilityData[viewResponsibilityId]?.length\n              \"\n              class=\"open-more\"\n            >\n              <div\n                class=\"table-row\"\n                *ngFor=\"\n                  let data of viewResponsibilityData[viewResponsibilityId]\n                \"\n              >\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n                >\n                  <app-cs-checkbox\n                    [value]=\"data?.id\"\n                    [ngValue]=\"\n                      data\n                        | isRespSelected : selectedResponsibilityValues : true\n                    \"\n                    (ngValueChange)=\"selectResp(data, $event)\"\n                  >\n                  </app-cs-checkbox>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\"\n                >\n                  <ng-container\n                    *ngIf=\"\n                      data?.assignees?.userId\n                        | getUserDetails : userList as assigneeDetails\n                    \"\n                  >\n                  \n                  <div class=\"avatar-area\">\n                    <app-avatar\n                      [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\"\n                      [userDetails]=\"assigneeDetails\"\n                    ></app-avatar>\n                  </div>\n                  <div class=\"name-details\">\n                    <div\n                      class=\"value vx-fs-11 vx-neutral-100 vx-lh-4\"\n                      [appTooltip]=\"assigneeDetails[0]?.name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      {{ assigneeDetails[0]?.name }}\n                    </div>\n                    <div class=\"vx-d-flex vx-align-center\">\n                      <div\n                        class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\"\n                      >\n                        RESPONSIBILITY CENTER:\n                      </div>\n                      <ng-container\n                        *ngIf=\"\n                          data?.responsibilityCenters\n                            | getRCList : rcList : allRcList as childRcList\n                        \"\n                      >\n                        <div\n                          class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\"\n                          [appTooltip]=\"\n                            childRcList?.length > 0 ? childRcList[0] : '--'\n                          \"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                        >\n                          {{ childRcList?.length > 0 ? childRcList[0] : \"--\" }}\n                        </div>\n                      </ng-container>\n                    </div>\n                  </div>\n                  </ng-container>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                ></div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-pagination\n      *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\n      [start]=\"responsibilitiesData?.responsibilities_from\"\n      [end]=\"responsibilitiesData?.responsibilities_to\"\n      [total]=\"responsibilitiesData?.total_responsibilities\"\n      [pageCount]=\"responsibilitiesData?.total_pages\"\n      [currentPage]=\"responsibilitiesData?.responsibilityCurrentPage\"\n      (selectedPage)=\"responsibilityPageChange($event)\"\n    >\n    </app-pagination>\n    <app-floating-bar\n      *ngIf=\"!responsibilityLoader\"\n      [selectedData]=\"responsibilityFloaterBarData\"\n      [displayElementKey]=\"'ReportName'\"\n      (closeList)=\"back()\"\n      (closeEvent)=\"save($event)\"\n      (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!responsibilityFloaterBarData?.length\"\n      [isResponsibility]=\"true\"\n      [singularText]=\"floaterBarText.SINGULAR_TEXT\"\n      [pluralText]=\"floaterBarText.PLURAL_TEXT\"\n    ></app-floating-bar>\n  </div>\n</div>\n", 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\";@import\"https://cdn.v-comply.com/design-system/css/badge/badge.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:31.25rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{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(100vh - 2.75rem);padding: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 #cdced6;border-radius:.25rem;width:100%;font-size:14px;color:#787a8c}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#787a8c;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#e3e3e9}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 14rem);width:calc(100% + 1rem);padding-right:1rem;overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 16rem)}::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 #e3e3e9;margin-bottom:.25rem;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover{background:#f9f9fa}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-checkbox{background:#fff;opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.open{background:#f2f2f5}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.open .table-column.serial .sr-no{background:#f2f2f5}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.selected .table-column.serial app-cs-checkbox{background:#fff;opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.selected .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .clickable{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-body .open-more{background:#f2f2f5;border:1px solid #e3e3e9;border-radius:0 0 .25rem .25rem;position:relative;top:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row{background:transparent;border-radius:0 0 .25rem .25rem;border:none;margin:0}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column{min-height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.serial .sr-no{background:#f2f2f5;height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.serial app-cs-checkbox{background:#fff;border-radius:.25rem;opacity:1;top:1rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area{padding-left:1.25rem;position:relative;width:5.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area:before{background:#e3e3e9;border-radius:1.25rem;content:\"\";position:absolute;left:9px;top:.625rem;width:.5rem;height:.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area:after{background:#e3e3e9;content:\"\";position:absolute;left:.75rem;top:-.625rem;width:1px;height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .name-details{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .name-details:before{background:#e3e3e9;content:\"\";position:absolute;left:0;right:0;bottom:-.5rem;height:1px;width:100%}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:last-of-type .table-column.responsibility-name .avatar-area:after,::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:only-of-type .table-column.responsibility-name .avatar-area:after{height:1.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:last-of-type .table-column.responsibility-name .name-details:before,::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:only-of-type .table-column.responsibility-name .name-details:before{display:none}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:left;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#787a8c;min-height:4.25rem;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:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;display:flex;height:4.25rem;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-checkbox{position:absolute;top:1.625rem;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-checkbox .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-checkbox{display:flex}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .selected .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .selected app-cs-checkbox{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .avatarFileArea{width:3.75rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .avatarFileArea app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name{width:calc(100% - 4.5rem);min-width:calc(100% - 4.5rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .vx-avatar-group .vx-avatar.pill-avatars .count-pill.green{background:#34aa44}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .start{color:#cdced6}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .start.active{color:#f4c84a}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details{width:calc(100% - 6rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details .resp-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 12rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:2.5rem;min-width:2.5rem}@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 .avatar-card .closeBtn{cursor:pointer}.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-link-responsibility-list', template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div\n    class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\"\n  >\n    <div class=\"vx-d-flex vx-align-center\">\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    <div\n      *ngIf=\"responsibilitiesData?.allResponsibilityCount > 0\"\n      class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n    >\n      <ng-container *ngFor=\"let tab of responsibilityTabs; let i = index\">\n        <div\n          class=\"vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\"\n          [class.active]=\"currentTab === i + 1 || (currentTab === 0 && i === 3)\"\n          (click)=\"onClickTabChange(tab)\"\n          [class.pointer-none]=\"responsibilityLoader\"\n        >\n          <div class=\"left vx-d-block vx-w-100\">\n            <div class=\"label vx-d-flex vx-align-center\">\n              <label\n                class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\"\n                >{{ tab.name }}</label\n              >\n            </div>\n          </div>\n          <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n            <span\n              class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\"\n              >{{\n                responsibilityTabCount[typeToCountProperty[tab.type]] || 0\n              }}</span\n            >\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"responsibilitySearchText\"\n        (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\"\n      />\n    </div>\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div\n      class=\"frequency-responsibility-list-mid vx-mb-4\"\n      [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \"\n    >\n      <app-no-data\n        *ngIf=\"\n          responsibilitiesData?.data?.length === 0 && !responsibilityLoader\n        \"\n        [noDataImage]=\"noDataImagePath\"\n        [noDataText]=\"noDataMessage\"\n      ></app-no-data>\n      <ng-container\n        *ngIf=\"responsibilitiesData?.data?.length > 0 && !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              #\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            >\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            >\n              RESPONSIBILITY CENTER\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <ng-container\n            *ngFor=\"\n              let responsibility of responsibilitiesData?.data;\n              let i = index\n            \"\n          >\n            <div\n              class=\"table-row clickable\"\n              [class.active]=\"\n                responsibility?.rid\n                  | isRespSelected : selectedResponsibilityValues\n              \"\n              [class.open]=\"this.viewResponsibilityId === responsibility?.id\"\n              [class.selected]=\"\n                responsibility?.rid\n                  | isRespSelected : selectedResponsibilityValues\n              \"\n            >\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n              >\n                <div\n                  class=\"sr-no\"\n                  [appTooltip]=\"'1'\"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ responsibilitiesData?.responsibilities_from + i }}\n                </div>\n                <app-cs-checkbox\n                  [value]=\"responsibility?.rid\"\n                  [ngValue]=\"\n                    responsibility?.rid\n                      | isRespSelected : selectedResponsibilityValues\n                  \"\n                  (ngValueChange)=\"selectResp(responsibility, $event)\"\n                >\n                </app-cs-checkbox>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\"\n              >\n                <div class=\"avatarFileArea vx-d-flex vx-align-center\">\n                  <app-avatar\n                    [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\"\n                    [userDetails]=\"\n                      [responsibility?.assignor] | getUserDetails : userList\n                    \"\n                  ></app-avatar>\n                  <ng-container\n                    *ngIf=\"\n                      responsibility?.assignees?.userId\n                        | getUserDetails : userList as assigneeDetails\n                    \"\n                  >\n                    <app-avatar\n                      [avatarClass]=\"AVATAR_CONSTANTS.COLOR.GREEN\"\n                      [type]=\"\n                        assigneeDetails?.length > 1\n                          ? AVATAR_CONSTANTS.ANYONE\n                          : AVATAR_CONSTANTS.ALL\n                      \"\n                      [userDetails]=\"assigneeDetails\"\n                      appStopPropagation\n                    ></app-avatar>\n                  </ng-container>\n                </div>\n                <div class=\"name-details\">\n                  <div\n                    class=\"value vx-fs-13 vx-neutral-100 vx-lh-5\"\n                    [appTooltip]=\"responsibility?.title\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ responsibility?.title }}\n                  </div>\n                  <div class=\"vx-d-flex vx-align-center\">\n                    <div\n                      class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\"\n                    >\n                      RESPONSIBILITY CENTER:\n                    </div>\n                    <ng-container\n                      *ngIf=\"\n                        responsibility?.responsibilityCenters\n                          | getRCList : rcList : allRcList as rcList\n                      \"\n                    >\n                      <div\n                        class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\"\n                        [appTooltip]=\"rcList?.length > 0 ? rcList[0] : '--'\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                      >\n                        {{ rcList?.length > 0 ? rcList[0] : \"--\" }}\n                      </div>\n                    </ng-container>\n                    <button\n                      *ngIf=\"responsibility?.responsibilityCenters?.length > 1\"\n                      class=\"vx-badgeNum xs minimal\"\n                      appPopover\n                      (click)=\"respPopover.popover()\"\n                      placement=\"left\"\n                    >\n                      +{{ responsibility?.responsibilityCenters?.length - 1 }}\n                    </button>\n                    <app-popover #respPopover>\n                      <div class=\"wf-action-list\">\n                        <ul class=\"action-item\">\n                          <li *ngFor=\"let rc of rcList | slice : 1\">\n                            <div class=\"avatar-card\">\n                              <span\n                                class=\"value\"\n                                [appTooltip]=\"rc\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                                >{{ rc }}</span\n                              >\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n                </div>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n              >\n                <button\n                  *ngIf=\"\n                    responsibility?.assigneeType === AVATAR_CONSTANTS.ALL.toLowerCase() ||\n                    responsibility?.rcType === AVATAR_CONSTANTS.ALL.toLowerCase()\n                  \"\n                  (click)=\"viewResponsibility(responsibility?.id)\"\n                  class=\"vx-icon-button minimal small\"\n                >\n                  <i class=\"icons\">\n                    {{\n                      viewResponsibilityId === responsibility?.id\n                        ? \"&#xe9e7;\"\n                        : \"&#xe9e8;\"\n                    }}</i\n                  >\n                </button>\n              </div>\n            </div>\n            <div\n              *ngIf=\"\n                viewResponsibilityId === responsibility?.id &&\n                viewResponsibilityData[viewResponsibilityId]?.length\n              \"\n              class=\"open-more\"\n            >\n              <div\n                class=\"table-row\"\n                *ngFor=\"\n                  let data of viewResponsibilityData[viewResponsibilityId]\n                \"\n              >\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n                >\n                  <app-cs-checkbox\n                    [value]=\"data?.rid\"\n                    [ngValue]=\"\n                      data\n                        | isRespSelected : selectedResponsibilityValues : true\n                    \"\n                    (ngValueChange)=\"selectResp(data, $event)\"\n                  >\n                  </app-cs-checkbox>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\"\n                >\n                  <ng-container\n                    *ngIf=\"\n                      data?.assignees?.userId\n                        | getUserDetails : userList as assigneeDetails\n                    \"\n                  >\n                  \n                  <div class=\"avatar-area\">\n                    <app-avatar\n                      [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\"\n                      [userDetails]=\"assigneeDetails\"\n                    ></app-avatar>\n                  </div>\n                  <div class=\"name-details\">\n                    <div\n                      class=\"value vx-fs-11 vx-neutral-100 vx-lh-4\"\n                      [appTooltip]=\"assigneeDetails[0]?.name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      {{ assigneeDetails[0]?.name }}\n                    </div>\n                    <div class=\"vx-d-flex vx-align-center\">\n                      <div\n                        class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\"\n                      >\n                        RESPONSIBILITY CENTER:\n                      </div>\n                      <ng-container\n                        *ngIf=\"\n                          data?.responsibilityCenters\n                            | getRCList : rcList : allRcList as childRcList\n                        \"\n                      >\n                        <div\n                          class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\"\n                          [appTooltip]=\"\n                            childRcList?.length > 0 ? childRcList[0] : '--'\n                          \"\n                          placement=\"bottom-left\"\n                          delay=\"0\"\n                          type=\"black\"\n                          [tooltipMandatory]=\"false\"\n                        >\n                          {{ childRcList?.length > 0 ? childRcList[0] : \"--\" }}\n                        </div>\n                      </ng-container>\n                    </div>\n                  </div>\n                  </ng-container>\n                </div>\n                <div\n                  class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                ></div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-pagination\n      *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\n      [start]=\"responsibilitiesData?.responsibilities_from\"\n      [end]=\"responsibilitiesData?.responsibilities_to\"\n      [total]=\"responsibilitiesData?.total_responsibilities\"\n      [pageCount]=\"responsibilitiesData?.total_pages\"\n      [currentPage]=\"responsibilitiesData?.responsibilityCurrentPage\"\n      (selectedPage)=\"responsibilityPageChange($event)\"\n    >\n    </app-pagination>\n    <app-floating-bar\n      *ngIf=\"!responsibilityLoader\"\n      [selectedData]=\"responsibilityFloaterBarData\"\n      [displayElementKey]=\"'ReportName'\"\n      (closeList)=\"back()\"\n      (closeEvent)=\"save($event)\"\n      (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!responsibilityFloaterBarData?.length\"\n      [isResponsibility]=\"true\"\n      [singularText]=\"floaterBarText.SINGULAR_TEXT\"\n      [pluralText]=\"floaterBarText.PLURAL_TEXT\"\n    ></app-floating-bar>\n  </div>\n</div>\n", 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\";@import\"https://cdn.v-comply.com/design-system/css/badge/badge.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:31.25rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{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(100vh - 2.75rem);padding: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 #cdced6;border-radius:.25rem;width:100%;font-size:14px;color:#787a8c}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#787a8c;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#e3e3e9}::ng-deep .frequency-responsibility-list-mid{height:calc(100vh - 14rem);width:calc(100% + 1rem);padding-right:1rem;overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100vh - 16rem)}::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 #e3e3e9;margin-bottom:.25rem;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover{background:#f9f9fa}::ng-deep .frequency-responsibility-list-mid .table-body .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.active .table-column.serial app-cs-checkbox{background:#fff;opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.open{background:#f2f2f5}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.open .table-column.serial .sr-no{background:#f2f2f5}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.selected .table-column.serial app-cs-checkbox{background:#fff;opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.selected .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .clickable{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-body .open-more{background:#f2f2f5;border:1px solid #e3e3e9;border-radius:0 0 .25rem .25rem;position:relative;top:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row{background:transparent;border-radius:0 0 .25rem .25rem;border:none;margin:0}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column{min-height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.serial .sr-no{background:#f2f2f5;height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.serial app-cs-checkbox{background:#fff;border-radius:.25rem;opacity:1;top:1rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area{padding-left:1.25rem;position:relative;width:5.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area:before{background:#e3e3e9;border-radius:1.25rem;content:\"\";position:absolute;left:9px;top:.625rem;width:.5rem;height:.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .avatar-area:after{background:#e3e3e9;content:\"\";position:absolute;left:.75rem;top:-.625rem;width:1px;height:3rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .name-details{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row .table-column.responsibility-name .name-details:before{background:#e3e3e9;content:\"\";position:absolute;left:0;right:0;bottom:-.5rem;height:1px;width:100%}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:last-of-type .table-column.responsibility-name .avatar-area:after,::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:only-of-type .table-column.responsibility-name .avatar-area:after{height:1.5rem}::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:last-of-type .table-column.responsibility-name .name-details:before,::ng-deep .frequency-responsibility-list-mid .table-body .open-more .table-row:only-of-type .table-column.responsibility-name .name-details:before{display:none}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:left;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#787a8c;min-height:4.25rem;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:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;display:flex;height:4.25rem;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-checkbox{position:absolute;top:1.625rem;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-checkbox .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-checkbox{display:flex}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .selected .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .selected app-cs-checkbox{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .avatarFileArea{width:3.75rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column .avatarFileArea app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name{width:calc(100% - 4.5rem);min-width:calc(100% - 4.5rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .vx-avatar-group .vx-avatar.pill-avatars .count-pill.green{background:#34aa44}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .start{color:#cdced6}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .start.active{color:#f4c84a}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details{width:calc(100% - 6rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-name .name-details .resp-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 12rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:2.5rem;min-width:2.5rem}@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 .avatar-card .closeBtn{cursor:pointer}.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 }, { type: ComplianceCommonService }]; }, propDecorators: { onCompletionOfResponsibility: [{
                 type: Input
             }], feature: [{
@@ -15169,11 +15193,11 @@ class WorkflowCaseComponent {
             const { rid, uid, rcid } = this.responsibilityData || {};
             const transformed = {};
             for (const item of payload?.responsibilities_Linked || []) {
-                const { responsibilityId, assigneeIds, responsibilityCenters } = item;
+                const { responsibilityId, assigneeBridgeId, responsibilityCenterBridgeId } = item;
                 if (responsibilityId != null) {
                     transformed[responsibilityId] = {
-                        assigneeIds,
-                        responsibilityCenters,
+                        assignees: assigneeBridgeId,
+                        responsibilityCenters: responsibilityCenterBridgeId,
                     };
                 }
             }