@ukic/canary-web-components 3.0.0-canary.13 → 3.0.0-canary.15

package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-date-input.js","sourceRoot":"","sources":["../../../../../src/components/ic-date-input/test/helpers/ic-date-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAsBnF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAM,GAAG,YAAY,EAAqB,EAAE,CAC1E,WAAW,CAAC;IACV,UAAU,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;IACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,qBAAe,KAAK,EAAC,YAAY,iBAAc,MAAM,GAAkB,CACxE;CACF,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAa,EAAE;IAChE,OAAO;QACL,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,KAAK,CAAC,KAAK;KAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,WAAmB,EAAiB,EAAE;IAClE,OAAO;QACL,GAAG,EAAE,GAAG,WAAW,EAAE;QACrB,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;KACjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,EACrC,MAAe,EACS,EAAE;IAC1B,MAAM,IAAI,GAAG,MAAM,eAAe,CAAC,MAAM,CAAC,CAAC;IAE3C,MAAM,SAAS,GAAG,IAAI,CAAC,IAA8B,CAAC;IACtD,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC;IAE5C,MAAM,QAAQ,GAAG,SAAS,CAAC,UAAU,CAAC,aAAa,CACjD,YAAY,CACO,CAAC;IACtB,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,CAAC,aAAa,CACnD,cAAc,CACK,CAAC;IACtB,MAAM,SAAS,GAAG,SAAS,CAAC,UAAU,CAAC,aAAa,CAClD,aAAa,CACM,CAAC;IAEtB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAE7B,QAAQ,CAAC,MAAM,GAAG,UAAU,CAAC;IAC7B,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC;IAC/B,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC;IAE9B,OAAO;QACL,IAAI;QACJ,SAAS;QACT,iBAAiB;QACjB,QAAQ;QACR,UAAU;QACV,SAAS;KACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { SpecPage, newSpecPage } from \"@stencil/core/testing\";\nimport { DateInput } from \"../../ic-date-input\";\nimport { h } from \"@stencil/core\";\nimport { IcInputLabel } from \"@ukic/web-components/dist/components/ic-input-label\";\n\ninterface EventType {\n  inputType: string;\n  target: HTMLInputElement;\n  data: string;\n}\n\ninterface KeyboardEvent {\n  key: string;\n  preventDefault: () => void;\n}\n\ninterface DateInputType {\n  page: SpecPage;\n  component: HTMLIcDateInputElement;\n  componentInstance: any;\n  dayInput: HTMLInputElement;\n  monthInput: HTMLInputElement;\n  yearInput: HTMLInputElement;\n}\n\nexport const createDateInput = (format = \"DD/MM/YYYY\"): Promise<SpecPage> =>\n  newSpecPage({\n    components: [DateInput, IcInputLabel],\n    template: () => (\n      <ic-date-input label=\"Test label\" date-format={format}></ic-date-input>\n    ),\n  });\n\nexport const handleEvent = (input: HTMLInputElement): EventType => {\n  return {\n    inputType: \"insertText\",\n    target: input,\n    data: input.value,\n  };\n};\n\nexport const keyboardEvent = (keyboardKey: string): KeyboardEvent => {\n  return {\n    key: `${keyboardKey}`,\n    preventDefault: (): void => null,\n  };\n};\n\nexport const createDateInputEnv = async (\n  format?: string\n): Promise<DateInputType> => {\n  const page = await createDateInput(format);\n\n  const component = page.root as HTMLIcDateInputElement;\n  const componentInstance = page.rootInstance;\n\n  const dayInput = component.shadowRoot.querySelector(\n    \".day-input\"\n  ) as HTMLInputElement;\n  const monthInput = component.shadowRoot.querySelector(\n    \".month-input\"\n  ) as HTMLInputElement;\n  const yearInput = component.shadowRoot.querySelector(\n    \".year-input\"\n  ) as HTMLInputElement;\n\n  const mockSelect = jest.fn();\n\n  dayInput.select = mockSelect;\n  monthInput.select = mockSelect;\n  yearInput.select = mockSelect;\n\n  return {\n    page,\n    component,\n    componentInstance,\n    dayInput,\n    monthInput,\n    yearInput,\n  };\n};\n"]}
+{"version":3,"file":"ic-date-input.js","sourceRoot":"","sources":["../../../../../src/components/ic-date-input/test/helpers/ic-date-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAsBnF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAM,GAAG,YAAY,EAAqB,EAAE,CAC1E,WAAW,CAAC;IACV,UAAU,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;IACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,qBAAe,KAAK,EAAC,YAAY,iBAAc,MAAM,GAAkB,CACxE;CACF,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAa,EAAE;IAChE,OAAO;QACL,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,KAAK,CAAC,KAAK;KAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,WAAmB,EAAiB,EAAE;IAClE,OAAO;QACL,GAAG,EAAE,GAAG,WAAW,EAAE;QACrB,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;KACjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,EACrC,MAAe,EACS,EAAE;IAC1B,MAAM,IAAI,GAAG,MAAM,eAAe,CAAC,MAAM,CAAC,CAAC;IAE3C,MAAM,SAAS,GAAG,IAAI,CAAC,IAA8B,CAAC;IACtD,MAAM,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC;IAE5C,MAAM,QAAQ,GACZ,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,YAAY,CAAE,CAAC;IACvE,MAAM,UAAU,GACd,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,cAAc,CAAE,CAAC;IACzE,MAAM,SAAS,GACb,SAAS,CAAC,UAAW,CAAC,aAAa,CAAmB,aAAa,CAAE,CAAC;IAExE,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAE7B,IAAI,QAAQ;QAAE,QAAQ,CAAC,MAAM,GAAG,UAAU,CAAC;IAC3C,IAAI,UAAU;QAAE,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC;IAC/C,IAAI,SAAS;QAAE,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC;IAE7C,OAAO;QACL,IAAI;QACJ,SAAS;QACT,iBAAiB;QACjB,QAAQ;QACR,UAAU;QACV,SAAS;KACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { SpecPage, newSpecPage } from \"@stencil/core/testing\";\nimport { DateInput } from \"../../ic-date-input\";\nimport { h } from \"@stencil/core\";\nimport { IcInputLabel } from \"@ukic/web-components/dist/components/ic-input-label\";\n\ninterface EventType {\n  inputType: string;\n  target: HTMLInputElement;\n  data: string;\n}\n\ninterface KeyboardEvent {\n  key: string;\n  preventDefault: () => void;\n}\n\ninterface DateInputType {\n  page: SpecPage;\n  component: HTMLIcDateInputElement;\n  componentInstance: any;\n  dayInput: HTMLInputElement;\n  monthInput: HTMLInputElement;\n  yearInput: HTMLInputElement;\n}\n\nexport const createDateInput = (format = \"DD/MM/YYYY\"): Promise<SpecPage> =>\n  newSpecPage({\n    components: [DateInput, IcInputLabel],\n    template: () => (\n      <ic-date-input label=\"Test label\" date-format={format}></ic-date-input>\n    ),\n  });\n\nexport const handleEvent = (input: HTMLInputElement): EventType => {\n  return {\n    inputType: \"insertText\",\n    target: input,\n    data: input.value,\n  };\n};\n\nexport const keyboardEvent = (keyboardKey: string): KeyboardEvent => {\n  return {\n    key: `${keyboardKey}`,\n    preventDefault: (): null => null,\n  };\n};\n\nexport const createDateInputEnv = async (\n  format?: string\n): Promise<DateInputType> => {\n  const page = await createDateInput(format);\n\n  const component = page.root as HTMLIcDateInputElement;\n  const componentInstance = page.rootInstance;\n\n  const dayInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".day-input\")!;\n  const monthInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".month-input\")!;\n  const yearInput =\n    component.shadowRoot!.querySelector<HTMLInputElement>(\".year-input\")!;\n\n  const mockSelect = jest.fn();\n\n  if (dayInput) dayInput.select = mockSelect;\n  if (monthInput) monthInput.select = mockSelect;\n  if (yearInput) yearInput.select = mockSelect;\n\n  return {\n    page,\n    component,\n    componentInstance,\n    dayInput,\n    monthInput,\n    yearInput,\n  };\n};\n"]}

