<!-- Semmet Angular: Button Group — https://www.w3.org/TR/wai-aria-1.2/#group -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> label="Opções de visualização" />
<<%= selector %> label="Opções de visualização" [items]="views" [(selectedIds)]="selectedViewIds" />
<<%= selector %> [items]="views">
  <ng-template <%= camelize(name) %>Item let-item let-pressed="pressed">
    {{ item.label }}
  </ng-template>
</<%= selector %>>
-->
<div
  [id]="instanceId"
  [class]="groupClasses()"
  role="group"
  [attr.aria-label]="label()"
>
  @for (item of items(); track item.id) {
    <button
      type="button"
      class="<%= dasherize(name) %>__button"
      [class.<%= dasherize(name) %>__button--pressed]="isPressed(item)"
      [disabled]="disabled() || item.disabled"
      [attr.aria-pressed]="ariaPressed(item)"
      (click)="activate(item)"
    >
      @if (itemTemplate(); as itemSlot) {
        <ng-container
          [ngTemplateOutlet]="itemSlot.templateRef"
          [ngTemplateOutletContext]="{ $implicit: item, pressed: isPressed(item) }"
        />
      } @else {
        {{ item.label }}
      }
    </button>
  }
</div>
