64 lines
2.0 KiB
HTML
64 lines
2.0 KiB
HTML
<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>
|