import { h } from "@stencil/core";
import { debounceEvent, onBoolValueChanged } from '../../utils/utils';
let textareaId = 0;
export class Textarea {
    constructor() {
        /**
         * The input id
         */
        this.inputId = `anj-textarea-${textareaId++}`;
        /**
         * This Boolean attribute lets you specify that a form control should have textarea focus when the page loads. Defaults to `false`.
         */
        this.autofocus = false;
        /**
         * Set the amount of time, in milliseconds, to wait to trigger the `anjChange` event after each keystroke. Default `0`.
         */
        this.debounce = 0;
        /**
         * If true, the user cannot interact with the textarea. Defaults to `false`.
         */
        this.disabled = false;
        /**
         * The name of the control, which is submitted with the form data.
         */
        this.name = this.inputId;
        /**
         * If true, the user cannot modify the value. Defaults to `false`.
         */
        this.readonly = false;
        /**
         * If true, the user must fill in a value before submitting a form.
         */
        this.required = false;
        /**
         * If true, the element will have its spelling and grammar checked. Defaults to `false`.
         */
        this.spellcheck = false;
        /**
         * The number of visible text lines for the control.
         */
        this.rows = 5;
        /**
         * The value of the textarea.
         */
        this.value = '';
    }
    debounceChanged() {
        this.anjChange = debounceEvent(this.anjChange, this.debounce);
    }
    invalidChanged(newVal, oldVal) {
        onBoolValueChanged(newVal, oldVal, this.anjInvalid.emit);
    }
    valueChanged() {
        const textareaEl = this.nativeInput;
        const value = this.getValue();
        if (textareaEl && textareaEl.value !== value) {
            textareaEl.value = value;
        }
        this.anjChange.emit({ value });
    }
    componentDidLoad() {
        this.debounceChanged();
        this.anjControlDidLoad.emit();
        this.anjChange.emit({ value: this.value });
    }
    componentDidUnload() {
        this.nativeInput = undefined;
        this.anjControlDidUnload.emit();
    }
    /**
     * Checks the native element validity use native validators
     */
    async checkValidity() {
        this.nativeInput.checkValidity();
        return this.onValidChange();
    }
    onValidChange() {
        const valid = this.nativeInput.validity.valid;
        this.invalid = !valid;
        return valid;
    }
    getValue() {
        return this.value || '';
    }
    onInput(ev) {
        const textarea = ev.target;
        if (textarea) {
            this.value = textarea.value || '';
        }
        this.anjInput.emit(this.value);
    }
    onBlur() {
        this.anjBlur.emit();
    }
    onFocus() {
        if (!this.readonly) {
            this.anjFocus.emit();
        }
    }
    render() {
        return (h("textarea", { id: this.inputId, autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellCheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, value: this.getValue(), ref: ref => this.nativeInput = ref, onInvalid: () => this.onValidChange(), onInput: (ev) => this.onInput(ev), onBlur: () => this.onBlur(), onFocus: () => this.onFocus() }));
    }
    static get is() { return "anj-textarea"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["textarea.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["textarea.css"]
    }; }
    static get properties() { return {
        "inputId": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The input id"
            },
            "attribute": "input-id",
            "reflect": false,
            "defaultValue": "`anj-textarea-${textareaId++}`"
        },
        "autofocus": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "This Boolean attribute lets you specify that a form control should have textarea focus when the page loads. Defaults to `false`."
            },
            "attribute": "autofocus",
            "reflect": false,
            "defaultValue": "false"
        },
        "debounce": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Set the amount of time, in milliseconds, to wait to trigger the `anjChange` event after each keystroke. Default `0`."
            },
            "attribute": "debounce",
            "reflect": false,
            "defaultValue": "0"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "If true, the user cannot interact with the textarea. Defaults to `false`."
            },
            "attribute": "disabled",
            "reflect": true,
            "defaultValue": "false"
        },
        "invalid": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Whether the control is valid"
            },
            "attribute": "invalid",
            "reflect": true
        },
        "maxlength": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "The shortest the text blob is allowed to be."
            },
            "attribute": "maxlength",
            "reflect": false
        },
        "minlength": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "The longest the text blob is allowed to be."
            },
            "attribute": "minlength",
            "reflect": false
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The name of the control, which is submitted with the form data."
            },
            "attribute": "name",
            "reflect": false,
            "defaultValue": "this.inputId"
        },
        "placeholder": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Instructional text that shows before the textarea has a value."
            },
            "attribute": "placeholder",
            "reflect": false
        },
        "readonly": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "If true, the user cannot modify the value. Defaults to `false`."
            },
            "attribute": "readonly",
            "reflect": true,
            "defaultValue": "false"
        },
        "required": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "If true, the user must fill in a value before submitting a form."
            },
            "attribute": "required",
            "reflect": false,
            "defaultValue": "false"
        },
        "spellcheck": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "If true, the element will have its spelling and grammar checked. Defaults to `false`."
            },
            "attribute": "spellcheck",
            "reflect": false,
            "defaultValue": "false"
        },
        "cols": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer."
            },
            "attribute": "cols",
            "reflect": false
        },
        "rows": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The number of visible text lines for the control."
            },
            "attribute": "rows",
            "reflect": false,
            "defaultValue": "5"
        },
        "wrap": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "Indicates how the control wraps text. Possible values are: `\"hard\"`, `\"soft\"`, `\"off\"`."
            },
            "attribute": "wrap",
            "reflect": false
        },
        "value": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The value of the textarea."
            },
            "attribute": "value",
            "reflect": false,
            "defaultValue": "''"
        }
    }; }
    static get events() { return [{
            "method": "anjInvalid",
            "name": "anjInvalid",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when invalid status changes."
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjInput",
            "name": "anjInput",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when a keyboard textarea ocurred."
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjChange",
            "name": "anjChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the value has changed."
            },
            "complexType": {
                "original": "InputChangeEvent",
                "resolved": "InputChangeEvent",
                "references": {
                    "InputChangeEvent": {
                        "location": "import",
                        "path": "../../types/types"
                    }
                }
            }
        }, {
            "method": "anjBlur",
            "name": "anjBlur",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the textarea loses focus."
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "anjFocus",
            "name": "anjFocus",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the textarea has focus."
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "anjControlDidLoad",
            "name": "anjControlDidLoad",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the textarea has been created."
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }, {
            "method": "anjControlDidUnload",
            "name": "anjControlDidUnload",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the textarea has been removed."
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "checkValidity": {
            "complexType": {
                "signature": "() => Promise<boolean>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<boolean>"
            },
            "docs": {
                "text": "Checks the native element validity use native validators",
                "tags": []
            }
        }
    }; }
    static get watchers() { return [{
            "propName": "debounce",
            "methodName": "debounceChanged"
        }, {
            "propName": "invalid",
            "methodName": "invalidChanged"
        }, {
            "propName": "value",
            "methodName": "valueChanged"
        }]; }
}
