<!-- Semmet Angular: Disclosure — https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> and <%= classify(name) %>Content in that parent component.

<<%= selector %> label="Show profile details" [(expanded)]="profileDetailsOpen">
  <ng-template <%= camelize(name) %>Content>
    <app-profile-details [userId]="userId()" (saved)="reload()" />
  </ng-template>
</<%= selector %>>

Set [preserveContent]="false" on <<%= selector %>> to destroy hidden content.
-->
<button
  type="button"
  [attr.aria-expanded]="expanded()"
  [attr.aria-controls]="instanceId + '-panel'"
  [id]="instanceId + '-button'"
  (click)="toggle()"
>
  {{ label() }}
</button>
<div
  [id]="instanceId + '-panel'"
  [attr.aria-labelledby]="instanceId + '-button'"
  [hidden]="!expanded()"
>
  @if (content(); as panel) {
    @if (shouldRender()) {
      <ng-container [ngTemplateOutlet]="panel.templateRef" />
    }
  }
</div>
