Merge branch 'master' into sivanova/chip-discrepancies

Author: SisIvanova

CHANGELOG.md

@@ -5,10 +5,18 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### 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.
+
+### Fixed
+- Combo - Rendering issue after Edge browser autofill behavior [#1497](https://github.com/IgniteUI/igniteui-webcomponents/issues/1497)
 
 ## [5.1.2] - 2024-11-04
 ### Added

SECURITY.md

@@ -0,0 +1,12 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 5.1.x   | :white_check_mark: |
+| < 5.0.x | :x:                |
+
+## Reporting a Vulnerability
+
+Please report any suspected vulnerability through the [issues](../../issues) section.

package-lock.json

@@ -57,7 +57,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
     "@storybook/addon-a11y": "^8.4.7",
@@ -73,36 +73,36 @@
     "autoprefixer": "^10.4.20",
     "browser-sync": "^3.0.3",
     "cem-plugin-expanded-types": "^1.3.3",
-    "concurrently": "^9.1.0",
+    "concurrently": "^9.1.2",
     "custom-element-jet-brains-integration": "^1.6.2",
     "custom-element-vs-code-integration": "^1.4.1",
     "globby": "^14.0.2",
     "husky": "^9.1.7",
-    "ig-typedoc-theme": "^5.0.4",
-    "igniteui-theming": "^14.3.0",
+    "ig-typedoc-theme": "^6.0.0",
+    "igniteui-theming": "^14.3.1",
     "keep-a-changelog": "^2.5.3",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.3.0",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
-    "playwright": "^1.49.0",
+    "playwright": "^1.49.1",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "rimraf": "^5.0.10",
     "sass": "^1.78.0",
     "sass-embedded": "^1.78.0",
     "sinon": "^19.0.2",
     "storybook": "^8.4.7",
-    "stylelint": "^16.11.0",
+    "stylelint": "^16.12.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-prettier": "^5.0.2",
     "stylelint-scss": "^6.10.0",
     "ts-lit-plugin": "^2.0.2",
     "tslib": "^2.8.1",
-    "typedoc": "^0.26.11",
-    "typedoc-plugin-localization": "^3.0.5",
-    "typescript": "^5.6.3",
-    "vite": "^6.0.3"
+    "typedoc": "^0.27.6",
+    "typedoc-plugin-localization": "^3.0.6",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
   },
   "browserslist": [
     "defaults"

package.json

@@ -1,15 +1,18 @@
 import path from 'node:path';
 import { create } from 'browser-sync';
 import watch from 'node-watch';
-import TypeDoc from 'typedoc';
+import { Application } from 'typedoc';
 
 const browserSync = create();
 const ROOT = path.join.bind(null, path.resolve('./'));
 
 const TYPEDOC = {
   PLUGINS: {
-    THEME: ROOT('node_modules', 'ig-typedoc-theme'),
-    LOCALIZATION: ROOT('node_modules', 'typedoc-plugin-localization'),
+    THEME: ROOT('node_modules', 'ig-typedoc-theme/dist/index.js'),
+    LOCALIZATION: ROOT(
+      'node_modules',
+      'typedoc-plugin-localization/dist/index.js'
+    ),
   },
   OUTPUT: ROOT('dist', 'docs', 'typescript'),
   EXPORT_JSON_PATH: ROOT(
@@ -90,7 +93,7 @@ async function main() {
     entryPointStrategy = 'merge';
   }
 
-  const app = await TypeDoc.Application.bootstrapWithPlugins({
+  const app = await Application.bootstrapWithPlugins({
     entryPoints,
     entryPointStrategy,
     plugin: [TYPEDOC.PLUGINS.THEME, TYPEDOC.PLUGINS.LOCALIZATION],

scripts/build-typedoc.js

@@ -1,7 +1,11 @@
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 
 import { defineComponents } from '../common/definitions/defineComponents.js';
-import { FormAssociatedTestBed, isFocused } from '../common/utils.spec.js';
+import {
+  createFormAssociatedTestBed,
+  isFocused,
+} from '../common/utils.spec.js';
+import IgcInputComponent from '../input/input.js';
 import IgcButtonComponent from './button.js';
 
 const Variants: Array<IgcButtonComponent['variant']> = [
@@ -14,7 +18,7 @@ const Types: Array<IgcButtonComponent['type']> = ['button', 'reset', 'submit'];
 
 describe('Button tests', () => {
   let button: IgcButtonComponent;
-  before(() => defineComponents(IgcButtonComponent));
+  before(() => defineComponents(IgcButtonComponent, IgcInputComponent));
 
   describe('Button component', () => {
     const ignored_DOM_parts = {
@@ -214,49 +218,47 @@ describe('Button tests', () => {
   });
 
   describe('Form integration', () => {
-    const spec = new FormAssociatedTestBed(
-      html`<input type="text" name="username" value="John Doe" />
-        <igc-button type="submit">Submit</igc-button>`
-    );
+    let button: IgcButtonComponent;
+    const spec = createFormAssociatedTestBed<IgcInputComponent>(html`
+      <igc-input type="text" name="username" value="John Doe"></igc-input>
+      <igc-button type="submit">Submit</igc-button>
+    `);
 
-    beforeEach(async () => await spec.setup(IgcButtonComponent.tagName));
+    beforeEach(async () => {
+      await spec.setup(IgcInputComponent.tagName);
+      button = spec.form.querySelector(IgcButtonComponent.tagName)!;
+    });
 
     it('is form associated', async () => {
-      expect(spec.element.form).to.equal(spec.form);
+      expect(button.form).to.equal(spec.form);
     });
 
     it('submits the associated form', async () => {
-      const button = spec.element as unknown as IgcButtonComponent;
-
       const handler = (event: SubmitEvent) => {
         event.preventDefault();
-        expect(
-          new FormData(event.target as HTMLFormElement).get('username')
-        ).to.equal('John Doe');
+        expect(new FormData(spec.form).get('username')).to.equal('John Doe');
       };
 
       spec.form.addEventListener('submit', handler, { once: true });
       button.click();
     });
 
     it('resets the associated form', async () => {
-      const button = spec.element as unknown as IgcButtonComponent;
-      const input = spec.form.querySelector('input') as HTMLInputElement;
-
-      input.value = 'Jane Doe';
+      spec.setProperties({ value: 'Jane Doe' });
       button.type = 'reset';
-      await elementUpdated(button);
 
       button.click();
-      expect(input.value).to.equal('John Doe');
+      expect(spec.element.value).to.equal('John Doe');
     });
 
-    it('reflects disabled ancestor state', async () => {
+    it('reflects disabled ancestor state', () => {
       spec.setAncestorDisabledState(true);
       expect(spec.element.disabled).to.be.true;
+      expect(button.disabled).to.be.true;
 
       spec.setAncestorDisabledState(false);
       expect(spec.element.disabled).to.be.false;
+      expect(button.disabled).to.be.false;
     });
   });
 });

src/components/button/button.spec.ts

@@ -6,6 +6,11 @@ import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';
+import {
+  type FormValue,
+  createFormValueState,
+  defaultBooleanTransformers,
+} from '../common/mixins/forms/form-value.js';
 import { isEmpty } from '../common/util.js';
 import { checkBoxValidators } from './validators.js';
 
@@ -34,8 +39,8 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   }
 
   protected _kbFocus = addKeyboardFocusRing(this);
+  protected override _formValue: FormValue<boolean>;
   protected _value!: string;
-  protected _checked = false;
 
   @query('input', true)
   protected input!: HTMLInputElement;
@@ -69,13 +74,12 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
    */
   @property({ type: Boolean })
   public set checked(value: boolean) {
-    this._checked = Boolean(value);
-    this._setFormValue(this._checked ? this.value || 'on' : null);
+    this._formValue.setValueAndFormState(value);
     this._validate();
   }
 
   public get checked(): boolean {
-    return this._checked;
+    return this._formValue.value;
   }
 
   /**
@@ -85,6 +89,15 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   @property({ reflect: true, attribute: 'label-position' })
   public labelPosition: 'before' | 'after' = 'after';
 
+  constructor() {
+    super();
+
+    this._formValue = createFormValueState(this, {
+      initialValue: false,
+      transformers: defaultBooleanTransformers,
+    });
+  }
+
   protected override createRenderRoot() {
     const root = super.createRenderRoot();
     this.hideLabel = isEmpty(this.label);