import { __decorate } from "tslib";
import { html } from "lit";
import { property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { live } from "lit/directives/live.js";
import { styleMap } from "lit/directives/style-map.js";
import Input from "./Input.js";
export default class TextAreaElement extends Input {
    connectedCallback() {
        super.connectedCallback();
        this.setAttribute('aria-multiline', 'true');
    }
    renderInput() {
        const placeholderValue = this.placeholder || undefined;
        const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined;
        const minLengthValue = this.minLength > -1 ? this.minLength : undefined;
        const patternValue = this.pattern || undefined;
        const roleValue = this.dataRole || undefined;
        const stepValue = this.step || undefined;
        const { disabled } = this;
        const style = {};
        if (this.textDirection) {
            style.direction = this.textDirection;
        }
        const ariaActiveDescendantValue = this.ariaActiveDescendant || undefined;
        const ariaAutoCompleteValue = this.ariaAutoComplete || undefined;
        const ariaControlsValue = this.ariaControls || undefined;
        const ariaDescribedByValue = this.getAriaDescribedBy() || undefined;
        const ariaExpandedValue = this.ariaExpanded || undefined;
        const ariaLabelValue = this.ariaLabel || this.label || undefined;
        const ariaLabelledByValue = this.ariaLabelledBy || undefined;
        return html `
    <textarea
      class="input"
      style=${styleMap(style)}
      name="${ifDefined(this.name)}" 
      .value=${live(this.getInputValue())}
      maxlength=${ifDefined(maxLengthValue)}
      minlength=${ifDefined(minLengthValue)}
      pattern=${ifDefined(patternValue)}
      placeholder=${ifDefined(placeholderValue)}
      role=${ifDefined(roleValue)}
      ?disabled=${disabled}
      ?readonly=${this.readOnly}
      ?required=${this.required}
      step=${ifDefined(stepValue)}
      autocomplete="${ifDefined(this.autocomplete)}"
      autocapitalize="${ifDefined(this.autocapitalize)}"
      autocorrect="${ifDefined(this.autocorrect)}"
      inputmode="${ifDefined(this.inputMode)}"
      cols="${ifDefined(this.cols)}"
      rows="${ifDefined(this.rows)}"
      wrap="${ifDefined(this.wrap)}"
      spellcheck="${ifDefined(this.spellcheck)}"
      @change=${this.retargetEvent}
      @input=${this.handleInput}
      @select=${this.retargetEvent}
      @invalid=${this.invalidHandler}
      aria-activedescendant=${ifDefined(ariaActiveDescendantValue)}
      aria-autocomplete=${ifDefined(ariaAutoCompleteValue)}
      aria-controls=${ifDefined(ariaControlsValue)}
      aria-describedby=${ifDefined(ariaDescribedByValue)}
      aria-expanded=${ifDefined(ariaExpandedValue)}
      aria-invalid=${this.getError()}
      aria-label=${ifDefined(ariaLabelValue)}
      aria-labelledby=${ifDefined(ariaLabelledByValue)}
    ></textarea>
    `;
    }
}
__decorate([
    property({ type: Number })
], TextAreaElement.prototype, "cols", void 0);
__decorate([
    property({ type: Number })
], TextAreaElement.prototype, "rows", void 0);
__decorate([
    property({ type: String })
], TextAreaElement.prototype, "wrap", void 0);
//# sourceMappingURL=TextAreaElement.js.map