vcomply-workflow-engine 6.1.12 → 6.1.13

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 (14) hide show
  1. package/esm2022/lib/report-a-case/workflow-case/workflow-case.component.mjs +13 -9
  2. package/esm2022/lib/sharedComponents/floating-bar/floating-bar.component.mjs +5 -4
  3. package/esm2022/lib/sharedComponents/floating-bar/floating-bar.module.mjs +6 -5
  4. package/esm2022/lib/sharedComponents/link-responsibility/link-responsibility.component.mjs +9 -11
  5. package/esm2022/lib/workflow/shared/components/grc-responsibility-listing/grc-responsibility-listing.component.mjs +5 -4
  6. package/esm2022/lib/workflow/shared/workflow-pipes/get-user-details.pipe.mjs +2 -2
  7. package/esm2022/lib/workflow/shared/workflow-pipes/user-short-name.pipe.mjs +33 -0
  8. package/esm2022/lib/workflow/shared/workflow-pipes/workflow-pipes.module.mjs +13 -8
  9. package/fesm2022/vcomply-workflow-engine.mjs +101 -64
  10. package/fesm2022/vcomply-workflow-engine.mjs.map +1 -1
  11. package/lib/sharedComponents/floating-bar/floating-bar.module.d.ts +4 -3
  12. package/lib/workflow/shared/workflow-pipes/user-short-name.pipe.d.ts +7 -0
  13. package/lib/workflow/shared/workflow-pipes/workflow-pipes.module.d.ts +6 -5
  14. package/package.json +1 -1
package/fesm2022/vcomply-workflow-engine.mjs CHANGED
@@ -3161,11 +3161,11 @@ class FloatingBarComponent {
3161
3161
  this.workflowTypeChanged.emit(event);
3162
3162
  }
3163
3163
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3164
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FloatingBarComponent, selector: "app-floating-bar", inputs: { selectedData: "selectedData", selectedGroups: "selectedGroups", displayElementKey: "displayElementKey", elementId: "elementId", singularText: "singularText", pluralText: "pluralText", showNextButton: "showNextButton", showFrequencyText: "showFrequencyText", showWorkflow: "showWorkflow", workflowText: "workflowText", currentFrequency: "currentFrequency", isDisabled: "isDisabled", workflowList: "workflowList", selectedWorkflow: "selectedWorkflow", workflowPlaceHolder: "workflowPlaceHolder", mode: "mode", defaultSelectedValue: ["defaultSelected", "defaultSelectedValue"], groupsEnabled: "groupsEnabled", isResponsibility: "isResponsibility", nonRemovableUsersList: "nonRemovableUsersList", removePosition: "removePosition" }, outputs: { closeEvent: "closeEvent", deleteEvent: "deleteEvent", closeList: "closeList", deleteGroupEvent: "deleteGroupEvent", workflowTypeChanged: "workflowTypeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"userGroup-floating-bar\">\n <div class=\"userGroup-floating-bar-container\">\n <div class=\"left user-group-left\">\n <ng-container *ngIf=\"selectedData.length > 0 && !groupsEnabled\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n >\n <ng-container\n *ngFor=\"let element of selectedData?.slice(0, 1); let i = index\"\n >\n <ng-container *ngIf=\"element && !isResponsibility\">\n <i\n *ngIf=\"\n !nonRemovableUsersList.includes(element[elementId]) &&\n removePosition != 'right'\n \"\n (click)=\"deleteSelected(element)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"step\"\n *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n >{{\n selectedData.length <= 2 &&\n i == selectedData.length - 1 &&\n selectedData.length > 1\n ? \"Final\"\n : i + 1\n }}</span\n >\n <span\n *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"element[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ element[displayElementKey] }}</span\n >\n <span\n *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n class=\"chipName vx-fs-11 vx-label-txt\"\n >{{\n element[displayElementKey]\n | slice : element[displayElementKey].length - 1\n }}</span\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-ml-1\"\n *ngIf=\"\n !nonRemovableUsersList.includes(element[elementId]) &&\n removePosition == 'right'\n \"\n (click)=\"deleteSelected(element)\"\n >&#xe9ae;</i\n >\n </ng-container>\n </ng-container>\n <button\n *ngIf=\"selectedData?.length > 1 || (isResponsibility && selectedData?.length > 0)\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n [class.greenBg]=\"false\"\n appPopover\n (click)=\"userPopover.popover()\"\n placement=\"left\"\n >\n {{ isResponsibility ? selectedData?.length : selectedData?.slice(1)?.length }}\n </button>\n </div>\n\n <div class=\"name\" *ngIf=\"selectedData?.length > 1 || (isResponsibility && selectedData?.length > 0)\">\n <span *ngIf=\"(!isResponsibility && selectedData?.slice(1).length === 1) || (isResponsibility && selectedData?.length === 1)\">{{\n singularText\n }}</span>\n <span *ngIf=\"(!isResponsibility && selectedData?.slice(1).length > 1) || (isResponsibility && selectedData?.length > 1)\">{{\n pluralText\n }}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"groupsEnabled\">\n <div class=\"user-group-chip\" *ngIf=\"selectedData?.length\">\n <i (click)=\"deleteSelected(selectedData[0])\" class=\"icons cross\"\n >&#xe9ae;</i\n >\n <div\n class=\"user-group-name\"\n appTooltip=\"{{ selectedData[0][displayElementKey] }}\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ selectedData[0][displayElementKey] }}\n </div>\n <div\n class=\"counter\"\n *ngIf=\"selectedData?.length > 1\"\n appPopover\n (click)=\"UserWithFeatureFlagPopover.popover()\"\n placement=\"left\"\n >\n +{{ selectedData?.length - 1 }}\n </div>\n </div>\n <div\n class=\"name userGroup-name\"\n *ngIf=\"selectedData?.length > 0 && groupsEnabled\"\n >\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length === 1\">\n {{\n selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"\"\n }}</span\n >\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length > 1\"\n >Users\n {{\n selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"selected\"\n }}</span\n >\n </div>\n <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n <i\n class=\"icons cross\"\n (click)=\"deleteSelectedGroup(selectedGroups[0])\"\n >&#xe9ae;</i\n >\n <div\n class=\"user-group-name\"\n appTooltip=\"{{ selectedGroups[0]?.group_name }}\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ selectedGroups[0]?.group_name }}\n </div>\n <div\n class=\"counter group\"\n *ngIf=\"selectedGroups.length > 1\"\n appPopover\n (click)=\"groupPopover.popover()\"\n placement=\"left\"\n >\n +{{ selectedGroups.length - 1 }}\n </div>\n </div>\n <div class=\"name userGroup-name\" *ngIf=\"selectedGroups.length > 0\">\n {{ selectedGroups?.length > 1 ? \" User Groups selected \" : \"\" }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"showFrequencyText\">\n <div class=\"name vx-ml-0\">\n <span\n >You have selected\n <span class=\"vx-fw-500 vx-label-txt\">{{ currentFrequency }}</span>\n frequency.</span\n >\n </div>\n </ng-container>\n <ng-content></ng-content>\n </div>\n <div\n class=\"center\"\n *ngIf=\"\n (showWorkflow && mode === 'CREATE') ||\n (showWorkflow && workflowList.includes('ROUND-ROBIN'))\n \"\n >\n <label>\n {{ workflowText }}\n <span\n class=\"icon\"\n *ngIf=\"workflowText == 'Approval Workflow'\"\n libPopoverHover\n (mouseover)=\"dataTooltip.popover()\"\n (mouseleave)=\"dataTooltip.closePopover()\"\n placement=\"right\"\n ><i class=\"icons\">&#xe91f;</i></span\n >\n </label>\n <popover-hover #dataTooltip>\n <div class=\"vx-info-card\">\n <div class=\"vx-info-card-body\">\n You can select from the following three options:<br />\n <strong>Sequential:</strong> The policy would be sent for approval\n one at a time in the sequence defined by you.<br />\n <strong>Round-robin:</strong> The policy will be sent for approval\n to all approvers at the same time. However, it is mandatory for all\n approvers to take action.<br />\n <strong>Any One:</strong> The policy will be sent for approval to\n all approvers at the same time. If anyone of the approver approves\n the policy, it will be considered as approved.\n </div>\n </div>\n </popover-hover>\n <cs-select\n [(ngModel)]=\"selectedWorkflow\"\n (ngModelChange)=\"selectedWorkflowChange($event)\"\n [placeholder]=\"'Approval WorkFlow *'\"\n [setMaxWidth]=\"true\"\n >\n <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\n {{ data }}\n </cs-option>\n </cs-select>\n </div>\n <div class=\"right\">\n <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\n <button\n *ngIf=\"showNextButton\"\n [disabled]=\"isDisabled\"\n (click)=\"next()\"\n appRipple\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n </div>\n </div>\n</div>\n<app-popover #userPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let element of selectedData?.slice(1); let i = index\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n >\n <i\n class=\"icons\"\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n (click)=\"deleteSelected(element)\"\n >&#xe90d;</i\n >\n <span\n class=\"step\"\n *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n >\n {{ i == selectedData.slice(1).length - 1 ? \"Final\" : i + 2 }}\n </span>\n {{ element[displayElementKey] }}\n </span>\n\n <span\n class=\"value\"\n *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n >\n <i\n class=\"icons\"\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n (click)=\"deleteSelected(element)\"\n >&#xe90d;</i\n >\n {{ element[displayElementKey] }}\n </span>\n <div\n *ngIf=\"\n defaultSelected?.category_id &&\n defaultSelected?.category_id === element?.category_id\n \"\n class=\"primary-label\"\n >\n PRIMARY\n </div>\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n<app-popover #UserWithFeatureFlagPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of selectedData | slice : 1\">\n <div class=\"avatar-card\">\n <span class=\"value\"\n ><i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i\n >{{ data[displayElementKey] }}</span\n >\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of selectedGroups | slice : 1\">\n <div class=\"avatar-card\">\n <span class=\"value\"\n ><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\">&#xe90d;</i\n >{{ data[\"group_name\"] }}</span\n >\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .userGroup-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}::ng-deep .userGroup-floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .userGroup-floating-bar-container .left.user-group-left{width:60%}::ng-deep .userGroup-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .userGroup-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .userGroup-floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .userGroup-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .userGroup-floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .userGroup-floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .userGroup-floating-bar-container .left .counter{border-radius:20px;background:#34aa44;border:none;color:#fff;font-size:9px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;margin:0 0 0 8px;padding:0 4px;justify-content:center;line-height:16px;min-width:24px}::ng-deep .userGroup-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .userGroup-floating-bar-container .left .name{margin-right:4px;color:#707070;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .userGroup-floating-bar-container .left .user-group-chip{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem;display:inline-flex;align-items:center;padding:0 8px;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross{color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross:hover{background:#f1f1f1}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .user-group-name{color:#161b2f;font-size:11px;display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem}::ng-deep .userGroup-floating-bar-container .left .userGroup-text{margin-right:4px}::ng-deep .userGroup-floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .userGroup-floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .userGroup-floating-bar-container .center cs-select{width:100%}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .userGroup-floating-bar-container .right{display:flex;align-items:center}::ng-deep .userGroup-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .userGroup-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .userGroup-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .userGroup-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .userGroup-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .userGroup-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .userGroup-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}.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 button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.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;min-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{background:#fff;width:100%;height: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{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:4px}.wf-action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.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 i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8;margin-top:8px}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.wf-action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.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)}}.vx-overlay{position:fixed;z-index:1;inset:0}.vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}\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: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: DataTypePipe, name: "dataType" }] }); }
3164
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FloatingBarComponent, selector: "app-floating-bar", inputs: { selectedData: "selectedData", selectedGroups: "selectedGroups", displayElementKey: "displayElementKey", elementId: "elementId", singularText: "singularText", pluralText: "pluralText", showNextButton: "showNextButton", showFrequencyText: "showFrequencyText", showWorkflow: "showWorkflow", workflowText: "workflowText", currentFrequency: "currentFrequency", isDisabled: "isDisabled", workflowList: "workflowList", selectedWorkflow: "selectedWorkflow", workflowPlaceHolder: "workflowPlaceHolder", mode: "mode", defaultSelectedValue: ["defaultSelected", "defaultSelectedValue"], groupsEnabled: "groupsEnabled", isResponsibility: "isResponsibility", nonRemovableUsersList: "nonRemovableUsersList", removePosition: "removePosition" }, outputs: { closeEvent: "closeEvent", deleteEvent: "deleteEvent", closeList: "closeList", deleteGroupEvent: "deleteGroupEvent", workflowTypeChanged: "workflowTypeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"userGroup-floating-bar\">\n <div class=\"userGroup-floating-bar-container\">\n <div class=\"left user-group-left\">\n <ng-container *ngIf=\"selectedData.length > 0 && !groupsEnabled\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n >\n <ng-container\n *ngFor=\"let element of selectedData?.slice(0, 1); let i = index\"\n >\n <ng-container *ngIf=\"element && !isResponsibility\">\n <i\n *ngIf=\"\n !nonRemovableUsersList.includes(element[elementId]) &&\n removePosition != 'right'\n \"\n (click)=\"deleteSelected(element)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"step\"\n *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n >{{\n selectedData.length <= 2 &&\n i == selectedData.length - 1 &&\n selectedData.length > 1\n ? \"Final\"\n : i + 1\n }}</span\n >\n <span\n *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"element[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ element[displayElementKey] }}</span\n >\n <span\n *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"element[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n element[displayElementKey]\n | slice : element[displayElementKey].length - 1\n }}</span\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-ml-1\"\n *ngIf=\"\n !nonRemovableUsersList.includes(element[elementId]) &&\n removePosition == 'right'\n \"\n (click)=\"deleteSelected(element)\"\n >&#xe9ae;</i\n >\n </ng-container>\n </ng-container>\n <button\n *ngIf=\"selectedData?.length > 1 || (isResponsibility && selectedData?.length > 0)\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n [class.greenBg]=\"false\"\n appPopover\n (click)=\"userPopover.popover()\"\n placement=\"left\"\n >\n {{ isResponsibility ? selectedData?.length : selectedData?.slice(1)?.length }}\n </button>\n </div>\n\n <div class=\"name\" *ngIf=\"selectedData?.length > 0\">\n <span *ngIf=\"selectedData?.length === 1\">{{\n singularText\n }}</span>\n <span *ngIf=\"selectedData?.length > 1\">{{\n pluralText\n }}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"groupsEnabled\">\n <div class=\"user-group-chip\" *ngIf=\"selectedData?.length\">\n <i (click)=\"deleteSelected(selectedData[0])\" class=\"icons cross\"\n >&#xe9ae;</i\n >\n <div\n class=\"user-group-name\"\n appTooltip=\"{{ selectedData[0][displayElementKey] }}\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ selectedData[0][displayElementKey] }}\n </div>\n <div\n class=\"counter\"\n *ngIf=\"selectedData?.length > 1\"\n appPopover\n (click)=\"UserWithFeatureFlagPopover.popover()\"\n placement=\"left\"\n >\n +{{ selectedData?.length - 1 }}\n </div>\n </div>\n <div\n class=\"name userGroup-name\"\n *ngIf=\"selectedData?.length > 0 && groupsEnabled\"\n >\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length === 1\">\n {{\n selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"\"\n }}</span\n >\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length > 1\"\n >Users\n {{\n selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"selected\"\n }}</span\n >\n </div>\n <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n <i\n class=\"icons cross\"\n (click)=\"deleteSelectedGroup(selectedGroups[0])\"\n >&#xe9ae;</i\n >\n <div\n class=\"user-group-name\"\n appTooltip=\"{{ selectedGroups[0]?.group_name }}\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ selectedGroups[0]?.group_name }}\n </div>\n <div\n class=\"counter group\"\n *ngIf=\"selectedGroups.length > 1\"\n appPopover\n (click)=\"groupPopover.popover()\"\n placement=\"left\"\n >\n +{{ selectedGroups.length - 1 }}\n </div>\n </div>\n <div class=\"name userGroup-name\" *ngIf=\"selectedGroups.length > 0\">\n {{ selectedGroups?.length > 1 ? \" User Groups selected \" : \"\" }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"showFrequencyText\">\n <div class=\"name vx-ml-0\">\n <span\n >You have selected\n <span class=\"vx-fw-500 vx-label-txt\">{{ currentFrequency }}</span>\n frequency.</span\n >\n </div>\n </ng-container>\n <ng-content></ng-content>\n </div>\n <div\n class=\"center\"\n *ngIf=\"\n (showWorkflow && mode === 'CREATE') ||\n (showWorkflow && workflowList.includes('ROUND-ROBIN'))\n \"\n >\n <label>\n {{ workflowText }}\n <span\n class=\"icon\"\n *ngIf=\"workflowText == 'Approval Workflow'\"\n libPopoverHover\n (mouseover)=\"dataTooltip.popover()\"\n (mouseleave)=\"dataTooltip.closePopover()\"\n placement=\"right\"\n ><i class=\"icons\">&#xe91f;</i></span\n >\n </label>\n <popover-hover #dataTooltip>\n <div class=\"vx-info-card\">\n <div class=\"vx-info-card-body\">\n You can select from the following three options:<br />\n <strong>Sequential:</strong> The policy would be sent for approval\n one at a time in the sequence defined by you.<br />\n <strong>Round-robin:</strong> The policy will be sent for approval\n to all approvers at the same time. However, it is mandatory for all\n approvers to take action.<br />\n <strong>Any One:</strong> The policy will be sent for approval to\n all approvers at the same time. If anyone of the approver approves\n the policy, it will be considered as approved.\n </div>\n </div>\n </popover-hover>\n <cs-select\n [(ngModel)]=\"selectedWorkflow\"\n (ngModelChange)=\"selectedWorkflowChange($event)\"\n [placeholder]=\"'Approval WorkFlow *'\"\n [setMaxWidth]=\"true\"\n >\n <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\n {{ data }}\n </cs-option>\n </cs-select>\n </div>\n <div class=\"right\">\n <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\n <button\n *ngIf=\"showNextButton\"\n [disabled]=\"isDisabled\"\n (click)=\"next()\"\n appRipple\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n </div>\n </div>\n</div>\n<app-popover #userPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let element of selectedData?.slice(1); let i = index\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n [appTooltip]=\" element[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons\"\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n (click)=\"deleteSelected(element)\"\n >&#xe90d;</i\n >\n <span\n class=\"step\"\n *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n >\n {{ i == selectedData.slice(1).length - 1 ? \"Final\" : i + 2 }}\n </span>\n {{ element[displayElementKey] }}\n </span>\n\n <span\n class=\"value\"\n *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n [appTooltip]=\" element[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n \n >\n <i\n class=\"icons\"\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n (click)=\"deleteSelected(element)\"\n >&#xe90d;</i\n >\n {{ element[displayElementKey] }}\n </span>\n <div\n *ngIf=\"\n defaultSelected?.category_id &&\n defaultSelected?.category_id === element?.category_id\n \"\n class=\"primary-label\"\n >\n PRIMARY\n </div>\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n<app-popover #UserWithFeatureFlagPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of selectedData | slice : 1\">\n <div class=\"avatar-card\">\n <span class=\"value\"\n [appTooltip]=\"data[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n ><i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i\n >{{ data[displayElementKey] }}</span\n >\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of selectedGroups | slice : 1\">\n <div class=\"avatar-card\">\n <span class=\"value\"\n [appTooltip]=\"data['group_name']\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n ><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\">&#xe90d;</i\n >{{ data[\"group_name\"] }}</span\n >\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .userGroup-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}::ng-deep .userGroup-floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .userGroup-floating-bar-container .left.user-group-left{width:60%}::ng-deep .userGroup-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .userGroup-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .userGroup-floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .userGroup-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .userGroup-floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .userGroup-floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .userGroup-floating-bar-container .left .counter{border-radius:20px;background:#34aa44;border:none;color:#fff;font-size:9px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;margin:0 0 0 8px;padding:0 4px;justify-content:center;line-height:16px;min-width:24px}::ng-deep .userGroup-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .userGroup-floating-bar-container .left .name{margin-right:4px;color:#707070;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .userGroup-floating-bar-container .left .user-group-chip{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem;display:inline-flex;align-items:center;padding:0 8px;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross{color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross:hover{background:#f1f1f1}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .user-group-name{color:#161b2f;font-size:11px;display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem}::ng-deep .userGroup-floating-bar-container .left .userGroup-text{margin-right:4px}::ng-deep .userGroup-floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .userGroup-floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .userGroup-floating-bar-container .center cs-select{width:100%}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .userGroup-floating-bar-container .right{display:flex;align-items:center}::ng-deep .userGroup-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .userGroup-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .userGroup-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .userGroup-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .userGroup-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .userGroup-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .userGroup-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}.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 button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.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;min-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{background:#fff;width:100%;height: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{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:4px}.wf-action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.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 i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8;margin-top:8px}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.wf-action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.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)}}.vx-overlay{position:fixed;z-index:1;inset:0}.vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}\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: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: DataTypePipe, name: "dataType" }] }); }
3165
3165
  }
