import { Host, h } from "@stencil/core";
export class XQuantity {
    constructor() {
        this.name = undefined;
        this.min = 0;
        this.max = undefined;
        this.value = 1;
        this.validate = undefined;
        this.required = undefined;
        this.number = undefined;
        this.isValid = true;
        this.isDisabled = undefined;
    }
    /**
     * On value attribute change
     *
     * @param value
     */
    onValueChange(value) {
        this.number = typeof value === 'number' ? value : parseInt(value);
        this.internals.setFormValue(this.number.toString());
        this.el.dispatchEvent(new InputEvent('input'));
    }
    /**
     * Validate the input and get the validation result
    */
    async checkValidity() {
        this.onValidate();
        return this.isValid;
    }
    /**
     * This is called when the 'disabled' attribute of the element or or an ancestor <fieldset> is updated
     *
     * @param disabled
     */
    formDisabledCallback(disabled) {
        this.isDisabled = disabled;
    }
    /**
     * This is called when the parent/owner form is reset
     */
    formResetCallback() {
        this.isValid = true;
        this.internals.setFormValue('');
        this.el.dispatchEvent(new InputEvent('input'));
    }
    /**
     * On component will be loaded hook
     */
    componentDidLoad() {
        if (this.min && this.min > this.value) {
            this.value = this.min;
        }
        this.number = this.value;
        this.internals.setFormValue(this.number.toString());
        this.el.dispatchEvent(new InputEvent('input'));
    }
    /**
     * This called on input field is unfocused
     */
    onBlurInput() {
        setTimeout(() => this.onValidate(), 50);
    }
    /**
     * Validate the field input
     *
     * @returns
     */
    onValidate() {
        if (!this.validate) {
            return;
        }
        const selectors = ["input", "select", "textarea"];
        let input = null;
        selectors.forEach((selector) => {
            if (input === null) {
                input = this.el.querySelector(selector);
            }
        });
        this.isValid = (input === null || input === void 0 ? void 0 : input.validity) ? input.validity.valid : true;
        this.onValidateInputEvent.emit(input);
    }
    /**
     * On element change input value
     *
     * @param event
     */
    handleChange(event) {
        const input = event.target;
        this.value = parseInt(input.value);
        this.internals.setFormValue(input.value);
        this.el.dispatchEvent(new InputEvent('input'));
    }
    /**
     * Increment number value
     *
     * @returns
     */
    onPlusClick() {
        if (!Number.isNaN(this.number) && this.number + 1 > this.max) {
            return;
        }
        this.number++;
        this.value = this.number;
        this.el.dispatchEvent(new InputEvent('input'));
        this.onSumInputEvent.emit(this.number);
    }
    /**
     * Decrement number value
     *
     * @returns
     */
    onMinusClick() {
        if (!Number.isNaN(this.number) && this.number - 1 < this.min) {
            return;
        }
        this.number--;
        this.value = this.number;
        this.el.dispatchEvent(new InputEvent('input'));
        this.onSubInputEvent.emit(this.number);
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '968f07ea8b8993555309a4a6e1cd2f965e54b1da', class: {
                'invalid': !this.isValid,
                'disabled': this.isDisabled,
                'required': this.required,
            }, "data-for": this.name }, h("x-chip", { key: 'acea803fbd73f29d1acc6681cfc404022100db29', hoverable: true }, h("x-button", { key: '5b87215fded27a02cf8876183cda6c7bf3a6e23a', icon: "plus", tabindex: "-1", onClick: this.onPlusClick.bind(this) }), h("input", { key: '87ec301d8fa608ae5f985202f0e4f35fc1f7ee4f', type: "number", value: this.number, min: this.min, max: this.max, required: this.required, inputMode: "numeric", onInput: (e) => this.handleChange(e) }), h("x-button", { key: '342786e435dd6e03905b2c81be9c0dd722f472ae', icon: "minus", tabindex: "-1", onClick: this.onMinusClick.bind(this) })));
    }
    static get is() { return "x-quantity"; }
    static get formAssociated() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element input name for forms keys"
                },
                "attribute": "name",
                "reflect": false
            },
            "min": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element minimal number limit, default is 0"
                },
                "attribute": "min",
                "reflect": false,
                "defaultValue": "0"
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element maximun number limit,default is infinite"
                },
                "attribute": "max",
                "reflect": false
            },
            "value": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element initial input value"
                },
                "attribute": "value",
                "reflect": true,
                "defaultValue": "1"
            },
            "validate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element enable internal validation"
                },
                "attribute": "validate",
                "reflect": false
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element input required for forms validations"
                },
                "attribute": "required",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "number": {},
            "isValid": {},
            "isDisabled": {}
        };
    }
    static get events() {
        return [{
                "method": "onSubInputEvent",
                "name": "sub",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Substraction event button click"
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "onSumInputEvent",
                "name": "sum",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Sumarize event button click"
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "onValidateInputEvent",
                "name": "validated",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "On validate input event"
                },
                "complexType": {
                    "original": "HTMLObjectElement",
                    "resolved": "HTMLObjectElement",
                    "references": {
                        "HTMLObjectElement": {
                            "location": "global",
                            "id": "global::HTMLObjectElement"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "checkValidity": {
                "complexType": {
                    "signature": "() => Promise<boolean>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<boolean>"
                },
                "docs": {
                    "text": "Validate the input and get the validation result",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "onValueChange"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
