@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/collection/components/datetime/datetime.md.css

@@ -218,6 +218,10 @@
   justify-content: space-between;
 }
 
+:host .datetime-action-buttons ion-button {
+  --color: var(--ion-color-primary, #0054e9);
+}
+
 /**
  * The confirm and clear buttons are grouped in a
  * container so that they appear on the end opposite
@@ -372,6 +376,11 @@
 }
 
 .calendar-day:not(.calendar-day-adjacent-day):focus {
+  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+  box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+}
+
+:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
   background: rgba(var(--ion-color-base-rgb), 0.2);
   box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
 }
@@ -416,6 +425,10 @@
 }
 
 :host .time-body-active {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .time-body-active {
   color: var(--ion-color-base);
 }
 
@@ -424,6 +437,10 @@
 }
 
 :host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
   color: var(--ion-color-base);
 }
 
@@ -548,6 +565,10 @@ ion-picker {
  */
 :host {
   --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
+  --title-color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) {
   --title-color: var(--ion-color-contrast);
 }
 
@@ -558,10 +579,14 @@ ion-picker {
   padding-inline-end: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
-  background: var(--ion-color-base);
+  background: var(--ion-color-primary, #0054e9);
   color: var(--title-color);
 }
 
+:host(.ion-color) .datetime-header {
+  background: var(--ion-color-base);
+}
+
 :host .datetime-header .datetime-title {
   font-size: 0.75rem;
   text-transform: uppercase;
@@ -643,6 +668,11 @@ ion-picker {
  * should have ion-color for text color.
  */
 :host .calendar-day.calendar-day-today {
+  border: 1px solid var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today {
   border: 1px solid var(--ion-color-base);
   color: var(--ion-color-base);
 }
@@ -654,11 +684,22 @@ ion-picker {
  */
 :host .calendar-day.calendar-day-active,
 :host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
+  color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
   color: var(--ion-color-contrast);
 }
 
 .calendar-day.calendar-day-active,
 .calendar-day.calendar-day-active:focus {
+  border: 1px solid var(--ion-color-primary, #0054e9);
+  background: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-active:focus {
   border: 1px solid var(--ion-color-base);
   background: var(--ion-color-base);
 }

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

@@ -292,15 +292,15 @@ export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthVa
     const months = [];
     if (monthValues !== undefined) {
         let processedMonths = monthValues;
-        if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.month) !== undefined) {
+        if (maxParts?.month !== undefined) {
             processedMonths = processedMonths.filter((month) => month <= maxParts.month);
         }
-        if ((minParts === null || minParts === void 0 ? void 0 : minParts.month) !== undefined) {
+        if (minParts?.month !== undefined) {
             processedMonths = processedMonths.filter((month) => month >= minParts.month);
         }
         processedMonths.forEach((processedMonth) => {
             const date = new Date(`${processedMonth}/1/${year} GMT+0000`);
-            const monthString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
+            const monthString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
             months.push({ text: monthString, value: processedMonth });
         });
     }
@@ -333,7 +333,7 @@ export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthVa
              * new Date('1/1/1992 GMT+0000').toUTCString() // "Wed, 01 Jan 1992 00:00:00 GMT"
              */
             const date = new Date(`${i}/1/${year} GMT+0000`);
-            const monthString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
+            const monthString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
             months.push({ text: monthString, value: i });
         }
     }
@@ -362,10 +362,10 @@ export const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues
      * Otherwise, fallback to the max/min days in a month.
      */
     const numDaysInMonth = getNumDaysInMonth(month, year);
-    const maxDay = (maxParts === null || maxParts === void 0 ? void 0 : maxParts.day) !== null && (maxParts === null || maxParts === void 0 ? void 0 : maxParts.day) !== undefined && maxParts.year === year && maxParts.month === month
+    const maxDay = maxParts?.day !== null && maxParts?.day !== undefined && maxParts.year === year && maxParts.month === month
         ? maxParts.day
         : numDaysInMonth;
-    const minDay = (minParts === null || minParts === void 0 ? void 0 : minParts.day) !== null && (minParts === null || minParts === void 0 ? void 0 : minParts.day) !== undefined && minParts.year === year && minParts.month === month
+    const minDay = minParts?.day !== null && minParts?.day !== undefined && minParts.year === year && minParts.month === month
         ? minParts.day
         : 1;
     if (dayValues !== undefined) {
@@ -373,35 +373,34 @@ export const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues
         processedDays = processedDays.filter((day) => day >= minDay && day <= maxDay);
         processedDays.forEach((processedDay) => {
             const date = new Date(`${month}/${processedDay}/${year} GMT+0000`);
-            const dayString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
+            const dayString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
             days.push({ text: dayString, value: processedDay });
         });
     }
     else {
         for (let i = minDay; i <= maxDay; i++) {
             const date = new Date(`${month}/${i}/${year} GMT+0000`);
-            const dayString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
+            const dayString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
             days.push({ text: dayString, value: i });
         }
     }
     return days;
 };
 export const getYearColumnData = (locale, refParts, minParts, maxParts, yearValues) => {
-    var _a, _b;
     let processedYears = [];
     if (yearValues !== undefined) {
         processedYears = yearValues;
-        if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.year) !== undefined) {
+        if (maxParts?.year !== undefined) {
             processedYears = processedYears.filter((year) => year <= maxParts.year);
         }
-        if ((minParts === null || minParts === void 0 ? void 0 : minParts.year) !== undefined) {
+        if (minParts?.year !== undefined) {
             processedYears = processedYears.filter((year) => year >= minParts.year);
         }
     }
     else {
         const { year } = refParts;
-        const maxYear = (_a = maxParts === null || maxParts === void 0 ? void 0 : maxParts.year) !== null && _a !== void 0 ? _a : year;
-        const minYear = (_b = minParts === null || minParts === void 0 ? void 0 : minParts.year) !== null && _b !== void 0 ? _b : year - 100;
+        const maxYear = maxParts?.year ?? year;
+        const minYear = minParts?.year ?? year - 100;
         for (let i = minYear; i <= maxYear; i++) {
             processedYears.push(i);
         }
@@ -459,7 +458,7 @@ export const getCombinedDateColumnData = (locale, todayParts, minParts, maxParts
         const dateParts = [];
         const dateColumnItems = [];
         monthDays.forEach((dayObject) => {
-            const isToday = isSameDay(Object.assign(Object.assign({}, referenceMonth), { day: dayObject.value }), todayParts);
+            const isToday = isSameDay({ ...referenceMonth, day: dayObject.value }, todayParts);
             /**
              * Today's date should read as "Today" (localized)
              * not the actual date string

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

@@ -15,7 +15,8 @@ const getFormattedDayPeriod = (dayPeriod) => {
  * confusion.
  */
 export const stripTimeZone = (formatOptions) => {
-    return Object.assign(Object.assign({}, formatOptions), {
+    return {
+        ...formatOptions,
         /**
          * Setting the time zone to UTC ensures that the value shown is always the
          * same as what was selected and safeguards against older Safari bugs with
@@ -25,8 +26,8 @@ export const stripTimeZone = (formatOptions) => {
         /**
          * We do not want to display the time zone name
          */
-        timeZoneName: undefined
-    });
+        timeZoneName: undefined,
+    };
 };
 export const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: 'numeric', minute: 'numeric' }) => {
     const timeParts = {
@@ -36,13 +37,20 @@ export const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = {
     if (timeParts.hour === undefined || timeParts.minute === undefined) {
         return 'Invalid Time';
     }
-    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, stripTimeZone(formatOptions)), {
+    return new Intl.DateTimeFormat(locale, {
+        ...stripTimeZone(formatOptions),
         /**
          * We use hourCycle here instead of hour12 due to:
          * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
          */
-        hourCycle
-    })).format(new Date(convertDataToISO(Object.assign({
+        hourCycle,
+        /**
+         * Setting Z at the end indicates that this
+         * date string is in the UTC time zone. This
+         * prevents new Date from adding the time zone
+         * offset when getting the ISO string.
+         */
+    }).format(new Date(convertDataToISO({
         /**
          * JS uses a simplified ISO 8601 format which allows for
          * date-only formats and date-time formats, but not
@@ -54,8 +62,11 @@ export const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = {
          * values, so passing these date values should have no impact
          * on the time output.
          */
-        year: 2023, day: 1, month: 1
-    }, timeParts)) + 'Z'));
+        year: 2023,
+        day: 1,
+        month: 1,
+        ...timeParts,
+    }) + 'Z'));
 };
 /**
  * Adds padding to a time value so
@@ -164,7 +175,6 @@ export const getYear = (locale, refParts) => {
  * with a normalized time.
  */
 export const getNormalizedDate = (refParts) => {
-    var _a, _b, _c;
     const timeString = refParts.hour !== undefined && refParts.minute !== undefined ? ` ${refParts.hour}:${refParts.minute}` : '';
     /**
      * We use / notation here for the date
@@ -176,7 +186,7 @@ export const getNormalizedDate = (refParts) => {
      * account for this and still return a valid date. However,
      * this is not a consistent behavior across all browsers.
      */
-    return new Date(`${(_a = refParts.month) !== null && _a !== void 0 ? _a : 1}/${(_b = refParts.day) !== null && _b !== void 0 ? _b : 1}/${(_c = refParts.year) !== null && _c !== void 0 ? _c : 2023}${timeString} GMT+0000`);
+    return new Date(`${refParts.month ?? 1}/${refParts.day ?? 1}/${refParts.year ?? 2023}${timeString} GMT+0000`);
 };
 /**
  * Given a locale, DatetimeParts, and options
@@ -207,7 +217,7 @@ export const getLocalizedDateTimeParts = (locale, refParts, options) => {
  * with Intl.DateTimeFormat.
  */
 const getDateTimeFormat = (locale, options) => {
-    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, options), { timeZone: 'UTC' }));
+    return new Intl.DateTimeFormat(locale, { ...options, timeZone: 'UTC' });
 };
 /**
  * Gets a localized version of "Today"

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

@@ -282,7 +282,7 @@ export const calculateHourFromAMPM = (currentParts, newAMPM) => {
  */
 export const validateParts = (parts, minParts, maxParts) => {
     const { month, day, year } = parts;
-    const partsCopy = clampDate(Object.assign({}, parts), minParts, maxParts);
+    const partsCopy = clampDate({ ...parts }, minParts, maxParts);
     const numDays = getNumDaysInMonth(month, year);
     /**
      * If the max number of days
@@ -358,7 +358,7 @@ export const validateParts = (parts, minParts, maxParts) => {
  */
 export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValues, hourValues, minuteValues, minParts, maxParts, }) => {
     const { hour, minute, day, month, year } = refParts;
-    const copyParts = Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined });
+    const copyParts = { ...refParts, dayOfWeek: undefined };
     if (yearValues !== undefined) {
         // Filters out years that are out of the min/max bounds
         const filteredYears = yearValues.filter((year) => {
@@ -389,10 +389,10 @@ export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValu
     if (day !== null && dayValues !== undefined) {
         // Filters out days that are out of the min/max bounds
         const filteredDays = dayValues.filter((day) => {
-            if (minParts !== undefined && isBefore(Object.assign(Object.assign({}, copyParts), { day }), minParts)) {
+            if (minParts !== undefined && isBefore({ ...copyParts, day }, minParts)) {
                 return false;
             }
-            if (maxParts !== undefined && isAfter(Object.assign(Object.assign({}, copyParts), { day }), maxParts)) {
+            if (maxParts !== undefined && isAfter({ ...copyParts, day }, maxParts)) {
                 return false;
             }
             return true;
@@ -402,10 +402,10 @@ export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValu
     if (hour !== undefined && hourValues !== undefined) {
         // Filters out hours that are out of the min/max bounds
         const filteredHours = hourValues.filter((hour) => {
-            if ((minParts === null || minParts === void 0 ? void 0 : minParts.hour) !== undefined && isSameDay(copyParts, minParts) && hour < minParts.hour) {
+            if (minParts?.hour !== undefined && isSameDay(copyParts, minParts) && hour < minParts.hour) {
                 return false;
             }
-            if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.hour) !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
+            if (maxParts?.hour !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
                 return false;
             }
             return true;
@@ -416,13 +416,13 @@ export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValu
     if (minute !== undefined && minuteValues !== undefined) {
         // Filters out minutes that are out of the min/max bounds
         const filteredMinutes = minuteValues.filter((minute) => {
-            if ((minParts === null || minParts === void 0 ? void 0 : minParts.minute) !== undefined &&
+            if (minParts?.minute !== undefined &&
                 isSameDay(copyParts, minParts) &&
                 copyParts.hour === minParts.hour &&
                 minute < minParts.minute) {
                 return false;
             }
-            if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.minute) !== undefined &&
+            if (maxParts?.minute !== undefined &&
                 isSameDay(copyParts, maxParts) &&
                 copyParts.hour === maxParts.hour &&
                 minute > maxParts.minute) {

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

@@ -142,19 +142,19 @@ export const parseMaxParts = (max, todayParts) => {
      * so that the correct initial value can be selected. As a result,
      * we need to fill in any omitted data with the min or max values.
      */
-    const yearValue = year !== null && year !== void 0 ? year : todayParts.year;
-    const monthValue = month !== null && month !== void 0 ? month : 12;
+    const yearValue = year ?? todayParts.year;
+    const monthValue = month ?? 12;
     return {
         month: monthValue,
-        day: day !== null && day !== void 0 ? day : getNumDaysInMonth(monthValue, yearValue),
+        day: day ?? getNumDaysInMonth(monthValue, yearValue),
         /**
          * Passing in "HH:mm" is a valid ISO-8601
          * string, so we just default to the current year
          * in this case.
          */
         year: yearValue,
-        hour: hour !== null && hour !== void 0 ? hour : 23,
-        minute: minute !== null && minute !== void 0 ? minute : 59,
+        hour: hour ?? 23,
+        minute: minute ?? 59,
     };
 };
 /**
@@ -183,15 +183,15 @@ export const parseMinParts = (min, todayParts) => {
      * we need to fill in any omitted data with the min or max values.
      */
     return {
-        month: month !== null && month !== void 0 ? month : 1,
-        day: day !== null && day !== void 0 ? day : 1,
+        month: month ?? 1,
+        day: day ?? 1,
         /**
          * Passing in "HH:mm" is a valid ISO-8601
          * string, so we just default to the current year
          * in this case.
          */
-        year: year !== null && year !== void 0 ? year : todayParts.year,
-        hour: hour !== null && hour !== void 0 ? hour : 0,
-        minute: minute !== null && minute !== void 0 ? minute : 0,
+        year: year ?? todayParts.year,
+        hour: hour ?? 0,
+        minute: minute ?? 0,
     };
 };

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

@@ -125,7 +125,10 @@ export const isMonthDisabled = (refParts, { minParts, maxParts, }) => {
  * previous navigation button is disabled.
  */
 export const isPrevMonthDisabled = (refParts, minParts, maxParts) => {
-    const prevMonth = Object.assign(Object.assign({}, getPreviousMonth(refParts)), { day: null });
+    const prevMonth = {
+        ...getPreviousMonth(refParts),
+        day: null,
+    };
     return isMonthDisabled(prevMonth, {
         minParts,
         maxParts,
@@ -136,7 +139,10 @@ export const isPrevMonthDisabled = (refParts, minParts, maxParts) => {
  * determine if the next navigation button is disabled.
  */
 export const isNextMonthDisabled = (refParts, maxParts) => {
-    const nextMonth = Object.assign(Object.assign({}, getNextMonth(refParts)), { day: null });
+    const nextMonth = {
+        ...getNextMonth(refParts),
+        day: null,
+    };
     return isMonthDisabled(nextMonth, {
         maxParts,
     });

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

@@ -8,11 +8,10 @@ import { printIonWarning } from "../../../utils/logging/index";
  * confusion.
  */
 export const warnIfTimeZoneProvided = (el, formatOptions) => {
-    var _a, _b, _c, _d;
-    if (((_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _a === void 0 ? void 0 : _a.timeZone) ||
-        ((_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _b === void 0 ? void 0 : _b.timeZoneName) ||
-        ((_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _c === void 0 ? void 0 : _c.timeZone) ||
-        ((_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _d === void 0 ? void 0 : _d.timeZoneName)) {
+    if (formatOptions?.date?.timeZone ||
+        formatOptions?.date?.timeZoneName ||
+        formatOptions?.time?.timeZone ||
+        formatOptions?.time?.timeZoneName) {
         printIonWarning('[ion-datetime] - "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
     }
 };

package/dist/collection/components/datetime-button/datetime-button.ios.css

@@ -82,6 +82,11 @@
 
 :host(.time-active) #time-button,
 :host(.date-active) #date-button {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.time-active) #time-button,
+:host(.ion-color.date-active) #date-button {
   color: var(--ion-color-base);
 }