3166
3166
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarComponent, decorators: [{
3167
3167
  type: Component,
3168
- args: [{ selector: 'app-floating-bar', template: "<div class=\"userGroup-floating-bar\">\n <div class=\"userGroup-floating-bar-container\">\n <div class=\"left user-group-left\">\n <ng-container *ngIf=\"selectedData.length > 0 && !groupsEnabled\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n >\n <ng-container\n *ngFor=\"let element of selectedData?.slice(0, 1); let i = index\"\n >\n <ng-container *ngIf=\"element && !isResponsibility\">\n <i\n *ngIf=\"\n !nonRemovableUsersList.includes(element[elementId]) &&\n removePosition != 'right'\n \"\n (click)=\"deleteSelected(element)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"step\"\n *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n >{{\n selectedData.length <= 2 &&\n i == selectedData.length - 1 &&\n selectedData.length > 1\n ? \"Final\"\n : i + 1\n }}</span\n >\n <span\n *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"element[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ element[displayElementKey] }}</span\n >\n <span\n *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n class=\"chipName vx-fs-11 vx-label-txt\"\n >{{\n element[displayElementKey]\n | slice : element[displayElementKey].length - 1\n }}</span\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-ml-1\"\n *ngIf=\"\n !nonRemovableUsersList.includes(element[elementId]) &&\n removePosition == 'right'\n \"\n (click)=\"deleteSelected(element)\"\n >&#xe9ae;</i\n >\n </ng-container>\n </ng-container>\n <button\n *ngIf=\"selectedData?.length > 1 || (isResponsibility && selectedData?.length > 0)\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n [class.greenBg]=\"false\"\n appPopover\n (click)=\"userPopover.popover()\"\n placement=\"left\"\n >\n {{ isResponsibility ? selectedData?.length : selectedData?.slice(1)?.length }}\n </button>\n </div>\n\n <div class=\"name\" *ngIf=\"selectedData?.length > 1 || (isResponsibility && selectedData?.length > 0)\">\n <span *ngIf=\"(!isResponsibility && selectedData?.slice(1).length === 1) || (isResponsibility && selectedData?.length === 1)\">{{\n singularText\n }}</span>\n <span *ngIf=\"(!isResponsibility && selectedData?.slice(1).length > 1) || (isResponsibility && selectedData?.length > 1)\">{{\n pluralText\n }}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"groupsEnabled\">\n <div class=\"user-group-chip\" *ngIf=\"selectedData?.length\">\n <i (click)=\"deleteSelected(selectedData[0])\" class=\"icons cross\"\n >&#xe9ae;</i\n >\n <div\n class=\"user-group-name\"\n appTooltip=\"{{ selectedData[0][displayElementKey] }}\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ selectedData[0][displayElementKey] }}\n </div>\n <div\n class=\"counter\"\n *ngIf=\"selectedData?.length > 1\"\n appPopover\n (click)=\"UserWithFeatureFlagPopover.popover()\"\n placement=\"left\"\n >\n +{{ selectedData?.length - 1 }}\n </div>\n </div>\n <div\n class=\"name userGroup-name\"\n *ngIf=\"selectedData?.length > 0 && groupsEnabled\"\n >\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length === 1\">\n {{\n selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"\"\n }}</span\n >\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length > 1\"\n >Users\n {{\n selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"selected\"\n }}</span\n >\n </div>\n <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n <i\n class=\"icons cross\"\n (click)=\"deleteSelectedGroup(selectedGroups[0])\"\n >&#xe9ae;</i\n >\n <div\n class=\"user-group-name\"\n appTooltip=\"{{ selectedGroups[0]?.group_name }}\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ selectedGroups[0]?.group_name }}\n </div>\n <div\n class=\"counter group\"\n *ngIf=\"selectedGroups.length > 1\"\n appPopover\n (click)=\"groupPopover.popover()\"\n placement=\"left\"\n >\n +{{ selectedGroups.length - 1 }}\n </div>\n </div>\n <div class=\"name userGroup-name\" *ngIf=\"selectedGroups.length > 0\">\n {{ selectedGroups?.length > 1 ? \" User Groups selected \" : \"\" }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"showFrequencyText\">\n <div class=\"name vx-ml-0\">\n <span\n >You have selected\n <span class=\"vx-fw-500 vx-label-txt\">{{ currentFrequency }}</span>\n frequency.</span\n >\n </div>\n </ng-container>\n <ng-content></ng-content>\n </div>\n <div\n class=\"center\"\n *ngIf=\"\n (showWorkflow && mode === 'CREATE') ||\n (showWorkflow && workflowList.includes('ROUND-ROBIN'))\n \"\n >\n <label>\n {{ workflowText }}\n <span\n class=\"icon\"\n *ngIf=\"workflowText == 'Approval Workflow'\"\n libPopoverHover\n (mouseover)=\"dataTooltip.popover()\"\n (mouseleave)=\"dataTooltip.closePopover()\"\n placement=\"right\"\n ><i class=\"icons\">&#xe91f;</i></span\n >\n </label>\n <popover-hover #dataTooltip>\n <div class=\"vx-info-card\">\n <div class=\"vx-info-card-body\">\n You can select from the following three options:<br />\n <strong>Sequential:</strong> The policy would be sent for approval\n one at a time in the sequence defined by you.<br />\n <strong>Round-robin:</strong> The policy will be sent for approval\n to all approvers at the same time. However, it is mandatory for all\n approvers to take action.<br />\n <strong>Any One:</strong> The policy will be sent for approval to\n all approvers at the same time. If anyone of the approver approves\n the policy, it will be considered as approved.\n </div>\n </div>\n </popover-hover>\n <cs-select\n [(ngModel)]=\"selectedWorkflow\"\n (ngModelChange)=\"selectedWorkflowChange($event)\"\n [placeholder]=\"'Approval WorkFlow *'\"\n [setMaxWidth]=\"true\"\n >\n <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\n {{ data }}\n </cs-option>\n </cs-select>\n </div>\n <div class=\"right\">\n <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\n <button\n *ngIf=\"showNextButton\"\n [disabled]=\"isDisabled\"\n (click)=\"next()\"\n appRipple\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n </div>\n </div>\n</div>\n<app-popover #userPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let element of selectedData?.slice(1); let i = index\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n >\n <i\n class=\"icons\"\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n (click)=\"deleteSelected(element)\"\n >&#xe90d;</i\n >\n <span\n class=\"step\"\n *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n >\n {{ i == selectedData.slice(1).length - 1 ? \"Final\" : i + 2 }}\n </span>\n {{ element[displayElementKey] }}\n </span>\n\n <span\n class=\"value\"\n *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n >\n <i\n class=\"icons\"\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n (click)=\"deleteSelected(element)\"\n >&#xe90d;</i\n >\n {{ element[displayElementKey] }}\n </span>\n <div\n *ngIf=\"\n defaultSelected?.category_id &&\n defaultSelected?.category_id === element?.category_id\n \"\n class=\"primary-label\"\n >\n PRIMARY\n </div>\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n<app-popover #UserWithFeatureFlagPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of selectedData | slice : 1\">\n <div class=\"avatar-card\">\n <span class=\"value\"\n ><i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i\n >{{ data[displayElementKey] }}</span\n >\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of selectedGroups | slice : 1\">\n <div class=\"avatar-card\">\n <span class=\"value\"\n ><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\">&#xe90d;</i\n >{{ data[\"group_name\"] }}</span\n >\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .userGroup-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}::ng-deep .userGroup-floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .userGroup-floating-bar-container .left.user-group-left{width:60%}::ng-deep .userGroup-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .userGroup-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .userGroup-floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .userGroup-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .userGroup-floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .userGroup-floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .userGroup-floating-bar-container .left .counter{border-radius:20px;background:#34aa44;border:none;color:#fff;font-size:9px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;margin:0 0 0 8px;padding:0 4px;justify-content:center;line-height:16px;min-width:24px}::ng-deep .userGroup-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .userGroup-floating-bar-container .left .name{margin-right:4px;color:#707070;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .userGroup-floating-bar-container .left .user-group-chip{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem;display:inline-flex;align-items:center;padding:0 8px;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross{color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross:hover{background:#f1f1f1}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .user-group-name{color:#161b2f;font-size:11px;display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem}::ng-deep .userGroup-floating-bar-container .left .userGroup-text{margin-right:4px}::ng-deep .userGroup-floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .userGroup-floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .userGroup-floating-bar-container .center cs-select{width:100%}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .userGroup-floating-bar-container .right{display:flex;align-items:center}::ng-deep .userGroup-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .userGroup-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .userGroup-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .userGroup-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .userGroup-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .userGroup-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .userGroup-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}.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 button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.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;min-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{background:#fff;width:100%;height: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{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:4px}.wf-action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.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 i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8;margin-top:8px}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.wf-action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.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)}}.vx-overlay{position:fixed;z-index:1;inset:0}.vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}\n"] }]
3168
+ args: [{ selector: 'app-floating-bar', template: "<div class=\"userGroup-floating-bar\">\n <div class=\"userGroup-floating-bar-container\">\n <div class=\"left user-group-left\">\n <ng-container *ngIf=\"selectedData.length > 0 && !groupsEnabled\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n >\n <ng-container\n *ngFor=\"let element of selectedData?.slice(0, 1); let i = index\"\n >\n <ng-container *ngIf=\"element && !isResponsibility\">\n <i\n *ngIf=\"\n !nonRemovableUsersList.includes(element[elementId]) &&\n removePosition != 'right'\n \"\n (click)=\"deleteSelected(element)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"step\"\n *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n >{{\n selectedData.length <= 2 &&\n i == selectedData.length - 1 &&\n selectedData.length > 1\n ? \"Final\"\n : i + 1\n }}</span\n >\n <span\n *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"element[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ element[displayElementKey] }}</span\n >\n <span\n *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"element[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n element[displayElementKey]\n | slice : element[displayElementKey].length - 1\n }}</span\n >\n <i\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-ml-1\"\n *ngIf=\"\n !nonRemovableUsersList.includes(element[elementId]) &&\n removePosition == 'right'\n \"\n (click)=\"deleteSelected(element)\"\n >&#xe9ae;</i\n >\n </ng-container>\n </ng-container>\n <button\n *ngIf=\"selectedData?.length > 1 || (isResponsibility && selectedData?.length > 0)\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n [class.greenBg]=\"false\"\n appPopover\n (click)=\"userPopover.popover()\"\n placement=\"left\"\n >\n {{ isResponsibility ? selectedData?.length : selectedData?.slice(1)?.length }}\n </button>\n </div>\n\n <div class=\"name\" *ngIf=\"selectedData?.length > 0\">\n <span *ngIf=\"selectedData?.length === 1\">{{\n singularText\n }}</span>\n <span *ngIf=\"selectedData?.length > 1\">{{\n pluralText\n }}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"groupsEnabled\">\n <div class=\"user-group-chip\" *ngIf=\"selectedData?.length\">\n <i (click)=\"deleteSelected(selectedData[0])\" class=\"icons cross\"\n >&#xe9ae;</i\n >\n <div\n class=\"user-group-name\"\n appTooltip=\"{{ selectedData[0][displayElementKey] }}\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ selectedData[0][displayElementKey] }}\n </div>\n <div\n class=\"counter\"\n *ngIf=\"selectedData?.length > 1\"\n appPopover\n (click)=\"UserWithFeatureFlagPopover.popover()\"\n placement=\"left\"\n >\n +{{ selectedData?.length - 1 }}\n </div>\n </div>\n <div\n class=\"name userGroup-name\"\n *ngIf=\"selectedData?.length > 0 && groupsEnabled\"\n >\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length === 1\">\n {{\n selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"\"\n }}</span\n >\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length > 1\"\n >Users\n {{\n selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"selected\"\n }}</span\n >\n </div>\n <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n <i\n class=\"icons cross\"\n (click)=\"deleteSelectedGroup(selectedGroups[0])\"\n >&#xe9ae;</i\n >\n <div\n class=\"user-group-name\"\n appTooltip=\"{{ selectedGroups[0]?.group_name }}\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ selectedGroups[0]?.group_name }}\n </div>\n <div\n class=\"counter group\"\n *ngIf=\"selectedGroups.length > 1\"\n appPopover\n (click)=\"groupPopover.popover()\"\n placement=\"left\"\n >\n +{{ selectedGroups.length - 1 }}\n </div>\n </div>\n <div class=\"name userGroup-name\" *ngIf=\"selectedGroups.length > 0\">\n {{ selectedGroups?.length > 1 ? \" User Groups selected \" : \"\" }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"showFrequencyText\">\n <div class=\"name vx-ml-0\">\n <span\n >You have selected\n <span class=\"vx-fw-500 vx-label-txt\">{{ currentFrequency }}</span>\n frequency.</span\n >\n </div>\n </ng-container>\n <ng-content></ng-content>\n </div>\n <div\n class=\"center\"\n *ngIf=\"\n (showWorkflow && mode === 'CREATE') ||\n (showWorkflow && workflowList.includes('ROUND-ROBIN'))\n \"\n >\n <label>\n {{ workflowText }}\n <span\n class=\"icon\"\n *ngIf=\"workflowText == 'Approval Workflow'\"\n libPopoverHover\n (mouseover)=\"dataTooltip.popover()\"\n (mouseleave)=\"dataTooltip.closePopover()\"\n placement=\"right\"\n ><i class=\"icons\">&#xe91f;</i></span\n >\n </label>\n <popover-hover #dataTooltip>\n <div class=\"vx-info-card\">\n <div class=\"vx-info-card-body\">\n You can select from the following three options:<br />\n <strong>Sequential:</strong> The policy would be sent for approval\n one at a time in the sequence defined by you.<br />\n <strong>Round-robin:</strong> The policy will be sent for approval\n to all approvers at the same time. However, it is mandatory for all\n approvers to take action.<br />\n <strong>Any One:</strong> The policy will be sent for approval to\n all approvers at the same time. If anyone of the approver approves\n the policy, it will be considered as approved.\n </div>\n </div>\n </popover-hover>\n <cs-select\n [(ngModel)]=\"selectedWorkflow\"\n (ngModelChange)=\"selectedWorkflowChange($event)\"\n [placeholder]=\"'Approval WorkFlow *'\"\n [setMaxWidth]=\"true\"\n >\n <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\n {{ data }}\n </cs-option>\n </cs-select>\n </div>\n <div class=\"right\">\n <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\n <button\n *ngIf=\"showNextButton\"\n [disabled]=\"isDisabled\"\n (click)=\"next()\"\n appRipple\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n </div>\n </div>\n</div>\n<app-popover #userPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let element of selectedData?.slice(1); let i = index\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n [appTooltip]=\" element[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons\"\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n (click)=\"deleteSelected(element)\"\n >&#xe90d;</i\n >\n <span\n class=\"step\"\n *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n >\n {{ i == selectedData.slice(1).length - 1 ? \"Final\" : i + 2 }}\n </span>\n {{ element[displayElementKey] }}\n </span>\n\n <span\n class=\"value\"\n *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n [appTooltip]=\" element[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n \n >\n <i\n class=\"icons\"\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n (click)=\"deleteSelected(element)\"\n >&#xe90d;</i\n >\n {{ element[displayElementKey] }}\n </span>\n <div\n *ngIf=\"\n defaultSelected?.category_id &&\n defaultSelected?.category_id === element?.category_id\n \"\n class=\"primary-label\"\n >\n PRIMARY\n </div>\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n<app-popover #UserWithFeatureFlagPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of selectedData | slice : 1\">\n <div class=\"avatar-card\">\n <span class=\"value\"\n [appTooltip]=\"data[displayElementKey]\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n ><i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i\n >{{ data[displayElementKey] }}</span\n >\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of selectedGroups | slice : 1\">\n <div class=\"avatar-card\">\n <span class=\"value\"\n [appTooltip]=\"data['group_name']\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n ><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\">&#xe90d;</i\n >{{ data[\"group_name\"] }}</span\n >\n </div>\n </li>\n </ul>\n </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .userGroup-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}::ng-deep .userGroup-floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .userGroup-floating-bar-container .left.user-group-left{width:60%}::ng-deep .userGroup-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .userGroup-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .userGroup-floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .userGroup-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .userGroup-floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .userGroup-floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .userGroup-floating-bar-container .left .counter{border-radius:20px;background:#34aa44;border:none;color:#fff;font-size:9px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;margin:0 0 0 8px;padding:0 4px;justify-content:center;line-height:16px;min-width:24px}::ng-deep .userGroup-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .userGroup-floating-bar-container .left .name{margin-right:4px;color:#707070;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .userGroup-floating-bar-container .left .user-group-chip{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem;display:inline-flex;align-items:center;padding:0 8px;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross{color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross:hover{background:#f1f1f1}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .user-group-name{color:#161b2f;font-size:11px;display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem}::ng-deep .userGroup-floating-bar-container .left .userGroup-text{margin-right:4px}::ng-deep .userGroup-floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .userGroup-floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .userGroup-floating-bar-container .center cs-select{width:100%}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .userGroup-floating-bar-container .right{display:flex;align-items:center}::ng-deep .userGroup-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .userGroup-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .userGroup-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .userGroup-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .userGroup-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .userGroup-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .userGroup-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}.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 button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.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;min-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{background:#fff;width:100%;height: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{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:4px}.wf-action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.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 i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8;margin-top:8px}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.wf-action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.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)}}.vx-overlay{position:fixed;z-index:1;inset:0}.vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}\n"] }]
3169
3169
  }], ctorParameters: function () { return []; }, propDecorators: { selectedData: [{
3170
3170
  type: Input
3171
3171
  }], selectedGroups: [{
@@ -3504,16 +3504,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3504
3504
  }]
3505
3505
  }] });
