8097082759

Committed 29 Feb 2024 01:49PM UTC coverage: 97.451% (-0.1%) from 97.584%

Build # 8097082759

Build Type

Pull #1086

github

Committed by

web-flow

Commit Message

Merge 4b8bb01a3 into 7f730cf4c

Pull Request Pull Request #1086: Add date picker component

Run Details

3382 of 3584 branches covered (94.36%)

Branch coverage included in aggregate %.

736 of 803 new or added lines in 9 files covered. (91.66%)

47 existing lines in 1 file now uncovered.

21274 of 21717 relevant lines covered (97.96%)

482.94 hits per line

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

88.0

/src/components/focus-trap/focus-trap.ts

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

import { registerComponent } from '../common/definitions/register.js';
import { isFocusable, iterNodesShadow } from '../common/util.js';

/**
 *
 * @element igc-focus-trap
 *
 * @slot - The content of the focus trap component
 */
export default class IgcFocusTrapComponent extends LitElement {
  public static readonly tagName = 'igc-focus-trap';
  public static override styles = css`
    :host {
      display: contents;
    }
  `;

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

  @state()
  protected _focused = false;

  /**
   * Whether to manage focus state for the slotted children.
   * @attr disabled
   */
  @property({ type: Boolean, reflect: true })
  public disabled = false;

  /**
   * Whether focus in currently inside the trap component.
   */
  public get focused() {
    return this._focused;
  }

  /** An array of focusable elements including elements in Shadow roots */
  public get focusableElements() {
    return Array.from(
      iterNodesShadow<HTMLElement>(this, 'SHOW_ELEMENT', (node) => {
        return isFocusable(node);
      })
    );
  }

  constructor() {
    super();

    this.addEventListener('focusin', () => (this._focused = true));
    this.addEventListener('focusout', () => (this._focused = false));
  }

  protected focusFirstElement() {
    this.focusableElements.at(0)?.focus();
  }

  protected focusLastElement() {
    this.focusableElements.at(-1)?.focus();
  }

  protected override render() {
    const tabStop = !this.focused || this.disabled ? -1 : 0;

    return html`
      <div
        id="start"
        tabindex=${tabStop}
        @focus=${this.disabled ? nothing : this.focusLastElement}
      ></div>
      <slot></slot>
      <div
        id="end"
        tabindex=${tabStop}
        @focus=${this.disabled ? nothing : this.focusFirstElement}
      ></div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-focus-trap': IgcFocusTrapComponent;
  }
}

1	import { LitElement, css, html, nothing } from 'lit';	25✔
2	import { property, state } from 'lit/decorators.js';	25✔
3		25✔
4	import { registerComponent } from '../common/definitions/register.js';	25✔
5	import { isFocusable, iterNodesShadow } from '../common/util.js';	25✔
6		25✔
7	/**	25✔
8	*	25✔
9	* @element igc-focus-trap	25✔
10	*	25✔
11	* @slot - The content of the focus trap component	25✔
12	*/	25✔
13	export default class IgcFocusTrapComponent extends LitElement {	25✔
14	public static readonly tagName = 'igc-focus-trap';	25✔
15	public static override styles = css`	25✔
16	:host {	25✔
17	display: contents;	25✔
18	}	25✔
19	`;	25✔
20		25✔
21	/* blazorSuppress */	25✔
22	public static register() {	25✔
23	registerComponent(this);	2✔
24	}	2✔
25		25✔
26	@state()	25✔
27	protected _focused = false;	25✔
28		25✔
29	/**	25✔
30	* Whether to manage focus state for the slotted children.	25✔
31	* @attr disabled	25✔
32	*/	25✔
33	@property({ type: Boolean, reflect: true })	25✔
34	public disabled = false;	25✔
35		25✔
36	/**	25✔
37	* Whether focus in currently inside the trap component.	25✔
38	*/	25✔
39	public get focused() {	25✔
40	return this._focused;	74✔
41	}	74✔
42		25✔
43	/** An array of focusable elements including elements in Shadow roots */	25✔
44	public get focusableElements() {	25✔
NEW 45	return Array.from(	×
NEW 46	iterNodesShadow<HTMLElement>(this, 'SHOW_ELEMENT', (node) => {	×
NEW 47	return isFocusable(node);	×
NEW 48	})	×
NEW 49	);	×
NEW 50	}	×
51		25✔
52	constructor() {	25✔
53	super();	57✔
54		57✔
55	this.addEventListener('focusin', () => (this._focused = true));	57✔
56	this.addEventListener('focusout', () => (this._focused = false));	57✔
57	}	57✔
58		25✔
59	protected focusFirstElement() {	25✔
NEW 60	this.focusableElements.at(0)?.focus();	×
NEW 61	}	×
62		25✔
63	protected focusLastElement() {	25✔
NEW 64	this.focusableElements.at(-1)?.focus();	×
NEW 65	}	×
66		25✔
67	protected override render() {	25✔
68	const tabStop = !this.focused \|\| this.disabled ? -1 : 0;	74!
69		74✔
70	return html`	74✔
71	<div	74✔
72	id="start"	74✔
73	tabindex=${tabStop}	74✔
74	@focus=${this.disabled ? nothing : this.focusLastElement}	74✔
75	></div>	74✔
76	<slot></slot>	74✔
77	<div	74✔
78	id="end"	74✔
79	tabindex=${tabStop}	74✔
80	@focus=${this.disabled ? nothing : this.focusFirstElement}	74✔
81	></div>	74✔
82	`;	74✔
83	}	74✔
84	}	25✔
85		25✔
86	declare global {	25✔
87	interface HTMLElementTagNameMap {	25✔
88	'igc-focus-trap': IgcFocusTrapComponent;	25✔
89	}	25✔
90	}	25✔

IgniteUI / igniteui-webcomponents / 8097082759

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