wip: tree demo

Author: wagnermaciel

src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.css

@@ -0,0 +1,35 @@
+.example-tree-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.example-tree-output {
+  padding: 10px;
+  margin-bottom: 16px;
+  border: 1px solid var(--mat-sys-outline);
+  border-radius: var(--mat-sys-corner-extra-small);
+}
+
+.example-tree {
+  padding: 10px;
+  border: 1px solid var(--mat-sys-outline);
+  border-radius: var(--mat-sys-corner-extra-small);
+}
+
+.example-tree-item {
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+}
+
+.example-tree-item-content {
+  display: flex;
+  align-items: center;
+  padding: 2px 0; /* Minimal padding for item itself */
+}
+
+.example-tree-item-icon {
+  margin-right: 8px;
+}

src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.html

@@ -0,0 +1,22 @@
+<ul cdkTree>
+  @for (node of treeData; track node) {
+    <ng-template [ngTemplateOutlet]="treeNode" [ngTemplateOutletContext]="{node}"></ng-template>
+  }
+</ul>
+
+<ng-template #treeNode let-node>
+  <li cdkTreeItem [value]="node.value">
+    @if (node.children) {
+      <ul cdkTreeItemGroup [value]="node.value">
+        <ng-template cdkTreeItemGroupContent>
+          @for (child of node.children; track child) {
+            <ng-template
+              [ngTemplateOutlet]="treeNode"
+              [ngTemplateOutletContext]="{node: child}"
+            ></ng-template>
+          }
+        </ng-template>
+      </ul>
+    }
+  </li>
+</ng-template>

src/components-examples/cdk-experimental/tree/cdk-tree-single-select/cdk-tree-single-select-example.ts

@@ -0,0 +1,52 @@
+import {Component} from '@angular/core';
+import {NgTemplateOutlet} from '@angular/common';
+import {
+  CdkTree,
+  CdkTreeItem,
+  CdkTreeItemGroup,
+  CdkTreeItemGroupContent,
+} from '@angular/cdk-experimental/tree';
+
+/** @title Tree using CdkTree and CdkTreeItem. */
+@Component({
+  selector: 'cdk-tree-single-select-example',
+  exportAs: 'cdkTreeSingleSelectExample',
+  templateUrl: 'cdk-tree-single-select-example.html',
+  styleUrl: 'cdk-tree-single-select-example.css',
+  imports: [CdkTree, CdkTreeItem, CdkTreeItemGroup, CdkTreeItemGroupContent, NgTemplateOutlet],
+})
+export class CdkTreeSingleSelectExample {
+  treeData = [
+    {
+      value: 'Fruits',
+      children: [{value: 'Apple'}, {value: 'Banana'}, {value: 'Cherry'}],
+    },
+    {
+      value: 'Vegetables',
+      children: [{value: 'Asparagus'}, {value: 'Broccoli'}, {value: 'Carrot'}],
+    },
+    {
+      value: 'Meat',
+      children: [
+        {
+          value: 'Red Meat',
+          children: [{value: 'Beef'}, {value: 'Goat'}, {value: 'Pork'}],
+        },
+        {
+          value: 'Poultry',
+          children: [{value: 'Chicken'}, {value: 'Turkey'}],
+        },
+        {
+          value: 'Seafood',
+          children: [
+            {value: 'Bass'},
+            {value: 'Crab'},
+            {value: 'Lobster'},
+            {value: 'Oyster'},
+            {value: 'Shrimp'},
+          ],
+        },
+      ],
+    },
+  ];
+}

src/components-examples/cdk-experimental/tree/index.ts

@@ -1 +1,2 @@
 export {CdkTreeExample} from './cdk-tree/cdk-tree-example';
+export {CdkTreeSingleSelectExample} from './cdk-tree-single-select/cdk-tree-single-select-example';

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

@@ -1,4 +1,9 @@
 <div>
+  <h4>Single Select</h4>
+  <cdk-tree-single-select-example></cdk-tree-single-select-example>
+</div>
+
+<!-- <div>
   <h4>Tree View using UI Patterns</h4>
   <cdk-tree-example></cdk-tree-example>
-</div>
+</div> -->

src/dev-app/cdk-experimental-tree/cdk-tree-demo.ts

@@ -7,11 +7,11 @@
  */
 
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {CdkTreeExample} from '@angular/components-examples/cdk-experimental/tree';
+import {CdkTreeSingleSelectExample} from '@angular/components-examples/cdk-experimental/tree';
 
 @Component({
   templateUrl: 'cdk-tree-demo.html',
-  imports: [CdkTreeExample],
+  imports: [CdkTreeSingleSelectExample],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CdkExperimentalTreeDemo {}