import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$3 } from './sc-form-control2.js';
import { d as defineCustomElement$2 } from './sc-tooltip2.js';

const scTextareaCss = ":host{display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--sc-input-font-family);font-weight:var(--sc-input-font-weight);line-height:var(--sc-line-height-normal);letter-spacing:var(--sc-input-letter-spacing);vertical-align:middle;transition:var(--sc-transition-fast) color, var(--sc-transition-fast) border, var(--sc-transition-fast) box-shadow,\n    var(--sc-transition-fast) background-color;cursor:text}.textarea--standard{background-color:var(--sc-input-background-color);border:solid var(--sc-input-border-width) var(--sc-input-border-color)}.textarea--standard:hover:not(.textarea--disabled){background-color:var(--sc-input-background-color-hover);border-color:var(--sc-input-border-color-hover)}.textarea--standard:hover:not(.textarea--disabled) .textarea__control{color:var(--sc-input-color-hover)}.textarea--standard.textarea--focused:not(.textarea--disabled){background-color:var(--sc-input-background-color-focus);border-color:var(--sc-input-border-color-focus);color:var(--sc-input-color-focus);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-input-focus-ring-color)}.textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--sc-input-color-focus)}.textarea--standard.textarea--disabled{background-color:var(--sc-input-background-color-disabled);border-color:var(--sc-input-border-color-disabled);opacity:0.5;cursor:not-allowed}.textarea--standard.textarea--disabled .textarea__control{color:var(--sc-input-color-disabled)}.textarea--standard.textarea--disabled .textarea__control::placeholder{color:var(--sc-input-placeholder-color-disabled)}.textarea--filled{border:none;background-color:var(--sc-input-filled-background-color);color:var(--sc-input-color)}.textarea--filled:hover:not(.textarea--disabled){background-color:var(--sc-input-filled-background-color-hover)}.textarea--filled.textarea--focused:not(.textarea--disabled){background-color:var(--sc-input-filled-background-color-focus);outline:var(--sc-focus-ring);outline-offset:var(--sc-focus-ring-offset)}.textarea--filled.textarea--disabled{background-color:var(--sc-input-filled-background-color-disabled);opacity:0.5;cursor:not-allowed}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sc-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--sc-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--small{border-radius:var(--sc-input-border-radius-small);font-size:var(--sc-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--sc-input-spacing-small)}.textarea--medium{border-radius:var(--sc-input-border-radius-medium);font-size:var(--sc-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--sc-input-spacing-medium)}.textarea--large{border-radius:var(--sc-input-border-radius-large);font-size:var(--sc-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--sc-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}";

