19433231541

Committed 17 Nov 2025 02:34PM UTC coverage: 98.225% (+0.05%) from 98.175%

Build # 19433231541

Build Type

push

github

Committed by

web-flow

Commit Message

Use new Intl formatter instances where applicable. (#1845)

---------

Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com>

Run Details

5291 of 5560 branches covered (95.16%)

Branch coverage included in aggregate %.

368 of 377 new or added lines in 24 files covered. (97.61%)

1 existing line in 1 file now uncovered.

35270 of 35734 relevant lines covered (98.7%)

1596.54 hits per line

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

96.6

/src/components/tree/tree.ts

import {
  type ITreeResourceStrings,
  TreeResourceStringsEN,
} from 'igniteui-i18n-core';
import { html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { addThemingController } from '../../theming/theming-controller.js';
import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { addI18nController } from '../common/i18n/i18n-controller.js';
import type { Constructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { addSafeEventListener } from '../common/util.js';
import type { TreeSelection } from '../types.js';
import { styles } from './themes/container.base.css.js';
import { all } from './themes/container.js';
import type { IgcTreeComponentEventMap } from './tree.common.js';
import { IgcTreeNavigationService } from './tree.navigation.js';
import { IgcTreeSelectionService } from './tree.selection.js';
import IgcTreeItemComponent from './tree-item.js';

/**
 * The tree allows users to represent hierarchical data in a tree-view structure,
 * maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.
 *
 * @element igc-tree
 *
 * @slot - Renders the tree items inside default slot.
 *
 * @fires igcSelection - Emitted when item selection is changing, before the selection completes.
 * @fires igcItemCollapsed - Emitted when tree item is collapsed.
 * @fires igcItemCollapsing - Emitted when tree item is about to collapse.
 * @fires igcItemExpanded - Emitted when tree item is expanded.
 * @fires igcItemExpanding - Emitted when tree item is about to expand.
 * @fires igcActiveItem - Emitted when the tree's `active` item changes.
 */
@blazorAdditionalDependencies('IgcTreeItemComponent')
export default class IgcTreeComponent extends EventEmitterMixin<
  IgcTreeComponentEventMap,
  Constructor<LitElement>
>(LitElement) {
  public static readonly tagName = 'igc-tree';
  public static styles = styles;

  /* blazorSuppress */
  public static register() {
    registerComponent(IgcTreeComponent, IgcTreeItemComponent);
  }

  private readonly _i18nController = addI18nController<ITreeResourceStrings>(
    this,
    {
      defaultEN: TreeResourceStringsEN,
    }
  );

  /** @private @hidden @internal */
  public selectionService!: IgcTreeSelectionService;

  /** @private @hidden @internal */
  public navService!: IgcTreeNavigationService;

  /**
   * Whether a single or multiple of a parent's child items can be expanded.
   * @attr single-branch-expand
   */
  @property({ attribute: 'single-branch-expand', reflect: true, type: Boolean })
  public singleBranchExpand = false;

  /**
   * Whether clicking over nodes will change their expanded state or not.
   * @attr toggle-node-on-click
   */
  @property({ attribute: 'toggle-node-on-click', reflect: true, type: Boolean })
  public toggleNodeOnClick = false;

  /**
   * The selection state of the tree.
   * @attr
   */
  @property({ reflect: true })
  public selection: TreeSelection = 'none';

  /**
   * Gets/Sets the locale used for getting language, affecting resource strings.
   * @attr locale
   */
  @property()
  public set locale(value: string) {
    this._i18nController.locale = value;
  }

  public get locale() {
    return this._i18nController.locale;
  }

  /**
   * The resource strings for localization.
   * Currently only aria-labels of the default expand/collapse icons are localized for the tree item.
   */
  @property({ attribute: false })
  public set resourceStrings(value: ITreeResourceStrings) {
    this._i18nController.resourceStrings = value;
  }

  public get resourceStrings(): ITreeResourceStrings {
    return this._i18nController.resourceStrings;
  }

  @watch('dir')
  protected onDirChange(): void {
    this.items?.forEach((item: IgcTreeItemComponent) => {
      item.requestUpdate();
    });
  }

  @watch('selection', { waitUntilFirstUpdate: true })
  protected selectionModeChange(): void {
    this.selectionService.clearItemsSelection();
    this.items?.forEach((item: IgcTreeItemComponent) => {
      item.requestUpdate();
    });
  }

  @watch('singleBranchExpand')
  protected singleBranchExpandChange(): void {
    if (this.singleBranchExpand) {
      // if activeItem -> do not collapse its branch
      if (this.navService.activeItem) {
        const path = this.navService.activeItem.path;
        const remainExpanded = new Set(path.splice(0, path.length - 1));
        this.items.forEach((item) => {
          if (!remainExpanded.has(item)) {
            item.collapseWithEvent();
          }
        });
      } else {
        for (const item of this.items) {
          item.collapseWithEvent();
        }
      }
    }
  }

  constructor() {
    super();

    addThemingController(this, all);

    this.selectionService = new IgcTreeSelectionService(this);
    this.navService = new IgcTreeNavigationService(this, this.selectionService);

    addSafeEventListener(this, 'keydown', this.handleKeydown);
  }

  public override connectedCallback(): void {
    super.connectedCallback();
    this.setAttribute('role', 'tree');
    // set init to true for all items which are rendered along with the tree
    this.items.forEach((i: IgcTreeItemComponent) => {
      i.init = true;
    });
    const firstNotDisabledItem = this.items.find(
      (i: IgcTreeItemComponent) => !i.disabled
    );
    if (firstNotDisabledItem) {
      firstNotDisabledItem.tabIndex = 0;
      this.navService.focusItem(firstNotDisabledItem);
    }
  }

  /* blazorSuppress */
  /** Returns all of the tree's items. */
  public get items(): Array<IgcTreeItemComponent> {
    return Array.from(this.querySelectorAll('igc-tree-item'));
  }

  private handleKeydown(event: KeyboardEvent) {
    this.navService.handleKeydown(event);
  }

  /** @private */
  public expandToItem(item: IgcTreeItemComponent): void {
    if (item?.parent) {
      item.path.forEach((i) => {
        if (i !== item && !i.expanded) {
          i.expanded = true;
        }
      });
    }
  }

  /* blazorSuppress */
  /** Select all items if the items collection is empty. Otherwise, select the items in the items collection. */
  public select(
    /* alternateType: TreeItemCollection */
    items?: IgcTreeItemComponent[]
  ): void {
    if (!items) {
      this.selectionService.selectItemsWithNoEvent(
        this.selection === 'cascade'
          ? this.items.filter((item) => item.level === 0)
          : this.items
      );
    } else {
      this.selectionService.selectItemsWithNoEvent(items);
    }
  }

  /* blazorSuppress */
  /** Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection. */
  public deselect(
    /* alternateType: TreeItemCollection */
    items?: IgcTreeItemComponent[]
  ): void {
    this.selectionService.deselectItemsWithNoEvent(items);
  }

  /* blazorSuppress */
  /**
   * Expands all of the passed items.
   * If no items are passed, expands ALL items.
   */
  public expand(
    /* alternateType: TreeItemCollection */
    items?: IgcTreeItemComponent[]
  ): void {
    const _items = items || this.items;
    _items.forEach((item) => {
      item.expanded = true;
    });
  }

  /* blazorSuppress */
  /**
   * Collapses all of the passed items.
   * If no items are passed, collapses ALL items.
   */
  public collapse(
    /* alternateType: TreeItemCollection */
    items?: IgcTreeItemComponent[]
  ): void {
    const _items = items || this.items;
    _items.forEach((item) => {
      item.expanded = false;
    });
  }

  protected override render() {
    return html`<slot></slot>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-tree': IgcTreeComponent;
  }
}

1	import {	10✔
2	type ITreeResourceStrings,	10✔
3	TreeResourceStringsEN,	10✔
4	} from 'igniteui-i18n-core';	10✔
5	import { html, LitElement } from 'lit';	10✔
6	import { property } from 'lit/decorators.js';	10✔
7	import { addThemingController } from '../../theming/theming-controller.js';	10✔
8	import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';	10✔
9	import { watch } from '../common/decorators/watch.js';	10✔
10	import { registerComponent } from '../common/definitions/register.js';	10✔
11	import { addI18nController } from '../common/i18n/i18n-controller.js';	10✔
12	import type { Constructor } from '../common/mixins/constructor.js';	10✔
13	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	10✔
14	import { addSafeEventListener } from '../common/util.js';	10✔
15	import type { TreeSelection } from '../types.js';	10✔
16	import { styles } from './themes/container.base.css.js';	10✔
17	import { all } from './themes/container.js';	10✔
18	import type { IgcTreeComponentEventMap } from './tree.common.js';	10✔
19	import { IgcTreeNavigationService } from './tree.navigation.js';	10✔
20	import { IgcTreeSelectionService } from './tree.selection.js';	10✔
21	import IgcTreeItemComponent from './tree-item.js';	10✔
22		10✔
23	/**	10✔
24	* The tree allows users to represent hierarchical data in a tree-view structure,	10✔
25	* maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.	10✔
26	*	10✔
27	* @element igc-tree	10✔
28	*	10✔
29	* @slot - Renders the tree items inside default slot.	10✔
30	*	10✔
31	* @fires igcSelection - Emitted when item selection is changing, before the selection completes.	10✔
32	* @fires igcItemCollapsed - Emitted when tree item is collapsed.	10✔
33	* @fires igcItemCollapsing - Emitted when tree item is about to collapse.	10✔
34	* @fires igcItemExpanded - Emitted when tree item is expanded.	10✔
35	* @fires igcItemExpanding - Emitted when tree item is about to expand.	10✔
36	* @fires igcActiveItem - Emitted when the tree's `active` item changes.	10✔
37	*/	10✔
38	@blazorAdditionalDependencies('IgcTreeItemComponent')	10✔
39	export default class IgcTreeComponent extends EventEmitterMixin<	10✔
40	IgcTreeComponentEventMap,	10✔
41	Constructor<LitElement>	10✔
42	>(LitElement) {	10✔
43	public static readonly tagName = 'igc-tree';	10✔
44	public static styles = styles;	10✔
45		10✔
46	/* blazorSuppress */	10✔
47	public static register() {	10✔
48	registerComponent(IgcTreeComponent, IgcTreeItemComponent);	10✔
49	}	10✔
50		10✔
51	private readonly _i18nController = addI18nController<ITreeResourceStrings>(	10✔
52	this,	10✔
53	{	10✔
54	defaultEN: TreeResourceStringsEN,	10✔
55	}	10✔
56	);	10✔
57		10✔
58	/** @private @hidden @internal */	10✔
59	public selectionService!: IgcTreeSelectionService;	10✔
60		10✔
61	/** @private @hidden @internal */	10✔
62	public navService!: IgcTreeNavigationService;	10✔
63		10✔
64	/**	10✔
65	* Whether a single or multiple of a parent's child items can be expanded.	10✔
66	* @attr single-branch-expand	10✔
67	*/	10✔
68	@property({ attribute: 'single-branch-expand', reflect: true, type: Boolean })	10✔
69	public singleBranchExpand = false;	10✔
70		10✔
71	/**	10✔
72	* Whether clicking over nodes will change their expanded state or not.	10✔
73	* @attr toggle-node-on-click	10✔
74	*/	10✔
75	@property({ attribute: 'toggle-node-on-click', reflect: true, type: Boolean })	10✔
76	public toggleNodeOnClick = false;	10✔
77		10✔
78	/**	10✔
79	* The selection state of the tree.	10✔
80	* @attr	10✔
81	*/	10✔
82	@property({ reflect: true })	10✔
83	public selection: TreeSelection = 'none';	10✔
84		10✔
85	/**	10✔
86	* Gets/Sets the locale used for getting language, affecting resource strings.	10✔
87	* @attr locale	10✔
88	*/	10✔
89	@property()	10✔
90	public set locale(value: string) {	10✔
NEW 91	this._i18nController.locale = value;	×
NEW 92	}	×
93		10✔
94	public get locale() {	10✔
95	return this._i18nController.locale;	113✔
96	}	113✔
97		10✔
98	/**	10✔
99	* The resource strings for localization.	10✔
100	* Currently only aria-labels of the default expand/collapse icons are localized for the tree item.	10✔
101	*/	10✔
102	@property({ attribute: false })	10✔
103	public set resourceStrings(value: ITreeResourceStrings) {	10✔
NEW 104	this._i18nController.resourceStrings = value;	×
NEW 105	}	×
106		10✔
107	public get resourceStrings(): ITreeResourceStrings {	10✔
108	return this._i18nController.resourceStrings;	949✔
109	}	949✔
110		10✔
111	@watch('dir')	10✔
112	protected onDirChange(): void {	10✔
113	this.items?.forEach((item: IgcTreeItemComponent) => {	×
114	item.requestUpdate();	×
115	});	×
116	}	×
117		10✔
118	@watch('selection', { waitUntilFirstUpdate: true })	10✔
119	protected selectionModeChange(): void {	10✔
120	this.selectionService.clearItemsSelection();	9✔
121	this.items?.forEach((item: IgcTreeItemComponent) => {	9✔
122	item.requestUpdate();	96✔
123	});	9✔
124	}	9✔
125		10✔
126	@watch('singleBranchExpand')	10✔
127	protected singleBranchExpandChange(): void {	10✔
128	if (this.singleBranchExpand) {	117✔
129	// if activeItem -> do not collapse its branch	4✔
130	if (this.navService.activeItem) {	4✔
131	const path = this.navService.activeItem.path;	1✔
132	const remainExpanded = new Set(path.splice(0, path.length - 1));	1✔
133	this.items.forEach((item) => {	1✔
134	if (!remainExpanded.has(item)) {	14✔
135	item.collapseWithEvent();	12✔
136	}	12✔
137	});	1✔
138	} else {	4✔
139	for (const item of this.items) {	3✔
140	item.collapseWithEvent();	42✔
141	}	42✔
142	}	3✔
143	}	4✔
144	}	117✔
145		10✔
146	constructor() {	10✔
147	super();	113✔
148		113✔
149	addThemingController(this, all);	113✔
150		113✔
151	this.selectionService = new IgcTreeSelectionService(this);	113✔
152	this.navService = new IgcTreeNavigationService(this, this.selectionService);	113✔
153		113✔
154	addSafeEventListener(this, 'keydown', this.handleKeydown);	113✔
155	}	113✔
156		10✔
157	public override connectedCallback(): void {	10✔
158	super.connectedCallback();	113✔
159	this.setAttribute('role', 'tree');	113✔
160	// set init to true for all items which are rendered along with the tree	113✔
161	this.items.forEach((i: IgcTreeItemComponent) => {	113✔
162	i.init = true;	1,358✔
163	});	113✔
164	const firstNotDisabledItem = this.items.find(	113✔
165	(i: IgcTreeItemComponent) => !i.disabled	113✔
166	);	113✔
167	if (firstNotDisabledItem) {	113✔
168	firstNotDisabledItem.tabIndex = 0;	93✔
169	this.navService.focusItem(firstNotDisabledItem);	93✔
170	}	93✔
171	}	113✔
172		10✔
173	/* blazorSuppress */	10✔
174	/** Returns all of the tree's items. */	10✔
175	public get items(): Array<IgcTreeItemComponent> {	10✔
176	return Array.from(this.querySelectorAll('igc-tree-item'));	7,536✔
177	}	7,536✔
178		10✔
179	private handleKeydown(event: KeyboardEvent) {	10✔
180	this.navService.handleKeydown(event);	48✔
181	}	48✔
182		10✔
183	/** @private */	10✔
184	public expandToItem(item: IgcTreeItemComponent): void {	10✔
185	if (item?.parent) {	45✔
186	item.path.forEach((i) => {	29✔
187	if (i !== item && !i.expanded) {	61✔
188	i.expanded = true;	3✔
189	}	3✔
190	});	29✔
191	}	29✔
192	}	45✔
193		10✔
194	/* blazorSuppress */	10✔
195	/** Select all items if the items collection is empty. Otherwise, select the items in the items collection. */	10✔
196	public select(	10✔
197	/* alternateType: TreeItemCollection */	7✔
198	items?: IgcTreeItemComponent[]	7✔
199	): void {	7✔
200	if (!items) {	7✔
201	this.selectionService.selectItemsWithNoEvent(	1✔
202	this.selection === 'cascade'	1!
203	? this.items.filter((item) => item.level === 0)	×
204	: this.items	1✔
205	);	1✔
206	} else {	7✔
207	this.selectionService.selectItemsWithNoEvent(items);	6✔
208	}	6✔
209	}	7✔
210		10✔
211	/* blazorSuppress */	10✔
212	/** Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection. */	10✔
213	public deselect(	10✔
214	/* alternateType: TreeItemCollection */	7✔
215	items?: IgcTreeItemComponent[]	7✔
216	): void {	7✔
217	this.selectionService.deselectItemsWithNoEvent(items);	7✔
218	}	7✔
219		10✔
220	/* blazorSuppress */	10✔
221	/**	10✔
222	* Expands all of the passed items.	10✔
223	* If no items are passed, expands ALL items.	10✔
224	*/	10✔
225	public expand(	10✔
226	/* alternateType: TreeItemCollection */	9✔
227	items?: IgcTreeItemComponent[]	9✔
228	): void {	9✔
229	const _items = items \|\| this.items;	9✔
230	_items.forEach((item) => {	9✔
231	item.expanded = true;	67✔
232	});	9✔
233	}	9✔
234		10✔
235	/* blazorSuppress */	10✔
236	/**	10✔
237	* Collapses all of the passed items.	10✔
238	* If no items are passed, collapses ALL items.	10✔
239	*/	10✔
240	public collapse(	10✔
241	/* alternateType: TreeItemCollection */	2✔
242	items?: IgcTreeItemComponent[]	2✔
243	): void {	2✔
244	const _items = items \|\| this.items;	2✔
245	_items.forEach((item) => {	2✔
246	item.expanded = false;	9✔
247	});	2✔
248	}	2✔
249		10✔
250	protected override render() {	10✔
251	return html`<slot></slot>`;	128✔
252	}	128✔
253	}	10✔
254		10✔
255	declare global {	10✔
256	interface HTMLElementTagNameMap {	10✔
257	'igc-tree': IgcTreeComponent;	10✔
258	}	10✔
259	}	10✔

IgniteUI / igniteui-webcomponents / 19433231541

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