<digi-util-detect-focus-outside (afOnFocusOutside)="closePanel()">
  <digi-util-keydown-handler (afOnEsc)="closePanelAndFocusControlToggleBtn()">
    <section class="tree-nodes-selector-panel">
      <header>
        <h2 class="tree-nodes-selector-panel__heading">{{headingText}}</h2>
        <p class="msfa__a11y-sr-only">
          I den här kontrollen kan du välja flera olika alternativ genom att fylla i kryssrutor som listas hierarkiskt
          nedan. Du kan stänga kontrollen genom att trycka Escape.
        </p>
        <button
          *ngIf="hasSelectedDescendant(pendingRootNode)"
          class="tree-nodes-selector-panel__clear-btn"
          type="button"
          aria-label="ta bort samtliga val bland alternativen nedan"
          (click)="clearSelections()"
        >
          Rensa
        </button>
      </header>
      <div class="tree-nodes-selector-panel__content" *ngIf="pendingRootNode">
        <div class="tree-nodes-selector-panel__tree">
          <msfa-expanded-tree-node
            [headingText]="pendingRootNode.label"
            [treeNodeModel]="pendingRootNode"
            [visibleChildren]="visibleChildren"
            (selectedNodesChanged)="updateExpandedChildPanel($event)"
            (filterVisibleChildrenRequested)="updateVisibleChildren($event)"
          ></msfa-expanded-tree-node>
        </div>
      </div>
      <footer>
        <digi-button
          [attr.af-aria-label]="'Bekräftar dina val och stänger kontrollen'"
          [attr.af-type]="'button'"
          [attr.af-size]="ButtonSize.S"
          (afOnClick)="closePanelAndFocusControlToggleBtn()"
        >
          {{confirmationButtonText}}
        </digi-button>
      </footer>
    </section>
  </digi-util-keydown-handler>
</digi-util-detect-focus-outside>
