vcomply-workflow-engine 7.1.1 → 7.1.3

package/fesm2022/vcomply-workflow-engine.mjs

@@ -29609,6 +29609,31 @@ class FrequencyResponsibilityListComponent {
         return nameArray[0]?.charAt(0) + nameArray[0]?.charAt(1)?.toUpperCase();
     }
     populateResponsibility() {
+        // Handle shape from parent: { id, title } (onCompletionResponsibility)
+        if (this.selectedResponsibilityDetails?.id != null && this.selectedResponsibilityDetails?.title != null) {
+            this.selectedResponsibilityValues = {
+                eachAssignee: this.selectedResponsibilityDetails.assignee != null
+                    ? {
+                        assignee: this.selectedResponsibilityDetails.assignee,
+                        responsibilityCenter: this.selectedResponsibilityDetails.responsibilityCenter,
+                    }
+                    : {},
+                responsibility: {
+                    title: this.selectedResponsibilityDetails.title,
+                    id: this.selectedResponsibilityDetails.id,
+                    allRC: this.selectedResponsibilityDetails.allRC || [],
+                    allAssignee: this.selectedResponsibilityDetails.allAssignee || [],
+                    assigneeDetails: this.selectedResponsibilityDetails.assigneeDetails || (this.selectedResponsibilityDetails.assignee != null
+                        ? [{
+                                assignee: this.selectedResponsibilityDetails.assignee,
+                                responsibilityCenter: this.selectedResponsibilityDetails.responsibilityCenter,
+                            }]
+                        : []),
+                    eachAssignee: this.selectedResponsibilityDetails.eachAssignee || {},
+                },
+            };
+            return;
+        }
         if (!this.selectedResponsibilityDetails?.assignee) {
             return;
         }
@@ -29627,18 +29652,18 @@ class FrequencyResponsibilityListComponent {
                         responsibilityCenter: this.selectedResponsibilityDetails.responsibilityCenter,
                     }],
                 eachAssignee: {},
