import { CommonModule } from '@angular/common';
import { Component, HostListener, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ColorDirective } from '../../directive/color.directive';
import { MatIcon } from '@angular/material/icon';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
export class InputFieldsComponent {
    constructor(elementRef) {
        this.elementRef = elementRef;
        this.opacity = 1;
        this.ratingHoverIndex = null;
        this.selectedDropdown = null;
        this.enteredValue = null;
        this.colorCode = this.generateColorBasedOnNumber(this.opacity ?? 0);
    }
    ngOnChanges(changes) {
        this.colorCode = this.generateColorBasedOnNumber(this.opacity ?? 0);
    }
    handleMoneyInput(event) {
        if (!(event.code.includes("Digit") || event.code.includes("Backspace")) || !event.target) {
            event.preventDefault();
            return;
        }
        event.target.value = "₹" + Number(event.target.value.replaceAll(",", "").replaceAll("₹", "")).toLocaleString();
    }
    get getTextColor() {
        return (this.opacity ?? 0) < 50 ? '#FFF' : '#000';
    }
    interpolateColor(color1, color2, factor) {
        if (factor === 0)
            return color1;
        if (factor === 1)
            return color2;
        const hex = (x) => this.padZero(Math.round(x).toString(16), 2);
        const r1 = parseInt(color1.substring(1, 3), 16);
        const g1 = parseInt(color1.substring(3, 5), 16);
        const b1 = parseInt(color1.substring(5, 7), 16);
        const r2 = parseInt(color2.substring(1, 3), 16);
        const g2 = parseInt(color2.substring(3, 5), 16);
        const b2 = parseInt(color2.substring(5, 7), 16);
        const r = Math.ceil(r1 * (1 - factor) + r2 * factor);
        const g = Math.ceil(g1 * (1 - factor) + g2 * factor);
        const b = Math.ceil(b1 * (1 - factor) + b2 * factor);
        return `#${hex(r)}${hex(g)}${hex(b)}`;
    }
    padZero(str, length) {
        return str.length < length ? this.padZero("0" + str, length) : str;
    }
    generateColorBasedOnNumber(number) {
        const factor = number / 100; // Assuming number ranges from 0 to 100
        return this.interpolateColor("#000000", "#FFFFFF", factor);
    }
    selectDropdown(value) {
        this.enteredValue = value;
        this.feild.inputValue = value;
        this.selectedDropdown = null;
    }
    handleOutsideClick(event) {
        const clickedInside = this.elementRef.nativeElement.contains(event.target);
        if (!clickedInside) {
            this.selectedDropdown = null;
        }
    }
    onCheckboxChange(selectedIndex) {
        this.feild.options.forEach((checkbox, index) => {
            checkbox.status = index === selectedIndex;
            if (selectedIndex === index) {
                this.feild.inputValue = checkbox.value;
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputFieldsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputFieldsComponent, isStandalone: true, selector: "simpo-input-fields", inputs: { feild: "feild", opacity: "opacity", bgColor: "bgColor", sectionId: "sectionId" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<section [ngSwitch]=\"feild.type\"  class=\"mt-15\">\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'text'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"text\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'textArea'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <textarea type=\"text\" class=\"p-2 mt-2\" cols=\"12\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\"></textarea>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'address'\">\r\n        <label [attr.for]=\"feild.value\"  [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"text\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'email'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"email\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'password'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"password\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'rating'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <div class=\"d-flex mt-2\">\r\n            <span class=\"fa fa-star\" *ngFor=\"let _ of [].constructor(5); let idx = index\" [ngClass]=\"{'checked': idx < (ratingHoverIndex ?? feild.value)  }\" (mouseenter)=\"ratingHoverIndex = idx +1\" (mouseleave)=\"ratingHoverIndex = null\" (click)=\"feild.value = idx +1\"></span>\r\n        </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'date'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"date\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n    </div>\r\n    <!-- <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'checkbox'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <div class=\"d-flex align-items-center flex-wrap mt-2\" style=\"gap: 10px;height:40px\">\r\n            <ng-container *ngFor=\"let checkbox of feild.options\">\r\n                <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n                    <input type=\"checkbox\" [attr.id]=\"checkbox.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\"  [(ngModel)]=\"checkbox.status\">\r\n                    <label [attr.for]=\"checkbox.value\" class=\"mb-0 mt-1 checkboxFont\">{{ checkbox.value }}</label>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div> -->\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'checkbox'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">\r\n            {{ feild.value }} <sup *ngIf=\"feild.required\">*</sup>\r\n        </label>\r\n        <div class=\"d-flex align-items-center flex-wrap mt-2\" style=\"gap: 10px; height: 40px;\">\r\n            <ng-container *ngFor=\"let checkbox of feild.options; let i = index\">\r\n                <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n                    <input \r\n                        type=\"checkbox\" \r\n                        [attr.id]=\"checkbox.value\" \r\n                        [style.background]=\"colorCode\" \r\n                        [style.color]=\"getTextColor\"  \r\n                        [checked]=\"checkbox.status\" \r\n                        (change)=\"onCheckboxChange(i)\">\r\n                    <label [attr.for]=\"checkbox.value\" class=\"mb-0 mt-1 checkboxFont\">\r\n                        {{ checkbox.value }}\r\n                    </label>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    \r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'number'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"number\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\"  [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'money'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"text\" class=\"p-2 mt-2\" value=\"\u20B9\" (keydown)=\"handleMoneyInput($event)\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\"  [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'desc'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <textarea class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\"  [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\"></textarea>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2 position-relative\" *ngSwitchCase=\"'dropdown'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n\r\n        <div class=\"position-relative mt-2 d-flex align-items-center dropdown-key\" (click)=\"selectedDropdown === feild.value ? selectedDropdown = null : selectedDropdown = feild.value\" \r\n        [style.color]=\"getTextColor\" [style.background]=\"colorCode\">\r\n            <input type=\"text\" readonly [attr.id]=\"feild.value\"   [value]=\"enteredValue\" \r\n            [(ngModel)]=\"feild.inputValue\" class=\"w-100\" [style.background]=\"colorCode\" placeholder=\"Select\">\r\n            <mat-icon class=\"down-arrow\">{{feild.value != selectedDropdown ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}</mat-icon>\r\n\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0</div>\r\n        <div class=\"container-list position-absolute\" [hidden]=\"feild.value != selectedDropdown\">\r\n            <ng-container *ngFor=\"let option of feild.options\">\r\n                <div class=\"container\" [ngClass]=\"{'container-selected': option.value == selectedDropdown}\" (click)=\"selectDropdown(option.value)\">{{ option.value }}</div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</section>\r\n", styles: ["input,textarea,select{border-radius:5px;padding:8px 8px 8px 10px!important;font-size:large;background-color:#000;font-weight:400;border:1px solid #b9b9b9}input{height:40px}.checkboxFont{font-size:16px;font-weight:400}.down-arrow{position:absolute;right:5px;color:#000}.fa-star{opacity:.3;cursor:pointer;font-size:20px}input[type=checkbox]{height:18px;width:18px}.checked{opacity:1;color:#daa520}.input-field-label{text-align:start;font-size:16px;font-weight:400}.mt-15{margin-top:15px}.container-list{box-shadow:0 0 3px #999;background-color:#fff;border-radius:5px;padding:3px 0;font-weight:400;overflow:hidden;position:absolute;top:72px;width:100%;z-index:1;max-height:200px;overflow:scroll}.container-list .container{cursor:pointer;padding:10px;font-size:18px;color:#000}.container-list .container-selected{color:#fff;background-color:purple}.container-list .container:hover{color:#fff;background-color:purple;width:100%;font-weight:600!important}sup{color:red}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.dropdown-key{border-radius:5px;border:1px solid #b9b9b9}.dropdown-key input{border:none}.dropdown-key input:focus{outline:none}.container{background:#fff;color:#000!important;width:100%!important}.container:hover{color:#fff!important;background-color:purple}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputFieldsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-input-fields', standalone: true, imports: [
                        CommonModule, FormsModule, ColorDirective, MatIcon
                    ], template: "<section [ngSwitch]=\"feild.type\"  class=\"mt-15\">\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'text'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"text\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'textArea'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <textarea type=\"text\" class=\"p-2 mt-2\" cols=\"12\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\"></textarea>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'address'\">\r\n        <label [attr.for]=\"feild.value\"  [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"text\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'email'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"email\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'password'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"password\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'rating'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <div class=\"d-flex mt-2\">\r\n            <span class=\"fa fa-star\" *ngFor=\"let _ of [].constructor(5); let idx = index\" [ngClass]=\"{'checked': idx < (ratingHoverIndex ?? feild.value)  }\" (mouseenter)=\"ratingHoverIndex = idx +1\" (mouseleave)=\"ratingHoverIndex = null\" (click)=\"feild.value = idx +1\"></span>\r\n        </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'date'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"date\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n    </div>\r\n    <!-- <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'checkbox'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <div class=\"d-flex align-items-center flex-wrap mt-2\" style=\"gap: 10px;height:40px\">\r\n            <ng-container *ngFor=\"let checkbox of feild.options\">\r\n                <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n                    <input type=\"checkbox\" [attr.id]=\"checkbox.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\"  [(ngModel)]=\"checkbox.status\">\r\n                    <label [attr.for]=\"checkbox.value\" class=\"mb-0 mt-1 checkboxFont\">{{ checkbox.value }}</label>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div> -->\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'checkbox'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">\r\n            {{ feild.value }} <sup *ngIf=\"feild.required\">*</sup>\r\n        </label>\r\n        <div class=\"d-flex align-items-center flex-wrap mt-2\" style=\"gap: 10px; height: 40px;\">\r\n            <ng-container *ngFor=\"let checkbox of feild.options; let i = index\">\r\n                <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n                    <input \r\n                        type=\"checkbox\" \r\n                        [attr.id]=\"checkbox.value\" \r\n                        [style.background]=\"colorCode\" \r\n                        [style.color]=\"getTextColor\"  \r\n                        [checked]=\"checkbox.status\" \r\n                        (change)=\"onCheckboxChange(i)\">\r\n                    <label [attr.for]=\"checkbox.value\" class=\"mb-0 mt-1 checkboxFont\">\r\n                        {{ checkbox.value }}\r\n                    </label>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    \r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'number'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"number\" class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\"  [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'money'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <input type=\"text\" class=\"p-2 mt-2\" value=\"\u20B9\" (keydown)=\"handleMoneyInput($event)\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\"  [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'desc'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n        <textarea class=\"p-2 mt-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\"  [(ngModel)]=\"feild.inputValue\"\r\n        [placeholder]=\"'Enter '+feild.label\"></textarea>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2 position-relative\" *ngSwitchCase=\"'dropdown'\">\r\n        <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n\r\n        <div class=\"position-relative mt-2 d-flex align-items-center dropdown-key\" (click)=\"selectedDropdown === feild.value ? selectedDropdown = null : selectedDropdown = feild.value\" \r\n        [style.color]=\"getTextColor\" [style.background]=\"colorCode\">\r\n            <input type=\"text\" readonly [attr.id]=\"feild.value\"   [value]=\"enteredValue\" \r\n            [(ngModel)]=\"feild.inputValue\" class=\"w-100\" [style.background]=\"colorCode\" placeholder=\"Select\">\r\n            <mat-icon class=\"down-arrow\">{{feild.value != selectedDropdown ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}</mat-icon>\r\n\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0</div>\r\n        <div class=\"container-list position-absolute\" [hidden]=\"feild.value != selectedDropdown\">\r\n            <ng-container *ngFor=\"let option of feild.options\">\r\n                <div class=\"container\" [ngClass]=\"{'container-selected': option.value == selectedDropdown}\" (click)=\"selectDropdown(option.value)\">{{ option.value }}</div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</section>\r\n", styles: ["input,textarea,select{border-radius:5px;padding:8px 8px 8px 10px!important;font-size:large;background-color:#000;font-weight:400;border:1px solid #b9b9b9}input{height:40px}.checkboxFont{font-size:16px;font-weight:400}.down-arrow{position:absolute;right:5px;color:#000}.fa-star{opacity:.3;cursor:pointer;font-size:20px}input[type=checkbox]{height:18px;width:18px}.checked{opacity:1;color:#daa520}.input-field-label{text-align:start;font-size:16px;font-weight:400}.mt-15{margin-top:15px}.container-list{box-shadow:0 0 3px #999;background-color:#fff;border-radius:5px;padding:3px 0;font-weight:400;overflow:hidden;position:absolute;top:72px;width:100%;z-index:1;max-height:200px;overflow:scroll}.container-list .container{cursor:pointer;padding:10px;font-size:18px;color:#000}.container-list .container-selected{color:#fff;background-color:purple}.container-list .container:hover{color:#fff;background-color:purple;width:100%;font-weight:600!important}sup{color:red}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.dropdown-key{border-radius:5px;border:1px solid #b9b9b9}.dropdown-key input{border:none}.dropdown-key input:focus{outline:none}.container{background:#fff;color:#000!important;width:100%!important}.container:hover{color:#fff!important;background-color:purple}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { feild: [{
                type: Input
            }], opacity: [{
                type: Input
            }], bgColor: [{
                type: Input
            }], sectionId: [{
                type: Input
            }], handleOutsideClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 