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

Author: BobobUnicorn

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

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

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

@@ -0,0 +1,25 @@
+<cdk-tree [dataSource]="dataSource" [levelAccessor]="levelAccessor">
+  <!-- This is the tree node template for leaf nodes -->
+  <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
+                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 class="example-tree-node">
+    <!-- use a disabled button to provide padding for tree leaf -->
+    <button mat-icon-button disabled></button>
+    {{node.name}}
+  </cdk-tree-node>
+  <!-- This is the tree node template for expandable nodes -->
+  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
+                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 [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-tree-node>
+</cdk-tree>

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

@@ -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 flat nodes
+ */
+@Component({
+  selector: 'cdk-tree-flat-level-accessor-example',
+  templateUrl: 'cdk-tree-flat-level-accessor-example.html',
+  styleUrls: ['cdk-tree-flat-level-accessor-example.css'],
+})
+export class CdkTreeFlatLevelAccessorExample {
+  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.css

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

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

@@ -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.ts

@@ -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/index.ts

@@ -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/tree-data.ts

@@ -0,0 +1,94 @@
+/** Flat node with expandable and level information */
+export interface FlatFoodNode {
+  expandable: boolean;
+  name: string;
+  level: number;
+  isExpanded?: boolean;
+}
+
+export const FLAT_DATA: FlatFoodNode[] = [
+  {
+    name: 'Fruit',
+    expandable: true,
+    level: 0,
+  },
+  {
+    name: 'Apple',
+    expandable: false,
+    level: 1,
+  },
+  {
+    name: 'Banana',
+    expandable: false,
+    level: 1,
+  },
+  {
+    name: 'Fruit loops',
+    expandable: false,
+    level: 1,
+  },
+  {
+    name: 'Vegetables',
+    expandable: true,
+    level: 0,
+  },
+  {
+    name: 'Green',
+    expandable: true,
+    level: 1,
+  },
+  {
+    name: 'Broccoli',
+    expandable: false,
+    level: 2,
+  },
+  {
+    name: 'Brussels sprouts',
+    expandable: false,
+    level: 2,
+  },
+  {
+    name: 'Orange',
+    expandable: true,
+    level: 1,
+  },
+  {
+    name: 'Pumpkins',
+    expandable: false,
+    level: 2,
+  },
+  {
+    name: 'Carrots',
+    expandable: false,
+    level: 2,
+  },
+];
+
+/**
+ * Food data with nested structure.
+ * Each node has a name and an optional list of children.
+ */
+export interface NestedFoodNode {
+  name: string;
+  children?: NestedFoodNode[];
+}
+
+export const NESTED_DATA: NestedFoodNode[] = [
+  {
+    name: 'Fruit',
+    children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}],
+  },
+  {
+    name: 'Vegetables',
+    children: [
+      {
+        name: 'Green',
+        children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
+      },
+      {
+        name: 'Orange',
+        children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
+      },
+    ],
+  },
+];

src/dev-app/tree/tree-demo.html

@@ -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>