vcomply-workflow-engine 6.1.71 → 6.1.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/esm2022/lib/pipes/search.pipe.mjs +1 -2
  2. package/esm2022/lib/sharedComponents/format-and-evidence/format-and-evidence.component.mjs +1 -2
  3. package/esm2022/lib/sharedComponents/link-responsibility/link-responsibility.component.mjs +3 -3
  4. package/esm2022/lib/ui-kit/avatar-v2/avatar-v2.component.mjs +5 -3
  5. package/esm2022/lib/ui-kit/tooltip/tooltip.directive.mjs +1 -1
  6. package/esm2022/lib/workflow/shared/components/grc-responsibility-listing/grc-responsibility-listing.component.mjs +9 -3
  7. package/esm2022/lib/workflow/shared/components/program-responsibility-listing/program-responsibility-listing.component.mjs +5 -8
  8. package/fesm2022/vcomply-workflow-engine.mjs +15 -15
  9. package/fesm2022/vcomply-workflow-engine.mjs.map +1 -1
  10. package/lib/workflow/shared/components/grc-responsibility-listing/grc-responsibility-listing.component.d.ts +2 -1
  11. package/lib/workflow-risk/workflow-risk.component.d.ts +1 -1
  12. package/package.json +1 -1
package/fesm2022/vcomply-workflow-engine.mjs CHANGED
@@ -15,6 +15,7 @@ import { cloneDeep, shuffle, some, uniqBy, isEqual } from 'lodash';
15
15
  import * as i1$2 from '@angular/platform-browser';
16
16
  import * as i4 from '@vcomply/editor';
17
17
  import { VcomplyEditorModule } from '@vcomply/editor';
18
+ import { PipesModule as PipesModule$1 } from 'projects/vx-workflow-engine/src/lib/pipes/pipes.module';
18
19
  import * as i5 from 'ng2-date-picker';
19
20
  import { DpDatePickerModule } from 'ng2-date-picker';
20
21
  import { nanoid } from 'nanoid';
@@ -2847,7 +2848,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
2847
2848
 
