<!-- Semmet Angular: Currency Input — https://www.w3.org/WAI/tutorials/forms/ -->
<!--
Uso a partir do template de um componente pai:
Importe <%= classify(name) %> nesse componente pai.

<<%= selector %>
  label="Valor da transferência"
  currencyCode="BRL"
  currencyLabel="Real brasileiro"
  [(value)]="amount"
  [required]="true"
/>
-->
<div class="<%= dasherize(name) %>">
  <label [for]="controlId()">
    {{ label() }}
    @if (required()) {
      <span aria-hidden="true">*</span>
    }
  </label>

  <div class="<%= dasherize(name) %>__control">
    <span class="<%= dasherize(name) %>__prefix" aria-hidden="true">{{ currencyCode() }}</span>
    <span class="visually-hidden" [id]="currencyId()">Moeda: {{ currencyLabel() }}.</span>

    <input
      [id]="controlId()"
      type="text"
      [inputMode]="inputMode()"
      [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)"
    />
  </div>

  @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>
