vcomply-workflow-engine 6.5.3 → 6.5.5

package/fesm2022/vcomply-workflow-engine.mjs

@@ -3808,6 +3808,17 @@ class FloatingBarComponent {
         this.selectedGroups = [];
     }
     ngOnChanges() { }
+    getDisplayValue(element) {
+        return element?.[this.displayElementKey];
+    }
+    // Method to check if value is array
+    isArray(value) {
+        return Array.isArray(value);
+    }
+    // Method to log what's actually being rendered in the template
+    logRenderedValue(value) {
+        return value;
+    }
     ngOnInit() { }
     next() {
         let selectedData;
@@ -3835,11 +3846,11 @@ class FloatingBarComponent {
         this.workflowTypeChanged.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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              <ng-container\n                *ngIf=\"\n                  element[displayElementKey]\n                    | slice\n                      : element[displayElementKey].length - 1 as lastItem\n                \"\n              >\n                <span\n                  class=\"chipName vx-fs-11 vx-label-txt\"\n                  [appTooltip]=\"lastItem\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ lastItem }}\n                </span>\n              </ng-container>\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>{{\n            selectedData?.length === 1 ? singularText : 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"], outputs: ["closePopoverEvent"] }, { 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" }] }); }
+    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]=\"getDisplayValue(element)\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n                >{{ logRenderedValue(element[displayElementKey]) }}</span\n              >\n              <!-- Only render slice pipe for arrays, not strings -->\n              <ng-container\n                *ngIf=\"\n                  isArray(element[displayElementKey]) &&\n                  element[displayElementKey] &&\n                  element[displayElementKey].length > 0\n                \"\n              >\n                <ng-container\n                  *ngIf=\"\n                    element[displayElementKey]\n                      | slice\n                        : element[displayElementKey].length - 1 as lastItem\n                  \"\n                >\n                  <span\n                    class=\"chipName vx-fs-11 vx-label-txt\"\n                    [appTooltip]=\"logRenderedValue(lastItem)\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ logRenderedValue(lastItem) }}\n                  </span>\n                </ng-container>\n              </ng-container>\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>{{\n            selectedData?.length === 1 ? singularText : 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"], outputs: ["closePopoverEvent"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingBarComponent, decorators: [{
             type: Component,
-            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              <ng-container\n                *ngIf=\"\n                  element[displayElementKey]\n                    | slice\n                      : element[displayElementKey].length - 1 as lastItem\n                \"\n              >\n                <span\n                  class=\"chipName vx-fs-11 vx-label-txt\"\n                  [appTooltip]=\"lastItem\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ lastItem }}\n                </span>\n              </ng-container>\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>{{\n            selectedData?.length === 1 ? singularText : 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"] }]
+            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]=\"getDisplayValue(element)\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n                >{{ logRenderedValue(element[displayElementKey]) }}</span\n              >\n              <!-- Only render slice pipe for arrays, not strings -->\n              <ng-container\n                *ngIf=\"\n                  isArray(element[displayElementKey]) &&\n                  element[displayElementKey] &&\n                  element[displayElementKey].length > 0\n                \"\n              >\n                <ng-container\n                  *ngIf=\"\n                    element[displayElementKey]\n                      | slice\n                        : element[displayElementKey].length - 1 as lastItem\n                  \"\n                >\n                  <span\n                    class=\"chipName vx-fs-11 vx-label-txt\"\n                    [appTooltip]=\"logRenderedValue(lastItem)\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ logRenderedValue(lastItem) }}\n                  </span>\n                </ng-container>\n              </ng-container>\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>{{\n            selectedData?.length === 1 ? singularText : 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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { selectedData: [{
                 type: Input
             }], selectedGroups: [{
@@ -4024,7 +4035,9 @@ class ResponsibilityCentersListComponent {
             }
             else {
                 const index = this.selectedIds.findIndex((element) => element == rc);
-                this.selectedIds.splice(index, 1);
+                if (index !== -1) {
+                    this.selectedIds.splice(index, 1);
+                }
             }
             this.setList();
         }
@@ -4052,7 +4065,9 @@ class ResponsibilityCentersListComponent {
         const rcList = cloneDeep(this.responsibilityCentersList);
         const selectedIds = cloneDeep(this.selectedIds);
         rcList.forEach((element) => {
-            if (selectedIds.includes(element[this.rcIdKey])) {
+            const elementId = element[this.rcIdKey];
+            const isSelected = selectedIds.includes(elementId);
+            if (isSelected) {
                 data.push(element);
             }
         });
@@ -32060,18 +32075,40 @@ class WorkflowComplianceComponent {
                 // Normalise RC list structure so UI components can rely on item_id / item_name
                 this.responsibilityCentersList = Array.isArray(res)
                     ? res.map((item) => {
+                        // Determine item_name - prioritize existing item_name, then rc_name
+                        let itemName = item?.item_name;
+                        if (!itemName || itemName === '') {
+                            if (Array.isArray(item?.rc_name) && item.rc_name.length > 0) {
+                                // Filter out empty strings and join array elements with ' / ' separator
+                                const filteredRcName = item.rc_name.filter((name) => name && name.trim() !== '');
+                                itemName = filteredRcName.join(' / ');
+                            }
+                            else if (item?.rc_name && typeof item.rc_name === 'string') {
+                                // Use rc_name as string
+                                itemName = item.rc_name;
+                            }
+                            else if (Array.isArray(item?.item_name) && item.item_name.length > 0) {
+                                // Fallback: if item_name is an array, filter and join it
+                                const filteredItemName = item.item_name.filter((name) => name && name.trim() !== '');
+                                itemName = filteredItemName.join(' / ');
+                            }
+                        }
+                        // Clean up the name - remove any extra spaces, trim, and ensure it's a string
+                        if (itemName) {
+                            if (typeof itemName === 'string') {
+                                itemName = itemName.trim();
+                            }
+                            else {
+                                // Convert to string if it's not already
+                                itemName = String(itemName).trim();
+                            }
+                        }
                         const normalised = {
                             ...item,
                             // item_id is what the RC selector & floating bar expect
                             item_id: item?.item_id ?? item?.rc_id ?? item?.rcid ?? null,
-                            // item_name is what floating bar displays
-                            item_name: item?.item_name ??
-                                (Array.isArray(item?.rc_name)
-                                    ? item.rc_name.join(' / ')
-                                    : item?.rc_name ??
-                                        (Array.isArray(item?.item_name)
-                                            ? item.item_name.join(' / ')
-                                            : item?.item_name)),
+                            // item_name is what floating bar displays - ensure it's properly set
+                            item_name: itemName || item?.item_name || (Array.isArray(item?.rc_name) ? item.rc_name.join(' / ') : item?.rc_name) || '',
                         };
                         return normalised;
                     })
@@ -33714,7 +33751,7 @@ class WorkflowComplianceComponent {
         if (this.responsibilityForm.assignors.enable &&
             this.responsibilityForm.assignors.list?.length === 0) {
             this.invalidType = 'whom';
-            return;
+            return false;
         }
         if (!this.responsibilityForm.responsibility.name ||
             this.responsibilityForm.responsibility.name.trim() == '') {
@@ -33733,6 +33770,7 @@ class WorkflowComplianceComponent {
             this.responsibilityForm.frequency === '' ||
             this.responsibilityForm.frequency === '5~0~0~0') {
             this.invalidType = 'when';
+            return false;
         }
         else {
             this.invalidType = '';
@@ -33764,7 +33802,7 @@ class WorkflowComplianceComponent {
                 if (rc) {
                     const rcDetailsArr = {
                         parent_rc_ids: rc.parent_rc_ids,
-                        rc_id: rc.rcid,
+                        rc_id: rc.rcid || rc.rc_id || rc.item_id,
                         child_rc_ids: rc?.item_child_ids,
                     };
                     return rcDetailsArr;
@@ -33774,7 +33812,8 @@ class WorkflowComplianceComponent {
         const rcDetailsIdArr = entrustForm.rc?.length > 0
             ? entrustForm.rc.map((rc) => {
                 if (rc) {
-                    return rc.rcid;
+                    const rcId = rc.rcid || rc.rc_id || rc.item_id;
+                    return rcId;
                 }
             })
             : [];
@@ -34055,7 +34094,13 @@ class WorkflowComplianceComponent {
                 }
                 //this.reset();
             }, (err) => {
-                console.error(err);
+                console.error('[WorkflowCompliance] entrustResponsibility - Error response:', {
+                    error: err,
+                    errorMessage: err?.message,
+                    errorStatus: err?.status,
+                    errorBody: err?.error,
+                    payload: responsibilityPayload
+                });
                 this.loader = false;
                 this.entrustLoader = false;
                 this.uiKitService.isLoader = false;
@@ -35179,6 +35224,9 @@ class WorkflowComplianceComponent {
      * "getOtherGRCTabCount" function. It is of type "any", which means it can accept any data type.
      */
     getOtherGRCTabCount(event) {
+        if (!event) {
+            event = {};
+        }
         event['rc_ids'] = this.getAllRCIds(this.responsibilityForm.rc);
         this.grcTabLoader = true;
         this.grcService.getGRCTabsCount(event).subscribe((data) => {
@@ -35205,15 +35253,34 @@ class WorkflowComplianceComponent {
         });
     }
     getAllRCIds(rcIds) {
-        const allIds = rcIds.flatMap((rc) => [
-            ...rc.item_parent_ids.map(Number),
-            ...rc.item_child_ids.map(Number),
-            Number(rc.rc_id),
-        ]);
-        return this.responsibilityCentersList
-            .filter((rc) => allIds.includes(rc?.rc_id))
-            .map((ele) => ele._id)
+        if (!rcIds || !Array.isArray(rcIds) || rcIds.length === 0) {
+            return '';
+        }
+        const allIds = rcIds.flatMap((rc) => {
+            if (!rc) {
+                return [];
+            }
+            const parentIds = (rc.item_parent_ids && Array.isArray(rc.item_parent_ids))
+                ? rc.item_parent_ids.map(Number)
+                : [];
+            const childIds = (rc.item_child_ids && Array.isArray(rc.item_child_ids))
+                ? rc.item_child_ids.map(Number)
+                : [];
+            const rcId = Number(rc.rc_id || rc.rcid || rc.item_id || 0);
+            return [
+                ...parentIds,
+                ...childIds,
+                rcId
+            ];
+        });
+        const result = this.responsibilityCentersList
+            .filter((rc) => {
+            const rcIdToMatch = rc?.rc_id || rc?.rcid || rc?.item_id;
+            return allIds.includes(Number(rcIdToMatch));
+        })
+            .map((ele) => ele._id || ele.rcid || ele.item_id)
             .join(',');
+        return result;
     }
     setOtherGRCTypesFormate() {
         const grcTypes = GRC_TYPE_ARRAY;