3506
3506
 
3507
+ class TooltipModule {
3508
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3509
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, declarations: [ToolTipDirective], imports: [CommonModule], exports: [ToolTipDirective] }); }
3510
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, imports: [CommonModule] }); }
3511
+ }
3512
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, decorators: [{
3513
+ type: NgModule,
3514
+ args: [{
3515
+ declarations: [ToolTipDirective],
3516
+ imports: [CommonModule],
3517
+ exports: [ToolTipDirective],
3518
+ }]
3519
+ }] });
3520
+
3507
3521
  class FloatingBarModule {
3508
3522
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3509
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarModule, declarations: [FloatingBarComponent], imports: [CommonModule, PopoverModule, PipesModule], exports: [FloatingBarComponent] }); }
3510
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarModule, imports: [CommonModule, PopoverModule, PipesModule] }); }
3523
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarModule, declarations: [FloatingBarComponent], imports: [CommonModule, PipesModule, PopoverModule, TooltipModule], exports: [FloatingBarComponent] }); }
3524
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarModule, imports: [CommonModule, PipesModule, PopoverModule, TooltipModule] }); }
3511
3525
  }
3512
3526
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarModule, decorators: [{
3513
3527
  type: NgModule,
3514
3528
  args: [{
3515
3529
  declarations: [FloatingBarComponent],
3516
- imports: [CommonModule, PopoverModule, PipesModule],
3530
+ imports: [CommonModule, PipesModule, PopoverModule, TooltipModule],
3517
3531
  exports: [FloatingBarComponent],
3518
3532
  }]
3519
3533
  }] });
