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

<<%= selector %> label="Search" type="search" [(value)]="query">
  <ng-template <%= camelize(name) %>Prefix>
    <svg aria-hidden="true" viewBox="0 0 20 20"><path d="M8.5 3a5.5 5.5 0 0 1 4.3 8.9l3.15 3.15-1.4 1.4-3.15-3.15A5.5 5.5 0 1 1 8.5 3Zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z" /></svg>
  </ng-template>
</<%= selector %>>
-->
<label class="<%= dasherize(name) %>__label" [for]="instanceId">
  {{ label() }}
  @if (required()) {
    <span class="<%= dasherize(name) %>__required" aria-hidden="true">*</span>
  }
</label>
<div
  class="<%= dasherize(name) %>"
  [class.<%= dasherize(name) %>--invalid]="hasError()"
  [class.<%= dasherize(name) %>--disabled]="disabled()"
>
  @if (hasPrefix()) {
    <span class="<%= dasherize(name) %>__addon" [id]="instanceId + '-prefix'">
      @if (prefix(); as prefixSlot) {
        <ng-container [ngTemplateOutlet]="prefixSlot.templateRef" />
      }
    </span>
  }
  <input
    [id]="instanceId"
    class="<%= dasherize(name) %>__control"
    [type]="type()"
    [value]="value()"
    [placeholder]="placeholder()"
    [required]="required()"
    [disabled]="disabled()"
    [attr.aria-describedby]="describedBy()"
    [attr.aria-invalid]="hasError()"
    (input)="handleInput($event)"
  />
  @if (hasSuffix()) {
    <span class="<%= dasherize(name) %>__addon" [id]="instanceId + '-suffix'">
      @if (suffix(); as suffixSlot) {
        <ng-container [ngTemplateOutlet]="suffixSlot.templateRef" />
      }
    </span>
  }
  @if (hasAction()) {
    <button
      type="button"
      class="<%= dasherize(name) %>__button"
      [disabled]="disabled()"
      (click)="handleButtonClick($event)"
    >
      {{ buttonLabel() }}
    </button>
  }
</div>
@if (hint()) {
  <p class="<%= dasherize(name) %>__hint" [id]="instanceId + '-hint'">{{ hint() }}</p>
}
@if (hasError()) {
  <p class="<%= dasherize(name) %>__error" [id]="instanceId + '-error'">{{ errorMessage() }}</p>
}
