8568873539

Committed 05 Apr 2024 11:10AM UTC coverage: 97.604% (+0.005%) from 97.599%

Build # 8568873539

Build Type

Pull #1029

github

Committed by

web-flow

Commit Message

Merge 506abab96 into f3d03810f

Pull Request Pull Request #1029: Calendar - Consume colors from schema

Run Details

3297 of 3510 branches covered (93.93%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

21 existing lines in 2 files now uncovered.

20656 of 21031 relevant lines covered (98.22%)

427.54 hits per line

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

92.2

/src/components/dialog/dialog.ts

import { LitElement, html, nothing } from 'lit';
import { property, queryAssignedElements, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { Ref, createRef, ref } from 'lit/directives/ref.js';

import { styles } from './themes/dialog.base.css.js';
import { styles as shared } from './themes/shared/dialog.common.css.js';
import { all } from './themes/themes.js';
import { addAnimationController } from '../../animations/player.js';
import { fadeIn, fadeOut } from '../../animations/presets/fade/index.js';
import { themes } from '../../theming/theming-decorator.js';
import IgcButtonComponent from '../button/button.js';
import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.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 { createCounter, partNameMap } from '../common/util.js';

export interface IgcDialogEventMap {
  igcClosing: CustomEvent<void>;
  igcClosed: CustomEvent<void>;
}

/**
 * Represents a Dialog component.
 *
 * @element igc-dialog
 *
 * @fires igcClosing - Emitter just before the dialog is closed.
 * @fires igcClosed - Emitted after closing the dialog.
 *
 * @slot - Renders content inside the default slot.
 * @slot title - Renders the title of the dialog header.
 * @slot footer - Renders the dialog footer.
 *
 * @csspart base - The base wrapper of the dialog.
 * @csspart title - The title container.
 * @csspart footer - The footer container.
 * @csspart overlay - The overlay.
 */
@themes(all)
@blazorAdditionalDependencies('IgcButtonComponent')
export default class IgcDialogComponent extends EventEmitterMixin<
  IgcDialogEventMap,
  Constructor<LitElement>
>(LitElement) {
  public static readonly tagName = 'igc-dialog';
  public static styles = [styles, shared];

  /* blazorSuppress */
  public static register() {
    registerComponent(this, IgcButtonComponent);
  }

  private static readonly increment = createCounter();
  private titleId = `title-${IgcDialogComponent.increment()}`;

  private dialogRef: Ref<HTMLDialogElement> = createRef();
  private animationPlayer = addAnimationController(this, this.dialogRef);

  private get dialog() {
    return this.dialogRef.value!;
  }

  @queryAssignedElements({ slot: 'title' })
  private titleElements!: Array<HTMLElement>;

  @queryAssignedElements({ slot: 'footer' })
  private footerElements!: Array<HTMLElement>;

  /* blazorSuppress */
  /**
   * Whether the dialog should be closed when pressing the 'ESCAPE' button.
   * @deprecated since version 4.2.3. Use `keepOpenOnEscape` instead.
   * @attr close-on-escape
   */
  @property({ type: Boolean, attribute: 'close-on-escape' })
  public set closeOnEscape(value: boolean) {
    this.keepOpenOnEscape = !value;
  }
  public get closeOnEscape(): boolean {
    return !this.keepOpenOnEscape;
  }

  /**
   * Whether the dialog should be kept open when pressing the 'ESCAPE' button.
   * @attr keep-open-on-escape
   */
  @property({ type: Boolean, attribute: 'keep-open-on-escape' })
  public keepOpenOnEscape = false;

  /**
   * Whether the dialog should be closed when clicking outside of it.
   * @attr close-on-outside-click
   */
  @property({ type: Boolean, attribute: 'close-on-outside-click' })
  public closeOnOutsideClick = false;

  /**
   * Whether to hide the default action button for the dialog.
   *
   * When there is projected content in the `footer` slot this property
   * has no effect.
   * @attr hide-default-action
   */
  @property({ type: Boolean, attribute: 'hide-default-action' })
  public hideDefaultAction = false;

  /**
   * Whether the dialog is opened.
   * @attr
   */
  @property({ type: Boolean, reflect: true })
  public open = false;

  /**
   * Backdrop animation helper.
   * @hidden @internal
   */
  @state()
  private animating = false;

  /**
   * Sets the title of the dialog.
   * @attr
   */
  @property()
  public override title!: string;

  /** Sets the return value for the dialog. */
  @property({ attribute: false })
  public returnValue!: string;

  protected resolvePartNames(base: string) {
    return {
      [base]: true,
      titled: this.titleElements.length > 0 || this.title,
      footed: this.footerElements.length > 0 || !this.hideDefaultAction,
    };
  }

  @watch('open', { waitUntilFirstUpdate: true })
  protected handleOpenState() {
    this.open ? this.dialog.showModal() : this.dialog.close();
  }

  protected override async firstUpdated() {
    await this.updateComplete;
    if (this.open) {
      this.dialog.showModal();
    }
  }

  private async toggleAnimation(dir: 'open' | 'close') {
    const animation = dir === 'open' ? fadeIn : fadeOut;

    const [_, event] = await Promise.all([
      this.animationPlayer.stopAll(),
      this.animationPlayer.play(animation()),
    ]);

    return event.type === 'finish';
  }

  /** Opens the dialog. */
  public show() {
    if (this.open) {
      return;
    }

    this.toggleAnimation('open');
    this.open = true;
  }

  /** Closes the dialog. */
  public async hide() {
    if (!this.open) {
      return;
    }

    this.animating = true;

    if (await this.toggleAnimation('close')) {
      this.animating = false;
      this.open = false;
    }
  }

  /** Toggles the open state of the dialog. */
  public toggle() {
    this.open ? this.hide() : this.show();
  }

  protected async hideWithEvent() {
    if (!this.open) {
      return;
    }

    if (!this.handleClosing()) {
      return;
    }

    this.animating = true;

    if (await this.toggleAnimation('close')) {
      this.open = false;
      this.animating = false;
      this.emitEvent('igcClosed');
    }

    await this.updateComplete;
  }

  private handleCancel(event: Event) {
    event.preventDefault();

    if (!this.keepOpenOnEscape) {
      this.hideWithEvent();
    }
  }

  private handleClick({ clientX, clientY, target }: MouseEvent) {
    if (this.closeOnOutsideClick && this.dialog.isSameNode(target as Node)) {
      const { left, top, right, bottom } = this.dialog.getBoundingClientRect();
      const between = (x: number, low: number, high: number) =>
        x >= low && x <= high;
      if (!(between(clientX, left, right) && between(clientY, top, bottom))) {
        this.hideWithEvent();
      }
    }
  }

  private handleClosing(): boolean {
    return this.emitEvent('igcClosing', { cancelable: true });
  }

  protected formSubmitHandler = (e: Event) => {
    if (e instanceof SubmitEvent && e.submitter) {
      this.returnValue = (e.submitter as any)?.value || '';
    }
    if (!e.defaultPrevented) {
      this.hideWithEvent();
    }
  };

  private handleSlotChange() {
    // Setup submit handling for supported forms
    Array.from(this.querySelectorAll('igc-form, form'))
      .filter((each) => each.getAttribute('method') === 'dialog')
      .forEach((form) => {
        const event = /igc-form/i.test(form.tagName) ? 'igcSubmit' : 'submit';
        form.removeEventListener(event, this.formSubmitHandler);
        form.addEventListener(event, this.formSubmitHandler);
      });
  }

  protected override render() {
    const label = this.ariaLabel ? this.ariaLabel : undefined;
    const labelledby = label ? undefined : this.titleId;
    const backdropParts = partNameMap({
      backdrop: true,
      animating: this.animating,
    });

    return html`
      <div part=${backdropParts} aria-hidden=${!this.open}></div>
      <dialog
        ${ref(this.dialogRef)}
        part="${partNameMap(this.resolvePartNames('base'))}"
        role="dialog"
        @click=${this.handleClick}
        @cancel=${this.handleCancel}
        aria-label=${ifDefined(label)}
        aria-labelledby=${ifDefined(labelledby)}
      >
        <header part="title" id=${this.titleId}>
          <slot name="title"><span>${this.title}</span></slot>
        </header>
        <section part="content">
          <slot @slotchange=${this.handleSlotChange}></slot>
        </section>
        <footer part="footer">
          <slot name="footer">
            ${this.hideDefaultAction
              ? nothing
              : html`<igc-button variant="flat" @click=${this.hideWithEvent}
                  >OK</igc-button
                >`}
          </slot>
        </footer>
      </dialog>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-dialog': IgcDialogComponent;
  }
}

1	import { LitElement, html, nothing } from 'lit';	24✔
2	import { property, queryAssignedElements, state } from 'lit/decorators.js';	24✔
3	import { ifDefined } from 'lit/directives/if-defined.js';	24✔
4	import { Ref, createRef, ref } from 'lit/directives/ref.js';	24✔
5		24✔
6	import { styles } from './themes/dialog.base.css.js';	24✔
7	import { styles as shared } from './themes/shared/dialog.common.css.js';	24✔
8	import { all } from './themes/themes.js';	24✔
9	import { addAnimationController } from '../../animations/player.js';	24✔
10	import { fadeIn, fadeOut } from '../../animations/presets/fade/index.js';	24✔
11	import { themes } from '../../theming/theming-decorator.js';	24✔
12	import IgcButtonComponent from '../button/button.js';	24✔
13	import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';	24✔
14	import { watch } from '../common/decorators/watch.js';	24✔
15	import { registerComponent } from '../common/definitions/register.js';	24✔
16	import type { Constructor } from '../common/mixins/constructor.js';	24✔
17	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	24✔
18	import { createCounter, partNameMap } from '../common/util.js';	24✔
19		24✔
20	export interface IgcDialogEventMap {	24✔
21	igcClosing: CustomEvent<void>;	24✔
22	igcClosed: CustomEvent<void>;	24✔
23	}	24✔
24		24✔
25	/**	24✔
26	* Represents a Dialog component.	24✔
27	*	24✔
28	* @element igc-dialog	24✔
29	*	24✔
30	* @fires igcClosing - Emitter just before the dialog is closed.	24✔
31	* @fires igcClosed - Emitted after closing the dialog.	24✔
32	*	24✔
33	* @slot - Renders content inside the default slot.	24✔
34	* @slot title - Renders the title of the dialog header.	24✔
35	* @slot footer - Renders the dialog footer.	24✔
36	*	24✔
37	* @csspart base - The base wrapper of the dialog.	24✔
38	* @csspart title - The title container.	24✔
39	* @csspart footer - The footer container.	24✔
40	* @csspart overlay - The overlay.	24✔
41	*/	24✔
42	@themes(all)	24✔
43	@blazorAdditionalDependencies('IgcButtonComponent')	24✔
44	export default class IgcDialogComponent extends EventEmitterMixin<	24✔
45	IgcDialogEventMap,	22✔
46	Constructor<LitElement>	22✔
47	>(LitElement) {	22✔
48	public static readonly tagName = 'igc-dialog';	22✔
49	public static styles = [styles, shared];	22✔
50		22✔
51	/* blazorSuppress */	22✔
52	public static register() {	22✔
53	registerComponent(this, IgcButtonComponent);	2✔
54	}	2✔
55		22✔
56	private static readonly increment = createCounter();	22✔
57	private titleId = `title-${IgcDialogComponent.increment()}`;	22✔
58		22✔
59	private dialogRef: Ref<HTMLDialogElement> = createRef();	22✔
60	private animationPlayer = addAnimationController(this, this.dialogRef);	22✔
61		22✔
62	private get dialog() {	22✔
63	return this.dialogRef.value!;	25✔
64	}	25✔
65		22✔
66	@queryAssignedElements({ slot: 'title' })	22✔
67	private titleElements!: Array<HTMLElement>;	22✔
68		22✔
69	@queryAssignedElements({ slot: 'footer' })	22✔
70	private footerElements!: Array<HTMLElement>;	22✔
71		22✔
72	/* blazorSuppress */	22✔
73	/**	22✔
74	* Whether the dialog should be closed when pressing the 'ESCAPE' button.	22✔
75	* @deprecated since version 4.2.3. Use `keepOpenOnEscape` instead.	22✔
76	* @attr close-on-escape	22✔
77	*/	22✔
78	@property({ type: Boolean, attribute: 'close-on-escape' })	22✔
79	public set closeOnEscape(value: boolean) {	22✔
UNCOV 80	this.keepOpenOnEscape = !value;	×
UNCOV 81	}	×
82	public get closeOnEscape(): boolean {	22✔
83	return !this.keepOpenOnEscape;	40✔
84	}	40✔
85		22✔
86	/**	22✔
87	* Whether the dialog should be kept open when pressing the 'ESCAPE' button.	22✔
88	* @attr keep-open-on-escape	22✔
89	*/	22✔
90	@property({ type: Boolean, attribute: 'keep-open-on-escape' })	22✔
91	public keepOpenOnEscape = false;	22✔
92		22✔
93	/**	22✔
94	* Whether the dialog should be closed when clicking outside of it.	22✔
95	* @attr close-on-outside-click	22✔
96	*/	22✔
97	@property({ type: Boolean, attribute: 'close-on-outside-click' })	22✔
98	public closeOnOutsideClick = false;	22✔
99		22✔
100	/**	22✔
101	* Whether to hide the default action button for the dialog.	22✔
102	*	22✔
103	* When there is projected content in the `footer` slot this property	22✔
104	* has no effect.	22✔
105	* @attr hide-default-action	22✔
106	*/	22✔
107	@property({ type: Boolean, attribute: 'hide-default-action' })	22✔
108	public hideDefaultAction = false;	22✔
109		22✔
110	/**	22✔
111	* Whether the dialog is opened.	22✔
112	* @attr	22✔
113	*/	22✔
114	@property({ type: Boolean, reflect: true })	22✔
115	public open = false;	22✔
116		22✔
117	/**	22✔
118	* Backdrop animation helper.	22✔
119	* @hidden @internal	22✔
120	*/	22✔
121	@state()	22✔
122	private animating = false;	22✔
123		22✔
124	/**	22✔
125	* Sets the title of the dialog.	22✔
126	* @attr	22✔
127	*/	22✔
128	@property()	22✔
129	public override title!: string;	22✔
130		22✔
131	/** Sets the return value for the dialog. */	22✔
132	@property({ attribute: false })	22✔
133	public returnValue!: string;	22✔
134		22✔
135	protected resolvePartNames(base: string) {	22✔
136	return {	50✔
137	[base]: true,	50✔
138	titled: this.titleElements.length > 0 \|\| this.title,	50✔
139	footed: this.footerElements.length > 0 \|\| !this.hideDefaultAction,	50✔
140	};	50✔
141	}	50✔
142		22✔
143	@watch('open', { waitUntilFirstUpdate: true })	22✔
144	protected handleOpenState() {	22✔
145	this.open ? this.dialog.showModal() : this.dialog.close();	21✔
146	}	21✔
147		22✔
148	protected override async firstUpdated() {	22✔
149	await this.updateComplete;	20✔
150	if (this.open) {	20!
UNCOV 151	this.dialog.showModal();	×
UNCOV 152	}	×
153	}	20✔
154		22✔
155	private async toggleAnimation(dir: 'open' \| 'close') {	22✔
156	const animation = dir === 'open' ? fadeIn : fadeOut;	16✔
157		16✔
158	const [_, event] = await Promise.all([	16✔
159	this.animationPlayer.stopAll(),	16✔
160	this.animationPlayer.play(animation()),	16✔
161	]);	16✔
162		16✔
163	return event.type === 'finish';	16✔
164	}	16✔
165		22✔
166	/** Opens the dialog. */	22✔
167	public show() {	22✔
168	if (this.open) {	10!
UNCOV 169	return;	×
UNCOV 170	}	×
171		10✔
172	this.toggleAnimation('open');	10✔
173	this.open = true;	10✔
174	}	10✔
175		22✔
176	/** Closes the dialog. */	22✔
177	public async hide() {	22✔
178	if (!this.open) {	3!
UNCOV 179	return;	×
UNCOV 180	}	×
181		3✔
182	this.animating = true;	3✔
183		3✔
184	if (await this.toggleAnimation('close')) {	3✔
185	this.animating = false;	3✔
186	this.open = false;	3✔
187	}	3✔
188	}	3✔
189		22✔
190	/** Toggles the open state of the dialog. */	22✔
191	public toggle() {	22✔
192	this.open ? this.hide() : this.show();	3✔
193	}	3✔
194		22✔
195	protected async hideWithEvent() {	22✔
196	if (!this.open) {	5!
UNCOV 197	return;	×
UNCOV 198	}	×
199		5✔
200	if (!this.handleClosing()) {	5✔
201	return;	2✔
202	}	2✔
203		3✔
204	this.animating = true;	3✔
205		3✔
206	if (await this.toggleAnimation('close')) {	3✔
207	this.open = false;	3✔
208	this.animating = false;	3✔
209	this.emitEvent('igcClosed');	3✔
210	}	3✔
211		3✔
212	await this.updateComplete;	3✔
213	}	3✔
214		22✔
215	private handleCancel(event: Event) {	22✔
UNCOV 216	event.preventDefault();	×
UNCOV 217		×
UNCOV 218	if (!this.keepOpenOnEscape) {	×
UNCOV 219	this.hideWithEvent();	×
UNCOV 220	}	×
UNCOV 221	}	×
222		22✔
223	private handleClick({ clientX, clientY, target }: MouseEvent) {	22✔
224	if (this.closeOnOutsideClick && this.dialog.isSameNode(target as Node)) {	5✔
225	const { left, top, right, bottom } = this.dialog.getBoundingClientRect();	2✔
226	const between = (x: number, low: number, high: number) =>	2✔
227	x >= low && x <= high;	2!
228	if (!(between(clientX, left, right) && between(clientY, top, bottom))) {	2!
229	this.hideWithEvent();	2✔
230	}	2✔
231	}	2✔
232	}	5✔
233		22✔
234	private handleClosing(): boolean {	22✔
235	return this.emitEvent('igcClosing', { cancelable: true });	5✔
236	}	5✔
237		22✔
238	protected formSubmitHandler = (e: Event) => {	22✔
239	if (e instanceof SubmitEvent && e.submitter) {	1!
UNCOV 240	this.returnValue = (e.submitter as any)?.value \|\| '';	×
UNCOV 241	}	×
242	if (!e.defaultPrevented) {	1✔
243	this.hideWithEvent();	1✔
244	}	1✔
245	};	22✔
246		22✔
247	private handleSlotChange() {	22✔
248	// Setup submit handling for supported forms	3✔
249	Array.from(this.querySelectorAll('igc-form, form'))	3✔
250	.filter((each) => each.getAttribute('method') === 'dialog')	3✔
251	.forEach((form) => {	3✔
252	const event = /igc-form/i.test(form.tagName) ? 'igcSubmit' : 'submit';	1!
253	form.removeEventListener(event, this.formSubmitHandler);	1✔
254	form.addEventListener(event, this.formSubmitHandler);	1✔
255	});	3✔
256	}	3✔
257		22✔
258	protected override render() {	22✔
259	const label = this.ariaLabel ? this.ariaLabel : undefined;	50✔
260	const labelledby = label ? undefined : this.titleId;	50✔
261	const backdropParts = partNameMap({	50✔
262	backdrop: true,	50✔
263	animating: this.animating,	50✔
264	});	50✔
265		50✔
266	return html`	50✔
267	<div part=${backdropParts} aria-hidden=${!this.open}></div>	50✔
268	<dialog	50✔
269	${ref(this.dialogRef)}	50✔
270	part="${partNameMap(this.resolvePartNames('base'))}"	50✔
271	role="dialog"	50✔
272	@click=${this.handleClick}	50✔
273	@cancel=${this.handleCancel}	50✔
274	aria-label=${ifDefined(label)}	50✔
275	aria-labelledby=${ifDefined(labelledby)}	50✔
276	>	50✔
277	<header part="title" id=${this.titleId}>	50✔
278	<slot name="title"><span>${this.title}</span></slot>	50✔
279	</header>	50✔
280	<section part="content">	50✔
281	<slot @slotchange=${this.handleSlotChange}></slot>	50✔
282	</section>	50✔
283	<footer part="footer">	50✔
284	<slot name="footer">	50✔
285	${this.hideDefaultAction	50✔
286	? nothing	50✔
287	: html`<igc-button variant="flat" @click=${this.hideWithEvent}	50✔
288	>OK</igc-button	49✔
289	>`}	49✔
290	</slot>	50✔
291	</footer>	50✔
292	</dialog>	50✔
293	`;	50✔
294	}	50✔
295	}	22✔
296		24✔
297	declare global {	24✔
298	interface HTMLElementTagNameMap {	24✔
299	'igc-dialog': IgcDialogComponent;	24✔
300	}	24✔
301	}	24✔

IgniteUI / igniteui-webcomponents / 8568873539

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