import { Component, Input, Output, EventEmitter, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../ui-kit/popover/popover.component";
import * as i3 from "../../ui-kit/popover/popover.directive";
import * as i4 from "../../pipes/data-type.pipe";
export class FloatingBarComponent {
    set defaultSelectedValue(value) {
        this.defaultSelected = value ? value : {};
    }
    constructor() {
        this.displayElementKey = '';
        this.elementId = '';
        this.singularText = '';
        this.pluralText = '';
        this.showNextButton = true;
        this.showFrequencyText = false;
        this.showWorkflow = false;
        this.workflowText = '';
        this.currentFrequency = '';
        this.isDisabled = false;
        this.workflowList = [
            'SEQUENTIAL',
            'ANY REVIEWER CAN MARK THIS AS REVIEWED',
        ];
        this.mode = 'CREATE';
        this.defaultSelected = {};
        this.nonRemovableUsersList = [];
        this.closeEvent = new EventEmitter();
        this.deleteEvent = new EventEmitter();
        this.closeList = new EventEmitter();
        this.deleteGroupEvent = new EventEmitter();
        this.workflowTypeChanged = new EventEmitter();
        this.selectedData = [];
        this.selectedGroups = [];
    }
    ngOnChanges() { }
    ngOnInit() { }
    next() {
        let selectedData;
        if (this.selectedGroups?.length > 0) {
            selectedData = { users: this.selectedData, groups: this.selectedGroups };
        }
        else {
            selectedData = this.selectedData;
        }
        this.closeEvent.emit(selectedData);
    }
    deleteSelected(index) {
        this.deleteEvent.emit(index);
    }
    deleteSelectedGroup(index) {
        this.deleteGroupEvent.emit(index);
    }
    close() {
        this.closeList.emit();
    }
    selectedWorkflowType(event) {
        // debugger
    }
    selectedWorkflowChange(event) {
        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", 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\">\n              <i\n                *ngIf=\"\n                  !nonRemovableUsersList.includes(element[elementId]) &&\n                  removePosition != 'right'\n                \"\n                (click)=\"deleteSelected(element)\"\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                >&#xe9ae;</i\n              >\n              <span\n                class=\"step\"\n                *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n                >{{\n                  selectedData.length <= 2 &&\n                  i == selectedData.length - 1 &&\n                  selectedData.length > 1\n                    ? \"Final\"\n                    : i + 1\n                }}</span\n              >\n              <span\n                *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n                class=\"chipName vx-fs-11 vx-label-txt\"\n                [appTooltip]=\"element[displayElementKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n                >{{ element[displayElementKey] }}</span\n              >\n              <span\n                *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n                class=\"chipName vx-fs-11 vx-label-txt\"\n                >{{\n                  element[displayElementKey]\n                    | slice : element[displayElementKey].length - 1\n                }}</span\n              >\n              <i\n                class=\"icons cross vx-fs-12 vx-paragraph-txt vx-ml-1\"\n                *ngIf=\"\n                  !nonRemovableUsersList.includes(element[elementId]) &&\n                  removePosition == 'right'\n                \"\n                (click)=\"deleteSelected(element)\"\n                >&#xe9ae;</i\n              >\n            </ng-container>\n          </ng-container>\n          <button\n            *ngIf=\"selectedData?.length > 1\"\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            +{{ selectedData?.slice(1)?.length }}\n          </button>\n        </div>\n\n        <div class=\"name\" *ngIf=\"selectedData?.length > 1\">\n          <span *ngIf=\"selectedData?.slice(1).length === 1\">{{\n            singularText\n          }}</span>\n          <span *ngIf=\"selectedData?.slice(1).length > 1\">{{\n            pluralText\n          }}</span>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"groupsEnabled\">\n        <div class=\"user-group-chip\" *ngIf=\"selectedData?.length\">\n          <i (click)=\"deleteSelected(selectedData[0])\" class=\"icons cross\"\n            >&#xe9ae;</i\n          >\n          <div\n            class=\"user-group-name\"\n            appTooltip=\"{{ selectedData[0][displayElementKey] }}\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"false\"\n          >\n            {{ selectedData[0][displayElementKey] }}\n          </div>\n          <div\n            class=\"counter\"\n            *ngIf=\"selectedData?.length > 1\"\n            appPopover\n            (click)=\"UserWithFeatureFlagPopover.popover()\"\n            placement=\"left\"\n          >\n            +{{ selectedData?.length - 1 }}\n          </div>\n        </div>\n        <div\n          class=\"name userGroup-name\"\n          *ngIf=\"selectedData?.length > 0 && groupsEnabled\"\n        >\n          <span class=\"userGroup-text\" *ngIf=\"selectedData?.length === 1\">\n            {{\n              selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"\"\n            }}</span\n          >\n          <span class=\"userGroup-text\" *ngIf=\"selectedData?.length > 1\"\n            >Users\n            {{\n              selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"selected\"\n            }}</span\n          >\n        </div>\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n          <i\n            class=\"icons cross\"\n            (click)=\"deleteSelectedGroup(selectedGroups[0])\"\n            >&#xe9ae;</i\n          >\n          <div\n            class=\"user-group-name\"\n            appTooltip=\"{{ selectedGroups[0]?.group_name }}\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"false\"\n          >\n            {{ selectedGroups[0]?.group_name }}\n          </div>\n          <div\n            class=\"counter group\"\n            *ngIf=\"selectedGroups.length > 1\"\n            appPopover\n            (click)=\"groupPopover.popover()\"\n            placement=\"left\"\n          >\n            +{{ selectedGroups.length - 1 }}\n          </div>\n        </div>\n        <div class=\"name userGroup-name\" *ngIf=\"selectedGroups.length > 0\">\n          {{ selectedGroups?.length > 1 ? \" User Groups selected \" : \"\" }}\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"showFrequencyText\">\n        <div class=\"name vx-ml-0\">\n          <span\n            >You have selected\n            <span class=\"vx-fw-500 vx-label-txt\">{{ currentFrequency }}</span>\n            frequency.</span\n          >\n        </div>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      class=\"center\"\n      *ngIf=\"\n        (showWorkflow && mode === 'CREATE') ||\n        (showWorkflow && workflowList.includes('ROUND-ROBIN'))\n      \"\n    >\n      <label>\n        {{ workflowText }}\n        <span\n          class=\"icon\"\n          *ngIf=\"workflowText == 'Approval Workflow'\"\n          libPopoverHover\n          (mouseover)=\"dataTooltip.popover()\"\n          (mouseleave)=\"dataTooltip.closePopover()\"\n          placement=\"right\"\n          ><i class=\"icons\">&#xe91f;</i></span\n        >\n      </label>\n      <popover-hover #dataTooltip>\n        <div class=\"vx-info-card\">\n          <div class=\"vx-info-card-body\">\n            You can select from the following three options:<br />\n            <strong>Sequential:</strong> The policy would be sent for approval\n            one at a time in the sequence defined by you.<br />\n            <strong>Round-robin:</strong> The policy will be sent for approval\n            to all approvers at the same time. However, it is mandatory for all\n            approvers to take action.<br />\n            <strong>Any One:</strong> The policy will be sent for approval to\n            all approvers at the same time. If anyone of the approver approves\n            the policy, it will be considered as approved.\n          </div>\n        </div>\n      </popover-hover>\n      <cs-select\n        [(ngModel)]=\"selectedWorkflow\"\n        (ngModelChange)=\"selectedWorkflowChange($event)\"\n        [placeholder]=\"'Approval WorkFlow *'\"\n        [setMaxWidth]=\"true\"\n      >\n        <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\n          {{ data }}\n        </cs-option>\n      </cs-select>\n    </div>\n    <div class=\"right\">\n      <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\n      <button\n        *ngIf=\"showNextButton\"\n        [disabled]=\"isDisabled\"\n        (click)=\"next()\"\n        appRipple\n      >\n        Next <i class=\"icons\">&#xe91e;</i>\n      </button>\n    </div>\n  </div>\n</div>\n<app-popover #userPopover [dontCloseonClick]=\"true\">\n  <div class=\"wf-action-list\">\n    <ul class=\"action-item\">\n      <li *ngFor=\"let element of selectedData?.slice(1); let i = index\">\n        <div class=\"avatar-card\">\n          <span\n            class=\"value\"\n            *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n          >\n            <i\n              class=\"icons\"\n              *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n              (click)=\"deleteSelected(element)\"\n              >&#xe90d;</i\n            >\n            <span\n              class=\"step\"\n              *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n            >\n              {{ i == selectedData.slice(1).length - 1 ? \"Final\" : i + 2 }}\n            </span>\n            {{ element[displayElementKey] }}\n          </span>\n\n          <span\n            class=\"value\"\n            *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n          >\n            <i\n              class=\"icons\"\n              *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n              (click)=\"deleteSelected(element)\"\n              >&#xe90d;</i\n            >\n            {{ element[displayElementKey] }}\n          </span>\n          <div\n            *ngIf=\"\n              defaultSelected?.category_id &&\n              defaultSelected?.category_id === element?.category_id\n            \"\n            class=\"primary-label\"\n          >\n            PRIMARY\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</app-popover>\n<app-popover #UserWithFeatureFlagPopover [dontCloseonClick]=\"true\">\n  <div class=\"wf-action-list\">\n    <ul class=\"action-item\">\n      <li *ngFor=\"let data of selectedData | slice : 1\">\n        <div class=\"avatar-card\">\n          <span class=\"value\"\n            ><i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i\n            >{{ data[displayElementKey] }}</span\n          >\n        </div>\n      </li>\n    </ul>\n  </div>\n</app-popover>\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\n  <div class=\"wf-action-list\">\n    <ul class=\"action-item\">\n      <li *ngFor=\"let data of selectedGroups | slice : 1\">\n        <div class=\"avatar-card\">\n          <span class=\"value\"\n            ><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\">&#xe90d;</i\n            >{{ data[\"group_name\"] }}</span\n          >\n        </div>\n      </li>\n    </ul>\n  </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .userGroup-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}::ng-deep .userGroup-floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .userGroup-floating-bar-container .left.user-group-left{width:60%}::ng-deep .userGroup-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .userGroup-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .userGroup-floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .userGroup-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .userGroup-floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .userGroup-floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .userGroup-floating-bar-container .left .counter{border-radius:20px;background:#34aa44;border:none;color:#fff;font-size:9px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;margin:0 0 0 8px;padding:0 4px;justify-content:center;line-height:16px;min-width:24px}::ng-deep .userGroup-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .userGroup-floating-bar-container .left .name{margin-right:4px;color:#707070;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .userGroup-floating-bar-container .left .user-group-chip{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem;display:inline-flex;align-items:center;padding:0 8px;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross{color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross:hover{background:#f1f1f1}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .user-group-name{color:#161b2f;font-size:11px;display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem}::ng-deep .userGroup-floating-bar-container .left .userGroup-text{margin-right:4px}::ng-deep .userGroup-floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .userGroup-floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .userGroup-floating-bar-container .center cs-select{width:100%}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .userGroup-floating-bar-container .right{display:flex;align-items:center}::ng-deep .userGroup-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .userGroup-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .userGroup-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .userGroup-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .userGroup-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .userGroup-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .userGroup-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:4px}.wf-action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8;margin-top:8px}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.wf-action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;inset:0}.vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i3.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.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\">\n              <i\n                *ngIf=\"\n                  !nonRemovableUsersList.includes(element[elementId]) &&\n                  removePosition != 'right'\n                \"\n                (click)=\"deleteSelected(element)\"\n                class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                >&#xe9ae;</i\n              >\n              <span\n                class=\"step\"\n                *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n                >{{\n                  selectedData.length <= 2 &&\n                  i == selectedData.length - 1 &&\n                  selectedData.length > 1\n                    ? \"Final\"\n                    : i + 1\n                }}</span\n              >\n              <span\n                *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n                class=\"chipName vx-fs-11 vx-label-txt\"\n                [appTooltip]=\"element[displayElementKey]\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n                >{{ element[displayElementKey] }}</span\n              >\n              <span\n                *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n                class=\"chipName vx-fs-11 vx-label-txt\"\n                >{{\n                  element[displayElementKey]\n                    | slice : element[displayElementKey].length - 1\n                }}</span\n              >\n              <i\n                class=\"icons cross vx-fs-12 vx-paragraph-txt vx-ml-1\"\n                *ngIf=\"\n                  !nonRemovableUsersList.includes(element[elementId]) &&\n                  removePosition == 'right'\n                \"\n                (click)=\"deleteSelected(element)\"\n                >&#xe9ae;</i\n              >\n            </ng-container>\n          </ng-container>\n          <button\n            *ngIf=\"selectedData?.length > 1\"\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            +{{ selectedData?.slice(1)?.length }}\n          </button>\n        </div>\n\n        <div class=\"name\" *ngIf=\"selectedData?.length > 1\">\n          <span *ngIf=\"selectedData?.slice(1).length === 1\">{{\n            singularText\n          }}</span>\n          <span *ngIf=\"selectedData?.slice(1).length > 1\">{{\n            pluralText\n          }}</span>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"groupsEnabled\">\n        <div class=\"user-group-chip\" *ngIf=\"selectedData?.length\">\n          <i (click)=\"deleteSelected(selectedData[0])\" class=\"icons cross\"\n            >&#xe9ae;</i\n          >\n          <div\n            class=\"user-group-name\"\n            appTooltip=\"{{ selectedData[0][displayElementKey] }}\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"false\"\n          >\n            {{ selectedData[0][displayElementKey] }}\n          </div>\n          <div\n            class=\"counter\"\n            *ngIf=\"selectedData?.length > 1\"\n            appPopover\n            (click)=\"UserWithFeatureFlagPopover.popover()\"\n            placement=\"left\"\n          >\n            +{{ selectedData?.length - 1 }}\n          </div>\n        </div>\n        <div\n          class=\"name userGroup-name\"\n          *ngIf=\"selectedData?.length > 0 && groupsEnabled\"\n        >\n          <span class=\"userGroup-text\" *ngIf=\"selectedData?.length === 1\">\n            {{\n              selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"\"\n            }}</span\n          >\n          <span class=\"userGroup-text\" *ngIf=\"selectedData?.length > 1\"\n            >Users\n            {{\n              selectedGroups && selectedGroups?.length > 0 ? \" & \" : \"selected\"\n            }}</span\n          >\n        </div>\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\n          <i\n            class=\"icons cross\"\n            (click)=\"deleteSelectedGroup(selectedGroups[0])\"\n            >&#xe9ae;</i\n          >\n          <div\n            class=\"user-group-name\"\n            appTooltip=\"{{ selectedGroups[0]?.group_name }}\"\n            placement=\"bottom-left\"\n            delay=\"0\"\n            type=\"black\"\n            [tooltipMandatory]=\"false\"\n          >\n            {{ selectedGroups[0]?.group_name }}\n          </div>\n          <div\n            class=\"counter group\"\n            *ngIf=\"selectedGroups.length > 1\"\n            appPopover\n            (click)=\"groupPopover.popover()\"\n            placement=\"left\"\n          >\n            +{{ selectedGroups.length - 1 }}\n          </div>\n        </div>\n        <div class=\"name userGroup-name\" *ngIf=\"selectedGroups.length > 0\">\n          {{ selectedGroups?.length > 1 ? \" User Groups selected \" : \"\" }}\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"showFrequencyText\">\n        <div class=\"name vx-ml-0\">\n          <span\n            >You have selected\n            <span class=\"vx-fw-500 vx-label-txt\">{{ currentFrequency }}</span>\n            frequency.</span\n          >\n        </div>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      class=\"center\"\n      *ngIf=\"\n        (showWorkflow && mode === 'CREATE') ||\n        (showWorkflow && workflowList.includes('ROUND-ROBIN'))\n      \"\n    >\n      <label>\n        {{ workflowText }}\n        <span\n          class=\"icon\"\n          *ngIf=\"workflowText == 'Approval Workflow'\"\n          libPopoverHover\n          (mouseover)=\"dataTooltip.popover()\"\n          (mouseleave)=\"dataTooltip.closePopover()\"\n          placement=\"right\"\n          ><i class=\"icons\">&#xe91f;</i></span\n        >\n      </label>\n      <popover-hover #dataTooltip>\n        <div class=\"vx-info-card\">\n          <div class=\"vx-info-card-body\">\n            You can select from the following three options:<br />\n            <strong>Sequential:</strong> The policy would be sent for approval\n            one at a time in the sequence defined by you.<br />\n            <strong>Round-robin:</strong> The policy will be sent for approval\n            to all approvers at the same time. However, it is mandatory for all\n            approvers to take action.<br />\n            <strong>Any One:</strong> The policy will be sent for approval to\n            all approvers at the same time. If anyone of the approver approves\n            the policy, it will be considered as approved.\n          </div>\n        </div>\n      </popover-hover>\n      <cs-select\n        [(ngModel)]=\"selectedWorkflow\"\n        (ngModelChange)=\"selectedWorkflowChange($event)\"\n        [placeholder]=\"'Approval WorkFlow *'\"\n        [setMaxWidth]=\"true\"\n      >\n        <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\n          {{ data }}\n        </cs-option>\n      </cs-select>\n    </div>\n    <div class=\"right\">\n      <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\n      <button\n        *ngIf=\"showNextButton\"\n        [disabled]=\"isDisabled\"\n        (click)=\"next()\"\n        appRipple\n      >\n        Next <i class=\"icons\">&#xe91e;</i>\n      </button>\n    </div>\n  </div>\n</div>\n<app-popover #userPopover [dontCloseonClick]=\"true\">\n  <div class=\"wf-action-list\">\n    <ul class=\"action-item\">\n      <li *ngFor=\"let element of selectedData?.slice(1); let i = index\">\n        <div class=\"avatar-card\">\n          <span\n            class=\"value\"\n            *ngIf=\"(element[displayElementKey] | dataType) !== 'object'\"\n          >\n            <i\n              class=\"icons\"\n              *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n              (click)=\"deleteSelected(element)\"\n              >&#xe90d;</i\n            >\n            <span\n              class=\"step\"\n              *ngIf=\"selectedWorkflow == 'SEQUENTIAL' && showWorkflow\"\n            >\n              {{ i == selectedData.slice(1).length - 1 ? \"Final\" : i + 2 }}\n            </span>\n            {{ element[displayElementKey] }}\n          </span>\n\n          <span\n            class=\"value\"\n            *ngIf=\"(element[displayElementKey] | dataType) === 'object'\"\n          >\n            <i\n              class=\"icons\"\n              *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\n              (click)=\"deleteSelected(element)\"\n              >&#xe90d;</i\n            >\n            {{ element[displayElementKey] }}\n          </span>\n          <div\n            *ngIf=\"\n              defaultSelected?.category_id &&\n              defaultSelected?.category_id === element?.category_id\n            \"\n            class=\"primary-label\"\n          >\n            PRIMARY\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</app-popover>\n<app-popover #UserWithFeatureFlagPopover [dontCloseonClick]=\"true\">\n  <div class=\"wf-action-list\">\n    <ul class=\"action-item\">\n      <li *ngFor=\"let data of selectedData | slice : 1\">\n        <div class=\"avatar-card\">\n          <span class=\"value\"\n            ><i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i\n            >{{ data[displayElementKey] }}</span\n          >\n        </div>\n      </li>\n    </ul>\n  </div>\n</app-popover>\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\n  <div class=\"wf-action-list\">\n    <ul class=\"action-item\">\n      <li *ngFor=\"let data of selectedGroups | slice : 1\">\n        <div class=\"avatar-card\">\n          <span class=\"value\"\n            ><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\">&#xe90d;</i\n            >{{ data[\"group_name\"] }}</span\n          >\n        </div>\n      </li>\n    </ul>\n  </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .userGroup-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}::ng-deep .userGroup-floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .userGroup-floating-bar-container .left.user-group-left{width:60%}::ng-deep .userGroup-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .userGroup-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .userGroup-floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .userGroup-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .userGroup-floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .userGroup-floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .userGroup-floating-bar-container .left .counter{border-radius:20px;background:#34aa44;border:none;color:#fff;font-size:9px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;margin:0 0 0 8px;padding:0 4px;justify-content:center;line-height:16px;min-width:24px}::ng-deep .userGroup-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .userGroup-floating-bar-container .left .name{margin-right:4px;color:#707070;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .userGroup-floating-bar-container .left .user-group-chip{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem;display:inline-flex;align-items:center;padding:0 8px;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross{color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross:hover{background:#f1f1f1}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .user-group-name{color:#161b2f;font-size:11px;display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem}::ng-deep .userGroup-floating-bar-container .left .userGroup-text{margin-right:4px}::ng-deep .userGroup-floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .userGroup-floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .userGroup-floating-bar-container .center cs-select{width:100%}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .userGroup-floating-bar-container .right{display:flex;align-items:center}::ng-deep .userGroup-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .userGroup-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .userGroup-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .userGroup-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .userGroup-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .userGroup-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .userGroup-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:4px}.wf-action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.wf-action-list ul.action-item li.multiple-program{background:#f8f8f8;margin-top:8px}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.wf-action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;inset:0}.vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { selectedData: [{
                type: Input
            }], selectedGroups: [{
                type: Input
            }], displayElementKey: [{
                type: Input
            }], elementId: [{
                type: Input
            }], singularText: [{
                type: Input
            }], pluralText: [{
                type: Input
            }], showNextButton: [{
                type: Input
            }], showFrequencyText: [{
                type: Input
            }], showWorkflow: [{
                type: Input
            }], workflowText: [{
                type: Input
            }], currentFrequency: [{
                type: Input
            }], isDisabled: [{
                type: Input
            }], workflowList: [{
                type: Input
            }], selectedWorkflow: [{
                type: Input
            }], workflowPlaceHolder: [{
                type: Input
            }], mode: [{
                type: Input
            }], defaultSelectedValue: [{
                type: Input,
                args: ['defaultSelected']
            }], groupsEnabled: [{
                type: Input
            }], nonRemovableUsersList: [{
                type: Input
            }], removePosition: [{
                type: Input
            }], closeEvent: [{
                type: Output
            }], deleteEvent: [{
                type: Output
            }], closeList: [{
                type: Output
            }], deleteGroupEvent: [{
                type: Output
            }], workflowTypeChanged: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 