23353834934

Committed 20 Mar 2026 05:05PM UTC coverage: 9.787% (-79.5%) from 89.256%

Build # 23353834934

Build Type

Pull #17070

github

Committed by

web-flow

Commit Message

Merge 10ae3802c into b914e2f8b

Pull Request Pull Request #17070: fix(IgxGrid): Do not apply width constraint to groups.

Coverage Stats

921 of 16959 branches covered (5.43%)

Branch coverage included in aggregate %.

1 of 3 new or added lines in 1 file covered. (33.33%)

25200 existing lines in 340 files now uncovered.

3842 of 31708 relevant lines covered (12.12%)

6.14 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.96

/projects/igniteui-angular/tree/src/tree/tree-node/tree-node.component.ts

import { ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChild, booleanAttribute, inject } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import {
    IgxTree,
    IgxTreeNode,
    IgxTreeSelectionType,
    IGX_TREE_COMPONENT,
    IGX_TREE_NODE_COMPONENT,
    ITreeNodeTogglingEventArgs
} from '../common';
import { IgxTreeNavigationService } from '../tree-navigation.service';
import { IgxTreeSelectionService } from '../tree-selection.service';
import { IgxTreeService } from '../tree.service';
import { NgTemplateOutlet, NgClass } from '@angular/common';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
import { ToggleAnimationPlayer, ToggleAnimationSettings } from 'igniteui-angular/expansion-panel';
import { getCurrentResourceStrings, onResourceChangeHandle, ITreeResourceStrings, TreeResourceStringsEN } from 'igniteui-angular/core';

// TODO: Implement aria functionality
/**
 * @hidden @internal
 * Used for links (`a` tags) in the body of an `igx-tree-node`. Handles aria and event dispatch.
 */
@Directive({
    selector: `[igxTreeNodeLink]`,
    standalone: true
})
export class IgxTreeNodeLinkDirective implements OnDestroy {
    private node = inject<IgxTreeNode<any>>(IGX_TREE_NODE_COMPONENT, { optional: true });
    private navService = inject(IgxTreeNavigationService);
    public elementRef = inject(ElementRef);


    @HostBinding('attr.role')
    public role = 'treeitem';

    /**
     * The node's parent. Should be used only when the link is defined
     * in `<ng-template>` tag outside of its parent, as Angular DI will not properly provide a reference
     *
     * ```html
     * <igx-tree>
     *     <igx-tree-node #myNode *ngFor="let node of data" [data]="node">
     *         <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: data, parentNode: myNode }">
     *         </ng-template>
     *     </igx-tree-node>
     *     ...
     *     <!-- node template is defined under tree to access related services -->
     *     <ng-template #nodeTemplate let-data let-node="parentNode">
     *         <a [igxTreeNodeLink]="node">{{ data.label }}</a>
     *     </ng-template>
     * </igx-tree>
     * ```
     */
    @Input('igxTreeNodeLink')
    public set parentNode(val: any) {
        if (val) {
            this._parentNode = val;
            (this._parentNode as any).addLinkChild(this);
        }
    }

    public get parentNode(): any {
        return this._parentNode;
    }

    /** A pointer to the parent node */
    private get target(): IgxTreeNode<any> {
        return this.node || this.parentNode;
    }

    private _parentNode: IgxTreeNode<any> = null;

    /** @hidden @internal */
    @HostBinding('attr.tabindex')
    public get tabIndex(): number {
        return this.navService.focusedNode === this.target ? (this.target?.disabled ? -1 : 0) : -1;
    }

    /**
     * @hidden @internal
     * Clear the node's focused state
     */
    @HostListener('blur')
    public handleBlur() {
        this.target.isFocused = false;
    }

    /**
     * @hidden @internal
     * Set the node as focused
     */
    @HostListener('focus')
    public handleFocus() {
        if (this.target && !this.target.disabled) {
            if (this.navService.focusedNode !== this.target) {
                this.navService.focusedNode = this.target;
            }
            this.target.isFocused = true;
        }
    }

    public ngOnDestroy() {
        this.target.removeLinkChild(this);
    }
}

/**
 *
 * The tree node component represents a child node of the tree component or another tree node.
 * Usage:
 *
 * ```html
 *  <igx-tree>
 *  ...
 *    <igx-tree-node [data]="data" [selected]="service.isNodeSelected(data.Key)" [expanded]="service.isNodeExpanded(data.Key)">
 *      {{ data.FirstName }} {{ data.LastName }}
 *    </igx-tree-node>
 *  ...
 *  </igx-tree>
 * ```
 */
@Component({
    selector: 'igx-tree-node',
    templateUrl: 'tree-node.component.html',
    providers: [
        { provide: IGX_TREE_NODE_COMPONENT, useExisting: IgxTreeNodeComponent }
    ],
    imports: [NgTemplateOutlet, IgxIconComponent, IgxCheckboxComponent, NgClass, IgxCircularProgressBarComponent]
})
export class IgxTreeNodeComponent<T> extends ToggleAnimationPlayer implements IgxTreeNode<T>, OnInit, OnDestroy {
    public tree = inject<IgxTree>(IGX_TREE_COMPONENT);
    protected selectionService = inject(IgxTreeSelectionService);
    protected treeService = inject(IgxTreeService);
    protected navService = inject(IgxTreeNavigationService);
    protected cdr = inject(ChangeDetectorRef);
    private element = inject<ElementRef<HTMLElement>>(ElementRef);
    public parentNode = inject<IgxTreeNode<any>>(IGX_TREE_NODE_COMPONENT, { optional: true, skipSelf: true });

