import { html } from "lit";
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";
import elementStyles from './TextField.styles.js';
export default class TextFieldElement extends Input {
    static get styles() {
        return elementStyles;
    }
    renderInput() {
        const placeholderValue = this.placeholder || undefined;
        const maxValue = this.max || undefined;
        const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined;
        const minValue = this.min || 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 `
    <input 
      class="input" 
      style=${styleMap(style)}
      type=${this.effectiveType} 
      name="${ifDefined(this.name)}" 
      .value=${live(this.getInputValue())}
      max=${ifDefined(maxValue)}
      maxlength=${ifDefined(maxLengthValue)}
      min=${ifDefined(minValue)}
      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)}"
      size="${ifDefined(this.size)}"
      results="${ifDefined(this.results)}"
      accept="${ifDefined(this.accept)}"
      ?multiple="${this.multiple}"
      spellcheck="${ifDefined(this.spellcheck)}"
      list="input-list"
      @change=${this.retargetEvent}
      @input=${this.handleInput}
      @select=${this.retargetEvent}
      @invalid=${this.invalidHandler}
      @search="${this.retargetEvent}"
      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)}
    />
    `;
    }
}
//# sourceMappingURL=TextFieldElement.js.map