let id = 0;
const ScTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.scChange = createEvent(this, "scChange", 7);
    this.scInput = createEvent(this, "scInput", 7);
    this.scBlur = createEvent(this, "scBlur", 7);
    this.scFocus = createEvent(this, "scFocus", 7);
    this.inputId = `textarea-${++id}`;
    this.helpId = `textarea-help-text-${id}`;
    this.labelId = `textarea-label-${id}`;
    this.hasFocus = false;
    /** The textarea's size. */
    this.size = 'medium';
    /** The textarea's value attribute. */
    this.value = '';
    /** Draws a filled textarea. */
    this.filled = false;
    /** The textarea's label. Alternatively, you can use the label slot. */
    this.label = '';
    /** Should we show the label */
    this.showLabel = true;
    /** The textarea's help text. Alternatively, you can use the help-text slot. */
    this.help = '';
    /** The number of rows to display by default. */
    this.rows = 4;
    /** Controls how the textarea can be resized. */
    this.resize = 'vertical';
    /** Disables the textarea. */
    this.disabled = false;
    /** Makes the textarea readonly. */
    this.readonly = false;
    /** Makes the textarea a required field. */
    this.required = false;
    /**
     * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
     * `required`, `minlength`, and `maxlength` using the browser's constraint validation API.
     */
    this.invalid = false;
  }
  handleRowsChange() {
    this.setTextareaHeight();
  }
  handleValueChange() {
    this.invalid = !this.input.checkValidity();
  }
  handleDisabledChange() {
    // Disabled form controls are always valid, so we need to recheck validity when the state changes
    this.input.disabled = this.disabled;
    this.invalid = !this.input.checkValidity();
  }
  disconnectedCallback() {
    this.resizeObserver.unobserve(this.input);
  }
  /** Sets focus on the textarea. */
  focus(options) {
    this.input.focus(options);
  }
  /** Removes focus from the textarea. */
  blur() {
    this.input.blur();
  }
  /** Selects all the text in the textarea. */
  select() {
    this.input.select();
  }
  /** Gets or sets the textarea's scroll position. */
  scrollPosition(position) {
    if (position) {
      if (typeof position.top === 'number')
        this.input.scrollTop = position.top;
      if (typeof position.left === 'number')
        this.input.scrollLeft = position.left;
      return;
    }
    // eslint-disable-next-line consistent-return
    return {
      top: this.input.scrollTop,
      left: this.input.scrollTop,
    };
  }
  /** Sets the start and end positions of the text selection (0-based). */
  setSelectionRange(selectionStart, selectionEnd, selectionDirection = 'none') {
    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
  }
  /** Replaces a range of text with a new string. */
  setRangeText(replacement, start, end, selectMode = 'preserve') {
    this.input.setRangeText(replacement, start, end, selectMode);
    if (this.value !== this.input.value) {
      this.value = this.input.value;
      this.scInput.emit();
    }
    if (this.value !== this.input.value) {
      this.value = this.input.value;
      this.setTextareaHeight();
      this.scInput.emit();
      this.scChange.emit();
    }
  }
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
  reportValidity() {
    return this.input.reportValidity();
  }
  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
  setCustomValidity(message) {
    this.input.setCustomValidity(message);
    this.invalid = !this.input.checkValidity();
  }
  handleBlur() {
    this.hasFocus = false;
    this.scBlur.emit();
  }
  handleChange() {
    this.value = this.input.value;
    this.setTextareaHeight();
    this.scChange.emit();
  }
  handleFocus() {
    this.hasFocus = true;
    this.scFocus.emit();
  }
  handleInput() {
    this.value = this.input.value;
    this.setTextareaHeight();
    this.scInput.emit();
  }
  componentWillLoad() {
    if (!(window === null || window === void 0 ? void 0 : window.ResizeObserver)) {
      return;
    }
    this.resizeObserver = new window.ResizeObserver(() => this.setTextareaHeight());
  }
  componentDidLoad() {
    if (!(window === null || window === void 0 ? void 0 : window.ResizeObserver)) {
      return;
    }
    this.resizeObserver.observe(this.input);
  }
  setTextareaHeight() {
    if (this.resize === 'auto') {
      this.input.style.height = 'auto';
      this.input.style.height = `${this.input.scrollHeight}px`;
    }
    else {
      this.input.style.height = undefined;
    }
  }
  render() {
    return (h("div", { part: "form-control", class: {
        'form-control': true,
        'form-control--small': this.size === 'small',
        'form-control--medium': this.size === 'medium',
        'form-control--large': this.size === 'large',
      } }, h("sc-form-control", { size: this.size, required: this.required, label: this.label, showLabel: this.showLabel, help: this.help, inputId: this.inputId, helpId: this.helpId, labelId: this.labelId, name: this.name }, h("div", { part: "form-control-input", class: "form-control-input" }, h("div", { part: "base", class: {
        'textarea': true,
        'textarea--small': this.size === 'small',
        'textarea--medium': this.size === 'medium',
        'textarea--large': this.size === 'large',
        'textarea--standard': !this.filled,
        'textarea--filled': this.filled,
        'textarea--disabled': this.disabled,
        'textarea--focused': this.hasFocus,
        'textarea--empty': !this.value,
        'textarea--invalid': this.invalid,
        'textarea--resize-none': this.resize === 'none',
        'textarea--resize-vertical': this.resize === 'vertical',
        'textarea--resize-auto': this.resize === 'auto',
      } }, h("textarea", { part: "textarea", ref: el => (this.input = el), id: "input", class: "textarea__control", name: this.name, value: this.value, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autofocus: this.autofocus, spellcheck: this.spellcheck, enterkeyhint: this.enterkeyhint, inputmode: this.inputmode, "aria-describedby": "help-text", onChange: () => this.handleChange(), onInput: () => this.handleInput(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }))))));
  }
  get el() { return this; }
  static get watchers() { return {
    "rows": ["handleRowsChange"],
    "value": ["handleValueChange"],
    "disabled": ["handleDisabledChange"]
  }; }
  static get style() { return scTextareaCss; }
}, [1, "sc-textarea", {
    "size": [513],
    "name": [1],
    "value": [1],
    "filled": [516],
    "label": [1],
    "showLabel": [4, "show-label"],
    "help": [1, "help-text"],
    "placeholder": [1],
    "rows": [2],
    "resize": [1],
    "disabled": [516],
    "readonly": [516],
    "minlength": [2],
    "maxlength": [2],
    "required": [516],
    "invalid": [516],
    "autocapitalize": [1],
    "autocorrect": [1],
    "autocomplete": [1],
    "autofocus": [4],
    "enterkeyhint": [1],
    "spellcheck": [4],
    "inputmode": [1],
    "hasFocus": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-textarea", "sc-form-control", "sc-tooltip"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-textarea":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScTextarea$1);
      }
      break;
    case "sc-form-control":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-tooltip":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const ScTextarea = ScTextarea$1;
const defineCustomElement = defineCustomElement$1;

export { ScTextarea, defineCustomElement };