-            }
+            },
         };
     }
     onCompletionChange(event) {
         this.selectedResponsibilityValues = event;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyResponsibilityListComponent, deps: [{ token: FrequencyService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyResponsibilityListComponent, selector: "app-frequency-responsibility-list", inputs: { selectedResponsibilityDetails: "selectedResponsibilityDetails" }, outputs: { backButton: "backButton", selectedResponsibility: "selectedResponsibility" }, ngImport: i0, template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\">&#xe91d;</i>\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\n    </div>\n  </div>\n  <div class=\"frequency-responsibility-list-body\">\n    <!-- <app-loader-inline *ngIf=\"othersCount === 0\"></app-loader-inline> -->\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <ng-container *ngIf=\"responsibilitiesData?.pagination as pagination\">\n      <app-pagination *ngIf=\"pagination?.total_pages > 1\" [start]=\"pagination?.responsibilities_from\"\n        [end]=\"pagination?.responsibilities_to\" [total]=\"pagination?.total_responsibilities\"\n        [pageCount]=\"pagination?.total_pages\" [currentPage]=\"responsibilityCurrentPage\"\n        (selectedPage)=\"responsibilityPageChange($event)\">\n      </app-pagination>\n    </ng-container>\n\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \">\n      <app-no-data *ngIf=\"\n          responsibilitiesData?.responsibilities?.length === 0 &&\n          !responsibilityLoader\n        \" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n      <ng-container *ngIf=\"\n          responsibilitiesData?.responsibilities?.length > 0 &&\n          !responsibilityLoader\n        \">\n        <div class=\"table-header\">\n          <div class=\"table-row\">\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n              #\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">\n              RESPONSIBILITIES\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n              RESPONSIBILITY CENTER\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <!-- when click on radio then active class should be true -->\n          <ng-container *ngFor=\"\n              let responsibility of responsibilitiesData?.responsibilities;\n              let i = index\n            \">\n            <ng-container *ngIf=\"(responsibilitiesData?.page * responsibilitiesData?.limit -\n            responsibilitiesData?.limit +\n            i +\n            1) as srNo\">\n              <div class=\"table-row\"\n                [class.resp]=\"responsibility?.assigneeDetails?.length === 1 || (responsibility?.assigneeType === 'any' && [null, 'any'].includes(responsibility?.rcType))\"\n                [class.active]=\"\n                selectedResponsibilityValues?.responsibility?.id === responsibility?.id && responsibility?.assigneeDetails?.length === 1\n              \" [class.with-sub-responsibility]=\"openedResponsibility.includes(responsibility?.id)\">\n                <ng-container *ngIf=\"responsibility?.assigneeDetails as assigneeDetails\">\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"\n                      srNo  \n                    \" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{srNo}}\n                    </div>\n                    <app-cs-radio\n                      *ngIf=\"assigneeDetails?.length === 1 || (responsibility?.assigneeType === 'any' && [null, 'any'].includes(responsibility?.rcType))\"\n                      [name]=\"'onCompletion'\" [checked]=\"\n                      selectedResponsibilityValues?.responsibility?.id === responsibility?.id\n                    \"\n                      (checkedEvent)=\"onCompletionChange({eachAssignee: assigneeDetails[0], responsibility})\"></app-cs-radio>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility with-rc\">\n\n                    <div class=\"value vx-fs-12 vx-label-txt vx-pr-5  vx-d-flex vx-align-center\">\n                      <div class=\"avatar-list vx-d-flex vx-align-center\">\n                        <lib-avatar-v2 [avatarList]=\"responsibility?.allAssignee\"\n                          [type]=\"'SINGLE_AVATAR'\"></lib-avatar-v2>\n                      </div>\n\n                      <span class=\"value-text vx-ml-1 resp-name\" [appTooltip]=\"responsibility?.title\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n                        responsibility?.controlId }} {{\n                        responsibility?.title\n                        }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n                    <ng-container *ngIf=\"responsibility?.allRc as rc\">\n                      <div class=\"program-inner vx-d-block\">\n                        <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n                        rc?.length\n                          ? rc[0]?.name\n                          : '--'\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                          {{\n                          rc?.length\n                          ? rc[0]?.name\n                          : \"--\"\n                          }}\n                        </div>\n                        <ng-container *ngIf=\"\n                        rc?.length \n                      \">\n                        </ng-container>\n                      </div>\n                      <button *ngIf=\"rc?.length > 1\" appPopover (click)=\"rcPopup.popover()\" placement=\"right\"\n                        class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                        +{{ rc?.length - 1 }}\n                      </button>\n                      <app-popover #rcPopup>\n                        <div class=\"wf-action-list\">\n                          <ul class=\"action-item\">\n                            <li *ngFor=\"\n                            let data of rc?.slice(\n                              1,\n                              rc?.length\n                            )\n                          \">\n                              <div class=\"avatar-card\">\n                                <div class=\"vx-d-block vx-w-100\">\n                                  <span class=\"value\" [appTooltip]=\"data?.name\" placement=\"bottom-left\" delay=\"0\"\n                                    type=\"black\" [tooltipMandatory]=\"true\">{{ data?.name }}</span>\n                                </div>\n                              </div>\n                            </li>\n                          </ul>\n                        </div>\n                      </app-popover>\n                    </ng-container>\n                  </div>\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                    (click)=\"onToggleResponsibility(responsibility)\">\n                    <ng-container\n                      *ngIf=\"assigneeDetails?.length > 1 && !(responsibility?.assigneeType === 'any' && [null, 'any'].includes(responsibility?.rcType)); else closeIcon\">\n                      <i *ngIf=\"\n                        openedResponsibility.includes(responsibility.id);\n                        else closeIcon\n                      \" class=\"icons vx-fs-10\">&#xe9e7;</i>\n                      <ng-template #closeIcon>\n                        <i class=\"icons vx-fs-10\"> &#xe9e8;</i>\n                      </ng-template>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              </div>\n              <lib-sub-responsibility *ngIf=\"openedResponsibility.includes(responsibility.id)\"\n                [responsibility]=\"responsibility\" [srNo]=\"srNo\" [selectedResponsibility]=\"selectedResponsibilityValues\"\n                (onCompletionChange)=\"onCompletionChange($event)\"></lib-sub-responsibility>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-floating-bar [selectedData]=\"[selectedResponsibilityValues?.responsibility]\" [displayElementKey]=\"'title'\"\n      (closeList)=\"back()\" (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!selectedResponsibilityValues?.responsibility?.id\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100% - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100% - 8rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100% - 10rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row lib-sub-responsibility{position:relative;top:2.5rem;left:0;width:100%;z-index:1;background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;padding:.5rem}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 19rem);min-width:calc(100% - 19rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list{width:2.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .resp-name{text-overflow:ellipsis;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:14rem;min-width:14rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:3rem;min-width:3rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action.active{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-row.with-sub-responsibility{background:#f9f9fa;margin-bottom:0}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: SubResponsibilityComponent, selector: "lib-sub-responsibility", inputs: ["responsibility", "srNo", "selectedResponsibility"], outputs: ["onCompletionChange"] }, { kind: "component", type: AvatarV2Component, selector: "lib-avatar-v2", inputs: ["avatarList", "type"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyResponsibilityListComponent, selector: "app-frequency-responsibility-list", inputs: { selectedResponsibilityDetails: "selectedResponsibilityDetails" }, outputs: { backButton: "backButton", selectedResponsibility: "selectedResponsibility" }, ngImport: i0, template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\">&#xe91d;</i>\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\n    </div>\n  </div>\n  <div class=\"frequency-responsibility-list-body\">\n    <!-- <app-loader-inline *ngIf=\"othersCount === 0\"></app-loader-inline> -->\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <ng-container *ngIf=\"responsibilitiesData?.pagination as pagination\">\n      <app-pagination *ngIf=\"pagination?.total_pages > 1\" [start]=\"pagination?.responsibilities_from\"\n        [end]=\"pagination?.responsibilities_to\" [total]=\"pagination?.total_responsibilities\"\n        [pageCount]=\"pagination?.total_pages\" [currentPage]=\"responsibilityCurrentPage\"\n        (selectedPage)=\"responsibilityPageChange($event)\">\n      </app-pagination>\n    </ng-container>\n\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \">\n      <app-no-data *ngIf=\"\n          responsibilitiesData?.responsibilities?.length === 0 &&\n          !responsibilityLoader\n        \" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n      <ng-container *ngIf=\"\n          responsibilitiesData?.responsibilities?.length > 0 &&\n          !responsibilityLoader\n        \">\n        <div class=\"table-header\">\n          <div class=\"table-row\">\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n              #\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">\n              RESPONSIBILITIES\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n              RESPONSIBILITY CENTER\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <!-- when click on radio then active class should be true -->\n          <ng-container *ngFor=\"\n              let responsibility of responsibilitiesData?.responsibilities;\n              let i = index\n            \">\n            <ng-container *ngIf=\"(responsibilitiesData?.page * responsibilitiesData?.limit -\n            responsibilitiesData?.limit +\n            i +\n            1) as srNo\">\n              <div class=\"table-row\"\n                [class.resp]=\"responsibility?.assigneeDetails?.length === 1 || (responsibility?.assigneeType === 'any' && [null, 'any'].includes(responsibility?.rcType))\"\n                [class.active]=\"selectedResponsibilityValues?.responsibility?.id === responsibility?.id\"\n                [class.with-sub-responsibility]=\"openedResponsibility.includes(responsibility?.id)\">\n                <ng-container *ngIf=\"responsibility?.assigneeDetails as assigneeDetails\">\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"\n                      srNo  \n                    \" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{srNo}}\n                    </div>\n                    <app-cs-radio\n                      [name]=\"'onCompletion'\" [checked]=\"\n                      selectedResponsibilityValues?.responsibility?.id === responsibility?.id\n                    \"\n                      (checkedEvent)=\"onCompletionChange({eachAssignee: assigneeDetails[0], responsibility})\"></app-cs-radio>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility with-rc\">\n\n                    <div class=\"value vx-fs-12 vx-label-txt vx-pr-5  vx-d-flex vx-align-center\">\n                      <div class=\"avatar-list vx-d-flex vx-align-center\">\n                        <lib-avatar-v2 [avatarList]=\"responsibility?.allAssignee\"\n                          [type]=\"'SINGLE_AVATAR'\"></lib-avatar-v2>\n                      </div>\n\n                      <span class=\"value-text vx-ml-1 resp-name\" [appTooltip]=\"responsibility?.title\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n                        responsibility?.controlId }} {{\n                        responsibility?.title\n                        }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n                    <ng-container *ngIf=\"responsibility?.allRc as rc\">\n                      <div class=\"program-inner vx-d-block\">\n                        <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n                        rc?.length\n                          ? rc[0]?.name\n                          : '--'\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                          {{\n                          rc?.length\n                          ? rc[0]?.name\n                          : \"--\"\n                          }}\n                        </div>\n                        <ng-container *ngIf=\"\n                        rc?.length \n                      \">\n                        </ng-container>\n                      </div>\n                      <button *ngIf=\"rc?.length > 1\" appPopover (click)=\"rcPopup.popover()\" placement=\"right\"\n                        class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                        +{{ rc?.length - 1 }}\n                      </button>\n                      <app-popover #rcPopup>\n                        <div class=\"wf-action-list\">\n                          <ul class=\"action-item\">\n                            <li *ngFor=\"\n                            let data of rc?.slice(\n                              1,\n                              rc?.length\n                            )\n                          \">\n                              <div class=\"avatar-card\">\n                                <div class=\"vx-d-block vx-w-100\">\n                                  <span class=\"value\" [appTooltip]=\"data?.name\" placement=\"bottom-left\" delay=\"0\"\n                                    type=\"black\" [tooltipMandatory]=\"true\">{{ data?.name }}</span>\n                                </div>\n                              </div>\n                            </li>\n                          </ul>\n                        </div>\n                      </app-popover>\n                    </ng-container>\n                  </div>\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                    (click)=\"onToggleResponsibility(responsibility)\">\n                    <ng-container\n                      *ngIf=\"assigneeDetails?.length > 1 && !(responsibility?.assigneeType === 'any' && [null, 'any'].includes(responsibility?.rcType)); else closeIcon\">\n                      <i *ngIf=\"\n                        openedResponsibility.includes(responsibility.id);\n                        else closeIcon\n                      \" class=\"icons vx-fs-10\">&#xe9e7;</i>\n                      <ng-template #closeIcon>\n                        <i class=\"icons vx-fs-10\"> &#xe9e8;</i>\n                      </ng-template>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              </div>\n              <lib-sub-responsibility *ngIf=\"openedResponsibility.includes(responsibility.id)\"\n                [responsibility]=\"responsibility\" [srNo]=\"srNo\" [selectedResponsibility]=\"selectedResponsibilityValues\"\n                (onCompletionChange)=\"onCompletionChange($event)\"></lib-sub-responsibility>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-floating-bar [selectedData]=\"[selectedResponsibilityValues?.responsibility]\" [displayElementKey]=\"'title'\"\n      (closeList)=\"back()\" (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!selectedResponsibilityValues?.responsibility?.id\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100% - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100% - 8rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100% - 10rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row lib-sub-responsibility{position:relative;top:2.5rem;left:0;width:100%;z-index:1;background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;padding:.5rem}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 19rem);min-width:calc(100% - 19rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list{width:2.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .resp-name{text-overflow:ellipsis;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:14rem;min-width:14rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:3rem;min-width:3rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action.active{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-row.with-sub-responsibility{background:#f9f9fa;margin-bottom:0}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "component", type: SubResponsibilityComponent, selector: "lib-sub-responsibility", inputs: ["responsibility", "srNo", "selectedResponsibility"], outputs: ["onCompletionChange"] }, { kind: "component", type: AvatarV2Component, selector: "lib-avatar-v2", inputs: ["avatarList", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyResponsibilityListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-frequency-responsibility-list', template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\">&#xe91d;</i>\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\n    </div>\n  </div>\n  <div class=\"frequency-responsibility-list-body\">\n    <!-- <app-loader-inline *ngIf=\"othersCount === 0\"></app-loader-inline> -->\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <ng-container *ngIf=\"responsibilitiesData?.pagination as pagination\">\n      <app-pagination *ngIf=\"pagination?.total_pages > 1\" [start]=\"pagination?.responsibilities_from\"\n        [end]=\"pagination?.responsibilities_to\" [total]=\"pagination?.total_responsibilities\"\n        [pageCount]=\"pagination?.total_pages\" [currentPage]=\"responsibilityCurrentPage\"\n        (selectedPage)=\"responsibilityPageChange($event)\">\n      </app-pagination>\n    </ng-container>\n\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \">\n      <app-no-data *ngIf=\"\n          responsibilitiesData?.responsibilities?.length === 0 &&\n          !responsibilityLoader\n        \" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n      <ng-container *ngIf=\"\n          responsibilitiesData?.responsibilities?.length > 0 &&\n          !responsibilityLoader\n        \">\n        <div class=\"table-header\">\n          <div class=\"table-row\">\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n              #\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">\n              RESPONSIBILITIES\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n              RESPONSIBILITY CENTER\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <!-- when click on radio then active class should be true -->\n          <ng-container *ngFor=\"\n              let responsibility of responsibilitiesData?.responsibilities;\n              let i = index\n            \">\n            <ng-container *ngIf=\"(responsibilitiesData?.page * responsibilitiesData?.limit -\n            responsibilitiesData?.limit +\n            i +\n            1) as srNo\">\n              <div class=\"table-row\"\n                [class.resp]=\"responsibility?.assigneeDetails?.length === 1 || (responsibility?.assigneeType === 'any' && [null, 'any'].includes(responsibility?.rcType))\"\n                [class.active]=\"\n                selectedResponsibilityValues?.responsibility?.id === responsibility?.id && responsibility?.assigneeDetails?.length === 1\n              \" [class.with-sub-responsibility]=\"openedResponsibility.includes(responsibility?.id)\">\n                <ng-container *ngIf=\"responsibility?.assigneeDetails as assigneeDetails\">\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"\n                      srNo  \n                    \" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{srNo}}\n                    </div>\n                    <app-cs-radio\n                      *ngIf=\"assigneeDetails?.length === 1 || (responsibility?.assigneeType === 'any' && [null, 'any'].includes(responsibility?.rcType))\"\n                      [name]=\"'onCompletion'\" [checked]=\"\n                      selectedResponsibilityValues?.responsibility?.id === responsibility?.id\n                    \"\n                      (checkedEvent)=\"onCompletionChange({eachAssignee: assigneeDetails[0], responsibility})\"></app-cs-radio>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility with-rc\">\n\n                    <div class=\"value vx-fs-12 vx-label-txt vx-pr-5  vx-d-flex vx-align-center\">\n                      <div class=\"avatar-list vx-d-flex vx-align-center\">\n                        <lib-avatar-v2 [avatarList]=\"responsibility?.allAssignee\"\n                          [type]=\"'SINGLE_AVATAR'\"></lib-avatar-v2>\n                      </div>\n\n                      <span class=\"value-text vx-ml-1 resp-name\" [appTooltip]=\"responsibility?.title\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n                        responsibility?.controlId }} {{\n                        responsibility?.title\n                        }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n                    <ng-container *ngIf=\"responsibility?.allRc as rc\">\n                      <div class=\"program-inner vx-d-block\">\n                        <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n                        rc?.length\n                          ? rc[0]?.name\n                          : '--'\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                          {{\n                          rc?.length\n                          ? rc[0]?.name\n                          : \"--\"\n                          }}\n                        </div>\n                        <ng-container *ngIf=\"\n                        rc?.length \n                      \">\n                        </ng-container>\n                      </div>\n                      <button *ngIf=\"rc?.length > 1\" appPopover (click)=\"rcPopup.popover()\" placement=\"right\"\n                        class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                        +{{ rc?.length - 1 }}\n                      </button>\n                      <app-popover #rcPopup>\n                        <div class=\"wf-action-list\">\n                          <ul class=\"action-item\">\n                            <li *ngFor=\"\n                            let data of rc?.slice(\n                              1,\n                              rc?.length\n                            )\n                          \">\n                              <div class=\"avatar-card\">\n                                <div class=\"vx-d-block vx-w-100\">\n                                  <span class=\"value\" [appTooltip]=\"data?.name\" placement=\"bottom-left\" delay=\"0\"\n                                    type=\"black\" [tooltipMandatory]=\"true\">{{ data?.name }}</span>\n                                </div>\n                              </div>\n                            </li>\n                          </ul>\n                        </div>\n                      </app-popover>\n                    </ng-container>\n                  </div>\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                    (click)=\"onToggleResponsibility(responsibility)\">\n                    <ng-container\n                      *ngIf=\"assigneeDetails?.length > 1 && !(responsibility?.assigneeType === 'any' && [null, 'any'].includes(responsibility?.rcType)); else closeIcon\">\n                      <i *ngIf=\"\n                        openedResponsibility.includes(responsibility.id);\n                        else closeIcon\n                      \" class=\"icons vx-fs-10\">&#xe9e7;</i>\n                      <ng-template #closeIcon>\n                        <i class=\"icons vx-fs-10\"> &#xe9e8;</i>\n                      </ng-template>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              </div>\n              <lib-sub-responsibility *ngIf=\"openedResponsibility.includes(responsibility.id)\"\n                [responsibility]=\"responsibility\" [srNo]=\"srNo\" [selectedResponsibility]=\"selectedResponsibilityValues\"\n                (onCompletionChange)=\"onCompletionChange($event)\"></lib-sub-responsibility>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-floating-bar [selectedData]=\"[selectedResponsibilityValues?.responsibility]\" [displayElementKey]=\"'title'\"\n      (closeList)=\"back()\" (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!selectedResponsibilityValues?.responsibility?.id\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100% - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100% - 8rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100% - 10rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row lib-sub-responsibility{position:relative;top:2.5rem;left:0;width:100%;z-index:1;background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;padding:.5rem}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 19rem);min-width:calc(100% - 19rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list{width:2.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .resp-name{text-overflow:ellipsis;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:14rem;min-width:14rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:3rem;min-width:3rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action.active{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-row.with-sub-responsibility{background:#f9f9fa;margin-bottom:0}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
+            args: [{ selector: 'app-frequency-responsibility-list', template: "<div class=\"frequency-responsibility-list\" [class.animate]=\"animation\">\n  <div class=\"frequency-responsibility-list-head vx-p-3 vx-d-flex vx-align-center vx-justify-between\">\n    <div class=\"vx-d-flex vx-align-center\">\n      <i class=\"icons arrow vx-fs-16 vx-label-txt vx-mr-1\" (click)=\"back()\">&#xe91d;</i>\n      <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Responsibility</div>\n    </div>\n  </div>\n  <div class=\"frequency-responsibility-list-body\">\n    <!-- <app-loader-inline *ngIf=\"othersCount === 0\"></app-loader-inline> -->\n\n    <div class=\"frequency-responsibility-list-search vx-mb-2\">\n      <i class=\"icons vx-fs-12\">&#xe90b;</i>\n      <input type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n        placeholder=\"Search Responsibilities\" />\n    </div>\n    <ng-container *ngIf=\"responsibilitiesData?.pagination as pagination\">\n      <app-pagination *ngIf=\"pagination?.total_pages > 1\" [start]=\"pagination?.responsibilities_from\"\n        [end]=\"pagination?.responsibilities_to\" [total]=\"pagination?.total_responsibilities\"\n        [pageCount]=\"pagination?.total_pages\" [currentPage]=\"responsibilityCurrentPage\"\n        (selectedPage)=\"responsibilityPageChange($event)\">\n      </app-pagination>\n    </ng-container>\n\n    <app-loader-inline *ngIf=\"responsibilityLoader\"></app-loader-inline>\n    <div class=\"frequency-responsibility-list-mid vx-mb-4\" [class.with-pagination]=\"\n        !responsibilityLoader && responsibilitiesData?.total_pages > 1\n      \">\n      <app-no-data *ngIf=\"\n          responsibilitiesData?.responsibilities?.length === 0 &&\n          !responsibilityLoader\n        \" [noDataImage]=\"ASSETS.search_data\" [noDataText]=\"'No Data to Display'\"></app-no-data>\n      <ng-container *ngIf=\"\n          responsibilitiesData?.responsibilities?.length > 0 &&\n          !responsibilityLoader\n        \">\n        <div class=\"table-header\">\n          <div class=\"table-row\">\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n              #\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\">\n              RESPONSIBILITIES\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n              RESPONSIBILITY CENTER\n            </div>\n            <div\n              class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n            </div>\n          </div>\n        </div>\n        <div class=\"table-body\">\n          <!-- when click on radio then active class should be true -->\n          <ng-container *ngFor=\"\n              let responsibility of responsibilitiesData?.responsibilities;\n              let i = index\n            \">\n            <ng-container *ngIf=\"(responsibilitiesData?.page * responsibilitiesData?.limit -\n            responsibilitiesData?.limit +\n            i +\n            1) as srNo\">\n              <div class=\"table-row\"\n                [class.resp]=\"responsibility?.assigneeDetails?.length === 1 || (responsibility?.assigneeType === 'any' && [null, 'any'].includes(responsibility?.rcType))\"\n                [class.active]=\"selectedResponsibilityValues?.responsibility?.id === responsibility?.id\"\n                [class.with-sub-responsibility]=\"openedResponsibility.includes(responsibility?.id)\">\n                <ng-container *ngIf=\"responsibility?.assigneeDetails as assigneeDetails\">\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n                    <div class=\"sr-no\" [appTooltip]=\"\n                      srNo  \n                    \" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                      {{srNo}}\n                    </div>\n                    <app-cs-radio\n                      [name]=\"'onCompletion'\" [checked]=\"\n                      selectedResponsibilityValues?.responsibility?.id === responsibility?.id\n                    \"\n                      (checkedEvent)=\"onCompletionChange({eachAssignee: assigneeDetails[0], responsibility})\"></app-cs-radio>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility with-rc\">\n\n                    <div class=\"value vx-fs-12 vx-label-txt vx-pr-5  vx-d-flex vx-align-center\">\n                      <div class=\"avatar-list vx-d-flex vx-align-center\">\n                        <lib-avatar-v2 [avatarList]=\"responsibility?.allAssignee\"\n                          [type]=\"'SINGLE_AVATAR'\"></lib-avatar-v2>\n                      </div>\n\n                      <span class=\"value-text vx-ml-1 resp-name\" [appTooltip]=\"responsibility?.title\"\n                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{\n                        responsibility?.controlId }} {{\n                        responsibility?.title\n                        }}</span>\n                    </div>\n                  </div>\n\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\">\n                    <ng-container *ngIf=\"responsibility?.allRc as rc\">\n                      <div class=\"program-inner vx-d-block\">\n                        <div class=\"program-value vx-fs-11 vx-label-txt vx-pr-5\" [appTooltip]=\"\n                        rc?.length\n                          ? rc[0]?.name\n                          : '--'\n                      \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n                          {{\n                          rc?.length\n                          ? rc[0]?.name\n                          : \"--\"\n                          }}\n                        </div>\n                        <ng-container *ngIf=\"\n                        rc?.length \n                      \">\n                        </ng-container>\n                      </div>\n                      <button *ngIf=\"rc?.length > 1\" appPopover (click)=\"rcPopup.popover()\" placement=\"right\"\n                        class=\"program-count vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">\n                        +{{ rc?.length - 1 }}\n                      </button>\n                      <app-popover #rcPopup>\n                        <div class=\"wf-action-list\">\n                          <ul class=\"action-item\">\n                            <li *ngFor=\"\n                            let data of rc?.slice(\n                              1,\n                              rc?.length\n                            )\n                          \">\n                              <div class=\"avatar-card\">\n                                <div class=\"vx-d-block vx-w-100\">\n                                  <span class=\"value\" [appTooltip]=\"data?.name\" placement=\"bottom-left\" delay=\"0\"\n                                    type=\"black\" [tooltipMandatory]=\"true\">{{ data?.name }}</span>\n                                </div>\n                              </div>\n                            </li>\n                          </ul>\n                        </div>\n                      </app-popover>\n                    </ng-container>\n                  </div>\n                  <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"\n                    (click)=\"onToggleResponsibility(responsibility)\">\n                    <ng-container\n                      *ngIf=\"assigneeDetails?.length > 1 && !(responsibility?.assigneeType === 'any' && [null, 'any'].includes(responsibility?.rcType)); else closeIcon\">\n                      <i *ngIf=\"\n                        openedResponsibility.includes(responsibility.id);\n                        else closeIcon\n                      \" class=\"icons vx-fs-10\">&#xe9e7;</i>\n                      <ng-template #closeIcon>\n                        <i class=\"icons vx-fs-10\"> &#xe9e8;</i>\n                      </ng-template>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              </div>\n              <lib-sub-responsibility *ngIf=\"openedResponsibility.includes(responsibility.id)\"\n                [responsibility]=\"responsibility\" [srNo]=\"srNo\" [selectedResponsibility]=\"selectedResponsibilityValues\"\n                (onCompletionChange)=\"onCompletionChange($event)\"></lib-sub-responsibility>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n    <app-floating-bar [selectedData]=\"[selectedResponsibilityValues?.responsibility]\" [displayElementKey]=\"'title'\"\n      (closeList)=\"back()\" (closeEvent)=\"save($event)\" (deleteEvent)=\"deleteItem($event)\"\n      [isDisabled]=\"!selectedResponsibilityValues?.responsibility?.id\"></app-floating-bar>\n  </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/table-card/table-card.css\";::ng-deep .frequency-responsibility-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:32.5rem;bottom:0;left:0}::ng-deep .frequency-responsibility-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .frequency-responsibility-list-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-responsibility-list-head .arrow{cursor:pointer}::ng-deep .frequency-responsibility-list-body{background:#fff;height:calc(100% - 2.75rem);padding:1.5rem .75rem 1.5rem 2rem}::ng-deep .frequency-responsibility-list-body app-pagination .wk-pagination-sec-ds{border-radius:0;padding:0 0 .5rem}::ng-deep .frequency-responsibility-list-body app-floating-bar .floating-bar{padding:0;position:relative;left:-1rem;width:calc(100% + 2rem)}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar{padding-left:0!important;padding-right:0!important}::ng-deep .frequency-responsibility-list-body app-floating-bar .userGroup-floating-bar .userGroup-floating-bar-container .left .chip span{max-width:240px}::ng-deep .frequency-responsibility-list-search{position:relative}::ng-deep .frequency-responsibility-list-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763F;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .frequency-responsibility-list-search input::placeholder{color:#747576;opacity:1}::ng-deep .frequency-responsibility-list-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .frequency-responsibility-list-mid{height:calc(100% - 8rem);overflow:auto}::ng-deep .frequency-responsibility-list-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .frequency-responsibility-list-mid.with-pagination{height:calc(100% - 10rem)}::ng-deep .frequency-responsibility-list-mid .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .frequency-responsibility-list-mid .table-header .table-column{color:#161b2f!important;line-height:.75rem!important;min-height:1.875rem!important}::ng-deep .frequency-responsibility-list-mid .table-body{position:relative}::ng-deep .frequency-responsibility-list-mid .table-body .table-row{background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;margin-bottom:.25rem}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp:hover .table-column.serial .sr-no,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp.active .table-column.serial .sr-no{opacity:0}::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp:hover .table-column.serial app-cs-radio,::ng-deep .frequency-responsibility-list-mid .table-body .table-row.resp.active .table-column.serial app-cs-radio{opacity:1}::ng-deep .frequency-responsibility-list-mid .table-body .table-row lib-sub-responsibility{position:relative;top:2.5rem;left:0;width:100%;z-index:1;background:#fff;border-radius:.25rem;border:1px solid #f1f1f1;padding:.5rem}::ng-deep .frequency-responsibility-list-mid .table-row{display:flex;justify-content:space-between;position:relative}::ng-deep .frequency-responsibility-list-mid .table-row .table-column{color:#747576;min-height:2.5rem;position:relative;width:100%}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio{position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.serial app-cs-radio .radio-item{position:absolute}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility{width:calc(100% - 19rem);min-width:calc(100% - 19rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list{width:2.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .avatar-list app-avatar~app-avatar{margin-left:-.5rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility .resp-name{text-overflow:ellipsis;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center{width:14rem;min-width:14rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-inner{max-width:calc(100% - 2rem)}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center .program-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.responsibility-center button.program-count{background:#1e5dd3;border-radius:.125rem;border:none;min-width:1.5rem;height:1.25rem}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action{width:3rem;min-width:3rem;justify-content:center}::ng-deep .frequency-responsibility-list-mid .table-row .table-column.action.active{cursor:pointer}::ng-deep .frequency-responsibility-list-mid .table-row.with-sub-responsibility{background:#f9f9fa;margin-bottom:0}@keyframes animate-right{0%{transform:translate(5px);opacity:0}to{transform:translate(0);opacity:1}}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
         }], ctorParameters: function () { return [{ type: FrequencyService }, { type: CommonService }]; }, propDecorators: { selectedResponsibilityDetails: [{
                 type: Input
             }], backButton: [{
@@ -31977,6 +32002,10 @@ class WorkflowComplianceComponent {
             this.organizationId = this.authService.getOrganizationId();
             this.memberId = this.authService.getUserDetails().user.uid;
             this.hiddenList.push('CHECKPOINTS');
+            if (this.responsibilityDetails) {
+                this.responsibilityDetails.onCompletionResponsibility = null;
+            }
+            this.onCompletionResponsibility = null;
         }
         if (this.mode === 'EDIT') {
             this.loader = true;
@@ -34310,6 +34339,7 @@ class WorkflowComplianceComponent {
             failedTime: '',
             continuous_failed_days: 0,
             onCompletionReportDetails: {},
+            onCompletionResponsibility: null,
         };
         this.sampleValue = undefined;
         this.samplePercentage = undefined;
@@ -34469,6 +34499,14 @@ class WorkflowComplianceComponent {
         event.frequency_details = event.pattern;
         this.frequencyObject = this.frequencyService.setFrequencyObject(event);
         this.frequencyPopulation(payload);
+        // Persist on-completion responsibility so it shows when user clicks Edit again
+        if (event?.onCompletionResponsibility) {
+            if (this.responsibilityDetails) {
+                this.responsibilityDetails.onCompletionResponsibility = event.onCompletionResponsibility;
+            }
+            this.frequencyDetails.onCompletionResponsibility = event.onCompletionResponsibility;
+            this.onCompletionResponsibility = event.onCompletionResponsibility;
+        }
     }
     checkBlank(data) {
         if (data) {
@@ -49417,6 +49455,9 @@ class WorkflowEngineContainerComponent {
                             this.moreOption.resetAll(this.currentWorkflow?.code);
                         }
                         this.decideViewMoreOption();
+                        if (this.currentWorkflow?.code === 'CAR' && this.workflowDetails) {
+                            this.workflowDetails.onCompletionResponsibility = null;
+                        }
                     }
                     break;
                 case 'EDIT_RISK':