Tree

<tx-tree ariaLabel="Files" [value]="files" />

<div class="stack">  <div class="row">    <button      txButton      type="button"      severity="secondary"      outlined      label="Expand all"      icon="plus"      (click)="tree.expandAll()"    ></button>    <button      txButton      type="button"      severity="secondary"      outlined      label="Collapse all"      icon="minus"      (click)="tree.collapseAll()"    ></button>  </div>  <tx-tree #tree ariaLabel="Files" [value]="files" [(expandedKeys)]="expanded" />  <span class="hint">Open: {{ expanded().join(', ') || '—' }}</span></div>

<div class="grid">  <div class="stack">    <strong>Single</strong>    <tx-tree      ariaLabel="Files, single selection"      selectionMode="single"      [value]="files"      [(selection)]="single"    />    <span class="hint">Selected: {{ single()?.label ?? '—' }}</span>  </div>  <div class="stack">    <strong>Multiple</strong>    <tx-toggle-switch label="Meta key" [(ngModel)]="meta" />    <tx-tree      ariaLabel="Files, multiple selection"      selectionMode="multiple"      [metaKeySelection]="meta"      [value]="files"      [(selection)]="multiple"    />    <span class="hint">Selected: {{ multipleLabels() }}</span>  </div></div>

<div class="grid">  <div class="stack">    <strong>Whole branches</strong>    <tx-tree      ariaLabel="Files with checkboxes"      selectionMode="checkbox"      [value]="files"      [(selection)]="checked"      [expandedKeys]="['docs', 'work']"    />    <span class="hint">{{ count() }} checked</span>  </div>  <div class="stack">    <strong>Nodes on their own</strong>    <tx-tree      ariaLabel="Files with independent checkboxes"      selectionMode="checkbox"      highlightOnSelect      [propagateSelectionUp]="false"      [propagateSelectionDown]="false"      [value]="files"      [expandedKeys]="['docs', 'work']"    />  </div></div>

<div class="grid">  <div class="stack">    <strong>Lenient</strong>    <tx-tree      ariaLabel="Files, lenient search"      filter      filterPlaceholder="Search files"      [value]="files"    />  </div>  <div class="stack">    <strong>Strict</strong>    <tx-tree      ariaLabel="Files, strict search"      filter      filterMode="strict"      filterPlaceholder="Search files"      [value]="files"    />  </div></div>

<tx-tree    ariaLabel="Folders loaded on demand"    [(value)]="folders"    (nodeExpand)="load($event)"  />

<div class="grid">  <div class="stack">    <strong>Inbox</strong>    <tx-tree      ariaLabel="Inbox"      draggableNodes      droppableNodes      draggableScope="mail"      droppableScope="mail"      [(value)]="inbox"      [expandedKeys]="['today']"      (nodeDrop)="moved($event)"    />  </div>  <div class="stack">    <strong>Archive</strong>    <tx-tree      ariaLabel="Archive"      draggableNodes      droppableNodes      validateDrop      draggableScope="mail"      droppableScope="mail"      [(value)]="archive"      (nodeDrop)="confirmDrop($event)"    />  </div></div>

<tx-tree  class="tree"  ariaLabel="Files with a menu"  selectionMode="single"  [value]="files"  [contextMenu]="items"  [(contextMenuSelection)]="target"/>

<tx-tree ariaLabel="Links" [value]="links" [expandedKeys]="['guides', 'tools']">  <ng-template txTreeHeader><strong>Bookmarks</strong></ng-template>  <ng-template txTreeNode let-node>{{ node.label }}</ng-template>  <ng-template txTreeNode="link" let-node>    <a class="link" [href]="node.data" target="_blank" rel="noopener">{{ node.label }}</a>  </ng-template>  <ng-template txTreeToggleIcon let-expanded>    <tx-icon [name]="expanded ? 'minus' : 'plus'" />  </ng-template>  <ng-template txTreeFooter    ><span class="hint">{{ links.length }} groups</span></ng-template  ></tx-tree>

<div class="grid">  <tx-tree    ariaLabel="Files with events"    selectionMode="single"    [value]="files"    (nodeSelect)="log('Selected ' + $event.node.label)"    (nodeUnselect)="log('Unselected ' + $event.node.label)"    (nodeExpand)="log('Opened ' + $event.node.label)"    (nodeCollapse)="log('Closed ' + $event.node.label)"    (nodeDoubleClick)="log('Double click on ' + $event.node.label)"  />  <ol class="log" aria-live="polite">    @for (line of lines(); track $index) {      <li>{{ line }}</li>    }  </ol></div>

<tx-tree    ariaLabel="Many nodes"    virtualScroll    scrollHeight="320px"    [value]="nodes"    [expandedKeys]="['g0']"  />

<div class="grid">  <div class="stack">    <strong>Mask</strong>    <tx-toggle-switch label="Loading" [(ngModel)]="loading" />    <tx-tree ariaLabel="Files loading" [loading]="loading" [value]="files" />  </div>  <div class="stack">    <strong>Icon</strong>    <tx-tree ariaLabel="Folders loading" loadingMode="icon" [value]="folders" />  </div></div>

<tx-tree    ariaLabel="Files in a scroll area"    scrollHeight="200px"    [value]="files"    [expandedKeys]="['docs', 'work', 'home', 'events', 'movies']"  />

<tx-tree    ariaLabel="Files"    selectionMode="single"    [value]="files"    [expandedKeys]="['docs', 'work']"    [dt]="tokens"  />

<div class="grid">  <tx-tree    ariaLabel="Files with pass-through"    [value]="files"    [expandedKeys]="['docs']"    [pt]="pt"  />  <tx-tree ariaLabel="Unstyled files" unstyled [value]="files" [expandedKeys]="['docs']" /></div>