fix(rating): Value rounding calculation when step is not 1 (#1561)

Updated rounding function to round up to step and added a test

---------

Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: Zneeky

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+### Fixed
+- #### Rating
+  - Inaccurate value rounding calculation when step is not 1 [#1560](https://github.com/IgniteUI/igniteui-webcomponents/issues/1560)
+
 ## [5.2.1] - 2025-01-23
 ### Added
 - #### Dialog

src/components/rating/rating.spec.ts

@@ -306,6 +306,19 @@ describe('Rating component', () => {
       expect(el.value).to.equal(2.5);
     });
 
+    it('rounds correctly to the next step, when the step is different than 1', async () => {
+      const eventSpy = spy(el, 'emitEvent');
+      el.step = 0.4;
+      await elementUpdated(el);
+
+      const symbol = getRatingSymbols(el).item(0);
+      const { x, width } = getBoundingRect(symbol);
+      simulateClick(symbol, { clientX: x + width * 0.55 }); // Click 55% across the width of the symbol
+
+      expect(eventSpy).calledOnceWithExactly('igcChange', { detail: 0.8 });
+      expect(el.value).to.equal(0.8);
+    });
+
     it('issue-1548 - Inaccurate value calculation when precision == 1', async () => {
       const eventSpy = spy(el, 'emitEvent');
 

src/components/rating/rating.ts

@@ -325,13 +325,16 @@ export default class IgcRatingComponent extends FormAssociatedMixin(
   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);
+    const value = this.round(this.max * percent);
 
     return clamp(value, this.step, this.max);
   }
 
   protected round(value: number) {
-    return roundPrecise(value, numberOfDecimals(this.step));
+    return roundPrecise(
+      Math.ceil(value / this.step) * this.step,
+      numberOfDecimals(this.step)
+    );
   }
 
   protected clipSymbol(index: number, isLTR = true) {