23835379446

Committed 01 Apr 2026 06:33AM UTC coverage: 98.363% (-0.004%) from 98.367%

Build # 23835379446

Build Type

Pull #2171

github

Committed by

web-flow

Commit Message

Merge f9601aeda into 8222b33d6

Pull Request Pull Request #2171: refactor(rating): Improved code quality and architecture

Coverage Stats

5578 of 5875 branches covered (94.94%)

Branch coverage included in aggregate %.

201 of 203 new or added lines in 1 file covered. (99.01%)

4 existing lines in 2 files now uncovered.

39182 of 39630 relevant lines covered (98.87%)

1506.11 hits per line

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

98.86

/src/components/rating/rating.ts

import { html, LitElement, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { range } from 'lit/directives/range.js';
import { repeat } from 'lit/directives/repeat.js';
import { styleMap } from 'lit/directives/style-map.js';
import { addThemingController } from '../../theming/theming-controller.js';
import {
  addKeybindings,
  arrowDown,
  arrowLeft,
  arrowRight,
  arrowUp,
  endKey,
  homeKey,
} from '../common/controllers/key-bindings.js';
import {
  addSlotController,
  type InferSlotNames,
  type SlotChangeCallbackParameters,
  setSlots,
} from '../common/controllers/slot.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 { FormAssociatedMixin } from '../common/mixins/forms/associated.js';
import { FormValueNumberTransformers } from '../common/mixins/forms/form-transformers.js';
import { createFormValueState } from '../common/mixins/forms/form-value.js';
import {
  asNumber,
  bindIf,
  clamp,
  formatString,
  isLTR,
  numberOfDecimals,
  roundPrecise,
} from '../common/util.js';
import IgcIconComponent from '../icon/icon.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';

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

const Slots = setSlots('symbol', 'value-label');

/**
 * A rating component that allows users to view and provide ratings using customizable symbols.
 * It supports fractional values, hover previews, keyboard navigation, single-selection mode,
 * and integrates with forms as a number input.
 *
 * @example
 * ```html
 * <!-- Basic rating -->
 * <igc-rating value="3" max="5" label="Rate this product"></igc-rating>
 * ```
 *
 * @example
 * ```html
 * <!-- Half-star rating with hover preview -->
 * <igc-rating step="0.5" hover-preview value-format="{0} out of {1} stars"></igc-rating>
 * ```
 *
 * @example
 * ```html
 * <!-- Custom symbols via projected rating symbols -->
 * <igc-rating>
 *   <igc-rating-symbol>
 *     <igc-icon name="heart_filled" collection="default"></igc-icon>
 *     <igc-icon name="heart_outlined" collection="default" slot="empty"></igc-icon>
 *   </igc-rating-symbol>
 *   <igc-rating-symbol>
 *     <igc-icon name="heart_filled" collection="default"></igc-icon>
 *     <igc-icon name="heart_outlined" collection="default" slot="empty"></igc-icon>
 *   </igc-rating-symbol>
 * </igc-rating>
 * ```
 *
 * @element igc-rating
 *
 * @slot symbol - Slot for projecting custom `igc-rating-symbol` elements. When used, the number of symbols determines the `max` value.
 * @slot value-label - Slot for custom content displayed alongside the rating value.
 *
 * @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.
 */
export default class IgcRatingComponent extends FormAssociatedMixin(
  EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>(
    LitElement
  )
) {
  public static readonly tagName = 'igc-rating';
  public static styles = [styles, shared];

  /* blazorSuppress */
  public static register(): void {
    registerComponent(
      IgcRatingComponent,
      IgcIconComponent,
      IgcRatingSymbolComponent
    );
  }

  //#region Internal state and properties

  protected readonly _slots = addSlotController(this, {
    slots: Slots,
    onChange: this._handleSlotChange,
  });

  protected override readonly _formValue = createFormValueState(this, {
    initialValue: 0,
    transformers: FormValueNumberTransformers,
  });

  private _max = 5;
  private _step = 1;
  private _single = false;
  private _symbols: IgcRatingSymbolComponent[] = [];

  @query('[part="symbols"]', true)
  private _container?: HTMLElement;

  @state()
  private _hoverValue = -1;

  @state()
  private _hoverState = false;

  private get _isInteractive(): boolean {
    return !(this.readOnly || this.disabled);
  }

  private get _hasProjectedSymbols(): boolean {
    return this._symbols.length > 0;
  }

  private get _valueText(): string {
    // Skip IEEE 754 representation for screen readers
    const value = this._round(this.value);
    return this.valueFormat
      ? formatString(this.valueFormat, value, this.max)
      : `${value} of ${this.max}`;
  }

  //#endregion

  //#region Public attributes and properties

  /**
   * The maximum value for the rating.
   *
   * If there are projected symbols, the maximum value will be resolved
   * based on the number of symbols.
   * @attr max
   * @default 5
   */
  @property({ type: Number })
  public set max(value: number) {
    this._max = this._hasProjectedSymbols
      ? this._symbols.length
      : Math.max(0, value);

    if (this._max < this.value) {
      this.value = this._max;
    }
  }

  public get max(): number {
    return this._max;
  }

  /**
   * The minimum value change allowed.
   *
   * Valid values are in the interval between 0 and 1 inclusive.
   * @attr step
   * @default 1
   */
  @property({ type: Number })
  public set step(value: number) {
    this._step = this.single ? 1 : clamp(value, 0.001, 1);
  }

  public get step(): number {
    return this._step;
  }

  /**
   * The label of the control.
   * @attr label
   */
  @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;

  /* @tsTwoWayProperty(true, "igcChange", "detail", false) */
  /**
   * The current value of the component
   * @attr value
   * @default 0
   */
  @property({ type: Number })
  public set value(number: number) {
    const value = this.hasUpdated
      ? clamp(asNumber(number), 0, this.max)
      : Math.max(asNumber(number), 0);
    this._formValue.setValueAndFormState(value);
  }

  public get value(): number {
    return this._formValue.value;
  }

  /**
   * 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;

  /**
   * Toggles single selection visual mode.
   * @attr single
   * @default false
   */
  @property({ type: Boolean, reflect: true })
  public set single(value: boolean) {
    this._single = Boolean(value);

    if (this._single) {
      this.step = 1;
      this.value = Math.ceil(this.value);
    }
  }

  public get single(): boolean {
    return this._single;
  }

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

  //#endregion

  //#region Lit lifecycle hooks

  constructor() {
    super();

    addThemingController(this, all);

    addKeybindings(this, {
      skip: () => !this._isInteractive,
    })
      .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 override firstUpdated(): void {
    this._formValue.setValueAndFormState(clamp(this.value, 0, this.max));
    this._pristine = true;
  }

  protected override updated(): void {
    if (this._hasProjectedSymbols) {
      this._updateProjectedSymbols();
    }
  }

  //#endregion

  //#region Event handlers

  private _handleClick({ clientX }: PointerEvent): void {
    const value = this._calcNewValue(clientX);
    const sameValue = this.value === value;

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

  private _handlePointerMove({ clientX }: PointerEvent): void {
    const value = this._calcNewValue(clientX);

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

  private _handleSlotChange({
    slot,
  }: SlotChangeCallbackParameters<InferSlotNames<typeof Slots>>): void {
    if (slot === 'symbol') {
      this._symbols = this._slots.getAssignedElements('symbol', {
        selector: IgcRatingSymbolComponent.tagName,
      });

      if (this._hasProjectedSymbols) {
        this.max = this._symbols.length;
      }
    }
  }

  private _handleHoverEnabled(): void {
    this._hoverState = true;
  }

  private _handleHoverDisabled(): void {
    this._hoverState = false;
  }

  //#endregion

  //#region Private methods

  private _emitValueUpdate(next: number): void {
    this._setTouchedState();

    const clamped = clamp(next, 0, this.max);
    if (clamped !== this.value) {
      this.value = clamped;
      this.emitEvent('igcChange', { detail: this.value });
    }
  }

  private _calcNewValue(x: number): number {
    const { width, left, right } =
      this._container?.getBoundingClientRect() ?? new DOMRect(1, 1, 1, 1);
    const percent = isLTR(this) ? (x - left) / width : (right - x) / width;
    const value = this._round(this.max * percent);

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

  private _round(value: number): number {
    return roundPrecise(
      Math.ceil(value / this.step) * this.step,
      numberOfDecimals(this.step)
    );
  }

  private _updateProjectedSymbols(): void {
    const ltr = isLTR(this);
    const partFull = '[part="symbol full"]';
    const partEmpty = '[part="symbol empty"]';

    for (const [i, symbol] of this._symbols.entries()) {
      const full = symbol.renderRoot.querySelector<HTMLElement>(partFull);
      const empty = symbol.renderRoot.querySelector<HTMLElement>(partEmpty);
      const { forward, backward } = this._clipSymbol(i, ltr);

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

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

  private _clipSymbol(index: number, isLTR = true) {
    const value = this._hoverState ? this._hoverValue : this.value;
    const progress = index + 1 - value;
    const exclusive = progress === 0 || 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,
    };
  }

  //#endregion

  //#region Public methods

  /**
   * Increments the value of the control by `n` steps multiplied by the
   * step factor.
   */
  public stepUp(n = 1): void {
    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): void {
    this.value -= this._round(n * this.step);
  }

  //#endregion

  private _renderSymbols() {
    const ltr = isLTR(this);

    return html`
      ${repeat(
        range(this.max),
        (i) => i,
        (i) => {
          const { forward, backward } = this._clipSymbol(i, ltr);
          return html`
            <igc-rating-symbol exportparts="symbol, full, empty">
              <igc-icon
                collection="default"
                name="star_filled"
                style=${styleMap({ clipPath: forward })}
              ></igc-icon>
              <igc-icon
                collection="default"
                name="star_outlined"
                style=${styleMap({ clipPath: backward })}
                slot="empty"
              ></igc-icon>
            </igc-rating-symbol>
          `;
        }
      )}
    `;
  }

  protected override render() {
    const hoverActive = this.hoverPreview && this._isInteractive;
    const valueLabelHidden = !this._slots.hasAssignedNodes('value-label', true);

    return html`
      <label part="label" id="rating-label" ?hidden=${!this.label}
        >${this.label}</label
      >
      <div
        part="base"
        role="slider"
        tabindex=${this.disabled ? -1 : 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=${bindIf(this._isInteractive, this._handleClick)}
          @pointerenter=${bindIf(hoverActive, this._handleHoverEnabled)}
          @pointerleave=${bindIf(hoverActive, this._handleHoverDisabled)}
          @pointercancel=${bindIf(hoverActive, this._handleHoverDisabled)}
          @pointermove=${bindIf(hoverActive, this._handlePointerMove)}
        >
          <slot name="symbol">
            ${this._hasProjectedSymbols ? nothing : this._renderSymbols()}
          </slot>
        </div>
        <label part="value-label" ?hidden=${valueLabelHidden}>
          <slot name="value-label"></slot>
        </label>
      </div>
    `;
  }
}

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

1	import { html, LitElement, nothing } from 'lit';	8✔
2	import { property, query, state } from 'lit/decorators.js';	8✔
3	import { range } from 'lit/directives/range.js';	8✔
4	import { repeat } from 'lit/directives/repeat.js';	8✔
5	import { styleMap } from 'lit/directives/style-map.js';	8✔
6	import { addThemingController } from '../../theming/theming-controller.js';	8✔
7	import {	8✔
8	addKeybindings,	8✔
9	arrowDown,	8✔
10	arrowLeft,	8✔
11	arrowRight,	8✔
12	arrowUp,	8✔
13	endKey,	8✔
14	homeKey,	8✔
15	} from '../common/controllers/key-bindings.js';	8✔
16	import {	8✔
17	addSlotController,	8✔
18	type InferSlotNames,	8✔
19	type SlotChangeCallbackParameters,	8✔
20	setSlots,	8✔
21	} from '../common/controllers/slot.js';	8✔
22	import { registerComponent } from '../common/definitions/register.js';	8✔
23	import type { Constructor } from '../common/mixins/constructor.js';	8✔
24	import { EventEmitterMixin } from '../common/mixins/event-emitter.js';	8✔
25	import { FormAssociatedMixin } from '../common/mixins/forms/associated.js';	8✔
26	import { FormValueNumberTransformers } from '../common/mixins/forms/form-transformers.js';	8✔
27	import { createFormValueState } from '../common/mixins/forms/form-value.js';	8✔
28	import {	8✔
29	asNumber,	8✔
30	bindIf,	8✔
31	clamp,	8✔
32	formatString,	8✔
33	isLTR,	8✔
34	numberOfDecimals,	8✔
35	roundPrecise,	8✔
36	} from '../common/util.js';	8✔
37	import IgcIconComponent from '../icon/icon.js';	8✔
38	import IgcRatingSymbolComponent from './rating-symbol.js';	8✔
39	import { styles } from './themes/rating.base.css.js';	8✔
40	import { styles as shared } from './themes/shared/rating.common.css.js';	8✔
41	import { all } from './themes/themes.js';	8✔
42		8✔
43	export interface IgcRatingComponentEventMap {	8✔
44	igcChange: CustomEvent<number>;	8✔
45	igcHover: CustomEvent<number>;	8✔
46	}	8✔
47		8✔
48	const Slots = setSlots('symbol', 'value-label');	8✔
49		8✔
50	/**	8✔
51	* A rating component that allows users to view and provide ratings using customizable symbols.	8✔
52	* It supports fractional values, hover previews, keyboard navigation, single-selection mode,	8✔
53	* and integrates with forms as a number input.	8✔
54	*	8✔
55	* @example	8✔
56	* ```html	8✔
57	* <!-- Basic rating -->	8✔
58	* <igc-rating value="3" max="5" label="Rate this product"></igc-rating>	8✔
59	* ```	8✔
60	*	8✔
61	* @example	8✔
62	* ```html	8✔
63	* <!-- Half-star rating with hover preview -->	8✔
64	* <igc-rating step="0.5" hover-preview value-format="{0} out of {1} stars"></igc-rating>	8✔
65	* ```	8✔
66	*	8✔
67	* @example	8✔
68	* ```html	8✔
69	* <!-- Custom symbols via projected rating symbols -->	8✔
70	* <igc-rating>	8✔
71	* <igc-rating-symbol>	8✔
72	* <igc-icon name="heart_filled" collection="default"></igc-icon>	8✔
73	* <igc-icon name="heart_outlined" collection="default" slot="empty"></igc-icon>	8✔
74	* </igc-rating-symbol>	8✔
75	* <igc-rating-symbol>	8✔
76	* <igc-icon name="heart_filled" collection="default"></igc-icon>	8✔
77	* <igc-icon name="heart_outlined" collection="default" slot="empty"></igc-icon>	8✔
78	* </igc-rating-symbol>	8✔
79	* </igc-rating>	8✔
80	* ```	8✔
81	*	8✔
82	* @element igc-rating	8✔
83	*	8✔
84	* @slot symbol - Slot for projecting custom `igc-rating-symbol` elements. When used, the number of symbols determines the `max` value.	8✔
85	* @slot value-label - Slot for custom content displayed alongside the rating value.	8✔
86	*	8✔
87	* @fires igcChange - Emitted when the value of the control changes.	8✔
88	* @fires igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating.	8✔
89	*	8✔
90	* @csspart base - The main wrapper which holds all of the rating elements.	8✔
91	* @csspart label - The label part.	8✔
92	* @csspart value-label - The value label part.	8✔
93	* @csspart symbols - A wrapper for all rating symbols.	8✔
94	* @csspart symbol - The part of the encapsulated default symbol.	8✔
95	* @csspart full - The part of the encapsulated full symbols.	8✔
96	* @csspart empty - The part of the encapsulated empty symbols.	8✔
97	*	8✔
98	* @cssproperty --symbol-size - The size of the symbols.	8✔
99	* @cssproperty --symbol-full-color - The color of the filled symbol.	8✔
100	* @cssproperty --symbol-empty-color - The color of the empty symbol.	8✔
101	* @cssproperty --symbol-full-filter - The filter(s) used for the filled symbol.	8✔
102	* @cssproperty --symbol-empty-filter - The filter(s) used for the empty symbol.	8✔
103	*/	8✔
104	export default class IgcRatingComponent extends FormAssociatedMixin(	8✔
105	EventEmitterMixin<IgcRatingComponentEventMap, Constructor<LitElement>>(	8✔
106	LitElement	8✔
107	)	8✔
108	) {	8✔
109	public static readonly tagName = 'igc-rating';	8✔
110	public static styles = [styles, shared];	8✔
111		8✔
112	/* blazorSuppress */	8✔
113	public static register(): void {	8✔
114	registerComponent(	1✔
115	IgcRatingComponent,	1✔
116	IgcIconComponent,	1✔
117	IgcRatingSymbolComponent	1✔
118	);	1✔
119	}	1✔
120		8✔
121	//#region Internal state and properties	8✔
122		8✔
123	protected readonly _slots = addSlotController(this, {	8✔
124	slots: Slots,	8✔
125	onChange: this._handleSlotChange,	8✔
126	});	8✔
127		8✔
128	protected override readonly _formValue = createFormValueState(this, {	8✔
129	initialValue: 0,	8✔
130	transformers: FormValueNumberTransformers,	8✔
131	});	8✔
132		8✔
133	private _max = 5;	8✔
134	private _step = 1;	8✔
135	private _single = false;	8✔
136	private _symbols: IgcRatingSymbolComponent[] = [];	8✔
137		8✔
138	@query('[part="symbols"]', true)	8✔
139	private _container?: HTMLElement;	8✔
140		8✔
141	@state()	8✔
142	private _hoverValue = -1;	8✔
143		8✔
144	@state()	8✔
145	private _hoverState = false;	8✔
146		8✔
147	private get _isInteractive(): boolean {	8✔
148	return !(this.readOnly \|\| this.disabled);	132✔
149	}	132✔
150		8✔
151	private get _hasProjectedSymbols(): boolean {	8✔
152	return this._symbols.length > 0;	214✔
153	}	214✔
154		8✔
155	private get _valueText(): string {	8✔
156	// Skip IEEE 754 representation for screen readers	98✔
157	const value = this._round(this.value);	98✔
158	return this.valueFormat	98✔
159	? formatString(this.valueFormat, value, this.max)	3✔
160	: `${value} of ${this.max}`;	95✔
161	}	98✔
162		8✔
163	//#endregion	8✔
164		8✔
165	//#region Public attributes and properties	8✔
166		8✔
167	/**	8✔
168	* The maximum value for the rating.	8✔
169	*	8✔
170	* If there are projected symbols, the maximum value will be resolved	8✔
171	* based on the number of symbols.	8✔
172	* @attr max	8✔
173	* @default 5	8✔
174	*/	8✔
175	@property({ type: Number })	8✔
176	public set max(value: number) {	8✔
177	this._max = this._hasProjectedSymbols	11✔
178	? this._symbols.length	4✔
179	: Math.max(0, value);	7✔
180		11✔
181	if (this._max < this.value) {	11✔
182	this.value = this._max;	1✔
183	}	1✔
184	}	11✔
185		8✔
186	public get max(): number {	8✔
187	return this._max;	491✔
188	}	491✔
189		8✔
190	/**	8✔
191	* The minimum value change allowed.	8✔
192	*	8✔
193	* Valid values are in the interval between 0 and 1 inclusive.	8✔
194	* @attr step	8✔
195	* @default 1	8✔
196	*/	8✔
197	@property({ type: Number })	8✔
198	public set step(value: number) {	8✔
199	this._step = this.single ? 1 : clamp(value, 0.001, 1);	9✔
200	}	9✔
201		8✔
202	public get step(): number {	8✔
203	return this._step;	417✔
204	}	417✔
205		8✔
206	/**	8✔
207	* The label of the control.	8✔
208	* @attr label	8✔
209	*/	8✔
210	@property()	8✔
211	public label?: string;	8✔
212		8✔
213	/**	8✔
214	* A format string which sets aria-valuetext. Instances of '{0}' will be replaced	8✔
215	* with the current value of the control and instances of '{1}' with the maximum value for the control.	8✔
216	*	8✔
217	* Important for screen-readers and useful for localization.	8✔
218	* @attr value-format	8✔
219	*/	8✔
220	@property({ attribute: 'value-format' })	8✔
221	public valueFormat?: string;	8✔
222		8✔
223	/* @tsTwoWayProperty(true, "igcChange", "detail", false) */	8✔
224	/**	8✔
225	* The current value of the component	8✔
226	* @attr value	8✔
227	* @default 0	8✔
228	*/	8✔
229	@property({ type: Number })	8✔
230	public set value(number: number) {	8✔
231	const value = this.hasUpdated	52✔
232	? clamp(asNumber(number), 0, this.max)	39✔
233	: Math.max(asNumber(number), 0);	13✔
234	this._formValue.setValueAndFormState(value);	52✔
235	}	52✔
236		8✔
237	public get value(): number {	8✔
238	return this._formValue.value;	1,065✔
239	}	1,065✔
240		8✔
241	/**	8✔
242	* Sets hover preview behavior for the component	8✔
243	* @attr hover-preview	8✔
244	*/	8✔
245	@property({ type: Boolean, reflect: true, attribute: 'hover-preview' })	8✔
246	public hoverPreview = false;	8✔
247		8✔
248	/**	8✔
249	* Makes the control a readonly field.	8✔
250	* @attr readonly	8✔
251	*/	8✔
252	@property({ type: Boolean, reflect: true, attribute: 'readonly' })	8✔
253	public readOnly = false;	8✔
254		8✔
255	/**	8✔
256	* Toggles single selection visual mode.	8✔
257	* @attr single	8✔
258	* @default false	8✔
259	*/	8✔
260	@property({ type: Boolean, reflect: true })	8✔
261	public set single(value: boolean) {	8✔
262	this._single = Boolean(value);	1✔
263		1✔
264	if (this._single) {	1✔
265	this.step = 1;	1✔
266	this.value = Math.ceil(this.value);	1✔
267	}	1✔
268	}	1✔
269		8✔
270	public get single(): boolean {	8✔
271	return this._single;	664✔
272	}	664✔
273		8✔
274	/**	8✔
275	* Whether to reset the rating when the user selects the same value.	8✔
276	* @attr allow-reset	8✔
277	* @default false	8✔
278	*/	8✔
279	@property({ type: Boolean, reflect: true, attribute: 'allow-reset' })	8✔
280	public allowReset = false;	8✔
281		8✔
282	//#endregion	8✔
283		8✔
284	//#region Lit lifecycle hooks	8✔
285		8✔
286	constructor() {	8✔
287	super();	48✔
288		48✔
289	addThemingController(this, all);	48✔
290		48✔
291	addKeybindings(this, {	48✔
292	skip: () => !this._isInteractive,	48✔
293	})	48✔
294	.set(arrowUp, () => this._emitValueUpdate(this.value + this.step))	48✔
295	.set(arrowRight, () =>	48✔
296	this._emitValueUpdate(	5✔
297	isLTR(this) ? this.value + this.step : this.value - this.step	5✔
298	)	5✔
299	)	48✔
300	.set(arrowDown, () => this._emitValueUpdate(this.value - this.step))	48✔
301	.set(arrowLeft, () =>	48✔
302	this._emitValueUpdate(	4✔
303	isLTR(this) ? this.value - this.step : this.value + this.step	4✔
304	)	4✔
305	)	48✔
306	.set(homeKey, () => this._emitValueUpdate(this.step))	48✔
307	.set(endKey, () => this._emitValueUpdate(this.max));	48✔
308	}	48✔
309		8✔
310	protected override firstUpdated(): void {	8✔
311	this._formValue.setValueAndFormState(clamp(this.value, 0, this.max));	48✔
312	this._pristine = true;	48✔
313	}	48✔
314		8✔
315	protected override updated(): void {	8✔
316	if (this._hasProjectedSymbols) {	98✔
317	this._updateProjectedSymbols();	3✔
318	}	3✔
319	}	98✔
320		8✔
321	//#endregion	8✔
322		8✔
323	//#region Event handlers	8✔
324		8✔
325	private _handleClick({ clientX }: PointerEvent): void {	8✔
326	const value = this._calcNewValue(clientX);	6✔
327	const sameValue = this.value === value;	6✔
328		6✔
329	if (this.allowReset && sameValue) {	6✔
330	this._emitValueUpdate(0);	1✔
331	} else if (!sameValue) {	6✔
332	this._emitValueUpdate(value);	4✔
333	}	4✔
334	}	6✔
335		8✔
336	private _handlePointerMove({ clientX }: PointerEvent): void {	8✔
337	const value = this._calcNewValue(clientX);	1✔
338		1✔
339	if (this._hoverValue !== value) {	1✔
340	// Since pointermove spams a lot, only emit on a value change	1✔
341	this._hoverValue = value;	1✔
342	this.emitEvent('igcHover', { detail: this._hoverValue });	1✔
343	}	1✔
344	}	1✔
345		8✔
346	private _handleSlotChange({	8✔
347	slot,	7✔
348	}: SlotChangeCallbackParameters<InferSlotNames<typeof Slots>>): void {	7✔
349	if (slot === 'symbol') {	7✔
350	this._symbols = this._slots.getAssignedElements('symbol', {	7✔
351	selector: IgcRatingSymbolComponent.tagName,	7✔
352	});	7✔
353		7✔
354	if (this._hasProjectedSymbols) {	7✔
355	this.max = this._symbols.length;	3✔
356	}	3✔
357	}	7✔
358	}	7✔
359		8✔
360	private _handleHoverEnabled(): void {	8✔
NEW 361	this._hoverState = true;	×
UNCOV 362	}	×
363		8✔
364	private _handleHoverDisabled(): void {	8✔
NEW 365	this._hoverState = false;	×
UNCOV 366	}	×
367		8✔
368	//#endregion	8✔
369		8✔
370	//#region Private methods	8✔
371		8✔
372	private _emitValueUpdate(next: number): void {	8✔
373	this._setTouchedState();	20✔
374		20✔
375	const clamped = clamp(next, 0, this.max);	20✔
376	if (clamped !== this.value) {	20✔
377	this.value = clamped;	15✔
378	this.emitEvent('igcChange', { detail: this.value });	15✔
379	}	15✔
380	}	20✔
381		8✔
382	private _calcNewValue(x: number): number {	8✔
383	const { width, left, right } =	7✔
384	this._container?.getBoundingClientRect() ?? new DOMRect(1, 1, 1, 1);	7!
385	const percent = isLTR(this) ? (x - left) / width : (right - x) / width;	7!
386	const value = this._round(this.max * percent);	7✔
387		7✔
388	return clamp(value, this.step, this.max);	7✔
389	}	7✔
390		8✔
391	private _round(value: number): number {	8✔
392	return roundPrecise(	108✔
393	Math.ceil(value / this.step) * this.step,	108✔
394	numberOfDecimals(this.step)	108✔
395	);	108✔
396	}	108✔
397		8✔
398	private _updateProjectedSymbols(): void {	8✔
399	const ltr = isLTR(this);	3✔
400	const partFull = '[part="symbol full"]';	3✔
401	const partEmpty = '[part="symbol empty"]';	3✔
402		3✔
403	for (const [i, symbol] of this._symbols.entries()) {	3✔
404	const full = symbol.renderRoot.querySelector<HTMLElement>(partFull);	9✔
405	const empty = symbol.renderRoot.querySelector<HTMLElement>(partEmpty);	9✔
406	const { forward, backward } = this._clipSymbol(i, ltr);	9✔
407		9✔
408	if (full) {	9✔
409	full.style.clipPath = forward;	9✔
410	}	9✔
411		9✔
412	if (empty) {	9✔
413	empty.style.clipPath = backward;	9✔
414	}	9✔
415	}	9✔
416	}	3✔
417		8✔
418	private _clipSymbol(index: number, isLTR = true) {	8✔
419	const value = this._hoverState ? this._hoverValue : this.value;	556!
420	const progress = index + 1 - value;	556✔
421	const exclusive = progress === 0 \|\| value === index + 1 ? 0 : 1;	556✔
422	const selection = this.single ? exclusive : progress;	556✔
423	const activate = (p: number) => clamp(p * 100, 0, 100);	556✔
424		556✔
425	const forward = `inset(0 ${activate(	556✔
426	isLTR ? selection : 1 - selection	556✔
427	)}% 0 0)`;	556✔
428	const backward = `inset(0 0 0 ${activate(	556✔
429	isLTR ? 1 - selection : selection	556✔
430	)}%)`;	556✔
431		556✔
432	return {	556✔
433	backward: isLTR ? backward : forward,	556✔
434	forward: isLTR ? forward : backward,	556✔
435	};	556✔
436	}	556✔
437		8✔
438	//#endregion	8✔
439		8✔
440	//#region Public methods	8✔
441		8✔
442	/**	8✔
443	* Increments the value of the control by `n` steps multiplied by the	8✔
444	* step factor.	8✔
445	*/	8✔
446	public stepUp(n = 1): void {	8✔
447	this.value += this._round(n * this.step);	2✔
448	}	2✔
449		8✔
450	/**	8✔
451	* Decrements the value of the control by `n` steps multiplied by	8✔
452	* the step factor.	8✔
453	*/	8✔
454	public stepDown(n = 1): void {	8✔
455	this.value -= this._round(n * this.step);	1✔
456	}	1✔
457		8✔
458	//#endregion	8✔
459		8✔
460	private _renderSymbols() {	8✔
461	const ltr = isLTR(this);	95✔
462		95✔
463	return html`	95✔
464	${repeat(	95✔
465	range(this.max),	95✔
466	(i) => i,	95✔
467	(i) => {	95✔
468	const { forward, backward } = this._clipSymbol(i, ltr);	547✔
469	return html`	547✔
470	<igc-rating-symbol exportparts="symbol, full, empty">	547✔
471	<igc-icon	547✔
472	collection="default"	547✔
473	name="star_filled"	547✔
474	style=${styleMap({ clipPath: forward })}	547✔
475	></igc-icon>	547✔
476	<igc-icon	547✔
477	collection="default"	547✔
478	name="star_outlined"	547✔
479	style=${styleMap({ clipPath: backward })}	547✔
480	slot="empty"	547✔
481	></igc-icon>	547✔
482	</igc-rating-symbol>	547✔
483	`;	547✔
484	}	547✔
485	)}	95✔
486	`;	95✔
487	}	95✔
488		8✔
489	protected override render() {	8✔
490	const hoverActive = this.hoverPreview && this._isInteractive;	98✔
491	const valueLabelHidden = !this._slots.hasAssignedNodes('value-label', true);	98✔
492		98✔
493	return html`	98✔
494	<label part="label" id="rating-label" ?hidden=${!this.label}	98✔
495	>${this.label}</label	98✔
496	>	98✔
497	<div	98✔
498	part="base"	98✔
499	role="slider"	98✔
500	tabindex=${this.disabled ? -1 : 0}	98✔
501	aria-labelledby="rating-label"	98✔
502	aria-valuemin="0"	98✔
503	aria-valuenow=${this.value}	98✔
504	aria-valuemax=${this.max}	98✔
505	aria-valuetext=${this._valueText}	98✔
506	>	98✔
507	<div	98✔
508	aria-hidden="true"	98✔
509	part="symbols"	98✔
510	@click=${bindIf(this._isInteractive, this._handleClick)}	98✔
511	@pointerenter=${bindIf(hoverActive, this._handleHoverEnabled)}	98✔
512	@pointerleave=${bindIf(hoverActive, this._handleHoverDisabled)}	98✔
513	@pointercancel=${bindIf(hoverActive, this._handleHoverDisabled)}	98✔
514	@pointermove=${bindIf(hoverActive, this._handlePointerMove)}	98✔
515	>	98✔
516	<slot name="symbol">	98✔
517	${this._hasProjectedSymbols ? nothing : this._renderSymbols()}	98✔
518	</slot>	98✔
519	</div>	98✔
520	<label part="value-label" ?hidden=${valueLabelHidden}>	98✔
521	<slot name="value-label"></slot>	98✔
522	</label>	98✔
523	</div>	98✔
524	`;	98✔
525	}	98✔
526	}	8✔
527		8✔
528	declare global {	8✔
529	interface HTMLElementTagNameMap {	8✔
530	'igc-rating': IgcRatingComponent;	8✔
531	}	8✔
532	}	8✔

IgniteUI / igniteui-webcomponents / 23835379446

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