'use strict';

var index = require('./index-pX0sBY0-.js');
var domUtils = require('./dom-utils-BdvOgC2b.js');
var tracking = require('./tracking-BPjaTlNR.js');

const textareaCss = () => `:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}.wrapper__label .required{margin-left:4px}.wrapper__label .required.error{color:#CD002F}:host(.wrapper--disabled) .wrapper__label{color:#BFBBBB}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:2px solid #0A8276;outline-offset:0}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #BFBBBB;background-color:#BFBBBB;color:#FFFFFF}:host(.wrapper--disabled) .wrapper__textarea textarea::placeholder{color:#FFFFFF}.wrapper__caption{color:#1D1D1D;font:400 0.75rem/1rem "Source Sans 3"}:host(.wrapper--error) .wrapper__caption{color:#CD002F}:host(.wrapper--disabled) .wrapper__caption{color:#BFBBBB}`;

const TextArea = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxInput = index.createEvent(this, "ifxInput", 7);
        if (hostRef.$hostElement$["s-ei"]) {
            this.internals = hostRef.$hostElement$["s-ei"];
        }
        else {
            this.internals = hostRef.$hostElement$.attachInternals();
            hostRef.$hostElement$["s-ei"] = this.internals;
        }
    }
    inputId = `ifx-textarea-${++textareaId}`;
    internals;
    /** Fired when the textarea value changes. */
    ifxInput;
    get el() { return index.getElement(this); }
    /** 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 (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent("ifx-textarea", await framework);
        }
    }
    render() {
        return (index.h(index.Host, { key: 'bb5760e994c83d00aed582063c6f36ad8250f68c', class: `wrapper--${this.error ? "error" : ""} wrapper--${this.disabled && !this.error ? "disabled" : ""}` }, index.h("label", { key: 'acf8813be71b292fa6510ca911638021c4a6fa6c', class: "wrapper__label", htmlFor: this.inputId }, this.label?.trim(), this.required && (index.h("span", { key: '1841f106b4c766842c4682d164885e1b3d6919cb', class: `required ${this.error ? "error" : ""}` }, "*"))), index.h("div", { key: '55fce236fb5a6fa432dfe236c2a1143bf1802232', class: "wrapper__textarea" }, index.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() && (index.h("div", { key: 'e5ea69d8f3406c53c19f5277817cd74a3475c376', class: "wrapper__caption" }, this.caption.trim()))));
    }
};
let textareaId = 0;
TextArea.style = textareaCss();

exports.ifx_textarea = TextArea;
