<div
  (click)="toggle()"
  (keydown.enter)="toggle()"
  (keydown.space)="$event.preventDefault(); toggle()"
  role="button"
  tabindex="0"
  [attr.aria-expanded]="isExpanded()"
  class="collapsible-header sub-section-heading"
>
  <mat-icon class="collapsible-expand-icon">expand_more</mat-icon>

  <div class="collapsible-title">{{ to.label || '' | translate }}</div>
</div>

@if (isExpanded()) {
  <div
    class="collapsible-panel ani-expand-collapse"
    [@expand]
    [@.disabled]="!isAnimationEnabled()"
  >
    @for (field of field.fieldGroup; track field.id) {
      <formly-field [field]="field"></formly-field>
    }
  </div>
}
