Merge branch 'master' into rkaraivanov/combo-navigation-refactor

Author: rkaraivanov

CHANGELOG.md

@@ -4,19 +4,57 @@ 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]
+## [5.2.0] - 2025-01-09
 ### Added
 - Form-associated elements now have a `defaultValue` property (`defaultChecked` for radio buttons, checkboxes, and switches). When a form is reset, components will use this property’s value as their new value or checked state.
 
 ### Changed
-- Calendar - allow passing a string value to the backing `value`, `values` and `activeDate` properties [#1467](https://github.com/IgniteUI/igniteui-webcomponents/issues/1467)
-- Date-time input - allow passing a string value to the backing `value`, `min` and `max` properties [#1467](https://github.com/IgniteUI/igniteui-webcomponents/issues/1467)
-- Date picker - allow passing a string value to the backing `value`, `min`, `max` and `activeDate` properties [#1467](https://github.com/IgniteUI/igniteui-webcomponents/issues/1467)
-- Component validation - aligned validation constraints to follow the behavior of their native HTML counterparts.
-  For example, `minlength` will no longer trigger a `tooShort` validity state, unless there is text present in the component.
+- #### Calendar
+  - enabled passing string values to the **value**, **values**, and **activeDate** properties [#1467](https://github.com/IgniteUI/igniteui-webcomponents/issues/1467)
+- #### Checkbox
+  - updated style implementation and improved slotted checkbox styles [#1489](https://github.com/IgniteUI/igniteui-webcomponents/pull/1489)
+- #### Date-time input
+  - enabled passing string values to the **value**, **min**, and **max** properties [#1467](https://github.com/IgniteUI/igniteui-webcomponents/issues/1467)
+- #### Date picker
+  - enabled passing string values to the **value**, **min**, **max** and **activeDate** properties [#1467](https://github.com/IgniteUI/igniteui-webcomponents/issues/1467)
+- #### List
+  - updated list item internal slots gaps and sizing [#1480](https://github.com/IgniteUI/igniteui-webcomponents/pull/1480)
+- #### Progressbar
+  - the default value label animation now uses CSS counters and animations [#1492](https://github.com/IgniteUI/igniteui-webcomponents/pull/1492)
+- #### Validation
+  - Updated validation constraints to align with the behavior of native HTML elements. For instance, the minlength attribute will now only trigger a tooShort validity state if the component contains a value.
 
 ### Fixed
-- Combo - Rendering issue after Edge browser autofill behavior [#1497](https://github.com/IgniteUI/igniteui-webcomponents/issues/1497)
+- #### Avatar
+  - slotted icon size [#1504](https://github.com/IgniteUI/igniteui-webcomponents/pull/1504)
+- #### Badge
+  - aligned colors with UI kits [#1466](https://github.com/IgniteUI/igniteui-webcomponents/pull/1466)
+- #### Card
+  - actions content alignment in vertical orientation [#1472](https://github.com/IgniteUI/igniteui-webcomponents/pull/1472)
+- #### Combo
+  - rendering issue after Edge browser autofill behavior [#1497](https://github.com/IgniteUI/igniteui-webcomponents/issues/1497)
+- #### Checkbox
+  - removed extra gap between the checkbox and the label [#1479](https://github.com/IgniteUI/igniteui-webcomponents/pull/1479)
+  - tick color in disabled state [#1528](https://github.com/IgniteUI/igniteui-webcomponents/pull/1528)
+- #### Dialog
+  - removed vertical padding in Bootstrap theme [#1471](https://github.com/IgniteUI/igniteui-webcomponents/pull/1471)
+  - Fluent theme typography [#1475](https://github.com/IgniteUI/igniteui-webcomponents/pull/1475)
+- #### Dropdown
+  - remove vertical padding in Bootstrap theme [#1471](https://github.com/IgniteUI/igniteui-webcomponents/pull/1471)
+- #### Input
+  - input type search does not interfere with the outline variant in Material theme [#1520](https://github.com/IgniteUI/igniteui-webcomponents/pull/1520)
+  - step validation for numeric input [#1522](https://github.com/IgniteUI/igniteui-webcomponents/pull/1522)
+  - helper-text color in invalid state [#1525](https://github.com/IgniteUI/igniteui-webcomponents/pull/1525)
+- #### List
+  - discrepancies between the list and the UI kits [#1488](https://github.com/IgniteUI/igniteui-webcomponents/pull/1488)
+- #### Radio
+  - remove label part when there is not slotted content [#1482](https://github.com/IgniteUI/igniteui-webcomponents/pull/1482)
+- #### Textarea
+  - label position in Material theme [#1518](https://github.com/IgniteUI/igniteui-webcomponents/pull/1518)
+  - helper-text color in disabled state [#1519](https://github.com/IgniteUI/igniteui-webcomponents/pull/1519)
+  - remove layout space for hidden content in prefix/suffix slots [#1526](https://github.com/IgniteUI/igniteui-webcomponents/pull/1526)
+- #### Icon service
+  - reduce sync events between copies of the service in different tabs [#1532](https://github.com/IgniteUI/igniteui-webcomponents/pull/1532)
 
 ## [5.1.2] - 2024-11-04
 ### Added
@@ -623,6 +661,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[5.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.1.2...5.2.0
 [5.1.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.1.1...5.1.2
 [5.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.1.0...5.1.1
 [5.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.0.2...5.1.0

src/components/common/util.ts

@@ -15,6 +15,16 @@ export const asPercent = (part: number, whole: number) => (part / whole) * 100;
 export const clamp = (number: number, min: number, max: number) =>
   Math.max(min, Math.min(number, max));
 
+export function numberOfDecimals(number: number): number {
+  const decimals = last(number.toString().split('.'));
+  return decimals ? decimals.length : 0;
+}
+
+export function roundPrecise(number: number, magnitude = 1): number {
+  const factor = 10 ** magnitude;
+  return Math.round(number * factor) / factor;
+}
+
 export function numberInRangeInclusive(
   value: number,
   min: number,

src/components/common/validators.ts

@@ -1,6 +1,12 @@
 import { DateTimeUtil } from '../date-time-input/date-util.js';
 import validatorMessages from './localization/validation-en.js';
-import { asNumber, formatString, isDefined } from './util.js';
+import {
+  asNumber,
+  formatString,
+  isDefined,
+  numberOfDecimals,
+  roundPrecise,
+} from './util.js';
 
 type ValidatorHandler<T> = (host: T) => boolean;
 type ValidatorMessageFormat<T> = (host: T) => string;
@@ -93,10 +99,20 @@ export const stepValidator: Validator<{
 }> = {
   key: 'stepMismatch',
   message: 'Value does not conform to step constraint',
-  isValid: ({ min, step, value }) =>
-    isDefined(value) && value !== '' && isDefined(step)
-      ? (asNumber(value) - asNumber(min)) % asNumber(step, 1) === 0
-      : true,
+  isValid: ({ min, step, value }) => {
+    if (isDefined(value) && value !== '' && isDefined(step)) {
+      const _value = asNumber(value) - asNumber(min);
+      const _step = asNumber(step);
+      const magnitude = numberOfDecimals(_step) + 1;
+      const rem = roundPrecise(
+        Math.abs(_value - _step * Math.round(_value / _step)),
+        magnitude
+      );
+
+      return !rem;
+    }
+    return true;
+  },
 };
 
 export const emailValidator: Validator<{ value: string }> = {

src/components/icon/icon-state.broadcast.ts

@@ -11,6 +11,7 @@ export class IconsStateBroadcast {
   private channel!: BroadcastChannel | null;
   private collections: IconsCollection<SvgIcon>;
   private refsCollection: IconsCollection<IconMeta>;
+  private static readonly origin = 'igniteui-webcomponents';
 
   constructor(
     collections: IconsCollection<SvgIcon>,
@@ -31,14 +32,19 @@ export class IconsStateBroadcast {
   }
 
   public handleEvent({ data }: MessageEvent<BroadcastIconsChangeMessage>) {
-    if (data.actionType !== ActionType.SyncState) {
+    // no need to sync with other wc icon services, just with angular elements
+    if (
+      data.actionType !== ActionType.SyncState ||
+      data.origin === IconsStateBroadcast.origin
+    ) {
       return;
     }
 
     this.send({
       actionType: ActionType.SyncState,
       collections: this.getUserSetCollection(this.collections).toMap(),
       references: this.getUserRefsCollection(this.refsCollection).toMap(),
+      origin: IconsStateBroadcast.origin,
     });
   }
 

src/components/icon/icon.spec.ts

@@ -1,4 +1,5 @@
 import {
+  aTimeout,
   elementUpdated,
   expect,
   fixture,
@@ -9,13 +10,15 @@ import { stub } from 'sinon';
 
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import { first, last } from '../common/util.js';
+import { IconsStateBroadcast } from './icon-state.broadcast.js';
 import IgcIconComponent from './icon.js';
 import {
   getIconRegistry,
   registerIcon,
   registerIconFromText,
   setIconRef,
 } from './icon.registry.js';
+import { createIconDefaultMap } from './registry/default-map.js';
 import {
   ActionType,
   type BroadcastIconsChangeMessage,
@@ -251,6 +254,31 @@ describe('Icon broadcast service', () => {
 
       expect(events.length).to.equal(0);
     });
+
+    it('when multiple broadcast services are initialized they should not send sync events to each other.', async () => {
+      const collections = createIconDefaultMap<string, SvgIcon>();
+      const references = createIconDefaultMap<string, IconMeta>();
+      // 2 new broadcasts
+      const broadcast1 = new IconsStateBroadcast(collections, references);
+      const broadcast2 = new IconsStateBroadcast(collections, references);
+      // 1 global one, initialized when you get the icon registry first time.
+      const iconReg = getIconRegistry();
+      // total - 3 services now.
+
+      // a peer is requesting a state sync
+      channel.postMessage({ actionType: ActionType.SyncState });
+      await aTimeout(20);
+
+      // all icon broadcasts must respond with their state
+      // 2 from broadcast service + 1 from global.
+      expect(events.length).to.equal(3);
+
+      // dispose of mock services.
+      // biome-ignore lint/complexity/useLiteralKeys: private access escape
+      broadcast1['dispose']();
+      // biome-ignore lint/complexity/useLiteralKeys: private access escape
+      broadcast2['dispose']();
+    });
   });
 
   describe('Peer registry', () => {

src/components/icon/registry/types.ts

@@ -35,6 +35,7 @@ export interface BroadcastIconsChangeMessage {
   actionType: ActionType;
   collections?: Map<string, Map<string, SvgIcon>>;
   references?: Map<string, Map<string, IconMeta>>;
+  origin?: string;
 }
 
 // Exported public types

src/components/input/input.spec.ts

@@ -356,6 +356,30 @@ describe('Input component', () => {
     });
   });
 
+  describe('issue-1521', () => {
+    let input: IgcInputComponent;
+
+    beforeEach(async () => {
+      input = await fixture<IgcInputComponent>(html`
+        <igc-input type="number" step="0.1"></igc-input>
+      `);
+    });
+
+    it('', () => {
+      input.value = '1';
+      expect(input.checkValidity()).to.be.true;
+
+      input.value = '1.1';
+      expect(input.checkValidity()).to.be.true;
+
+      input.value = '1.11';
+      expect(input.checkValidity()).to.be.false;
+
+      input.step = 0.01;
+      expect(input.checkValidity()).to.be.true;
+    });
+  });
+
   describe('Form integration', () => {
     const spec = createFormAssociatedTestBed<IgcInputComponent>(
       html`<igc-input name="input"></igc-input>`

src/components/rating/rating.ts

@@ -35,6 +35,8 @@ import {
   formatString,
   isEmpty,
   isLTR,
+  numberOfDecimals,
+  roundPrecise,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcRatingSymbolComponent from './rating-symbol.js';
@@ -328,17 +330,8 @@ export default class IgcRatingComponent extends FormAssociatedMixin(
     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) {
-    return Number(
-      (Math.round(value / this.step) * this.step).toFixed(
-        this.getPrecision(this.step)
-      )
-    );
+    return roundPrecise(value, numberOfDecimals(this.step));
   }
 
   protected clipSymbol(index: number, isLTR = true) {