voyager-ionic-core 8.8.12 → 9.0.1

package/dist/collection/components/datetime/datetime.js

@@ -9,6 +9,7 @@ import { FOCUS_TRAP_DISABLE_CLASS } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from "ionicons/icons";
+import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from "./utils/comparison";
 import { generateMonths, getDaysOfMonth, getDaysOfWeek, getToday, getMonthColumnData, getDayColumnData, getYearColumnData, getTimeColumnsData, getCombinedDateColumnData, } from "./utils/data";
@@ -59,6 +60,10 @@ export class Datetime {
          * Set true only by `visibleCallback`. Lets `hiddenCallback` ignore the
          * synthetic "not intersecting" entry IntersectionObserver fires on
          * `observe()` when the host mounts offscreen.
+         *
+         * Don't reset this in `disconnectedCallback`. Overlays disconnect and
+         * reconnect the host without re-creating the observers, so a reset there
+         * makes `hiddenCallback` miss the dismissal.
          */
         this.hasBeenIntersecting = false;
         this.prevPresentation = null;
@@ -74,12 +79,6 @@ export class Datetime {
             isAdjacentDay: false,
         };
         this.isTimePopoverOpen = false;
-        /**
-         * The color to use from your application's color palette.
-         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -218,9 +217,8 @@ export class Datetime {
          * is selected.
          */
         this.getActivePartsWithFallback = () => {
-            var _a;
             const { defaultParts } = this;
-            return (_a = this.getActivePart()) !== null && _a !== void 0 ? _a : defaultParts;
+            return this.getActivePart() ?? defaultParts;
         };
         this.getActivePart = () => {
             const { activeParts } = this;
@@ -233,7 +231,9 @@ export class Datetime {
             }
         };
         this.setWorkingParts = (parts) => {
-            this.workingParts = Object.assign({}, parts);
+            this.workingParts = {
+                ...parts,
+            };
         };
         this.setActiveParts = (parts, removeDate = false) => {
             /** if the datetime component is in readonly mode,
@@ -266,7 +266,9 @@ export class Datetime {
                 }
             }
             else {
-                this.activeParts = Object.assign({}, validatedParts);
+                this.activeParts = {
+                    ...validatedParts,
+                };
             }
             const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
             if (hasSlottedButtons || this.showDefaultButtons) {
@@ -292,7 +294,6 @@ export class Datetime {
              * Tab should jump between bodies of selectable content.
              */
             const checkCalendarBodyFocus = (ev) => {
-                var _a;
                 const record = ev[0];
                 /**
                  * If calendar body was already focused
@@ -300,7 +301,7 @@ export class Datetime {
                  * if not currently focused, we should not re-focus
                  * the inner day.
                  */
-                if (((_a = record.oldValue) === null || _a === void 0 ? void 0 : _a.includes('ion-focused')) || !calendarBodyRef.classList.contains('ion-focused')) {
+                if (record.oldValue?.includes('ion-focused') || !calendarBodyRef.classList.contains('ion-focused')) {
                     return;
                 }
                 this.focusWorkingDay(currentMonth);
@@ -308,7 +309,7 @@ export class Datetime {
             const mo = new MutationObserver(checkCalendarBodyFocus);
             mo.observe(calendarBodyRef, { attributeFilter: ['class'], attributeOldValue: true });
             this.destroyKeyboardMO = () => {
-                mo === null || mo === void 0 ? void 0 : mo.disconnect();
+                mo?.disconnect();
             };
             /**
              * We must use keydown not keyup as we want
@@ -370,7 +371,10 @@ export class Datetime {
                 if (isDayDisabled(partsToFocus, this.minParts, this.maxParts)) {
                     return;
                 }
-                this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), partsToFocus));
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    ...partsToFocus,
+                });
                 /**
                  * Give view a chance to re-render
                  * then move focus to the new working day
@@ -521,8 +525,8 @@ export class Datetime {
                         return;
                     const { month, day, year } = newDate;
                     if (isMonthDisabled({ month, year, day: null }, {
-                        minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
-                        maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+                        minParts: { ...this.minParts, day: null },
+                        maxParts: { ...this.maxParts, day: null },
                     })) {
                         return;
                     }
@@ -542,8 +546,12 @@ export class Datetime {
                      * if we did not do this.
                      */
                     writeTask(() => {
-                        var _a;
-                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
+                        this.setWorkingParts({
+                            ...this.workingParts,
+                            month,
+                            day: day,
+                            year,
+                        });
                         calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
                         calendarBodyRef.style.removeProperty('overflow');
                         if (this.resolveForceDateScrolling) {
@@ -551,7 +559,7 @@ export class Datetime {
                         }
                         const activeEl = this.el.shadowRoot.activeElement;
                         if (activeEl && activeEl.classList.contains('calendar-day')) {
-                            (_a = activeEl.closest('.calendar-body')) === null || _a === void 0 ? void 0 : _a.focus();
+                            activeEl.closest('.calendar-body')?.focus();
                         }
                     });
                 };
@@ -780,10 +788,11 @@ export class Datetime {
                 return;
             }
             const left = nextMonth.offsetWidth * 2;
+            const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
             calendarBodyRef.scrollTo({
                 top: 0,
                 left: left * (isRTL(this.el) ? -1 : 1),
-                behavior: 'smooth',
+                behavior: scrollMode,
             });
         };
         this.prevMonth = () => {
@@ -796,10 +805,11 @@ export class Datetime {
                 return;
             }
             const left = prevMonth.offsetWidth * 2;
+            const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
             calendarBodyRef.scrollTo({
                 top: 0,
                 left: left * (isRTL(this.el) ? 1 : -1),
-                behavior: 'smooth',
+                behavior: scrollMode,
             });
         };
         this.toggleMonthAndYearView = () => {
@@ -914,6 +924,16 @@ export class Datetime {
             this.closeParentOverlay(CANCEL_ROLE);
         }
     }
+    /**
+     * Returns the default parts the datetime falls back to when no value is set:
+     * today's date and time snapped to the closest value allowed by the
+     * component's constraints (`min`, `max`, and the `*Values` props).
+     *
+     * @internal
+     */
+    async getDefaultPart() {
+        return this.defaultParts;
+    }
     get isCalendarPicker() {
         const { presentation } = this;
         return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
@@ -930,7 +950,6 @@ export class Datetime {
             this.clearFocusVisible = undefined;
         }
         this.loadTimeoutCleanup();
-        this.hasBeenIntersecting = false;
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -960,7 +979,7 @@ export class Datetime {
          * could cause the datetime to start at a visibility of 0, erroneously
          * triggering the `hiddenIO` observer below.
          */
-        raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
+        raf(() => visibleIO?.observe(intersectionTrackerRef));
         /**
          * TODO(FW-6931): Remove this fallback upon solving the root cause
          * Fallback: If IntersectionObserver never reports that the
@@ -1006,7 +1025,7 @@ export class Datetime {
             });
         };
         const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
-        raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
+        raf(() => hiddenIO?.observe(intersectionTrackerRef));
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1187,7 +1206,6 @@ export class Datetime {
     }
     renderCombinedDatePickerColumn() {
         const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
-        const activePart = this.getActivePartsWithFallback();
         /**
          * By default, generate a range of 3 months:
          * Previous month, current month, and next month
@@ -1227,7 +1245,10 @@ export class Datetime {
                 catch (e) {
                     printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
-                return Object.assign(Object.assign({}, itemObject), { disabled });
+                return {
+                    ...itemObject,
+                    disabled,
+                };
             });
         }
         /**
@@ -1240,10 +1261,18 @@ export class Datetime {
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 const { value } = ev.detail;
                 const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    ...findPart,
+                });
+                this.setActiveParts({
+                    ...activePart,
+                    ...findPart,
+                });
                 ev.stopPropagation();
-            } }, items.map((item) => (h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
+            } }, items.map((item) => (h("ion-picker-column-option", { color: this.color, part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
     }
     renderIndividualDatePickerColumns(forcePresentation) {
         const { workingParts, isDateEnabled } = this;
@@ -1276,7 +1305,10 @@ export class Datetime {
                 catch (e) {
                     printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
-                return Object.assign(Object.assign({}, dayObject), { disabled });
+                return {
+                    ...dayObject,
+                    disabled,
+                };
             });
         }
         const shouldRenderYears = forcePresentation !== 'month' && forcePresentation !== 'time';
@@ -1305,42 +1337,68 @@ export class Datetime {
         return renderArray;
     }
     renderDayPickerColumn(days) {
-        var _a;
         if (days.length === 0) {
             return [];
         }
         const { disabled, workingParts } = this;
-        const activePart = this.getActivePartsWithFallback();
-        const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
+        const pickerColumnValue = (workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined;
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    day: ev.detail.value,
+                });
+                this.setActiveParts({
+                    ...activePart,
+                    day: ev.detail.value,
+                });
                 ev.stopPropagation();
-            } }, days.map((day) => (h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
+            } }, days.map((day) => (h("ion-picker-column-option", { color: this.color, part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
     }
     renderMonthPickerColumn(months) {
         if (months.length === 0) {
             return [];
         }
         const { disabled, workingParts } = this;
-        const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    month: ev.detail.value,
+                });
+                // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
+                if (!this.multiple) {
+                    this.setActiveParts({
+                        ...activePart,
+                        month: ev.detail.value,
+                    });
+                }
                 ev.stopPropagation();
-            } }, months.map((month) => (h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
+            } }, months.map((month) => (h("ion-picker-column-option", { color: this.color, part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
     }
     renderYearPickerColumn(years) {
         if (years.length === 0) {
             return [];
         }
         const { disabled, workingParts } = this;
-        const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    year: ev.detail.value,
+                });
+                // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
+                if (!this.multiple) {
+                    this.setActiveParts({
+                        ...activePart,
+                        year: ev.detail.value,
+                    });
+                }
                 ev.stopPropagation();
-            } }, years.map((year) => (h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
+            } }, years.map((year) => (h("ion-picker-column-option", { color: this.color, part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
     }
     renderTimePickerColumns(forcePresentation) {
         if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -1365,40 +1423,64 @@ export class Datetime {
         ];
     }
     renderHourPickerColumn(hoursData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    hour: ev.detail.value,
+                });
+                this.setActiveParts({
+                    ...this.getActivePartsWithFallback(),
+                    hour: ev.detail.value,
+                });
                 ev.stopPropagation();
-            } }, hoursData.map((hour) => (h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
+            } }, hoursData.map((hour) => (h("ion-picker-column-option", { color: this.color, part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
     }
     renderMinutePickerColumn(minutesData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    minute: ev.detail.value,
+                });
+                this.setActiveParts({
+                    ...this.getActivePartsWithFallback(),
+                    minute: ev.detail.value,
+                });
                 ev.stopPropagation();
-            } }, minutesData.map((minute) => (h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
+            } }, minutesData.map((minute) => (h("ion-picker-column-option", { color: this.color, part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (dayPeriodData.length === 0) {
             return [];
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
-                const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
-                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
+                // Read live so parts a sibling column just committed are included.
+                const currentParts = this.workingParts;
+                const hour = calculateHourFromAMPM(currentParts, ev.detail.value);
+                this.setWorkingParts({
+                    ...currentParts,
+                    ampm: ev.detail.value,
+                    hour,
+                });
+                this.setActiveParts({
+                    ...this.getActivePartsWithFallback(),
+                    ampm: ev.detail.value,
+                    hour,
+                });
                 ev.stopPropagation();
-            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
+            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { color: this.color, part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
     }
     renderWheelView(forcePresentation) {
         const { locale } = this;
@@ -1442,8 +1524,8 @@ export class Datetime {
                 // The day is not used when checking if a month is disabled.
                 // Users should be able to access the min or max month, even if the
                 // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
-                minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
-                maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+                minParts: { ...this.minParts, day: null },
+                maxParts: { ...this.maxParts, day: null },
             });
         // The working month should never have swipe disabled.
         // Otherwise the CSS scroll snap will not work and the user
@@ -1552,18 +1634,24 @@ export class Datetime {
                     if (isAdjacentDay) {
                         // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
                         this.el.blur();
-                        this.activeParts = Object.assign(Object.assign({}, activePart), referenceParts);
+                        this.activeParts = { ...activePart, ...referenceParts };
                         this.animateToDate(referenceParts);
                         this.confirm();
                     }
                     else {
-                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), referenceParts));
+                        this.setWorkingParts({
+                            ...this.workingParts,
+                            ...referenceParts,
+                        });
                         // Multiple only needs date info so we can wipe out other fields like time.
                         if (multiple) {
                             this.setActiveParts(referenceParts, isActive);
                         }
                         else {
-                            this.setActiveParts(Object.assign(Object.assign({}, activePart), referenceParts));
+                            this.setActiveParts({
+                                ...activePart,
+                                ...referenceParts,
+                            });
                         }
                     }
                 }
@@ -1606,7 +1694,7 @@ export class Datetime {
                         await popoverRef.onWillDismiss();
                         this.isTimePopoverOpen = false;
                     }
-                } }, getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
+                } }, getLocalizedTime(locale, activePart, computedHourCycle, formatOptions?.time)),
             h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
                     /**
                      * Intersection Observers do not consistently fire between Blink and Webkit
@@ -1629,7 +1717,6 @@ export class Datetime {
         ];
     }
     getHeaderSelectedDateText() {
-        var _a;
         const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
         const isArray = Array.isArray(activeParts);
         let headerText;
@@ -1646,7 +1733,7 @@ export class Datetime {
         }
         else {
             // for exactly 1 day selected (multiple set or not), show a formatted version of that
-            headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { weekday: 'short', month: 'short', day: 'numeric' });
+            headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), formatOptions?.date ?? { weekday: 'short', month: 'short', day: 'numeric' });
         }
         return headerText;
     }
@@ -1735,17 +1822,19 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '323c8c2327088f00934b8c93c3306538cb9b5677', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
-                [mode]: true,
-                ['datetime-readonly']: readonly,
-                ['datetime-disabled']: disabled,
-                'show-month-and-year': shouldShowMonthAndYear,
-                'month-year-picker-open': monthYearPickerOpen,
-                [`datetime-presentation-${presentation}`]: true,
-                [`datetime-size-${size}`]: true,
-                [`datetime-prefer-wheel`]: hasWheelVariant,
-                [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '1e0855c8909bc3f1e48a21ad68159fa782060691', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+        return (h(Host, { key: '4e0b529a70924b065bcc6191e08550428b5a52a0', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
+                ...createColorClasses(color, {
+                    [mode]: true,
+                    ['datetime-readonly']: readonly,
+                    ['datetime-disabled']: disabled,
+                    'show-month-and-year': shouldShowMonthAndYear,
+                    'month-year-picker-open': monthYearPickerOpen,
+                    [`datetime-presentation-${presentation}`]: true,
+                    [`datetime-size-${size}`]: true,
+                    [`datetime-prefer-wheel`]: hasWheelVariant,
+                    [`datetime-grid`]: isGridStyle,
+                }),
+            } }, h("div", { key: 'cc9d1b92f960984cb0466d0003a240ace67da243', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -1782,13 +1871,12 @@ export class Datetime {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
+                    "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, refer to [theming](/docs/theming/basics)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'primary'"
+                "attribute": "color"
             },
             "name": {
                 "type": "string",
@@ -2632,6 +2720,32 @@ export class Datetime {
                             "text": "closeOverlay If `true`, closes the parent overlay. Defaults to `false`."
                         }]
                 }
+            },
+            "getDefaultPart": {
+                "complexType": {
+                    "signature": "() => Promise<DatetimeParts>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DatetimeParts": {
+                            "location": "import",
+                            "path": "./datetime-interface",
+                            "id": "src/components/datetime/datetime-interface.ts::DatetimeParts",
+                            "referenceLocation": "DatetimeParts"
+                        }
+                    },
+                    "return": "Promise<DatetimeParts>"
+                },
+                "docs": {
+                    "text": "Returns the default parts the datetime falls back to when no value is set:\ntoday's date and time snapped to the closest value allowed by the\ncomponent's constraints (`min`, `max`, and the `*Values` props).",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }