import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-442cf464.js';
import { d as debounceEvent } from './helpers-09d305fe.js';
import { c as createColorClasses } from './theme-a8bb96f5.js';

const textAreaCss = ":host{--lu-text-area-border-color:#686A6F;position:relative}:host lu-icon{top:50%;margin-top:-13px;font-size:24px;line-height:26px}:host(.lu-color){color:var(--lu-color-base)}.native-textarea{padding:9px 10px;width:100%;border:1px solid var(--lu-global-form-input-outline, var(--lu-text-area-border-color));outline:none;background-color:#FFFFFF;font-size:var(--lu-global-form-text-area-font-size, 14px);line-height:26px;box-sizing:border-box}:host([is-valid]) .native-textarea{border:2px solid #00854E}:host([is-invalid]) .native-textarea{border:2px solid #E4002B}:host(.has-focus) .native-textarea{border:2px solid #1B2C56}";

const TextArea = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.luChange = createEvent(this, "luChange", 7);
    this.luInput = createEvent(this, "luInput", 7);
    this.luBlur = createEvent(this, "luBlur", 7);
    this.luFocus = createEvent(this, "luFocus", 7);
    this.textAreaId = `lu-text-area-${textareaIds++}`;
    this.didBlurAfterEdit = false;
    this.hasFocus = false;
    /**
     * This is used when the parent form group receives the update event to tell the parent if it should validate or not.
     */
    this.isResetting = false;
    //addedProps
    /**
     * Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop.
     */
    this.ariaLabeledByAddition = '';
    /**
     * Declares input as invalid
     */
    this.invalid = false;
    /**
     * Declares input as validated
     */
    this.valid = false;
    /**
     * @internal - used by the form group element to declare it's presence
     */
    this.hasFormGroup = false;
    /**
     * id set dynamically
     */
    this.useId = this.textAreaId + '-wrapper';
    /**
     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
     */
    this.autocapitalize = 'none';
    /**
     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
     */
    this.autofocus = false;
    /**
     * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
     */
    this.clearOnEdit = false;
    /**
     * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
     */
    this.debounce = 0;
    /**
     * If `true`, the user cannot interact with the textarea.
     */
    this.disabled = false;
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.textAreaId;
    /**
     * If `true`, the user cannot modify the value.
     */
    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.
     */
    this.spellcheck = false;
    /**
     * If `true`, the element height will increase based on the value.
     */
    this.autoGrow = false;
    /**
     * The value of the textarea.
     */
    this.value = '';
    this.onInput = (ev) => {
      if (this.nativeInput) {
        this.value = this.nativeInput.value;
      }
      this.luInput.emit(ev);
    };
    this.onFocus = () => {
      this.hasFocus = true;
      this.focusChange();
      this.luFocus.emit();
    };
    this.onBlur = () => {
      this.hasFocus = false;
      this.focusChange();
      this.luBlur.emit();
    };
    this.onKeyDown = () => {
      this.checkClearOnEdit();
    };
  }
  debounceChanged() {
    this.luChange = debounceEvent(this.luChange, this.debounce);
  }
  /**
   * Update the native input element when the value changes
   */
  valueChanged() {
    const nativeInput = this.nativeInput;
    const value = this.getValue();
    if (nativeInput && nativeInput.value !== value) {
      nativeInput.value = value;
    }
    this.luChange.emit({ value, isResetting: this.isResetting });
    this.isResetting = false;
  }
  connectedCallback() {
    this.debounceChanged();
  }
  /**
   * Sets focus on the specified `lu-textarea`. Use this method instead of the global
   * `input.focus()`.
   */
  async setFocus() {
    if (this.nativeInput) {
      this.nativeInput.focus();
    }
  }
  /**
   * Returns the native `<textarea>` element used under the hood.
   */
  getInputElement() {
    return Promise.resolve(this.nativeInput);
  }
  /**
   * this is used by the form validation/ form group to reset Value without initiating a validity check
   * @param update
   */
  async updateValue(update) {
    this.isResetting = true;
    this.value = update;
  }
  /**
   * Check if we need to clear the text input if clearOnEdit is enabled
   */
  checkClearOnEdit() {
    if (!this.clearOnEdit) {
      return;
    }
    // Did the input value change after it was blurred and edited?
    if (this.didBlurAfterEdit && this.hasValue()) {
      // Clear the input
      this.value = '';
    }
    // Reset the flag
    this.didBlurAfterEdit = false;
  }
  focusChange() {
    // If clearOnEdit is enabled and the input blurred but has a value, set a flag
    if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {
      this.didBlurAfterEdit = true;
    }
  }
  hasValue() {
    return this.getValue() !== '';
  }
  getValue() {
    return this.value || '';
  }
  render() {
    const value = this.getValue();
    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'is-text-area': true, 'has-value': this.hasValue(), 'has-focus': this.hasFocus }), "is-invalid": this.invalid, "is-valid": this.valid, id: this.useId }, h("textarea", Object.assign({ class: "native-textarea", ref: el => this.nativeInput = el, autoCapitalize: this.autocapitalize }, (this.hasFormGroup || (this.ariaLabeledByAddition && this.ariaLabeledByAddition.length > 0)) &&
      { 'aria-labelledby': `${this.ariaLabeledByAddition} ` + (this.hasFormGroup ? this.textAreaId + "-label" : '') }, { 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, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }), value)));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "debounce": ["debounceChanged"],
    "value": ["valueChanged"]
  }; }
};
let textareaIds = 0;
TextArea.style = textAreaCss;

export { TextArea as lu_text_area };

//# sourceMappingURL=lu-text-area.entry.js.map