feat(design): add deep tree example (#3067)

Author: griest024

apps/design-land/src/app/tree/tree.component.html

@@ -19,5 +19,9 @@ <h3>Basic Tree</h3>
 <design-land-example-viewer-container example="basic-tree">
 </design-land-example-viewer-container>
 
+<h3>Deep Tree</h3>
+<design-land-example-viewer-container example="deep-tree">
+</design-land-example-viewer-container>
+
 <h2>Accessibility</h2>
 <p>The <code>DaffTreeComponent</code> follows the specification for a <a href="https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/" target="_blank">disclosure navigation menu</a> instead of a <a href="https://www.w3.org/WAI/ARIA/apg/patterns/treeview/" target="_blank">tree view</a>.</p>

libs/design/tree/examples/src/deep-tree/deep-tree.component.html

@@ -0,0 +1,10 @@
+<ul daff-tree [tree]="tree">
+	<ng-template #daffTreeItemWithChildrenTpl let-node>
+			<button daffTreeItem [node]="node">{{ node.title }} </button>
+	</ng-template>
+	
+	<ng-template #daffTreeItemTpl let-node>
+			<a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
+	</ng-template>
+</ul>
+

libs/design/tree/examples/src/deep-tree/deep-tree.component.ts

@@ -0,0 +1,59 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import {
+  DaffTreeData,
+  DaffTreeModule,
+} from '@daffodil/design/tree';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'deep-tree',
+  templateUrl: './deep-tree.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DaffTreeModule, RouterLink],
+})
+export class DeepTreeComponent {
+  tree: DaffTreeData<unknown> = {
+    title: 'Root',
+    items: [
+      {
+        title: 'Example Children',
+        items: [
+          {
+            title: 'Example Child',
+            url: '#',
+            id: '',
+            items: [
+              {
+                title: 'Nested Child',
+                url: '#',
+                id: '',
+                items: [],
+                data: {},
+              },
+            ],
+            data: {},
+          },
+        ],
+        url: '#',
+        id: '',
+        data: {},
+      },
+      {
+        title: 'Example Link',
+        items: [],
+        url: '#',
+        id: '',
+        data: {},
+      },
+    ],
+    url: '',
+    id: '',
+    data: {},
+  };
+}

libs/design/tree/examples/src/public_api.ts

@@ -1,7 +1,12 @@
 import { BasicTreeComponent } from './basic-tree/basic-tree.component';
+import { DeepTreeComponent } from './deep-tree/deep-tree.component';
 
-export { BasicTreeComponent  };
+export {
+  BasicTreeComponent,
+  DeepTreeComponent,
+};
 
 export const TREE_EXAMPLES = [
   BasicTreeComponent,
+  DeepTreeComponent,
 ];