7005787328

Committed 27 Nov 2023 01:35PM UTC coverage: 97.172% (+0.1%) from 97.039%

Build # 7005787328

Build Type

Pull #983

github

Committed by

web-flow

Commit Message

Merge 3cce626ae into 74804a855

Pull Request Pull Request #983: feat: Refactor toggle directive into popover component

Run Details

3226 of 3447 branches covered (0.0%)

Branch coverage included in aggregate %.

1326 of 1336 new or added lines in 15 files covered. (99.25%)

5 existing lines in 3 files now uncovered.

20278 of 20741 relevant lines covered (97.77%)

429.36 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';	33✔
2	import { property, queryAssignedElements } from 'lit/decorators.js';	33✔
3		33✔
4	import type IgcSelectItemComponent from './select-item.js';	33✔
5	import { themes } from '../../theming/theming-decorator.js';	33✔
6	import { watch } from '../common/decorators/watch.js';	33✔
7	import { registerComponent } from '../common/definitions/register.js';	33✔
8	import { styles } from '../dropdown/themes/dropdown-group.base.css.js';	33✔
9	import { all } from '../dropdown/themes/group.js';	33✔
10		33✔
11	/**	33✔
12	* @element igc-select-group - A container for a group of `igc-select-item` components.	33✔
13	*	33✔
14	* @slot label - Contains the group's label.	33✔
15	* @slot - Intended to contain the items belonging to this group.	33✔
16	*	33✔
17	* @csspart label - The native label element.	33✔
18	*/	33✔
19	@themes(all)	33✔
20	export default class IgcSelectGroupComponent extends LitElement {	33✔
21	public static readonly tagName = 'igc-select-group';	33✔
22	public static override styles = styles;	33✔
23		33✔
24	public static register() {	33✔
25	registerComponent(this);	3✔
26	}	3✔
27		33✔
28	private _internals: ElementInternals;	33✔
29	private observer!: MutationObserver;	33✔
30	private controlledItems!: Array<IgcSelectItemComponent>;	33✔
31		33✔
32	/** All child `igc-select-item`s. */	33✔
33	@queryAssignedElements({ flatten: true, selector: 'igc-select-item' })	33✔
34	public items!: Array<IgcSelectItemComponent>;	33✔
35		33✔
36	@queryAssignedElements({	33✔
37	flatten: true,	33✔
38	selector: 'igc-select-item:not([disabled])',	33✔
39	})	33✔
40	protected activeItems!: Array<IgcSelectItemComponent>;	33✔
41		33✔
42	/**	33✔
43	* Whether the group item and all its children are disabled.	33✔
44	* @attr	33✔
45	*/	33✔
46	@property({ reflect: true, type: Boolean })	33✔
47	public disabled = false;	33✔
48		33✔
49	constructor() {	33✔
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		33✔
57	public override disconnectedCallback() {	33✔
58	this.observer.disconnect();	18✔
59	super.disconnectedCallback();	18✔
60	}	18✔
61		33✔
62	protected override async firstUpdated() {	33✔
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		33✔
76	protected updateControlledItems(mutations: MutationRecord[]) {	33✔
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		33✔
90	@watch('disabled', { waitUntilFirstUpdate: true })	33✔
91	protected disabledChange() {	33✔
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		33✔
99	protected override render() {	33✔
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	}	33✔
108		33✔
109	declare global {	33✔
110	interface HTMLElementTagNameMap {	33✔
111	'igc-select-group': IgcSelectGroupComponent;	33✔
112	}	33✔
113	}	33✔

IgniteUI / igniteui-webcomponents / 7005787328

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