9299682367

Committed 30 May 2024 08:45AM UTC coverage: 97.708% (-0.003%) from 97.711%

Build # 9299682367

Build Type

Pull #1198

github

Committed by

web-flow

Commit Message

Merge f325d1a9f into 2e8d9e826

Pull Request Pull Request #1198: refactor: Removed blazor decorators

Run Details

3333 of 3550 branches covered (93.89%)

Branch coverage included in aggregate %.

63 of 63 new or added lines in 14 files covered. (100.0%)

13 existing lines in 5 files now uncovered.

20884 of 21235 relevant lines covered (98.35%)

343.4 hits per line

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

97.74

/src/components/tree/tree.ts

import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';

import { themes } from '../../theming/theming-decorator.js';
import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import type { Constructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { SizableMixin } from '../common/mixins/sizable.js';
import { styles } from './themes/container.base.css.js';
import { all } from './themes/container.js';
import IgcTreeItemComponent from './tree-item.js';
import type { IgcTreeEventMap } from './tree.common.js';
import { IgcTreeNavigationService } from './tree.navigation.js';
import { IgcTreeSelectionService } from './tree.selection.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 igcItemActivated - Emitted when the tree's `active` item changes.
 */
@themes(all)
@blazorAdditionalDependencies('IgcTreeItemComponent')
export default class IgcTreeComponent extends SizableMixin(
  EventEmitterMixin<IgcTreeEventMap, Constructor<LitElement>>(LitElement)
) {
  public static readonly tagName = 'igc-tree';
  public static styles = styles;

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

  /** @private */
  @blazorSuppress()
  public selectionService!: IgcTreeSelectionService;
  /** @private */
  @blazorSuppress()
  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: 'none' | 'multiple' | 'cascade' = 'none';

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

  @watch('size', { waitUntilFirstUpdate: true })
  protected onSizeChange(): void {
    this.items?.forEach((item: IgcTreeItemComponent) => {
      item.requestUpdate();
    });
    this.navService.activeItem?.wrapper?.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'nearest',
    });
  }

  @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 {
        this.items.forEach((item) => item.collapseWithEvent());
      }
    }
  }

  constructor() {
    super();
    this.selectionService = new IgcTreeSelectionService(this);
    this.navService = new IgcTreeNavigationService(this, this.selectionService);
  }

  public override connectedCallback(): void {
    super.connectedCallback();
    this.setAttribute('role', 'tree');
    this.addEventListener('keydown', this.handleKeydown);
    // 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);
    }
  }

  /** Returns all of the tree's items. */
  @blazorSuppress()
  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;
        }
      });
    }
  }

  /** Select all items if the items collection is empty. Otherwise, select the items in the items collection. */
  @blazorSuppress()
  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);
    }
  }

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

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

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

IgniteUI / igniteui-webcomponents / 9299682367

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