@ionic/core 7.3.1-dev.11692800544.15c6d007 → 7.3.1-dev.11693509285.1e34124a

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

@@ -33,6 +33,11 @@ import { getCalendarDayState, getHighlightStyles, isDayDisabled, isMonthDisabled
  *
  * @part month-year-button - The button that opens the month/year picker when
  * using a grid style layout.
+ *
+ * @part calendar-day - The individual buttons that display a day inside of the datetime
+ * calendar.
+ * @part calendar-day active - The currently selected calendar day.
+ * @part calendar-day today - The calendar day that contains the current day.
  */
 export class Datetime {
   constructor() {
@@ -241,7 +246,7 @@ export class Datetime {
       /**
        * Get the number of padding days so
        * we know how much to offset our next selector by
-       * to grab the correct calenday-day element.
+       * to grab the correct calendar-day element.
        */
       const padding = currentMonth.querySelectorAll('.calendar-day-padding');
       const { day } = this.workingParts;
@@ -252,7 +257,7 @@ export class Datetime {
        * Get the calendar day element
        * and focus it.
        */
-      const dayEl = currentMonth.querySelector(`.calendar-day:nth-of-type(${padding.length + day})`);
+      const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${padding.length + day}) .calendar-day`);
       if (dayEl) {
         dayEl.focus();
       }
@@ -1274,14 +1279,29 @@ export class Datetime {
       if (highlightedDates !== undefined && !isActive && day !== null) {
         dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
       }
-      return (h("button", { tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isCalDayDisabled, class: {
+      let dateParts = undefined;
+      // Spacer elements should not get the CSS parts added for calendar days
+      if (day !== null) {
+        dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}`;
+      }
+      return (h("div", { class: "calendar-day-wrapper" }, h("button", {
+        // We need to use !important for the inline styles here because
+        // otherwise the CSS shadow parts will override these styles.
+        // See https://github.com/WICG/webcomponents/issues/847
+        // Both the CSS shadow parts and highlightedDates styles are
+        // provided by the developer, but highlightedDates styles should
+        // always take priority.
+        ref: (el) => {
+          if (el && dateStyle) {
+            el.style.setProperty('color', `${dateStyle.textColor}`, 'important');
+            el.style.setProperty('background-color', `${dateStyle.backgroundColor}`, 'important');
+          }
+        }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isCalDayDisabled, class: {
           'calendar-day-padding': isCalendarPadding,
           'calendar-day': true,
           'calendar-day-active': isActive,
           'calendar-day-today': isToday,
-        }, style: dateStyle && {
-          color: dateStyle.textColor,
-        }, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
+        }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
           if (isCalendarPadding) {
             return;
           }
@@ -1301,9 +1321,8 @@ export class Datetime {
               day,
               year }));
           }
-        } }, h("div", { class: "calendar-day-highlight", style: {
-          backgroundColor: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.backgroundColor,
-        } }), text));
+        }
+      }, text)));
     }))));
   }
   renderCalendarBody() {

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

@@ -281,6 +281,8 @@ ion-picker-column-internal {
 }
 
 :host .calendar-body .calendar-month {
+  display: flex;
+  flex-flow: column;
   /**
    * Swiping should snap to at
    * most one month at a time.
@@ -314,11 +316,21 @@ ion-picker-column-internal {
   grid-template-columns: repeat(7, 1fr);
 }
 
+:host .calendar-day-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+}
+
 /**
  * Center the day text vertically
  * and horizontally within its grid cell.
  */
 :host .calendar-day {
+  border-radius: 50%;
   -webkit-padding-start: 0px;
   padding-inline-start: 0px;
   -webkit-padding-end: 0px;
@@ -350,20 +362,6 @@ ion-picker-column-internal {
   opacity: 0.4;
 }
 
-.calendar-day-highlight {
-  border-radius: 32px;
-  -webkit-padding-start: 4px;
-  padding-inline-start: 4px;
-  -webkit-padding-end: 4px;
-  padding-inline-end: 4px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  position: absolute;
-  width: 32px;
-  height: 32px;
-  z-index: -1;
-}
-
 :host .datetime-time {
   display: flex;
   justify-content: space-between;
@@ -480,16 +478,13 @@ ion-picker-column-internal {
 }
 
 :host .calendar-day {
-  -webkit-padding-start: 0px;
-  padding-inline-start: 0px;
-  -webkit-padding-end: 0;
-  padding-inline-end: 0;
-  padding-top: 13px;
-  padding-bottom: 13px;
+  width: 42px;
+  min-width: 42px;
+  height: 42px;
   font-size: 14px;
 }
 
-.calendar-day:focus .calendar-day-highlight {
+.calendar-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);
 }
@@ -499,11 +494,8 @@ ion-picker-column-internal {
  * should have ion-color for text color.
  */
 :host .calendar-day.calendar-day-today {
-  color: var(--ion-color-base);
-}
-
-.calendar-day.calendar-day-today .calendar-day-highlight {
   border: 1px solid var(--ion-color-base);
+  color: var(--ion-color-base);
 }
 
 /**
@@ -515,7 +507,7 @@ ion-picker-column-internal {
   color: var(--ion-color-contrast);
 }
 
-.calendar-day.calendar-day-active .calendar-day-highlight {
+.calendar-day.calendar-day-active {
   border: 1px solid var(--ion-color-base);
   background: var(--ion-color-base);
 }

package/dist/collection/components/datetime/test/color/datetime.e2e.js

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: color'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/datetime/test/color', config);
-      const datetime = page.locator('ion-datetime');
+      const datetime = page.locator('#color-datetime');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-color`));
       await page.evaluate(() => document.body.classList.toggle('dark'));
       await page.waitForChanges();

package/dist/collection/components/datetime/test/custom/datetime.e2e.js

@@ -20,7 +20,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-month-year`));
     });
     test('should allow styling time picker in grid style datetimes', async ({ page }) => {
-      const timeButton = page.locator('ion-datetime .time-body');
+      const timeButton = page.locator('#custom-grid .time-body');
       const popover = page.locator('.popover-viewport');
       const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
       await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button`));
@@ -29,5 +29,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(popover).toHaveScreenshot(screenshot(`datetime-custom-time-picker`));
       await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button-active`));
     });
+    test('should allow styling calendar days in grid style datetimes', async ({ page }) => {
+      const datetime = page.locator('#custom-calendar-days');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
+    });
   });
 });

package/dist/collection/utils/slot-mutation-controller.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { win } from "./browser/index";
-import { raf } from "helpers";
+import { raf } from "./helpers";
 /**
  * Used to update a scoped component that uses emulated slots. This fires when
  * content is passed into the slot or when the content inside of a slot changes.