@ionic/core 7.6.1-dev.11702054666.15309f03 → 7.6.1-dev.11702425604.192f1b86

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

@@ -704,14 +704,24 @@ export class Datetime {
      * or modal that the datetime was presented in.
      */
     async confirm(closeOverlay = false) {
-        const { isCalendarPicker, activeParts } = this;
+        const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
         /**
          * We only update the value if the presentation is not a calendar picker.
          */
         if (activeParts !== undefined || !isCalendarPicker) {
             const activePartsIsArray = Array.isArray(activeParts);
             if (activePartsIsArray && activeParts.length === 0) {
-                this.setValue(undefined);
+                if (preferWheel) {
+                    /**
+                     * If the datetime is using a wheel picker, but the
+                     * active parts are empty, then the user has confirmed the
+                     * initial value (working parts) presented to them.
+                     */
+                    this.setValue(convertDataToISO(workingParts));
+                }
+                else {
+                    this.setValue(undefined);
+                }
             }
             else {
                 this.setValue(convertDataToISO(activeParts));
@@ -915,9 +925,18 @@ export class Datetime {
         const yearValues = (this.parsedYearValues = convertToArrayOfNumbers(this.yearValues));
         const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
         const todayParts = (this.todayParts = parseDate(getToday()));
-        this.defaultParts = getClosestValidDate(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues);
         this.processMinParts();
         this.processMaxParts();
+        this.defaultParts = getClosestValidDate({
+            refParts: todayParts,
+            monthValues,
+            dayValues,
+            yearValues,
+            hourValues,
+            minuteValues,
+            minParts: this.minParts,
+            maxParts: this.maxParts,
+        });
         this.processValue(this.value);
         this.emitStyle();
     }

package/dist/collection/components/datetime/test/manipulation.spec.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, getPreviousDay, getNextDay, getPreviousWeek, getNextWeek, getEndOfWeek, getStartOfWeek, convert12HourTo24Hour, getInternalHourValue, calculateHourFromAMPM, subtractDays, addDays, validateParts, } from "../utils/manipulation";
+import { getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, getPreviousDay, getNextDay, getPreviousWeek, getNextWeek, getEndOfWeek, getStartOfWeek, convert12HourTo24Hour, getInternalHourValue, calculateHourFromAMPM, subtractDays, addDays, validateParts, getClosestValidDate, } from "../utils/manipulation";
 describe('addDays()', () => {
     it('should correctly add days', () => {
         expect(addDays({
@@ -431,3 +431,135 @@ describe('validateParts()', () => {
         })).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 });
     });
 });
+describe('getClosestValidDate()', () => {
+    it('should match a date with only month/day/year', () => {
+        // October 10, 2023
+        const refParts = { month: 10, day: 10, year: 2023 };
+        // April 10, 2021
+        const minParts = { month: 4, day: 10, year: 2021 };
+        // September 14, 2021
+        const maxParts = { month: 9, day: 14, year: 2021 };
+        // September 4, 2021
+        const expected = { month: 9, day: 4, year: 2021, dayOfWeek: undefined };
+        expect(getClosestValidDate({
+            refParts,
+            monthValues: [2, 3, 7, 9, 10],
+            dayValues: [4, 15, 25],
+            yearValues: [2020, 2021, 2023],
+            maxParts,
+            minParts,
+        })).toEqual(expected);
+    });
+    it('should match a date when the reference date is before the min', () => {
+        // April 2, 2020 3:20 PM
+        const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
+        // September 10, 2021 10:10 AM
+        const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+        // September 14, 2021 10:11 AM
+        const maxParts = { month: 9, day: 14, year: 2021, hour: 10, minute: 11 };
+        // September 11, 2021 11:15 AM
+        const expected = {
+            year: 2021,
+            day: 11,
+            month: 9,
+            hour: 11,
+            minute: 15,
+            ampm: 'am',
+            dayOfWeek: undefined,
+        };
+        expect(getClosestValidDate({
+            refParts,
+            monthValues: [4, 9, 11],
+            dayValues: [11, 12, 13, 14],
+            yearValues: [2020, 2021, 2023],
+            hourValues: [9, 10, 11],
+            minuteValues: [11, 12, 13, 14, 15],
+            maxParts,
+            minParts,
+        })).toEqual(expected);
+    });
+    it('should match a date when the reference date is before the min', () => {
+        // April 2, 2020 3:20 PM
+        const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
+        // September 10, 2021 10:10 AM
+        const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+        // September 10, 2021 10:15 AM
+        const maxParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 15 };
+        // September 10, 2021 10:15 AM
+        const expected = {
+            month: 9,
+            day: 10,
+            year: 2021,
+            hour: 10,
+            minute: 15,
+            ampm: 'am',
+            dayOfWeek: undefined,
+        };
+        expect(getClosestValidDate({
+            refParts,
+            monthValues: [4, 9, 11],
+            dayValues: [10, 12, 13, 14],
+            yearValues: [2020, 2021, 2023],
+            hourValues: [9, 10, 11],
+            minuteValues: [11, 12, 13, 14, 15],
+            minParts,
+            maxParts,
+        })).toEqual(expected);
+    });
+    it('should only clamp minutes if within the same day and hour as min/max', () => {
+        // April 2, 2020 9:16 AM
+        const refParts = { month: 4, day: 2, year: 2020, hour: 9, minute: 16 };
+        // September 10, 2021 10:10 AM
+        const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+        // September 10, 2021 11:15 AM
+        const maxParts = { month: 9, day: 10, year: 2021, hour: 11, minute: 15 };
+        // September 10, 2021 10:16 AM
+        const expected = {
+            month: 9,
+            day: 10,
+            year: 2021,
+            hour: 10,
+            minute: 16,
+            ampm: 'am',
+            dayOfWeek: undefined,
+        };
+        expect(getClosestValidDate({
+            refParts,
+            monthValues: [4, 9, 11],
+            dayValues: [10, 12, 13, 14],
+            yearValues: [2020, 2021, 2023],
+            hourValues: [9, 10, 11],
+            minuteValues: [10, 15, 16],
+            minParts,
+            maxParts,
+        })).toEqual(expected);
+    });
+    it('should return the closest valid date after adjusting the allowed year', () => {
+        // April 2, 2022 9:16 AM
+        const refParts = { month: 4, day: 2, year: 2022, hour: 9, minute: 16 };
+        // September 10, 2021 10:10 AM
+        const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
+        // September 10, 2023 11:15 AM
+        const maxParts = { month: 9, day: 10, year: 2023, hour: 11, minute: 15 };
+        // April 2, 2022 9:16 AM
+        const expected = {
+            month: 4,
+            day: 2,
+            year: 2022,
+            hour: 9,
+            minute: 16,
+            ampm: 'am',
+            dayOfWeek: undefined,
+        };
+        expect(getClosestValidDate({
+            refParts,
+            monthValues: [4, 9, 11],
+            dayValues: [2, 10, 12, 13, 14],
+            yearValues: [2020, 2021, 2022, 2023],
+            hourValues: [9, 10, 11],
+            minuteValues: [10, 15, 16],
+            minParts,
+            maxParts,
+        })).toEqual(expected);
+    });
+});

package/dist/collection/components/datetime/test/prefer-wheel/datetime.spec.js

@@ -0,0 +1,27 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Datetime } from "../../datetime";
+describe('datetime: preferWheel', () => {
+    beforeEach(() => {
+        const mockIntersectionObserver = jest.fn();
+        mockIntersectionObserver.mockReturnValue({
+            observe: () => null,
+            unobserve: () => null,
+            disconnect: () => null,
+        });
+        global.IntersectionObserver = mockIntersectionObserver;
+    });
+    it('should select the working day when clicking the confirm button', async () => {
+        const page = await newSpecPage({
+            components: [Datetime],
+            html: '<ion-datetime prefer-wheel="true" max="2021" show-default-buttons="true"></ion-datetime>',
+        });
+        const datetime = page.body.querySelector('ion-datetime');
+        const confirmButton = datetime.shadowRoot.querySelector('#confirm-button');
+        confirmButton.click();
+        await page.waitForChanges();
+        expect(datetime.value).toBe('2021-12-31T23:59:00');
+    });
+});

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { isSameDay } from "./comparison";
+import { isAfter, isBefore, isSameDay } from "./comparison";
 import { getNumDaysInMonth } from "./helpers";
 import { clampDate, parseAmPm } from "./parse";
 const twoDigit = (val) => {
@@ -355,32 +355,82 @@ export const validateParts = (parts, minParts, maxParts) => {
  * Returns the closest date to refParts
  * that also meets the constraints of
  * the *Values params.
- * @param refParts The reference date
- * @param monthValues The allowed month values
- * @param dayValues The allowed day (of the month) values
- * @param yearValues The allowed year values
- * @param hourValues The allowed hour values
- * @param minuteValues The allowed minute values
  */
-export const getClosestValidDate = (refParts, monthValues, dayValues, yearValues, hourValues, minuteValues) => {
+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 });
+    if (yearValues !== undefined) {
+        // Filters out years that are out of the min/max bounds
+        const filteredYears = yearValues.filter((year) => {
+            if (minParts !== undefined && year < minParts.year) {
+                return false;
+            }
+            if (maxParts !== undefined && year > maxParts.year) {
+                return false;
+            }
+            return true;
+        });
+        copyParts.year = findClosestValue(year, filteredYears);
+    }
     if (monthValues !== undefined) {
-        copyParts.month = findClosestValue(month, monthValues);
+        // Filters out months that are out of the min/max bounds
+        const filteredMonths = monthValues.filter((month) => {
+            if (minParts !== undefined && copyParts.year === minParts.year && month < minParts.month) {
+                return false;
+            }
+            if (maxParts !== undefined && copyParts.year === maxParts.year && month > maxParts.month) {
+                return false;
+            }
+            return true;
+        });
+        copyParts.month = findClosestValue(month, filteredMonths);
     }
     // Day is nullable but cannot be undefined
     if (day !== null && dayValues !== undefined) {
-        copyParts.day = findClosestValue(day, dayValues);
-    }
-    if (yearValues !== undefined) {
-        copyParts.year = findClosestValue(year, yearValues);
+        // 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)) {
+                return false;
+            }
+            if (maxParts !== undefined && isAfter(Object.assign(Object.assign({}, copyParts), { day }), maxParts)) {
+                return false;
+            }
+            return true;
+        });
+        copyParts.day = findClosestValue(day, filteredDays);
     }
     if (hour !== undefined && hourValues !== undefined) {
-        copyParts.hour = findClosestValue(hour, hourValues);
+        // 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) {
+                return false;
+            }
+            if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.hour) !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
+                return false;
+            }
+            return true;
+        });
+        copyParts.hour = findClosestValue(hour, filteredHours);
         copyParts.ampm = parseAmPm(copyParts.hour);
     }
     if (minute !== undefined && minuteValues !== undefined) {
-        copyParts.minute = findClosestValue(minute, minuteValues);
+        // 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 &&
+                isSameDay(copyParts, minParts) &&
+                copyParts.hour === minParts.hour &&
+                minute < minParts.minute) {
+                return false;
+            }
+            if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.minute) !== undefined &&
+                isSameDay(copyParts, maxParts) &&
+                copyParts.hour === maxParts.hour &&
+                minute > maxParts.minute) {
+                return false;
+            }
+            return true;
+        });
+        copyParts.minute = findClosestValue(minute, filteredMinutes);
     }
     return copyParts;
 };

