Merge branch 'master' into dmdimitrov/chat-ai-component

Author: igdmdimitrov

package-lock.json

@@ -52,20 +52,20 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.3",
+    "@floating-ui/dom": "^1.7.4",
     "@lit-labs/virtualizer": "^2.1.1",
     "@lit/context": "^1.1.6",
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.1.3",
-    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@biomejs/biome": "~2.2.2",
+    "@custom-elements-manifest/analyzer": "^0.10.5",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^9.1.1",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-links": "^9.1.1",
-    "@storybook/web-components-vite": "^9.1.1",
+    "@storybook/addon-a11y": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-links": "^9.1.3",
+    "@storybook/web-components-vite": "^9.1.3",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -82,21 +82,21 @@
     "ig-typedoc-theme": "^6.2.3",
     "igniteui-theming": "^19.3.0-beta.4",
     "keep-a-changelog": "^2.6.2",
-    "lint-staged": "^16.1.4",
+    "lint-staged": "^16.1.5",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "marked": "^12.0.2",
     "marked-shiki": "^1.2.1",
     "node-watch": "^0.7.4",
-    "playwright": "^1.54.2",
+    "playwright": "^1.55.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.78.0",
     "shiki": "^3.10.0",
     "sinon": "^21.0.0",
-    "storybook": "^9.1.1",
-    "stylelint": "^16.23.0",
+    "storybook": "^9.1.3",
+    "stylelint": "^16.23.1",
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-prettier": "^5.0.3",
     "stylelint-scss": "^6.12.1",
@@ -105,7 +105,7 @@
     "typedoc": "~0.27.9",
     "typedoc-plugin-localization": "^3.0.6",
     "typescript": "^5.8.3",
-    "vite": "^7.1.0"
+    "vite": "^7.1.3"
   },
   "peerDependencies": {
     "@google/genai": "^1.3.0",

package.json

@@ -234,7 +234,7 @@ export class NavigationController<T extends object>
   }
 
   public navigateTo(item: T, container: IgcComboListComponent) {
-    this.active = this.dataState.findIndex((i) => i === item);
+    this.active = this.dataState.indexOf(item as ComboRecord<T>);
     this.scrollToActive(container, 'smooth');
   }
 

src/components/combo/controllers/navigation.ts

@@ -17,6 +17,13 @@ $dropdown-theme: dropdown-theme.$bootstrap;
         grid-auto-rows: minmax(rem(20px), auto);
         margin-block-start: rem(4px);
     }
+
+    ::slotted([slot='suffix']),
+    ::slotted([slot='prefix']) {
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
 }
 
 [part='list-wrapper'] {
@@ -128,4 +135,25 @@ $dropdown-theme: dropdown-theme.$bootstrap;
             color: inherit;
         }
     }
+
+    ::slotted([slot='suffix']),
+    [part|='toggle'] {
+        border-inline-end: rem(1px) solid var(--disabled-border-color);
+    }
+
+    ::slotted([slot='prefix']) {
+        border-inline-start: rem(1px) solid var(--disabled-border-color);
+    }
 }
+
+:host(:not([disabled])),
+:host(:not(:disabled)) {
+    ::slotted([slot='suffix']),
+    [part|='toggle'] {
+        border-inline-end: rem(1px) solid var(--border-color);
+    }
+
+    ::slotted([slot='prefix']) {
+        border-inline-start: rem(1px) solid var(--border-color);
+    }
+}

src/components/combo/themes/shared/combo.bootstrap.scss

@@ -94,3 +94,8 @@ $dropdown-theme: dropdown-theme.$material;
         }
     }
 }
+
+::slotted([slot='suffix']),
+::slotted([slot='prefix']) {
+    padding-inline: var(--affix-padding);
+}

src/components/combo/themes/shared/combo.common.scss

@@ -938,6 +938,31 @@ describe('Date picker', () => {
       expect(selectedMonths).lengthOf(1);
     });
 