@@ -4054,20 +4068,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
4054
4068
  args: ['optionList']
4055
4069
  }] } });
4056
4070
 
4057
- class TooltipModule {
4058
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
4059
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, declarations: [ToolTipDirective], imports: [CommonModule], exports: [ToolTipDirective] }); }
4060
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, imports: [CommonModule] }); }
4061
- }
4062
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, decorators: [{
4063
- type: NgModule,
4064
- args: [{
4065
- declarations: [ToolTipDirective],
4066
- imports: [CommonModule],
4067
- exports: [ToolTipDirective],
4068
- }]
4069
- }] });
4070
-
4071
4071
  class SearchMultiSelectPipe {
4072
4072
  transform(value, key, searchKey) {
4073
4073
  if (searchKey && searchKey.length > 0) {
@@ -5390,6 +5390,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5390
5390
  }]
5391
5391
  }] });
5392
5392
 
5393
+ let GetUserDetailsPipe$1 = class GetUserDetailsPipe {
5394
+ transform(ids, list) {
5395
+ const userDetails = list
5396
+ .filter((item) => ids?.includes(item?.id))
5397
+ .map((item) => {
5398
+ return {
5399
+ name: item?.name,
5400
+ email: item?.email,
5401
+ short_name: item?.name,
5402
+ avatar: item?.imagePath || ''
5403
+ };
5404
+ });
5405
+ return userDetails;
5406
+ }
5407
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetUserDetailsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
5408
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GetUserDetailsPipe, name: "getUserDetails" }); }
5409
+ };
5410
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetUserDetailsPipe$1, decorators: [{
5411
+ type: Pipe,
5412
+ args: [{
5413
+ name: 'getUserDetails',
5414
+ }]
5415
+ }] });
5416
+
5393
5417
  class IsAttributesValidPipe {
5394
5418
  transform(attribute) {
5395
5419
  let isValid = true;
@@ -5458,39 +5482,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5458
5482
  }]