package/dist/collection/components/footer/footer.ios.css

@@ -53,7 +53,7 @@
  *   }
  * }
  */
-:host {
+ion-footer {
   display: block;
   position: relative;
   order: 1;
@@ -61,7 +61,7 @@
   z-index: 10;
 }
 
-:host(.footer-toolbar-padding) ::slotted(ion-toolbar:last-of-type) {
+ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
@@ -120,7 +120,7 @@
  *   }
  * }
  */
-::slotted(ion-toolbar:first-of-type) {
+.footer-ios ion-toolbar:first-of-type {
   --border-width: 0.55px 0 0;
 }
 
@@ -133,14 +133,14 @@
     position: absolute;
     backdrop-filter: saturate(180%) blur(20px);
   }
-  :host(.footer-translucent-ios) :slotted(ion-toolbar) {
+  .footer-translucent-ios ion-toolbar {
     --opacity: .8;
   }
 }
-:host(.ion-no-border) ::slotted(ion-toolbar:first-of-type) {
+.footer-ios.ion-no-border ion-toolbar:first-of-type {
   --border-width: 0;
 }
 
-:host(.footer-collapse-fade) ::slotted(ion-toolbar) {
+.footer-collapse-fade ion-toolbar {
   --opacity-scale: inherit;
 }

package/dist/collection/components/footer/footer.js

@@ -91,7 +91,6 @@ export class Footer {
             } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", null)));
     }
     static get is() { return "ion-footer"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["footer.ios.scss"],

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

@@ -53,7 +53,7 @@
  *   }
  * }
  */
