From f936c97fbe25d20b3c2e652c183f17e25bf2d726 Mon Sep 17 00:00:00 2001 From: Sepandar Derakhshandeh <69620649+Sepandard@users.noreply.github.com> Date: Tue, 28 Jan 2025 10:46:05 +0330 Subject: [PATCH] fix(cdk/tree): fix broken examples in stackblitz (#30387) resolves #30159 (cherry picked from commit 8b876d8e4a6ba2b2c726513a54ab074e9659851e) --- ...ree-flat-children-accessor-example-data.ts | 28 ++++++++ ...cdk-tree-flat-children-accessor-example.ts | 2 +- ...-tree-flat-level-accessor-example-data.ts} | 29 --------- .../cdk-tree-flat-level-accessor-example.ts | 2 +- ...e-nested-children-accessor-example-data.ts | 28 ++++++++ ...k-tree-nested-children-accessor-example.ts | 2 +- ...tree-nested-level-accessor-example-data.ts | 65 +++++++++++++++++++ .../cdk-tree-nested-level-accessor-example.ts | 2 +- 8 files changed, 125 insertions(+), 33 deletions(-) create mode 100644 src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example-data.ts rename src/components-examples/cdk/tree/{tree-data.ts => cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example-data.ts} (61%) create mode 100644 src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example-data.ts create mode 100644 src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example-data.ts diff --git a/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example-data.ts b/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example-data.ts new file mode 100644 index 000000000000..acac71a54292 --- /dev/null +++ b/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example-data.ts @@ -0,0 +1,28 @@ +/** + * 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'}], + }, + ], + }, +]; diff --git a/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.ts b/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.ts index 984ef463f93c..05afa9bc04a7 100644 --- a/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.ts +++ b/src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.ts @@ -5,7 +5,7 @@ import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; import {timer} from 'rxjs'; import {mapTo} from 'rxjs/operators'; -import {NestedFoodNode, NESTED_DATA} from '../tree-data'; +import {NestedFoodNode, NESTED_DATA} from './cdk-tree-flat-children-accessor-example-data'; function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] { const flattenedNodes = []; diff --git a/src/components-examples/cdk/tree/tree-data.ts b/src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example-data.ts similarity index 61% rename from src/components-examples/cdk/tree/tree-data.ts rename to src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example-data.ts index 780c969d532f..7adbadfd8412 100644 --- a/src/components-examples/cdk/tree/tree-data.ts +++ b/src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example-data.ts @@ -63,32 +63,3 @@ export const FLAT_DATA: FlatFoodNode[] = [ 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'}], - }, - ], - }, -]; diff --git a/src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.ts b/src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.ts index 486cf9ca84c6..0c43535778d6 100644 --- a/src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.ts +++ b/src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.ts @@ -3,7 +3,7 @@ import {CdkTree, CdkTreeModule} from '@angular/cdk/tree'; import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; -import {FlatFoodNode, FLAT_DATA} from '../tree-data'; +import {FlatFoodNode, FLAT_DATA} from './cdk-tree-flat-level-accessor-example-data'; /** * @title Tree with flat nodes diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example-data.ts b/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example-data.ts new file mode 100644 index 000000000000..acac71a54292 --- /dev/null +++ b/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example-data.ts @@ -0,0 +1,28 @@ +/** + * 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'}], + }, + ], + }, +]; diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts b/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts index d1cfd6f73f38..910aafbf9343 100644 --- a/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts +++ b/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts @@ -3,7 +3,7 @@ import {CdkTree, CdkTreeModule} from '@angular/cdk/tree'; import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; -import {NestedFoodNode, NESTED_DATA} from '../tree-data'; +import {NestedFoodNode, NESTED_DATA} from './cdk-tree-nested-children-accessor-example-data'; function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] { const flattenedNodes = []; diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example-data.ts b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example-data.ts new file mode 100644 index 000000000000..7adbadfd8412 --- /dev/null +++ b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example-data.ts @@ -0,0 +1,65 @@ +/** 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, + }, +]; diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts index 0505e70669ae..4b2c9b641c6d 100644 --- a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts +++ b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts @@ -3,7 +3,7 @@ import {CdkTree, CdkTreeModule} from '@angular/cdk/tree'; import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; -import {FLAT_DATA, FlatFoodNode} from '../tree-data'; +import {FLAT_DATA, FlatFoodNode} from './cdk-tree-nested-level-accessor-example-data'; /** * @title Tree with nested nodes and level accessor