<!-- Semmet Angular: Input — https://www.w3.org/WAI/tutorials/forms/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> label="Email address" [(value)]="email" [required]="true" />
-->
<div class="<%= dasherize(name) %>">
  <label [for]="controlId()">
    {{ label() }}
    @if (required()) {
      <span aria-hidden="true">*</span>
    }
  </label>

  <input
    [id]="controlId()"
    [type]="inputType()"
    [value]="value()"
    [placeholder]="placeholder()"
    [autocomplete]="autocomplete()"
    [required]="required()"
    [disabled]="disabled()"
    [readOnly]="readOnly()"
    [attr.aria-required]="required() ? 'true' : null"
    [attr.aria-invalid]="error() ? 'true' : null"
    [attr.aria-describedby]="describedBy()"
    (input)="updateValue($event)"
  />

  @if (hint()) {
    <p class="<%= dasherize(name) %>__hint" [id]="hintId()">{{ hint() }}</p>
  }

  @if (error()) {
    <p class="<%= dasherize(name) %>__error" [id]="errorId()" role="alert">{{ error() }}</p>
  }
</div>