-:host {
+ion-footer {
   display: block;
   position: relative;
   order: 1;
@@ -61,7 +61,7 @@
   z-index: 10;
 }
 
-:host(.footer-toolbar-padding) ::slotted(ion-toolbar:last-of-type) {
+ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
@@ -120,10 +120,10 @@
  *   }
  * }
  */
-:host {
+.footer-md {
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
-:host(.ion-no-border) {
+.footer-md.ion-no-border {
   box-shadow: none;
 }

package/dist/collection/components/input/input.js

@@ -269,15 +269,34 @@ export class Input {
         if (!this.shouldClearOnEdit()) {
             return;
         }
+        /**
+         * The following keys do not modify the
+         * contents of the input. As a result, pressing
+         * them should not edit the input.
+         *
+         * We can't check to see if the value of the input
+         * was changed because we call checkClearOnEdit
+         * in a keydown listener, and the key has not yet
+         * been added to the input.
+         */
+        const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
+        const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
         /**
          * Clear the input if the control has not been previously cleared during focus.
          * Do not clear if the user hitting enter to submit a form.
          */
-        if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter' && ev.key !== 'Tab') {
+        if (!this.didInputClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
             this.value = '';
             this.emitInputChange(ev);
         }
-        this.didInputClearOnEdit = true;
+        /**
+         * Pressing an IGNORED_KEYS first and
+         * then an allowed key will cause the input to not
+         * be cleared.
+         */
+        if (!pressedIgnoredKey) {
+            this.didInputClearOnEdit = true;
+        }
     }
     hasValue() {
         return this.getValue().length > 0;

package/dist/collection/components/input/test/clear-on-edit/input.e2e.js

@@ -3,6 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { test, configs } from "../../../../utils/test/playwright/index";
+const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('input: clearOnEdit'), () => {
         test('should clear when typed into', async ({ page }) => {
@@ -13,21 +14,40 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await ionInput.next();
             await expect(input).toHaveJSProperty('value', 'h');
         });
-        test('should not clear when enter is pressed', async ({ page }) => {
-            await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
+        test('should not clear the input if it does not have an initial value when typing', async ({ page }) => {
+            await page.setContent(`<ion-input label="input" value="" clear-on-edit="true"></ion-input>`, config);
             const input = page.locator('ion-input');
-            await input.locator('input').focus();
-            await page.keyboard.press('Enter');
-            await page.waitForChanges();
-            await expect(input).toHaveJSProperty('value', 'abc');
+            await input.click();
+            await input.type('hello world');
+            await expect(input).toHaveJSProperty('value', 'hello world');
+        });
+        IGNORED_KEYS.forEach((ignoredKey) => {
+            test(`should not clear when ${ignoredKey} is pressed`, async ({ page, skip }) => {
+                skip.browser((browserName) => browserName === 'firefox' && ignoredKey === 'Meta', 'Firefox incorrectly adds "OS" to the input when pressing the Meta key on Linux');
+                await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
+                const input = page.locator('ion-input');
+                await input.locator('input').focus();
+                await page.keyboard.press(ignoredKey);
+                await page.waitForChanges();
+                await expect(input).toHaveJSProperty('value', 'abc');
+            });
         });
-        test('should not clear when tab is pressed', async ({ page }) => {
+        test('should clear after when pressing valid key after pressing ignored key', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28633',
+            });
             await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
             const input = page.locator('ion-input');
             await input.locator('input').focus();
-            await page.keyboard.press('Tab');
+            // ignored
+            await page.keyboard.press('Shift');
             await page.waitForChanges();
             await expect(input).toHaveJSProperty('value', 'abc');
+            // allowed
+            await page.keyboard.press('a');
+            await page.waitForChanges();
+            await expect(input).toHaveJSProperty('value', 'a');
         });
     });
 });

package/dist/collection/components/menu/menu.ios.css

@@ -305,14 +305,13 @@ ion-backdrop {
   left: 0;
   right: 0;
   width: auto;
-  /* stylelint-disable declaration-no-important */
-  transform: none !important;
-  box-shadow: none !important;
+  transform: none;
+  box-shadow: none;
 }
 
 :host(.menu-pane-visible) ion-backdrop {
+  /* stylelint-disable-next-line declaration-no-important */
   display: hidden !important;
-  /* stylelint-enable declaration-no-important */
 }
 
 /**

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

@@ -305,14 +305,13 @@ ion-backdrop {
   left: 0;
   right: 0;
   width: auto;
-  /* stylelint-disable declaration-no-important */
-  transform: none !important;
-  box-shadow: none !important;
+  transform: none;
+  box-shadow: none;
 }
 
 :host(.menu-pane-visible) ion-backdrop {
+  /* stylelint-disable-next-line declaration-no-important */
   display: hidden !important;
-  /* stylelint-enable declaration-no-important */
 }
 
 /**

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

@@ -0,0 +1,61 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+    test.describe(title('menu: custom'), () => {
+        test('should allow styling the menu box shadow when inside a split pane', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/21530',
+            });
+            await page.setContent(`
+        <style>
+          ion-split-pane {
+            --side-width: 200px;
+            --side-min-width: 200px;
+          }
+
+          ion-menu {
+            box-shadow: 10px 5px 5px red;
+            z-index: 1;
+          }
+        </style>
+
+        <ion-app>
+          <ion-split-pane when="xs" id="splitPane" content-id="split-content">
+            <ion-menu side="start" content-id="split-content">
+              <ion-header>
+                <ion-toolbar color="secondary">
+                  <ion-title>Menu</ion-title>
+                </ion-toolbar>
+              </ion-header>
+
+              <ion-content class="ion-padding">Menu Content</ion-content>
+            </ion-menu>
+
+            <div class="ion-page" id="split-content">
+              <ion-header>
+                <ion-toolbar>
+                  <ion-buttons slot="start">
+                    <ion-menu-button></ion-menu-button>
+                  </ion-buttons>
+
+                  <ion-title>Content</ion-title>
+                </ion-toolbar>
+              </ion-header>
+
+              <ion-content class="ion-padding">Main Content</ion-content>
+            </div>
+          </ion-split-pane>
+        </ion-app>
+      `, config);
+            const app = page.locator('ion-app');
+            await expect(app).toHaveScreenshot(screenshot(`menu-custom-split-pane`));
+        });
+    });
+});

package/dist/collection/components/split-pane/split-pane.ios.css

@@ -146,8 +146,7 @@
   top: 0;
   bottom: 0;
   position: relative;
-  /* stylelint-disable-next-line declaration-no-important */
-  box-shadow: none !important;
+  box-shadow: none;
   z-index: 0;
 }
 

package/dist/collection/components/split-pane/split-pane.md.css

@@ -146,8 +146,7 @@
   top: 0;
   bottom: 0;
   position: relative;
-  /* stylelint-disable-next-line declaration-no-important */
-  box-shadow: none !important;
+  box-shadow: none;
   z-index: 0;
 }