package/dist/collection/components/ic-date-picker/ic-date-picker.js

@@ -22,7 +22,7 @@ export class DatePicker {
         this.dayPickerKeyboardNav = false;
         this.dialogDescription = "";
         this.focusDay = true;
-        this.liveRegionEl = null;
+        this.liveRegionEl = undefined;
         this.monthNames = [];
         this.monthInViewUpdateHandled = false;
         this.myCalendarButtonClicked = false;
@@ -49,6 +49,10 @@ export class DatePicker {
          * If `true`, the disabled state will be set.
          */
         this.disabled = false;
+        /**
+         *  If `true`, every individual input field completed will emit an icChange event.
+         */
+        this.emitDatePartChange = false;
         /**
          * The days of the week to disable.
          */
@@ -153,11 +157,12 @@ export class DatePicker {
             this.decadeEnd = decadeArr[10];
         };
         this.setSelectedDate = (d, emit = true) => {
+            var _a;
             if (d === null || !dateMatches(d, this.selectedDate)) {
                 this.selectedDate = d;
                 this.value = d;
                 if (emit) {
-                    this.inputEl.triggerIcChange(d);
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.triggerIcChange(d);
                 }
             }
         };
@@ -175,10 +180,11 @@ export class DatePicker {
             this.calendarOpen = false;
         };
         this.keyDownHandler = (event) => {
+            var _a;
             if (event.key === "Escape") {
                 if (this.calendarOpen) {
                     this.closeButtonClickHandler();
-                    this.inputEl.setCalendarFocus();
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setCalendarFocus();
                     event.stopImmediatePropagation();
                 }
             }
@@ -194,10 +200,14 @@ export class DatePicker {
             this.monthButtonEl.setFocus();
         };
         this.focusLastElement = () => {
-            if (this.showPickerClearButton && !this.clearButtonEl.disabled) {
+            if (this.showPickerClearButton &&
+                this.clearButtonEl &&
+                !this.clearButtonEl.disabled) {
                 this.clearButtonEl.setFocus();
             }
-            else if (this.showPickerTodayButton && !this.todayButtonEl.disabled) {
+            else if (this.showPickerTodayButton &&
+                this.todayButtonEl &&
+                !this.todayButtonEl.disabled) {
                 this.todayButtonEl.setFocus();
             }
             else if (this.monthPickerVisible) {
@@ -243,7 +253,8 @@ export class DatePicker {
             setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
         };
         this.todayButtonKeyDownHandler = (ev) => {
-            if (ev.key === "Tab" && !ev.shiftKey && this.clearButtonEl.disabled) {
+            var _a;
+            if (ev.key === "Tab" && !ev.shiftKey && ((_a = this.clearButtonEl) === null || _a === void 0 ? void 0 : _a.disabled)) {
                 this.focusFirstElement();
                 ev.preventDefault();
             }
@@ -365,9 +376,7 @@ export class DatePicker {
         this.isNextYearAllowed = () => {
             return this.isYearAllowed(this.yearInView + 1);
         };
-        this.isYearAllowed = (yr) => {
-            return yearInRange(yr, this.minDate, this.maxDate);
-        };
+        this.isYearAllowed = (yr) => yearInRange(yr, this.minDate, this.maxDate);
         this.getMonthView = (date) => {
             const start = getWeekStart(getMonthStart(date), this.startOfWeek);
             const end = getWeekEnd(getMonthEnd(date), this.startOfWeek);
@@ -386,20 +395,23 @@ export class DatePicker {
             return (d.getFullYear() === this.yearInView && d.getMonth() === this.monthInView);
         };
         this.updateMonthInView = () => {
-            this.currMonthView = this.getMonthView(this.focussedDate);
-            this.focussedDay = this.focussedDate.getDate();
-            this.monthInView = this.focussedDate.getMonth();
-            this.yearInView = this.focussedDate.getFullYear();
-            if (this.dayPickerKeyboardNav) {
-                this.monthInViewUpdateHandled = true;
-                this.setAriaLiveRegionText(this.getMonthInViewText());
-                this.dayPickerKeyboardNav = false;
+            if (this.focussedDate) {
+                this.currMonthView = this.getMonthView(this.focussedDate);
+                this.focussedDay = this.focussedDate.getDate();
+                this.monthInView = this.focussedDate.getMonth();
+                this.yearInView = this.focussedDate.getFullYear();
+                if (this.dayPickerKeyboardNav) {
+                    this.monthInViewUpdateHandled = true;
+                    this.setAriaLiveRegionText(this.getMonthInViewText());
+                    this.dayPickerKeyboardNav = false;
+                }
             }
         };
         this.handleSelectDay = (day) => {
+            var _a;
             this.setSelectedDate(day);
             this.calendarOpen = false;
-            this.inputEl.setCalendarFocus();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setCalendarFocus();
         };
         this.handleSelectMonth = (month) => {
             this.moveMonths(month - this.monthInView);
@@ -610,11 +622,13 @@ export class DatePicker {
                     break;
                 case "ArrowLeft":
                     this.dayPickerKeyboardNav = true;
-                    this.moveDays(-1 * this.getNextDayToFocus(this.focussedDate, false));
+                    if (this.focussedDate)
+                        this.moveDays(-1 * this.getNextDayToFocus(this.focussedDate, false));
                     break;
                 case "ArrowRight":
                     this.dayPickerKeyboardNav = true;
-                    this.moveDays(this.getNextDayToFocus(this.focussedDate, true));
+                    if (this.focussedDate)
+                        this.moveDays(this.getNextDayToFocus(this.focussedDate, true));
                     break;
                 case "PageUp":
                     this.dayPickerKeyboardNav = true;
@@ -644,10 +658,11 @@ export class DatePicker {
             }
         };
         this.calendarTabHandler = (ev) => {
+            var _a;
             let handled = false;
             if (!ev.shiftKey &&
                 (!this.showPickerTodayButton || this.isCurrentMonth()) &&
-                (!this.showPickerClearButton || this.clearButtonEl.disabled)) {
+                (!this.showPickerClearButton || ((_a = this.clearButtonEl) === null || _a === void 0 ? void 0 : _a.disabled))) {
                 this.focusFirstElement();
                 handled = true;
             }
@@ -664,47 +679,50 @@ export class DatePicker {
             this.dayButtonFocussed = false;
         };
         this.getNextDayToFocus = (currDay, forward, level = 1) => {
+            var _a;
             const move = forward ? 1 : -1;
             const nextDay = new Date(currDay);
             nextDay.setDate(nextDay.getDate() + move);
-            const nextDayNum = Number(nextDay.getDay());
-            if (this.disableDays.includes(nextDayNum)) {
-                return this.getNextDayToFocus(nextDay, forward, level + 1);
-            }
-            else {
-                return level;
-            }
+            return ((_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(nextDay.getDay())))
+                ? this.getNextDayToFocus(nextDay, forward, level + 1)
+                : level;
         };
         this.moveDays = (numDays) => {
-            const d = new Date(this.focussedDate);
-            d.setDate(d.getDate() + numDays);
-            this.setFocussedDate(d);
+            if (this.focussedDate) {
+                const d = new Date(this.focussedDate);
+                d.setDate(d.getDate() + numDays);
+                this.setFocussedDate(d);
+            }
         };
         this.moveMonths = (numMonths) => {
-            const newMonth = this.focussedDate.getMonth() + numMonths;
-            const min = new Date(new Date(getMonthStart(this.focussedDate)).setMonth(newMonth));
-            const max = getMonthEnd(min);
-            const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
-            this.setFocussedDate(clampDate(newDate, min, max));
-            if (this.monthPickerVisible === false &&
-                this.yearPickerVisible === false &&
-                this.monthInViewUpdateHandled === false) {
-                this.setAriaLiveRegionText(this.getMonthInViewText());
-            }
-            this.monthInViewUpdateHandled = false;
+            if (this.focussedDate) {
+                const newMonth = this.focussedDate.getMonth() + numMonths;
+                const min = new Date(new Date(getMonthStart(this.focussedDate)).setMonth(newMonth));
+                const max = getMonthEnd(min);
+                const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
+                this.setFocussedDate(clampDate(newDate, min, max));
+                if (this.monthPickerVisible === false &&
+                    this.yearPickerVisible === false &&
+                    this.monthInViewUpdateHandled === false) {
+                    this.setAriaLiveRegionText(this.getMonthInViewText());
+                }
+                this.monthInViewUpdateHandled = false;
+            }
         };
         this.moveYears = (numYears) => {
-            const newYear = this.focussedDate.getFullYear() + numYears;
-            const min = new Date(new Date(getMonthStart(this.focussedDate)).setFullYear(newYear));
-            const max = getMonthEnd(min);
-            const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
-            this.setFocussedDate(clampDate(newDate, min, max));
-            if (this.monthPickerVisible === false &&
-                this.yearPickerVisible === false &&
-                this.monthInViewUpdateHandled === false) {
-                this.setAriaLiveRegionText(this.getMonthInViewText());
-            }
-            this.monthInViewUpdateHandled = false;
+            if (this.focussedDate) {
+                const newYear = this.focussedDate.getFullYear() + numYears;
+                const min = new Date(new Date(getMonthStart(this.focussedDate)).setFullYear(newYear));
+                const max = getMonthEnd(min);
+                const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
+                this.setFocussedDate(clampDate(newDate, min, max));
+                if (this.monthPickerVisible === false &&
+                    this.yearPickerVisible === false &&
+                    this.monthInViewUpdateHandled === false) {
+                    this.setAriaLiveRegionText(this.getMonthInViewText());
+                }
+                this.monthInViewUpdateHandled = false;
+            }
         };
         this.updateFocussedMonth = (adjust) => {
             const d = new Date(this.focussedYear, this.focussedMonth, 1);
@@ -759,6 +777,7 @@ export class DatePicker {
                 showClearButton: true,
                 showCalendarButton: true,
                 value: this.value,
+                emitDatePartChange: this.emitDatePartChange,
             };
             if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
                 inputProps.dateFormat = this.dateFormat;
@@ -775,16 +794,16 @@ export class DatePicker {
                     inputProps.disablePastMessage = this.disablePastMessage;
                 }
             }
-            if (this.disableDays.length > 0) {
+            if (this.disableDays && this.disableDays.length > 0) {
                 inputProps.disableDays = this.disableDays;
                 if (this.disableDaysMessage !== DEFAULT_DISABLE_DAYS_MSG) {
                     inputProps.disableDaysMessage = this.disableDaysMessage;
                 }
             }
-            if (this.max !== null && this.max !== "") {
+            if (this.max !== null && this.max !== "" && this.maxDate) {
                 inputProps.max = this.maxDate;
             }
-            if (this.min !== null && this.min !== "") {
+            if (this.min !== null && this.min !== "" && this.minDate) {
                 inputProps.min = this.minDate;
             }
             if (this.helperText !== undefined) {
@@ -976,35 +995,38 @@ export class DatePicker {
             : "Open month picker";
         const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
         let minDay = minDate;
-        if (this.disablePast) {
+        if (minDate && this.disablePast) {
             const yesterday = new Date(minDate);
             yesterday.setDate(minDate.getDate() - 1);
             minDay = yesterday;
         }
-        return (h(Host, { key: '59530924b1c1a8701fe9d568dda744acbb9f9429', onKeyDown: this.keyDownHandler, class: {
+        return (h(Host, { key: 'cc90bc5878c0b27ef385c662cbe9e294af725f7d', onKeyDown: this.keyDownHandler, class: {
                 [`ic-date-picker-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '02b510a9196a1c64ac5805bacda63070486a88a6', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: '85985258b70c8eef02db8ec330d144aef0c07c00', ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (h("div", { key: '0c0de6d01a028c5c6bd0bf0e60313055ad69c4fb' }, h("span", { key: '3710d052f35c166c73ae17a4bff3866ae31988d2', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: '38cc8d6f732d6290a8a489e6b4f283ad5f8546b1', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+            } }, h("div", { key: '65d2149e34caf284fa187c3b2dd8ed21d6bb5a44', class: "date-input-container" }, h("ic-date-input", Object.assign({ key: '2ae06cec893443c8a300a0faa3bec5c7b9b4a652', ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (h("div", { key: '81bf1e0fc12cc1180e5dee420e6792be18860789' }, h("span", { key: '12198d7c301931a0d1dc046e57e736ad872362bd', id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { key: '1738f61431f776ba6e0377dd657cc3085d111db6', role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
                 "calendar-container": true,
                 above: this.showPickerAbove,
-            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { key: 'de970be8432eb42903d10c751dd7f5693032433b', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '1f61a0183d227713f12202a7eacc9eee8e696376', class: {
+            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { key: '210fa127f438a467e7fe89c5a6e900cd4d69ec2a', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '500e2e2dbd101bb0f770d4ba8cd793dc9c4ebb57', class: {
                 "month-year-nav-container": true,
-            } }, h("div", { key: '5aa91f8d46ea2fb6781880dbed605827e676f8b1', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: 'ad9538194a76899bd59f46ed9b115e95c44435f0', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '6d75e6cad6a70036350579d02b610233f9471149', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), h("div", { key: '122524d109dbb355bbf7aa78ba505edcad8a0614', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: 'bd65e30ab89c47e85fbce0ab74d8252fb1a0055b', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: 'd7f1ba0cf97bfe1483357de887730c63f4d0b3f0', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (h("div", { key: 'cb82883365a79cd430017f7fcb761e8ba2573c32', class: {
+            } }, h("div", { key: '36ce54eee3ff375aa188e8ebccb56e767d43a64f', class: "month-year-nav" }, this.previousMonthButton(), h("span", { key: 'e5ff7fe31f7b7ead833a4b46430ee59688516b1d', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { key: '8ac0849ffda32901e0877c3c2c99badc1c73eaf6', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), h("div", { key: '832776e6191be307b0da81a8443f21ab799e5a56', class: "month-year-nav" }, this.previousYearButton(), h("span", { key: '46cdeb8c52e33b5b3b520ef225887a42fc1bf058', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { key: 'f44e816f812ba381360493b3720aebef8a29aac1', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (h("div", { key: '6467d4df41dd58ff2b1578bcdbfec543e1b97e79', class: {
                 calendar: true,
                 hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: '7ec2ee64c0ed75bf2a7f2a6e860d56a05583bf40', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
+            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { key: 'b2852f026f9f5a10d53a82062e194d128bb19ba4', class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
             const header = size === "small" ? dayName.charAt(0) : dayName;
             return (h("div", { class: "calendar-day-header" }, h("ic-typography", { variant: "caption" }, header)));
-        })), h("div", { key: 'dbc8e69226b9ed38bf51f05f44f688be5720a2ac', class: "calendar-days-container" }, this.currMonthView.map((day) => (h(DayButton, { day: day, disableDay: this.disableDays.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })))))), h("div", { key: 'ae8bc96be8bd8a97ddb952afb04a383b69b88653', class: {
+        })), h("div", { key: '7213ab26144c1cade134c5acec0c261631772631', class: "calendar-days-container" }, this.currMonthView.map((day) => {
+            var _a;
+            return (h(DayButton, { day: day, disableDay: (_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth }));
+        })))), h("div", { key: '49df75ac411965cac3efc5a9f5c8345f931d60f9', class: {
                 "month-picker-container": true,
                 hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (h(MonthPicker, { key: 'f6227d14a2d4db07a8fe16cb531a573d125d715b', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: '5eb0c8a44ee68394f453e0f5240f0647c85fdd5f', class: {
+            } }, monthPickerVisible && (h(MonthPicker, { key: '97a612ef85dec4982ae6a5f48ca7ef48d6ce83ab', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { key: '0780257482c6fa52e35b4a21c40ce4418d94ca1b', class: {
                 "year-picker-container": true,
                 hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (h(YearPicker, { key: 'df83d40f781654acc445af4ca93e56eb4507fe9c', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), h("div", { key: 'ef1d29f341f868d5a35f31595cabbb2aac97fc76', class: {
+            } }, yearPickerVisible && (h(YearPicker, { key: '0b0933ec68d70ec042c2896820b2fc8a44394886', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), h("div", { key: '668baa66a596cfffae88374648d99e3ab57606fa', class: {
                 "bottom-buttons": true,
                 "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (h("ic-button", { key: '596dc8d6aa888c4a300276eb1e18f6ca4284dec6', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showPickerClearButton && (h("ic-button", { key: '8cce911a05aa3d009da3a9fe863939604bbe126a', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
+            } }, showPickerTodayButton && (h("ic-button", { key: 'cc8b644d97f9f11fccca0e3c2c4cb577863aa70b', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showPickerClearButton && (h("ic-button", { key: 'e4e1f2a4e67d7a4acb0d18765ba02ea6f57b5557', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
                 this.value === null ||
                 this.value === undefined }, "Clear"))))))));
     }
@@ -1038,7 +1060,7 @@ export class DatePicker {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The format in which the date will be displayed."
@@ -1058,7 +1080,7 @@ export class DatePicker {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the disabled state will be set."
@@ -1069,12 +1091,32 @@ export class DatePicker {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "emitDatePartChange": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, every individual input field completed will emit an icChange event."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "emit-date-part-change",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "disableDays": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
                     "original": "IcWeekDays[]",
-                    "resolved": "IcWeekDays[]",
+                    "resolved": "IcWeekDays[] | undefined",
                     "references": {
                         "IcWeekDays": {
                             "location": "import",
@@ -1098,7 +1140,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1118,7 +1160,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1138,7 +1180,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1158,7 +1200,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1178,7 +1220,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1198,7 +1240,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1237,7 +1279,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1257,7 +1299,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1276,7 +1318,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1324,7 +1366,7 @@ export class DatePicker {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.\nThe value of this prop is ignored if `disableFuture` is set to `true`."
@@ -1349,7 +1391,7 @@ export class DatePicker {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.\nThe value of this prop is ignored if `disablePast` is set to `true`."
@@ -1365,7 +1407,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1409,7 +1451,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1429,7 +1471,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1449,7 +1491,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1469,7 +1511,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1489,7 +1531,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -1525,7 +1567,7 @@ export class DatePicker {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The first day of the week. `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
@@ -1541,7 +1583,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -1567,7 +1609,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "IcInformationStatusOrEmpty",
-                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\" | undefined",
                     "references": {
                         "IcInformationStatusOrEmpty": {
                             "location": "import",
@@ -1593,7 +1635,7 @@ export class DatePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1613,7 +1655,7 @@ export class DatePicker {
                 "mutable": true,
                 "complexType": {
                     "original": "string | Date | null | undefined",
-                    "resolved": "Date | string",
+                    "resolved": "Date | null | string | undefined",
                     "references": {
                         "Date": {
                             "location": "global",