2848
2849
  let SearchPipe$1 = class SearchPipe {
2849
2850
  transform(items, ...args) {
2850
- console.log('items', items, args);
2851
2851
  let searchText = args[0];
2852
2852
  const searchKey = args[1];
2853
2853
  if (!items) {
@@ -6233,6 +6233,7 @@ class GrcResponsibilityListingComponent {
6233
6233
  this.MODE = 'CREATE';
6234
6234
  this.allSelectedResponsibilityIds = [];
6235
6235
  this.selectedProgramAndResp = [];
6236
+ this.searchString = '';
6236
6237
  this.getUpdatedDataList = new EventEmitter();
6237
6238
  this.changeSelectedProgramAndResp = new EventEmitter();
6238
6239
  this.env = config?.envConfig;
@@ -6361,7 +6362,7 @@ class GrcResponsibilityListingComponent {
6361
6362
  return [...Array.from(idSet)].filter((item) => Array.isArray(item) ? item.length > 0 : true);
6362
6363
  }
6363
6364
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GrcResponsibilityListingComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
6364
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GrcResponsibilityListingComponent, isStandalone: true, selector: "app-grc-responsibility-listing", inputs: { tableCard: "tableCard", activeProgram: "activeProgram", headerText: "headerText", currentPage: "currentPage", perPageLimit: "perPageLimit", totalListData: "totalListData", totalPages: "totalPages", selectedListData: "selectedListData", selectedListDataIds: "selectedListDataIds", MODE: "MODE", allSelectedResponsibilityIds: "allSelectedResponsibilityIds", getResponsibilityList: ["responsibilityData", "getResponsibilityList"], selectedProgramAndResp: "selectedProgramAndResp" }, outputs: { getUpdatedDataList: "getUpdatedDataList", changeSelectedProgramAndResp: "changeSelectedProgramAndResp" }, ngImport: i0, template: "<div class=\"grc-responsibility-listing\">\n <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\"\n (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\"\n (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n </div>\n <div class=\"grc-responsibility-listing-inner\">\n <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n <div class=\"grc-responsibility-table-row\" *ngFor=\"let list of dataList?.data; let i = index\"\n [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}\n </div>\n <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\"\n (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n </div>\n <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <div class=\"vx-avatar-group vx-mr-1\">\n <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.name |\n userShortName }}</span>\n <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\"\n src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\"\n [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.name |\n userShortName }}</span>\n <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\"\n src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\"\n appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n </div>\n <app-popover #multiUser>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n <div class=\"avatar-card\">\n <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_name |\n userShortName }}</div>\n <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img\n src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n <div class=\"name-inner\">\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.controlId}}{{list?.name}}\n </div>\n </div>\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:\n </div>\n <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n <div\n class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n Within</div>\n <div class=\"within-value vx-fs-11 vx-paragraph-txt\"><span\n *ngFor=\"let parent of list?.withinData; let last = last\"\n [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"false\">{{parent?.name}}\n <span *ngIf=\"!last\">\n < </span>\n </span></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\"\n [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\"\n (selectedPage)=\"changePage($event)\"></app-pagination>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 16rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 16rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "ngmodule", type: FormgroupModule }, { kind: "component", type: CsCheckboxComponentUI, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsCheckboxIndeterminateComponentUI, selector: "app-cs-checkbox-indeterminate", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "ngmodule", type: WorkflowPipesModule }, { kind: "pipe", type: GetUserShortNamePipe, name: "userShortName" }] }); }
6365
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GrcResponsibilityListingComponent, isStandalone: true, selector: "app-grc-responsibility-listing", inputs: { tableCard: "tableCard", activeProgram: "activeProgram", headerText: "headerText", currentPage: "currentPage", perPageLimit: "perPageLimit", totalListData: "totalListData", totalPages: "totalPages", selectedListData: "selectedListData", selectedListDataIds: "selectedListDataIds", MODE: "MODE", allSelectedResponsibilityIds: "allSelectedResponsibilityIds", getResponsibilityList: ["responsibilityData", "getResponsibilityList"], selectedProgramAndResp: "selectedProgramAndResp", searchString: "searchString" }, outputs: { getUpdatedDataList: "getUpdatedDataList", changeSelectedProgramAndResp: "changeSelectedProgramAndResp" }, ngImport: i0, template: "<div class=\"grc-responsibility-listing\">\n <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\"\n (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\"\n (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n </div>\n <div class=\"grc-responsibility-listing-inner\">\n <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n <div class=\"grc-responsibility-table-row\"\n *ngFor=\"let list of dataList?.data | search: searchString : 'name' ; let i = index\"\n [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}\n </div>\n <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\"\n (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n </div>\n <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <div class=\"vx-avatar-group vx-mr-1\">\n <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.name |\n userShortName }}</span>\n <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\"\n src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\"\n [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.name |\n userShortName }}</span>\n <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\"\n src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\"\n appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n </div>\n <app-popover #multiUser>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n <div class=\"avatar-card\">\n <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_name |\n userShortName }}</div>\n <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img\n src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n <div class=\"name-inner\">\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.controlId}}{{list?.name}}\n </div>\n </div>\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:\n </div>\n <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n <div\n class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n Within</div>\n <div class=\"within-value vx-fs-11 vx-paragraph-txt\"><span\n *ngFor=\"let parent of list?.withinData; let last = last\"\n [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"false\">{{parent?.name}}\n <span *ngIf=\"!last\">\n < </span>\n </span></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\"\n [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\"\n (selectedPage)=\"changePage($event)\"></app-pagination>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 16rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 16rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "ngmodule", type: FormgroupModule }, { kind: "component", type: CsCheckboxComponentUI, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsCheckboxIndeterminateComponentUI, selector: "app-cs-checkbox-indeterminate", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "ngmodule", type: WorkflowPipesModule }, { kind: "pipe", type: GetUserShortNamePipe, name: "userShortName" }, { kind: "ngmodule", type: PipesModule$1 }, { kind: "pipe", type: SearchPipe$1, name: "search" }] }); }
6365
6366
  }
6366
6367
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GrcResponsibilityListingComponent, decorators: [{
6367
6368
  type: Component,
@@ -6373,6 +6374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
6373
6374
  FloatingBarModule,
6374
6375
  PaginationModule$1,
6375
6376
  WorkflowPipesModule,
6377
+ PipesModule$1,
6376
6378
  ], inputs: [
6377
6379
  'tableCard',
6378
6380
  'activeProgram',
@@ -6384,7 +6386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
6384
6386
  'selectedListData',
6385
6387
  'selectedListDataIds',
6386
6388
  'MODE'
6387
- ], template: "<div class=\"grc-responsibility-listing\">\n <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\"\n (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\"\n (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n </div>\n <div class=\"grc-responsibility-listing-inner\">\n <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n <div class=\"grc-responsibility-table-row\" *ngFor=\"let list of dataList?.data; let i = index\"\n [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}\n </div>\n <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\"\n (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n </div>\n <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <div class=\"vx-avatar-group vx-mr-1\">\n <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.name |\n userShortName }}</span>\n <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\"\n src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\"\n [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.name |\n userShortName }}</span>\n <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\"\n src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\"\n appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n </div>\n <app-popover #multiUser>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n <div class=\"avatar-card\">\n <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_name |\n userShortName }}</div>\n <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img\n src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n <div class=\"name-inner\">\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.controlId}}{{list?.name}}\n </div>\n </div>\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:\n </div>\n <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n <div\n class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n Within</div>\n <div class=\"within-value vx-fs-11 vx-paragraph-txt\"><span\n *ngFor=\"let parent of list?.withinData; let last = last\"\n [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"false\">{{parent?.name}}\n <span *ngIf=\"!last\">\n < </span>\n </span></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\"\n [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\"\n (selectedPage)=\"changePage($event)\"></app-pagination>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 16rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 16rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
6389
+ ], template: "<div class=\"grc-responsibility-listing\">\n <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\"\n (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\"\n (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n </div>\n <div class=\"grc-responsibility-listing-inner\">\n <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n <div class=\"grc-responsibility-table-row\"\n *ngFor=\"let list of dataList?.data | search: searchString : 'name' ; let i = index\"\n [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}\n </div>\n <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\"\n (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n </div>\n <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <div class=\"vx-avatar-group vx-mr-1\">\n <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.name |\n userShortName }}</span>\n <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\"\n src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\"\n [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.name |\n userShortName }}</span>\n <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\"\n src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\"\n appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n </div>\n <app-popover #multiUser>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n <div class=\"avatar-card\">\n <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_name |\n userShortName }}</div>\n <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img\n src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n <div class=\"name-inner\">\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\"\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.controlId}}{{list?.name}}\n </div>\n </div>\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:\n </div>\n <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n <div\n class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">\n Within</div>\n <div class=\"within-value vx-fs-11 vx-paragraph-txt\"><span\n *ngFor=\"let parent of list?.withinData; let last = last\"\n [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"false\">{{parent?.name}}\n <span *ngIf=\"!last\">\n < </span>\n </span></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\"\n [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\"\n (selectedPage)=\"changePage($event)\"></app-pagination>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 16rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 16rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
6388
6390
  }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
6389
6391
  type: Optional
6390
6392
  }] }]; }, propDecorators: { allSelectedResponsibilityIds: [{
@@ -6394,6 +6396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
6394
6396
  args: ['responsibilityData']
6395
6397
  }], selectedProgramAndResp: [{
6396
6398
  type: Input
6399
+ }], searchString: [{
6400
+ type: Input
6397
6401
  }], getUpdatedDataList: [{
6398
6402
  type: Output
6399
6403
  }], changeSelectedProgramAndResp: [{
@@ -6610,10 +6614,8 @@ class ProgramResponsibilityListingComponent {
6610
6614
  if (this.searchString != event) {
6611
6615
  this.programCurrentPage = 1;
6612
6616
  this.searchString = event;
6613
- this.onSelectedProgramChange();
6614
- this.getProgramsList();
6615
- this.getProgramsCount();
6616
6617
  }
6618
+ console.log(this.searchString);
6617
6619
  }
6618
6620
  getProgramsCount(paramsObject) {
6619
6621
  this.programCountLoader = true;
@@ -6808,7 +6810,7 @@ class ProgramResponsibilityListingComponent {
6808
6810
  return {
6809
6811
  ...responsibility,
6810
6812
  name: responsibility?.title || '',
6811
- controlId: responsibility?.controlId ? '[CID-' + responsibility?.controlId + ']' : '',
6813
+ controlId: responsibility?.controlId ? '[CID-' + responsibility?.controlId + '] ' : '',
6812
6814
  _id: responsibility?.rid,
6813
6815
  entrustedBy: {
6814
6816
  name: assignorDetails?.name || '',
@@ -6838,7 +6840,6 @@ class ProgramResponsibilityListingComponent {
6838
6840
  this.responsibilityCurrentPage = 1;
6839
6841
  }
6840
6842
  changeSelectedProgramAndResp(event) {
6841
- console.log('changeSelectedProgramAndResp event', event);
6842
6843
  this.selectedProgramAndResp = event;
6843
6844
  this.getSelectedProgramIds(this.selectedProgramAndResp);
6844
6845
  this.getAllSelectedResponsibilities(this.selectedProgramAndResp);
@@ -6871,7 +6872,7 @@ class ProgramResponsibilityListingComponent {
6871
6872
  return selectedRCIds;
6872
6873
  }
6873
6874
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramResponsibilityListingComponent, deps: [{ token: GrcService }, { token: ResponsibilityService }, { token: GetUserDetailsPipe$1 }], target: i0.ɵɵFactoryTarget.Component }); }
6874
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgramResponsibilityListingComponent, isStandalone: true, selector: "app-program-responsibility-listing", inputs: { getSelectedProgramAndResp: ["selectedProgramAndResp", "getSelectedProgramAndResp"], selectedRC: "selectedRC", MODE: "MODE" }, outputs: { closeList: "closeList" }, providers: [GetUserDetailsPipe$1], viewQueries: [{ propertyName: "responsibilityListingComponent", first: true, predicate: ["dataListing"], descendants: true }], ngImport: i0, template: "<div class=\"program-responsibility-listing\" [class.animate]=\"animation\">\n <div class=\"program-responsibility-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibilities</h3>\n </div>\n <div class=\"program-responsibility-listing-body\">\n <!-- <app-table-card-loader *ngIf=\"programCountLoader\"></app-table-card-loader> -->\n <!-- <app-table-card\n *ngIf=\"!programCountLoader\"\n class=\"vx-w-100\"\n [tableCard]=\"programTypes\"\n [singleSelectedText]=\"'Responsibility Selected'\"\n [selectedTab]=\"selectedTab\"\n [multipleSelectedText]=\"'Responsibilities Selected'\"\n (setSelectedTab)=\"setSelectedTab($event)\">\n </app-table-card> -->\n <div class=\"search-block vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\"\n placeholder=\"Search Responsibilities\" />\n </div>\n <div class=\"program-responsibility-listing-body-inner vx-mb-2 vx-d-flex\" [class.vx-justify-center]=\"\n !responsibilityLoader && !responsibilityData?.data?.length\n \">\n <ng-container *ngIf=\"responsibilityLoader || responsibilityData?.data?.length\">\n <!-- <div class=\"inner-item-left vx-pr-2\">\n\n <app-grc-category-listing *ngIf=\"!programLoader\" [headerText]=\"'Programs'\" [programData]=\"programData\" [selectedCatAndRisk]=\"selectedCatAndRisk\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"programCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedProgramIds\" (activeSelectedCategory)=\"activeSelectedProgram($event)\" (onCategoryPageChange)=\"onProgramPageChange($event)\"></app-grc-category-listing>\n \n <app-list-loader *ngIf=\"programLoader\"></app-list-loader>\n\n </div> -->\n\n <!-- <div class=\"inner-item-mid vx-pr-2\">\n <app-grc-sub-category-listing *ngIf=\"!categoryLoader && !programLoader\" [headerText]=\"'Programs'\" [categories]=\"categoryData\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"categoryCurrentPage\" [selectedCategoryIds]=\"selectedCategoryIds\" [activeProgram]=\"selectedProgram\" [selectedProgramAndResp]=\"selectedProgramAndResp\" (activeSelectedCategory)=\"activeSelectedSubCategory($event)\" (onCategoryPageChange)=\"onSubCategoryPageChange($event)\"></app-grc-sub-category-listing>\n <app-list-loader *ngIf=\"categoryLoader || programLoader\"></app-list-loader>\n </div> -->\n\n <div class=\"inner-item-right\">\n <!-- <app-grc-responsibility-listing></app-grc-responsibility-listing> -->\n\n <app-grc-responsibility-listing #dataListing *ngIf=\"\n !responsibilityLoader &&\n !categoryLoader &&\n !programLoader &&\n responsibilityData?.data?.length !== 0\n \" [headerText]=\"'Responsibilities'\" [MODE]=\"MODE\" [responsibilityData]=\"responsibilityData\"\n [activeProgram]=\"selectedProgram\" [activeCategory]=\"selectedCategory\"\n [selectedProgramAndResp]=\"selectedProgramAndResp\" [allSelectedResponsibilityIds]=\"selectedResponsibilities\"\n (changeSelectedProgramAndResp)=\"\n changeSelectedProgramAndResp($event)\n \" [currentPage]=\"responsibilityCurrentPage\" [perPageLimit]=\"30\"\n [totalListData]=\"responsibilityData?.total_items\" [totalPages]=\"responsibilityData?.total_pages\"\n (getUpdatedDataList)=\"getUpdatedDataList($event)\"></app-grc-responsibility-listing>\n\n <app-list-loader *ngIf=\"responsibilityLoader || categoryLoader || programLoader\"\n [fullWidth]=\"true\"></app-list-loader>\n\n <app-no-data *ngIf=\"\n responsibilityData?.data?.length === 0 &&\n !(responsibilityLoader || categoryLoader || programLoader)\n \" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\n </div>\n </ng-container>\n <app-no-data *ngIf=\"!responsibilityLoader && !responsibilityData?.data?.length\" [noDataImage]=\"CDN_LINK?.noData\"\n [noDataText]=\"'No data to display'\"></app-no-data>\n </div>\n <app-floating-bar [selectedData]=\"\n selectedResponsibilities | filterResponsibility : responsibilityData?.data\n \" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'title'\"\n [singularText]=\"'Responsibility selected'\" [pluralText]=\"'Responsibilities selected'\"\n (deleteEvent)=\"deleteEvent($event)\"></app-floating-bar>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .program-responsibility-listing{position:fixed;inset:0 30px 0 0}::ng-deep .program-responsibility-listing:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .program-responsibility-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-responsibility-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .program-responsibility-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .program-responsibility-listing-body .search-block{position:relative}::ng-deep .program-responsibility-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .program-responsibility-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-responsibility-listing-body .search-block input::placeholder{color:#747576}::ng-deep .program-responsibility-listing-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .program-responsibility-listing-body-inner{height:calc(100vh - 14.25rem)}::ng-deep .program-responsibility-listing-body-inner .inner-item-left{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-mid{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-right{width:100%}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: FormgroupModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: GrcResponsibilityListingComponent, selector: "app-grc-responsibility-listing", inputs: ["tableCard", "activeProgram", "headerText", "currentPage", "perPageLimit", "totalListData", "totalPages", "selectedListData", "selectedListDataIds", "MODE", "allSelectedResponsibilityIds", "responsibilityData", "selectedProgramAndResp"], outputs: ["getUpdatedDataList", "changeSelectedProgramAndResp"] }, { kind: "ngmodule", type: ListLoaderModule }, { kind: "component", type: ListLoaderComponent, selector: "app-list-loader", inputs: ["fullWidth"] }, { kind: "ngmodule", type: NoDataModule }, { kind: "component", type: NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "ngmodule", type: WorkflowPipesModule }, { kind: "pipe", type: FilterResponsibilityPipe, name: "filterResponsibility" }] }); }
6875
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgramResponsibilityListingComponent, isStandalone: true, selector: "app-program-responsibility-listing", inputs: { getSelectedProgramAndResp: ["selectedProgramAndResp", "getSelectedProgramAndResp"], selectedRC: "selectedRC", MODE: "MODE" }, outputs: { closeList: "closeList" }, providers: [GetUserDetailsPipe$1], viewQueries: [{ propertyName: "responsibilityListingComponent", first: true, predicate: ["dataListing"], descendants: true }], ngImport: i0, template: "<div class=\"program-responsibility-listing\" [class.animate]=\"animation\">\n <div class=\"program-responsibility-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibilities</h3>\n </div>\n <div class=\"program-responsibility-listing-body\">\n <!-- <app-table-card-loader *ngIf=\"programCountLoader\"></app-table-card-loader> -->\n <!-- <app-table-card\n *ngIf=\"!programCountLoader\"\n class=\"vx-w-100\"\n [tableCard]=\"programTypes\"\n [singleSelectedText]=\"'Responsibility Selected'\"\n [selectedTab]=\"selectedTab\"\n [multipleSelectedText]=\"'Responsibilities Selected'\"\n (setSelectedTab)=\"setSelectedTab($event)\">\n </app-table-card> -->\n <div class=\"search-block vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\"\n placeholder=\"Search Responsibilities\" />\n </div>\n <div class=\"program-responsibility-listing-body-inner vx-mb-2 vx-d-flex\" [class.vx-justify-center]=\"\n !responsibilityLoader && !responsibilityData?.data?.length\n \">\n <ng-container *ngIf=\"responsibilityLoader || responsibilityData?.data?.length\">\n <!-- <div class=\"inner-item-left vx-pr-2\">\n\n <app-grc-category-listing *ngIf=\"!programLoader\" [headerText]=\"'Programs'\" [programData]=\"programData\" [selectedCatAndRisk]=\"selectedCatAndRisk\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"programCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedProgramIds\" (activeSelectedCategory)=\"activeSelectedProgram($event)\" (onCategoryPageChange)=\"onProgramPageChange($event)\"></app-grc-category-listing>\n \n <app-list-loader *ngIf=\"programLoader\"></app-list-loader>\n\n </div> -->\n\n <!-- <div class=\"inner-item-mid vx-pr-2\">\n <app-grc-sub-category-listing *ngIf=\"!categoryLoader && !programLoader\" [headerText]=\"'Programs'\" [categories]=\"categoryData\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"categoryCurrentPage\" [selectedCategoryIds]=\"selectedCategoryIds\" [activeProgram]=\"selectedProgram\" [selectedProgramAndResp]=\"selectedProgramAndResp\" (activeSelectedCategory)=\"activeSelectedSubCategory($event)\" (onCategoryPageChange)=\"onSubCategoryPageChange($event)\"></app-grc-sub-category-listing>\n <app-list-loader *ngIf=\"categoryLoader || programLoader\"></app-list-loader>\n </div> -->\n\n <div class=\"inner-item-right\">\n <!-- <app-grc-responsibility-listing></app-grc-responsibility-listing> -->\n\n <app-grc-responsibility-listing #dataListing *ngIf=\"\n !responsibilityLoader &&\n !categoryLoader &&\n !programLoader &&\n responsibilityData?.data?.length !== 0\n \" [headerText]=\"'Responsibilities'\" [MODE]=\"MODE\" [responsibilityData]=\"responsibilityData\"\n [searchString]=\"searchString\" [activeProgram]=\"selectedProgram\" [activeCategory]=\"selectedCategory\"\n [selectedProgramAndResp]=\"selectedProgramAndResp\" [allSelectedResponsibilityIds]=\"selectedResponsibilities\"\n (changeSelectedProgramAndResp)=\"\n changeSelectedProgramAndResp($event)\n \" [currentPage]=\"responsibilityCurrentPage\" [perPageLimit]=\"30\"\n [totalListData]=\"responsibilityData?.total_items\" [totalPages]=\"responsibilityData?.total_pages\"\n (getUpdatedDataList)=\"getUpdatedDataList($event)\"></app-grc-responsibility-listing>\n\n <app-list-loader *ngIf=\"responsibilityLoader || categoryLoader || programLoader\"\n [fullWidth]=\"true\"></app-list-loader>\n\n <app-no-data *ngIf=\"\n responsibilityData?.data?.length === 0 &&\n !(responsibilityLoader || categoryLoader || programLoader)\n \" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\n </div>\n </ng-container>\n <app-no-data *ngIf=\"!responsibilityLoader && !responsibilityData?.data?.length\" [noDataImage]=\"CDN_LINK?.noData\"\n [noDataText]=\"'No data to display'\"></app-no-data>\n </div>\n <app-floating-bar [selectedData]=\"\n selectedResponsibilities | filterResponsibility : responsibilityData?.data\n \" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'title'\"\n [singularText]=\"'Responsibility selected'\" [pluralText]=\"'Responsibilities selected'\"\n (deleteEvent)=\"deleteEvent($event)\"></app-floating-bar>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .program-responsibility-listing{position:fixed;inset:0 30px 0 0}::ng-deep .program-responsibility-listing:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .program-responsibility-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-responsibility-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .program-responsibility-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .program-responsibility-listing-body .search-block{position:relative}::ng-deep .program-responsibility-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .program-responsibility-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-responsibility-listing-body .search-block input::placeholder{color:#747576}::ng-deep .program-responsibility-listing-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .program-responsibility-listing-body-inner{height:calc(100vh - 14.25rem)}::ng-deep .program-responsibility-listing-body-inner .inner-item-left{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-mid{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-right{width:100%}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: FormgroupModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "isResponsibility", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: GrcResponsibilityListingComponent, selector: "app-grc-responsibility-listing", inputs: ["tableCard", "activeProgram", "headerText", "currentPage", "perPageLimit", "totalListData", "totalPages", "selectedListData", "selectedListDataIds", "MODE", "allSelectedResponsibilityIds", "responsibilityData", "selectedProgramAndResp", "searchString"], outputs: ["getUpdatedDataList", "changeSelectedProgramAndResp"] }, { kind: "ngmodule", type: ListLoaderModule }, { kind: "component", type: ListLoaderComponent, selector: "app-list-loader", inputs: ["fullWidth"] }, { kind: "ngmodule", type: NoDataModule }, { kind: "component", type: NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "ngmodule", type: WorkflowPipesModule }, { kind: "pipe", type: FilterResponsibilityPipe, name: "filterResponsibility" }] }); }
6875
6876
  }
6876
6877
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramResponsibilityListingComponent, decorators: [{
6877
6878
  type: Component,
@@ -6890,7 +6891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
6890
6891
  NoDataModule,
6891
6892
  TableCardLoaderComponent,
6892
6893
  WorkflowPipesModule,
6893
- ], outputs: ['closeList'], providers: [GetUserDetailsPipe$1], template: "<div class=\"program-responsibility-listing\" [class.animate]=\"animation\">\n <div class=\"program-responsibility-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibilities</h3>\n </div>\n <div class=\"program-responsibility-listing-body\">\n <!-- <app-table-card-loader *ngIf=\"programCountLoader\"></app-table-card-loader> -->\n <!-- <app-table-card\n *ngIf=\"!programCountLoader\"\n class=\"vx-w-100\"\n [tableCard]=\"programTypes\"\n [singleSelectedText]=\"'Responsibility Selected'\"\n [selectedTab]=\"selectedTab\"\n [multipleSelectedText]=\"'Responsibilities Selected'\"\n (setSelectedTab)=\"setSelectedTab($event)\">\n </app-table-card> -->\n <div class=\"search-block vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\"\n placeholder=\"Search Responsibilities\" />\n </div>\n <div class=\"program-responsibility-listing-body-inner vx-mb-2 vx-d-flex\" [class.vx-justify-center]=\"\n !responsibilityLoader && !responsibilityData?.data?.length\n \">\n <ng-container *ngIf=\"responsibilityLoader || responsibilityData?.data?.length\">\n <!-- <div class=\"inner-item-left vx-pr-2\">\n\n <app-grc-category-listing *ngIf=\"!programLoader\" [headerText]=\"'Programs'\" [programData]=\"programData\" [selectedCatAndRisk]=\"selectedCatAndRisk\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"programCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedProgramIds\" (activeSelectedCategory)=\"activeSelectedProgram($event)\" (onCategoryPageChange)=\"onProgramPageChange($event)\"></app-grc-category-listing>\n \n <app-list-loader *ngIf=\"programLoader\"></app-list-loader>\n\n </div> -->\n\n <!-- <div class=\"inner-item-mid vx-pr-2\">\n <app-grc-sub-category-listing *ngIf=\"!categoryLoader && !programLoader\" [headerText]=\"'Programs'\" [categories]=\"categoryData\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"categoryCurrentPage\" [selectedCategoryIds]=\"selectedCategoryIds\" [activeProgram]=\"selectedProgram\" [selectedProgramAndResp]=\"selectedProgramAndResp\" (activeSelectedCategory)=\"activeSelectedSubCategory($event)\" (onCategoryPageChange)=\"onSubCategoryPageChange($event)\"></app-grc-sub-category-listing>\n <app-list-loader *ngIf=\"categoryLoader || programLoader\"></app-list-loader>\n </div> -->\n\n <div class=\"inner-item-right\">\n <!-- <app-grc-responsibility-listing></app-grc-responsibility-listing> -->\n\n <app-grc-responsibility-listing #dataListing *ngIf=\"\n !responsibilityLoader &&\n !categoryLoader &&\n !programLoader &&\n responsibilityData?.data?.length !== 0\n \" [headerText]=\"'Responsibilities'\" [MODE]=\"MODE\" [responsibilityData]=\"responsibilityData\"\n [activeProgram]=\"selectedProgram\" [activeCategory]=\"selectedCategory\"\n [selectedProgramAndResp]=\"selectedProgramAndResp\" [allSelectedResponsibilityIds]=\"selectedResponsibilities\"\n (changeSelectedProgramAndResp)=\"\n changeSelectedProgramAndResp($event)\n \" [currentPage]=\"responsibilityCurrentPage\" [perPageLimit]=\"30\"\n [totalListData]=\"responsibilityData?.total_items\" [totalPages]=\"responsibilityData?.total_pages\"\n (getUpdatedDataList)=\"getUpdatedDataList($event)\"></app-grc-responsibility-listing>\n\n <app-list-loader *ngIf=\"responsibilityLoader || categoryLoader || programLoader\"\n [fullWidth]=\"true\"></app-list-loader>\n\n <app-no-data *ngIf=\"\n responsibilityData?.data?.length === 0 &&\n !(responsibilityLoader || categoryLoader || programLoader)\n \" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\n </div>\n </ng-container>\n <app-no-data *ngIf=\"!responsibilityLoader && !responsibilityData?.data?.length\" [noDataImage]=\"CDN_LINK?.noData\"\n [noDataText]=\"'No data to display'\"></app-no-data>\n </div>\n <app-floating-bar [selectedData]=\"\n selectedResponsibilities | filterResponsibility : responsibilityData?.data\n \" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'title'\"\n [singularText]=\"'Responsibility selected'\" [pluralText]=\"'Responsibilities selected'\"\n (deleteEvent)=\"deleteEvent($event)\"></app-floating-bar>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .program-responsibility-listing{position:fixed;inset:0 30px 0 0}::ng-deep .program-responsibility-listing:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .program-responsibility-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-responsibility-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .program-responsibility-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .program-responsibility-listing-body .search-block{position:relative}::ng-deep .program-responsibility-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .program-responsibility-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-responsibility-listing-body .search-block input::placeholder{color:#747576}::ng-deep .program-responsibility-listing-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .program-responsibility-listing-body-inner{height:calc(100vh - 14.25rem)}::ng-deep .program-responsibility-listing-body-inner .inner-item-left{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-mid{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-right{width:100%}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
6894
+ ], outputs: ['closeList'], providers: [GetUserDetailsPipe$1], template: "<div class=\"program-responsibility-listing\" [class.animate]=\"animation\">\n <div class=\"program-responsibility-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\n <h3 class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibilities</h3>\n </div>\n <div class=\"program-responsibility-listing-body\">\n <!-- <app-table-card-loader *ngIf=\"programCountLoader\"></app-table-card-loader> -->\n <!-- <app-table-card\n *ngIf=\"!programCountLoader\"\n class=\"vx-w-100\"\n [tableCard]=\"programTypes\"\n [singleSelectedText]=\"'Responsibility Selected'\"\n [selectedTab]=\"selectedTab\"\n [multipleSelectedText]=\"'Responsibilities Selected'\"\n (setSelectedTab)=\"setSelectedTab($event)\">\n </app-table-card> -->\n <div class=\"search-block vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" #searchRiskCategory (keyup.enter)=\"handleSearch($event.target.value)\"\n placeholder=\"Search Responsibilities\" />\n </div>\n <div class=\"program-responsibility-listing-body-inner vx-mb-2 vx-d-flex\" [class.vx-justify-center]=\"\n !responsibilityLoader && !responsibilityData?.data?.length\n \">\n <ng-container *ngIf=\"responsibilityLoader || responsibilityData?.data?.length\">\n <!-- <div class=\"inner-item-left vx-pr-2\">\n\n <app-grc-category-listing *ngIf=\"!programLoader\" [headerText]=\"'Programs'\" [programData]=\"programData\" [selectedCatAndRisk]=\"selectedCatAndRisk\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"programCurrentPage\" [selectedTabIndex]=\"selectedTab\" [selectedCategoryIds]=\"selectedProgramIds\" (activeSelectedCategory)=\"activeSelectedProgram($event)\" (onCategoryPageChange)=\"onProgramPageChange($event)\"></app-grc-category-listing>\n \n <app-list-loader *ngIf=\"programLoader\"></app-list-loader>\n\n </div> -->\n\n <!-- <div class=\"inner-item-mid vx-pr-2\">\n <app-grc-sub-category-listing *ngIf=\"!categoryLoader && !programLoader\" [headerText]=\"'Programs'\" [categories]=\"categoryData\" [nameDisplayKey]=\"'item_name'\" [currentPage]=\"categoryCurrentPage\" [selectedCategoryIds]=\"selectedCategoryIds\" [activeProgram]=\"selectedProgram\" [selectedProgramAndResp]=\"selectedProgramAndResp\" (activeSelectedCategory)=\"activeSelectedSubCategory($event)\" (onCategoryPageChange)=\"onSubCategoryPageChange($event)\"></app-grc-sub-category-listing>\n <app-list-loader *ngIf=\"categoryLoader || programLoader\"></app-list-loader>\n </div> -->\n\n <div class=\"inner-item-right\">\n <!-- <app-grc-responsibility-listing></app-grc-responsibility-listing> -->\n\n <app-grc-responsibility-listing #dataListing *ngIf=\"\n !responsibilityLoader &&\n !categoryLoader &&\n !programLoader &&\n responsibilityData?.data?.length !== 0\n \" [headerText]=\"'Responsibilities'\" [MODE]=\"MODE\" [responsibilityData]=\"responsibilityData\"\n [searchString]=\"searchString\" [activeProgram]=\"selectedProgram\" [activeCategory]=\"selectedCategory\"\n [selectedProgramAndResp]=\"selectedProgramAndResp\" [allSelectedResponsibilityIds]=\"selectedResponsibilities\"\n (changeSelectedProgramAndResp)=\"\n changeSelectedProgramAndResp($event)\n \" [currentPage]=\"responsibilityCurrentPage\" [perPageLimit]=\"30\"\n [totalListData]=\"responsibilityData?.total_items\" [totalPages]=\"responsibilityData?.total_pages\"\n (getUpdatedDataList)=\"getUpdatedDataList($event)\"></app-grc-responsibility-listing>\n\n <app-list-loader *ngIf=\"responsibilityLoader || categoryLoader || programLoader\"\n [fullWidth]=\"true\"></app-list-loader>\n\n <app-no-data *ngIf=\"\n responsibilityData?.data?.length === 0 &&\n !(responsibilityLoader || categoryLoader || programLoader)\n \" [noDataImage]=\"CDN_LINK?.noData\" [noDataText]=\"'No data to display'\"></app-no-data>\n </div>\n </ng-container>\n <app-no-data *ngIf=\"!responsibilityLoader && !responsibilityData?.data?.length\" [noDataImage]=\"CDN_LINK?.noData\"\n [noDataText]=\"'No data to display'\"></app-no-data>\n </div>\n <app-floating-bar [selectedData]=\"\n selectedResponsibilities | filterResponsibility : responsibilityData?.data\n \" (closeList)=\"close()\" (closeEvent)=\"save()\" [displayElementKey]=\"'title'\"\n [singularText]=\"'Responsibility selected'\" [pluralText]=\"'Responsibilities selected'\"\n (deleteEvent)=\"deleteEvent($event)\"></app-floating-bar>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .program-responsibility-listing{position:fixed;inset:0 30px 0 0}::ng-deep .program-responsibility-listing:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .program-responsibility-listing.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-responsibility-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .program-responsibility-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .program-responsibility-listing-body .search-block{position:relative}::ng-deep .program-responsibility-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .program-responsibility-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-responsibility-listing-body .search-block input::placeholder{color:#747576}::ng-deep .program-responsibility-listing-body .search-block i{position:absolute;left:1rem;font-size:12px;font-weight:400;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .program-responsibility-listing-body-inner{height:calc(100vh - 14.25rem)}::ng-deep .program-responsibility-listing-body-inner .inner-item-left{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-mid{width:0%}::ng-deep .program-responsibility-listing-body-inner .inner-item-right{width:100%}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
6894
6895
  }], ctorParameters: function () { return [{ type: GrcService }, { type: ResponsibilityService }, { type: GetUserDetailsPipe$1 }]; }, propDecorators: { getSelectedProgramAndResp: [{
6895
6896
  type: Input,
6896
6897
  args: ['selectedProgramAndResp']
@@ -9479,7 +9480,6 @@ class FormatAndEvidenceComponent {
9479
9480
  }
9480
9481
  }
9481
9482
  initializeData(settings, type) {
9482
- console.log('initializeData', settings);
9483
9483
  this.formate.hasUploadFormate = settings?.formatRequired ?? false;
9484
9484
  this.formate.formateType =
9485
9485
  settings?.formatLinks?.length > 0 ? 'LINK' : 'FILE';
@@ -14769,11 +14769,11 @@ class LinkResponsibilityListComponent {
14769
14769
  return newResponsibilities;
14770
14770
  }
14771
14771
  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 }); }
14772
- 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", parentResponsibility: "parentResponsibility" }, 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"], outputs: ["closePopoverEvent"] }, { 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" }] }); }
14772
+ 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", parentResponsibility: "parentResponsibility" }, outputs: { closeButton: "closeButton", 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 <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 *ngIf=\"responsibilitiesData?.allResponsibilityCount > 0\"\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\">\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)\" (click)=\"onClickTabChange(tab)\"\n [class.pointer-none]=\"responsibilityLoader\">\n <div class=\"left vx-d-block vx-w-100\">\n <div class=\"label vx-d-flex vx-align-center\">\n <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">{{\n tab.name }}</label>\n </div>\n </div>\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{\n responsibilityTabCount[typeToCountProperty[tab.type]] || 0\n }}</span>\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 type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n placeholder=\"Search Responsibilities\" />\n </div>\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?.data?.length === 0 && !responsibilityLoader\n \" [noDataImage]=\"noDataImagePath\" [noDataText]=\"noDataMessage\"></app-no-data>\n <ng-container *ngIf=\"responsibilitiesData?.data?.length > 0 && !responsibilityLoader\">\n <div class=\"table-header\">\n <div class=\"table-row\">\n <div\n class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n #\n </div>\n <div\n class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\n [class.with-rc]=\"isOnCompletionRc\">\n RESPONSIBILITIES\n </div>\n <div\n class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\"\n *ngIf=\"isOnCompletionRc\">\n RESPONSIBILITY CENTER\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <ng-container *ngFor=\"\n let responsibility of responsibilitiesData?.data;\n let i = index\n \">\n <div class=\"table-row clickable\" [class.active]=\"\n responsibility?.rid\n | isRespSelected : selectedResponsibilityValues\n \" [class.open]=\"this.viewResponsibilityId === responsibility?.id\" [class.selected]=\"\n responsibility?.rid\n | isRespSelected : selectedResponsibilityValues\n \">\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <div class=\"sr-no\" [appTooltip]=\"'1'\" placement=\"bottom\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"true\">\n {{ responsibilitiesData?.responsibilities_from + i }}\n </div>\n <app-cs-checkbox [value]=\"responsibility?.rid\" [ngValue]=\"\n responsibility?.rid\n | isRespSelected : selectedResponsibilityValues\n \" (ngValueChange)=\"selectResp(responsibility, $event)\">\n </app-cs-checkbox>\n </div>\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <div class=\"avatarFileArea vx-d-flex vx-align-center\">\n <app-avatar [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\" [userDetails]=\"\n [responsibility?.assignor] | getUserDetails : userList\n \"></app-avatar>\n <ng-container *ngIf=\"\n responsibility?.assignees?.userId\n | getUserDetails : userList as assigneeDetails\n \">\n <app-avatar [avatarClass]=\"AVATAR_CONSTANTS.COLOR.GREEN\" [type]=\"\n assigneeDetails?.length > 1\n ? AVATAR_CONSTANTS.ANYONE\n : AVATAR_CONSTANTS.ALL\n \" [userDetails]=\"assigneeDetails\" appStopPropagation></app-avatar>\n </ng-container>\n </div>\n <div class=\"name-details\">\n <div class=\"value vx-fs-13 vx-neutral-100 vx-lh-5\" [appTooltip]=\"responsibility?.title\"\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n {{responsibility?.controlId ? '[CID-' + responsibility?.controlId + '] ' : ''}}\n {{ responsibility?.title }}\n </div>\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\">\n RESPONSIBILITY CENTER:\n </div>\n <ng-container *ngIf=\"\n responsibility?.responsibilityCenters\n | getRCList : rcList : allRcList as rcList\n \">\n <div class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\"\n [appTooltip]=\"rcList?.length > 0 ? rcList[0] : '--'\" placement=\"bottom-left\" delay=\"0\"\n type=\"black\" [tooltipMandatory]=\"false\">\n {{ rcList?.length > 0 ? rcList[0] : \"--\" }}\n </div>\n </ng-container>\n <button *ngIf=\"responsibility?.responsibilityCenters?.length > 1\" class=\"vx-badgeNum xs minimal\"\n appPopover (click)=\"respPopover.popover()\" placement=\"left\">\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 class=\"value\" [appTooltip]=\"rc\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"false\">{{ rc }}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n <button *ngIf=\"\n responsibility?.assigneeType === AVATAR_CONSTANTS.ALL.toLowerCase() ||\n responsibility?.rcType === AVATAR_CONSTANTS.ALL.toLowerCase()\n \" (click)=\"viewResponsibility(responsibility?.id)\" class=\"vx-icon-button minimal small\">\n <i class=\"icons\">\n {{\n viewResponsibilityId === responsibility?.id\n ? \"&#xe9e7;\"\n : \"&#xe9e8;\"\n }}</i>\n </button>\n </div>\n </div>\n <div *ngIf=\"\n viewResponsibilityId === responsibility?.id &&\n viewResponsibilityData[viewResponsibilityId]?.length\n \" class=\"open-more\">\n <div class=\"table-row\" *ngFor=\"\n let data of viewResponsibilityData[viewResponsibilityId]\n \">\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <app-cs-checkbox [value]=\"data?.rid\" [ngValue]=\"\n data\n | isRespSelected : selectedResponsibilityValues : true\n \" (ngValueChange)=\"selectResp(data, $event)\">\n </app-cs-checkbox>\n </div>\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <ng-container *ngIf=\"\n data?.assignees?.userId\n | getUserDetails : userList as assigneeDetails\n \">\n\n <div class=\"avatar-area\">\n <app-avatar [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\" [userDetails]=\"assigneeDetails\"></app-avatar>\n </div>\n <div class=\"name-details\">\n <div class=\"value vx-fs-11 vx-neutral-100 vx-lh-4\" [appTooltip]=\"assigneeDetails[0]?.name\"\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n {{ assigneeDetails[0]?.name }}\n </div>\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\">\n RESPONSIBILITY CENTER:\n </div>\n <ng-container *ngIf=\"\n data?.responsibilityCenters\n | getRCList : rcList : allRcList as childRcList\n \">\n <div class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\" [appTooltip]=\"\n childRcList?.length > 0 ? childRcList[0] : '--'\n \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n {{ childRcList?.length > 0 ? childRcList[0] : \"--\" }}\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n <app-pagination *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\n [start]=\"responsibilitiesData?.responsibilities_from\" [end]=\"responsibilitiesData?.responsibilities_to\"\n [total]=\"responsibilitiesData?.total_responsibilities\" [pageCount]=\"responsibilitiesData?.total_pages\"\n [currentPage]=\"responsibilitiesData?.responsibilityCurrentPage\" (selectedPage)=\"responsibilityPageChange($event)\">\n </app-pagination>\n <app-floating-bar *ngIf=\"!responsibilityLoader\" [selectedData]=\"responsibilityFloaterBarData\"\n [displayElementKey]=\"'ReportName'\" (closeList)=\"back()\" (closeEvent)=\"save($event)\"\n (deleteEvent)=\"deleteItem($event)\" [isDisabled]=\"!responsibilityFloaterBarData?.length\" [isResponsibility]=\"true\"\n [singularText]=\"floaterBarText.SINGULAR_TEXT\" [pluralText]=\"floaterBarText.PLURAL_TEXT\"></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\";@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"], outputs: ["closePopoverEvent"] }, { 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" }] }); }
14773
14773
  }
