import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';

const eclTextareaEcCss = ".ecl-text-area.sc-ecl-textarea-ec{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:1px solid #707070;border-radius:0;box-shadow:none;box-sizing:border-box;color:#404040;display:block;font:normal normal 400 1rem/1.25rem arial,sans-serif;margin:0;max-width:100%;padding:calc(.75rem - 1px)}.ecl-text-area.sc-ecl-textarea-ec::-moz-placeholder{color:#9f9f9f;font:normal normal 400 1rem/1.25rem arial,sans-serif;opacity:1}.ecl-text-area.sc-ecl-textarea-ec::placeholder{color:#9f9f9f;font:normal normal 400 1rem/1.25rem arial,sans-serif;opacity:1}.ecl-text-area.sc-ecl-textarea-ec:hover{border-color:#004494;box-shadow:none}.ecl-text-area.sc-ecl-textarea-ec:active,.ecl-text-area.sc-ecl-textarea-ec:focus-visible{border-color:#004494;border-width:3px;box-shadow:none;outline:none;padding:calc(.75rem - 3px)}.ecl-text-area--s.sc-ecl-textarea-ec{width:100%}@media (min-width:768px){.ecl-text-area--s.sc-ecl-textarea-ec{width:158px}}.ecl-text-area--m.sc-ecl-textarea-ec{width:100%}@media (min-width:768px){.ecl-text-area--m.sc-ecl-textarea-ec{width:253px}}.ecl-text-area--l.sc-ecl-textarea-ec{width:100%}@media (min-width:768px){.ecl-text-area--l.sc-ecl-textarea-ec{width:443px}}.ecl-text-area--disabled.sc-ecl-textarea-ec,.ecl-text-area--readonly.sc-ecl-textarea-ec,.ecl-text-area[disabled].sc-ecl-textarea-ec,.ecl-text-area[readonly].sc-ecl-textarea-ec{background-color:#fff;border-color:hsla(0,0%,44%,.5);box-shadow:none;cursor:not-allowed}.ecl-text-area--disabled.sc-ecl-textarea-ec::-moz-placeholder,.ecl-text-area--readonly.sc-ecl-textarea-ec::-moz-placeholder,.ecl-text-area[disabled].sc-ecl-textarea-ec::-moz-placeholder,.ecl-text-area[readonly].sc-ecl-textarea-ec::-moz-placeholder{color:hsla(0,0%,62%,.5)}.ecl-text-area--disabled.sc-ecl-textarea-ec::placeholder,.ecl-text-area--readonly.sc-ecl-textarea-ec::placeholder,.ecl-text-area[disabled].sc-ecl-textarea-ec::placeholder,.ecl-text-area[readonly].sc-ecl-textarea-ec::placeholder{color:hsla(0,0%,62%,.5)}.ecl-text-area--disabled.sc-ecl-textarea-ec:hover,.ecl-text-area--readonly.sc-ecl-textarea-ec:hover,.ecl-text-area[disabled].sc-ecl-textarea-ec:hover,.ecl-text-area[readonly].sc-ecl-textarea-ec:hover{border-color:hsla(0,0%,44%,.5);box-shadow:none}.ecl-text-area--disabled.sc-ecl-textarea-ec:active,.ecl-text-area--disabled.sc-ecl-textarea-ec:focus,.ecl-text-area--readonly.sc-ecl-textarea-ec:active,.ecl-text-area--readonly.sc-ecl-textarea-ec:focus,.ecl-text-area[disabled].sc-ecl-textarea-ec:active,.ecl-text-area[disabled].sc-ecl-textarea-ec:focus,.ecl-text-area[readonly].sc-ecl-textarea-ec:active,.ecl-text-area[readonly].sc-ecl-textarea-ec:focus{border-color:hsla(0,0%,44%,.5);border-width:1px;padding:calc(.75rem - 1px)}.ecl-text-area--invalid.sc-ecl-textarea-ec{border-color:#da2131}.ecl-text-area--invalid.sc-ecl-textarea-ec:hover{border-color:#981722}.ecl-text-area--invalid.sc-ecl-textarea-ec:active,.ecl-text-area--invalid.sc-ecl-textarea-ec:focus-visible{border-color:#004494}.ecl-text-area.sc-ecl-textarea-ec.sc-ecl-textarea-ec{margin-top:.75rem}";