5459
5483
  }] });
5460
5484
 
5461
- let GetUserDetailsPipe$1 = class GetUserDetailsPipe {
5462
- transform(ids, list) {
5463
- const userDetails = list
5464
- .filter((item) => ids?.includes(item?.id))
5465
- .map((item) => {
5466
- return {
5467
- name: item?.name,
5468
- email: item?.email,
5469
- short_name: item?.name?.split(' ').map((n) => n[0]).join(''),
5470
- avatar: item?.imagePath || ''
5471
- };
5472
- });
5473
- return userDetails;
5485
+ class GetUserShortNamePipe {
5486
+ transform(fullName) {
5487
+ if (!fullName || typeof fullName !== 'string' || !fullName.trim() || fullName === "undefined") {
5488
+ return '--';
5489
+ }
5490
+ // Remove special characters except letters, numbers, and spaces
5491
+ const sanitizedInput = fullName.trim().replace(/[^a-zA-Z0-9 ]/g, '');
5492
+ // Split the name into individual words and filter out any empty strings
5493
+ const nameParts = sanitizedInput.split(' ').filter(part => part.length > 0);
5494
+ if (nameParts.length === 0)
5495
+ return '--';
5496
+ if (nameParts.length > 1) {
5497
+ const firstInitial = nameParts[0].charAt(0);
5498
+ const lastInitial = nameParts[nameParts.length - 1].charAt(0);
5499
+ return (firstInitial + lastInitial).toUpperCase();
5500
+ }
5501
+ else {
5502
+ const singleWord = nameParts[0];
5503
+ return (singleWord.length >= 2 ? singleWord.substring(0, 2) : singleWord.charAt(0)).toUpperCase();
5504
+ }
5474
5505
  }
5475
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetUserDetailsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
5476
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GetUserDetailsPipe, name: "getUserDetails" }); }
5477
- };
5478
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetUserDetailsPipe$1, decorators: [{
5506
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetUserShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
5507
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GetUserShortNamePipe, name: "userShortName" }); }
5508
+ }
5509
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GetUserShortNamePipe, decorators: [{
5479
5510
  type: Pipe,
5480
5511
  args: [{
5481
- name: 'getUserDetails',
5512
+ name: 'userShortName',
5482
5513
  }]
5483
5514
  }] });
5484
5515
 
5485
5516
  class WorkflowPipesModule {
5486
5517
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
5487
5518
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: WorkflowPipesModule, declarations: [GetSelectedValuePipe,
5519
+ GetUserDetailsPipe$1,
5520
+ GetUserShortNamePipe,
5488
5521
  IsAttributesValidPipe,
5489
- UniqueResponsibilitiesPipe,
5490
- GetUserDetailsPipe$1], imports: [CommonModule], exports: [GetSelectedValuePipe,
5522
+ UniqueResponsibilitiesPipe], imports: [CommonModule], exports: [GetSelectedValuePipe,
5523
+ GetUserDetailsPipe$1,
5524
+ GetUserShortNamePipe,
5491
5525
  IsAttributesValidPipe,
5492
- UniqueResponsibilitiesPipe,
5493
- GetUserDetailsPipe$1] }); }
5526
+ UniqueResponsibilitiesPipe] }); }
5494
5527
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowPipesModule, imports: [CommonModule] }); }
5495
5528
  }
5496
5529
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowPipesModule, decorators: [{
@@ -5498,16 +5531,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5498
5531
  args: [{
5499
5532
  declarations: [
5500
5533
  GetSelectedValuePipe,
5534
+ GetUserDetailsPipe$1,
5535
+ GetUserShortNamePipe,
5501
5536
  IsAttributesValidPipe,
5502
5537
  UniqueResponsibilitiesPipe,
5503
- GetUserDetailsPipe$1
5504
5538
  ],
5505
5539
  imports: [CommonModule],
5506
5540
  exports: [
5507
5541
  GetSelectedValuePipe,
5542
+ GetUserDetailsPipe$1,
5543
+ GetUserShortNamePipe,
5508
5544
  IsAttributesValidPipe,
5509
5545
  UniqueResponsibilitiesPipe,
5510
- GetUserDetailsPipe$1
5511
5546
  ],
5512
5547
  }]
5513
5548
  }] });
@@ -5636,7 +5671,7 @@ class GrcResponsibilityListingComponent {
5636
5671
  responsibility: filteredResponsibility,
5637
5672
  category: [
5638
5673
  ...(new Set(filteredResponsibility
5639
- .map((obj) => [obj?.subCategoryId] || [])
5674
+ .map((obj) => [obj?.subCategoryId])
5640
5675
  ?.flat()) || []),
5641
5676
  ],
5642
5677
  };
@@ -5658,7 +5693,7 @@ class GrcResponsibilityListingComponent {
5658
5693
  return [...Array.from(idSet)].filter((item) => Array.isArray(item) ? item.length > 0 : true);
5659
5694
  }
