import { h } from "@stencil/core";
export class EclInput {
    constructor() {
        this.eclScript = false;
        this.disabled = false;
        this.required = false;
        this.invalid = false;
        this.hideLabel = false;
        this.width = 'm';
        this.hasChanged = false;
        this.isFocused = false;
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    getClass() {
        const styleClasses = ['ecl-input', this.styleClass];
        if (this.type === 'checkbox') {
            styleClasses.push('ecl-checkbox');
            if (this.disabled) {
                styleClasses.push('ecl-checkbox--disabled');
            }
            if (this.invalid) {
                styleClasses.push('ecl-checkbox--invalid');
            }
        }
        if (this.type === 'radio') {
            styleClasses.push('ecl-radio');
            if (this.disabled) {
                styleClasses.push('ecl-radio--disabled');
            }
            if (this.invalid) {
                styleClasses.push('ecl-radio--invalid');
            }
        }
        return styleClasses.join(' ');
    }
    getInputClasses(input) {
        let inputClasses = [`ecl-${input}__input`];
        if (this.type === 'text' || this.type === 'search') {
            inputClasses = ['ecl-text-input', `ecl-text-input--${this.width}`];
            if (this.invalid) {
                inputClasses.push('ecl-text-input--invalid');
            }
            if (this.disabled) {
                inputClasses.push('ecl-text-input--disabled');
            }
        }
        if (this.inputClass) {
            inputClasses.push(this.inputClass);
        }
        return inputClasses.join(' ');
    }
    getBoxClasses(input, box) {
        let boxClasses = [`ecl-${input}__${box}`];
        if (this.disabled) {
            boxClasses.push(`ecl-${input}__${box}--disabled`);
        }
        if (this.invalid) {
            boxClasses.push(`ecl-${input}__${box}--invalid`);
        }
        return boxClasses.join(' ');
    }
    handleInput(event) {
        this.value = event.target.value;
    }
    handleFocus(event) {
        this.inputFocus.emit(event);
        this.isFocused = true;
    }
    handleChange(event) {
        const value = event.target.value;
        this.inputChange.emit({ type: this.type, value });
    }
    handleBlur(event) {
        this.inputBlur.emit(event);
        this.isFocused = false;
    }
    render() {
        const wrapperAttrs = {};
        const attributes = {
            class: this.getInputClasses(this.type),
            type: this.type,
            id: this.inputId,
            name: this.name,
            required: this.required,
            disabled: this.disabled,
            value: this.defaultValue,
            placeholder: this.placeholder,
        };
        if (this.inputId) {
            const group = this.el.closest('.ecl-form-group');
            if (group) {
                const label = group.querySelector('.ecl-form-label');
                if (label) {
                    label.setAttribute('for', this.inputId);
                    label.setAttribute('id', `${this.inputId}-label`);
                }
                const helper = group.querySelector('.ecl-help-block');
                if (helper) {
                    if (this.type !== 'radio' && this.type !== 'checkbox') {
                        helper.setAttribute('id', `${this.inputId}-helper`);
                    }
                    attributes['aria-describedby'] = `${this.inputId}-helper`;
                }
            }
        }
        return (h("div", Object.assign({ key: 'f55e2ed9a605769f522c1473cd74a768da343b0e', class: this.getClass() }, wrapperAttrs), h("input", Object.assign({ key: '6c48caf481b87261d9047d50e1e41a2746a54c25' }, attributes, { onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onChange: ev => this.handleChange(ev) })), this.type === 'checkbox' ?
            h("label", { class: this.getBoxClasses('checkbox', 'label'), htmlFor: this.inputId }, h("span", { class: this.getBoxClasses('checkbox', 'box') }, h("ecl-icon", { "style-class": `ecl-checkbox__icon sc-ecl-input-${this.theme}`, icon: "check", size: "m" })), h("span", { class: "ecl-checkbox__text" }, this.label))
            : '', this.type === 'checkbox' && this.helperText ?
            h("div", Object.assign({ class: "ecl-checkbox__help" }, (this.inputId ? { 'id': `${this.inputId}-helper` } : {})), this.helperText)
            : '', this.type === 'radio' ?
            h("label", { class: this.getBoxClasses('radio', 'label'), htmlFor: this.inputId }, h("span", { class: this.getBoxClasses('radio', 'box') }, h("span", { class: "ecl-radio__box-inner" })), h("span", { class: "ecl-radio__text" }, this.label))
            : '', this.type === 'radio' && this.helperText ?
            h("div", Object.assign({ class: "ecl-radio__help" }, (this.inputId ? { 'id': `${this.inputId}-helper` } : {})), this.helperText)
            : ''));
    }
    static get is() { return "ecl-input"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-input-ec.css"],
            "eu": ["./build/styles/ecl-input-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-input-ec.css"],
            "eu": ["build/styles/ecl-input-eu.css"]
        };
    }
    static get assetsDirs() { return ["build"]; }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class"
            },
            "inputClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "input-class"
            },
            "eclScript": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "ecl-script",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "hideLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hide-label",
                "defaultValue": "false"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helper-text"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder"
            },
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "width",
                "defaultValue": "'m'"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type"
            },
            "inputId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "input-id"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "defaultValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "default-value"
            },
            "hasChanged": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-changed",
                "defaultValue": "false"
            },
            "isFocused": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-focused",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "value": {}
        };
    }
    static get events() {
        return [{
                "method": "inputFocus",
                "name": "inputFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }, {
                "method": "inputBlur",
                "name": "inputBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }, {
                "method": "inputChange",
                "name": "inputChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "{ type: string; value: string }",
                    "resolved": "{ type: string; value: string; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
