vcomply-workflow-engine 6.1.71 → 6.1.72

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 (9) hide show
  1. package/esm2022/lib/sharedComponents/format-and-evidence/format-and-evidence.component.mjs +1 -2
  2. package/esm2022/lib/sharedComponents/link-responsibility/link-responsibility.component.mjs +3 -3
  3. package/esm2022/lib/ui-kit/avatar-v2/avatar-v2.component.mjs +5 -3
  4. package/esm2022/lib/ui-kit/tooltip/tooltip.directive.mjs +1 -1
  5. package/esm2022/lib/workflow/shared/components/program-responsibility-listing/program-responsibility-listing.component.mjs +2 -3
  6. package/fesm2022/vcomply-workflow-engine.mjs +5 -7
  7. package/fesm2022/vcomply-workflow-engine.mjs.map +1 -1
  8. package/lib/workflow-risk/workflow-risk.component.d.ts +1 -1
  9. package/package.json +1 -1
package/fesm2022/vcomply-workflow-engine.mjs CHANGED
@@ -6808,7 +6808,7 @@ class ProgramResponsibilityListingComponent {
6808
6808
  return {
6809
6809
  ...responsibility,
6810
6810
  name: responsibility?.title || '',
6811
- controlId: responsibility?.controlId ? '[CID-' + responsibility?.controlId + ']' : '',
6811
+ controlId: responsibility?.controlId ? '[CID-' + responsibility?.controlId + '] ' : '',
6812
6812
  _id: responsibility?.rid,
6813
6813
  entrustedBy: {
6814
6814
  name: assignorDetails?.name || '',
@@ -6838,7 +6838,6 @@ class ProgramResponsibilityListingComponent {
6838
6838
  this.responsibilityCurrentPage = 1;
6839
6839
  }
6840
6840
  changeSelectedProgramAndResp(event) {
6841
- console.log('changeSelectedProgramAndResp event', event);
6842
6841
  this.selectedProgramAndResp = event;
6843
6842
  this.getSelectedProgramIds(this.selectedProgramAndResp);
6844
6843
  this.getAllSelectedResponsibilities(this.selectedProgramAndResp);
@@ -9479,7 +9478,6 @@ class FormatAndEvidenceComponent {
9479
9478
  }
9480
9479
  }
9481
9480
  initializeData(settings, type) {
9482
- console.log('initializeData', settings);
9483
9481
  this.formate.hasUploadFormate = settings?.formatRequired ?? false;
9484
9482
  this.formate.formateType =
9485
9483
  settings?.formatLinks?.length > 0 ? 'LINK' : 'FILE';
@@ -14769,11 +14767,11 @@ class LinkResponsibilityListComponent {
14769
14767
  return newResponsibilities;
14770
14768
  }
14771
14769
  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" }] }); }
14770
+ 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
14771
  }
14774
14772
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkResponsibilityListComponent, decorators: [{
14775
14773
  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"] }]
14774
+ 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
14775
  }], ctorParameters: function () { return [{ type: FrequencyService }, { type: ComplianceCommonService }]; }, propDecorators: { onCompletionOfResponsibility: [{
14778
14776
  type: Input
14779
14777
  }], feature: [{
@@ -29301,11 +29299,11 @@ class AvatarV2Component {
29301
29299
  }
29302
29300
  }
29303
29301
  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"] }] }); }
29302
+ 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
29303
  }
29306
29304
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarV2Component, decorators: [{
29307
29305
  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"] }]
29306
+ 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
29307
  }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
29310
29308
  type: Optional
29311
29309
  }] }]; }, propDecorators: { avatarList: [{