'use strict';

var index = require('./index-n_pDKBY2.js');
var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
var domUtils = require('./dom-utils-dykhxr-_.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: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}: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;
        }
        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 (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = frameworkDetection.detectFramework();
            frameworkDetection.trackComponent('ifx-textarea', await framework);
        }
    }
    render() {
        var _a, _b;
        return (index.h(index.Host, { key: '78ee16999292032b82986fe1e356e7f15609f0f4', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}` }, index.h("label", { key: 'a4faec9c9761ef71c2025d9d5c6f6c8637786bbe', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
            _a.trim(), this.required && (index.h("span", { key: '7dba2fdd58743c379597dc59d839d8cb32dadbc1', class: `required ${this.error ? 'error' : ""}` }, "*"))), index.h("div", { key: 'ce8d1a3c5f53ab7a378ac475b008d033e746db8d', class: 'wrapper__textarea' }, index.h("textarea", { key: 'ab8d751375870e9293644d6f69c329afac342504', "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) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (index.h("div", { key: 'f9a033dd8fa43d821f0476f38161bb2dbf683432', class: 'wrapper__caption' }, this.caption.trim()))));
    }
    get el() { return index.getElement(this); }
};
let textareaId = 0;
TextArea.style = textareaCss;

exports.ifx_textarea = TextArea;
//# sourceMappingURL=ifx-textarea.entry.cjs.js.map

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