• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

IgniteUI / igniteui-webcomponents / 19433231541

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

push

github

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

---------

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

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
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✔
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2026 Coveralls, Inc