import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { a as ariaBooleanToString } from './aria.js';
import { i as inheritAttributes } from './attributes.js';
import { B as BEM } from './bem.js';
import { d as defaultBalAriaForm } from './form.js';
import { g as getInputTarget, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, f as inputHandleClick, b as inputHandleHostClick, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
import { k as debounceEvent } from './helpers.js';

const balTextareaCss = ".bal-textarea{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;width:100%;font-family:var(--bal-font-family-text);white-space:pre-wrap;-webkit-box-sizing:border-box;box-sizing:border-box}.bal-textarea__native{margin:0;display:block;width:100%;max-width:100%;max-height:100%;outline:none;background:rgba(0,0,0,0);-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:calc(.75em - 2px)}.bal-textarea__native::-webkit-input-placeholder{padding:0;font-family:inherit}.bal-textarea__native::-moz-placeholder{padding:0;font-family:inherit}.bal-textarea__native:-ms-input-placeholder{padding:0;font-family:inherit}.bal-textarea__native::-ms-input-placeholder{padding:0;font-family:inherit}.bal-textarea__native::placeholder{padding:0;font-family:inherit}";

const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.balChange = createEvent(this, "balChange", 7);
        this.balInput = createEvent(this, "balInput", 7);
        this.balBlur = createEvent(this, "balBlur", 7);
        this.balKeyPress = createEvent(this, "balKeyPress", 7);
        this.balFocus = createEvent(this, "balFocus", 7);
        this.inputId = `bal-textarea-${TextareaIds++}`;
        this.inheritedAttributes = {};
        this.inputValue = this.value;
        this.initialValue = this.value || '';
        this.focused = false;
        this.ariaForm = defaultBalAriaForm;
        /**
         * The name of the control, which is submitted with the form data.
         */
        this.name = this.inputId;
        /**
         * If `true` the component gets a invalid style.
         */
        this.invalid = false;
        /**
         * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
         */
        this.autocapitalize = 'none';
        /**
         * Indicates whether the value of the control can be automatically completed by the browser.
         */
        this.autocomplete = 'off';
        /**
         * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
         */
        this.autofocus = false;
        /**
         * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
         */
        this.debounce = 0;
        /**
         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
         */
        this.disabled = false;
        /**
         * If `true` the element can not mutated, meaning the user can not edit the control.
         */
        this.readonly = false;
        /**
         * If `true`, the user must fill in a value before submitting a form.
         */
        this.required = false;
        /**
         * If `true` the input gets a clickable cursor style
         */
        this.clickable = false;
        /**
         * The value of the textarea.
         */
        this.value = '';
        /**
         * If `true`, in Angular reactive forms the control will not be set invalid
         */
        this.autoInvalidOff = false;
        this.onInput = (ev) => {
            const input = getInputTarget(ev);
            if (input) {
                this.inputValue = input.value;
            }
            this.balInput.emit(this.inputValue);
        };
        this.onFocus = (ev) => inputHandleFocus(this, ev);
        this.onBlur = (ev) => {
            inputHandleBlur(this, ev);
            const input = ev.target;
            if (input) {
                input.value = this.getValue();
            }
            inputHandleChange(this);
        };
        this.onClick = (ev) => inputHandleClick(this, ev);
        this.handleClick = (ev) => inputHandleHostClick(this, ev);
    }
    debounceChanged() {
        this.balChange = debounceEvent(this.balChange, this.debounce);
    }
    listenOnClick(ev) {
        inputListenOnClick(this, ev);
    }
    resetHandler(ev) {
        const formElement = ev.target;
        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
            inputHandleReset(this, this.initialValue, this.resetHandlerTimer);
        }
    }
    connectedCallback() {
        this.debounceChanged();
        this.initialValue = this.value || '';
    }
    componentDidLoad() {
        this.inputValue = this.value;
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
    }
    /**
     * Sets focus on the native `input` in `bal-input`. Use this method instead of the global
     * `input.focus()`.
     */
    async setFocus() {
        inputSetFocus(this);
    }
    /**
     * Sets blur on the native `input` in `bal-input`. Use this method instead of the global
     * `input.blur()`.
     * @internal
     */
    async setBlur() {
        inputSetBlur(this);
    }
    /**
     * Returns the native `<textarea>` element used under the hood.
     */
    getInputElement() {
        return Promise.resolve(this.nativeInput);
    }
    /**
     * @internal
     */
    async setAriaForm(ariaForm) {
        this.ariaForm = Object.assign({}, ariaForm);
    }
    getValue() {
        return this.value || '';
    }
    render() {
        const value = this.getValue();
        const block = BEM.block('textarea');
        const elNative = block.element('native');
        return (h(Host, { key: 'd89d5925e65ffcf37caf62fdb8aef42361ceea7f', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '20f02fa458fd85ff4c7c880b11522011052ff2e4', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: 'dfbd0670d3a5428b393bbdfb4778dbd4de5fddcc' }))));
    }
    get el() { return this; }
    static get watchers() { return {
        "debounce": ["debounceChanged"]
    }; }
    static get style() { return balTextareaCss; }
}, [260, "bal-textarea", {
        "name": [1],
        "invalid": [4],
        "autocapitalize": [1],
        "autocomplete": [1],
        "autofocus": [4],
        "debounce": [2],
        "placeholder": [1],
        "maxLength": [2, "max-length"],
        "minLength": [2, "min-length"],
        "disabled": [4],
        "readonly": [4],
        "cols": [2],
        "rows": [2],
        "wrap": [1],
        "required": [4],
        "clickable": [4],
        "inputmode": [1],
        "value": [1025],
        "autoInvalidOff": [516, "auto-invalid-off"],
        "focused": [32],
        "ariaForm": [32],
        "setFocus": [64],
        "setBlur": [64],
        "getInputElement": [64],
        "setAriaForm": [64]
    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]], {
        "debounce": ["debounceChanged"]
    }]);
let TextareaIds = 0;
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-textarea"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-textarea":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Textarea);
            }
            break;
    } });
}

const BalTextarea = Textarea;
const defineCustomElement = defineCustomElement$1;

export { BalTextarea, defineCustomElement };