5660
5695
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GrcResponsibilityListingComponent, deps: [{ token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
5661
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GrcResponsibilityListingComponent, isStandalone: true, selector: "app-grc-responsibility-listing", inputs: { tableCard: "tableCard", activeProgram: "activeProgram", headerText: "headerText", currentPage: "currentPage", perPageLimit: "perPageLimit", totalListData: "totalListData", totalPages: "totalPages", selectedListData: "selectedListData", selectedListDataIds: "selectedListDataIds", MODE: "MODE", allSelectedResponsibilityIds: "allSelectedResponsibilityIds", getResponsibilityList: ["responsibilityData", "getResponsibilityList"], getSelectedProgramAndResp: ["selectedProgramAndResp", "getSelectedProgramAndResp"] }, outputs: { getUpdatedDataList: "getUpdatedDataList", changeSelectedProgramAndResp: "changeSelectedProgramAndResp" }, ngImport: i0, template: "<div class=\"grc-responsibility-listing\">\n <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\" (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\" (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n </div>\n <div class=\"grc-responsibility-listing-inner\">\n <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n <div class=\"grc-responsibility-table-row\" *ngFor=\"let list of dataList?.data; let i = index\" [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}</div>\n <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\" (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n </div>\n <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <div class=\"vx-avatar-group vx-mr-1\">\n <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.shortName}}</span>\n <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\" src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.shortName}}</span>\n <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\" src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\" appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n </div>\n <app-popover #multiUser>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n <div class=\"avatar-card\">\n <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_short_name}}</div>\n <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n <div class=\"name-inner\">\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"id vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">{{list?.controlId}}</div>\n <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.name}}</div>\n </div>\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:</div>\n <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">Within</div>\n <div class=\"within-value vx-fs-11 vx-paragraph-txt\" ><span *ngFor=\"let parent of list?.withinData; let last = last\" [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{parent?.name}} \n <span *ngIf=\"!last\"> <\n </span>\n </span></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\" [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\" (selectedPage)=\"changePage($event)\"></app-pagination>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 19rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 19rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "ngmodule", type: FormgroupModule }, { kind: "component", type: CsCheckboxComponentUI, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsCheckboxIndeterminateComponentUI, selector: "app-cs-checkbox-indeterminate", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "ngmodule", type: WorkflowPipesModule }] }); }
5696
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GrcResponsibilityListingComponent, isStandalone: true, selector: "app-grc-responsibility-listing", inputs: { tableCard: "tableCard", activeProgram: "activeProgram", headerText: "headerText", currentPage: "currentPage", perPageLimit: "perPageLimit", totalListData: "totalListData", totalPages: "totalPages", selectedListData: "selectedListData", selectedListDataIds: "selectedListDataIds", MODE: "MODE", allSelectedResponsibilityIds: "allSelectedResponsibilityIds", getResponsibilityList: ["responsibilityData", "getResponsibilityList"], getSelectedProgramAndResp: ["selectedProgramAndResp", "getSelectedProgramAndResp"] }, outputs: { getUpdatedDataList: "getUpdatedDataList", changeSelectedProgramAndResp: "changeSelectedProgramAndResp" }, ngImport: i0, template: "<div class=\"grc-responsibility-listing\">\n <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\" (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\" (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n </div>\n <div class=\"grc-responsibility-listing-inner\">\n <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n <div class=\"grc-responsibility-table-row\" *ngFor=\"let list of dataList?.data; let i = index\" [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}</div>\n <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\" (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n </div>\n <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <div class=\"vx-avatar-group vx-mr-1\">\n <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.shortName | userShortName }}</span>\n <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\" src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.shortName | userShortName }}</span>\n <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\" src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\" appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n </div>\n <app-popover #multiUser>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n <div class=\"avatar-card\">\n <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_short_name | userShortName }}</div>\n <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n <div class=\"name-inner\">\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"id vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">{{list?.controlId}}</div>\n <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.name}}</div>\n </div>\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:</div>\n <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">Within</div>\n <div class=\"within-value vx-fs-11 vx-paragraph-txt\" ><span *ngFor=\"let parent of list?.withinData; let last = last\" [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{parent?.name}} \n <span *ngIf=\"!last\"> <\n </span>\n </span></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\" [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\" (selectedPage)=\"changePage($event)\"></app-pagination>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 19rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 19rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "ngmodule", type: FormgroupModule }, { kind: "component", type: CsCheckboxComponentUI, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "component", type: CsCheckboxIndeterminateComponentUI, selector: "app-cs-checkbox-indeterminate", inputs: ["disabled", "ngValue", "value"], outputs: ["ngValueChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "ngmodule", type: FloatingBarModule }, { kind: "ngmodule", type: PaginationModule$1 }, { kind: "component", type: PaginationComponentUI, selector: "app-pagination", inputs: ["activeAlphabet", "pageCount", "start", "end", "total", "currentPage"], outputs: ["selectedPage", "selectedAlphabet"] }, { kind: "ngmodule", type: WorkflowPipesModule }, { kind: "pipe", type: GetUserShortNamePipe, name: "userShortName" }] }); }
5662
5697
  }