    /**
     * The data entry that the node is visualizing.
     *
     * @remarks
     * Required for searching through nodes.
     *
     * @example
     * ```html
     *  <igx-tree>
     *  ...
     *    <igx-tree-node [data]="data">
     *      {{ data.FirstName }} {{ data.LastName }}
     *    </igx-tree-node>
     *  ...
     *  </igx-tree>
     * ```
     */
    @Input()
    public data: T;

    /**
     * To be used for load-on-demand scenarios in order to specify whether the node is loading data.
     *
     * @remarks
     * Loading nodes do not render children.
     */
    @Input({ transform: booleanAttribute })
    public loading = false;

    // TO DO: return different tab index depending on anchor child
    /** @hidden @internal */
    public set tabIndex(val: number) {
        this._tabIndex = val;
    }

    /** @hidden @internal */
    public get tabIndex(): number {
        if (this.disabled) {
            return -1;
        }
        if (this._tabIndex === null) {
            if (this.navService.focusedNode === null) {
                return this.hasLinkChildren ? -1 : 0;
            }
            return -1;
        }
        return this.hasLinkChildren ? -1 : this._tabIndex;
    }

    /** @hidden @internal */
    public override get animationSettings(): ToggleAnimationSettings {
        return this.tree.animationSettings;
    }

    /**
     * Gets/Sets the resource strings.
     *
     * @remarks
     * Uses EN resources by default.
     */
    @Input()
    public set resourceStrings(value: ITreeResourceStrings) {
        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
    }

    /**
     * An accessor that returns the resource strings.
     */
    public get resourceStrings(): ITreeResourceStrings {
        return this._resourceStrings || this._defaultResourceStrings;
    }

    /**
     * Gets/Sets the active state of the node
     *
     * @param value: boolean
     */
    @Input({ transform: booleanAttribute })
    public set active(value: boolean) {
        if (value) {
            this.navService.activeNode = this;
            this.tree.activeNodeBindingChange.emit(this);
        }
    }

    public get active(): boolean {
        return this.navService.activeNode === this;
    }

    /**
     * Emitted when the node's `selected` property changes.
     *
     * ```html
     * <igx-tree>
     *      <igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected">
     *      </igx-tree-node>
     * </igx-tree>
     * ```
     *
     * ```typescript
     * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
     * node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e))
     * ```
     */
    @Output()
    public selectedChange = new EventEmitter<boolean>();

    /**
     * Emitted when the node's `expanded` property changes.
     *
     * ```html
     * <igx-tree>
     *      <igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded">
     *      </igx-tree-node>
     * </igx-tree>
     * ```
     *
     * ```typescript
     * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
     * node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e))
     * ```
     */
    @Output()
    public expandedChange = new EventEmitter<boolean>();

    /** @hidden @internal */
    public get focused() {
        return this.isFocused &&
            this.navService.focusedNode === this;
    }

    /**
     * Retrieves the full path to the node incuding itself
     *
     * ```typescript
     * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
     * const path: IgxTreeNode<any>[] = node.path;
     * ```
     */
    public get path(): IgxTreeNode<any>[] {
        return this.parentNode?.path ? [...this.parentNode.path, this] : [this];
    }

    // TODO: bind to disabled state when node is dragged
    /**
     * Gets/Sets the disabled state of the node
     *
     * @param value: boolean
     */
    @Input({ transform: booleanAttribute })
    @HostBinding('class.igx-tree-node--disabled')
    public get disabled(): boolean {
        return this._disabled;
    }

    public set disabled(value: boolean) {
        if (value !== this._disabled) {
            this._disabled = value;
            this.tree.disabledChange.emit(this);
        }
    }

    /** @hidden @internal */
    @HostBinding('class.igx-tree-node')
    public cssClass = 'igx-tree-node';

    /** @hidden @internal */
    @HostBinding('attr.role')
    public get role() {
        return this.hasLinkChildren ? 'none' : 'treeitem';
    }

    /** @hidden @internal */
    @ContentChildren(IgxTreeNodeLinkDirective, { read: ElementRef })
    public linkChildren: QueryList<ElementRef>;

    /** @hidden @internal */
    @ContentChildren(IGX_TREE_NODE_COMPONENT, { read: IGX_TREE_NODE_COMPONENT })
    public _children: QueryList<IgxTreeNode<any>>;

    /** @hidden @internal */
    @ContentChildren(IGX_TREE_NODE_COMPONENT, { read: IGX_TREE_NODE_COMPONENT, descendants: true })
    public allChildren: QueryList<IgxTreeNode<any>>;

    /**
     * Return the child nodes of the node (if any)
     *
     * @remarks
     * Returns `null` if node does not have children
     *
     * @example
     * ```typescript
     * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
     * const children: IgxTreeNode<any>[] = node.children;
     * ```
     */
    public get children(): IgxTreeNode<any>[] {
        return this._children?.length ? this._children.toArray() : null;
    }

    // TODO: will be used in Drag and Drop implementation
    /** @hidden @internal */
    @ViewChild('ghostTemplate', { read: ElementRef })
    public header: ElementRef;

    @ViewChild('defaultIndicator', { read: TemplateRef, static: true })
    private _defaultExpandIndicatorTemplate: TemplateRef<any>;

    @ViewChild('childrenContainer', { read: ElementRef })
    private childrenContainer: ElementRef;

