import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BdVwMG9u.js';
import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
import { B as BEM } from './bem-ByiN-QjD.js';
import { d as defaultBalAriaForm } from './form-FCLKfv6B.js';
import { g as getInputTarget, a as inputHandleFocus, b as inputHandleBlur, e as inputHandleChange, f as inputHandleClick, i as inputHandleHostClick, h as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-DYvzaBlM.js';
import { n as debounceEvent } from './helpers-BNj87EbG.js';
import './browser-B1u-Mq75.js';
import './config.utils-B7jugjyM.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.balChange = createEvent(this, "balChange");
        this.balInput = createEvent(this, "balInput");
        this.balBlur = createEvent(this, "balBlur");
        this.balKeyPress = createEvent(this, "balKeyPress");
        this.balFocus = createEvent(this, "balFocus");
        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: 'd2abd56effb14131bdbf2a744555316439a18d5f', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '3690740a7250086b52c268a7fe1fd09bf59c3ca3', 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: 'd8bce218b9a67017b1de8e53e11548b9f258d217' }))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "debounce": ["debounceChanged"]
    }; }
};
let TextareaIds = 0;
Textarea.style = balTextareaCss;

export { Textarea as bal_textarea };
