7098961215

Committed 05 Dec 2023 09:50AM UTC coverage: 97.383% (+0.1%) from 97.251%

Build # 7098961215

Build Type

push

github

Committed by

web-flow

Commit Message

feat: Refactor toggle directive into popover component (#983)

* refactor(dropdown): Migrated to popover component
* extracted a base option-like class for dropdown item and select item
* utility classes refactoring
* refactor(select): Use the underlying popover
* Improved behavior to mimic the native select
* WAI-ARIA improvements
* refactor(dropdown): Detached target behavior
* refactor: Moved keybindings to handleEvent pattern
* chore: Improved storybook samples
* refactor: RootClickControllerConfig as type
Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Run Details

3281 of 3501 branches covered (0.0%)

Branch coverage included in aggregate %.

1514 of 1532 new or added lines in 16 files covered. (98.83%)

4 existing lines in 2 files now uncovered.

20569 of 20990 relevant lines covered (97.99%)

432.07 hits per line

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

97.62

/src/components/select/select-group.ts

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

import type IgcSelectItemComponent from './select-item.js';
import { themes } from '../../theming/theming-decorator.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { styles } from '../dropdown/themes/dropdown-group.base.css.js';
import { all } from '../dropdown/themes/group.js';

/**
 * @element igc-select-group - A container for a group of `igc-select-item` components.
 *
 * @slot label - Contains the group's label.
 * @slot - Intended to contain the items belonging to this group.
 *
 * @csspart label - The native label element.
 */
@themes(all)
export default class IgcSelectGroupComponent extends LitElement {
  public static readonly tagName = 'igc-select-group';
  public static override styles = styles;

  public static register() {
    registerComponent(this);
  }

  private _internals: ElementInternals;
  private observer!: MutationObserver;
  private controlledItems!: Array<IgcSelectItemComponent>;

  /** All child `igc-select-item`s. */
  @queryAssignedElements({ flatten: true, selector: 'igc-select-item' })
  public items!: Array<IgcSelectItemComponent>;

  @queryAssignedElements({
    flatten: true,
    selector: 'igc-select-item:not([disabled])',
  })
  protected activeItems!: Array<IgcSelectItemComponent>;

  /**
   * Whether the group item and all its children are disabled.
   * @attr
   */
  @property({ reflect: true, type: Boolean })
  public disabled = false;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._internals.role = 'group';

    this.observer = new MutationObserver(this.updateControlledItems.bind(this));
  }

  public override disconnectedCallback() {
    this.observer.disconnect();
    super.disconnectedCallback();
  }

  protected override async firstUpdated() {
    await this.updateComplete;
    this.controlledItems = this.activeItems;

    this.items.forEach((i) => {
      this.observer.observe(i, {
        attributes: true,
        attributeFilter: ['disabled'],
      });
    });

    this.disabledChange();
  }

  protected updateControlledItems(mutations: MutationRecord[]) {
    mutations.forEach((mutation) => {
      const item = mutation.target as IgcSelectItemComponent;

      if (!this.disabled) {
        this.controlledItems = this.activeItems;
      }

      if (this.disabled && !item.disabled) {
        item.disabled = true;
      }
    });
  }

  @watch('disabled', { waitUntilFirstUpdate: true })
  protected disabledChange() {
    this._internals.ariaDisabled = `${this.disabled}`;

    for (const item of this.controlledItems) {
      item.disabled = this.disabled;
    }
  }

  protected override render() {
    return html`
      <label part="label">
        <slot name="label"></slot>
      </label>
      <slot></slot>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-select-group': IgcSelectGroupComponent;
  }
}

1	import { LitElement, html } from 'lit';	32✔
2	import { property, queryAssignedElements } from 'lit/decorators.js';	32✔
3		32✔
4	import type IgcSelectItemComponent from './select-item.js';	32✔
5	import { themes } from '../../theming/theming-decorator.js';	32✔
6	import { watch } from '../common/decorators/watch.js';	32✔
7	import { registerComponent } from '../common/definitions/register.js';	32✔
8	import { styles } from '../dropdown/themes/dropdown-group.base.css.js';	32✔
9	import { all } from '../dropdown/themes/group.js';	32✔
10		32✔
11	/**	32✔
12	* @element igc-select-group - A container for a group of `igc-select-item` components.	32✔
13	*	32✔
14	* @slot label - Contains the group's label.	32✔
15	* @slot - Intended to contain the items belonging to this group.	32✔
16	*	32✔
17	* @csspart label - The native label element.	32✔
18	*/	32✔
19	@themes(all)	32✔
20	export default class IgcSelectGroupComponent extends LitElement {	32✔
21	public static readonly tagName = 'igc-select-group';	32✔
22	public static override styles = styles;	32✔
23		32✔
24	public static register() {	32✔
25	registerComponent(this);	3✔
26	}	3✔
27		32✔
28	private _internals: ElementInternals;	32✔
29	private observer!: MutationObserver;	32✔
30	private controlledItems!: Array<IgcSelectItemComponent>;	32✔
31		32✔
32	/** All child `igc-select-item`s. */	32✔
33	@queryAssignedElements({ flatten: true, selector: 'igc-select-item' })	32✔
34	public items!: Array<IgcSelectItemComponent>;	32✔
35		32✔
36	@queryAssignedElements({	32✔
37	flatten: true,	32✔
38	selector: 'igc-select-item:not([disabled])',	32✔
39	})	32✔
40	protected activeItems!: Array<IgcSelectItemComponent>;	32✔
41		32✔
42	/**	32✔
43	* Whether the group item and all its children are disabled.	32✔
44	* @attr	32✔
45	*/	32✔
46	@property({ reflect: true, type: Boolean })	32✔
47	public disabled = false;	32✔
48		32✔
49	constructor() {	32✔
50	super();	18✔
51	this._internals = this.attachInternals();	18✔
52	this._internals.role = 'group';	18✔
53		18✔
54	this.observer = new MutationObserver(this.updateControlledItems.bind(this));	18✔
55	}	18✔
56		32✔
57	public override disconnectedCallback() {	32✔
58	this.observer.disconnect();	18✔
59	super.disconnectedCallback();	18✔
60	}	18✔
61		32✔
62	protected override async firstUpdated() {	32✔
63	await this.updateComplete;	18✔
64	this.controlledItems = this.activeItems;	18✔
65		18✔
66	this.items.forEach((i) => {	18✔
67	this.observer.observe(i, {	36✔
68	attributes: true,	36✔
69	attributeFilter: ['disabled'],	36✔
70	});	36✔
71	});	18✔
72		18✔
73	this.disabledChange();	18✔
74	}	18✔
75		32✔
76	protected updateControlledItems(mutations: MutationRecord[]) {	32✔
77	mutations.forEach((mutation) => {	2✔
78	const item = mutation.target as IgcSelectItemComponent;	2✔
79		2✔
80	if (!this.disabled) {	2✔
81	this.controlledItems = this.activeItems;	1✔
82	}	1✔
83		2✔
84	if (this.disabled && !item.disabled) {	2!
UNCOV 85	item.disabled = true;	×
UNCOV 86	}	×
87	});	2✔
88	}	2✔
89		32✔
90	@watch('disabled', { waitUntilFirstUpdate: true })	32✔
91	protected disabledChange() {	32✔
92	this._internals.ariaDisabled = `${this.disabled}`;	20✔
93		20✔
94	for (const item of this.controlledItems) {	20✔
95	item.disabled = this.disabled;	38✔
96	}	38✔
97	}	20✔
98		32✔
99	protected override render() {	32✔
100	return html`	20✔
101	<label part="label">	20✔
102	<slot name="label"></slot>	20✔
103	</label>	20✔
104	<slot></slot>	20✔
105	`;	20✔
106	}	20✔
107	}	32✔
108		32✔
109	declare global {	32✔
110	interface HTMLElementTagNameMap {	32✔
111	'igc-select-group': IgcSelectGroupComponent;	32✔
112	}	32✔
113	}	32✔

IgniteUI / igniteui-webcomponents / 7098961215

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