    private get hasLinkChildren(): boolean {
        return this.linkChildren?.length > 0 || this.registeredChildren?.length > 0;
    }

    /** @hidden @internal */
    public isFocused: boolean;

    /** @hidden @internal */
    public registeredChildren: IgxTreeNodeLinkDirective[] = [];

    private _resourceStrings: ITreeResourceStrings = null;
    private _defaultResourceStrings = getCurrentResourceStrings(TreeResourceStringsEN);
    private _tabIndex = null;
    private _disabled = false;

    constructor() {
        super();
        onResourceChangeHandle(this.destroy$, () => {
            this._defaultResourceStrings = getCurrentResourceStrings(TreeResourceStringsEN, false);
        }, this);
    }

    /**
     * @hidden @internal
     */
    public get showSelectors() {
        return this.tree.selection !== IgxTreeSelectionType.None;
    }

    /**
     * @hidden @internal
     */
    public get indeterminate(): boolean {
        return this.selectionService.isNodeIndeterminate(this);
    }

    /** The depth of the node, relative to the root
     *
     * ```html
     * <igx-tree>
     *  ...
     *  <igx-tree-node #node>
     *      My level is {{ node.level }}
     *  </igx-tree-node>
     * </igx-tree>
     * ```
     *
     * ```typescript
     * const node: IgxTreeNode<any> = this.tree.findNodes(data[12])[0];
     * const level: number = node.level;
     * ```
     */
    public get level(): number {
        return this.parentNode ? this.parentNode.level + 1 : 0;
    }

    /** Get/set whether the node is selected. Supporst two-way binding.
     *
     * ```html
     * <igx-tree>
     *  ...
     *  <igx-tree-node *ngFor="let node of data" [(selected)]="node.selected">
     *      {{ node.label }}
     *  </igx-tree-node>
     * </igx-tree>
     * ```
     *
     * ```typescript
     * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
     * const selected = node.selected;
     * node.selected = true;
     * ```
     */
    @Input({ transform: booleanAttribute })
    public get selected(): boolean {
        return this.selectionService.isNodeSelected(this);
    }

    public set selected(val: boolean) {
        if (!(this.tree?.nodes && this.tree.nodes.find((e) => e === this)) && val) {
            this.tree.forceSelect.push(this);
            return;
        }
        if (val && !this.selectionService.isNodeSelected(this)) {
            this.selectionService.selectNodesWithNoEvent([this]);
        }
        if (!val && this.selectionService.isNodeSelected(this)) {
            this.selectionService.deselectNodesWithNoEvent([this]);
        }
    }

    /** Get/set whether the node is expanded
     *
     * ```html
     * <igx-tree>
     *  ...
     *  <igx-tree-node *ngFor="let node of data" [expanded]="node.name === this.expandedNode">
     *      {{ node.label }}
     *  </igx-tree-node>
     * </igx-tree>
     * ```
     *
     * ```typescript
     * const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
     * const expanded = node.expanded;
     * node.expanded = true;
     * ```
     */
    @Input({ transform: booleanAttribute })
    public get expanded() {
        return this.treeService.isExpanded(this);
    }

    public set expanded(val: boolean) {
        if (val) {
            this.treeService.expand(this, false);
        } else {
            this.treeService.collapse(this);
        }
    }

    /** @hidden @internal */
    public get expandIndicatorTemplate(): TemplateRef<any> {
        return this.tree?.expandIndicator || this._defaultExpandIndicatorTemplate;
    }

    /**
     * The native DOM element representing the node. Could be null in certain environments.
     *
     * ```typescript
     * // get the nativeElement of the second node
     * const node: IgxTreeNode = this.tree.nodes.first();
     * const nodeElement: HTMLElement = node.nativeElement;
     * ```
     */
    /** @hidden @internal */
    public get nativeElement() {
        return this.element.nativeElement;
    }

    /** @hidden @internal */
    public ngOnInit() {
        this.openAnimationDone.pipe(takeUntil(this.destroy$)).subscribe(
            () => {
                this.tree.nodeExpanded.emit({ owner: this.tree, node: this });
            }
        );
        this.closeAnimationDone.pipe(takeUntil(this.destroy$)).subscribe(() => {
            this.tree.nodeCollapsed.emit({ owner: this.tree, node: this });
            this.treeService.collapse(this);
            this.cdr.markForCheck();
        });
    }

    /**
     * @hidden @internal
     * Sets the focus to the node's <a> child, if present
     * Sets the node as the tree service's focusedNode
     * Marks the node as the current active element
     */
    public handleFocus(): void {
        if (this.disabled) {
            return;
        }
        if (this.navService.focusedNode !== this) {
            this.navService.focusedNode = this;
        }
        this.isFocused = true;
        if (this.linkChildren?.length) {
            this.linkChildren.first.nativeElement.focus();
            return;
        }
        if (this.registeredChildren.length) {
            this.registeredChildren[0].elementRef.nativeElement.focus();
            return;
        }
    }

    /**
     * @hidden @internal
     * Clear the node's focused status
     */
    public clearFocus(): void {
        this.isFocused = false;
    }

    /**
     * @hidden @internal
     */
    public onSelectorPointerDown(event) {
        event.preventDefault();
        event.stopPropagation()
    }

    /**
     * @hidden @internal
     */
    public onSelectorClick(event) {
        // event.stopPropagation();
        event.preventDefault();
        // this.navService.handleFocusedAndActiveNode(this);
        if (event.shiftKey) {
            this.selectionService.selectMultipleNodes(this, event);
            return;
        }
        if (this.selected) {
            this.selectionService.deselectNode(this, event);
        } else {
            this.selectionService.selectNode(this, event);
        }
    }

