import { Host, h } from "@stencil/core";
export class EzpInput {
    constructor() {
        this.timeout = null;
        /**
        *
        * Properties
        *
        */
        /** Description... */
        this.label = 'Label';
        /** Description... */
        this.type = 'text';
        /** Description... */
        this.icon = 'color';
        /** Description... */
        this.placeholder = '';
        /**
        *
        * States
        *
        */
        this.focused = false;
        this.setFocus = () => {
            this.input.focus();
        };
        this.handleBlur = () => {
            this.focused = false;
        };
        this.handleFocus = () => {
            this.focused = true;
        };
    }
    handleChange(event) {
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
        this.value = event.target.value ? event.target.value : this.type === 'number' ? 0 : '';
        this.timeout = setTimeout(() => {
            this.inputValueChanged.emit({
                type: this.eventType.toLowerCase(),
                value: this.value,
            });
        }, 500);
    }
    render() {
        return (h(Host, { key: '8b50da5bdd10b4d1b0b2621de73c77d7b8ef8161', class: { focused: this.focused }, onClick: this.setFocus }, h("ezp-icon", { key: '87e22adf85c53abed0523843390f2e38ab874ef0', id: "icon", name: this.icon }), h("ezp-label", { key: 'c6814b9606a4b372221fb8aad5650194d58a5938', id: "label", noWrap: true, level: "secondary", text: this.label }), h("input", { key: 'b83fef53a29002ac87e75bea14f91fedb74b435a', id: "input", type: this.type, value: this.value, placeholder: this.placeholder, onInput: (event) => this.handleChange(event), ref: (input) => (this.input = input), onFocus: this.handleFocus, onBlur: this.handleBlur }), this.suffix ? h("ezp-label", { id: "suffix", level: "secondary", text: this.suffix }) : null));
    }
    static get is() { return "ezp-input"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ezp-input.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ezp-input.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label",
                "defaultValue": "'Label'"
            },
            "value": {
                "type": "any",
                "mutable": true,
                "complexType": {
                    "original": "number | string",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "'text'"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IconNameTypes",
                    "resolved": "\"account\" | \"checkmark\" | \"checkmark-alt\" | \"close\" | \"color\" | \"copies\" | \"dark\" | \"drag-drop\" | \"duplex\" | \"exclamation-mark\" | \"expand\" | \"height\" | \"help\" | \"light\" | \"logo\" | \"logout\" | \"menu\" | \"minus\" | \"orientation\" | \"paper_range\" | \"plus\" | \"printer\" | \"quality\" | \"question-mark\" | \"size\" | \"system\" | \"trays\" | \"width\"",
                    "references": {
                        "IconNameTypes": {
                            "location": "import",
                            "path": "./../../shared/types",
                            "id": "src/shared/types.d.ts::IconNameTypes",
                            "referenceLocation": "IconNameTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon",
                "defaultValue": "'color'"
            },
            "suffix": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "suffix"
            },
            "eventType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "event-type"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder",
                "defaultValue": "''"
            }
        };
    }
    static get states() {
        return {
            "focused": {}
        };
    }
    static get events() {
        return [{
                "method": "inputValueChanged",
                "name": "inputValueChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\nEvents"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
}
