7142816475

Committed 08 Dec 2023 02:54PM UTC coverage: 97.378% (-0.005%) from 97.383%

Build # 7142816475

Build Type

push

github

Committed by

web-flow

Commit Message

fix(dropdown): active items in fluent theme (#1002)

Run Details

3279 of 3499 branches covered (0.0%)

Branch coverage included in aggregate %.

20567 of 20989 relevant lines covered (97.99%)

432.06 hits per line

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

98.58

/src/components/progress/base.ts

import { LitElement, html, nothing } from 'lit';
import {
  property,
  query,
  queryAssignedElements,
  state,
} from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';

import { watch } from '../common/decorators/watch.js';
import { asPercent, clamp } from '../common/util.js';

export abstract class IgcProgressBaseComponent extends LitElement {
  private initialMax!: number;
  private initialValue!: number;

  protected tick!: number;

  @queryAssignedElements()
  protected assignedElements!: Array<HTMLElement>;

  @query('[part~="fill"]', true)
  protected progressIndicator!: Element;

  @state()
  protected percentage = 0;

  /**
   * Maximum value of the control.
   * @attr
   */
  @property({ type: Number })
  public max = 100;

  /**
   * The value of the control.
   * @attr
   */
  @property({ type: Number })
  public value = 0;

  /**
   * The variant of the control.
   * @attr
   */
  @property({ reflect: true })
  public variant: 'primary' | 'info' | 'success' | 'warning' | 'danger' =
    'primary';

  /**
   * Animation duration in milliseconds.
   * @attr animation-duration
   */
  @property({ type: Number, attribute: 'animation-duration' })
  public animationDuration = 500;

  /**
   * The indeterminate state of the control.
   * @attr
   */
  @property({ type: Boolean, reflect: false })
  public indeterminate = false;

  /**
   * Shows/hides the label of the control.
   * @attr hide-label
   */
  @property({ type: Boolean, attribute: 'hide-label', reflect: false })
  public hideLabel = false;

  /**
   * Format string for the default label of the control.
   * Placeholders:
   *  {0} - current value of the control.
   *  {1} - max value of the control.
   * @attr label-format
   */
  @property({ attribute: 'label-format' })
  public labelFormat!: string;

  @watch('indeterminate', { waitUntilFirstUpdate: true })
  protected indeterminateChange() {
    this.cancelAnimations();
    if (!this.indeterminate) {
      this.percentage = Math.floor(asPercent(this.value, this.max));
    }
  }

  @watch('max', { waitUntilFirstUpdate: true })
  protected maxChange() {
    this.max = Math.max(0, this.max);
    if (this.value > this.max) {
      this.value = this.max;
    } else {
      if (!this.indeterminate) {
        this.animateLabelTo(this.max, this.value);
      }
    }
  }

  @watch('value', { waitUntilFirstUpdate: true })
  protected valueChange(oldVal: number) {
    this.value = clamp(this.value, 0, this.max);
    if (!this.indeterminate) {
      cancelAnimationFrame(this.tick);
      if (this.percentage !== Math.floor(asPercent(this.value, this.max))) {
        this.animateLabelTo(oldVal, this.value);
      }
    }
  }

  protected slotChanges() {
    this.requestUpdate();
  }

  public override connectedCallback(): void {
    super.connectedCallback();
    this.initialMax = Math.max(0, this.max);
    this.initialValue = clamp(this.value, 0, this.initialMax);
    this.value = 0;
    this.max = 100;
  }

  protected override firstUpdated() {
    if (!this.indeterminate) {
      // trigger transition initially
      setTimeout(() => {
        this.max = this.initialMax;
        this.value = this.initialValue;
      }, 0);
    }
  }

  protected cancelAnimations() {
    requestAnimationFrame(() => {
      this.progressIndicator?.getAnimations().forEach((animation) => {
        if (animation instanceof CSSTransition) {
          animation.cancel();
        }
      });
    });
    cancelAnimationFrame(this.tick);
  }

  protected animateLabelTo(start: number, end: number) {
    let t0: number;

    const tick = (t1: number) => {
      t0 = t0 ?? t1;

      const progress = Math.min((t1 - t0) / (this.animationDuration || 1), 1);
      this.percentage = Math.floor(
        asPercent(progress * (end - start) + start, this.max)
      );
      progress < 1
        ? (this.tick = requestAnimationFrame(tick))
        : cancelAnimationFrame(this.tick);
    };

    requestAnimationFrame(tick);
  }

  protected renderLabelFormat() {
    return this.labelFormat
      .replace(/\{0\}/gm, `${this.value}`)
      .replace(/\{1\}/gm, `${this.max}`);
  }

  protected renderDefaultSlot() {
    return html`<slot part="label" @slotchange=${this.slotChanges}></slot>
      ${when(
        this.indeterminate || this.hideLabel || this.assignedElements.length,
        () => nothing,
        () => html`<span part="label value">${this.renderLabelText()}</span>`
      )}`;
  }

  protected renderLabelText() {
    return this.labelFormat ? this.renderLabelFormat() : `${this.percentage}%`;
  }
}

1	import { LitElement, html, nothing } from 'lit';	31✔
2	import {	31✔
3	property,	31✔
4	query,	31✔
5	queryAssignedElements,	31✔
6	state,	31✔
7	} from 'lit/decorators.js';	31✔
8	import { when } from 'lit/directives/when.js';	31✔
9		31✔
10	import { watch } from '../common/decorators/watch.js';	31✔
11	import { asPercent, clamp } from '../common/util.js';	31✔
12		31✔
13	export abstract class IgcProgressBaseComponent extends LitElement {	47✔
14	private initialMax!: number;	47✔
15	private initialValue!: number;	47✔
16		47✔
17	protected tick!: number;	47✔
18		47✔
19	@queryAssignedElements()	47✔
20	protected assignedElements!: Array<HTMLElement>;	47✔
21		47✔
22	@query('[part~="fill"]', true)	47✔
23	protected progressIndicator!: Element;	47✔
24		47✔
25	@state()	47✔
26	protected percentage = 0;	47✔
27		47✔
28	/**	47✔
29	* Maximum value of the control.	47✔
30	* @attr	47✔
31	*/	47✔
32	@property({ type: Number })	47✔
33	public max = 100;	47✔
34		47✔
35	/**	47✔
36	* The value of the control.	47✔
37	* @attr	47✔
38	*/	47✔
39	@property({ type: Number })	47✔
40	public value = 0;	47✔
41		47✔
42	/**	47✔
43	* The variant of the control.	47✔
44	* @attr	47✔
45	*/	47✔
46	@property({ reflect: true })	47✔
47	public variant: 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger' =	47✔
48	'primary';	47✔
49		47✔
50	/**	47✔
51	* Animation duration in milliseconds.	47✔
52	* @attr animation-duration	47✔
53	*/	47✔
54	@property({ type: Number, attribute: 'animation-duration' })	47✔
55	public animationDuration = 500;	47✔
56		47✔
57	/**	47✔
58	* The indeterminate state of the control.	47✔
59	* @attr	47✔
60	*/	47✔
61	@property({ type: Boolean, reflect: false })	47✔
62	public indeterminate = false;	47✔
63		47✔
64	/**	47✔
65	* Shows/hides the label of the control.	47✔
66	* @attr hide-label	47✔
67	*/	47✔
68	@property({ type: Boolean, attribute: 'hide-label', reflect: false })	47✔
69	public hideLabel = false;	47✔
70		47✔
71	/**	47✔
72	* Format string for the default label of the control.	47✔
73	* Placeholders:	47✔
74	* {0} - current value of the control.	47✔
75	* {1} - max value of the control.	47✔
76	* @attr label-format	47✔
77	*/	47✔
78	@property({ attribute: 'label-format' })	47✔
79	public labelFormat!: string;	47✔
80		47✔
81	@watch('indeterminate', { waitUntilFirstUpdate: true })	47✔
82	protected indeterminateChange() {	47✔
83	this.cancelAnimations();	30✔
84	if (!this.indeterminate) {	30✔
85	this.percentage = Math.floor(asPercent(this.value, this.max));	10✔
86	}	10✔
87	}	30✔
88		47✔
89	@watch('max', { waitUntilFirstUpdate: true })	47✔
90	protected maxChange() {	47✔
91	this.max = Math.max(0, this.max);	24✔
92	if (this.value > this.max) {	24✔
93	this.value = this.max;	6✔
94	} else {	24✔
95	if (!this.indeterminate) {	18✔
96	this.animateLabelTo(this.max, this.value);	14✔
97	}	14✔
98	}	18✔
99	}	24✔
100		47✔
101	@watch('value', { waitUntilFirstUpdate: true })	47✔
102	protected valueChange(oldVal: number) {	47✔
103	this.value = clamp(this.value, 0, this.max);	44✔
104	if (!this.indeterminate) {	44✔
105	cancelAnimationFrame(this.tick);	38✔
106	if (this.percentage !== Math.floor(asPercent(this.value, this.max))) {	38✔
107	this.animateLabelTo(oldVal, this.value);	22✔
108	}	22✔
109	}	38✔
110	}	44✔
111		47✔
112	protected slotChanges() {	47✔
113	this.requestUpdate();	3✔
114	}	3✔
115		47✔
116	public override connectedCallback(): void {	47✔
117	super.connectedCallback();	47✔
118	this.initialMax = Math.max(0, this.max);	47✔
119	this.initialValue = clamp(this.value, 0, this.initialMax);	47✔
120	this.value = 0;	47✔
121	this.max = 100;	47✔
122	}	47✔
123		47✔
124	protected override firstUpdated() {	47✔
125	if (!this.indeterminate) {	47✔
126	// trigger transition initially	46✔
127	setTimeout(() => {	46✔
128	this.max = this.initialMax;	46✔
129	this.value = this.initialValue;	46✔
130	}, 0);	46✔
131	}	46✔
132	}	47✔
133		47✔
134	protected cancelAnimations() {	47✔
135	requestAnimationFrame(() => {	30✔
136	this.progressIndicator?.getAnimations().forEach((animation) => {	30✔
137	if (animation instanceof CSSTransition) {	×
138	animation.cancel();	×
139	}	×
140	});	30✔
141	});	30✔
142	cancelAnimationFrame(this.tick);	30✔
143	}	30✔
144		47✔
145	protected animateLabelTo(start: number, end: number) {	47✔
146	let t0: number;	36✔
147		36✔
148	const tick = (t1: number) => {	36✔
149	t0 = t0 ?? t1;	187✔
150		187✔
151	const progress = Math.min((t1 - t0) / (this.animationDuration \|\| 1), 1);	187✔
152	this.percentage = Math.floor(	187✔
153	asPercent(progress * (end - start) + start, this.max)	187✔
154	);	187✔
155	progress < 1	187✔
156	? (this.tick = requestAnimationFrame(tick))	187✔
157	: cancelAnimationFrame(this.tick);	187✔
158	};	36✔
159		36✔
160	requestAnimationFrame(tick);	36✔
161	}	36✔
162		47✔
163	protected renderLabelFormat() {	47✔
164	return this.labelFormat	66✔
165	.replace(/\{0\}/gm, `${this.value}`)	66✔
166	.replace(/\{1\}/gm, `${this.max}`);	66✔
167	}	66✔
168		47✔
169	protected renderDefaultSlot() {	47✔
170	return html`<slot part="label" @slotchange=${this.slotChanges}></slot>	302✔
171	${when(	302✔
172	this.indeterminate \|\| this.hideLabel \|\| this.assignedElements.length,	302✔
173	() => nothing,	302✔
174	() => html`<span part="label value">${this.renderLabelText()}</span>`	302✔
175	)}`;	302✔
176	}	302✔
177		47✔
178	protected renderLabelText() {	47✔
179	return this.labelFormat ? this.renderLabelFormat() : `${this.percentage}%`;	261✔
180	}	261✔
181	}	47✔

IgniteUI / igniteui-webcomponents / 7142816475

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