import { Host, h, } from "@stencil/core";
import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
import { detectFramework } from "../..//shared/utils/framework-detection";
import { trackComponent } from "../../shared/utils/tracking";
export class TextArea {
    inputId = `ifx-textarea-${++textareaId}`;
    internals;
    /** Fired when the textarea value changes. */
    ifxInput;
    el;
    /** Helper text shown below the textarea. */
    caption;
    /** Number of visible text columns. */
    cols;
    /** If true, the textarea is disabled and not interactive. */
    disabled = false;
    /** If true, shows the textarea in an error state. */
    error = false;
    /** Label text shown above the textarea. */
    label;
    /** Maximum number of characters allowed. */
    maxlength;
    /** Name attribute used when submitting the textarea in a form. */
    name;
    /** Placeholder text shown when the textarea is empty. */
    placeholder;
    /** Whether a value is required (used for validation). */
    required = false;
    /** If true, the textarea is read-only but focusable. */
    readOnly = false;
    /** How the textarea can be resized by the user. */
    resize = "both";
    /** Number of visible text rows. */
    rows;
    /** Current value of the textarea (can be updated programmatically). */
    value;
    /** How text wrapping is handled in the textarea. */
    wrap = "soft";
    /** If 'true', the textarea stretches to fill the available width. */
    fullWidth = "false";
    /** Resets the textarea value to its initial state. */
    async reset() {
        this.resetTextarea();
    }
    handleComponentWidth() {
        const textareaWrapper = this.el.shadowRoot.querySelector(".wrapper__textarea");
        const isFullWidth = this.fullWidth.toLowerCase() === "true";
        if (isFullWidth) {
            textareaWrapper.classList.add("fullWidth");
        }
        else if (textareaWrapper.classList.contains("fullWidth")) {
            textareaWrapper.classList.remove("fullWidth");
        }
    }
    componentDidRender() {
        this.handleComponentWidth();
    }
    formResetCallback() {
        this.resetTextarea();
        //this.internals.setFormValue("");
    }
    handleOnInput(e) {
        this.value = e.target.value;
        //this.internals.setFormValue(this.value);
        this.ifxInput.emit(this.value);
    }
    resetTextarea() {
        this.value = "";
        //this.internals.setValidity({});
        //this.internals.setFormValue('');
    }
    // componentWillLoad() {
    // 	this.internals.setFormValue(this.value);
    // }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-textarea", await framework);
        }
    }
    render() {
        return (h(Host, { key: 'bb5760e994c83d00aed582063c6f36ad8250f68c', class: `wrapper--${this.error ? "error" : ""} wrapper--${this.disabled && !this.error ? "disabled" : ""}` }, h("label", { key: 'acf8813be71b292fa6510ca911638021c4a6fa6c', class: "wrapper__label", htmlFor: this.inputId }, this.label?.trim(), this.required && (h("span", { key: '1841f106b4c766842c4682d164885e1b3d6919cb', class: `required ${this.error ? "error" : ""}` }, "*"))), h("div", { key: '55fce236fb5a6fa432dfe236c2a1143bf1802232', class: "wrapper__textarea" }, h("textarea", { key: 'cb54b8271a488ae10bd1ef93537d3c5cf306f155', "aria-label": "a textarea", "aria-value": this.value, "aria-disabled": this.disabled && !this.error, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled && !this.error, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), this.caption?.trim() && (h("div", { key: 'e5ea69d8f3406c53c19f5277817cd74a3475c376', class: "wrapper__caption" }, this.caption.trim()))));
    }
    static get is() { return "ifx-textarea"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["textarea.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["textarea.css"]
        };
    }
    static get properties() {
        return {
            "caption": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Helper text shown below the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "caption"
            },
            "cols": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Number of visible text columns."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "cols"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, the textarea is disabled and not interactive."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "error": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, shows the textarea in an error state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error",
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label text shown above the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "maxlength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Maximum number of characters allowed."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "maxlength"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Name attribute used when submitting the textarea in a form."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder text shown when the textarea is empty."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether a value is required (used for validation)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "readOnly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, the textarea is read-only but focusable."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "read-only",
                "defaultValue": "false"
            },
            "resize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"both\" | \"horizontal\" | \"vertical\" | \"none\"",
                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "How the textarea can be resized by the user."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "resize",
                "defaultValue": "\"both\""
            },
            "rows": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Number of visible text rows."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "rows"
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Current value of the textarea (can be updated programmatically)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "wrap": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"hard\" | \"soft\" | \"off\"",
                    "resolved": "\"hard\" | \"off\" | \"soft\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "How text wrapping is handled in the textarea."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "wrap",
                "defaultValue": "\"soft\""
            },
            "fullWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If 'true', the textarea stretches to fill the available width."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "full-width",
                "defaultValue": "\"false\""
            }
        };
    }
    static get events() {
        return [{
                "method": "ifxInput",
                "name": "ifxInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when the textarea value changes."
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "reset": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Resets the textarea value to its initial state.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get attachInternalsMemberName() { return "internals"; }
}
let textareaId = 0;
