import { Component, EventEmitter, Input, Output, } from '@angular/core';
import { DEFAULT_FORM_CONFIG, SelectionPopupState, } from '../../constants/report-case.constants';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../vc-dropdown/vc-dropdown.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 "../../../sharedComponents/v-loader/loader/loader.component";
import * as i7 from "../chip-capsule/chip-capsule.component";
export var SelectionState;
(function (SelectionState) {
    SelectionState["EMPTY"] = "EMPTY";
    SelectionState["SELECTED"] = "SELECTED";
    SelectionState["DISABLED"] = "DISABLED";
})(SelectionState || (SelectionState = {}));
export class FormSelectBoxComponent {
    constructor() {
        this.subscriptions = [];
        this.SelectionPopupState = SelectionPopupState.DROP_DOWN;
        this.SelectionState = SelectionState.EMPTY;
        this._config = DEFAULT_FORM_CONFIG;
        this.title = '';
        this.key = '';
        this.action = '';
        this.state = SelectionState.EMPTY;
        this.popupState = SelectionPopupState.DROP_DOWN;
        this.isCaseTypeSelected = false;
        this.chipItems = [];
        this.chipGroupItems = [];
        this.isError = false;
        this.errorMessage = '';
        this.selectedData = [];
        this.removable = true;
        this.disabled = false;
        this.editDisabled = false;
        this.selectedItemListChange = new EventEmitter();
        this.selectedGroupItemListChange = new EventEmitter();
        this.fieldClicked = new EventEmitter();
    }
    set config(value) {
        this._config = { ...DEFAULT_FORM_CONFIG, ...value };
    }
    ngOnChanges(changes) {
        if (changes['config']) {
            this._config = changes['config'].currentValue;
        }
        if (changes['chipItems']) {
            this.chipItems = changes['chipItems'].currentValue;
        }
        if (changes['chipGroupItems']) {
            this.chipGroupItems = changes['chipGroupItems'].currentValue;
        }
    }
    openSelection() {
        this.fieldClicked.emit('true');
    }
    setDropdownList(event) {
        this.state = SelectionState.SELECTED;
        this.chipItems = [
            {
                label: event?.name,
                value: event?._id,
            },
        ];
        this.selectedItemListChange.emit(this.chipItems);
    }
    removeSelectedList(event) {
        this.chipItems = this.chipItems.filter((item) => item?.value !== event?.value);
        if (!this.chipItems?.length && !this.chipGroupItems?.length) {
            this.state = SelectionState.EMPTY;
        }
        this.selectedItemListChange.emit(this.chipItems);
    }
    removeGroupSelectedList(event) {
        this.chipGroupItems = this.chipGroupItems?.filter((item) => item?.value !== event?.value);
        if (!this.chipItems?.length && !this.chipGroupItems?.length) {
            this.state = SelectionState.EMPTY;
        }
        this.selectedGroupItemListChange.emit(this.chipGroupItems);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSelectBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormSelectBoxComponent, selector: "app-form-selectBox", inputs: { title: "title", key: "key", action: "action", state: "state", popupState: "popupState", isCaseTypeSelected: "isCaseTypeSelected", chipItems: "chipItems", chipGroupItems: "chipGroupItems", config: "config", isError: "isError", errorMessage: "errorMessage", selectedData: "selectedData", removable: "removable", disabled: "disabled", editDisabled: "editDisabled" }, outputs: { selectedItemListChange: "selectedItemListChange", selectedGroupItemListChange: "selectedGroupItemListChange", fieldClicked: "fieldClicked" }, usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"[label]\"></ng-content>\n<div class=\"workflow-form-selectbox vx-mb-2\">\n  <!-- Before Selection -->\n  <div\n    [appTooltip]=\"disabled ? _config.disabledText : ''\"\n    placement=\"bottom-left\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <div\n      *ngIf=\"state.toLowerCase() === 'empty'\"\n      class=\"before-selection vx-d-flex vx-align-center vx-justify-between vx-pl-3 vx-pr-3\"\n      [class.error]=\"_config.isError\"\n      [class.disabled]=\"disabled\"\n      appPopover\n      (click)=\"\n        popupState === 'drop-down' ? selectionPopup.popover() : openSelection()\n      \"\n      placement=\"left\"\n    >\n      <div\n        class=\"selection-value vx-fs-13 vx-lh-5\"\n        [innerHTML]=\"_config.placeholder\"\n      ></div>\n      <i class=\"icons arrow vx-fs-12\">&#xe9e8;</i>\n    </div>\n  </div>\n\n  <app-popover #selectionPopup [dontCloseonClick]=\"_config?.isMulti\">\n    <app-vc-dropdown\n      [config]=\"_config\"\n      [selectedList]=\"selectedData\"\n      (selectionChange)=\"setDropdownList($event)\"\n    ></app-vc-dropdown>\n  </app-popover>\n  <!-- After Selection -->\n  <div\n    [appTooltip]=\"disabled ? _config.disabledText : ''\"\n    placement=\"bottom-left\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <div\n      *ngIf=\"state.toLowerCase() === 'selected'\"\n      class=\"after-selection vx-d-flex vx-align-center vx-justify-between vx-pl-2 vx-pr-2\"\n      [class.disabled]=\"disabled ? 'disabled' : ''\"\n    >\n      <div class=\"vx-d-flex vx-align-center\">\n        <app-chip-capsule\n          *ngIf=\"chipItems?.length\"\n          [items]=\"chipItems\"\n          (remove)=\"removeSelectedList($event)\"\n          [removable]=\"removable\"\n        ></app-chip-capsule>\n        <span\n          class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n          *ngIf=\"chipItems?.length > 0 && chipGroupItems?.length > 0\"\n          >&</span\n        >\n        <app-chip-capsule\n          *ngIf=\"chipGroupItems?.length\"\n          [items]=\"chipGroupItems\"\n          (remove)=\"removeGroupSelectedList($event)\"\n        ></app-chip-capsule>\n      </div>\n      <button\n        *ngIf=\"!editDisabled\"\n        class=\"edit-btn vx-fs-11 vx-fw-500 vx-lh-4 vx-d-flex vx-align-center vx-p-0 vx-m-0 vx-tt-uppercase\"\n        appPopover\n        (click)=\"\n          popupState === 'drop-down'\n            ? selectionPopup.popover()\n            : openSelection()\n        \"\n        placement=\"right\"\n      >\n        <i class=\"icons vx-fs-12 vx-mr-1\">&#xe9ba;</i> EDIT\n      </button>\n    </div>\n  </div>\n  <!-- Disabled Selection -->\n  <div\n    *ngIf=\"state.toLowerCase() === 'disabled'\"\n    class=\"disabled-selection vx-d-flex vx-align-center vx-justify-between vx-pl-3 vx-pr-3\"\n    [vuiTooltip]=\"_config.disabledText ? _config.disabledText : ''\"\n    placement=\"bottom-left\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <div class=\"selection-value vx-fs-13 vx-lh-5\">\n      {{ _config?.placeholder }}\n    </div>\n    <i class=\"icons arrow vx-fs-12\">&#xe9e8;</i>\n  </div>\n  <!-- Error Message -->\n  <div *ngIf=\"isError\" class=\"errorMsg vx-fs-11 vx-lh-4 vx-mt-1\">\n    {{ errorMessage }}\n  </div>\n  <!--loader-->\n  <app-loader *ngIf=\"false\"></app-loader>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflow-form-selectbox .before-selection{background:#fff;border-radius:.25rem;border:1px solid #cdced6;height:2.5rem;cursor:pointer}::ng-deep .workflow-form-selectbox .before-selection:hover{border-color:#343952}::ng-deep .workflow-form-selectbox .before-selection:focus{outline:none;border-color:#1e5dd3;box-shadow:0 2px 4px #1e5dd326}::ng-deep .workflow-form-selectbox .before-selection.error{border-color:#a82a1d}::ng-deep .workflow-form-selectbox .before-selection.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .workflow-form-selectbox .before-selection .selection-value{color:#565a6f}::ng-deep .workflow-form-selectbox .before-selection .arrow{color:#787a8c}::ng-deep .workflow-form-selectbox .after-selection{background:#f9f9fa;border-radius:.25rem;border:1px solid #cdced6;height:2.5rem}::ng-deep .workflow-form-selectbox .after-selection button.edit-btn{background:transparent;border-radius:0;border:none;color:#565a6f}::ng-deep .workflow-form-selectbox .after-selection.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .workflow-form-selectbox .disabled-selection{background:#f2f2f5;border-radius:.25rem;border:1px solid #cdced6;height:2.5rem}::ng-deep .workflow-form-selectbox .disabled-selection .selection-value{color:#a9aab6}::ng-deep .workflow-form-selectbox .disabled-selection .arrow{color:#cdced6}::ng-deep .workflow-form-selectbox .errorMsg{color:#a82a1d}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 3px 6px #1c5bd140;overflow:hidden;width:878px}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list ul{border-radius:unset;border:none;box-shadow:none}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list ul li .avatar-card app-cs-checkbox{display:flex;padding:.125rem 0;width:100%}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom{background:#fff;border-radius:0 0 .25rem .25rem;border-top:1px solid #f2f2f5}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button{background:#fff;border-radius:.25rem;height:1.5rem;margin:0 .125rem!important}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button.reset-btn{border:1px solid #cdced6}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button.reset-btn.disabled{background:#f9f9fa;border-color:#cdced6;color:#a9aab6;pointer-events:none}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button.apply-btn{background:#1e5dd3;border:none}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button.apply-btn.disabled{background:#e3e3e9;color:#a9aab6;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DropdownComponent, selector: "app-vc-dropdown", inputs: ["selectedList", "config"], outputs: ["selectionChange"] }, { 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.LoaderComponent, selector: "app-loader" }, { kind: "component", type: i7.ChipCapsuleComponent, selector: "app-chip-capsule", inputs: ["items", "removable"], outputs: ["remove"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSelectBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-form-selectBox', template: "<ng-content select=\"[label]\"></ng-content>\n<div class=\"workflow-form-selectbox vx-mb-2\">\n  <!-- Before Selection -->\n  <div\n    [appTooltip]=\"disabled ? _config.disabledText : ''\"\n    placement=\"bottom-left\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <div\n      *ngIf=\"state.toLowerCase() === 'empty'\"\n      class=\"before-selection vx-d-flex vx-align-center vx-justify-between vx-pl-3 vx-pr-3\"\n      [class.error]=\"_config.isError\"\n      [class.disabled]=\"disabled\"\n      appPopover\n      (click)=\"\n        popupState === 'drop-down' ? selectionPopup.popover() : openSelection()\n      \"\n      placement=\"left\"\n    >\n      <div\n        class=\"selection-value vx-fs-13 vx-lh-5\"\n        [innerHTML]=\"_config.placeholder\"\n      ></div>\n      <i class=\"icons arrow vx-fs-12\">&#xe9e8;</i>\n    </div>\n  </div>\n\n  <app-popover #selectionPopup [dontCloseonClick]=\"_config?.isMulti\">\n    <app-vc-dropdown\n      [config]=\"_config\"\n      [selectedList]=\"selectedData\"\n      (selectionChange)=\"setDropdownList($event)\"\n    ></app-vc-dropdown>\n  </app-popover>\n  <!-- After Selection -->\n  <div\n    [appTooltip]=\"disabled ? _config.disabledText : ''\"\n    placement=\"bottom-left\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <div\n      *ngIf=\"state.toLowerCase() === 'selected'\"\n      class=\"after-selection vx-d-flex vx-align-center vx-justify-between vx-pl-2 vx-pr-2\"\n      [class.disabled]=\"disabled ? 'disabled' : ''\"\n    >\n      <div class=\"vx-d-flex vx-align-center\">\n        <app-chip-capsule\n          *ngIf=\"chipItems?.length\"\n          [items]=\"chipItems\"\n          (remove)=\"removeSelectedList($event)\"\n          [removable]=\"removable\"\n        ></app-chip-capsule>\n        <span\n          class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n          *ngIf=\"chipItems?.length > 0 && chipGroupItems?.length > 0\"\n          >&</span\n        >\n        <app-chip-capsule\n          *ngIf=\"chipGroupItems?.length\"\n          [items]=\"chipGroupItems\"\n          (remove)=\"removeGroupSelectedList($event)\"\n        ></app-chip-capsule>\n      </div>\n      <button\n        *ngIf=\"!editDisabled\"\n        class=\"edit-btn vx-fs-11 vx-fw-500 vx-lh-4 vx-d-flex vx-align-center vx-p-0 vx-m-0 vx-tt-uppercase\"\n        appPopover\n        (click)=\"\n          popupState === 'drop-down'\n            ? selectionPopup.popover()\n            : openSelection()\n        \"\n        placement=\"right\"\n      >\n        <i class=\"icons vx-fs-12 vx-mr-1\">&#xe9ba;</i> EDIT\n      </button>\n    </div>\n  </div>\n  <!-- Disabled Selection -->\n  <div\n    *ngIf=\"state.toLowerCase() === 'disabled'\"\n    class=\"disabled-selection vx-d-flex vx-align-center vx-justify-between vx-pl-3 vx-pr-3\"\n    [vuiTooltip]=\"_config.disabledText ? _config.disabledText : ''\"\n    placement=\"bottom-left\"\n    delay=\"0\"\n    type=\"black\"\n    [tooltipMandatory]=\"true\"\n  >\n    <div class=\"selection-value vx-fs-13 vx-lh-5\">\n      {{ _config?.placeholder }}\n    </div>\n    <i class=\"icons arrow vx-fs-12\">&#xe9e8;</i>\n  </div>\n  <!-- Error Message -->\n  <div *ngIf=\"isError\" class=\"errorMsg vx-fs-11 vx-lh-4 vx-mt-1\">\n    {{ errorMessage }}\n  </div>\n  <!--loader-->\n  <app-loader *ngIf=\"false\"></app-loader>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .workflow-form-selectbox .before-selection{background:#fff;border-radius:.25rem;border:1px solid #cdced6;height:2.5rem;cursor:pointer}::ng-deep .workflow-form-selectbox .before-selection:hover{border-color:#343952}::ng-deep .workflow-form-selectbox .before-selection:focus{outline:none;border-color:#1e5dd3;box-shadow:0 2px 4px #1e5dd326}::ng-deep .workflow-form-selectbox .before-selection.error{border-color:#a82a1d}::ng-deep .workflow-form-selectbox .before-selection.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .workflow-form-selectbox .before-selection .selection-value{color:#565a6f}::ng-deep .workflow-form-selectbox .before-selection .arrow{color:#787a8c}::ng-deep .workflow-form-selectbox .after-selection{background:#f9f9fa;border-radius:.25rem;border:1px solid #cdced6;height:2.5rem}::ng-deep .workflow-form-selectbox .after-selection button.edit-btn{background:transparent;border-radius:0;border:none;color:#565a6f}::ng-deep .workflow-form-selectbox .after-selection.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .workflow-form-selectbox .disabled-selection{background:#f2f2f5;border-radius:.25rem;border:1px solid #cdced6;height:2.5rem}::ng-deep .workflow-form-selectbox .disabled-selection .selection-value{color:#a9aab6}::ng-deep .workflow-form-selectbox .disabled-selection .arrow{color:#cdced6}::ng-deep .workflow-form-selectbox .errorMsg{color:#a82a1d}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 3px 6px #1c5bd140;overflow:hidden;width:878px}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list ul{border-radius:unset;border:none;box-shadow:none}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list ul li .avatar-card app-cs-checkbox{display:flex;padding:.125rem 0;width:100%}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom{background:#fff;border-radius:0 0 .25rem .25rem;border-top:1px solid #f2f2f5}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button{background:#fff;border-radius:.25rem;height:1.5rem;margin:0 .125rem!important}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button.reset-btn{border:1px solid #cdced6}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button.reset-btn.disabled{background:#f9f9fa;border-color:#cdced6;color:#a9aab6;pointer-events:none}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button.apply-btn{background:#1e5dd3;border:none}::ng-deep .workflow-form-selectbox app-popover .action-list.selection-list .action-list-bottom button.apply-btn.disabled{background:#e3e3e9;color:#a9aab6;pointer-events:none}\n"] }]
        }], propDecorators: { title: [{
                type: Input
            }], key: [{
                type: Input
            }], action: [{
                type: Input
            }], state: [{
                type: Input
            }], popupState: [{
                type: Input
            }], isCaseTypeSelected: [{
                type: Input
            }], chipItems: [{
                type: Input
            }], chipGroupItems: [{
                type: Input
            }], config: [{
                type: Input
            }], isError: [{
                type: Input
            }], errorMessage: [{
                type: Input
            }], selectedData: [{
                type: Input
            }], removable: [{
                type: Input
            }], disabled: [{
                type: Input
            }], editDisabled: [{
                type: Input
            }], selectedItemListChange: [{
                type: Output
            }], selectedGroupItemListChange: [{
                type: Output
            }], fieldClicked: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 