main - 52cad9c docs(cdk/tree): fix several live example issues (#29875)

crisbeto · crisbeto · commit fbb05b58677a · 2024-10-14T16:00:55.000Z
diff --git a/cdk/tree/index.d.ts b/cdk/tree/index.d.ts
@@ -77,7 +77,7 @@ export declare class CdkTreeFlatLevelAccessorExample {
 }
 
 /**
- * @title Tree with nested nodes, using childAccessor
+ * @title Tree with nested nodes using childAccessor
  */
 export declare class CdkTreeNestedChildrenAccessorExample {
     tree: CdkTree<NestedFoodNode>;
@@ -102,7 +102,7 @@ export declare class CdkTreeNestedExample {
 }
 
 /**
- * @title Tree with nested nodes
+ * @title Tree with nested nodes and level accessor
  */
 export declare class CdkTreeNestedLevelAccessorExample {
     tree: CdkTree<FlatFoodNode>;
diff --git a/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example-css.html b/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example-css.html
@@ -16,3 +16,7 @@
 <span class="hljs-selector-class">.example-tree-node</span> <span class="hljs-selector-class">.example-tree-node</span> {
   <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">40px</span>;
 }
+
+<span class="hljs-selector-class">.example-toggle</span> {
+  <span class="hljs-attribute">vertical-align</span>: middle;
+}
diff --git a/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example-html.html b/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example-html.html
@@ -8,12 +8,15 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-nested-tree-node</span>&gt;</span>
   <span class="hljs-comment">&lt;!-- This is the tree node template for expandable nodes --&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">cdk-nested-tree-node</span> #<span class="hljs-attr">treeNode</span>=<span class="hljs-string">&quot;cdkNestedTreeNode&quot;</span>
-      <span class="hljs-attr">cdkTreeNodeToggle</span>
-      *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node; when: hasChild&quot;</span>
-      [<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
-      <span class="hljs-attr">isExpandable</span>
-      <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-node&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span> <span class="hljs-attr">cdkTreeNodeToggle</span>&gt;</span>
+    *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node; when: hasChild&quot;</span>
+    [<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
+    <span class="hljs-attr">isExpandable</span>
+    <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-node&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span>
+      <span class="hljs-attr">mat-icon-button</span>
+      <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-toggle&quot;</span>
+      [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span>
+      <span class="hljs-attr">cdkTreeNodeToggle</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-icon-rtl-mirror&quot;</span>&gt;</span>
         {{tree.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
       <span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
diff --git a/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example-ts.html b/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example-ts.html
@@ -17,7 +17,7 @@
 }
 
 <span class="hljs-comment">/**
- * <span class="hljs-doctag">@title </span>Tree with nested nodes, using childAccessor
+ * <span class="hljs-doctag">@title </span>Tree with nested nodes using childAccessor
  */</span>
 <span class="hljs-meta">@Component</span>({
   <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;cdk-tree-nested-children-accessor-example&#x27;</span>,
diff --git a/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example-css.html b/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example-css.html
@@ -16,3 +16,7 @@
 <span class="hljs-selector-class">.example-tree-node</span> <span class="hljs-selector-class">.example-tree-node</span> {
   <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">40px</span>;
 }
+
+<span class="hljs-selector-class">.example-toggle</span> {
+  <span class="hljs-attribute">vertical-align</span>: middle;
+}
diff --git a/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example-html.html b/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example-html.html
@@ -7,13 +7,17 @@
     {{node.name}}
   <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-nested-tree-node</span>&gt;</span>
   <span class="hljs-comment">&lt;!-- This is the tree node template for expandable nodes --&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">cdk-nested-tree-node</span> #<span class="hljs-attr">treeNode</span>=<span class="hljs-string">&quot;cdkNestedTreeNode&quot;</span>
-      <span class="hljs-attr">cdkTreeNodeToggle</span>
-      [<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
-      *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node; when: hasChild&quot;</span>
-      <span class="hljs-attr">isExpandable</span>
-      <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-node&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span> <span class="hljs-attr">cdkTreeNodeToggle</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">cdk-nested-tree-node</span>
+    #<span class="hljs-attr">treeNode</span>=<span class="hljs-string">&quot;cdkNestedTreeNode&quot;</span>
+    [<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
+    *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node; when: hasChild&quot;</span>
+    <span class="hljs-attr">isExpandable</span>
+    <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-node&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span>
+      <span class="hljs-attr">mat-icon-button</span>
+      <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-toggle&quot;</span>
+      [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span>
+      <span class="hljs-attr">cdkTreeNodeToggle</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-icon-rtl-mirror&quot;</span>&gt;</span>
         {{tree.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
       <span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
diff --git a/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example-ts.html b/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example-ts.html
@@ -6,7 +6,7 @@
 <span class="hljs-keyword">import</span> {FLAT_DATA, FlatFoodNode} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../tree-data&#x27;</span>;
 
 <span class="hljs-comment">/**
- * <span class="hljs-doctag">@title </span>Tree with nested nodes
+ * <span class="hljs-doctag">@title </span>Tree with nested nodes and level accessor
  */</span>
 <span class="hljs-meta">@Component</span>({
   <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;cdk-tree-nested-level-accessor-example&#x27;</span>,
diff --git a/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested/cdk-tree-nested-example-css.html b/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested/cdk-tree-nested-example-css.html
@@ -15,3 +15,7 @@
 <span class="hljs-selector-class">.example-tree-node</span> <span class="hljs-selector-class">.example-tree-node</span> {
   <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">40px</span>;
 }
+
+<span class="hljs-selector-class">.example-toggle</span> {
+  <span class="hljs-attribute">vertical-align</span>: middle;
+}
diff --git a/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested/cdk-tree-nested-example-html.html b/docs-content/examples-highlighted/cdk/tree/cdk-tree-nested/cdk-tree-nested-example-html.html
@@ -8,12 +8,15 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-nested-tree-node</span>&gt;</span>
   <span class="hljs-comment">&lt;!-- This is the tree node template for expandable nodes --&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">cdk-nested-tree-node</span> #<span class="hljs-attr">treeNode</span>=<span class="hljs-string">&quot;cdkNestedTreeNode&quot;</span>
-      <span class="hljs-attr">cdkTreeNodeToggle</span>
-      [<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
-      *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node; when: hasChild&quot;</span>
-      <span class="hljs-attr">isExpandable</span>
-      <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-node&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span> <span class="hljs-attr">cdkTreeNodeToggle</span>&gt;</span>
+    [<span class="hljs-attr">cdkTreeNodeTypeaheadLabel</span>]=<span class="hljs-string">&quot;node.name&quot;</span>
+    *<span class="hljs-attr">cdkTreeNodeDef</span>=<span class="hljs-string">&quot;let node; when: hasChild&quot;</span>
+    <span class="hljs-attr">isExpandable</span>
+    <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-node&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span>
+      <span class="hljs-attr">mat-icon-button</span>
+      <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-toggle&quot;</span>
+      [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span>
+      <span class="hljs-attr">cdkTreeNodeToggle</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-icon-rtl-mirror&quot;</span>&gt;</span>
         {{treeControl.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
       <span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
diff --git a/docs-content/examples-source/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.css b/docs-content/examples-source/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.css
@@ -16,3 +16,7 @@
 .example-tree-node .example-tree-node {
   padding-left: 40px;
 }
+
+.example-toggle {
+  vertical-align: middle;
+}
diff --git a/docs-content/examples-source/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.html b/docs-content/examples-source/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.html
@@ -8,12 +8,15 @@
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
-      cdkTreeNodeToggle
-      *cdkTreeNodeDef="let node; when: hasChild"
-      [cdkTreeNodeTypeaheadLabel]="node.name"
-      isExpandable
-      class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+    *cdkTreeNodeDef="let node; when: hasChild"
+    [cdkTreeNodeTypeaheadLabel]="node.name"
+    isExpandable
+    class="example-tree-node">
+    <button
+      mat-icon-button
+      class="example-toggle"
+      [attr.aria-label]="'Toggle ' + node.name"
+      cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
diff --git a/docs-content/examples-source/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts b/docs-content/examples-source/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts
@@ -17,7 +17,7 @@ function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] {
 }
 
 /**
- * @title Tree with nested nodes, using childAccessor
+ * @title Tree with nested nodes using childAccessor
  */
 @Component({
   selector: 'cdk-tree-nested-children-accessor-example',
diff --git a/docs-content/examples-source/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.css b/docs-content/examples-source/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.css
@@ -16,3 +16,7 @@
 .example-tree-node .example-tree-node {
   padding-left: 40px;
 }
+
+.example-toggle {
+  vertical-align: middle;
+}
diff --git a/docs-content/examples-source/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html b/docs-content/examples-source/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html
@@ -7,13 +7,17 @@
     {{node.name}}
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
-  <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
-      cdkTreeNodeToggle
-      [cdkTreeNodeTypeaheadLabel]="node.name"
-      *cdkTreeNodeDef="let node; when: hasChild"
-      isExpandable
-      class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+  <cdk-nested-tree-node
+    #treeNode="cdkNestedTreeNode"
+    [cdkTreeNodeTypeaheadLabel]="node.name"
+    *cdkTreeNodeDef="let node; when: hasChild"
+    isExpandable
+    class="example-tree-node">
+    <button
+      mat-icon-button
+      class="example-toggle"
+      [attr.aria-label]="'Toggle ' + node.name"
+      cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
diff --git a/docs-content/examples-source/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts b/docs-content/examples-source/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts
@@ -6,7 +6,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {FLAT_DATA, FlatFoodNode} from '../tree-data';
 
 /**
- * @title Tree with nested nodes
+ * @title Tree with nested nodes and level accessor
  */
 @Component({
   selector: 'cdk-tree-nested-level-accessor-example',
diff --git a/docs-content/examples-source/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.css b/docs-content/examples-source/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.css
@@ -15,3 +15,7 @@
 .example-tree-node .example-tree-node {
   padding-left: 40px;
 }
+
+.example-toggle {
+  vertical-align: middle;
+}
diff --git a/docs-content/examples-source/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html b/docs-content/examples-source/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html
@@ -8,12 +8,15 @@
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
-      cdkTreeNodeToggle
-      [cdkTreeNodeTypeaheadLabel]="node.name"
-      *cdkTreeNodeDef="let node; when: hasChild"
-      isExpandable
-      class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+    [cdkTreeNodeTypeaheadLabel]="node.name"
+    *cdkTreeNodeDef="let node; when: hasChild"
+    isExpandable
+    class="example-tree-node">
+    <button
+      mat-icon-button
+      class="example-toggle"
+      [attr.aria-label]="'Toggle ' + node.name"
+      cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
diff --git a/fesm2022/cdk/tree.mjs b/fesm2022/cdk/tree.mjs
diff --git a/fesm2022/cdk/tree.mjs.map b/fesm2022/cdk/tree.mjs.map
diff --git a/fesm2022/components-examples.mjs b/fesm2022/components-examples.mjs
diff --git a/fesm2022/components-examples.mjs.map b/fesm2022/components-examples.mjs.map
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -16,3 +16,7 @@`
`16`	`16`	`<span class="hljs-selector-class">.example-tree-node</span> <span class="hljs-selector-class">.example-tree-node</span> {`
`17`	`17`	`<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">40px</span>;`
`18`	`18`	`}`
	`19`	`+`
	`20`	`+<span class="hljs-selector-class">.example-toggle</span> {`
	`21`	`+ <span class="hljs-attribute">vertical-align</span>: middle;`
	`22`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`<span class="hljs-comment">/**`
`20`		`- * <span class="hljs-doctag">@title </span>Tree with nested nodes, using childAccessor`
	`20`	`+ * <span class="hljs-doctag">@title </span>Tree with nested nodes using childAccessor`
`21`	`21`	`*/</span>`
`22`	`22`	`<span class="hljs-meta">@Component</span>({`
`23`	`23`	`<span class="hljs-attr">selector</span>: <span class="hljs-string">'cdk-tree-nested-children-accessor-example'</span>,`
Original file line number	Diff line number	Diff line change
`@@ -15,3 +15,7 @@`
`15`	`15`	`<span class="hljs-selector-class">.example-tree-node</span> <span class="hljs-selector-class">.example-tree-node</span> {`
`16`	`16`	`<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">40px</span>;`
`17`	`17`	`}`
	`18`	`+`
	`19`	`+<span class="hljs-selector-class">.example-toggle</span> {`
	`20`	`+ <span class="hljs-attribute">vertical-align</span>: middle;`
	`21`	`+}`