9642257037

Committed 24 Jun 2024 08:38AM UTC coverage: 97.858% (-0.002%) from 97.86%

Build # 9642257037

Build Type

Pull #1198

github

Committed by

web-flow

Commit Message

Merge 19e6a08d6 into 1d12ad684

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

Run Details

3567 of 3785 branches covered (94.24%)

Branch coverage included in aggregate %.

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

8 existing lines in 4 files now uncovered.

22335 of 22684 relevant lines covered (98.46%)

422.17 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';	22✔
2	import { property } from 'lit/decorators.js';	22✔
3		22✔
4	import { themes } from '../../theming/theming-decorator.js';	22✔
5	import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';	22✔
6	import { blazorSuppress } from '../common/decorators/blazorSuppress.js';	22✔
7	import { watch } from '../common/decorators/watch.js';	22✔
8	import { registerComponent } from '../common/definitions/register.js';	22✔
9	import type { Constructor } from '../common/mixins/constructor.js';	22✔
10	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	22✔
11	import { SizableMixin } from '../common/mixins/sizable.js';	22✔
12	import { styles } from './themes/container.base.css.js';	22✔
13	import { all } from './themes/container.js';	22✔
14	import IgcTreeItemComponent from './tree-item.js';	22✔
15	import type { IgcTreeEventMap } from './tree.common.js';	22✔
16	import { IgcTreeNavigationService } from './tree.navigation.js';	22✔
17	import { IgcTreeSelectionService } from './tree.selection.js';	22✔
18		22✔
19	/**	22✔
20	* The tree allows users to represent hierarchical data in a tree-view structure,	22✔
21	* maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.	22✔
22	*	22✔
23	* @element igc-tree	22✔
24	*	22✔
25	* @slot - Renders the tree items inside default slot.	22✔
26	*	22✔
27	* @fires igcSelection - Emitted when item selection is changing, before the selection completes.	22✔
28	* @fires igcItemCollapsed - Emitted when tree item is collapsed.	22✔
29	* @fires igcItemCollapsing - Emitted when tree item is about to collapse.	22✔
30	* @fires igcItemExpanded - Emitted when tree item is expanded.	22✔
31	* @fires igcItemExpanding - Emitted when tree item is about to expand.	22✔
32	* @fires igcItemActivated - Emitted when the tree's `active` item changes.	22✔
33	*/	22✔
34	@themes(all)	22✔
35	@blazorAdditionalDependencies('IgcTreeItemComponent')	22✔
36	export default class IgcTreeComponent extends SizableMixin(	22✔
37	EventEmitterMixin<IgcTreeEventMap, Constructor<LitElement>>(LitElement)	22✔
38	) {	22✔
39	public static readonly tagName = 'igc-tree';	22✔
40	public static styles = styles;	22✔
41		22✔
42	/* blazorSuppress */	22✔
43	public static register() {	22✔
44	registerComponent(IgcTreeComponent, IgcTreeItemComponent);	4✔
45	}	4✔
46		22✔
47	/** @private */	22✔
48	@blazorSuppress()	22✔
49	public selectionService!: IgcTreeSelectionService;	22✔
50	/** @private */	22✔
51	@blazorSuppress()	22✔
52	public navService!: IgcTreeNavigationService;	22✔
53		22✔
54	/**	22✔
55	* Whether a single or multiple of a parent's child items can be expanded.	22✔
56	* @attr single-branch-expand	22✔
57	*/	22✔
58	@property({ attribute: 'single-branch-expand', reflect: true, type: Boolean })	22✔
59	public singleBranchExpand = false;	22✔
60		22✔
61	/**	22✔
62	* Whether clicking over nodes will change their expanded state or not.	22✔
63	* @attr toggle-node-on-click	22✔
64	*/	22✔
65	@property({ attribute: 'toggle-node-on-click', reflect: true, type: Boolean })	22✔
66	public toggleNodeOnClick = false;	22✔
67		22✔
68	/**	22✔
69	* The selection state of the tree.	22✔
70	* @attr	22✔
71	*/	22✔
72	@property({ reflect: true })	22✔
73	public selection: 'none' \| 'multiple' \| 'cascade' = 'none';	22✔
74		22✔
75	@watch('dir')	22✔
76	protected onDirChange(): void {	22✔
77	this.items?.forEach((item: IgcTreeItemComponent) => {	×
78	item.requestUpdate();	×
UNCOV 79	});	×
UNCOV 80	}	×
81		22✔
82	@watch('size', { waitUntilFirstUpdate: true })	22✔
83	protected onSizeChange(): void {	22✔
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		22✔
94	@watch('selection', { waitUntilFirstUpdate: true })	22✔
95	protected selectionModeChange(): void {	22✔
96	this.selectionService.clearItemsSelection();	9✔
97	this.items?.forEach((item: IgcTreeItemComponent) => {	9✔
98	item.requestUpdate();	96✔
99	});	9✔
100	}	9✔
101		22✔
102	@watch('singleBranchExpand')	22✔
103	protected singleBranchExpandChange(): void {	22✔
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		22✔
120	constructor() {	22✔
121	super();	115✔
122	this.selectionService = new IgcTreeSelectionService(this);	115✔
123	this.navService = new IgcTreeNavigationService(this, this.selectionService);	115✔
124	}	115✔
125		22✔
126	public override connectedCallback(): void {	22✔
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		22✔
143	/** Returns all of the tree's items. */	22✔
144	@blazorSuppress()	22✔
145	public get items(): Array<IgcTreeItemComponent> {	22✔
146	return Array.from(this.querySelectorAll('igc-tree-item'));	7,561✔
147	}	7,561✔
148		22✔
149	private handleKeydown(event: KeyboardEvent) {	22✔
150	this.navService.handleKeydown(event);	48✔
151	}	48✔
152		22✔
153	/** @private */	22✔
154	public expandToItem(item: IgcTreeItemComponent): void {	22✔
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		22✔
164	/** Select all items if the items collection is empty. Otherwise, select the items in the items collection. */	22✔
165	@blazorSuppress()	22✔
166	public select(	22✔
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		22✔
181	/** Deselect all items if the items collection is empty. Otherwise, deselect the items in the items collection. */	22✔
182	@blazorSuppress()	22✔
183	public deselect(	22✔
184	/* alternateType: TreeItemCollection */	7✔
185	items?: IgcTreeItemComponent[]	7✔
186	): void {	7✔
187	this.selectionService.deselectItemsWithNoEvent(items);	7✔
188	}	7✔
189		22✔
190	/**	22✔
191	* Expands all of the passed items.	22✔
192	* If no items are passed, expands ALL items.	22✔
193	*/	22✔
194	@blazorSuppress()	22✔
195	public expand(	22✔
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		22✔
205	/**	22✔
206	* Collapses all of the passed items.	22✔
207	* If no items are passed, collapses ALL items.	22✔
208	*/	22✔
209	@blazorSuppress()	22✔
210	public collapse(	22✔
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		22✔
220	protected override render() {	22✔
221	return html`<slot></slot>`;	132✔
222	}	132✔
223	}	22✔
224		22✔
225	declare global {	22✔
226	interface HTMLElementTagNameMap {	22✔
227	'igc-tree': IgcTreeComponent;	22✔
228	}	22✔
229	}	22✔

IgniteUI / igniteui-webcomponents / 9642257037

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