14774
14774
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkResponsibilityListComponent, decorators: [{
14775
14775
  type: Component,
14776
- 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"] }]
14776
+ args: [{ selector: 'app-link-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 <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 *ngIf=\"responsibilitiesData?.allResponsibilityCount > 0\"\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mb-2\">\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)\" (click)=\"onClickTabChange(tab)\"\n [class.pointer-none]=\"responsibilityLoader\">\n <div class=\"left vx-d-block vx-w-100\">\n <div class=\"label vx-d-flex vx-align-center\">\n <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">{{\n tab.name }}</label>\n </div>\n </div>\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\n <span class=\"vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{\n responsibilityTabCount[typeToCountProperty[tab.type]] || 0\n }}</span>\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 type=\"text\" [(ngModel)]=\"responsibilitySearchText\" (keyup.enter)=\"search()\"\n placeholder=\"Search Responsibilities\" />\n </div>\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?.data?.length === 0 && !responsibilityLoader\n \" [noDataImage]=\"noDataImagePath\" [noDataText]=\"noDataMessage\"></app-no-data>\n <ng-container *ngIf=\"responsibilitiesData?.data?.length > 0 && !responsibilityLoader\">\n <div class=\"table-header\">\n <div class=\"table-row\">\n <div\n class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n #\n </div>\n <div\n class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility\"\n [class.with-rc]=\"isOnCompletionRc\">\n RESPONSIBILITIES\n </div>\n <div\n class=\"table-column vx-fs-11 vx-fw-500 vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-center\"\n *ngIf=\"isOnCompletionRc\">\n RESPONSIBILITY CENTER\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <ng-container *ngFor=\"\n let responsibility of responsibilitiesData?.data;\n let i = index\n \">\n <div class=\"table-row clickable\" [class.active]=\"\n responsibility?.rid\n | isRespSelected : selectedResponsibilityValues\n \" [class.open]=\"this.viewResponsibilityId === responsibility?.id\" [class.selected]=\"\n responsibility?.rid\n | isRespSelected : selectedResponsibilityValues\n \">\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <div class=\"sr-no\" [appTooltip]=\"'1'\" placement=\"bottom\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"true\">\n {{ responsibilitiesData?.responsibilities_from + i }}\n </div>\n <app-cs-checkbox [value]=\"responsibility?.rid\" [ngValue]=\"\n responsibility?.rid\n | isRespSelected : selectedResponsibilityValues\n \" (ngValueChange)=\"selectResp(responsibility, $event)\">\n </app-cs-checkbox>\n </div>\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <div class=\"avatarFileArea vx-d-flex vx-align-center\">\n <app-avatar [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\" [userDetails]=\"\n [responsibility?.assignor] | getUserDetails : userList\n \"></app-avatar>\n <ng-container *ngIf=\"\n responsibility?.assignees?.userId\n | getUserDetails : userList as assigneeDetails\n \">\n <app-avatar [avatarClass]=\"AVATAR_CONSTANTS.COLOR.GREEN\" [type]=\"\n assigneeDetails?.length > 1\n ? AVATAR_CONSTANTS.ANYONE\n : AVATAR_CONSTANTS.ALL\n \" [userDetails]=\"assigneeDetails\" appStopPropagation></app-avatar>\n </ng-container>\n </div>\n <div class=\"name-details\">\n <div class=\"value vx-fs-13 vx-neutral-100 vx-lh-5\" [appTooltip]=\"responsibility?.title\"\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n {{responsibility?.controlId ? '[CID-' + responsibility?.controlId + '] ' : ''}}\n {{ responsibility?.title }}\n </div>\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\">\n RESPONSIBILITY CENTER:\n </div>\n <ng-container *ngIf=\"\n responsibility?.responsibilityCenters\n | getRCList : rcList : allRcList as rcList\n \">\n <div class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\"\n [appTooltip]=\"rcList?.length > 0 ? rcList[0] : '--'\" placement=\"bottom-left\" delay=\"0\"\n type=\"black\" [tooltipMandatory]=\"false\">\n {{ rcList?.length > 0 ? rcList[0] : \"--\" }}\n </div>\n </ng-container>\n <button *ngIf=\"responsibility?.responsibilityCenters?.length > 1\" class=\"vx-badgeNum xs minimal\"\n appPopover (click)=\"respPopover.popover()\" placement=\"left\">\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 class=\"value\" [appTooltip]=\"rc\" placement=\"bottom-left\" delay=\"0\" type=\"black\"\n [tooltipMandatory]=\"false\">{{ rc }}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\">\n <button *ngIf=\"\n responsibility?.assigneeType === AVATAR_CONSTANTS.ALL.toLowerCase() ||\n responsibility?.rcType === AVATAR_CONSTANTS.ALL.toLowerCase()\n \" (click)=\"viewResponsibility(responsibility?.id)\" class=\"vx-icon-button minimal small\">\n <i class=\"icons\">\n {{\n viewResponsibilityId === responsibility?.id\n ? \"&#xe9e7;\"\n : \"&#xe9e8;\"\n }}</i>\n </button>\n </div>\n </div>\n <div *ngIf=\"\n viewResponsibilityId === responsibility?.id &&\n viewResponsibilityData[viewResponsibilityId]?.length\n \" class=\"open-more\">\n <div class=\"table-row\" *ngFor=\"\n let data of viewResponsibilityData[viewResponsibilityId]\n \">\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <app-cs-checkbox [value]=\"data?.rid\" [ngValue]=\"\n data\n | isRespSelected : selectedResponsibilityValues : true\n \" (ngValueChange)=\"selectResp(data, $event)\">\n </app-cs-checkbox>\n </div>\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <ng-container *ngIf=\"\n data?.assignees?.userId\n | getUserDetails : userList as assigneeDetails\n \">\n\n <div class=\"avatar-area\">\n <app-avatar [type]=\"AVATAR_CONSTANTS.TYPE.ASSIGNOR\" [userDetails]=\"assigneeDetails\"></app-avatar>\n </div>\n <div class=\"name-details\">\n <div class=\"value vx-fs-11 vx-neutral-100 vx-lh-4\" [appTooltip]=\"assigneeDetails[0]?.name\"\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n {{ assigneeDetails[0]?.name }}\n </div>\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"vx-fs-11 vx-fw-500 vx-neutral-100 vx-lh-4 vx-tt-uppercase vx-mr-1\">\n RESPONSIBILITY CENTER:\n </div>\n <ng-container *ngIf=\"\n data?.responsibilityCenters\n | getRCList : rcList : allRcList as childRcList\n \">\n <div class=\"resp-name vx-fs-11 vx-gray-60 vx-lh-4 vx-mr-2\" [appTooltip]=\"\n childRcList?.length > 0 ? childRcList[0] : '--'\n \" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\n {{ childRcList?.length > 0 ? childRcList[0] : \"--\" }}\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center action\"></div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n <app-pagination *ngIf=\"!responsibilityLoader && responsibilitiesData?.total_pages > 1\"\n [start]=\"responsibilitiesData?.responsibilities_from\" [end]=\"responsibilitiesData?.responsibilities_to\"\n [total]=\"responsibilitiesData?.total_responsibilities\" [pageCount]=\"responsibilitiesData?.total_pages\"\n [currentPage]=\"responsibilitiesData?.responsibilityCurrentPage\" (selectedPage)=\"responsibilityPageChange($event)\">\n </app-pagination>\n <app-floating-bar *ngIf=\"!responsibilityLoader\" [selectedData]=\"responsibilityFloaterBarData\"\n [displayElementKey]=\"'ReportName'\" (closeList)=\"back()\" (closeEvent)=\"save($event)\"\n (deleteEvent)=\"deleteItem($event)\" [isDisabled]=\"!responsibilityFloaterBarData?.length\" [isResponsibility]=\"true\"\n [singularText]=\"floaterBarText.SINGULAR_TEXT\" [pluralText]=\"floaterBarText.PLURAL_TEXT\"></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\";@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"] }]
14777
14777
  }], ctorParameters: function () { return [{ type: FrequencyService }, { type: ComplianceCommonService }]; }, propDecorators: { onCompletionOfResponsibility: [{
14778
14778
  type: Input
14779
14779
  }], feature: [{
@@ -29301,11 +29301,11 @@ class AvatarV2Component {
29301
29301
  }
29302
29302
  }
29303
29303
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarV2Component, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
29304
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarV2Component, isStandalone: true, selector: "lib-avatar-v2", inputs: { avatarList: "avatarList", type: "type" }, ngImport: i0, template: "<div class=\"vx-avatar-group \">\n\n <ng-container *ngFor=\"let eachAvatar of avatarList | slice:0:sliceCount\">\n <div class=\"vx-avatar md\">\n <img *ngIf=\"eachAvatar?.imagePath; else avatar\" [src]=\"imagePath + eachAvatar?.imagePath\"\n [alt]=\"eachAvatar?.shortName\" [appTooltip]=\"eaeachAvatar?.name\" placement=\"bottom-left\" delay=\"0\"\n type=\"black\" [tooltipMandatory]=\"true\" />\n <ng-template #avatar>\n <span *ngIf=\"!eachAvatar?.avatar\" [appTooltip]=\"eachAvatar?.name\" [tooltipMandatory]=\"true\"\n class=\"blue\">{{ eachAvatar?.shortName\n }}</span>\n </ng-template>\n </div>\n\n </ng-container>\n <div *ngIf=\"showPopover \" appPopover (click)=\"users.popover()\" placement=\"left\" class=\"vx-avatar md multi-user\">\n <span class=\"user\">\n <i class=\"icons user-icons vx-fs-12\">&#xea35;</i>\n <span class=\"count vx-txt-white vx-d-flex vx-align-center vx-justify-center\">{{ avatarList?.length -\n popoverSliceCount\n }}</span>\n </span>\n </div>\n\n\n</div>\n\n<app-popover #users>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of avatarList | slice: popoverSliceCount\" appTooltip=\"{{ user?.name }}\"\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <div class=\"avatar-card\">\n <div class=\"avatar\">\n <ng-container *ngIf=\"!user?.avatar\">{{\n user?.shortName\n }}</ng-container>\n <img *ngIf=\"user?.avatar\" [src]=\"user?.avatar\" alt=\"\" width=\"24\" height=\"24\" />\n </div>\n <span class=\"value\">{{ user?.name }}</span>\n </div>\n </li>\n </ul>\n </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";.multi-user{background:#f9f9fa;border:2px solid #F2F2F5}.multi-user .user{background:transparent;position:relative;cursor:pointer}.multi-user .user .user-icons{color:#565a6f;position:absolute}.multi-user .user .count{background:#1e5dd3;border:2px solid #FFFFFF;border-radius:20px;min-width:1.125rem;height:1rem;position:absolute;top:unset;bottom:-.125rem;right:-10px;width:auto;padding:0 .125rem;font-size:9px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }] }); }
29304
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarV2Component, isStandalone: true, selector: "lib-avatar-v2", inputs: { avatarList: "avatarList", type: "type" }, ngImport: i0, template: "<div class=\"vx-avatar-group \">\n\n <ng-container *ngFor=\"let eachAvatar of avatarList | slice:0:sliceCount\">\n <div class=\"vx-avatar md\">\n <img *ngIf=\"eachAvatar?.imagePath; else avatar\" [src]=\"imagePath + eachAvatar?.imagePath\"\n [alt]=\"eachAvatar?.shortName\" [appTooltip]=\"eaeachAvatar?.name\" placement=\"bottom-left\" delay=\"0\"\n type=\"black\" [tooltipMandatory]=\"true\" />\n <ng-template #avatar>\n <span *ngIf=\"!eachAvatar?.avatar\" [appTooltip]=\"eachAvatar?.name\" [tooltipMandatory]=\"true\"\n class=\"blue\">{{ eachAvatar?.shortName\n }}</span>\n </ng-template>\n </div>\n\n </ng-container>\n <div *ngIf=\"showPopover \" appPopover (click)=\"users.popover()\" placement=\"left\" class=\"vx-avatar md multi-user\">\n <span class=\"user\">\n <i class=\"icons user-icons vx-fs-12\">&#xea35;</i>\n <span class=\"count vx-txt-white vx-d-flex vx-align-center vx-justify-center\">{{ avatarList?.length -\n popoverSliceCount\n }}</span>\n </span>\n </div>\n\n\n</div>\n\n<app-popover #users>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of avatarList | slice: popoverSliceCount\" appTooltip=\"{{ user?.name }}\"\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <div class=\"avatar-card\">\n <div class=\"avatar\">\n <ng-container *ngIf=\"!user?.avatar\">{{\n user?.shortName\n }}</ng-container>\n <img *ngIf=\"user?.avatar\" [src]=\"user?.avatar\" alt=\"\" width=\"24\" height=\"24\" />\n </div>\n <span class=\"value\">{{ user?.name }}</span>\n </div>\n </li>\n </ul>\n </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";.multi-user{background:#f9f9fa;border:2px solid #F2F2F5}.multi-user .user{background:transparent;position:relative;cursor:pointer}.multi-user .user .user-icons{color:#565a6f;position:absolute}.multi-user .user .count{background:#1e5dd3;border:2px solid #FFFFFF;border-radius:20px;min-width:1.125rem;height:1rem;position:absolute;top:unset;bottom:-.125rem;right:-10px;width:auto;padding:0 .125rem;font-size:9px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"], outputs: ["closePopoverEvent"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
29305
29305
  }
29306
29306
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarV2Component, decorators: [{
29307
29307
  type: Component,
29308
- args: [{ selector: 'lib-avatar-v2', standalone: true, imports: [CommonModule, PopoverModule], template: "<div class=\"vx-avatar-group \">\n\n <ng-container *ngFor=\"let eachAvatar of avatarList | slice:0:sliceCount\">\n <div class=\"vx-avatar md\">\n <img *ngIf=\"eachAvatar?.imagePath; else avatar\" [src]=\"imagePath + eachAvatar?.imagePath\"\n [alt]=\"eachAvatar?.shortName\" [appTooltip]=\"eaeachAvatar?.name\" placement=\"bottom-left\" delay=\"0\"\n type=\"black\" [tooltipMandatory]=\"true\" />\n <ng-template #avatar>\n <span *ngIf=\"!eachAvatar?.avatar\" [appTooltip]=\"eachAvatar?.name\" [tooltipMandatory]=\"true\"\n class=\"blue\">{{ eachAvatar?.shortName\n }}</span>\n </ng-template>\n </div>\n\n </ng-container>\n <div *ngIf=\"showPopover \" appPopover (click)=\"users.popover()\" placement=\"left\" class=\"vx-avatar md multi-user\">\n <span class=\"user\">\n <i class=\"icons user-icons vx-fs-12\">&#xea35;</i>\n <span class=\"count vx-txt-white vx-d-flex vx-align-center vx-justify-center\">{{ avatarList?.length -\n popoverSliceCount\n }}</span>\n </span>\n </div>\n\n\n</div>\n\n<app-popover #users>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of avatarList | slice: popoverSliceCount\" appTooltip=\"{{ user?.name }}\"\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <div class=\"avatar-card\">\n <div class=\"avatar\">\n <ng-container *ngIf=\"!user?.avatar\">{{\n user?.shortName\n }}</ng-container>\n <img *ngIf=\"user?.avatar\" [src]=\"user?.avatar\" alt=\"\" width=\"24\" height=\"24\" />\n </div>\n <span class=\"value\">{{ user?.name }}</span>\n </div>\n </li>\n </ul>\n </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";.multi-user{background:#f9f9fa;border:2px solid #F2F2F5}.multi-user .user{background:transparent;position:relative;cursor:pointer}.multi-user .user .user-icons{color:#565a6f;position:absolute}.multi-user .user .count{background:#1e5dd3;border:2px solid #FFFFFF;border-radius:20px;min-width:1.125rem;height:1rem;position:absolute;top:unset;bottom:-.125rem;right:-10px;width:auto;padding:0 .125rem;font-size:9px}\n"] }]
29308
+ args: [{ selector: 'lib-avatar-v2', standalone: true, imports: [CommonModule, PopoverModule, TooltipModule], template: "<div class=\"vx-avatar-group \">\n\n <ng-container *ngFor=\"let eachAvatar of avatarList | slice:0:sliceCount\">\n <div class=\"vx-avatar md\">\n <img *ngIf=\"eachAvatar?.imagePath; else avatar\" [src]=\"imagePath + eachAvatar?.imagePath\"\n [alt]=\"eachAvatar?.shortName\" [appTooltip]=\"eaeachAvatar?.name\" placement=\"bottom-left\" delay=\"0\"\n type=\"black\" [tooltipMandatory]=\"true\" />\n <ng-template #avatar>\n <span *ngIf=\"!eachAvatar?.avatar\" [appTooltip]=\"eachAvatar?.name\" [tooltipMandatory]=\"true\"\n class=\"blue\">{{ eachAvatar?.shortName\n }}</span>\n </ng-template>\n </div>\n\n </ng-container>\n <div *ngIf=\"showPopover \" appPopover (click)=\"users.popover()\" placement=\"left\" class=\"vx-avatar md multi-user\">\n <span class=\"user\">\n <i class=\"icons user-icons vx-fs-12\">&#xea35;</i>\n <span class=\"count vx-txt-white vx-d-flex vx-align-center vx-justify-center\">{{ avatarList?.length -\n popoverSliceCount\n }}</span>\n </span>\n </div>\n\n\n</div>\n\n<app-popover #users>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of avatarList | slice: popoverSliceCount\" appTooltip=\"{{ user?.name }}\"\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <div class=\"avatar-card\">\n <div class=\"avatar\">\n <ng-container *ngIf=\"!user?.avatar\">{{\n user?.shortName\n }}</ng-container>\n <img *ngIf=\"user?.avatar\" [src]=\"user?.avatar\" alt=\"\" width=\"24\" height=\"24\" />\n </div>\n <span class=\"value\">{{ user?.name }}</span>\n </div>\n </li>\n </ul>\n </div>\n</app-popover>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";.multi-user{background:#f9f9fa;border:2px solid #F2F2F5}.multi-user .user{background:transparent;position:relative;cursor:pointer}.multi-user .user .user-icons{color:#565a6f;position:absolute}.multi-user .user .count{background:#1e5dd3;border:2px solid #FFFFFF;border-radius:20px;min-width:1.125rem;height:1rem;position:absolute;top:unset;bottom:-.125rem;right:-10px;width:auto;padding:0 .125rem;font-size:9px}\n"] }]
29309
29309
  }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
29310
29310
  type: Optional
29311
29311
  }] }]; }, propDecorators: { avatarList: [{