fix(date-picker): Emit change event in non-editable configurations (#1885)

Date-picker correctly emits `igcChange` event when in dialog mode or
when set to a non-editable configuration, such as readonly or non-editable,
after user interaction.

Closes #1884

---------

Co-authored-by: Bozhidara Pachilova <[email protected]>

Author: rkaraivanov

src/components/calendar/helpers.ts

@@ -2,6 +2,7 @@ import {
   asNumber,
   findElementFromEventPath,
   first,
+  isEmpty,
   isString,
   last,
   modulo,
@@ -255,3 +256,29 @@ export function isDateInRanges(
     }
   });
 }
+
+export function createDateConstraints(
+  min: Date | null,
+  max: Date | null,
+  disabledDates?: DateRangeDescriptor[]
+) {
+  const constraints: DateRangeDescriptor[] = [];
+
+  if (min) {
+    constraints.push({
+      type: DateRangeType.Before,
+      dateRange: [min],
+    });
+  }
+
+  if (max) {
+    constraints.push({
+      type: DateRangeType.After,
+      dateRange: [max],
+    });
+  }
+
+  constraints.push(...(disabledDates ?? []));
+
+  return !isEmpty(constraints) ? constraints : undefined;
+}

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

@@ -16,7 +16,11 @@ import {
 } from '../common/controllers/key-bindings.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import { equal } from '../common/util.js';
-import { simulateClick, simulateKeyboard } from '../common/utils.spec.js';
+import {
+  isFocused,
+  simulateClick,
+  simulateKeyboard,
+} from '../common/utils.spec.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
 import IgcDatePickerComponent from './date-picker.js';
 
@@ -963,6 +967,53 @@ describe('Date picker', () => {
       checkDatesEqual(calendar.activeDate, expectedValue);
     });
 
+    it('issue 1884 - should emit igcChange event in dialog mode after clearing the value and losing focus', async () => {
+      const eventSpy = spy(picker, 'emitEvent');
+      // const nativeInput = dateTimeInput.renderRoot.querySelector('input')!;
+
+      // Dropdown mode
+
+      picker.value = CalendarDay.today.native;
+      picker.focus();
+      picker.blur();
+      await elementUpdated(picker);
+
+      picker.focus();
+      expect(isFocused(dateTimeInput)).to.be.true;
+
+      // Simulate clicking the clear button
+      picker.clear();
+
+      picker.blur();
+      expect(isFocused(dateTimeInput)).to.be.false;
+
+      expect(eventSpy).to.be.calledWith('igcChange', {
+        detail: null,
+      });
+
+      eventSpy.resetHistory();
+
+      // Dialog mode
+      picker.mode = 'dialog';
+      picker.value = CalendarDay.today.native;
+      picker.focus();
+      picker.blur();
+      await elementUpdated(picker);
+
+      picker.focus();
+      expect(isFocused(dateTimeInput)).to.be.true;
+
+      // Simulate clicking the clear button
+      picker.clear();
+
+      picker.blur();
+      expect(isFocused(dateTimeInput)).to.be.false;
+
+      expect(eventSpy).to.be.calledWith('igcChange', {
+        detail: null,
+      });
+    });
+
     describe('Readonly state', () => {
       describe('Dropdown mode', () => {
         beforeEach(async () => {