import { Component, EventEmitter, Input, Output, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../../formgroup/cs-radio/cs-radio.component";
import * as i3 from "../../../ui-kit/tooltip/tooltip.directive";
import * as i4 from "../../../ui-kit/popover/popover.component";
import * as i5 from "../../../ui-kit/popover/popover.directive";
import * as i6 from "../../../workflow-program/create-program-ui/floating-bar/floating-bar.component";
import * as i7 from "../../../ui-kit/directive/stop-propagation.directive";
export class ApprovalWorkflowListComponent {
    constructor() {
        this.hideDetails = false;
        this.openIndexId = -1;
        this.isNextDisabled = true;
        this.createApprovalClicked = new EventEmitter();
        this.listCancelClicked = new EventEmitter();
        this.selectedWorkflowNext = new EventEmitter();
        this.onApprovalEdit = new EventEmitter();
    }
    ngOnInit() {
        this.selectedWorkflow = this.editApprovalWorkflow;
        if (this.editApprovalWorkflow) {
            this.isNextDisabled = false;
        }
    }
    ngOnChanges() {
        this.selectedWorkflow = this.editApprovalWorkflow;
    }
    showDetails(id) {
        this.openIndexId === id ? (this.openIndexId = -1) : (this.openIndexId = id);
        this.hideDetails = !this.hideDetails;
    }
    createApprovalClick(event) {
        this.createApprovalClicked.emit(event);
    }
    selectApproval(approval) {
        this.selectedWorkflow = approval;
        this.isNextDisabled = false;
    }
    cancelClicked() {
        this.listCancelClicked.emit(true);
    }
    nextClicked() {
        this.selectedWorkflow = this.approverWorkFlowList.find((workflow) => workflow?._id === this.selectedWorkflow?._id);
        this.selectedWorkflowNext.emit(this.selectedWorkflow);
    }
    onEdit(approverWorkflow) {
        this.onApprovalEdit.emit(JSON.parse(JSON.stringify(approverWorkflow)));
    }
    removeWorkflow() {
        this.selectedWorkflow = null;
        this.isNextDisabled = true;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalWorkflowListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApprovalWorkflowListComponent, selector: "app-approval-workflow-list", inputs: { approverWorkFlowList: "approverWorkFlowList", editApprovalWorkflow: "editApprovalWorkflow" }, outputs: { createApprovalClicked: "createApprovalClicked", listCancelClicked: "listCancelClicked", selectedWorkflowNext: "selectedWorkflowNext", onApprovalEdit: "onApprovalEdit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"approval-workflow-list-dialog\">\n  <div\n    class=\"approval-workflow-list-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Approval Workflow</div>\n  </div>\n  <div class=\"approval-workflow-list-dialog-body\">\n    <div *ngIf=\"true\" class=\"approval-workflow-list-dialog-body-inner\">\n      <div class=\"approval-table\">\n        <div class=\"approval-table-head\">\n          <div class=\"approval-table-row\">\n            <div\n              class=\"approval-table-column vx-fs-11 vx-fw-500 vx-tt-uppercase serial\"\n            >\n              #\n            </div>\n            <div\n              class=\"approval-table-column vx-fs-11 vx-fw-500 vx-tt-uppercase workflow\"\n            >\n              APPROVAL WORKFLOWS\n            </div>\n            <button\n              (click)=\"createApprovalClick(true)\"\n              class=\"create-approval-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\n            >\n              + CREATE A NEW APPROVAL WORKFLOW\n            </button>\n          </div>\n        </div>\n        <div class=\"approval-table-body\">\n          <ng-container\n            *ngFor=\"let approvalWorkflow of approverWorkFlowList; let i = index\"\n          >\n            <div\n              (click)=\"showDetails(approvalWorkflow?._id)\"\n              class=\"approval-table-row clickable\"\n              [class.active]=\"selectedWorkflow?._id === approvalWorkflow?._id\"\n              [class.open]=\"approvalWorkflow?._id === openIndexId\"\n            >\n              <div class=\"approval-table-column serial\">\n                <div\n                  class=\"sr-no\"\n                  [appTooltip]=\"i + 1\"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ i + 1 }}\n                </div>\n                <app-cs-radio\n                  [checked]=\"selectedWorkflow?._id === approvalWorkflow?._id\"\n                  (checkedEvent)=\"selectApproval(approvalWorkflow)\"\n                ></app-cs-radio>\n              </div>\n              <div class=\"approval-table-column workflow\">\n                <div\n                  class=\"name vx-fs-12 vx-label-txt\"\n                  [appTooltip]=\"approvalWorkflow?.workflow_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ approvalWorkflow?.workflow_name }}\n                </div>\n              </div>\n              <div class=\"approval-table-column action\" appStopPropagation>\n                <button\n                  appPopover\n                  (click)=\"moreAction.popover()\"\n                  placement=\"right\"\n                  class=\"more-action vx-fs-16 vx-txt-blue vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n                  [class.disabled]=\"false\"\n                >\n                  <i class=\"icons\">&#xe911;</i>\n                </button>\n                <app-popover #moreAction>\n                  <div class=\"wf-action-list\">\n                    <ul class=\"action-item\">\n                      <li>\n                        <button (click)=\"onEdit(approvalWorkflow)\">\n                          <i class=\"icons\">&#xe90c;</i> Edit\n                        </button>\n                      </li>\n                      <!-- <li>\n                        <button><i class=\"icons\">&#xe923;</i> Delete</button>\n                      </li> -->\n                    </ul>\n                  </div>\n                </app-popover>\n              </div>\n              <div class=\"approval-table-column action\">\n                <button\n                  class=\"arrow vx-fs-12 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n                  [class.disabled]=\"false\"\n                >\n                  <i *ngIf=\"approvalWorkflow?._id !== openIndexId\" class=\"icons\"\n                    >&#xe9e8;</i\n                  >\n                  <i *ngIf=\"approvalWorkflow?._id === openIndexId\" class=\"icons\"\n                    >&#xe9e7;</i\n                  >\n                </button>\n              </div>\n            </div>\n            <div\n              *ngIf=\"approvalWorkflow?._id === openIndexId\"\n              class=\"approval-table-details\"\n            >\n              <div class=\"details-item vx-mb-4\">\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\"\n                >\n                  POLICY CATEGORIES:\n                </div>\n                <div class=\"vx-d-flex\">\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-1\"\n                    *ngFor=\"\n                      let category of approvalWorkflow?.category_arr\n                        | slice : 0 : 3\n                    \"\n                  >\n                    <div\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [appTooltip]=\"category?.category_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      {{ category?.category_name }}\n                    </div>\n                  </div>\n                  <button\n                    *ngIf=\"approvalWorkflow?.category_arr?.length > 3\"\n                    appPopover\n                    (click)=\"criteriaAction.popover()\"\n                    placement=\"right\"\n                    class=\"details-chip-count vx-fs-11 vx-fw-500 vx-txt-blue vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n                  >\n                    + {{ approvalWorkflow?.category_arr?.length - 3 }}\n                  </button>\n                  <app-popover #criteriaAction>\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li\n                          *ngFor=\"\n                            let category of approvalWorkflow?.category_arr\n                              | slice : 3\n                          \"\n                        >\n                          <div class=\"avatar-card\">\n                            <span\n                              class=\"value\"\n                              [appTooltip]=\"category?.category_name\"\n                              placement=\"bottom-left\"\n                              delay=\"0\"\n                              type=\"black\"\n                              [tooltipMandatory]=\"false\"\n                              >{{ category?.category_name }}</span\n                            >\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </div>\n              </div>\n              <div class=\"details-item vx-mb-1\">\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\"\n                >\n                  APPROVERS:\n                </div>\n                <div\n                  *ngFor=\"\n                    let approverLevel of approvalWorkflow?.approval_workflow;\n                    let k = index\n                  \"\n                  class=\"approver-item vx-mb-2 vx-pb-2 vx-d-flex vx-align-center\"\n                >\n                  <div class=\"lavel-area vx-pl-1 vx-pr-1\">\n                    <div\n                      class=\"lavel-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\n                      [appTooltip]=\"\n                        approverLevel?.alias_name\n                          ? approverLevel?.alias_name\n                          : approverLevel?.level1\n                      \"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      {{\n                        approverLevel?.alias_name\n                          ? approverLevel?.alias_name\n                          : approverLevel?.level1\n                      }}\n                    </div>\n                    <div\n                      class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\n                    >\n                      {{\n                        (approverLevel?.type | lowercase) === \"roundrobin\"\n                          ? \"ROUND-ROBIN\"\n                          : (approverLevel?.type | lowercase) === \"anyone\"\n                          ? \"ANY ONE\"\n                          : approverLevel?.type\n                      }}\n                    </div>\n                  </div>\n                  <div class=\"lavel-chips vx-d-flex vx-flex-wrap\">\n                    <div\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-1\"\n                      *ngFor=\"\n                        let approver of approverLevel?.approvers\n                          | slice : 0 : 3;\n                        let approverIndex = index\n                      \"\n                    >\n                      <div\n                        *ngIf=\"\n                          approverLevel?.type?.toLowerCase() === 'sequential' &&\n                          approverLevel?.approvers?.length < 3\n                        \"\n                        class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                      >\n                        {{\n                          approverIndex == approverLevel?.approvers?.length - 1\n                            ? \"Final\"\n                            : approverIndex + 1\n                        }}\n                      </div>\n                      <div\n                        *ngIf=\"\n                          approverLevel?.approvers?.length > 3 &&\n                          approverLevel?.type?.toLowerCase() === 'sequential'\n                        \"\n                        class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                      >\n                        {{ approverIndex + 1 }}\n                      </div>\n                      <div\n                        class=\"chipName vx-fs-11 vx-label-txt\"\n                        [appTooltip]=\"approver?.member_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                      >\n                        {{ approver?.member_name }}\n                      </div>\n                    </div>\n                    <button\n                      *ngIf=\"approverLevel?.approvers?.length > 3\"\n                      appPopover\n                      (click)=\"approversAction.popover()\"\n                      placement=\"right\"\n                      class=\"details-chip-count vx-fs-11 vx-fw-500 vx-txt-blue vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n                    >\n                      + {{ approverLevel?.approvers?.length - 3 }}\n                    </button>\n                    <app-popover #approversAction>\n                      <div class=\"wf-action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let approver of approverLevel?.approvers\n                                | slice : 3;\n                              let approverIndex = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <div\n                                *ngIf=\"\n                                  approverLevel?.type?.toLowerCase() ===\n                                  'sequential'\n                                \"\n                                class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                              >\n                                {{\n                                  approverIndex + 3 ===\n                                  approverLevel?.approvers?.length - 1\n                                    ? \"Final\"\n                                    : approverIndex + 4\n                                }}\n                              </div>\n                              <span\n                                class=\"value\"\n                                [appTooltip]=\"approver?.member_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                                >{{ approver?.member_name }}</span\n                              >\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <vui-floating-bar\n      (closeList)=\"cancelClicked()\"\n      (closeEvent)=\"nextClicked()\"\n      [nextDisabled]=\"isNextDisabled\"\n    >\n      <ng-container *ngIf=\"selectedWorkflow\">\n        <div\n          class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n        >\n          <i\n            class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n            (click)=\"removeWorkflow()\"\n            >&#xe9ae;</i\n          >\n          <span class=\"chipName vx-fs-11 vx-label-txt\">\n            {{ selectedWorkflow?.workflow_name }}</span\n          >\n        </div>\n      </ng-container>\n    </vui-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .approval-workflow-list-dialog{position:fixed;inset:0 500px 0 0}::ng-deep .approval-workflow-list-dialog:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .approval-workflow-list-dialog-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .approval-workflow-list-dialog-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .approval-workflow-list-dialog-body-inner{height:calc(100vh - 10.75rem);overflow:hidden;overflow-y:auto;margin-bottom:1rem;padding-right:.5rem;width:calc(100% + .5rem)}::ng-deep .approval-workflow-list-dialog-body-inner::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .approval-workflow-list-dialog-body-inner::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .approval-workflow-list-dialog-body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-head{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-head .approval-table-row{border-radius:0;border:none;margin-bottom:0}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-head .approval-table-row .approval-table-column{color:#161b2f;height:1.5rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details{border:1px solid #f1f1f1;border-radius:0 0 .25rem .25rem;padding:1rem 2rem 0;margin-bottom:.25rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item button.details-chip-count{background:#fff;border-radius:.125rem;border:1px solid #f1f1f1;min-width:1.5rem;height:1.5rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item{border-bottom:1px solid #f1f1f1}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-area{width:4.75rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-area .lavel-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-chips{width:calc(100% - 4.75rem)}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row{border-radius:.25rem;border:1px solid #f1f1f1;display:flex;align-items:center;position:relative;margin-bottom:.25rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row.clickable{cursor:pointer}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row button.create-approval-btn{background:transparent;border-radius:0;border:none;position:absolute;top:.25rem;right:0}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row:hover .approval-table-column.serial app-cs-radio,::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row.active .approval-table-column.serial app-cs-radio{opacity:1}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row.open{border-radius:.25rem .25rem 0 0;border-bottom:none;margin-bottom:0}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column{color:#747576;height:40px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial.serial app-cs-radio{position:absolute;top:12px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.workflow{width:calc(100% - 96px);min-width:calc(100% - 96px)}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.workflow .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 3rem)}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action button.more-action,::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action button.arrow{background:transparent;border:none;border-radius:0;height:100%;width:100%}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .reviewer-floating-bar{padding:0!important}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .chipContainer .cross{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 .approval-workflow-list-dialog-body vui-floating-bar .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}\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.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i3.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i4.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: i6.VuiFloatingBarComponent, selector: "vui-floating-bar", inputs: ["selectedData", "groupSelected", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "nextDisabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "workflowTypeChanged"] }, { kind: "directive", type: i7.StopPropagationDirective, selector: "[appStopPropagation]" }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalWorkflowListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-approval-workflow-list', template: "<div class=\"approval-workflow-list-dialog\">\n  <div\n    class=\"approval-workflow-list-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n  >\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Approval Workflow</div>\n  </div>\n  <div class=\"approval-workflow-list-dialog-body\">\n    <div *ngIf=\"true\" class=\"approval-workflow-list-dialog-body-inner\">\n      <div class=\"approval-table\">\n        <div class=\"approval-table-head\">\n          <div class=\"approval-table-row\">\n            <div\n              class=\"approval-table-column vx-fs-11 vx-fw-500 vx-tt-uppercase serial\"\n            >\n              #\n            </div>\n            <div\n              class=\"approval-table-column vx-fs-11 vx-fw-500 vx-tt-uppercase workflow\"\n            >\n              APPROVAL WORKFLOWS\n            </div>\n            <button\n              (click)=\"createApprovalClick(true)\"\n              class=\"create-approval-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\n            >\n              + CREATE A NEW APPROVAL WORKFLOW\n            </button>\n          </div>\n        </div>\n        <div class=\"approval-table-body\">\n          <ng-container\n            *ngFor=\"let approvalWorkflow of approverWorkFlowList; let i = index\"\n          >\n            <div\n              (click)=\"showDetails(approvalWorkflow?._id)\"\n              class=\"approval-table-row clickable\"\n              [class.active]=\"selectedWorkflow?._id === approvalWorkflow?._id\"\n              [class.open]=\"approvalWorkflow?._id === openIndexId\"\n            >\n              <div class=\"approval-table-column serial\">\n                <div\n                  class=\"sr-no\"\n                  [appTooltip]=\"i + 1\"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ i + 1 }}\n                </div>\n                <app-cs-radio\n                  [checked]=\"selectedWorkflow?._id === approvalWorkflow?._id\"\n                  (checkedEvent)=\"selectApproval(approvalWorkflow)\"\n                ></app-cs-radio>\n              </div>\n              <div class=\"approval-table-column workflow\">\n                <div\n                  class=\"name vx-fs-12 vx-label-txt\"\n                  [appTooltip]=\"approvalWorkflow?.workflow_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                >\n                  {{ approvalWorkflow?.workflow_name }}\n                </div>\n              </div>\n              <div class=\"approval-table-column action\" appStopPropagation>\n                <button\n                  appPopover\n                  (click)=\"moreAction.popover()\"\n                  placement=\"right\"\n                  class=\"more-action vx-fs-16 vx-txt-blue vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n                  [class.disabled]=\"false\"\n                >\n                  <i class=\"icons\">&#xe911;</i>\n                </button>\n                <app-popover #moreAction>\n                  <div class=\"wf-action-list\">\n                    <ul class=\"action-item\">\n                      <li>\n                        <button (click)=\"onEdit(approvalWorkflow)\">\n                          <i class=\"icons\">&#xe90c;</i> Edit\n                        </button>\n                      </li>\n                      <!-- <li>\n                        <button><i class=\"icons\">&#xe923;</i> Delete</button>\n                      </li> -->\n                    </ul>\n                  </div>\n                </app-popover>\n              </div>\n              <div class=\"approval-table-column action\">\n                <button\n                  class=\"arrow vx-fs-12 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n                  [class.disabled]=\"false\"\n                >\n                  <i *ngIf=\"approvalWorkflow?._id !== openIndexId\" class=\"icons\"\n                    >&#xe9e8;</i\n                  >\n                  <i *ngIf=\"approvalWorkflow?._id === openIndexId\" class=\"icons\"\n                    >&#xe9e7;</i\n                  >\n                </button>\n              </div>\n            </div>\n            <div\n              *ngIf=\"approvalWorkflow?._id === openIndexId\"\n              class=\"approval-table-details\"\n            >\n              <div class=\"details-item vx-mb-4\">\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\"\n                >\n                  POLICY CATEGORIES:\n                </div>\n                <div class=\"vx-d-flex\">\n                  <div\n                    class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-1\"\n                    *ngFor=\"\n                      let category of approvalWorkflow?.category_arr\n                        | slice : 0 : 3\n                    \"\n                  >\n                    <div\n                      class=\"chipName vx-fs-11 vx-label-txt\"\n                      [appTooltip]=\"category?.category_name\"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      {{ category?.category_name }}\n                    </div>\n                  </div>\n                  <button\n                    *ngIf=\"approvalWorkflow?.category_arr?.length > 3\"\n                    appPopover\n                    (click)=\"criteriaAction.popover()\"\n                    placement=\"right\"\n                    class=\"details-chip-count vx-fs-11 vx-fw-500 vx-txt-blue vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n                  >\n                    + {{ approvalWorkflow?.category_arr?.length - 3 }}\n                  </button>\n                  <app-popover #criteriaAction>\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li\n                          *ngFor=\"\n                            let category of approvalWorkflow?.category_arr\n                              | slice : 3\n                          \"\n                        >\n                          <div class=\"avatar-card\">\n                            <span\n                              class=\"value\"\n                              [appTooltip]=\"category?.category_name\"\n                              placement=\"bottom-left\"\n                              delay=\"0\"\n                              type=\"black\"\n                              [tooltipMandatory]=\"false\"\n                              >{{ category?.category_name }}</span\n                            >\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </div>\n              </div>\n              <div class=\"details-item vx-mb-1\">\n                <div\n                  class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\"\n                >\n                  APPROVERS:\n                </div>\n                <div\n                  *ngFor=\"\n                    let approverLevel of approvalWorkflow?.approval_workflow;\n                    let k = index\n                  \"\n                  class=\"approver-item vx-mb-2 vx-pb-2 vx-d-flex vx-align-center\"\n                >\n                  <div class=\"lavel-area vx-pl-1 vx-pr-1\">\n                    <div\n                      class=\"lavel-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\n                      [appTooltip]=\"\n                        approverLevel?.alias_name\n                          ? approverLevel?.alias_name\n                          : approverLevel?.level1\n                      \"\n                      placement=\"bottom-left\"\n                      delay=\"0\"\n                      type=\"black\"\n                      [tooltipMandatory]=\"false\"\n                    >\n                      {{\n                        approverLevel?.alias_name\n                          ? approverLevel?.alias_name\n                          : approverLevel?.level1\n                      }}\n                    </div>\n                    <div\n                      class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\n                    >\n                      {{\n                        (approverLevel?.type | lowercase) === \"roundrobin\"\n                          ? \"ROUND-ROBIN\"\n                          : (approverLevel?.type | lowercase) === \"anyone\"\n                          ? \"ANY ONE\"\n                          : approverLevel?.type\n                      }}\n                    </div>\n                  </div>\n                  <div class=\"lavel-chips vx-d-flex vx-flex-wrap\">\n                    <div\n                      class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-1\"\n                      *ngFor=\"\n                        let approver of approverLevel?.approvers\n                          | slice : 0 : 3;\n                        let approverIndex = index\n                      \"\n                    >\n                      <div\n                        *ngIf=\"\n                          approverLevel?.type?.toLowerCase() === 'sequential' &&\n                          approverLevel?.approvers?.length < 3\n                        \"\n                        class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                      >\n                        {{\n                          approverIndex == approverLevel?.approvers?.length - 1\n                            ? \"Final\"\n                            : approverIndex + 1\n                        }}\n                      </div>\n                      <div\n                        *ngIf=\"\n                          approverLevel?.approvers?.length > 3 &&\n                          approverLevel?.type?.toLowerCase() === 'sequential'\n                        \"\n                        class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                      >\n                        {{ approverIndex + 1 }}\n                      </div>\n                      <div\n                        class=\"chipName vx-fs-11 vx-label-txt\"\n                        [appTooltip]=\"approver?.member_name\"\n                        placement=\"bottom-left\"\n                        delay=\"0\"\n                        type=\"black\"\n                        [tooltipMandatory]=\"false\"\n                      >\n                        {{ approver?.member_name }}\n                      </div>\n                    </div>\n                    <button\n                      *ngIf=\"approverLevel?.approvers?.length > 3\"\n                      appPopover\n                      (click)=\"approversAction.popover()\"\n                      placement=\"right\"\n                      class=\"details-chip-count vx-fs-11 vx-fw-500 vx-txt-blue vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n                    >\n                      + {{ approverLevel?.approvers?.length - 3 }}\n                    </button>\n                    <app-popover #approversAction>\n                      <div class=\"wf-action-list\">\n                        <ul class=\"action-item\">\n                          <li\n                            *ngFor=\"\n                              let approver of approverLevel?.approvers\n                                | slice : 3;\n                              let approverIndex = index\n                            \"\n                          >\n                            <div class=\"avatar-card\">\n                              <div\n                                *ngIf=\"\n                                  approverLevel?.type?.toLowerCase() ===\n                                  'sequential'\n                                \"\n                                class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n                              >\n                                {{\n                                  approverIndex + 3 ===\n                                  approverLevel?.approvers?.length - 1\n                                    ? \"Final\"\n                                    : approverIndex + 4\n                                }}\n                              </div>\n                              <span\n                                class=\"value\"\n                                [appTooltip]=\"approver?.member_name\"\n                                placement=\"bottom-left\"\n                                delay=\"0\"\n                                type=\"black\"\n                                [tooltipMandatory]=\"false\"\n                                >{{ approver?.member_name }}</span\n                              >\n                            </div>\n                          </li>\n                        </ul>\n                      </div>\n                    </app-popover>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <vui-floating-bar\n      (closeList)=\"cancelClicked()\"\n      (closeEvent)=\"nextClicked()\"\n      [nextDisabled]=\"isNextDisabled\"\n    >\n      <ng-container *ngIf=\"selectedWorkflow\">\n        <div\n          class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\n        >\n          <i\n            class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n            (click)=\"removeWorkflow()\"\n            >&#xe9ae;</i\n          >\n          <span class=\"chipName vx-fs-11 vx-label-txt\">\n            {{ selectedWorkflow?.workflow_name }}</span\n          >\n        </div>\n      </ng-container>\n    </vui-floating-bar>\n  </div>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .approval-workflow-list-dialog{position:fixed;inset:0 500px 0 0}::ng-deep .approval-workflow-list-dialog:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .approval-workflow-list-dialog-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .approval-workflow-list-dialog-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .approval-workflow-list-dialog-body-inner{height:calc(100vh - 10.75rem);overflow:hidden;overflow-y:auto;margin-bottom:1rem;padding-right:.5rem;width:calc(100% + .5rem)}::ng-deep .approval-workflow-list-dialog-body-inner::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .approval-workflow-list-dialog-body-inner::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .approval-workflow-list-dialog-body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-head{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-head .approval-table-row{border-radius:0;border:none;margin-bottom:0}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-head .approval-table-row .approval-table-column{color:#161b2f;height:1.5rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details{border:1px solid #f1f1f1;border-radius:0 0 .25rem .25rem;padding:1rem 2rem 0;margin-bottom:.25rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item button.details-chip-count{background:#fff;border-radius:.125rem;border:1px solid #f1f1f1;min-width:1.5rem;height:1.5rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item{border-bottom:1px solid #f1f1f1}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-area{width:4.75rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-area .lavel-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-chips{width:calc(100% - 4.75rem)}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row{border-radius:.25rem;border:1px solid #f1f1f1;display:flex;align-items:center;position:relative;margin-bottom:.25rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row.clickable{cursor:pointer}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row button.create-approval-btn{background:transparent;border-radius:0;border:none;position:absolute;top:.25rem;right:0}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row:hover .approval-table-column.serial app-cs-radio,::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row.active .approval-table-column.serial app-cs-radio{opacity:1}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row.open{border-radius:.25rem .25rem 0 0;border-bottom:none;margin-bottom:0}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column{color:#747576;height:40px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial.serial app-cs-radio{position:absolute;top:12px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.workflow{width:calc(100% - 96px);min-width:calc(100% - 96px)}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.workflow .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 3rem)}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action button.more-action,::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action button.arrow{background:transparent;border:none;border-radius:0;height:100%;width:100%}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .reviewer-floating-bar{padding:0!important}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .chipContainer .cross{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 .approval-workflow-list-dialog-body vui-floating-bar .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { approverWorkFlowList: [{
                type: Input
            }], editApprovalWorkflow: [{
                type: Input
            }], createApprovalClicked: [{
                type: Output
            }], listCancelClicked: [{
                type: Output
            }], selectedWorkflowNext: [{
                type: Output
            }], onApprovalEdit: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 