import { Host, h, } from "@stencil/core";
import { FormControlErrorText, FormControlHelpText } from "../../ui-components";
import { input, inputFocused, inputInvalid, inputInvalidAndFocused, label } from "../../styles/parts";
export class FormControlNumber {
    constructor() {
        this.isFocused = false;
        this.disabled = false;
        this.handleFormControlInput = (event) => {
            const target = event.target;
            const name = target.getAttribute('name');
            this.inputHandler(name, target.value);
            this.formControlInput.emit({ name, value: target.value });
        };
        this.updateInput = (newValue) => {
            const inputElement = this.el.querySelector('input');
            if (inputElement) {
                inputElement.value = newValue || '';
            }
        };
    }
    handleDefaultValueChange(newValue) {
        this.updateInput(newValue);
    }
    componentDidLoad() {
        this.updateInput(this.defaultValue);
    }
    get part() {
        if (this.isFocused && this.errorText) {
            return inputInvalidAndFocused;
        }
        if (this.isFocused) {
            return inputFocused;
        }
        if (this.errorText) {
            return inputInvalid;
        }
        return input;
    }
    render() {
        return (h(Host, { key: 'a47de1fbb4fbd97b47c4dc934d58a628c65f1dbf' }, h("div", { key: 'bbd063c3f0c68bdad5f1849fed8ac318ebb423ef', class: 'form-group d-flex flex-column' }, h("label", { key: '796cb0253dc523ceb21464f3ce528509abffecfa', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '8ceaf162d7db2c639b679a431dea7b962593eb09', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                this.isFocused = false;
                this.formControlBlur.emit();
            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '6935e075c057a55f0af02051eb97310b187ae807', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '019b48db586768219622e657e121772e4f0203c5', errorText: this.errorText, name: this.name }))));
    }
    static get is() { return "form-control-number"; }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "name": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "helpText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "help-text"
            },
            "errorText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error-text"
            },
            "defaultValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "default-value"
            },
            "inputHandler": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(name: string, value: string) => void",
                    "resolved": "(name: string, value: string) => void",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isFocused": {}
        };
    }
    static get events() {
        return [{
                "method": "formControlInput",
                "name": "formControlInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "formControlBlur",
                "name": "formControlBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "defaultValue",
                "methodName": "handleDefaultValueChange"
            }];
    }
}
