import { r as registerInstance, d as createEvent, h } from './core-3f33e631.js';
import { f as debounceEvent, o as onBoolValueChanged } from './utils-3aef1637.js';

let textareaId = 0;
const Textarea = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * The input id
         */
        this.inputId = `anj-textarea-${textareaId++}`;
        /**
         * This Boolean attribute lets you specify that a form control should have textarea focus when the page loads. Defaults to `false`.
         */
        this.autofocus = false;
        /**
         * Set the amount of time, in milliseconds, to wait to trigger the `anjChange` event after each keystroke. Default `0`.
         */
        this.debounce = 0;
        /**
         * If true, the user cannot interact with the textarea. Defaults to `false`.
         */
        this.disabled = false;
        /**
         * The name of the control, which is submitted with the form data.
         */
        this.name = this.inputId;
        /**
         * If true, the user cannot modify the value. Defaults to `false`.
         */
        this.readonly = false;
        /**
         * If true, the user must fill in a value before submitting a form.
         */
        this.required = false;
        /**
         * If true, the element will have its spelling and grammar checked. Defaults to `false`.
         */
        this.spellcheck = false;
        /**
         * The number of visible text lines for the control.
         */
        this.rows = 5;
        /**
         * The value of the textarea.
         */
        this.value = '';
        this.anjInvalid = createEvent(this, "anjInvalid", 7);
        this.anjInput = createEvent(this, "anjInput", 7);
        this.anjChange = createEvent(this, "anjChange", 7);
        this.anjBlur = createEvent(this, "anjBlur", 7);
        this.anjFocus = createEvent(this, "anjFocus", 7);
        this.anjControlDidLoad = createEvent(this, "anjControlDidLoad", 7);
        this.anjControlDidUnload = createEvent(this, "anjControlDidUnload", 7);
    }
    debounceChanged() {
        this.anjChange = debounceEvent(this.anjChange, this.debounce);
    }
    invalidChanged(newVal, oldVal) {
        onBoolValueChanged(newVal, oldVal, this.anjInvalid.emit);
    }
    valueChanged() {
        const textareaEl = this.nativeInput;
        const value = this.getValue();
        if (textareaEl && textareaEl.value !== value) {
            textareaEl.value = value;
        }
        this.anjChange.emit({ value });
    }
    componentDidLoad() {
        this.debounceChanged();
        this.anjControlDidLoad.emit();
        this.anjChange.emit({ value: this.value });
    }
    componentDidUnload() {
        this.nativeInput = undefined;
        this.anjControlDidUnload.emit();
    }
    /**
     * Checks the native element validity use native validators
     */
    async checkValidity() {
        this.nativeInput.checkValidity();
        return this.onValidChange();
    }
    onValidChange() {
        const valid = this.nativeInput.validity.valid;
        this.invalid = !valid;
        return valid;
    }
    getValue() {
        return this.value || '';
    }
    onInput(ev) {
        const textarea = ev.target;
        if (textarea) {
            this.value = textarea.value || '';
        }
        this.anjInput.emit(this.value);
    }
    onBlur() {
        this.anjBlur.emit();
    }
    onFocus() {
        if (!this.readonly) {
            this.anjFocus.emit();
        }
    }
    render() {
        return (h("textarea", { id: this.inputId, autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellCheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, value: this.getValue(), ref: ref => this.nativeInput = ref, onInvalid: () => this.onValidChange(), onInput: (ev) => this.onInput(ev), onBlur: () => this.onBlur(), onFocus: () => this.onFocus() }));
    }
    static get watchers() { return {
        "debounce": ["debounceChanged"],
        "invalid": ["invalidChanged"],
        "value": ["valueChanged"]
    }; }
    static get style() { return ".sc-anj-textarea-h {\n  display: inline-block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  width: 100%;\n}\n.sc-anj-textarea-h, .sc-anj-textarea-h::before, .sc-anj-textarea-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-textarea-h:focus, .sc-anj-textarea-h:active, .sc-anj-textarea-h *.sc-anj-textarea:focus, .sc-anj-textarea-h *.sc-anj-textarea:active {\n  outline: none;\n}\n.sc-anj-textarea-h input.sc-anj-textarea, .sc-anj-textarea-h textarea.sc-anj-textarea, .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea {\n  border-radius: 0.25rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  display: block;\n  width: 100%;\n  height: calc(1.5em + 0.75rem + 2px);\n  padding: 0.375rem 0.75rem;\n  color: var(--anj-text-dark);\n  background-color: var(--anj-light);\n  background-clip: padding-box;\n  border: 1px solid var(--anj-form-control-border);\n  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;\n  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;\n  overflow: visible;\n}\n.sc-anj-textarea-h input.sc-anj-textarea::-ms-expand, .sc-anj-textarea-h textarea.sc-anj-textarea::-ms-expand, .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea::-ms-expand {\n  background-color: transparent;\n  border: 0;\n}\n.sc-anj-textarea-h input.sc-anj-textarea::-webkit-input-placeholder, .sc-anj-textarea-h textarea.sc-anj-textarea::-webkit-input-placeholder, .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea::-webkit-input-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-textarea-h input.sc-anj-textarea::-moz-placeholder, .sc-anj-textarea-h textarea.sc-anj-textarea::-moz-placeholder, .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea::-moz-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-textarea-h input.sc-anj-textarea:-ms-input-placeholder, .sc-anj-textarea-h textarea.sc-anj-textarea:-ms-input-placeholder, .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea:-ms-input-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-textarea-h input.sc-anj-textarea::-ms-input-placeholder, .sc-anj-textarea-h textarea.sc-anj-textarea::-ms-input-placeholder, .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea::-ms-input-placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-textarea-h input.sc-anj-textarea::placeholder, .sc-anj-textarea-h textarea.sc-anj-textarea::placeholder, .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea::placeholder {\n  color: var(--anj-neutral-dark);\n  opacity: 1;\n}\n.sc-anj-textarea-h input.sc-anj-textarea:disabled, .sc-anj-textarea-h input[readonly].sc-anj-textarea, .sc-anj-textarea-h textarea.sc-anj-textarea:disabled, .sc-anj-textarea-h textarea[readonly].sc-anj-textarea, .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea:disabled, .sc-anj-textarea-h .anj-select-toggle[readonly].sc-anj-textarea {\n  background-color: var(--anj-light);\n  opacity: 1;\n}\n.sc-anj-textarea-h input.sc-anj-textarea:focus, .sc-anj-textarea-h textarea.sc-anj-textarea:focus, .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea:focus {\n  outline: none;\n}\n.sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea {\n  padding-right: 2.25rem;\n}\n[readonly].sc-anj-textarea-h {\n  --anj-form-control-border: var(--anj-border-dark);\n}\n[readonly].sc-anj-textarea-h input.sc-anj-textarea, [readonly].sc-anj-textarea-h textarea.sc-anj-textarea, [readonly].sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea {\n  background-color: var(--anj-background);\n}\n[disabled].sc-anj-textarea-h input.sc-anj-textarea, [disabled].sc-anj-textarea-h textarea.sc-anj-textarea, [disabled].sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea {\n  color: var(--anj-text-muted);\n}\n.sc-anj-textarea-h td.sc-anj-textarea-h input.sc-anj-textarea, td .sc-anj-textarea-h input.sc-anj-textarea, .sc-anj-textarea-h td.sc-anj-textarea-h textarea.sc-anj-textarea, td .sc-anj-textarea-h textarea.sc-anj-textarea, .sc-anj-textarea-h td.sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea, td .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea, .sc-anj-textarea-h anj-filter.sc-anj-textarea-h input.sc-anj-textarea, anj-filter .sc-anj-textarea-h input.sc-anj-textarea, .sc-anj-textarea-h anj-filter.sc-anj-textarea-h textarea.sc-anj-textarea, anj-filter .sc-anj-textarea-h textarea.sc-anj-textarea, .sc-anj-textarea-h anj-filter.sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea, anj-filter .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea, .sc-anj-textarea-h anj-type-ahead[search].sc-anj-textarea-h input.sc-anj-textarea, anj-type-ahead[search] .sc-anj-textarea-h input.sc-anj-textarea, .sc-anj-textarea-h anj-type-ahead[search].sc-anj-textarea-h textarea.sc-anj-textarea, anj-type-ahead[search] .sc-anj-textarea-h textarea.sc-anj-textarea, .sc-anj-textarea-h anj-type-ahead[search].sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea, anj-type-ahead[search] .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea {\n  border-radius: 0;\n  border-left: 0;\n  border-right: 0;\n  border-top: 0;\n}\n.sc-anj-textarea-h td.sc-anj-textarea-h input.sc-anj-textarea, td .sc-anj-textarea-h input.sc-anj-textarea, .sc-anj-textarea-h td.sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea, td .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea {\n  background-color: inherit;\n}\n.sc-anj-textarea-h td.sc-anj-textarea-h input[type=number].sc-anj-textarea, td .sc-anj-textarea-h input[type=number].sc-anj-textarea, .sc-anj-textarea-h td.sc-anj-textarea-h .anj-select-toggle[type=number].sc-anj-textarea, td .sc-anj-textarea-h .anj-select-toggle[type=number].sc-anj-textarea {\n  text-align: right;\n}\n.sc-anj-textarea-h td.sc-anj-textarea-h input.sc-anj-textarea, td .sc-anj-textarea-h input.sc-anj-textarea {\n  padding: 0 0 8.5px;\n}\n.sc-anj-textarea-h td.sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea, td .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea {\n  padding-bottom: 0.5rem;\n  padding-left: 0;\n  padding-top: 0;\n}\n.sc-anj-textarea-h td.sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea anj-icon-opener.sc-anj-textarea, td .sc-anj-textarea-h .anj-select-toggle.sc-anj-textarea anj-icon-opener.sc-anj-textarea {\n  margin-top: -0.25rem;\n}\n.sc-anj-textarea-h textarea.sc-anj-textarea {\n  height: unset;\n}"; }
};

export { Textarea as anj_textarea };
