diff --git a/projects/demo/src/modules/components/tree/examples/5/content.ts b/projects/demo/src/modules/components/tree/examples/5/content.ts index d413c49e0804..8aaee1f9bd54 100644 --- a/projects/demo/src/modules/components/tree/examples/5/content.ts +++ b/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'; } diff --git a/projects/kit/components/tree/components/tree-item-content/tree-item-content.component.ts b/projects/kit/components/tree/components/tree-item-content/tree-item-content.component.ts index b2f5c09b76b2..2a338ca68982 100644 --- a/projects/kit/components/tree/components/tree-item-content/tree-item-content.component.ts +++ b/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( forwardRef(() => TUI_TREE_CONTROLLER), ); diff --git a/projects/kit/components/tree/components/tree-item/tree-item.component.ts b/projects/kit/components/tree/components/tree-item/tree-item.component.ts index 4ac6824ebfd4..75ced9011498 100644 --- a/projects/kit/components/tree/components/tree-item/tree-item.component.ts +++ b/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 = EMPTY_QUERY; diff --git a/projects/kit/components/tree/components/tree/tree.component.ts b/projects/kit/components/tree/components/tree/tree.component.ts index ea2b1996c838..8eb99a4c4e01 100644 --- a/projects/kit/components/tree/components/tree/tree.component.ts +++ b/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 implements DoCheck { private readonly check$ = new Subject(); - @ViewChild(forwardRef(() => TuiTreeItemComponent)) - protected readonly item?: TuiTreeItemComponent; + @ViewChild(forwardRef(() => TuiTreeItem)) + protected readonly item?: TuiTreeItem; @ViewChild(forwardRef(() => TuiTreeComponent)) protected readonly child?: TuiTreeComponent; @@ -40,12 +53,9 @@ export class TuiTreeComponent implements DoCheck { distinctUntilChanged(), ); - protected readonly directive = inject>( - TuiTreeChildrenDirective, - { - optional: true, - }, - ); + protected readonly directive = inject>(TuiTreeChildren, { + optional: true, + }); @Input({ required: true, @@ -70,6 +80,6 @@ export class TuiTreeComponent implements DoCheck { } private get handler(): TuiHandler { - return this.directive?.childrenHandler || TuiTreeChildrenDirective.defaultHandler; + return this.directive?.childrenHandler || TuiTreeChildren.defaultHandler; } } diff --git a/projects/kit/components/tree/directives/tree-children.directive.ts b/projects/kit/components/tree/directives/tree-children.directive.ts index 4e6195824c08..144b8aa5b3a7 100644 --- a/projects/kit/components/tree/directives/tree-children.directive.ts +++ b/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 { +export class TuiTreeChildren { @Input() - public childrenHandler: TuiHandler = - TuiTreeChildrenDirective.defaultHandler; + public childrenHandler: TuiHandler = TuiTreeChildren.defaultHandler; public static defaultHandler(item: G): readonly G[] { return Array.isArray(item) ? item : EMPTY_ARRAY; diff --git a/projects/kit/components/tree/directives/tree-controller.directive.ts b/projects/kit/components/tree/directives/tree-controller.directive.ts index 6d0d3a149369..fc7d68d6b929 100644 --- a/projects/kit/components/tree/directives/tree-controller.directive.ts +++ b/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 implements TuiTreeController, TuiTreeAccessor { - protected readonly items = new Map(); + protected readonly items = new Map(); @Input('tuiTreeController') public fallback = true; @@ -27,21 +28,21 @@ export class TuiTreeControllerDirective @Output() public readonly toggled = new EventEmitter(); - 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); diff --git a/projects/kit/components/tree/directives/tree-item-controller.directive.ts b/projects/kit/components/tree/directives/tree-item-controller.directive.ts index 94e032048d92..a54d1d91a5f6 100644 --- a/projects/kit/components/tree/directives/tree-item-controller.directive.ts +++ b/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(); +export class TuiTreeItemController implements TuiTreeController { + private readonly map = new WeakMap(); @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)); } } diff --git a/projects/kit/components/tree/directives/tree-node.directive.ts b/projects/kit/components/tree/directives/tree-node.directive.ts index 0862cf6ec297..d94d0168418f 100644 --- a/projects/kit/components/tree/directives/tree-node.directive.ts +++ b/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 implements OnDestroy { - private readonly component = inject(TuiTreeItemComponent); +export class TuiTreeNode implements OnDestroy { + private readonly component = inject(TuiTreeItem); private readonly directive = inject>(TUI_TREE_ACCESSOR, { optional: true, }); diff --git a/projects/kit/components/tree/index.ts b/projects/kit/components/tree/index.ts index 3eb2b6e6261c..bcf8d6a3c4d9 100644 --- a/projects/kit/components/tree/index.ts +++ b/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'; diff --git a/projects/kit/components/tree/misc/tree.constants.ts b/projects/kit/components/tree/misc/tree.constants.ts index dc2d4c0dd1a1..1d04a8e6b27e 100644 --- a/projects/kit/components/tree/misc/tree.constants.ts +++ b/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, diff --git a/projects/kit/components/tree/misc/tree.interfaces.ts b/projects/kit/components/tree/misc/tree.interfaces.ts index cf613349c243..b63bb848eb51 100644 --- a/projects/kit/components/tree/misc/tree.interfaces.ts +++ b/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 { +export interface TuiTreeItemContext extends TuiContext { readonly template: TemplateRef>; } export interface TuiTreeContext extends TuiContext { - 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 { - register(item: TuiTreeItemComponent, value: T): void; - unregister(item: TuiTreeItemComponent): void; + register(item: TuiTreeItem, value: T): void; + unregister(item: TuiTreeItem): void; } export interface TuiTreeLoader { diff --git a/projects/kit/components/tree/tree.module.ts b/projects/kit/components/tree/tree.module.ts deleted file mode 100644 index 05f82f84c28b..000000000000 --- a/projects/kit/components/tree/tree.module.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {TuiLet} from '@taiga-ui/cdk'; -import {TuiButton, TuiExpandComponent} from '@taiga-ui/core'; -import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus'; - -import {TuiTreeComponent} from './components/tree/tree.component'; -import {TuiTreeItemComponent} from './components/tree-item/tree-item.component'; -import {TuiTreeItemContentComponent} from './components/tree-item-content/tree-item-content.component'; -import {TuiTreeChildrenDirective} from './directives/tree-children.directive'; -import {TuiTreeControllerDirective} from './directives/tree-controller.directive'; -import {TuiTreeItemControllerDirective} from './directives/tree-item-controller.directive'; -import {TuiTreeNodeDirective} from './directives/tree-node.directive'; - -@NgModule({ - imports: [ - CommonModule, - PolymorpheusOutlet, - PolymorpheusTemplate, - TuiExpandComponent, - TuiLet, - TuiButton, - ], - declarations: [ - TuiTreeComponent, - TuiTreeItemComponent, - TuiTreeItemContentComponent, - TuiTreeChildrenDirective, - TuiTreeItemControllerDirective, - TuiTreeControllerDirective, - TuiTreeNodeDirective, - ], - exports: [ - TuiTreeComponent, - TuiTreeItemComponent, - TuiTreeChildrenDirective, - TuiTreeItemControllerDirective, - TuiTreeControllerDirective, - ], -}) -export class TuiTree {} diff --git a/projects/kit/components/tree/tree.ts b/projects/kit/components/tree/tree.ts new file mode 100644 index 000000000000..68b309cd34c6 --- /dev/null +++ b/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;