<digi-util-detect-focus-outside (afOnFocusOutside)="closePanel()">
  <digi-util-keydown-handler (afOnEsc)="closePanel()">
    <section class="tree-nodes-selector-panel" #treeNodesSelectorPanel>
      <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">
        <ul class="tree-nodes-selector-panel__expanded-nodes" aria-hidden="true" *ngIf="expandedTreeNodes">
          <li class="tree-nodes-selector-panel__expanded-node" *ngFor="let node of expandedTreeNodes">
            <msfa-expanded-tree-node
              [treeNodeModel]="node"
              [latestParentActionKey]="latestParentActionKey"
              (filterTreeNodeRequested)="filterTreeNode($event)"
              (clickAndFocusElementRequested)="clickAndFocusElementByQuerySelector($event)"
            ></msfa-expanded-tree-node>
          </li>
        </ul>
        <div class="msfa__a11y-sr-only">
          <ng-container
            [ngTemplateOutlet]="nodeTemplate"
            [ngTemplateOutletContext]="{node: pendingRootNode}"
          ></ng-container>
        </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)="closePanel()"
        >
          {{confirmationButtonText}}
        </digi-button>
      </footer>
      <ng-template #nodeTemplate let-node="node">
        <div class="tree-nodes-selector-panel__level">
          <h3 class="tree-nodes-selector-panel__heading">{{node.label}}</h3>
          <digi-form-checkbox
            *ngIf="hasChildLeafNodes(node)"
            [attr.af-id]="getToggleAllButtonId(node)"
            [attr.af-label]="node.selectAllChildrenLabel"
            [attr.af-aria-labelledby]="'toggle-all-description-'+node.uuid"
            [attr.af-checked]="allChildLeafNodesAreSelected(node)"
            (afOnChange)="toggleAllChildLeafNodes(node)"
            (afOnFocus)="setFocusOnToggleAll(node, true)"
            (afOnBlur)="setFocusOnToggleAll(node, false)"
          ></digi-form-checkbox>
          <div [attr.af-id]="'toggle-all-description-'+node.uuid">{{getAriaLabelForToggleAllButton(node)}}</div>
          <ul *ngIf="getVisibleChildren(node) as visibleChildren" class="tree-nodes-selector-panel__nodes">
            <li
              *ngFor="let childNode of visibleChildren"
              class="tree-nodes-selector-panel__node"
              [ngClass]="{'tree-nodes-selector-panel__node--expanded': isExpandedNode(node, childNode)}"
            >
              <ng-container
                [ngTemplateOutlet]="childNode.children ? nodeExpansionTemplate : nodeCheckboxTemplate"
                [ngTemplateOutletContext]="{node: childNode, parentNode: node}"
              >
              </ng-container>
            </li>
          </ul>
        </div>
      </ng-template>
      <ng-template #nodeCheckboxTemplate let-node="node">
        <digi-form-checkbox
          [attr.af-id]="'item-'+node.uuid"
          [attr.af-label]="node.label"
          [attr.af-checked]="node.isSelected"
          [attr.af-value]="node.value"
          (afOnChange)="onToggleSelected(node, $event)"
          (afOnFocus)="setFocusOnNodeItem(node, true)"
          (afOnBlur)="setFocusOnNodeItem(node, false)"
        ></digi-form-checkbox>
      </ng-template>
      <ng-template #nodeExpansionTemplate let-node="node" let-parentNode="parentNode">
        <button
          type="button"
          [attr.id]="getItemButtonId(node)"
          [attr.aria-label]="getAriaLabelTextForExpansionButton(parentNode, node)"
          (click)="setExpandedChild(parentNode, node)"
          (focus)="setFocusOnNodeItem(node, true)"
          (blur)="setFocusOnNodeItem(node, false)"
        >
          {{node.label}}
        </button>
        <ng-container
          *ngIf="isExpandedNode(parentNode, node)"
          [ngTemplateOutlet]="nodeTemplate"
          [ngTemplateOutletContext]="{node: node}"
        >
        </ng-container>
      </ng-template>
    </section>
  </digi-util-keydown-handler>
</digi-util-detect-focus-outside>
