import { Host, h } from "@stencil/core";
import { assignDescription, isRequired, messageId } from "../../utils/form";
import { PdsLabel } from "../_internal/pds-label/pds-label";
import { danger } from "@pine-ds/icons/icons";
export class PdsTextarea {
    constructor() {
        this.onTextareaChange = (ev) => {
            const textarea = ev.target;
            isRequired(textarea, this);
            if (textarea) {
                this.value = textarea.value;
            }
            this.pdsTextareaChange.emit({ value: this.value, event: ev });
        };
        this.autocomplete = undefined;
        this.componentId = undefined;
        this.disabled = false;
        this.errorMessage = undefined;
        this.helperMessage = undefined;
        this.invalid = false;
        this.label = undefined;
        this.name = this.componentId;
        this.placeholder = undefined;
        this.readonly = false;
        this.required = false;
        this.rows = undefined;
        this.value = undefined;
    }
    textareaClassNames() {
        const classNames = ['pds-textarea__field'];
        if (this.invalid && this.invalid === true) {
            classNames.push('is-invalid');
        }
        return classNames.join('  ');
    }
    render() {
        return (h(Host, { key: '461039704016b1b3858af80440863f1fc4930ceb', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'de68ba7ca3b6714e1da8594e76f60bab2a3de1fb', class: "pds-textarea" }, this.label &&
            h(PdsLabel, { key: '102802b8244a929492731700fdde06a053f3e2d5', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '55a3fde040749bd03a5e681dafad7db0717f4a7f', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
            h("p", { key: '552e0c1240cdc51c215f5ddfc51f250156d8a4b2', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
            h("p", { key: 'a7e6f4a0d926203f5ac56a8f99d03fd9b5f3647b', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '53a40e204e076147b27c921cdbe54336ca50d9e3', icon: danger, size: "small" }), this.errorMessage))));
    }
    static get is() { return "pds-textarea"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../../global/styles/base.scss", "pds-textarea.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../../global/styles/base.css", "pds-textarea.css"]
        };
    }
    static get properties() {
        return {
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies if and how the browser provides `autocomplete` assistance for the field."
                },
                "attribute": "autocomplete",
                "reflect": false
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "attribute": "component-id",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the textarea is disabled."
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "errorMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Displays an error message below the textarea field."
                },
                "attribute": "error-message",
                "reflect": false
            },
            "helperMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Displays a message or hint below the textarea field."
                },
                "attribute": "helper-message",
                "reflect": false
            },
            "invalid": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the textarea is invalid or throws an error."
                },
                "attribute": "invalid",
                "reflect": false,
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Text to be displayed as the textarea label."
                },
                "attribute": "label",
                "reflect": false
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId."
                },
                "attribute": "name",
                "reflect": false,
                "defaultValue": "this.componentId"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Specifies a short hint that describes the expected value of the textarea."
                },
                "attribute": "placeholder",
                "reflect": false
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the textarea is readonly."
                },
                "attribute": "readonly",
                "reflect": false,
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the textarea is required."
                },
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "rows": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets number of rows of text visible without needing to scroll in the textarea."
                },
                "attribute": "rows",
                "reflect": false
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The value of the textarea."
                },
                "attribute": "value",
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "pdsTextareaChange",
                "name": "pdsTextareaChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted whenever the value of the textarea changes."
                },
                "complexType": {
                    "original": "TextareaChangeEventDetail",
                    "resolved": "TextareaChangeEventDetail",
                    "references": {
                        "TextareaChangeEventDetail": {
                            "location": "import",
                            "path": "./textarea-interface",
                            "id": "src/components/pds-textarea/textarea-interface.ts::TextareaChangeEventDetail"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=pds-textarea.js.map
