import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';

const textareaCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}: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:none;border:1px solid #0A8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #BFBBBB;background-color:#BFBBBB}: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 = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.ifxInput = createEvent(this, "ifxInput", 7);
        this.internals = this.attachInternals();
        this.inputId = `ifx-textarea-${++textareaId}`;
        this.disabled = false;
        this.error = false;
        this.required = false;
        this.readOnly = false;
        this.resize = 'both';
        this.wrap = 'soft';
        this.fullWidth = "false";
    }
    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() {
        var _a, _b;
        return (h(Host, { key: '055c3e037749474ec903638d4df4597e7de5d970', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '9c114475eae54984bb2108b2760fd99ef7481c7e', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
            _a.trim(), this.required && (h("span", { key: '4057ed36b807e29f932f6583536782cc0238a09a', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: '9c3e191464fab7d530ba6990ba8c73ff1caf1dff', class: 'wrapper__textarea' }, h("textarea", { key: 'f282d6e8229a0d368829e1c2fe44a4560346fe20', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, 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, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '2fb43deb70bd85271fe74f5007c69e7dc5cda347', class: 'wrapper__caption' }, this.caption.trim()))));
    }
    get el() { return this; }
    static get style() { return textareaCss; }
}, [257, "ifx-textarea", {
        "caption": [1],
        "cols": [2],
        "disabled": [4],
        "error": [4],
        "label": [1],
        "maxlength": [2],
        "name": [1],
        "placeholder": [1],
        "required": [4],
        "readOnly": [4, "read-only"],
        "resize": [1],
        "rows": [2],
        "value": [1025],
        "wrap": [1],
        "fullWidth": [513, "full-width"],
        "reset": [64]
    }]);
let textareaId = 0;
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-textarea"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-textarea":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TextArea);
            }
            break;
    } });
}

const IfxTextarea = TextArea;
const defineCustomElement = defineCustomElement$1;

export { IfxTextarea, defineCustomElement };
//# sourceMappingURL=ifx-textarea.js.map

//# sourceMappingURL=ifx-textarea.js.map