|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright Google LLC All Rights Reserved. |
| 4 | + * |
| 5 | + * Use of this source code is governed by an MIT-style license that can be |
| 6 | + * found in the LICENSE file at https://angular.dev/license |
| 7 | + */ |
| 8 | + |
| 9 | +import { |
| 10 | + Directive, |
| 11 | + ElementRef, |
| 12 | + afterRenderEffect, |
| 13 | + booleanAttribute, |
| 14 | + computed, |
| 15 | + inject, |
| 16 | + input, |
| 17 | + model, |
| 18 | + signal, |
| 19 | + Signal, |
| 20 | + OnInit, |
| 21 | + OnDestroy, |
| 22 | + afterNextRender, |
| 23 | +} from '@angular/core'; |
| 24 | +import {_IdGenerator} from '@angular/cdk/a11y'; |
| 25 | +import {ComboboxTreePattern, TreeItemPattern, DeferredContentAware} from '@angular/aria/private'; |
| 26 | +import {Tree} from './tree'; |
| 27 | +import {TreeItemGroup} from './tree-item-group'; |
| 28 | +import {HasElement} from './utils'; |
| 29 | + |
| 30 | +/** |
| 31 | + * A selectable and expandable item in an `ngTree`. |
| 32 | + * |
| 33 | + * The `ngTreeItem` directive represents an individual node within an `ngTree`. It can be |
| 34 | + * selected, expanded (if it has children), and disabled. The `parent` input establishes |
| 35 | + * the hierarchical relationship within the tree. |
| 36 | + * |
| 37 | + * ```html |
| 38 | + * <li ngTreeItem [parent]="parentTreeOrGroup" value="item-id" label="Item Label"> |
| 39 | + * Item Label |
| 40 | + * </li> |
| 41 | + * ``` |
| 42 | + * |
| 43 | + * @developerPreview 21.0 |
| 44 | + */ |
| 45 | +@Directive({ |
| 46 | + selector: '[ngTreeItem]', |
| 47 | + exportAs: 'ngTreeItem', |
| 48 | + host: { |
| 49 | + '[attr.data-active]': 'active()', |
| 50 | + 'role': 'treeitem', |
| 51 | + '[id]': '_pattern.id()', |
| 52 | + '[attr.aria-expanded]': '_expanded()', |
| 53 | + '[attr.aria-selected]': 'selected()', |
| 54 | + '[attr.aria-current]': '_pattern.current()', |
| 55 | + '[attr.aria-disabled]': '_pattern.disabled()', |
| 56 | + '[attr.aria-level]': 'level()', |
| 57 | + '[attr.aria-setsize]': '_pattern.setsize()', |
| 58 | + '[attr.aria-posinset]': '_pattern.posinset()', |
| 59 | + '[attr.tabindex]': '_pattern.tabIndex()', |
| 60 | + }, |
| 61 | +}) |
| 62 | +export class TreeItem<V> extends DeferredContentAware implements OnInit, OnDestroy, HasElement { |
| 63 | + /** A reference to the host element. */ |
| 64 | + private readonly _elementRef = inject(ElementRef); |
| 65 | + |
| 66 | + /** A reference to the host element. */ |
| 67 | + readonly element = this._elementRef.nativeElement as HTMLElement; |
| 68 | + |
| 69 | + /** The owned tree item group. */ |
| 70 | + private readonly _group = signal<TreeItemGroup<V> | undefined>(undefined); |
| 71 | + |
| 72 | + /** A unique identifier for the tree item. */ |
| 73 | + readonly id = input(inject(_IdGenerator).getId('ng-tree-item-', true)); |
| 74 | + |
| 75 | + /** The value of the tree item. */ |
| 76 | + readonly value = input.required<V>(); |
| 77 | + |
| 78 | + /** The parent tree root or tree item group. */ |
| 79 | + readonly parent = input.required<Tree<V> | TreeItemGroup<V>>(); |
| 80 | + |
| 81 | + /** Whether the tree item is disabled. */ |
| 82 | + readonly disabled = input(false, {transform: booleanAttribute}); |
| 83 | + |
| 84 | + /** Whether the tree item is selectable. */ |
| 85 | + readonly selectable = input<boolean>(true); |
| 86 | + |
| 87 | + /** Whether the tree item is expanded. */ |
| 88 | + readonly expanded = model<boolean>(false); |
| 89 | + |
| 90 | + /** Optional label for typeahead. Defaults to the element's textContent. */ |
| 91 | + readonly label = input<string>(); |
| 92 | + |
| 93 | + /** Search term for typeahead. */ |
| 94 | + readonly searchTerm = computed(() => this.label() ?? this.element.textContent); |
| 95 | + |
| 96 | + /** The tree root. */ |
| 97 | + readonly tree: Signal<Tree<V>> = computed(() => { |
| 98 | + if (this.parent() instanceof Tree) { |
| 99 | + return this.parent() as Tree<V>; |
| 100 | + } |
| 101 | + return (this.parent() as TreeItemGroup<V>).ownedBy().tree(); |
| 102 | + }); |
| 103 | + |
| 104 | + /** Whether the item is active. */ |
| 105 | + readonly active = computed(() => this._pattern.active()); |
| 106 | + |
| 107 | + /** The level of the current item in a tree. */ |
| 108 | + readonly level = computed(() => this._pattern.level()); |
| 109 | + |
| 110 | + /** Whether the item is selected. */ |
| 111 | + readonly selected = computed(() => this._pattern.selected()); |
| 112 | + |
| 113 | + /** Whether this item is visible due to all of its parents being expanded. */ |
| 114 | + readonly visible = computed(() => this._pattern.visible()); |
| 115 | + |
| 116 | + /** Whether the tree is expanded. Use this value for aria-expanded. */ |
| 117 | + protected readonly _expanded: Signal<boolean | undefined> = computed(() => |
| 118 | + this._pattern.expandable() ? this._pattern.expanded() : undefined, |
| 119 | + ); |
| 120 | + |
| 121 | + /** The UI pattern for this item. */ |
| 122 | + _pattern: TreeItemPattern<V>; |
| 123 | + |
| 124 | + constructor() { |
| 125 | + super(); |
| 126 | + afterNextRender(() => { |
| 127 | + if (this.tree()._pattern instanceof ComboboxTreePattern) { |
| 128 | + this.preserveContent.set(true); |
| 129 | + } |
| 130 | + }); |
| 131 | + // Connect the group's hidden state to the DeferredContentAware's visibility. |
| 132 | + afterRenderEffect(() => { |
| 133 | + this.tree()._pattern instanceof ComboboxTreePattern |
| 134 | + ? this.contentVisible.set(true) |
| 135 | + : this.contentVisible.set(this._pattern.expanded()); |
| 136 | + }); |
| 137 | + } |
| 138 | + |
| 139 | + ngOnInit() { |
| 140 | + this.parent()._register(this); |
| 141 | + this.tree()._register(this); |
| 142 | + |
| 143 | + const treePattern = computed(() => this.tree()._pattern); |
| 144 | + const parentPattern = computed(() => { |
| 145 | + if (this.parent() instanceof Tree) { |
| 146 | + return treePattern(); |
| 147 | + } |
| 148 | + return (this.parent() as TreeItemGroup<V>).ownedBy()._pattern; |
| 149 | + }); |
| 150 | + this._pattern = new TreeItemPattern<V>({ |
| 151 | + ...this, |
| 152 | + tree: treePattern, |
| 153 | + parent: parentPattern, |
| 154 | + children: computed(() => this._group()?._childPatterns() ?? []), |
| 155 | + hasChildren: computed(() => !!this._group()), |
| 156 | + element: () => this.element, |
| 157 | + searchTerm: () => this.searchTerm() ?? '', |
| 158 | + }); |
| 159 | + } |
| 160 | + |
| 161 | + ngOnDestroy() { |
| 162 | + this.parent()._unregister(this); |
| 163 | + this.tree()._unregister(this); |
| 164 | + } |
| 165 | + |
| 166 | + _register(group: TreeItemGroup<V>) { |
| 167 | + this._group.set(group); |
| 168 | + } |
| 169 | + |
| 170 | + _unregister() { |
| 171 | + this._group.set(undefined); |
| 172 | + } |
| 173 | +} |
0 commit comments