8277311192

Committed 14 Mar 2024 08:03AM UTC coverage: 97.599%. Remained the same

Build # 8277311192

Build Type

push

github

Committed by

web-flow

Commit Message

chore: CS suppress case-only renamed deprecated props (#1101)

* chore: CS suppress case-only renamed deprecated props
* docs: reformat deprecated notes for consistency
* chore(dropdown): suppress the targeted toggle/show overrides for analyzer
* chore(date-time-input): reorder deprecated accessors

Run Details

3286 of 3499 branches covered (93.91%)

Branch coverage included in aggregate %.

41 of 41 new or added lines in 8 files covered. (100.0%)

3 existing lines in 2 files now uncovered.

20615 of 20990 relevant lines covered (98.21%)

430.4 hits per line

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

98.26

/src/components/rating/rating.ts

import { LitElement, html, nothing } from 'lit';
import {
  property,
  query,
  queryAssignedElements,
  queryAssignedNodes,
  state,
} from 'lit/decorators.js';
import { guard } from 'lit/directives/guard.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';

import IgcRatingSymbolComponent from './rating-symbol.js';
import { styles } from './themes/rating.base.css.js';
import { styles as shared } from './themes/shared/rating.common.css.js';
import { all } from './themes/themes.js';
import { themes } from '../../theming/theming-decorator.js';
import {
  addKeybindings,
  arrowDown,
  arrowLeft,
  arrowRight,
  arrowUp,
  endKey,
  homeKey,
} from '../common/controllers/key-bindings.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { Constructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { FormAssociatedMixin } from '../common/mixins/form-associated.js';
import { SizableMixin } from '../common/mixins/sizable.js';
import { clamp, format, isLTR } from '../common/util.js';
import IgcIconComponent from '../icon/icon.js';

export interface IgcRatingEventMap {
  igcChange: CustomEvent<number>;
  igcHover: CustomEvent<number>;
}

/**
 * Rating provides insight regarding others' opinions and experiences,
 * and can allow the user to submit a rating of their own
 *
 * @element igc-rating
 *
 * @fires igcChange - Emitted when the value of the control changes.
 * @fires igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating.
 *
 * @csspart base - The main wrapper which holds all of the rating elements.
 * @csspart label - The label part.
 * @csspart value-label - The value label part.
 * @csspart symbols - A wrapper for all rating symbols.
 * @csspart symbol - The part of the encapsulated default symbol.
 * @csspart full - The part of the encapsulated full symbols.
 * @csspart empty - The part of the encapsulated empty symbols.
 *
 * @cssproperty --symbol-size - The size of the symbols.
 * @cssproperty --symbol-full-color - The color of the filled symbol.
 * @cssproperty --symbol-empty-color - The color of the empty symbol.
 * @cssproperty --symbol-full-filter - The filter(s) used for the filled symbol.
 * @cssproperty --symbol-empty-filter - The filter(s) used for the empty symbol.
 */
@themes(all, true)
export default class IgcRatingComponent extends FormAssociatedMixin(
  SizableMixin(
    EventEmitterMixin<IgcRatingEventMap, Constructor<LitElement>>(LitElement)
  )
) {
  public static readonly tagName = 'igc-rating';
  public static styles = [styles, shared];

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

  @queryAssignedElements({
    selector: IgcRatingSymbolComponent.tagName,
    slot: 'symbol',
  })
  protected ratingSymbols!: Array<IgcRatingSymbolComponent>;

  @query('[part="symbols"]', true)
  protected container!: HTMLElement;

  @queryAssignedNodes({ slot: 'value-label', flatten: true })
  protected valueLabel!: Array<Node>;

  @state()
  protected hoverValue = -1;

  @state()
  protected hoverState = false;

  protected get isInteractive() {
    return !(this.readonly || this.disabled);
  }

  protected get hasProjectedSymbols() {
    return this.ratingSymbols.length > 0;
  }

  protected get valueText() {
    // Skip IEEE 754 representation for screen readers
    const value = this.round(this.value);
    return this.valueFormat
      ? format(this.valueFormat, `${value}`, `${this.max}`)
      : `${value} of ${this.max}`;
  }

  /**
   * The maximum value for the rating.
   *
   * If there are projected symbols, the maximum value will be resolved
   * based on the number of symbols.
   * @attr
   */
  @property({ type: Number })
  public max = 5;

  /**
   * The minimum value change allowed.
   *
   * Valid values are in the interval between 0 and 1 inclusive.
   * @attr
   */
  @property({ type: Number })
  public step = 1;

  /**
   * The label of the control.
   * @attr
   */
  @property()
  public label!: string;

  /**
   * A format string which sets aria-valuetext. Instances of '{0}' will be replaced
   * with the current value of the control and instances of '{1}' with the maximum value for the control.
   *
   * Important for screen-readers and useful for localization.
   * @attr value-format
   */
  @property({ attribute: 'value-format' })
  public valueFormat!: string;

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

  /**
   * Sets hover preview behavior for the component
   * @attr hover-preview
   */
  @property({ type: Boolean, reflect: true, attribute: 'hover-preview' })
  public hoverPreview = false;

  /**
   * Makes the control a readonly field.
   * @attr readonly
   */
  @property({ type: Boolean, reflect: true, attribute: 'readonly' })
  public readOnly = false;

  /* blazorCSSuppress */
  /**
   * Sets the readonly state of the component
   * @prop
   *
   * @deprecated since v4.4.0. Use the `readOnly` property instead.
   */
  @property({ attribute: false })
  public set readonly(value: boolean) {
    this.readOnly = value;
  }

  public get readonly() {
    return this.readOnly;
  }

  /**
   * Toggles single selection visual mode.
   * @attr
   */
  @property({ type: Boolean })
  public single = false;

  /**
   * Whether to reset the rating when the user selects the same value.
   * @attr allow-reset
   */
  @property({ type: Boolean, reflect: true, attribute: 'allow-reset' })
  public allowReset = false;

  @watch('max')
  protected handleMaxChange() {
    this.hasProjectedSymbols
      ? (this.max = this.ratingSymbols.length)
      : (this.max = Math.max(0, this.max));
    if (this.max < this.value) {
      this.value = this.max;
    }
  }

  @watch('value')
  protected handleValueChange() {
    this.value = clamp(isNaN(this.value) ? 0 : this.value, 0, this.max);
    this.setFormValue(`${this.value}`, `${this.value}`);
    this.updateValidity();
    this.setInvalidState();
  }

  @watch('step')
  protected handlePrecisionChange() {
    this.step = !this.single ? clamp(this.step, 0.001, 1) : 1;
  }

  @watch('single')
  protected handleSelectionChange() {
    if (this.single) {
      this.step = 1;
      this.value = Math.ceil(this.value);
    }
  }

  constructor() {
    super();

    addKeybindings(this, {
      skip: () => !this.isInteractive,
      bindingDefaults: { preventDefault: true },
    })
      .set(arrowUp, () => this.emitValueUpdate(this.value + this.step))
      .set(arrowRight, () =>
        this.emitValueUpdate(
          isLTR(this) ? this.value + this.step : this.value - this.step
        )
      )
      .set(arrowDown, () => this.emitValueUpdate(this.value - this.step))
      .set(arrowLeft, () =>
        this.emitValueUpdate(
          isLTR(this) ? this.value - this.step : this.value + this.step
        )
      )
      .set(homeKey, () => this.emitValueUpdate(this.step))
      .set(endKey, () => this.emitValueUpdate(this.max));
  }

  protected handleClick({ clientX }: MouseEvent) {
    const value = this.calcNewValue(clientX);
    const sameValue = this.value === value;

    if (this.allowReset && sameValue) {
      this.emitValueUpdate(0);
    } else if (!sameValue) {
      this.emitValueUpdate(value);
    }
  }

  protected handleMouseMove({ clientX }: MouseEvent) {
    const value = this.calcNewValue(clientX);

    if (this.hoverValue !== value) {
      // Since mousemove spams a lot, only emit on a value change
      this.hoverValue = value;
      this.emitEvent('igcHover', { detail: this.hoverValue });
    }
  }

  protected emitValueUpdate(value: number) {
    this.value = clamp(value, 0, this.max);
    if (value === this.value) {
      this.emitEvent('igcChange', { detail: this.value });
    }
  }

  protected handleSlotChange() {
    if (this.hasProjectedSymbols) {
      this.max = this.ratingSymbols.length;
      this.requestUpdate();
    }
  }

  protected calcNewValue(x: number) {
    const { width, left, right } = this.container.getBoundingClientRect();
    const percent = isLTR(this) ? (x - left) / width : (right - x) / width;
    const value = this.round(this.max * percent + this.step / 2);

    return clamp(value, this.step, this.max);
  }

  protected getPrecision(num: number) {
    const [_, decimal] = num.toString().split('.');
    return decimal ? decimal.length : 0;
  }

  protected round(value: number) {
    value = Math.round(value / this.step) * this.step;
    return Number(value.toFixed(this.getPrecision(this.step)));
  }

  protected clipSymbol(index: number, isLTR = true) {
    const value = this.hoverState ? this.hoverValue : this.value;
    const progress = index + 1 - value;
    const exclusive = progress === 0 || this.value === index + 1 ? 0 : 1;
    const selection = this.single ? exclusive : progress;
    const activate = (p: number) => clamp(p * 100, 0, 100);

    const forward = `inset(0 ${activate(
      isLTR ? selection : 1 - selection
    )}% 0 0)`;
    const backward = `inset(0 0 0 ${activate(
      isLTR ? 1 - selection : selection
    )}%)`;

    return {
      backward: isLTR ? backward : forward,
      forward: isLTR ? forward : backward,
    };
  }

  /**
   * Increments the value of the control by `n` steps multiplied by the
   * step factor.
   */
  public stepUp(n = 1) {
    this.value += this.round(n * this.step);
  }

  /**
   * Decrements the value of the control by `n` steps multiplied by
   * the step factor.
   */
  public stepDown(n = 1) {
    this.value -= this.round(n * this.step);
  }

  protected *renderSymbols() {
    const ltr = isLTR(this);
    for (let i = 0; i < this.max; i++) {
      const { forward, backward } = this.clipSymbol(i, ltr);
      yield html`<igc-rating-symbol exportparts="symbol, full, empty">
        <igc-icon
          collection="internal"
          name="star"
          style=${styleMap({ clipPath: forward })}
        ></igc-icon>
        <igc-icon
          collection="internal"
          name="star_border"
          style=${styleMap({ clipPath: backward })}
          slot="empty"
        ></igc-icon>
      </igc-rating-symbol>`;
    }
  }

  protected clipProjected() {
    if (this.hasProjectedSymbols) {
      const ltr = isLTR(this);
      this.ratingSymbols.forEach((symbol: IgcRatingSymbolComponent, i) => {
        const full = symbol.shadowRoot?.querySelector(
          '[part="symbol full"]'
        ) as HTMLElement;

        const empty = symbol.shadowRoot?.querySelector(
          '[part="symbol empty"]'
        ) as HTMLElement;
        const { forward, backward } = this.clipSymbol(i, ltr);

        if (full) {
          full.style.clipPath = forward;
        }

        if (empty) {
          empty.style.clipPath = backward;
        }
      });
    }
  }

  protected override render() {
    const props = [
      this.value,
      this.hoverValue,
      this.max,
      this.step,
      this.single,
      this.hoverState,
      this.ratingSymbols,
    ];

    const hoverActive = this.hoverPreview && this.isInteractive;

    return html`
      <label part="label" id="rating-label" ?hidden=${!this.label}
        >${this.label}</label
      >
      <div
        part="base"
        role="slider"
        tabindex=${ifDefined(this.disabled ? undefined : 0)}
        aria-labelledby="rating-label"
        aria-valuemin="0"
        aria-valuenow=${this.value}
        aria-valuemax=${this.max}
        aria-valuetext=${this.valueText}
      >
        <div
          aria-hidden="true"
          part="symbols"
          @click=${this.isInteractive ? this.handleClick : nothing}
          @mouseenter=${hoverActive ? () => (this.hoverState = true) : nothing}
          @mouseleave=${hoverActive ? () => (this.hoverState = false) : nothing}
          @mousemove=${hoverActive ? this.handleMouseMove : nothing}
        >
          <slot name="symbol" @slotchange=${this.handleSlotChange}>
            ${guard(props, () => {
              this.clipProjected();
              return this.renderSymbols();
            })}
          </slot>
        </div>
        <label part="value-label" ?hidden=${this.valueLabel.length === 0}>
          <slot name="value-label"></slot>
        </label>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'igc-rating': IgcRatingComponent;
  }
}

1	import { LitElement, html, nothing } from 'lit';	24✔
2	import {	24✔
3	property,	24✔
4	query,	24✔
5	queryAssignedElements,	24✔
6	queryAssignedNodes,	24✔
7	state,	24✔
8	} from 'lit/decorators.js';	24✔
9	import { guard } from 'lit/directives/guard.js';	24✔
10	import { ifDefined } from 'lit/directives/if-defined.js';	24✔
11	import { styleMap } from 'lit/directives/style-map.js';	24✔
12		24✔
13	import IgcRatingSymbolComponent from './rating-symbol.js';	24✔
14	import { styles } from './themes/rating.base.css.js';	24✔
15	import { styles as shared } from './themes/shared/rating.common.css.js';	24✔
16	import { all } from './themes/themes.js';	24✔
17	import { themes } from '../../theming/theming-decorator.js';	24✔
18	import {	24✔
19	addKeybindings,	24✔
20	arrowDown,	24✔
21	arrowLeft,	24✔
22	arrowRight,	24✔
23	arrowUp,	24✔
24	endKey,	24✔
25	homeKey,	24✔
26	} from '../common/controllers/key-bindings.js';	24✔
27	import { watch } from '../common/decorators/watch.js';	24✔
28	import { registerComponent } from '../common/definitions/register.js';	24✔
29	import { Constructor } from '../common/mixins/constructor.js';	24✔
30	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	24✔
31	import { FormAssociatedMixin } from '../common/mixins/form-associated.js';	24✔
32	import { SizableMixin } from '../common/mixins/sizable.js';	24✔
33	import { clamp, format, isLTR } from '../common/util.js';	24✔
34	import IgcIconComponent from '../icon/icon.js';	24✔
35		24✔
36	export interface IgcRatingEventMap {	24✔
37	igcChange: CustomEvent<number>;	24✔
38	igcHover: CustomEvent<number>;	24✔
39	}	24✔
40		24✔
41	/**	24✔
42	* Rating provides insight regarding others' opinions and experiences,	24✔
43	* and can allow the user to submit a rating of their own	24✔
44	*	24✔
45	* @element igc-rating	24✔
46	*	24✔
47	* @fires igcChange - Emitted when the value of the control changes.	24✔
48	* @fires igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating.	24✔
49	*	24✔
50	* @csspart base - The main wrapper which holds all of the rating elements.	24✔
51	* @csspart label - The label part.	24✔
52	* @csspart value-label - The value label part.	24✔
53	* @csspart symbols - A wrapper for all rating symbols.	24✔
54	* @csspart symbol - The part of the encapsulated default symbol.	24✔
55	* @csspart full - The part of the encapsulated full symbols.	24✔
56	* @csspart empty - The part of the encapsulated empty symbols.	24✔
57	*	24✔
58	* @cssproperty --symbol-size - The size of the symbols.	24✔
59	* @cssproperty --symbol-full-color - The color of the filled symbol.	24✔
60	* @cssproperty --symbol-empty-color - The color of the empty symbol.	24✔
61	* @cssproperty --symbol-full-filter - The filter(s) used for the filled symbol.	24✔
62	* @cssproperty --symbol-empty-filter - The filter(s) used for the empty symbol.	24✔
63	*/	24✔
64	@themes(all, true)	24✔
65	export default class IgcRatingComponent extends FormAssociatedMixin(	24✔
66	SizableMixin(	24✔
67	EventEmitterMixin<IgcRatingEventMap, Constructor<LitElement>>(LitElement)	24✔
68	)	24✔
69	) {	24✔
70	public static readonly tagName = 'igc-rating';	24✔
71	public static styles = [styles, shared];	24✔
72		24✔
73	/* blazorSuppress */	24✔
74	public static register() {	24✔
75	registerComponent(this, IgcIconComponent, IgcRatingSymbolComponent);	2✔
76	}	2✔
77		24✔
78	@queryAssignedElements({	24✔
79	selector: IgcRatingSymbolComponent.tagName,	24✔
80	slot: 'symbol',	24✔
81	})	24✔
82	protected ratingSymbols!: Array<IgcRatingSymbolComponent>;	24✔
83		24✔
84	@query('[part="symbols"]', true)	24✔
85	protected container!: HTMLElement;	24✔
86		24✔
87	@queryAssignedNodes({ slot: 'value-label', flatten: true })	24✔
88	protected valueLabel!: Array<Node>;	24✔
89		24✔
90	@state()	24✔
91	protected hoverValue = -1;	24✔
92		24✔
93	@state()	24✔
94	protected hoverState = false;	24✔
95		24✔
96	protected get isInteractive() {	24✔
97	return !(this.readonly \|\| this.disabled);	104✔
98	}	104✔
99		24✔
100	protected get hasProjectedSymbols() {	24✔
101	return this.ratingSymbols.length > 0;	134✔
102	}	134✔
103		24✔
104	protected get valueText() {	24✔
105	// Skip IEEE 754 representation for screen readers	82✔
106	const value = this.round(this.value);	82✔
107	return this.valueFormat	82✔
108	? format(this.valueFormat, `${value}`, `${this.max}`)	82✔
109	: `${value} of ${this.max}`;	82✔
110	}	82✔
111		24✔
112	/**	24✔
113	* The maximum value for the rating.	24✔
114	*	24✔
115	* If there are projected symbols, the maximum value will be resolved	24✔
116	* based on the number of symbols.	24✔
117	* @attr	24✔
118	*/	24✔
119	@property({ type: Number })	24✔
120	public max = 5;	24✔
121		24✔
122	/**	24✔
123	* The minimum value change allowed.	24✔
124	*	24✔
125	* Valid values are in the interval between 0 and 1 inclusive.	24✔
126	* @attr	24✔
127	*/	24✔
128	@property({ type: Number })	24✔
129	public step = 1;	24✔
130		24✔
131	/**	24✔
132	* The label of the control.	24✔
133	* @attr	24✔
134	*/	24✔
135	@property()	24✔
136	public label!: string;	24✔
137		24✔
138	/**	24✔
139	* A format string which sets aria-valuetext. Instances of '{0}' will be replaced	24✔
140	* with the current value of the control and instances of '{1}' with the maximum value for the control.	24✔
141	*	24✔
142	* Important for screen-readers and useful for localization.	24✔
143	* @attr value-format	24✔
144	*/	24✔
145	@property({ attribute: 'value-format' })	24✔
146	public valueFormat!: string;	24✔
147		24✔
148	/**	24✔
149	* The current value of the component	24✔
150	* @attr	24✔
151	*/	24✔
152	@property({ type: Number })	24✔
153	public value = 0;	24✔
154		24✔
155	/**	24✔
156	* Sets hover preview behavior for the component	24✔
157	* @attr hover-preview	24✔
158	*/	24✔
159	@property({ type: Boolean, reflect: true, attribute: 'hover-preview' })	24✔
160	public hoverPreview = false;	24✔
161		24✔
162	/**	24✔
163	* Makes the control a readonly field.	24✔
164	* @attr readonly	24✔
165	*/	24✔
166	@property({ type: Boolean, reflect: true, attribute: 'readonly' })	24✔
167	public readOnly = false;	24✔
168		24✔
169	/* blazorCSSuppress */	24✔
170	/**	24✔
171	* Sets the readonly state of the component	24✔
172	* @prop	24✔
173	*	24✔
174	* @deprecated since v4.4.0. Use the `readOnly` property instead.	24✔
175	*/	24✔
176	@property({ attribute: false })	24✔
177	public set readonly(value: boolean) {	24✔
UNCOV 178	this.readOnly = value;	×
179	}	×
180		24✔
181	public get readonly() {	24✔
182	return this.readOnly;	186✔
183	}	186✔
184		24✔
185	/**	24✔
186	* Toggles single selection visual mode.	24✔
187	* @attr	24✔
188	*/	24✔
189	@property({ type: Boolean })	24✔
190	public single = false;	24✔
191		24✔
192	/**	24✔
193	* Whether to reset the rating when the user selects the same value.	24✔
194	* @attr allow-reset	24✔
195	*/	24✔
196	@property({ type: Boolean, reflect: true, attribute: 'allow-reset' })	24✔
197	public allowReset = false;	24✔
198		24✔
199	@watch('max')	24✔
200	protected handleMaxChange() {	24✔
201	this.hasProjectedSymbols	49✔
202	? (this.max = this.ratingSymbols.length)	49✔
203	: (this.max = Math.max(0, this.max));	49✔
204	if (this.max < this.value) {	49✔
205	this.value = this.max;	2✔
206	}	2✔
207	}	49✔
208		24✔
209	@watch('value')	24✔
210	protected handleValueChange() {	24✔
211	this.value = clamp(isNaN(this.value) ? 0 : this.value, 0, this.max);	68!
212	this.setFormValue(`${this.value}`, `${this.value}`);	68✔
213	this.updateValidity();	68✔
214	this.setInvalidState();	68✔
215	}	68✔
216		24✔
217	@watch('step')	24✔
218	protected handlePrecisionChange() {	24✔
219	this.step = !this.single ? clamp(this.step, 0.001, 1) : 1;	48✔
220	}	48✔
221		24✔
222	@watch('single')	24✔
223	protected handleSelectionChange() {	24✔
224	if (this.single) {	42✔
225	this.step = 1;	1✔
226	this.value = Math.ceil(this.value);	1✔
227	}	1✔
228	}	42✔
229		24✔
230	constructor() {	24✔
231	super();	41✔
232		41✔
233	addKeybindings(this, {	41✔
234	skip: () => !this.isInteractive,	41✔
235	bindingDefaults: { preventDefault: true },	41✔
236	})	41✔
237	.set(arrowUp, () => this.emitValueUpdate(this.value + this.step))	41✔
238	.set(arrowRight, () =>	41✔
239	this.emitValueUpdate(	3✔
240	isLTR(this) ? this.value + this.step : this.value - this.step	3✔
241	)	41✔
242	)	41✔
243	.set(arrowDown, () => this.emitValueUpdate(this.value - this.step))	41✔
244	.set(arrowLeft, () =>	41✔
245	this.emitValueUpdate(	2✔
246	isLTR(this) ? this.value - this.step : this.value + this.step	2✔
247	)	41✔
248	)	41✔
249	.set(homeKey, () => this.emitValueUpdate(this.step))	41✔
250	.set(endKey, () => this.emitValueUpdate(this.max));	41✔
251	}	41✔
252		24✔
253	protected handleClick({ clientX }: MouseEvent) {	24✔
254	const value = this.calcNewValue(clientX);	4✔
255	const sameValue = this.value === value;	4✔
256		4✔
257	if (this.allowReset && sameValue) {	4✔
258	this.emitValueUpdate(0);	1✔
259	} else if (!sameValue) {	4✔
260	this.emitValueUpdate(value);	2✔
261	}	2✔
262	}	4✔
263		24✔
264	protected handleMouseMove({ clientX }: MouseEvent) {	24✔
265	const value = this.calcNewValue(clientX);	1✔
266		1✔
267	if (this.hoverValue !== value) {	1✔
268	// Since mousemove spams a lot, only emit on a value change	1✔
269	this.hoverValue = value;	1✔
270	this.emitEvent('igcHover', { detail: this.hoverValue });	1✔
271	}	1✔
272	}	1✔
273		24✔
274	protected emitValueUpdate(value: number) {	24✔
275	this.value = clamp(value, 0, this.max);	12✔
276	if (value === this.value) {	12✔
277	this.emitEvent('igcChange', { detail: this.value });	9✔
278	}	9✔
279	}	12✔
280		24✔
281	protected handleSlotChange() {	24✔
282	if (this.hasProjectedSymbols) {	3✔
283	this.max = this.ratingSymbols.length;	3✔
284	this.requestUpdate();	3✔
285	}	3✔
286	}	3✔
287		24✔
288	protected calcNewValue(x: number) {	24✔
289	const { width, left, right } = this.container.getBoundingClientRect();	5✔
290	const percent = isLTR(this) ? (x - left) / width : (right - x) / width;	5!
291	const value = this.round(this.max * percent + this.step / 2);	5✔
292		5✔
293	return clamp(value, this.step, this.max);	5✔
294	}	5✔
295		24✔
296	protected getPrecision(num: number) {	24✔
297	const [_, decimal] = num.toString().split('.');	90✔
298	return decimal ? decimal.length : 0;	90✔
299	}	90✔
300		24✔
301	protected round(value: number) {	24✔
302	value = Math.round(value / this.step) * this.step;	90✔
303	return Number(value.toFixed(this.getPrecision(this.step)));	90✔
304	}	90✔
305		24✔
306	protected clipSymbol(index: number, isLTR = true) {	24✔
307	const value = this.hoverState ? this.hoverValue : this.value;	467!
308	const progress = index + 1 - value;	467✔
309	const exclusive = progress === 0 \|\| this.value === index + 1 ? 0 : 1;	467✔
310	const selection = this.single ? exclusive : progress;	467✔
311	const activate = (p: number) => clamp(p * 100, 0, 100);	467✔
312		467✔
313	const forward = `inset(0 ${activate(	467✔
314	isLTR ? selection : 1 - selection	467!
315	)}% 0 0)`;	467✔
316	const backward = `inset(0 0 0 ${activate(	467✔
317	isLTR ? 1 - selection : selection	467!
318	)}%)`;	467✔
319		467✔
320	return {	467✔
321	backward: isLTR ? backward : forward,	467!
322	forward: isLTR ? forward : backward,	467!
323	};	467✔
324	}	467✔
325		24✔
326	/**	24✔
327	* Increments the value of the control by `n` steps multiplied by the	24✔
328	* step factor.	24✔
329	*/	24✔
330	public stepUp(n = 1) {	24✔
331	this.value += this.round(n * this.step);	2✔
332	}	2✔
333		24✔
334	/**	24✔
335	* Decrements the value of the control by `n` steps multiplied by	24✔
336	* the step factor.	24✔
337	*/	24✔
338	public stepDown(n = 1) {	24✔
339	this.value -= this.round(n * this.step);	1✔
340	}	1✔
341		24✔
342	protected *renderSymbols() {	24✔
343	const ltr = isLTR(this);	82✔
344	for (let i = 0; i < this.max; i++) {	82✔
345	const { forward, backward } = this.clipSymbol(i, ltr);	455✔
346	yield html`<igc-rating-symbol exportparts="symbol, full, empty">	455✔
347	<igc-icon	455✔
348	collection="internal"	455✔
349	name="star"	455✔
350	style=${styleMap({ clipPath: forward })}	455✔
351	></igc-icon>	455✔
352	<igc-icon	455✔
353	collection="internal"	455✔
354	name="star_border"	455✔
355	style=${styleMap({ clipPath: backward })}	455✔
356	slot="empty"	455✔
357	></igc-icon>	455✔
358	</igc-rating-symbol>`;	455✔
359	}	455✔
360	}	82✔
361		24✔
362	protected clipProjected() {	24✔
363	if (this.hasProjectedSymbols) {	82✔
364	const ltr = isLTR(this);	4✔
365	this.ratingSymbols.forEach((symbol: IgcRatingSymbolComponent, i) => {	4✔
366	const full = symbol.shadowRoot?.querySelector(	12✔
367	'[part="symbol full"]'	12✔
368	) as HTMLElement;	12✔
369		12✔
370	const empty = symbol.shadowRoot?.querySelector(	12✔
371	'[part="symbol empty"]'	12✔
372	) as HTMLElement;	12✔
373	const { forward, backward } = this.clipSymbol(i, ltr);	12✔
374		12✔
375	if (full) {	12✔
376	full.style.clipPath = forward;	12✔
377	}	12✔
378		12✔
379	if (empty) {	12✔
380	empty.style.clipPath = backward;	12✔
381	}	12✔
382	});	4✔
383	}	4✔
384	}	82✔
385		24✔
386	protected override render() {	24✔
387	const props = [	82✔
388	this.value,	82✔
389	this.hoverValue,	82✔
390	this.max,	82✔
391	this.step,	82✔
392	this.single,	82✔
393	this.hoverState,	82✔
394	this.ratingSymbols,	82✔
395	];	82✔
396		82✔
397	const hoverActive = this.hoverPreview && this.isInteractive;	82✔
398		82✔
399	return html`	82✔
400	<label part="label" id="rating-label" ?hidden=${!this.label}	82✔
401	>${this.label}</label	82✔
402	>	82✔
403	<div	82✔
404	part="base"	82✔
405	role="slider"	82✔
406	tabindex=${ifDefined(this.disabled ? undefined : 0)}	82✔
407	aria-labelledby="rating-label"	82✔
408	aria-valuemin="0"	82✔
409	aria-valuenow=${this.value}	82✔
410	aria-valuemax=${this.max}	82✔
411	aria-valuetext=${this.valueText}	82✔
412	>	82✔
413	<div	82✔
414	aria-hidden="true"	82✔
415	part="symbols"	82✔
416	@click=${this.isInteractive ? this.handleClick : nothing}	82✔
417	@mouseenter=${hoverActive ? () => (this.hoverState = true) : nothing}	82✔
418	@mouseleave=${hoverActive ? () => (this.hoverState = false) : nothing}	82✔
419	@mousemove=${hoverActive ? this.handleMouseMove : nothing}	82✔
420	>	82✔
421	<slot name="symbol" @slotchange=${this.handleSlotChange}>	82✔
422	${guard(props, () => {	82✔
423	this.clipProjected();	82✔
424	return this.renderSymbols();	82✔
425	})}	82✔
426	</slot>	82✔
427	</div>	82✔
428	<label part="value-label" ?hidden=${this.valueLabel.length === 0}>	82✔
429	<slot name="value-label"></slot>	82✔
430	</label>	82✔
431	</div>	82✔
432	`;	82✔
433	}	82✔
434	}	24✔
435		24✔
436	declare global {	24✔
437	interface HTMLElementTagNameMap {	24✔
438	'igc-rating': IgcRatingComponent;	24✔
439	}	24✔
440	}	24✔

IgniteUI / igniteui-webcomponents / 8277311192

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