+    it('should update the calendar view when typing, i.e. switch to other month', async () => {
+      const eventSpy = spy(picker, 'emitEvent');
+      const date = new CalendarDay({ year: 2025, month: 1, date: 1 });
+      picker.value = date.native;
+      picker.open = true;
+      picker.inputFormat = 'MM/dd/yyyy';
+      await elementUpdated(picker);
+
+      dateTimeInput.focus();
+      dateTimeInput.setSelectionRange(0, 1);
+      await elementUpdated(picker);
+
+      simulateKeyboard(dateTimeInput, arrowUp);
+      simulateKeyboard(dateTimeInput, arrowUp);
+
+      await elementUpdated(picker);
+
+      expect(eventSpy).calledWith('igcInput');
+      expect(eventSpy).not.calledWith('igcChange');
+
+      const expectedValue = new CalendarDay({ year: 2025, month: 3, date: 1 })
+        .native;
+      checkDatesEqual(calendar.activeDate, expectedValue);
+    });
+
     describe('Readonly state', () => {
       describe('Dropdown mode', () => {
         beforeEach(async () => {

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

@@ -541,7 +541,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
 
     super.handleAnchorClick();
     await this.updateComplete;
-    this._calendar[focusActiveDate]();
+    this._calendar[focusActiveDate]({ preventScroll: true });
   }
 
   protected _handleInputChangeEvent(event: CustomEvent<Date>): void {
@@ -583,6 +583,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     }
 
     this.value = (event.target as IgcDateTimeInputComponent).value!;
+    this._calendar.activeDate = this.value ?? this._calendar.activeDate;
     this.emitEvent('igcInput', { detail: this.value });
   }
 

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

@@ -59,3 +59,29 @@ $theme: $bootstrap;
 [part='actions'] {
     min-height: #{sizable(rem(47px), rem(54px), rem(64px))};
 }
+
+:host(:not([disabled])),
+:host(:not(:disabled)) {
+    ::slotted([slot^='prefix-']),
+    [part|='calendar-icon'] {
+        border-inline-start: rem(1px) solid var(--border-color);
+    }
+
+    ::slotted([slot^='suffix-']),
+    [part|='clear-icon'] {
+        border-inline-end: rem(1px) solid var(--border-color);
+    }
+}
+
+:host(:disabled),
+:host([disabled]) {
+    ::slotted([slot^='prefix-']),
+    [part|='calendar-icon'] {
+        border-inline-start: rem(1px) solid var(--disabled-border-color);
+    }
+
+    ::slotted([slot^='suffix-']),
+    [part|='clear-icon'] {
+        border-inline-end: rem(1px) solid var(--disabled-border-color);
+    }
+}

src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss

@@ -129,3 +129,8 @@ igc-icon,
 ::slotted(igc-icon) {
     --component-size: var(--input-size);
 }
+
+::slotted([slot|='suffix']),
+::slotted([slot|='prefix']) {
+    padding-inline: var(--affix-padding);
+}

src/components/date-range-picker/themes/shared/date-range-picker.common.scss

@@ -120,7 +120,7 @@ describe('Date Util', () => {
       [DateParts.Seconds, currentDate.getSeconds()],
       [
         DateParts.Year,
-        Number.parseInt(currentDate.getFullYear().toString().slice(-2)),
+        Number.parseInt(currentDate.getFullYear().toString().slice(-2), 10),
       ],
     ]);
 
@@ -139,7 +139,9 @@ describe('Date Util', () => {
         const amPm = currentDate.getHours() >= 12 ? 'PM' : 'AM';
         expect(amPm).to.equal(targetValue);
       } else {
-        expect(partsMap.get(part.type)).to.equal(Number.parseInt(targetValue));
+        expect(partsMap.get(part.type)).to.equal(
+          Number.parseInt(targetValue, 10)
+        );
       }
     }
   });