@ionic/core 7.5.3-nightly.20231031 → 7.5.3

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

@@ -94,6 +94,13 @@ export class Datetime {
       this.workingParts = Object.assign({}, parts);
     };
     this.setActiveParts = (parts, removeDate = false) => {
+      /** if the datetime component is in readonly mode,
+       * allow browsing of the calendar without changing
+       * the set value
+       */
+      if (this.readonly) {
+        return;
+      }
       const { multiple, minParts, maxParts, activeParts } = this;
       /**
        * When setting the active parts, it is possible
@@ -914,7 +921,13 @@ export class Datetime {
    * are rendered independently of presentation.
    */
   renderFooter() {
-    const { showDefaultButtons, showClearButton } = this;
+    const { disabled, readonly, showDefaultButtons, showClearButton } = this;
+    /**
+     * The cancel, clear, and confirm buttons
+     * should not be interactive if the datetime
+     * is disabled or readonly.
+     */
+    const isButtonDisabled = disabled || readonly;
     const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
     if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
       return;
@@ -933,7 +946,7 @@ export class Datetime {
     return (h("div", { class: "datetime-footer" }, h("div", { class: "datetime-buttons" }, h("div", { class: {
         ['datetime-action-buttons']: true,
         ['has-clear-button']: this.showClearButton,
-      } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true) }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick() }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true) }, this.doneText)))))))));
+      } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText)))))))));
   }
   /**
    * Wheel picker render methods
@@ -1224,13 +1237,14 @@ export class Datetime {
    * Grid Render Methods
    */
   renderCalendarHeader(mode) {
+    const { disabled } = this;
     const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
     const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
-    const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
-    const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
+    const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
+    const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
     // don't use the inheritAttributes util because it removes dir from the host, and we still need that
     const hostDir = this.el.getAttribute('dir') || undefined;
-    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", onClick: () => {
+    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", disabled: disabled, onClick: () => {
         var _a;
         this.toggleMonthAndYearView();
         /**
@@ -1254,20 +1268,23 @@ export class Datetime {
     }))));
   }
   renderMonth(month, year) {
+    const { disabled, readonly } = this;
     const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
     const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month);
     const isCalMonthDisabled = !yearAllowed || !monthAllowed;
-    const swipeDisabled = isMonthDisabled({
-      month,
-      year,
-      day: null,
-    }, {
-      // 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 }),
-    });
+    const isDatetimeDisabled = disabled || readonly;
+    const swipeDisabled = disabled ||
+      isMonthDisabled({
+        month,
+        year,
+        day: null,
+      }, {
+        // 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 }),
+      });
     // The working month should never have swipe disabled.
     // Otherwise the CSS scroll snap will not work and the user
     // can free-scroll the calendar.
@@ -1282,9 +1299,9 @@ export class Datetime {
       const { el, highlightedDates, isDateEnabled, multiple } = this;
       const referenceParts = { month, day, year };
       const isCalendarPadding = day === null;
-      const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
+      const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, text, } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
       const dateIsoString = convertDataToISO(referenceParts);
-      let isCalDayDisabled = isCalMonthDisabled || disabled;
+      let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
       if (!isCalDayDisabled && isDateEnabled !== undefined) {
         try {
           /**
@@ -1298,6 +1315,13 @@ export class Datetime {
           printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e);
         }
       }
+      /**
+       * Some days are constrained through max & min or allowed dates
+       * and also disabled because the component is readonly or disabled.
+       * These need to be displayed differently.
+       */
+      const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
+      const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
       let dateStyle = undefined;
       /**
        * Custom highlight styles should not override the style for selected dates,
@@ -1324,10 +1348,11 @@ export class Datetime {
             el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
             el.style.setProperty('background-color', `${dateStyle ? 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: {
+        }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
           'calendar-day-padding': isCalendarPadding,
           'calendar-day': true,
           'calendar-day-active': isActive,
+          'calendar-day-constrained': isCalDayConstrained,
           'calendar-day-today': isToday,
         }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
           if (isCalendarPadding) {
@@ -1369,7 +1394,7 @@ export class Datetime {
     return h("slot", { name: "time-label" }, "Time");
   }
   renderTimeOverlay() {
-    const { hourCycle, isTimePopoverOpen, locale } = this;
+    const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
     const computedHourCycle = getHourCycle(locale, hourCycle);
     const activePart = this.getActivePartsWithFallback();
     return [
@@ -1377,7 +1402,7 @@ export class Datetime {
       h("button", { class: {
           'time-body': true,
           'time-body-active': isTimePopoverOpen,
-        }, part: `time-button${isTimePopoverOpen ? ' active' : ''}`, "aria-expanded": "false", "aria-haspopup": "true", onClick: async (ev) => {
+        }, part: `time-button${isTimePopoverOpen ? ' active' : ''}`, "aria-expanded": "false", "aria-haspopup": "true", disabled: disabled, onClick: async (ev) => {
           const { popoverRef } = this;
           if (popoverRef) {
             this.isTimePopoverOpen = true;
@@ -1617,7 +1642,7 @@ export class Datetime {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the datetime appears normal but is not interactive."
+          "text": "If `true`, the datetime appears normal but the selected date cannot be changed."
         },
         "attribute": "readonly",
         "reflect": false,

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

@@ -224,15 +224,35 @@ ion-picker-column-internal {
   display: none;
 }
 
-:host(.datetime-readonly),
 :host(.datetime-disabled) {
   pointer-events: none;
 }
-
-:host(.datetime-disabled) {
+:host(.datetime-disabled) .calendar-days-of-week,
+:host(.datetime-disabled) .datetime-time {
   opacity: 0.4;
 }
 
+:host(.datetime-readonly) {
+  pointer-events: none;
+  /**
+   * Allow user to navigate months
+   * while in readonly mode
+   */
+  /**
+   * Disabled buttons should have full opacity
+   * in readonly mode
+   */
+}
+:host(.datetime-readonly) .calendar-action-buttons,
+:host(.datetime-readonly) .calendar-body,
+:host(.datetime-readonly) .datetime-year {
+  pointer-events: initial;
+}
+:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),
+:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled] {
+  opacity: 1;
+}
+
 /**
  * Title should not wrap
  * to the next line and should

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

@@ -26,3 +26,69 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: a11y'), () => {
+    test('datetime should be keyboard navigable', async ({ page, browserName }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00"></ion-datetime>
+    `, config);
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
+      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
+      await page.keyboard.press(tabKey);
+      await expect(monthYearButton).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(prevButton).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(nextButton).toBeFocused();
+      // check value before & after selecting via keyboard
+      const initialValue = await datetime.evaluate((el) => el.value);
+      expect(initialValue).toBe('2022-02-22T16:30:00');
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowLeft');
+      await page.waitForChanges();
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      const newValue = await datetime.evaluate((el) => el.value);
+      expect(newValue).not.toBe('2022-02-22T16:30:00');
+    });
+    test('buttons should be keyboard navigable', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true"></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const clearButton = page.locator('#clear-button button');
+      const selectedDay = page.locator('.calendar-day-active');
+      await expect(selectedDay).toHaveText('22');
+      await clearButton.focus();
+      await page.waitForChanges();
+      await expect(clearButton).toBeFocused();
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      await expect(selectedDay).toHaveCount(0);
+    });
+    test('should navigate through months via right arrow key', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-28"></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const calendarBody = page.locator('.calendar-body');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await calendarBody.focus();
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowRight');
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('March 2022');
+    });
+  });
+});

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

@@ -0,0 +1,68 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('datetime: disabled'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons disabled></ion-datetime>
+    `, config);
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-disabled`));
+    });
+    test('date should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
+      await expect(febFirstButton).toBeDisabled();
+    });
+    test('month-year button should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await expect(calendarMonthYear.locator('button')).toBeDisabled();
+    });
+    test('next and prev buttons should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:first-of-type button');
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:last-of-type button');
+      await expect(prevMonthButton).toBeDisabled();
+      await expect(nextMonthButton).toBeDisabled();
+    });
+    test('clear button should be disabled', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const clearButton = page.locator('#clear-button button');
+      await expect(clearButton).toBeDisabled();
+    });
+    test('should not navigate through months via right arrow key', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const calendarBody = page.locator('.calendar-body');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await calendarBody.focus();
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowRight');
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('February 2022');
+    });
+  });
+});

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

@@ -0,0 +1,113 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('datetime: readonly'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons readonly></ion-datetime>
+    `, config);
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-readonly`));
+    });
+    test('date should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" readonly></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
+      await expect(febFirstButton).toBeDisabled();
+    });
+    test('should navigate months via month-year button', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `, config);
+      const ionChange = await page.spyOnEvent('ionChange');
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await calendarMonthYear.click();
+      await page.waitForChanges();
+      await page.locator('.month-column .picker-item[data-value="3"]').click();
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('March 2022');
+      await expect(ionChange).not.toHaveReceivedEvent();
+    });
+    test('should open picker using keyboard navigation', async ({ page, browserName }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `, config);
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await page.keyboard.press(tabKey);
+      await expect(monthYearButton).toBeFocused();
+      await page.waitForChanges();
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]');
+      await expect(marchPickerItem).toBeVisible();
+    });
+    test('should view next month via next button', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `, config);
+      const ionChange = await page.spyOnEvent('ionChange');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button + ion-button');
+      await nextMonthButton.click();
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('March 2022');
+      await expect(ionChange).not.toHaveReceivedEvent();
+    });
+    test('should not change value when the month is changed via keyboard navigation', async ({ page, browserName }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `, config);
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
+      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await page.keyboard.press(tabKey);
+      await expect(monthYearButton).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(prevButton).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(nextButton).toBeFocused();
+      // check value before & after selecting via keyboard
+      const initialValue = await datetime.evaluate((el) => el.value);
+      expect(initialValue).toBe('2022-02-22T16:30:00');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowLeft');
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('January 2022');
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      const newValue = await datetime.evaluate((el) => el.value);
+      // should not have changed
+      expect(newValue).toBe('2022-02-22T16:30:00');
+    });
+    test('clear button should be disabled', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" readonly></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const clearButton = page.locator('#clear-button button');
+      await expect(clearButton).toBeDisabled();
+    });
+  });
+});

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-10-31T06:03:42",
+  "timestamp": "2023-11-01T13:35:52",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.6.0",
@@ -7477,7 +7477,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "If `true`, the datetime appears normal but is not interactive.",
+          "docs": "If `true`, the datetime appears normal but the selected date cannot be changed.",
           "docsTags": [],
           "default": "false",
           "values": [