chore: Address several code quality issues (#1994)

Author: rkaraivanov

package-lock.json

@@ -82,16 +82,16 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.0",
     "igniteui-i18n-resources": "0.7.0-alpha.8",
-    "igniteui-theming": "^23.1.1",
+    "igniteui-theming": "^23.2.0",
     "keep-a-changelog": "^2.7.1",
-    "lint-staged": "^16.2.6",
+    "lint-staged": "^16.2.7",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
     "playwright": "^1.56.1",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "rimraf": "^6.1.0",
+    "rimraf": "^6.1.2",
     "sass-embedded": "~1.93.3",
     "sinon": "^21.0.0",
     "storybook": "^10.0.8",
@@ -104,11 +104,11 @@
     "typedoc": "~0.28.14",
     "typedoc-plugin-localization": "^3.1.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.2"
+    "vite": "^7.2.4"
   },
   "peerDependencies": {
     "dompurify": "^3.3.0",
-    "marked": "^17.0.0",
+    "marked": "^17.0.1",
     "marked-shiki": "^1.2.1",
     "shiki": "^3.15.0"
   },

package.json

@@ -229,10 +229,7 @@ describe('igc-datepicker form integration', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcDatePickerComponent>(html`
-        <igc-date-picker
-          name="datePicker"
-          .defaultValue=${null}
-        ></igc-date-picker>
+        <igc-date-picker name="datePicker"></igc-date-picker>
       `);
 
       beforeEach(async () => {

src/components/date-picker/date-picker-form.spec.ts

@@ -927,7 +927,7 @@ describe('Date picker', () => {
       simulateClick(lastOfMay);
       await elementUpdated(picker);
 
-      expect(checkDatesEqual(picker.value!, targetDate));
+      checkDatesEqual(picker.value!, targetDate);
 
       // Open the picker and switch to months view
       await picker.show();

src/components/date-picker/date-picker.spec.ts

@@ -1102,10 +1102,7 @@ describe('Date Time Input component', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcDateTimeInputComponent>(html`
-        <igc-date-time-input
-          name="date-time"
-          .defaultValue=${null}
-        ></igc-date-time-input>
+        <igc-date-time-input name="date-time"></igc-date-time-input>
       `);
 
       beforeEach(async () => {

src/components/date-time-input/date-time-input.spec.ts

@@ -71,8 +71,8 @@ export default class IgcDialogComponent extends EventEmitterMixin<
   @state()
   private _animating = false;
 
-  private get _dialog(): HTMLDialogElement {
-    return this._dialogRef.value!;
+  private get _dialog(): HTMLDialogElement | undefined {
+    return this._dialogRef.value;
   }
 
   //#endregion
@@ -132,13 +132,13 @@ export default class IgcDialogComponent extends EventEmitterMixin<
 
   protected override firstUpdated(): void {
     if (this.open) {
-      this._dialog.showModal();
+      this._dialog?.showModal();
     }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })
   protected _handleOpenState(): void {
-    this.open ? this._dialog.showModal() : this._dialog.close();
+    this.open ? this._dialog?.showModal() : this._dialog?.close();
   }
 
   private _emitClosing(): boolean {
@@ -194,7 +194,7 @@ export default class IgcDialogComponent extends EventEmitterMixin<
     // reopen the dialog to prevent the broken state with visible backdrop.
     // Note that this handler is invoked only when `keepOpenOnEscape` is true.
     if (this.open) {
-      this._dialog.showModal();
+      this._dialog?.showModal();
     }
   }
 

src/components/dialog/dialog.ts

@@ -565,7 +565,7 @@ describe('Input component', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcInputComponent>(html`
-        <igc-input name="input" required .defaultValue=${undefined}></igc-input>
+        <igc-input name="input" required></igc-input>
       `);
 
       beforeEach(async () => {

src/components/input/input.spec.ts

@@ -816,12 +816,7 @@ describe('Masked input', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcMaskInputComponent>(html`
-        <igc-mask-input
-          name="mask"
-          mask="LL"
-          required
-          .defaultValue=${undefined}
-        ></igc-mask-input>
+        <igc-mask-input name="mask" mask="LL" required></igc-mask-input>
       `);
 
       beforeEach(async () => {

src/components/mask-input/mask-input.spec.ts

@@ -1343,7 +1343,7 @@ describe('Select', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcSelectComponent>(html`
-        <igc-select name="select" required .defaultValue=${undefined}>
+        <igc-select name="select" required>
           <igc-select-item value="1">1</igc-select-item>
           <igc-select-item value="2">2</igc-select-item>
           <igc-select-item value="3">3</igc-select-item>

src/components/select/select.spec.ts

@@ -240,15 +240,14 @@ describe('Textarea component', () => {
     });
 
     it('scroll()', async () => {
-      const text = new Text(
-        Array.from({ length: 100 }, (_, idx) => ` ${idx}`.repeat(250)).join(
-          '\n'
-        )
-      );
+      const text = Array.from({ length: 100 }, (_, idx) =>
+        ` ${idx}`.repeat(250)
+      ).join('\n');
+
       const [xDelta, yDelta] = [250, 250];
 
       element.wrap = 'off';
-      element.appendChild(text);
+      element.appendChild(document.createTextNode(text));
       await elementUpdated(element);
 
       element.scrollTo({ top: yDelta, left: xDelta });
@@ -385,11 +384,7 @@ describe('Textarea component', () => {
 
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcTextareaComponent>(html`
-        <igc-textarea
-          name="textarea"
-          required
-          .defaultValue=${undefined}
-        ></igc-textarea>
+        <igc-textarea name="textarea" required></igc-textarea>
       `);
 
       beforeEach(async () => {