const eclTextareaEuCss = ".ecl-text-area.sc-ecl-textarea-eu{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:1px solid #515560;border-radius:4px;box-shadow:inset 0 2px 4px rgba(9,49,142,.08),inset 0 0 10px rgba(9,49,142,.04),inset 0 4px 5px rgba(9,49,142,.04),inset 0 -4px 4px rgba(9,49,142,.04);box-sizing:border-box;color:#171a22;display:block;font:normal normal 400 1rem/1.25rem arial,sans-serif;margin:0;max-width:100%;padding:calc(.75rem - 1px) calc(1rem - 1px)}.ecl-text-area.sc-ecl-textarea-eu::-moz-placeholder{color:#a8aaaf;font:normal normal 400 1rem/1.25rem arial,sans-serif;opacity:1}.ecl-text-area.sc-ecl-textarea-eu::placeholder{color:#a8aaaf;font:normal normal 400 1rem/1.25rem arial,sans-serif;opacity:1}.ecl-text-area.sc-ecl-textarea-eu:hover{border-color:#515560;box-shadow:inset 0 3px 5px rgba(9,49,142,.04),inset 0 0 18px rgba(9,49,142,.04),inset 0 6px 10px rgba(9,49,142,.04),inset 0 -4px 4px rgba(9,49,142,.04)}.ecl-text-area.sc-ecl-textarea-eu:active,.ecl-text-area.sc-ecl-textarea-eu:focus-visible{border-color:#0e47cb;border-width:2px;box-shadow:inset 0 3px 5px rgba(9,49,142,.04),inset 0 0 18px rgba(9,49,142,.04),inset 0 6px 10px rgba(9,49,142,.04),inset 0 -4px 4px rgba(9,49,142,.04);outline:none;padding:calc(.75rem - 2px) calc(1rem - 2px)}.ecl-text-area--s.sc-ecl-textarea-eu{width:100%}@media (min-width:768px){.ecl-text-area--s.sc-ecl-textarea-eu{width:158px}}.ecl-text-area--m.sc-ecl-textarea-eu{width:100%}@media (min-width:768px){.ecl-text-area--m.sc-ecl-textarea-eu{width:253px}}.ecl-text-area--l.sc-ecl-textarea-eu{width:100%}@media (min-width:768px){.ecl-text-area--l.sc-ecl-textarea-eu{width:443px}}.ecl-text-area--disabled.sc-ecl-textarea-eu,.ecl-text-area--readonly.sc-ecl-textarea-eu,.ecl-text-area[disabled].sc-ecl-textarea-eu,.ecl-text-area[readonly].sc-ecl-textarea-eu{background-color:#fff;border-color:rgba(81,85,96,.5);box-shadow:inset 0 2px 4px rgba(9,49,142,.08),inset 0 0 10px rgba(9,49,142,.04),inset 0 4px 5px rgba(9,49,142,.04),inset 0 -4px 4px rgba(9,49,142,.04);cursor:not-allowed}.ecl-text-area--disabled.sc-ecl-textarea-eu::-moz-placeholder,.ecl-text-area--readonly.sc-ecl-textarea-eu::-moz-placeholder,.ecl-text-area[disabled].sc-ecl-textarea-eu::-moz-placeholder,.ecl-text-area[readonly].sc-ecl-textarea-eu::-moz-placeholder{color:hsla(223,4%,67%,.5)}.ecl-text-area--disabled.sc-ecl-textarea-eu::placeholder,.ecl-text-area--readonly.sc-ecl-textarea-eu::placeholder,.ecl-text-area[disabled].sc-ecl-textarea-eu::placeholder,.ecl-text-area[readonly].sc-ecl-textarea-eu::placeholder{color:hsla(223,4%,67%,.5)}.ecl-text-area--disabled.sc-ecl-textarea-eu:hover,.ecl-text-area--readonly.sc-ecl-textarea-eu:hover,.ecl-text-area[disabled].sc-ecl-textarea-eu:hover,.ecl-text-area[readonly].sc-ecl-textarea-eu:hover{border-color:rgba(81,85,96,.5);box-shadow:inset 0 2px 4px rgba(9,49,142,.08),inset 0 0 10px rgba(9,49,142,.04),inset 0 4px 5px rgba(9,49,142,.04),inset 0 -4px 4px rgba(9,49,142,.04)}.ecl-text-area--disabled.sc-ecl-textarea-eu:active,.ecl-text-area--disabled.sc-ecl-textarea-eu:focus,.ecl-text-area--readonly.sc-ecl-textarea-eu:active,.ecl-text-area--readonly.sc-ecl-textarea-eu:focus,.ecl-text-area[disabled].sc-ecl-textarea-eu:active,.ecl-text-area[disabled].sc-ecl-textarea-eu:focus,.ecl-text-area[readonly].sc-ecl-textarea-eu:active,.ecl-text-area[readonly].sc-ecl-textarea-eu:focus{border-color:rgba(81,85,96,.5);border-width:1px;padding:calc(.75rem - 1px) calc(1rem - 1px)}.ecl-text-area--invalid.sc-ecl-textarea-eu{border-color:#bf0036}.ecl-text-area--invalid.sc-ecl-textarea-eu:hover{border-color:#ef0044}.ecl-text-area--invalid.sc-ecl-textarea-eu:active,.ecl-text-area--invalid.sc-ecl-textarea-eu:focus-visible{border-color:#0e47cb}.ecl-text-area.sc-ecl-textarea-eu.sc-ecl-textarea-eu{margin-top:.75rem}";

