igniteui-webcomponents 7.1.1 → 7.1.2

package/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport {\n  addKeybindings,\n  arrowDown,\n  arrowLeft,\n  arrowRight,\n  arrowUp,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';\nimport { FormValueBooleanTransformers } from '../common/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport { partMap } from '../common/part-map.js';\nimport { isDefined, isEmpty, isLTR, last, wrap } from '../common/util.js';\nimport type { ToggleLabelPosition } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { styles } from './themes/radio.base.css.js';\nimport { styles as shared } from './themes/shared/radio.common.css.js';\nimport { all } from './themes/themes.js';\nimport { getGroup } from './utils.js';\nimport { radioValidators } from './validators.js';\n\nexport interface IgcRadioChangeEventArgs {\n  checked: boolean;\n  value?: string;\n}\n\nexport interface IgcRadioComponentEventMap {\n  igcChange: CustomEvent<IgcRadioChangeEventArgs>;\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\nlet nextId = 1;\n\n/**\n * @element igc-radio\n *\n * @slot - The radio label.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio input control.\n * @csspart label - The radio control label.\n */\nexport default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(\n  EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>(\n    LitElement\n  )\n) {\n  public static readonly tagName = 'igc-radio';\n  protected static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcRadioComponent, IgcValidationContainerComponent);\n  }\n\n  protected override get __validators() {\n    return radioValidators;\n  }\n\n  private readonly _inputId = `radio-${nextId++}`;\n  private readonly _labelId = `radio-label-${this._inputId}`;\n  private readonly _focusRingManager = addKeyboardFocusRing(this);\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),\n    onChange: this._handleSlotChange,\n  });\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: false,\n    transformers: FormValueBooleanTransformers,\n  });\n\n  protected _value!: string;\n\n  @query('input', true)\n  protected readonly _input!: HTMLInputElement;\n\n  @state()\n  protected _hideLabel = true;\n\n  @state()\n  private _tabIndex = 0;\n\n  /** Returns all radio elements from the group, that is having the same name property. */\n  private get _radios() {\n    return getGroup(this).radios;\n  }\n\n  /** All sibling radio elements of the one invoking the getter. */\n  private get _siblings() {\n    return getGroup(this).siblings;\n  }\n\n  /** All non-disabled radio elements from the group. */\n  private get _active() {\n    return getGroup(this).active;\n  }\n\n  /** All checked radio elements from the group. */\n  private get _checkedRadios() {\n    return getGroup(this).checked;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  public override set required(value: boolean) {\n    super.required = value;\n\n    if (this.hasUpdated) {\n      for (const radio of this._siblings) {\n        radio._validate();\n      }\n    }\n  }\n\n  public override get required(): boolean {\n    return this._required;\n  }\n\n  /**\n   * The value attribute of the control.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    this._value = value;\n    if (this.checked) {\n      this._formValue.setValueAndFormState(this.checked);\n    }\n  }\n\n  public get value(): string {\n    return this._value;\n  }\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n  /**\n   * The checked state of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public set checked(value: boolean) {\n    this._formValue.setValueAndFormState(value);\n    this._tabIndex = this.checked ? 0 : -1;\n    if (this.hasUpdated && this.checked) {\n      this._updateCheckedState();\n    }\n  }\n\n  public get checked(): boolean {\n    return this._formValue.value;\n  }\n\n  /**\n   * The label position of the radio control.\n   * @attr label-position\n   */\n  @property({ reflect: true, attribute: 'label-position' })\n  public labelPosition: ToggleLabelPosition = 'after';\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addKeybindings(this, {\n      skip: () => this.disabled,\n      bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },\n    })\n      .set(arrowLeft, () => this._navigate(isLTR(this) ? -1 : 1))\n      .set(arrowRight, () => this._navigate(isLTR(this) ? 1 : -1))\n      .set(arrowUp, () => this._navigate(-1))\n      .set(arrowDown, () => this._navigate(1));\n  }\n\n  protected override async firstUpdated(): Promise<void> {\n    await this.updateComplete;\n\n    if (this.checked && this === last(this._checkedRadios)) {\n      for (const radio of this._siblings) {\n        radio.checked = false;\n        radio.defaultChecked = false;\n      }\n    } else {\n      this._validate();\n    }\n  }\n\n  protected _handleSlotChange(): void {\n    this._hideLabel = !this._slots.hasAssignedNodes('[default]', true);\n  }\n\n  protected override _setDefaultValue(current: string | null): void {\n    this._formValue.defaultValue = isDefined(current);\n    for (const radio of this._siblings) {\n      radio.defaultChecked = false;\n    }\n  }\n\n  /** Simulates a click on the radio control. */\n  public override click(): void {\n    this._input.click();\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the radio control. */\n  public override focus(options?: FocusOptions): void {\n    this._input.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the radio control. */\n  public override blur(): void {\n    this._input.blur();\n  }\n\n  private _checkValidity(): boolean {\n    return super.checkValidity();\n  }\n\n  private _reportValidity(): boolean {\n    return super.reportValidity();\n  }\n\n  /** Checks for validity of the control and emits the invalid event if it invalid. */\n  public override checkValidity(): boolean {\n    for (const radio of this._siblings) {\n      radio._checkValidity();\n    }\n\n    return this._checkValidity();\n  }\n\n  /** Checks for validity of the control and shows the browser message if it invalid. */\n  public override reportValidity(): boolean {\n    for (const radio of this._siblings) {\n      radio._reportValidity();\n    }\n\n    return this._reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public override setCustomValidity(message: string): void {\n    for (const radio of this._radios) {\n      radio._validate(message);\n    }\n  }\n\n  private _updateCheckedState(): void {\n    for (const radio of this._siblings) {\n      radio.checked = false;\n    }\n  }\n\n  protected override formResetCallback(): void {\n    super.formResetCallback();\n    this._resetTabIndexes();\n    this.updateComplete.then(() => this._validate());\n  }\n\n  /** Called after a form reset callback to restore default keyboard navigation. */\n  private _resetTabIndexes(): void {\n    const radios = this._radios;\n\n    if (isEmpty(this._checkedRadios)) {\n      for (const radio of radios) {\n        radio._tabIndex = 0;\n      }\n    } else {\n      for (const radio of radios) {\n        radio._tabIndex = radio.checked ? 0 : -1;\n      }\n    }\n  }\n\n  protected _handleClick(event: PointerEvent) {\n    event.stopPropagation();\n    this._setTouchedState();\n\n    if (this.checked) {\n      return;\n    }\n\n    this.checked = true;\n    this._input.focus();\n    this.emitEvent('igcChange', {\n      detail: {\n        checked: this.checked,\n        value: this.value,\n      },\n    });\n  }\n\n  protected _navigate(idx: number): void {\n    const active = this._active;\n    const next = wrap(0, active.length - 1, active.indexOf(this) + idx);\n    const radio = active[next];\n\n    this._setTouchedState();\n    radio.focus();\n    radio.checked = true;\n    radio.emitEvent('igcChange', {\n      detail: { checked: radio.checked, value: radio.value },\n    });\n  }\n\n  protected _renderValidatorContainer(): TemplateResult {\n    return IgcValidationContainerComponent.create(this);\n  }\n\n  protected override render() {\n    const labelledBy = this.getAttribute('aria-labelledby');\n    const describedBy = this._slots.hasAssignedElements('helper-text')\n      ? 'helper-text'\n      : nothing;\n    const checked = this.checked;\n\n    return html`\n      <label\n        part=${partMap({\n          base: true,\n          checked,\n          focused: this._focusRingManager.focused,\n        })}\n        for=${this._inputId}\n      >\n        <input\n          id=${this._inputId}\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          value=${ifDefined(this.value)}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          .checked=${live(checked)}\n          tabindex=${this._tabIndex}\n          aria-labelledby=${labelledBy ? labelledBy : this._labelId}\n          aria-describedby=${describedBy}\n          @click=${this._handleClick}\n        />\n        <span part=${partMap({ control: true, checked })}>\n          <span\n            part=${partMap({ ripple: true, checked })}\n            ?hidden=${this.disabled}\n          ></span>\n        </span>\n        <span\n          id=${this._labelId}\n          part=${partMap({ label: true, checked })}\n          ?hidden=${this._hideLabel}\n        >\n          <slot></slot>\n        </span>\n      </label>\n      ${this._renderValidatorContainer()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-radio': IgcRadioComponent;\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';\nimport {\n  addKeybindings,\n  arrowDown,\n  arrowLeft,\n  arrowRight,\n  arrowUp,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';\nimport { FormValueBooleanTransformers } from '../common/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport { partMap } from '../common/part-map.js';\nimport { isDefined, isEmpty, isLTR, last, wrap } from '../common/util.js';\nimport type { ToggleLabelPosition } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { styles } from './themes/radio.base.css.js';\nimport { styles as shared } from './themes/shared/radio.common.css.js';\nimport { all } from './themes/themes.js';\nimport { getGroup } from './utils.js';\nimport { radioValidators } from './validators.js';\n\nexport interface IgcRadioChangeEventArgs {\n  checked: boolean;\n  value?: string;\n}\n\nexport interface IgcRadioComponentEventMap {\n  igcChange: CustomEvent<IgcRadioChangeEventArgs>;\n  // For analyzer meta only:\n  /* skipWCPrefix */\n  focus: FocusEvent;\n  /* skipWCPrefix */\n  blur: FocusEvent;\n}\n\nlet nextId = 1;\n\n/**\n * @element igc-radio\n *\n * @slot - The radio label.\n * @slot helper-text - Renders content below the input.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n *\n * @csspart base - The radio control base wrapper.\n * @csspart control - The radio input control.\n * @csspart label - The radio control label.\n */\nexport default class IgcRadioComponent extends FormAssociatedCheckboxRequiredMixin(\n  EventEmitterMixin<IgcRadioComponentEventMap, Constructor<LitElement>>(\n    LitElement\n  )\n) {\n  public static readonly tagName = 'igc-radio';\n  protected static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcRadioComponent, IgcValidationContainerComponent);\n  }\n\n  protected override get __validators() {\n    return radioValidators;\n  }\n\n  private readonly _inputId = `radio-${nextId++}`;\n  private readonly _labelId = `radio-label-${this._inputId}`;\n  private readonly _focusRingManager = addKeyboardFocusRing(this);\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots('helper-text', 'value-missing', 'custom-error', 'invalid'),\n    onChange: this._handleSlotChange,\n  });\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: false,\n    transformers: FormValueBooleanTransformers,\n  });\n\n  protected _value!: string;\n\n  @query('input', true)\n  protected readonly _input!: HTMLInputElement;\n\n  @state()\n  protected _hideLabel = true;\n\n  @state()\n  private _tabIndex = 0;\n\n  /** Returns all radio elements from the group, that is having the same name property. */\n  private get _radios() {\n    return getGroup(this).radios;\n  }\n\n  /** All sibling radio elements of the one invoking the getter. */\n  private get _siblings() {\n    return getGroup(this).siblings;\n  }\n\n  /** All non-disabled radio elements from the group. */\n  private get _active() {\n    return getGroup(this).active;\n  }\n\n  /** All checked radio elements from the group. */\n  private get _checkedRadios() {\n    return getGroup(this).checked;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  public override set required(value: boolean) {\n    super.required = value;\n\n    if (this.hasUpdated) {\n      for (const radio of this._siblings) {\n        radio._validate();\n      }\n    }\n  }\n\n  public override get required(): boolean {\n    return this._required;\n  }\n\n  /**\n   * The value attribute of the control.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    this._value = value;\n    if (this.checked) {\n      this._formValue.setValueAndFormState(this.checked);\n    }\n  }\n\n  public get value(): string {\n    return this._value;\n  }\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail.checked\", false) */\n  /**\n   * The checked state of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public set checked(value: boolean) {\n    this._formValue.setValueAndFormState(value);\n    this._tabIndex = this.checked ? 0 : -1;\n    if (this.hasUpdated && this.checked) {\n      this._updateCheckedState();\n    }\n  }\n\n  public get checked(): boolean {\n    return this._formValue.value;\n  }\n\n  /**\n   * The label position of the radio control.\n   * @attr label-position\n   */\n  @property({ reflect: true, attribute: 'label-position' })\n  public labelPosition: ToggleLabelPosition = 'after';\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n\n    addKeybindings(this, {\n      skip: () => this.disabled,\n      bindingDefaults: { preventDefault: true, repeat: true },\n    })\n      .set(arrowLeft, () => this._navigate(isLTR(this) ? -1 : 1))\n      .set(arrowRight, () => this._navigate(isLTR(this) ? 1 : -1))\n      .set(arrowUp, () => this._navigate(-1))\n      .set(arrowDown, () => this._navigate(1));\n  }\n\n  protected override async firstUpdated(): Promise<void> {\n    await this.updateComplete;\n\n    if (this.checked && this === last(this._checkedRadios)) {\n      for (const radio of this._siblings) {\n        radio.checked = false;\n        radio.defaultChecked = false;\n      }\n    } else {\n      this._validate();\n    }\n  }\n\n  protected _handleSlotChange(): void {\n    this._hideLabel = !this._slots.hasAssignedNodes('[default]', true);\n  }\n\n  protected override _setDefaultValue(current: string | null): void {\n    this._formValue.defaultValue = isDefined(current);\n    for (const radio of this._siblings) {\n      radio.defaultChecked = false;\n    }\n  }\n\n  /** Simulates a click on the radio control. */\n  public override click(): void {\n    this._input.click();\n  }\n\n  /* alternateName: focusComponent */\n  /** Sets focus on the radio control. */\n  public override focus(options?: FocusOptions): void {\n    this._input.focus(options);\n  }\n\n  /* alternateName: blurComponent */\n  /** Removes focus from the radio control. */\n  public override blur(): void {\n    this._input.blur();\n  }\n\n  private _checkValidity(): boolean {\n    return super.checkValidity();\n  }\n\n  private _reportValidity(): boolean {\n    return super.reportValidity();\n  }\n\n  /** Checks for validity of the control and emits the invalid event if it invalid. */\n  public override checkValidity(): boolean {\n    for (const radio of this._siblings) {\n      radio._checkValidity();\n    }\n\n    return this._checkValidity();\n  }\n\n  /** Checks for validity of the control and shows the browser message if it invalid. */\n  public override reportValidity(): boolean {\n    for (const radio of this._siblings) {\n      radio._reportValidity();\n    }\n\n    return this._reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public override setCustomValidity(message: string): void {\n    for (const radio of this._radios) {\n      radio._validate(message);\n    }\n  }\n\n  private _updateCheckedState(): void {\n    for (const radio of this._siblings) {\n      radio.checked = false;\n    }\n  }\n\n  protected override formResetCallback(): void {\n    super.formResetCallback();\n    this._resetTabIndexes();\n    this.updateComplete.then(() => this._validate());\n  }\n\n  /** Called after a form reset callback to restore default keyboard navigation. */\n  private _resetTabIndexes(): void {\n    const radios = this._radios;\n\n    if (isEmpty(this._checkedRadios)) {\n      for (const radio of radios) {\n        radio._tabIndex = 0;\n      }\n    } else {\n      for (const radio of radios) {\n        radio._tabIndex = radio.checked ? 0 : -1;\n      }\n    }\n  }\n\n  protected _handleClick(event: PointerEvent) {\n    event.stopPropagation();\n    this._setTouchedState();\n\n    if (this.checked) {\n      return;\n    }\n\n    this.checked = true;\n    this._input.focus();\n    this.emitEvent('igcChange', {\n      detail: {\n        checked: this.checked,\n        value: this.value,\n      },\n    });\n  }\n\n  protected _navigate(idx: number): void {\n    const active = this._active;\n    const next = wrap(0, active.length - 1, active.indexOf(this) + idx);\n    const radio = active[next];\n\n    this._setTouchedState();\n    radio.focus();\n    radio.checked = true;\n    radio.emitEvent('igcChange', {\n      detail: { checked: radio.checked, value: radio.value },\n    });\n  }\n\n  protected _renderValidatorContainer(): TemplateResult {\n    return IgcValidationContainerComponent.create(this);\n  }\n\n  protected override render() {\n    const labelledBy = this.getAttribute('aria-labelledby');\n    const describedBy = this._slots.hasAssignedElements('helper-text')\n      ? 'helper-text'\n      : nothing;\n    const checked = this.checked;\n\n    return html`\n      <label\n        part=${partMap({\n          base: true,\n          checked,\n          focused: this._focusRingManager.focused,\n        })}\n        for=${this._inputId}\n      >\n        <input\n          id=${this._inputId}\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          value=${ifDefined(this.value)}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          .checked=${live(checked)}\n          tabindex=${this._tabIndex}\n          aria-labelledby=${labelledBy ? labelledBy : this._labelId}\n          aria-describedby=${describedBy}\n          @click=${this._handleClick}\n        />\n        <span part=${partMap({ control: true, checked })}>\n          <span\n            part=${partMap({ ripple: true, checked })}\n            ?hidden=${this.disabled}\n          ></span>\n        </span>\n        <span\n          id=${this._labelId}\n          part=${partMap({ label: true, checked })}\n          ?hidden=${this._hideLabel}\n        >\n          <slot></slot>\n        </span>\n      </label>\n      ${this._renderValidatorContainer()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-radio': IgcRadioComponent;\n  }\n}\n"]}

package/components/rating/rating.d.ts

@@ -1,17 +1,47 @@
 import { LitElement } from 'lit';
 import type { Constructor } from '../common/mixins/constructor.js';
-import IgcRatingSymbolComponent from './rating-symbol.js';
 export interface IgcRatingComponentEventMap {
     igcChange: CustomEvent<number>;
     igcHover: CustomEvent<number>;
 }
 declare const IgcRatingComponent_base: Constructor<import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcRatingComponentEventMap>> & Constructor<LitElement>;
 /**
- * Rating provides insight regarding others' opinions and experiences,
- * and can allow the user to submit a rating of their own
+ * 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.
  *
@@ -33,18 +63,18 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
     static readonly tagName = "igc-rating";
     static styles: import("lit").CSSResult[];
     static register(): void;
+    protected readonly _slots: import("../common/controllers/slot.js").SlotController<"symbol" | "[default]" | "value-label">;
     protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<number>;
     private _max;
     private _step;
     private _single;
-    protected ratingSymbols: IgcRatingSymbolComponent[];
-    protected container: HTMLElement;
-    protected valueLabel: Node[];
-    protected hoverValue: number;
-    protected hoverState: boolean;
-    protected get isInteractive(): boolean;
-    protected get hasProjectedSymbols(): boolean;
-    protected get valueText(): string;
+    private _symbols;
+    private _container?;
+    private _hoverValue;
+    private _hoverState;
+    private get _isInteractive();
+    private get _hasProjectedSymbols();
+    private get _valueText();
     /**
      * The maximum value for the rating.
      *
@@ -68,7 +98,7 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
      * The label of the control.
      * @attr label
      */
-    label: string;
+    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.
@@ -76,7 +106,7 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
      * Important for screen-readers and useful for localization.
      * @attr value-format
      */
-    valueFormat: string;
+    valueFormat?: string;
     /**
      * The current value of the component
      * @attr value
@@ -104,22 +134,22 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
     /**
      * Whether to reset the rating when the user selects the same value.
      * @attr allow-reset
+     * @default false
      */
     allowReset: boolean;
     constructor();
-    protected firstUpdated(): Promise<void>;
-    protected handleClick({ clientX }: PointerEvent): void;
-    protected handlePointerMove({ clientX }: PointerEvent): void;
-    protected emitValueUpdate(value: number): void;
-    protected handleSlotChange(): void;
-    protected handleHoverEnabled(): void;
-    protected handleHoverDisabled(): void;
-    protected calcNewValue(x: number): number;
-    protected round(value: number): number;
-    protected clipSymbol(index: number, isLTR?: boolean): {
-        backward: string;
-        forward: string;
-    };
+    protected firstUpdated(): void;
+    protected updated(): void;
+    private _handleClick;
+    private _handlePointerMove;
+    private _handleSlotChange;
+    private _handleHoverEnabled;
+    private _handleHoverDisabled;
+    private _emitValueUpdate;
+    private _calcNewValue;
+    private _round;
+    private _updateProjectedSymbols;
+    private _clipSymbol;
     /**
      * Increments the value of the control by `n` steps multiplied by the
      * step factor.
@@ -130,8 +160,7 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
      * the step factor.
      */
     stepDown(n?: number): void;
-    protected renderSymbols(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
-    protected clipProjected(): void;
+    private _renderSymbols;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/rating/rating.js

@@ -5,44 +5,46 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, 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 { 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, setSlots, } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.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, clamp, formatString, isEmpty, isLTR, numberOfDecimals, roundPrecise, } from '../common/util.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';
+const Slots = setSlots('symbol', 'value-label');
 export default class IgcRatingComponent extends FormAssociatedMixin(EventEmitterMixin(LitElement)) {
     static { this.tagName = 'igc-rating'; }
     static { this.styles = [styles, shared]; }
     static register() {
         registerComponent(IgcRatingComponent, IgcIconComponent, IgcRatingSymbolComponent);
     }
-    get isInteractive() {
+    get _isInteractive() {
         return !(this.readOnly || this.disabled);
     }
-    get hasProjectedSymbols() {
-        return this.ratingSymbols.length > 0;
+    get _hasProjectedSymbols() {
+        return this._symbols.length > 0;
     }
-    get valueText() {
-        const value = this.round(this.value);
+    get _valueText() {
+        const value = this._round(this.value);
         return this.valueFormat
             ? formatString(this.valueFormat, value, this.max)
             : `${value} of ${this.max}`;
     }
     set max(value) {
-        this._max = this.hasProjectedSymbols
-            ? this.ratingSymbols.length
+        this._max = this._hasProjectedSymbols
+            ? this._symbols.length
             : Math.max(0, value);
         if (this._max < this.value) {
             this.value = this._max;
@@ -78,6 +80,10 @@ export default class IgcRatingComponent extends FormAssociatedMixin(EventEmitter
     }
     constructor() {
         super();
+        this._slots = addSlotController(this, {
+            slots: Slots,
+            onChange: this._handleSlotChange,
+        });
         this._formValue = createFormValueState(this, {
             initialValue: 0,
             transformers: FormValueNumberTransformers,
@@ -85,76 +91,103 @@ export default class IgcRatingComponent extends FormAssociatedMixin(EventEmitter
         this._max = 5;
         this._step = 1;
         this._single = false;
-        this.hoverValue = -1;
-        this.hoverState = false;
+        this._symbols = [];
+        this._hoverValue = -1;
+        this._hoverState = false;
         this.hoverPreview = false;
         this.readOnly = false;
         this.allowReset = false;
         addThemingController(this, all);
         addKeybindings(this, {
-            skip: () => !this.isInteractive,
+            skip: () => !this._isInteractive,
+            bindingDefaults: { repeat: 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));
+            .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));
     }
-    async firstUpdated() {
-        await this.updateComplete;
+    firstUpdated() {
         this._formValue.setValueAndFormState(clamp(this.value, 0, this.max));
         this._pristine = true;
     }
-    handleClick({ clientX }) {
-        const value = this.calcNewValue(clientX);
+    updated() {
+        if (this._hasProjectedSymbols) {
+            this._updateProjectedSymbols();
+        }
+    }
+    _handleClick({ clientX }) {
+        const value = this._calcNewValue(clientX);
         const sameValue = this.value === value;
         if (this.allowReset && sameValue) {
-            this.emitValueUpdate(0);
+            this._emitValueUpdate(0);
         }
         else if (!sameValue) {
-            this.emitValueUpdate(value);
+            this._emitValueUpdate(value);
         }
     }
-    handlePointerMove({ clientX }) {
-        const value = this.calcNewValue(clientX);
-        if (this.hoverValue !== value) {
-            this.hoverValue = value;
-            this.emitEvent('igcHover', { detail: this.hoverValue });
+    _handlePointerMove({ clientX }) {
+        const value = this._calcNewValue(clientX);
+        if (this._hoverValue !== value) {
+            this._hoverValue = value;
+            this.emitEvent('igcHover', { detail: this._hoverValue });
         }
     }
-    emitValueUpdate(value) {
-        this._setTouchedState();
-        this.value = clamp(value, 0, this.max);
-        if (value === this.value) {
-            this.emitEvent('igcChange', { detail: this.value });
+    _handleSlotChange({ slot, }) {
+        if (slot === 'symbol') {
+            this._symbols = this._slots.getAssignedElements('symbol', {
+                selector: IgcRatingSymbolComponent.tagName,
+            });
+            if (this._hasProjectedSymbols) {
+                this.max = this._symbols.length;
+            }
         }
     }
-    handleSlotChange() {
-        if (this.hasProjectedSymbols) {
-            this.max = this.ratingSymbols.length;
-            this.requestUpdate();
-        }
+    _handleHoverEnabled() {
+        this._hoverState = true;
     }
-    handleHoverEnabled() {
-        this.hoverState = true;
+    _handleHoverDisabled() {
+        this._hoverState = false;
     }
-    handleHoverDisabled() {
-        this.hoverState = false;
+    _emitValueUpdate(next) {
+        this._setTouchedState();
+        const clamped = clamp(next, 0, this.max);
+        if (clamped !== this.value) {
+            this.value = clamped;
+            this.emitEvent('igcChange', { detail: this.value });
+        }
     }
-    calcNewValue(x) {
-        const { width, left, right } = this.container.getBoundingClientRect();
+    _calcNewValue(x) {
+        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);
+        const value = this._round(this.max * percent);
         return clamp(value, this.step, this.max);
     }
-    round(value) {
+    _round(value) {
         return roundPrecise(Math.ceil(value / this.step) * this.step, numberOfDecimals(this.step));
     }
-    clipSymbol(index, isLTR = true) {
-        const value = this.hoverState ? this.hoverValue : this.value;
+    _updateProjectedSymbols() {
+        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(partFull);
+            const empty = symbol.renderRoot.querySelector(partEmpty);
+            const { forward, backward } = this._clipSymbol(i, ltr);
+            if (full) {
+                full.style.clipPath = forward;
+            }
+            if (empty) {
+                empty.style.clipPath = backward;
+            }
+        }
+    }
+    _clipSymbol(index, 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 exclusive = progress === 0 || value === index + 1 ? 0 : 1;
         const selection = this.single ? exclusive : progress;
         const activate = (p) => clamp(p * 100, 0, 100);
         const forward = `inset(0 ${activate(isLTR ? selection : 1 - selection)}% 0 0)`;
@@ -165,57 +198,37 @@ export default class IgcRatingComponent extends FormAssociatedMixin(EventEmitter
         };
     }
     stepUp(n = 1) {
-        this.value += this.round(n * this.step);
+        this.value += this._round(n * this.step);
     }
     stepDown(n = 1) {
-        this.value -= this.round(n * this.step);
-    }
-    *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="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>`;
-        }
+        this.value -= this._round(n * this.step);
     }
-    clipProjected() {
+    _renderSymbols() {
         const ltr = isLTR(this);
-        const partFull = '[part="symbol full"]';
-        const partEmpty = '[part="symbol empty"]';
-        for (const [i, symbol] of this.ratingSymbols.entries()) {
-            const full = symbol.renderRoot.querySelector(partFull);
-            const empty = symbol.renderRoot.querySelector(partEmpty);
-            const { forward, backward } = this.clipSymbol(i, ltr);
-            if (full) {
-                full.style.clipPath = forward;
-            }
-            if (empty) {
-                empty.style.clipPath = backward;
-            }
-        }
+        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>
+          `;
+        })}
+    `;
     }
     render() {
-        const props = [
-            this.value,
-            this.hoverValue,
-            this.max,
-            this.step,
-            this.single,
-            this.hoverState,
-            this.ratingSymbols,
-        ];
-        const hoverActive = this.hoverPreview && this.isInteractive;
+        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
@@ -223,52 +236,42 @@ export default class IgcRatingComponent extends FormAssociatedMixin(EventEmitter
       <div
         part="base"
         role="slider"
-        tabindex=${ifDefined(this.disabled ? undefined : 0)}
+        tabindex=${this.disabled ? -1 : 0}
         aria-labelledby="rating-label"
         aria-valuemin="0"
         aria-valuenow=${this.value}
         aria-valuemax=${this.max}
-        aria-valuetext=${this.valueText}
+        aria-valuetext=${this._valueText}
       >
         <div
           aria-hidden="true"
           part="symbols"
-          @click=${this.isInteractive ? this.handleClick : nothing}
-          @pointerenter=${hoverActive ? this.handleHoverEnabled : nothing}
-          @pointerleave=${hoverActive ? this.handleHoverDisabled : nothing}
-          @pointermove=${hoverActive ? this.handlePointerMove : nothing}
+          @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" @slotchange=${this.handleSlotChange}>
-            ${guard(props, () => this.hasProjectedSymbols
-            ? this.clipProjected()
-            : this.renderSymbols())}
+          <slot name="symbol">
+            ${this._hasProjectedSymbols ? nothing : this._renderSymbols()}
           </slot>
         </div>
-        <label part="value-label" ?hidden=${isEmpty(this.valueLabel)}>
+        <label part="value-label" ?hidden=${valueLabelHidden}>
           <slot name="value-label"></slot>
         </label>
       </div>
     `;
     }
 }
-__decorate([
-    queryAssignedElements({
-        selector: IgcRatingSymbolComponent.tagName,
-        slot: 'symbol',
-    })
-], IgcRatingComponent.prototype, "ratingSymbols", void 0);
 __decorate([
     query('[part="symbols"]', true)
-], IgcRatingComponent.prototype, "container", void 0);
-__decorate([
-    queryAssignedNodes({ slot: 'value-label', flatten: true })
-], IgcRatingComponent.prototype, "valueLabel", void 0);
+], IgcRatingComponent.prototype, "_container", void 0);
 __decorate([
     state()
-], IgcRatingComponent.prototype, "hoverValue", void 0);
+], IgcRatingComponent.prototype, "_hoverValue", void 0);
 __decorate([
     state()
-], IgcRatingComponent.prototype, "hoverState", void 0);
+], IgcRatingComponent.prototype, "_hoverState", void 0);
 __decorate([
     property({ type: Number })
 ], IgcRatingComponent.prototype, "max", null);