<div class="ucap-group-expansion-container" fxFlexFill>
  <cdk-virtual-scroll-viewport #cvsvList perfectScrollbar fxFlexFill>
    <ng-container
      *cdkVirtualFor="
        let node of dataSource.expandedData$;
        templateCacheSize: 0
      "
    ></ng-container>

    <mat-tree #treeList [dataSource]="dataSource" [treeControl]="treeControl">
      <mat-tree-node
        *matTreeNodeDef="let node"
        [attr.node-type]="node?.nodeType"
        matRipple
      >
        <li>
          <div>
            <ng-container
              [ngTemplateOutlet]="nodeTemplate"
              [ngTemplateOutletContext]="{ $implicit: node?.node }"
            ></ng-container>
          </div>
        </li>
      </mat-tree-node>

      <mat-tree-node
        *matTreeNodeDef="let node; when: isHeader"
        class="tree-node-frame ucap-clickable"
        [attr.node-type]="node?.nodeType"
        matRipple
      >
        <li class="tree-node-header" matTreeNodeToggle>
          <div class="path">
            <button
              mat-icon-button
              [attr.aria-label]="'toggle '"
              class="btn-toggle"
            >
              <mat-icon class="mat-icon-rtl-mirror">
                {{
                  treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'
                }}
              </mat-icon>
            </button>
            <div class="group-info">
              <ng-container
                [ngTemplateOutlet]="headerTemplate"
                [ngTemplateOutletContext]="{ $implicit: node?.node }"
              >
              </ng-container>
            </div>
          </div>
          <ul [class.group-tree-node-invisible]="!treeControl.isExpanded(node)">
            <div *ngIf="treeControl.isExpanded(node)" class="boxnone">
              <div class="vertical-line"></div>
              <ng-container matTreeNodeOutlet></ng-container>
            </div>
          </ul>
        </li>
      </mat-tree-node>
    </mat-tree>
  </cdk-virtual-scroll-viewport>
</div>