5663
5698
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GrcResponsibilityListingComponent, decorators: [{
5664
5699
  type: Component,
@@ -5682,7 +5717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
5682
5717
  'selectedListDataIds',
5683
5718
  'MODE',
5684
5719
  'allSelectedResponsibilityIds',
5685
- ], template: "<div class=\"grc-responsibility-listing\">\n <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\" (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\" (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n </div>\n <div class=\"grc-responsibility-listing-inner\">\n <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n <div class=\"grc-responsibility-table-row\" *ngFor=\"let list of dataList?.data; let i = index\" [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}</div>\n <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\" (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n </div>\n <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <div class=\"vx-avatar-group vx-mr-1\">\n <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.shortName}}</span>\n <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\" src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.shortName}}</span>\n <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\" src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\" appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n </div>\n <app-popover #multiUser>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n <div class=\"avatar-card\">\n <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_short_name}}</div>\n <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n <div class=\"name-inner\">\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"id vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">{{list?.controlId}}</div>\n <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.name}}</div>\n </div>\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:</div>\n <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">Within</div>\n <div class=\"within-value vx-fs-11 vx-paragraph-txt\" ><span *ngFor=\"let parent of list?.withinData; let last = last\" [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{parent?.name}} \n <span *ngIf=\"!last\"> <\n </span>\n </span></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\" [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\" (selectedPage)=\"changePage($event)\"></app-pagination>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 19rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 19rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
5720
+ ], template: "<div class=\"grc-responsibility-listing\">\n <div class=\"top-heading vx-pl-2 vx-mb-2 vx-d-flex vx-align-center\">\n <app-cs-checkbox *ngIf=\"isAllSelected() || selectedListDataIds?.length === 0\" [ngValue]=\"isAllSelected()\" (ngValueChange)=\"selectAll($event)\"></app-cs-checkbox>\n <app-cs-checkbox-indeterminate *ngIf=\"!isAllSelected() && selectedListDataIds?.length\" [ngValue]=\"true\" (ngValueChange)=\"selectAll(false)\"></app-cs-checkbox-indeterminate>\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-2 vx-lh-4\">{{headerText}}</div>\n </div>\n <div class=\"grc-responsibility-listing-inner\">\n <div class=\"grc-responsibility-table-body\" [class.with-pagination]=\"dataList?.total_pages > 1\">\n <div class=\"grc-responsibility-table-row\" *ngFor=\"let list of dataList?.data; let i = index\" [class.active]=\"allSelectedResponsibilityIds?.includes(list?._id)\">\n <div class=\"grc-responsibility-table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\n <div class=\"sr-no\" [appTooltip]=\"(perPageLimit * (currentPage - 1)) + i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{(perPageLimit * (currentPage - 1)) + i + 1}}</div>\n <app-cs-checkbox [ngValue]=\"allSelectedResponsibilityIds?.includes(list?._id)\" (ngValueChange)=\"getSelectedData(list,$event)\"></app-cs-checkbox>\n </div>\n <div class=\"grc-responsibility-table-column vx-pr-1 vx-d-flex vx-align-center responsibility-name\">\n <div class=\"vx-avatar-group vx-mr-1\">\n <div class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedBy?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedBy?.profilePic === ''\" class=\"blue\">{{list.entrustedBy?.shortName | userShortName }}</span>\n <img *ngIf=\"list?.entrustedBy?.profilePic !== ''\" src=\"{{profilePic + list?.entrustedBy?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length === 0\" class=\"vx-avatar md\" [appTooltip]=\"list?.entrustedTo?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\n <span *ngIf=\"list?.entrustedTo?.profilePic === ''\" class=\"blue\">{{list?.entrustedTo?.shortName | userShortName }}</span>\n <img *ngIf=\"list?.entrustedTo?.profilePic !== ''\" src=\"{{profilePic + list?.entrustedTo?.profilePic}}\" alt=\"\">\n </div>\n <div *ngIf=\"list?.entrustedTo?.EntrustedToMembers?.length\" class=\"vx-avatar md counter\" appPopover (click)=\"multiUser.popover()\" placement=\"left\">\n <span class=\"green\">+{{list?.entrustedTo?.EntrustedToMembers?.length}}</span>\n </div>\n <app-popover #multiUser>\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let user of list?.entrustedTo?.EntrustedToMembers\">\n <div class=\"avatar-card\">\n <div *ngIf=\"user?.profile_pic === ''\" class=\"avatar\">{{user?.member_short_name | userShortName }}</div>\n <div *ngIf=\"user?.profile_pic !== ''\" class=\"avatar\"><img src=\"{{profilePic + user?.profile_pic}}\" alt=\"\"></div>\n <span class=\"value\" [appTooltip]=\"user.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{user?.member_name}}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <!-- <i class=\"icons star vx-fs-10 vx-mr-1\" [class.active]=\"true\">&#xea70;</i> -->\n <div class=\"name-inner\">\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"id vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">{{list?.controlId}}</div>\n <div class=\"name vx-fs-13 vx-label-txt\" [appTooltip]=\"list?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{list?.name}}</div>\n </div>\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"list?.withinData?.length\">\n <div class=\"vx-fs-10 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">RESPONSIBILITY CENTER:</div>\n <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n <div class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\">Within</div>\n <div class=\"within-value vx-fs-11 vx-paragraph-txt\" ><span *ngFor=\"let parent of list?.withinData; let last = last\" [appTooltip]=\"parent?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{parent?.name}} \n <span *ngIf=\"!last\"> <\n </span>\n </span></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <app-pagination *ngIf=\"dataList?.total_pages > 1\" [start]=\"dataList?.items_from\" [end]=\"dataList?.items_to\" [total]=\"dataList?.total_items\" [pageCount]=\"dataList?.total_pages\" [currentPage]=\"currentPage\" (selectedPage)=\"changePage($event)\"></app-pagination>\n </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/avatars/avatars.css\";::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .grc-responsibility-listing .top-heading{border-left:1px solid transparent}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate{width:1rem;height:1rem;position:relative}::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox .checkbox-item,::ng-deep .grc-responsibility-listing .top-heading app-cs-checkbox-indeterminate .checkbox-item{position:absolute;top:0;left:0;width:1rem;height:1rem}::ng-deep .grc-responsibility-listing-inner{border-radius:.25rem;border:1px solid #f1f1f1;height:calc(100vh - 19rem);overflow:hidden}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body{overflow:hidden;overflow-y:auto;height:calc(100vh - 19rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row{border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;position:relative}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row:hover .grc-responsibility-table-column.serial app-cs-checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row.active .grc-responsibility-table-column.serial app-cs-checkbox{opacity:1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column{min-height:3.25rem;position:relative;width:100%}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial .sr-no{width:1rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:3.25rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:1.125rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item{position:absolute!important}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star{color:#f1f1f1}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .star.active{color:#f4c84a}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner{width:calc(100% - 5rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 6rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body .grc-responsibility-table-row .grc-responsibility-table-column.responsibility-name .name-inner .within-part{width:calc(100% - 8rem)}::ng-deep .grc-responsibility-listing-inner .grc-responsibility-table-body.with-pagination{height:calc(100vh - 21.5rem)}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds{background:#fff;border-radius:0;box-shadow:0 -10px 20px #1e5dd31a;padding:.5rem;justify-content:unset}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right{order:1}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .right .goto-page{display:none!important}::ng-deep .grc-responsibility-listing-inner app-pagination .wk-pagination-sec-ds .left{order:2;font-size:11px!important;color:#747576!important;text-transform:capitalize!important;margin-left:.75rem}.cursor-pointer{cursor:pointer}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
5686
5721
  }], ctorParameters: function () { return [{ type: Configurations, decorators: [{
5687
5722
  type: Optional
5688
5723
  }] }]; }, propDecorators: { getResponsibilityList: [{
@@ -14143,17 +14178,15 @@ class LinkResponsibilityListComponent {
14143
14178
  reportName: item?.reportName,
14144
14179
  };
14145
14180
  }
14146
- else {
14147
- // Add assigneeId if not already present
14148
- if (!result[responsibilityId]?.assigneeIds?.includes(assigneeId)) {
14149
- result[responsibilityId]?.assigneeIds?.push(assigneeId);
14150
- }
14151
- // Add responsibilityCenter if not already present
14152
- if (!result[responsibilityId]?.responsibilityCenters?.includes(responsibilityCenter)) {
14153
- result[responsibilityId]?.responsibilityCenters?.push(responsibilityCenter);
14154
- }
14155
- this.getBridgeIds(result);
14181
+ // Add assigneeId if not already present
14182
+ if (!result[responsibilityId]?.assigneeIds?.includes(assigneeId)) {
14183
+ result[responsibilityId]?.assigneeIds?.push(assigneeId);
14184
+ }
14185
+ // Add responsibilityCenter if not already present
14186
+ if (!result[responsibilityId]?.responsibilityCenters?.includes(responsibilityCenter)) {
14187
+ result[responsibilityId]?.responsibilityCenters?.push(responsibilityCenter);
14156
14188
  }
14189
+ this.getBridgeIds(result);
14157
14190
  }
14158
14191
  getBridgeIds(result) {
14159
14192
  for (const key in result) {
@@ -15191,24 +15224,28 @@ class WorkflowCaseComponent {
15191
15224
  if (this.openedFrom === 'COMPLIANCE_WORKROOM') {
15192
15225
  this.payload.source = this.source;
15193
15226
  const { rid, uid, rcid } = this.responsibilityData || {};
15194
- const transformed = {};
15227
+ const allRespIds = [];
15228
+ const transformed = [];
15195
15229
  for (const item of payload?.responsibilities_Linked || []) {
15196
15230
  const { responsibilityId, assigneeBridgeId, responsibilityCenterBridgeId } = item;
15197
15231
  if (responsibilityId != null) {
15198
- transformed[responsibilityId] = {
15199
- assignees: assigneeBridgeId,
15200
- responsibilityCenters: responsibilityCenterBridgeId,
15201
- };
15232
+ allRespIds.push(responsibilityId);
15233
+ transformed.push({
15234
+ rid: responsibilityId,
15235
+ uid: assigneeBridgeId,
15236
+ rcid: responsibilityCenterBridgeId,
15237
+ });
15202
15238
  }
15203
15239
  }
15204
15240
  // Add current responsibility
15205
15241
  if (rid != null) {
15206
15242
  transformed[rid] = {
15207
- assigneeIds: [uid],
15208
- responsibilityCenters: [rcid],
15243
+ assigneeId: [uid],
15244
+ rcid: [rcid],
15209
15245
  };
15210
15246
  }
15211
- payload.responsibilities_Linked = transformed;
15247
+ payload.responsibilities_Linked = allRespIds;
15248
+ payload.linked_responsibilities_details = transformed;
15212
15249
  }
15213
15250
  }
15214
15251
  filterAssessment(payload) {