    /**
     * Toggles the node expansion state, triggering animation
     *
     * ```html
     * <igx-tree>
     *      <igx-tree-node #node>My Node</igx-tree-node>
     * </igx-tree>
     * <button type="button" igxButton (click)="node.toggle()">Toggle Node</button>
     * ```
     *
     * ```typescript
     * const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
     * myNode.toggle();
     * ```
     */
    public toggle() {
        if (this.expanded) {
            this.collapse();
        } else {
            this.expand();
        }
    }

    /** @hidden @internal */
    public indicatorClick() {
        if(!this.tree.toggleNodeOnClick) {
            this.toggle();
            this.navService.setFocusedAndActiveNode(this);
        }
    }

    /**
     * @hidden @internal
     */
    public onPointerDown(event) {
        event.stopPropagation();

        //Toggle the node only on left mouse click - https://w3c.github.io/pointerevents/#button-states
        if(this.tree.toggleNodeOnClick && event.button === 0) {
            this.toggle();
        }

        this.navService.setFocusedAndActiveNode(this);
    }

    public override ngOnDestroy() {
        super.ngOnDestroy();
        this.selectionService.ensureStateOnNodeDelete(this);
    }

    /**
     * Expands the node, triggering animation
     *
     * ```html
     * <igx-tree>
     *      <igx-tree-node #node>My Node</igx-tree-node>
     * </igx-tree>
     * <button type="button" igxButton (click)="node.expand()">Expand Node</button>
     * ```
     *
     * ```typescript
     * const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
     * myNode.expand();
     * ```
     */
    public expand() {
        if (this.expanded && !this.treeService.collapsingNodes.has(this)) {
            return;
        }
        const args: ITreeNodeTogglingEventArgs = {
            owner: this.tree,
            node: this,
            cancel: false

        };
        this.tree.nodeExpanding.emit(args);
        if (!args.cancel) {
            this.treeService.expand(this, true);
            this.cdr.detectChanges();
            this.playOpenAnimation(
                this.childrenContainer
            );
        }
    }

    /**
     * Collapses the node, triggering animation
     *
     * ```html
     * <igx-tree>
     *      <igx-tree-node #node>My Node</igx-tree-node>
     * </igx-tree>
     * <button type="button" igxButton (click)="node.collapse()">Collapse Node</button>
     * ```
     *
     * ```typescript
     * const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
     * myNode.collapse();
     * ```
     */
    public collapse() {
        if (!this.expanded || this.treeService.collapsingNodes.has(this)) {
            return;
        }
        const args: ITreeNodeTogglingEventArgs = {
            owner: this.tree,
            node: this,
            cancel: false

        };
        this.tree.nodeCollapsing.emit(args);
        if (!args.cancel) {
            this.treeService.collapsing(this);
            this.playCloseAnimation(
                this.childrenContainer
            );
        }
    }

    /** @hidden @internal */
    public addLinkChild(link: IgxTreeNodeLinkDirective) {
        this._tabIndex = -1;
        this.registeredChildren.push(link);
    }

    /** @hidden @internal */
    public removeLinkChild(link: IgxTreeNodeLinkDirective) {
        const index = this.registeredChildren.indexOf(link);
        if (index !== -1) {
            this.registeredChildren.splice(index, 1);
        }
    }
}

