refactor: use TuiTree (#7851)

projects/demo/src/modules/components/tree/examples/5/content.ts

@@ -1,7 +1,7 @@
 import {NgTemplateOutlet} from '@angular/common';
 import {Component} from '@angular/core';
 import {TuiIcon} from '@taiga-ui/core';
-import {TuiTreeItemContentComponent} from '@taiga-ui/kit';
+import {TuiTreeItemContent} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
@@ -18,7 +18,7 @@ import {TuiTreeItemContentComponent} from '@taiga-ui/kit';
         '(click)': 'onClick()',
     },
 })
-export class Folders extends TuiTreeItemContentComponent {
+export class Folders extends TuiTreeItemContent {
     protected get icon(): string {
         return this.isExpandable ? '@tui.folder' : '@tui.file';
     }

projects/kit/components/tree/components/tree-item-content/tree-item-content.component.ts

@@ -1,3 +1,4 @@
+import {AsyncPipe, NgIf, NgTemplateOutlet} from '@angular/common';
 import type {DoCheck} from '@angular/core';
 import {
     ChangeDetectionStrategy,
@@ -6,7 +7,7 @@ import {
     HostBinding,
     inject,
 } from '@angular/core';
-import {TUI_COMMON_ICONS} from '@taiga-ui/core';
+import {TUI_COMMON_ICONS, TuiButton} from '@taiga-ui/core';
 import {POLYMORPHEUS_CONTEXT} from '@taiga-ui/polymorpheus';
 import {distinctUntilChanged, map, startWith, Subject} from 'rxjs';
 
@@ -15,11 +16,13 @@ import type {TuiTreeController, TuiTreeItemContext} from '../../misc/tree.interf
 import {TUI_TREE_CONTROLLER} from '../../misc/tree.tokens';
 
 @Component({
+    standalone: true,
+    imports: [NgIf, TuiButton, NgTemplateOutlet, AsyncPipe],
     templateUrl: './tree-item-content.template.html',
     styleUrls: ['./tree-item-content.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TuiTreeItemContentComponent implements DoCheck {
+export class TuiTreeItemContent implements DoCheck {
     private readonly controller = inject<TuiTreeController>(
         forwardRef(() => TUI_TREE_CONTROLLER),
     );

projects/kit/components/tree/components/tree-item/tree-item.component.ts

@@ -1,3 +1,4 @@
+import {AsyncPipe, NgIf} from '@angular/common';
 import type {DoCheck, QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
@@ -9,7 +10,9 @@ import {
     SkipSelf,
 } from '@angular/core';
 import {EMPTY_QUERY, tuiInjectElement, tuiProvide} from '@taiga-ui/cdk';
+import {TuiExpandComponent} from '@taiga-ui/core';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
+import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 import {distinctUntilChanged, map, startWith, Subject} from 'rxjs';
 
 import type {TuiTreeController, TuiTreeItemContext} from '../../misc/tree.interfaces';
@@ -21,12 +24,14 @@ import {
 } from '../../misc/tree.tokens';
 
 @Component({
+    standalone: true,
     selector: 'tui-tree-item',
+    imports: [PolymorpheusOutlet, TuiExpandComponent, NgIf, AsyncPipe],
     templateUrl: './tree-item.template.html',
     styleUrls: ['./tree-item.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
-        tuiProvide(TUI_TREE_NODE, TuiTreeItemComponent),
+        tuiProvide(TUI_TREE_NODE, TuiTreeItem),
         {
             provide: TUI_TREE_LEVEL,
             deps: [[new SkipSelf(), TUI_TREE_LEVEL]],
@@ -37,7 +42,7 @@ import {
         role: 'treeitem',
     },
 })
-export class TuiTreeItemComponent implements DoCheck {
+export class TuiTreeItem implements DoCheck {
     @ContentChildren(TUI_TREE_NODE as any)
     private readonly nested: QueryList<unknown> = EMPTY_QUERY;
 

projects/kit/components/tree/components/tree/tree.component.ts

@@ -1,3 +1,4 @@
+import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
 import type {DoCheck, TrackByFunction} from '@angular/core';
 import {
     ChangeDetectionStrategy,
@@ -8,17 +9,29 @@ import {
     ViewChild,
 } from '@angular/core';
 import type {TuiHandler} from '@taiga-ui/cdk';
-import {tuiProvide} from '@taiga-ui/cdk';
+import {TuiLet, tuiProvide} from '@taiga-ui/cdk';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
+import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 import {distinctUntilChanged, map, startWith, Subject} from 'rxjs';
 
-import {TuiTreeChildrenDirective} from '../../directives/tree-children.directive';
+import {TuiTreeChildren} from '../../directives/tree-children.directive';
+import {TuiTreeNode} from '../../directives/tree-node.directive';
 import type {TuiTreeContext} from '../../misc/tree.interfaces';
 import {TUI_TREE_NODE} from '../../misc/tree.tokens';
-import {TuiTreeItemComponent} from '../tree-item/tree-item.component';
+import {TuiTreeItem} from '../tree-item/tree-item.component';
 
 @Component({
+    standalone: true,
     selector: 'tui-tree',
+    imports: [
+        TuiTreeItem,
+        TuiLet,
+        PolymorpheusOutlet,
+        NgIf,
+        NgForOf,
+        TuiTreeNode,
+        AsyncPipe,
+    ],
     templateUrl: './tree.template.html',
     styleUrls: ['./tree.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -28,8 +41,8 @@ import {TuiTreeItemComponent} from '../tree-item/tree-item.component';
 export class TuiTreeComponent<T> implements DoCheck {
     private readonly check$ = new Subject<void>();
 
-    @ViewChild(forwardRef(() => TuiTreeItemComponent))
-    protected readonly item?: TuiTreeItemComponent;
+    @ViewChild(forwardRef(() => TuiTreeItem))
+    protected readonly item?: TuiTreeItem;
 
     @ViewChild(forwardRef(() => TuiTreeComponent))
     protected readonly child?: TuiTreeComponent<T>;
@@ -40,12 +53,9 @@ export class TuiTreeComponent<T> implements DoCheck {
         distinctUntilChanged(),
     );
 
-    protected readonly directive = inject<TuiTreeChildrenDirective<T>>(
-        TuiTreeChildrenDirective,
-        {
-            optional: true,
-        },
-    );
+    protected readonly directive = inject<TuiTreeChildren<T>>(TuiTreeChildren, {
+        optional: true,
+    });
 
     @Input({
         required: true,
@@ -70,6 +80,6 @@ export class TuiTreeComponent<T> implements DoCheck {
     }
 
     private get handler(): TuiHandler<T, readonly T[]> {
-        return this.directive?.childrenHandler || TuiTreeChildrenDirective.defaultHandler;
+        return this.directive?.childrenHandler || TuiTreeChildren.defaultHandler;
     }
 }

projects/kit/components/tree/directives/tree-children.directive.ts

@@ -3,12 +3,12 @@ import type {TuiHandler} from '@taiga-ui/cdk';
 import {EMPTY_ARRAY} from '@taiga-ui/cdk';
 
 @Directive({
+    standalone: true,
     selector: 'tui-tree[childrenHandler]',
 })
-export class TuiTreeChildrenDirective<T> {
+export class TuiTreeChildren<T> {
     @Input()
-    public childrenHandler: TuiHandler<T, readonly T[]> =
-        TuiTreeChildrenDirective.defaultHandler;
+    public childrenHandler: TuiHandler<T, readonly T[]> = TuiTreeChildren.defaultHandler;
 
     public static defaultHandler<G>(item: G): readonly G[] {
         return Array.isArray(item) ? item : EMPTY_ARRAY;

projects/kit/components/tree/directives/tree-controller.directive.ts

@@ -1,11 +1,12 @@
 import {Directive, EventEmitter, Input, Output} from '@angular/core';
 import {tuiIsPresent, tuiProvide} from '@taiga-ui/cdk';
 
-import type {TuiTreeItemComponent} from '../components/tree-item/tree-item.component';
+import type {TuiTreeItem} from '../components/tree-item/tree-item.component';
 import type {TuiTreeAccessor, TuiTreeController} from '../misc/tree.interfaces';
 import {TUI_TREE_ACCESSOR, TUI_TREE_CONTROLLER} from '../misc/tree.tokens';
 
 @Directive({
+    standalone: true,
     selector: '[tuiTreeController][map]',
     providers: [
         tuiProvide(TUI_TREE_ACCESSOR, TuiTreeControllerDirective),
@@ -16,7 +17,7 @@ import {TUI_TREE_ACCESSOR, TUI_TREE_CONTROLLER} from '../misc/tree.tokens';
 export class TuiTreeControllerDirective<T>
     implements TuiTreeController, TuiTreeAccessor<T>
 {
-    protected readonly items = new Map<TuiTreeItemComponent, T>();
+    protected readonly items = new Map<TuiTreeItem, T>();
 
     @Input('tuiTreeController')
     public fallback = true;
@@ -27,21 +28,21 @@ export class TuiTreeControllerDirective<T>
     @Output()
     public readonly toggled = new EventEmitter<T>();
 
-    public register(item: TuiTreeItemComponent, value: T): void {
+    public register(item: TuiTreeItem, value: T): void {
         this.items.set(item, value);
     }
 
-    public unregister(item: TuiTreeItemComponent): void {
+    public unregister(item: TuiTreeItem): void {
         this.items.delete(item);
     }
 
-    public isExpanded(item: TuiTreeItemComponent): boolean {
+    public isExpanded(item: TuiTreeItem): boolean {
         const value = this.items.get(item);
 
         return (value && this.map.get(value)) ?? this.fallback;
     }
 
-    public toggle(item: TuiTreeItemComponent): void {
+    public toggle(item: TuiTreeItem): void {
         const value = this.items.get(item);
         const expanded = this.isExpanded(item);
 

projects/kit/components/tree/directives/tree-item-controller.directive.ts

@@ -1,26 +1,27 @@
 import {Directive, Input} from '@angular/core';
 import {tuiProvide} from '@taiga-ui/cdk';
 
-import type {TuiTreeItemComponent} from '../components/tree-item/tree-item.component';
+import type {TuiTreeItem} from '../components/tree-item/tree-item.component';
 import type {TuiTreeController} from '../misc/tree.interfaces';
 import {TUI_TREE_CONTROLLER} from '../misc/tree.tokens';
 
 @Directive({
+    standalone: true,
     selector: '[tuiTreeController]:not([map])',
-    providers: [tuiProvide(TUI_TREE_CONTROLLER, TuiTreeItemControllerDirective)],
+    providers: [tuiProvide(TUI_TREE_CONTROLLER, TuiTreeItemController)],
     exportAs: 'tuiTreeController',
 })
-export class TuiTreeItemControllerDirective implements TuiTreeController {
-    private readonly map = new WeakMap<TuiTreeItemComponent, boolean>();
+export class TuiTreeItemController implements TuiTreeController {
+    private readonly map = new WeakMap<TuiTreeItem, boolean>();
 
     @Input('tuiTreeController')
     public fallback = true;
 
-    public isExpanded(item: TuiTreeItemComponent): boolean {
+    public isExpanded(item: TuiTreeItem): boolean {
         return this.map.get(item) ?? this.fallback;
     }
 
-    public toggle(item: TuiTreeItemComponent): void {
+    public toggle(item: TuiTreeItem): void {
         this.map.set(item, !this.isExpanded(item));
     }
 }

projects/kit/components/tree/directives/tree-node.directive.ts

@@ -1,15 +1,16 @@
 import type {OnDestroy} from '@angular/core';
 import {Directive, inject, Input} from '@angular/core';
 
-import {TuiTreeItemComponent} from '../components/tree-item/tree-item.component';
+import {TuiTreeItem} from '../components/tree-item/tree-item.component';
 import type {TuiTreeAccessor} from '../misc/tree.interfaces';
 import {TUI_TREE_ACCESSOR} from '../misc/tree.tokens';
 
 @Directive({
+    standalone: true,
     selector: 'tui-tree-item[tuiTreeNode]',
 })
-export class TuiTreeNodeDirective<T> implements OnDestroy {
-    private readonly component = inject(TuiTreeItemComponent);
+export class TuiTreeNode<T> implements OnDestroy {
+    private readonly component = inject(TuiTreeItem);
     private readonly directive = inject<TuiTreeAccessor<T>>(TUI_TREE_ACCESSOR, {
         optional: true,
     });

projects/kit/components/tree/index.ts

@@ -9,4 +9,4 @@ export * from './misc/tree.constants';
 export * from './misc/tree.interfaces';
 export * from './misc/tree.service';
 export * from './misc/tree.tokens';
-export * from './tree.module';
+export * from './tree';

projects/kit/components/tree/misc/tree.constants.ts

@@ -1,12 +1,10 @@
 import {EMPTY_FUNCTION, TUI_TRUE_HANDLER} from '@taiga-ui/cdk';
 import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
 
-import {TuiTreeItemContentComponent} from '../components/tree-item-content/tree-item-content.component';
+import {TuiTreeItemContent} from '../components/tree-item-content/tree-item-content.component';
 import type {TuiTreeController} from './tree.interfaces';
 
-export const TUI_TREE_ITEM_CONTENT = new PolymorpheusComponent(
-    TuiTreeItemContentComponent,
-);
+export const TUI_TREE_ITEM_CONTENT = new PolymorpheusComponent(TuiTreeItemContent);
 
 export const TUI_DEFAULT_TREE_CONTROLLER: TuiTreeController = {
     isExpanded: TUI_TRUE_HANDLER,

projects/kit/components/tree/misc/tree.interfaces.ts

@@ -2,24 +2,24 @@ import type {TemplateRef} from '@angular/core';
 import type {TuiContext} from '@taiga-ui/cdk';
 import type {Observable} from 'rxjs';
 
-import type {TuiTreeItemComponent} from '../components/tree-item/tree-item.component';
+import type {TuiTreeItem} from '../components/tree-item/tree-item.component';
 
-export interface TuiTreeItemContext extends TuiContext<TuiTreeItemComponent> {
+export interface TuiTreeItemContext extends TuiContext<TuiTreeItem> {
     readonly template: TemplateRef<Record<string, unknown>>;
 }
 
 export interface TuiTreeContext<T> extends TuiContext<T> {
-    readonly node: TuiTreeItemComponent;
+    readonly node: TuiTreeItem;
 }
 
 export interface TuiTreeController {
-    isExpanded(item: TuiTreeItemComponent): boolean;
-    toggle(item: TuiTreeItemComponent): void;
+    isExpanded(item: TuiTreeItem): boolean;
+    toggle(item: TuiTreeItem): void;
 }
 
 export interface TuiTreeAccessor<T> {
-    register(item: TuiTreeItemComponent, value: T): void;
-    unregister(item: TuiTreeItemComponent): void;
+    register(item: TuiTreeItem, value: T): void;
+    unregister(item: TuiTreeItem): void;
 }
 
 export interface TuiTreeLoader<T> {

projects/kit/components/tree/tree.ts

@@ -0,0 +1,17 @@
+import {TuiTreeComponent} from './components/tree/tree.component';
+import {TuiTreeItem} from './components/tree-item/tree-item.component';
+import {TuiTreeItemContent} from './components/tree-item-content/tree-item-content.component';
+import {TuiTreeChildren} from './directives/tree-children.directive';
+import {TuiTreeControllerDirective} from './directives/tree-controller.directive';
+import {TuiTreeItemController} from './directives/tree-item-controller.directive';
+import {TuiTreeNode} from './directives/tree-node.directive';
+
+export const TuiTree = [
+    TuiTreeComponent,
+    TuiTreeItem,
+    TuiTreeItemContent,
+    TuiTreeChildren,
+    TuiTreeItemController,
+    TuiTreeControllerDirective,
+    TuiTreeNode,
+] as const;