<div class="tree-nodes-selector">
  <div class="msfa__backdrop" *ngIf="displayPanel" (click)="onClickOutsidePanel()"></div>
  <div class="tree-nodes-selector__panel-wrapper">
    <button
      #togglePanelBtn
      (click)="togglePanel()"
      [attr.id]="buttonElementId"
      [attr.aria-controls]="panelId"
      [attr.aria-expanded]="displayPanel"
      [ngClass]="{'tree-nodes-selector__toggle-panel-btn--invalid': isInvalid && showValidation}"
      type="button"
      class="tree-nodes-selector__toggle-panel-btn"
    >
      <span class="tree-nodes-selector__toggle-panel-btn__text">{{selectionLabel}}</span>
      <digi-icon-arrow-down
        aria-hidden="true"
        class="tree-nodes-selector__toggle-panel-btn__arrow-down"
      ></digi-icon-arrow-down>
      <span class="msfa__a11y-sr-only">
        Klicka här för att öppna en kontroll där du kan välja mellan ett flertal alternativ i en hierarkisk struktur.
      </span>
    </button>
    <div [attr.id]="panelId">
      <msfa-tree-nodes-selector-panel
        class="tree-nodes-selector__panel"
        *ngIf="displayPanel && rootNode"
        [rootNode]="rootNode"
        [headingText]="headingText"
        [confirmationButtonText]="confirmationButtonText"
        (selectedChangesConfirmed)="updateTreeNodeSelectorWithSelectedChanges($event)"
        (closePanelRequested)="closePanel()"
        (focusControlToggleBtnRequested)="focusControlToggleBtn()"
      >
      </msfa-tree-nodes-selector-panel>
    </div>
  </div>

  <div aria-atomic="true" role="alert">
    <ul class="tree-nodes-selector__validation-messages" *ngIf="showValidation && validationMessages">
      <li *ngFor="let validationMessage of validationMessages">
        <digi-form-validation-message af-variation="error"> {{validationMessage}} </digi-form-validation-message>
      </li>
    </ul>
  </div>
</div>
