feat(cdk/tree): move demos back to their own dirs

Author: BobobUnicorn

src/components-examples/cdk/tree/cdk-tree-redesign/cdk-tree-flat-level-accessor-example.css renamed to src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.css

@@ -1,6 +1,6 @@
 import {ArrayDataSource} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
-import {FlatFoodNode, FLAT_DATA} from './tree-data';
+import {FlatFoodNode, FLAT_DATA} from '../tree-data';
 
 /**
  * @title Tree with flat nodes

src/components-examples/cdk/tree/cdk-tree-redesign/cdk-tree-flat-level-accessor-example.html renamed to src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.html

@@ -0,0 +1,4 @@
+.example-tree-node {
+  display: flex;
+  align-items: center;
+}

src/components-examples/cdk/tree/cdk-tree-redesign/cdk-tree-flat-level-accessor-example.ts renamed to src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.ts

@@ -0,0 +1,22 @@
+<cdk-tree [dataSource]="dataSource" [levelAccessor]="levelAccessor">
+  <!-- This is the tree node template for leaf nodes -->
+  <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node">
+    <!-- use a disabled button to provide padding for tree leaf -->
+    <button mat-icon-button disabled></button>
+    {{node.name}}
+  </cdk-nested-tree-node>
+  <!-- This is the tree node template for expandable nodes -->
+  <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasChild"
+                        [isExpandable]="node.expandable"
+                        class="example-tree-node">
+    <button mat-icon-button cdkTreeNodeToggle
+            [attr.aria-label]="'Toggle ' + node.name"
+            (click)="node.isExpanded = !node.isExpanded"
+            [style.visibility]="node.expandable ? 'visible' : 'hidden'">
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{node.isExpanded ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
+    </button>
+    {{node.name}}
+  </cdk-nested-tree-node>
+</cdk-tree>

src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.css

@@ -0,0 +1,42 @@
+import {ArrayDataSource} from '@angular/cdk/collections';
+import {Component} from '@angular/core';
+import {FlatFoodNode, FLAT_DATA} from '../tree-data';
+
+/**
+ * @title Tree with nested nodes
+ */
+@Component({
+  selector: 'cdk-tree-nested-level-accessor-example',
+  templateUrl: 'cdk-tree-nested-level-accessor-example.html',
+  styleUrls: ['cdk-tree-nested-level-accessor-example.css'],
+})
+export class CdkTreeNestedLevelAccessorExample {
+  levelAccessor = (dataNode: FlatFoodNode) => dataNode.level;
+
+  dataSource = new ArrayDataSource(FLAT_DATA);
+
+  hasChild = (_: number, node: FlatFoodNode) => node.expandable;
+
+  getParentNode(node: FlatFoodNode) {
+    const nodeIndex = FLAT_DATA.indexOf(node);
+
+    for (let i = nodeIndex - 1; i >= 0; i--) {
+      if (FLAT_DATA[i].level === node.level - 1) {
+        return FLAT_DATA[i];
+      }
+    }
+
+    return null;
+  }
+
+  shouldRender(node: FlatFoodNode) {
+    let parent = this.getParentNode(node);
+    while (parent) {
+      if (!parent.isExpanded) {
+        return false;
+      }
+      parent = this.getParentNode(parent);
+    }
+    return true;
+  }
+}

src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html

@@ -2,13 +2,24 @@ import {CdkTreeModule} from '@angular/cdk/tree';
 import {NgModule} from '@angular/core';
 import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatIconModule} from '@angular/material/icon';
+import {CdkTreeFlatLevelAccessorExample} from './cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example';
 import {CdkTreeFlatExample} from './cdk-tree-flat/cdk-tree-flat-example';
+import {CdkTreeNestedLevelAccessorExample} from './cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example';
 import {CdkTreeNestedExample} from './cdk-tree-nested/cdk-tree-nested-example';
-import {CdkTreeFlatLevelAccessorExample} from './cdk-tree-redesign/cdk-tree-flat-level-accessor-example';
 
-export {CdkTreeFlatExample, CdkTreeNestedExample, CdkTreeFlatLevelAccessorExample};
+export {
+  CdkTreeFlatExample,
+  CdkTreeNestedExample,
+  CdkTreeFlatLevelAccessorExample,
+  CdkTreeNestedLevelAccessorExample,
+};
 
-const EXAMPLES = [CdkTreeFlatExample, CdkTreeNestedExample, CdkTreeFlatLevelAccessorExample];
+const EXAMPLES = [
+  CdkTreeFlatExample,
+  CdkTreeNestedExample,
+  CdkTreeFlatLevelAccessorExample,
+  CdkTreeNestedLevelAccessorExample,
+];
 
 @NgModule({
   imports: [CdkTreeModule, MatLegacyButtonModule, MatIconModule],

src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts

@@ -19,6 +19,10 @@
     <mat-expansion-panel-header>CDK Nested tree</mat-expansion-panel-header>
     <cdk-tree-nested-example></cdk-tree-nested-example>
   </mat-expansion-panel>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>CDK Nested tree (levelAccessor)</mat-expansion-panel-header>
+    <cdk-tree-nested-level-accessor-example></cdk-tree-nested-level-accessor-example>
+  </mat-expansion-panel>
   <mat-expansion-panel>
     <mat-expansion-panel-header>Todo list tree</mat-expansion-panel-header>
     <tree-checklist-example></tree-checklist-example>