const EclTextarea$1 = /*@__PURE__*/ proxyCustomElement(class EclTextarea extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.inputFocus = createEvent(this, "inputFocus", 7);
        this.inputBlur = createEvent(this, "inputBlur", 7);
        this.inputChange = createEvent(this, "inputChange", 7);
        this.theme = 'ec';
        this.styleClass = undefined;
        this.disabled = false;
        this.required = false;
        this.invalid = false;
        this.width = 'm';
        this.textareaId = undefined;
        this.name = undefined;
        this.rows = 4;
        this.inputId = undefined;
        this.placeholder = undefined;
        this.defaultValue = undefined;
        this.hasChanged = false;
        this.isFocused = false;
    }
    componentDidRender() {
        if (this.textareaId) {
            const group = this.el.closest('.ecl-form-group');
            if (group) {
                const label = group.querySelector('.ecl-form-label');
                if (label) {
                    label.setAttribute('for', this.textareaId);
                    label.setAttribute('id', `${this.textareaId}-label`);
                }
                const helper = group.querySelector('.ecl-help-block');
                if (helper) {
                    helper.setAttribute('id', `${this.textareaId}-helper`);
                }
            }
        }
    }
    getClass() {
        const styleClasses = [
            `ecl-text-area`,
            `ecl-text-area--${this.width}`,
            this.styleClass
        ];
        if (this.disabled) {
            styleClasses.push('ecl-text-area--disabled');
        }
        if (this.invalid) {
            styleClasses.push('ecl-text-area--invalid');
        }
        return styleClasses.join(' ');
    }
    handleFocus(event) {
        this.inputFocus.emit(event);
        this.isFocused = true;
    }
    handleChange(event) {
        this.inputChange.emit(event);
        this.hasChanged = true;
    }
    handleBlur(event) {
        this.inputBlur.emit(event);
        this.isFocused = false;
    }
    render() {
        let attributes = {
            class: this.getClass(),
            id: this.textareaId,
            name: this.name,
            required: this.required,
            disabled: this.disabled,
            placeholder: this.placeholder,
            rows: this.rows,
            value: this.defaultValue,
        };
        return (h("textarea", Object.assign({}, attributes, { onInput: ev => this.handleChange(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onChange: ev => this.handleChange(ev) }), h("slot", null)));
    }
    get el() { return this; }
    static get style() { return {
        ec: eclTextareaEcCss,
        eu: eclTextareaEuCss
    }; }
}, [38, "ecl-textarea", {
        "theme": [1],
        "styleClass": [1, "style-class"],
        "disabled": [4],
        "required": [4],
        "invalid": [4],
        "width": [1],
        "textareaId": [1, "textarea-id"],
        "name": [1],
        "rows": [2],
        "inputId": [1, "input-id"],
        "placeholder": [1],
        "defaultValue": [1, "default-value"],
        "hasChanged": [4, "has-changed"],
        "isFocused": [4, "is-focused"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ecl-textarea"];
    components.forEach(tagName => { switch (tagName) {
        case "ecl-textarea":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, EclTextarea$1);
            }
            break;
    } });
}

const EclTextarea = EclTextarea$1;
const defineCustomElement = defineCustomElement$1;

export { EclTextarea, defineCustomElement };

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