/*!
 * Built with Stencil
 * By PostNord.
 */
import { Host, h } from "@stencil/core";
import { uuidv4 } from "../../../globals/helpers";
/**
 * The `pn-textarea` is built with a native `textarea`.
 * This means you can use native events to listen to the input.
 *
 * @nativeInput Use the `input` event to listen to content being modified by the user.
 */
export class PnTextarea {
    id = `pn-textarea-${uuidv4()}`;
    idHelper = `${this.id}-text`;
    hostElement;
    /** The label describing the textarea. */
    label;
    /** The textarea content, do not provide slotted content. */
    value = '';
    /** Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */
    helpertext;
    /** Use the compact label variant. @since v7.21.0 */
    compact = false;
    /** A unique ID connecting the element to the label. @category HTML Textarea */
    textareaid = this.id;
    /** HTML name. @category HTML Textarea */
    name;
    /** Set the associated form. @category HTML Textarea*/
    form;
    /** Set the row count for the textarea. @category HTML Textarea */
    rows = 2;
    /** Set the col count for the textarea. @category HTML Textarea */
    cols = 20;
    /** Set the wrap control. @category HTML Textarea */
    wrap = 'soft';
    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML Textarea */
    maxlength;
    /** Allow the browser to autocomplete the textarea. @category HTML Textarea */
    autocomplete = 'off';
    /** Allow the browser to spellcheck the textarea. @category HTML Textarea */
    spellcheck = false;
    /** Placeholder for the textarea. @category HTML Textarea */
    placeholder;
    /** Allow the user to resize the textarea vertically. Handle width in your own layout. @category HTML Textarea */
    resize = false;
    /** Make the textarea required. @category HTML Textarea */
    required = false;
    /** Set the textarea as `valid`, will make the Label and focus rings green. @category State */
    valid = false;
    /** Set the textarea as `invalid`, will make the Label and focus rings red. @category State */
    invalid = false;
    /** Same as `invalid`, but will display the string as an error message under the textarea. @category State */
    error;
    /** Disable the textarea. @category State */
    disabled = false;
    /** Make the textarea readonly. @category State */
    readonly = false;
    handleId() {
        if (this.textareaid !== this.id)
            this.idHelper = `${this.getId()}-helper`;
    }
    setVal(event) {
        const value = event.target.value;
        this.value = value;
    }
    hasError() {
        return this.invalid || !!this.error;
    }
    hasMessage() {
        return !!(this.helpertext?.length || this.error?.length);
    }
    getId() {
        return this.textareaid || this.id;
    }
    renderLabel() {
        return (h("label", { class: "pn-textarea-label", htmlFor: this.getId(), "data-compact": this.compact }, h("span", null, this.label), this.maxlength >= 1 && h("span", null, `${this.value?.length || 0}/${this.maxlength}`)));
    }
    render() {
        return (h(Host, { key: '890e6c29daa489bdf44588c91457e71172e40dae' }, h("div", { key: 'c35d279a237c2411faebd0823d3a03f8212c54d0', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, !this.compact && this.renderLabel(), h("textarea", { key: 'f2358babec0d5eb02e1d3ba5c21c33998e9582b3', class: "pn-textarea-element", id: this.getId(), name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, maxlength: this.maxlength, value: this.value, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), "data-compact": this.compact, onInput: e => this.setVal(e) }), this.compact && this.renderLabel(), this.hasMessage() && (h("p", { key: 'ccdaed7f958b1ef07da159973690ddd86be791f3', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, h("span", { key: '62d9b78ed5370629548e67001689b3d14d40deaa' }, this.error || this.helpertext))))));
    }
    static get is() { return "pn-textarea"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-textarea.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-textarea.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label describing the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The textarea content, do not provide slotted content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value",
                "defaultValue": "''"
            },
            "helpertext": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helpertext"
            },
            "compact": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.21.0"
                        }],
                    "text": "Use the compact label variant."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "compact",
                "defaultValue": "false"
            },
            "textareaid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "A unique ID connecting the element to the label."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "textareaid",
                "defaultValue": "this.id"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "HTML name."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "form": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "Set the associated form."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "form"
            },
            "rows": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "Set the row count for the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "rows",
                "defaultValue": "2"
            },
            "cols": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "Set the col count for the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "cols",
                "defaultValue": "20"
            },
            "wrap": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "Set the wrap control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "wrap",
                "defaultValue": "'soft'"
            },
            "maxlength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "The maximum number of characters the user should be able to add, also adds a visible counter."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "maxlength"
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "Allow the browser to autocomplete the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "autocomplete",
                "defaultValue": "'off'"
            },
            "spellcheck": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "Allow the browser to spellcheck the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "spellcheck",
                "defaultValue": "false"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "Placeholder for the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder"
            },
            "resize": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "Allow the user to resize the textarea vertically. Handle width in your own layout."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "resize",
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML Textarea"
                        }],
                    "text": "Make the textarea required."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "valid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Set the textarea as `valid`, will make the Label and focus rings green."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "valid",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Set the textarea as `invalid`, will make the Label and focus rings red."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "error": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Same as `invalid`, but will display the string as an error message under the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Disable the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Make the textarea readonly."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "readonly",
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "textareaid",
                "methodName": "handleId",
                "handlerOptions": {
                    "immediate": true
                }
            }];
    }
}