1	import { ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, QueryList, TemplateRef, ViewChild, booleanAttribute, inject } from '@angular/core';
2	import { takeUntil } from 'rxjs/operators';
3	import {
4	IgxTree,
5	IgxTreeNode,
6	IgxTreeSelectionType,
7	IGX_TREE_COMPONENT,
8	IGX_TREE_NODE_COMPONENT,
9	ITreeNodeTogglingEventArgs
10	} from '../common';
11	import { IgxTreeNavigationService } from '../tree-navigation.service';
12	import { IgxTreeSelectionService } from '../tree-selection.service';
13	import { IgxTreeService } from '../tree.service';
14	import { NgTemplateOutlet, NgClass } from '@angular/common';
15	import { IgxIconComponent } from 'igniteui-angular/icon';
16	import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
17	import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
18	import { ToggleAnimationPlayer, ToggleAnimationSettings } from 'igniteui-angular/expansion-panel';
19	import { getCurrentResourceStrings, onResourceChangeHandle, ITreeResourceStrings, TreeResourceStringsEN } from 'igniteui-angular/core';
20
21	// TODO: Implement aria functionality
22	/**
23	* @hidden @internal
24	* Used for links (`a` tags) in the body of an `igx-tree-node`. Handles aria and event dispatch.
25	*/
26	@Directive({
27	selector: `[igxTreeNodeLink]`,
28	standalone: true
29	})
30	export class IgxTreeNodeLinkDirective implements OnDestroy {	3✔
UNCOV 31	private node = inject<IgxTreeNode<any>>(IGX_TREE_NODE_COMPONENT, { optional: true });	×
UNCOV 32	private navService = inject(IgxTreeNavigationService);	×
UNCOV 33	public elementRef = inject(ElementRef);	×
34
35
36	@HostBinding('attr.role')
UNCOV 37	public role = 'treeitem';	×
38
39	/**
40	* The node's parent. Should be used only when the link is defined
41	* in `<ng-template>` tag outside of its parent, as Angular DI will not properly provide a reference
42	*
43	* ```html
44	* <igx-tree>
45	* <igx-tree-node #myNode *ngFor="let node of data" [data]="node">
46	* <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: data, parentNode: myNode }">
47	* </ng-template>
48	* </igx-tree-node>
49	* ...
50	* <!-- node template is defined under tree to access related services -->
51	* <ng-template #nodeTemplate let-data let-node="parentNode">
52	* <a [igxTreeNodeLink]="node">{{ data.label }}</a>
53	* </ng-template>
54	* </igx-tree>
55	* ```
56	*/
57	@Input('igxTreeNodeLink')
58	public set parentNode(val: any) {
UNCOV 59	if (val) {	×
UNCOV 60	this._parentNode = val;	×
UNCOV 61	(this._parentNode as any).addLinkChild(this);	×
62	}
63	}
64
65	public get parentNode(): any {
UNCOV 66	return this._parentNode;	×
67	}
68
69	/** A pointer to the parent node */
70	private get target(): IgxTreeNode<any> {
UNCOV 71	return this.node \|\| this.parentNode;	×
72	}
73
UNCOV 74	private _parentNode: IgxTreeNode<any> = null;	×
75
76	/** @hidden @internal */
77	@HostBinding('attr.tabindex')
78	public get tabIndex(): number {
UNCOV 79	return this.navService.focusedNode === this.target ? (this.target?.disabled ? -1 : 0) : -1;	×
80	}
81
82	/**
83	* @hidden @internal
84	* Clear the node's focused state
85	*/
86	@HostListener('blur')
87	public handleBlur() {
88	this.target.isFocused = false;	×
89	}
90
91	/**
92	* @hidden @internal
93	* Set the node as focused
94	*/
95	@HostListener('focus')
96	public handleFocus() {
UNCOV 97	if (this.target && !this.target.disabled) {	×
UNCOV 98	if (this.navService.focusedNode !== this.target) {	×
99	this.navService.focusedNode = this.target;	×
100	}
UNCOV 101	this.target.isFocused = true;	×
102	}
103	}
104
105	public ngOnDestroy() {
UNCOV 106	this.target.removeLinkChild(this);	×
107	}
108	}
109
110	/**
111	*
112	* The tree node component represents a child node of the tree component or another tree node.
113	* Usage:
114	*
115	* ```html
116	* <igx-tree>
117	* ...
118	* <igx-tree-node [data]="data" [selected]="service.isNodeSelected(data.Key)" [expanded]="service.isNodeExpanded(data.Key)">
119	* {{ data.FirstName }} {{ data.LastName }}
120	* </igx-tree-node>
121	* ...
122	* </igx-tree>
123	* ```
124	*/
125	@Component({
126	selector: 'igx-tree-node',
127	templateUrl: 'tree-node.component.html',
128	providers: [
129	{ provide: IGX_TREE_NODE_COMPONENT, useExisting: IgxTreeNodeComponent }
130	],
131	imports: [NgTemplateOutlet, IgxIconComponent, IgxCheckboxComponent, NgClass, IgxCircularProgressBarComponent]
132	})
133	export class IgxTreeNodeComponent<T> extends ToggleAnimationPlayer implements IgxTreeNode<T>, OnInit, OnDestroy {	3✔
UNCOV 134	public tree = inject<IgxTree>(IGX_TREE_COMPONENT);	×
UNCOV 135	protected selectionService = inject(IgxTreeSelectionService);	×
UNCOV 136	protected treeService = inject(IgxTreeService);	×
UNCOV 137	protected navService = inject(IgxTreeNavigationService);	×
UNCOV 138	protected cdr = inject(ChangeDetectorRef);	×
UNCOV 139	private element = inject<ElementRef<HTMLElement>>(ElementRef);	×
UNCOV 140	public parentNode = inject<IgxTreeNode<any>>(IGX_TREE_NODE_COMPONENT, { optional: true, skipSelf: true });	×
141
142	/**
143	* The data entry that the node is visualizing.
144	*
145	* @remarks
146	* Required for searching through nodes.
147	*
148	* @example
149	* ```html
150	* <igx-tree>
151	* ...
152	* <igx-tree-node [data]="data">
153	* {{ data.FirstName }} {{ data.LastName }}
154	* </igx-tree-node>
155	* ...
156	* </igx-tree>
157	* ```
158	*/
159	@Input()
160	public data: T;
161
162	/**
163	* To be used for load-on-demand scenarios in order to specify whether the node is loading data.
164	*
165	* @remarks
166	* Loading nodes do not render children.
167	*/
168	@Input({ transform: booleanAttribute })
UNCOV 169	public loading = false;	×
170
171	// TO DO: return different tab index depending on anchor child
172	/** @hidden @internal */
173	public set tabIndex(val: number) {
UNCOV 174	this._tabIndex = val;	×
175	}
176
177	/** @hidden @internal */
178	public get tabIndex(): number {
UNCOV 179	if (this.disabled) {	×
UNCOV 180	return -1;	×
181	}
UNCOV 182	if (this._tabIndex === null) {	×
UNCOV 183	if (this.navService.focusedNode === null) {	×
UNCOV 184	return this.hasLinkChildren ? -1 : 0;	×
185	}
UNCOV 186	return -1;	×
187	}
UNCOV 188	return this.hasLinkChildren ? -1 : this._tabIndex;	×
189	}
190
191	/** @hidden @internal */
192	public override get animationSettings(): ToggleAnimationSettings {
UNCOV 193	return this.tree.animationSettings;	×
194	}
195
196	/**
197	* Gets/Sets the resource strings.
198	*
199	* @remarks
200	* Uses EN resources by default.
201	*/
202	@Input()
203	public set resourceStrings(value: ITreeResourceStrings) {
204	this._resourceStrings = Object.assign({}, this._resourceStrings, value);	×
205	}
206
207	/**
208	* An accessor that returns the resource strings.
209	*/
210	public get resourceStrings(): ITreeResourceStrings {
UNCOV 211	return this._resourceStrings \|\| this._defaultResourceStrings;	×
212	}
213
214	/**
215	* Gets/Sets the active state of the node
216	*
217	* @param value: boolean
218	*/
219	@Input({ transform: booleanAttribute })
220	public set active(value: boolean) {
UNCOV 221	if (value) {	×
UNCOV 222	this.navService.activeNode = this;	×
UNCOV 223	this.tree.activeNodeBindingChange.emit(this);	×
224	}
225	}
226
227	public get active(): boolean {
UNCOV 228	return this.navService.activeNode === this;	×
229	}
230
231	/**
232	* Emitted when the node's `selected` property changes.
233	*
234	* ```html
235	* <igx-tree>
236	* <igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected">
237	* </igx-tree-node>
238	* </igx-tree>
239	* ```
240	*
241	* ```typescript
242	* const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
243	* node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e))
244	* ```
245	*/
246	@Output()
UNCOV 247	public selectedChange = new EventEmitter<boolean>();	×
248
249	/**
250	* Emitted when the node's `expanded` property changes.
251	*
252	* ```html
253	* <igx-tree>
254	* <igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded">
255	* </igx-tree-node>
256	* </igx-tree>
257	* ```
258	*
259	* ```typescript
260	* const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
261	* node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e))
262	* ```
263	*/
264	@Output()
UNCOV 265	public expandedChange = new EventEmitter<boolean>();	×
266
267	/** @hidden @internal */
268	public get focused() {
UNCOV 269	return this.isFocused &&	×
270	this.navService.focusedNode === this;
271	}
272
273	/**
274	* Retrieves the full path to the node incuding itself
275	*
276	* ```typescript
277	* const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
278	* const path: IgxTreeNode<any>[] = node.path;
279	* ```
280	*/
281	public get path(): IgxTreeNode<any>[] {
UNCOV 282	return this.parentNode?.path ? [...this.parentNode.path, this] : [this];	×
283	}
284
285	// TODO: bind to disabled state when node is dragged
286	/**
287	* Gets/Sets the disabled state of the node
288	*
289	* @param value: boolean
290	*/
291	@Input({ transform: booleanAttribute })
292	@HostBinding('class.igx-tree-node--disabled')
293	public get disabled(): boolean {
UNCOV 294	return this._disabled;	×
295	}
296
297	public set disabled(value: boolean) {
UNCOV 298	if (value !== this._disabled) {	×
UNCOV 299	this._disabled = value;	×
UNCOV 300	this.tree.disabledChange.emit(this);	×
301	}
302	}
303
304	/** @hidden @internal */
305	@HostBinding('class.igx-tree-node')
UNCOV 306	public cssClass = 'igx-tree-node';	×
307
308	/** @hidden @internal */
309	@HostBinding('attr.role')
310	public get role() {
UNCOV 311	return this.hasLinkChildren ? 'none' : 'treeitem';	×
312	}
313
314	/** @hidden @internal */
315	@ContentChildren(IgxTreeNodeLinkDirective, { read: ElementRef })
316	public linkChildren: QueryList<ElementRef>;
317
318	/** @hidden @internal */
319	@ContentChildren(IGX_TREE_NODE_COMPONENT, { read: IGX_TREE_NODE_COMPONENT })
320	public _children: QueryList<IgxTreeNode<any>>;
321
322	/** @hidden @internal */
323	@ContentChildren(IGX_TREE_NODE_COMPONENT, { read: IGX_TREE_NODE_COMPONENT, descendants: true })
324	public allChildren: QueryList<IgxTreeNode<any>>;
325
326	/**
327	* Return the child nodes of the node (if any)
328	*
329	* @remarks
330	* Returns `null` if node does not have children
331	*
332	* @example
333	* ```typescript
334	* const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
335	* const children: IgxTreeNode<any>[] = node.children;
336	* ```
337	*/
338	public get children(): IgxTreeNode<any>[] {
339	return this._children?.length ? this._children.toArray() : null;	×
340	}
341
342	// TODO: will be used in Drag and Drop implementation
343	/** @hidden @internal */
344	@ViewChild('ghostTemplate', { read: ElementRef })
345	public header: ElementRef;
346
347	@ViewChild('defaultIndicator', { read: TemplateRef, static: true })
348	private _defaultExpandIndicatorTemplate: TemplateRef<any>;
349
350	@ViewChild('childrenContainer', { read: ElementRef })
351	private childrenContainer: ElementRef;
352
353	private get hasLinkChildren(): boolean {
UNCOV 354	return this.linkChildren?.length > 0 \|\| this.registeredChildren?.length > 0;	×
355	}
356
357	/** @hidden @internal */
358	public isFocused: boolean;
359
360	/** @hidden @internal */
UNCOV 361	public registeredChildren: IgxTreeNodeLinkDirective[] = [];	×
362
UNCOV 363	private _resourceStrings: ITreeResourceStrings = null;	×
UNCOV 364	private _defaultResourceStrings = getCurrentResourceStrings(TreeResourceStringsEN);	×
UNCOV 365	private _tabIndex = null;	×
UNCOV 366	private _disabled = false;	×
367
368	constructor() {
UNCOV 369	super();	×
UNCOV 370	onResourceChangeHandle(this.destroy$, () => {	×
371	this._defaultResourceStrings = getCurrentResourceStrings(TreeResourceStringsEN, false);	×
372	}, this);
373	}
374
375	/**
376	* @hidden @internal
377	*/
378	public get showSelectors() {
UNCOV 379	return this.tree.selection !== IgxTreeSelectionType.None;	×
380	}
381
382	/**
383	* @hidden @internal
384	*/
385	public get indeterminate(): boolean {
UNCOV 386	return this.selectionService.isNodeIndeterminate(this);	×
387	}
388
389	/** The depth of the node, relative to the root
390	*
391	* ```html
392	* <igx-tree>
393	* ...
394	* <igx-tree-node #node>
395	* My level is {{ node.level }}
396	* </igx-tree-node>
397	* </igx-tree>
398	* ```
399	*
400	* ```typescript
401	* const node: IgxTreeNode<any> = this.tree.findNodes(data[12])[0];
402	* const level: number = node.level;
403	* ```
404	*/
405	public get level(): number {
UNCOV 406	return this.parentNode ? this.parentNode.level + 1 : 0;	×
407	}
408
409	/** Get/set whether the node is selected. Supporst two-way binding.
410	*
411	* ```html
412	* <igx-tree>
413	* ...
414	* <igx-tree-node *ngFor="let node of data" [(selected)]="node.selected">
415	* {{ node.label }}
416	* </igx-tree-node>
417	* </igx-tree>
418	* ```
419	*
420	* ```typescript
421	* const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
422	* const selected = node.selected;
423	* node.selected = true;
424	* ```
425	*/
426	@Input({ transform: booleanAttribute })
427	public get selected(): boolean {
UNCOV 428	return this.selectionService.isNodeSelected(this);	×
429	}
430
431	public set selected(val: boolean) {
UNCOV 432	if (!(this.tree?.nodes && this.tree.nodes.find((e) => e === this)) && val) {	×
UNCOV 433	this.tree.forceSelect.push(this);	×
UNCOV 434	return;	×
435	}
UNCOV 436	if (val && !this.selectionService.isNodeSelected(this)) {	×
UNCOV 437	this.selectionService.selectNodesWithNoEvent([this]);	×
438	}
UNCOV 439	if (!val && this.selectionService.isNodeSelected(this)) {	×
UNCOV 440	this.selectionService.deselectNodesWithNoEvent([this]);	×
441	}
442	}
443
444	/** Get/set whether the node is expanded
445	*
446	* ```html
447	* <igx-tree>
448	* ...
449	* <igx-tree-node *ngFor="let node of data" [expanded]="node.name === this.expandedNode">
450	* {{ node.label }}
451	* </igx-tree-node>
452	* </igx-tree>
453	* ```
454	*
455	* ```typescript
456	* const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
457	* const expanded = node.expanded;
458	* node.expanded = true;
459	* ```
460	*/
461	@Input({ transform: booleanAttribute })
462	public get expanded() {
UNCOV 463	return this.treeService.isExpanded(this);	×
464	}
465
466	public set expanded(val: boolean) {
UNCOV 467	if (val) {	×
UNCOV 468	this.treeService.expand(this, false);	×
469	} else {
UNCOV 470	this.treeService.collapse(this);	×
471	}
472	}
473
474	/** @hidden @internal */
475	public get expandIndicatorTemplate(): TemplateRef<any> {
UNCOV 476	return this.tree?.expandIndicator \|\| this._defaultExpandIndicatorTemplate;	×
477	}
478
479	/**
480	* The native DOM element representing the node. Could be null in certain environments.
481	*
482	* ```typescript
483	* // get the nativeElement of the second node
484	* const node: IgxTreeNode = this.tree.nodes.first();
485	* const nodeElement: HTMLElement = node.nativeElement;
486	* ```
487	*/
488	/** @hidden @internal */
489	public get nativeElement() {
UNCOV 490	return this.element.nativeElement;	×
491	}
492
493	/** @hidden @internal */
494	public ngOnInit() {
UNCOV 495	this.openAnimationDone.pipe(takeUntil(this.destroy$)).subscribe(	×
496	() => {
UNCOV 497	this.tree.nodeExpanded.emit({ owner: this.tree, node: this });	×
498	}
499	);
UNCOV 500	this.closeAnimationDone.pipe(takeUntil(this.destroy$)).subscribe(() => {	×
UNCOV 501	this.tree.nodeCollapsed.emit({ owner: this.tree, node: this });	×
UNCOV 502	this.treeService.collapse(this);	×
UNCOV 503	this.cdr.markForCheck();	×
504	});
505	}
506
507	/**
508	* @hidden @internal
509	* Sets the focus to the node's <a> child, if present
510	* Sets the node as the tree service's focusedNode
511	* Marks the node as the current active element
512	*/
513	public handleFocus(): void {
UNCOV 514	if (this.disabled) {	×
515	return;	×
516	}
UNCOV 517	if (this.navService.focusedNode !== this) {	×
518	this.navService.focusedNode = this;	×
519	}
UNCOV 520	this.isFocused = true;	×
UNCOV 521	if (this.linkChildren?.length) {	×
UNCOV 522	this.linkChildren.first.nativeElement.focus();	×
UNCOV 523	return;	×
524	}
UNCOV 525	if (this.registeredChildren.length) {	×
UNCOV 526	this.registeredChildren[0].elementRef.nativeElement.focus();	×
UNCOV 527	return;	×
528	}
529	}
530
531	/**
532	* @hidden @internal
533	* Clear the node's focused status
534	*/
535	public clearFocus(): void {
UNCOV 536	this.isFocused = false;	×
537	}
538
539	/**
540	* @hidden @internal
541	*/
542	public onSelectorPointerDown(event) {
543	event.preventDefault();	×
544	event.stopPropagation()	×
545	}
546
547	/**
548	* @hidden @internal
549	*/
550	public onSelectorClick(event) {
551	// event.stopPropagation();
UNCOV 552	event.preventDefault();	×
553	// this.navService.handleFocusedAndActiveNode(this);
UNCOV 554	if (event.shiftKey) {	×
UNCOV 555	this.selectionService.selectMultipleNodes(this, event);	×
UNCOV 556	return;	×
557	}
UNCOV 558	if (this.selected) {	×
UNCOV 559	this.selectionService.deselectNode(this, event);	×
560	} else {
UNCOV 561	this.selectionService.selectNode(this, event);	×
562	}
563	}
564
565	/**
566	* Toggles the node expansion state, triggering animation
567	*
568	* ```html
569	* <igx-tree>
570	* <igx-tree-node #node>My Node</igx-tree-node>
571	* </igx-tree>
572	* <button type="button" igxButton (click)="node.toggle()">Toggle Node</button>
573	* ```
574	*
575	* ```typescript
576	* const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
577	* myNode.toggle();
578	* ```
579	*/
580	public toggle() {
UNCOV 581	if (this.expanded) {	×
UNCOV 582	this.collapse();	×
583	} else {
UNCOV 584	this.expand();	×
585	}
586	}
587
588	/** @hidden @internal */
589	public indicatorClick() {
UNCOV 590	if(!this.tree.toggleNodeOnClick) {	×
UNCOV 591	this.toggle();	×
UNCOV 592	this.navService.setFocusedAndActiveNode(this);	×
593	}
594	}
595
596	/**
597	* @hidden @internal
598	*/
599	public onPointerDown(event) {
UNCOV 600	event.stopPropagation();	×
601
602	//Toggle the node only on left mouse click - https://w3c.github.io/pointerevents/#button-states
UNCOV 603	if(this.tree.toggleNodeOnClick && event.button === 0) {	×
UNCOV 604	this.toggle();	×
605	}
606
UNCOV 607	this.navService.setFocusedAndActiveNode(this);	×
608	}
609
610	public override ngOnDestroy() {
UNCOV 611	super.ngOnDestroy();	×
UNCOV 612	this.selectionService.ensureStateOnNodeDelete(this);	×
613	}
614
615	/**
616	* Expands the node, triggering animation
617	*
618	* ```html
619	* <igx-tree>
620	* <igx-tree-node #node>My Node</igx-tree-node>
621	* </igx-tree>
622	* <button type="button" igxButton (click)="node.expand()">Expand Node</button>
623	* ```
624	*
625	* ```typescript
626	* const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
627	* myNode.expand();
628	* ```
629	*/
630	public expand() {
UNCOV 631	if (this.expanded && !this.treeService.collapsingNodes.has(this)) {	×
UNCOV 632	return;	×
633	}
UNCOV 634	const args: ITreeNodeTogglingEventArgs = {	×
635	owner: this.tree,
636	node: this,
637	cancel: false
638
639	};
UNCOV 640	this.tree.nodeExpanding.emit(args);	×
UNCOV 641	if (!args.cancel) {	×
UNCOV 642	this.treeService.expand(this, true);	×
UNCOV 643	this.cdr.detectChanges();	×
UNCOV 644	this.playOpenAnimation(	×
645	this.childrenContainer
646	);
647	}
648	}
649
650	/**
651	* Collapses the node, triggering animation
652	*
653	* ```html
654	* <igx-tree>
655	* <igx-tree-node #node>My Node</igx-tree-node>
656	* </igx-tree>
657	* <button type="button" igxButton (click)="node.collapse()">Collapse Node</button>
658	* ```
659	*
660	* ```typescript
661	* const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
662	* myNode.collapse();
663	* ```
664	*/
665	public collapse() {
UNCOV 666	if (!this.expanded \|\| this.treeService.collapsingNodes.has(this)) {	×
UNCOV 667	return;	×
668	}
UNCOV 669	const args: ITreeNodeTogglingEventArgs = {	×
670	owner: this.tree,
671	node: this,
672	cancel: false
673
674	};
UNCOV 675	this.tree.nodeCollapsing.emit(args);	×
UNCOV 676	if (!args.cancel) {	×
UNCOV 677	this.treeService.collapsing(this);	×
UNCOV 678	this.playCloseAnimation(	×
679	this.childrenContainer
680	);
681	}
682	}
683
684	/** @hidden @internal */
685	public addLinkChild(link: IgxTreeNodeLinkDirective) {
UNCOV 686	this._tabIndex = -1;	×
UNCOV 687	this.registeredChildren.push(link);	×
688	}
689
690	/** @hidden @internal */
691	public removeLinkChild(link: IgxTreeNodeLinkDirective) {
UNCOV 692	const index = this.registeredChildren.indexOf(link);	×
UNCOV 693	if (index !== -1) {	×
UNCOV 694	this.registeredChildren.splice(index, 1);	×
695	}
696	}
697	}

IgniteUI / igniteui-angular / 23353834934

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous