@ionic/core 7.5.8-dev.11701293337.112ba209 → 7.5.8-dev.11701374238.101cd738

package/components/action-sheet.js

@@ -265,6 +265,16 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
         if (this.isOpen === true) {
             raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     render() {
         const { header, htmlAttributes, overlayIndex } = this;

package/components/alert.js

@@ -285,6 +285,16 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         if (this.isOpen === true) {
             raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Present the alert overlay after it has been created.

package/components/ion-datetime.js

@@ -689,31 +689,22 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            const hasSingleDateSelected = Array.isArray(valueToProcess) ? valueToProcess.length === 1 : true;
-            /**
-             * If there is more than one date selected
-             * then we should neither animate to the date
-             * nor update the working parts because we do
-             * not know which date the user wants to view.
-             */
-            if (hasSingleDateSelected) {
-                if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-                    this.animateToDate(targetValue);
-                }
-                else {
-                    /**
-                     * We only need to do this if we didn't just animate to a new month,
-                     * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
-                     */
-                    this.setWorkingParts({
-                        month,
-                        day,
-                        year,
-                        hour,
-                        minute,
-                        ampm,
-                    });
-                }
+            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+                this.animateToDate(targetValue);
+            }
+            else {
+                /**
+                 * We only need to do this if we didn't just animate to a new month,
+                 * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+                 */
+                this.setWorkingParts({
+                    month,
+                    day,
+                    year,
+                    hour,
+                    minute,
+                    ampm,
+                });
             }
         };
         this.animateToDate = async (targetValue) => {

package/components/ion-loading.js

@@ -175,6 +175,16 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
         if (this.isOpen === true) {
             raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();

package/components/ion-modal.js

@@ -1232,6 +1232,16 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
             raf(() => this.present());
         }
         this.breakpointsChanged(this.breakpoints);
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Determines whether or not an overlay

package/components/ion-picker.js

@@ -134,6 +134,16 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
         if (this.isOpen === true) {
             raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Present the picker overlay after it has been created.

package/components/ion-toast.js

@@ -269,6 +269,16 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
         if (this.isOpen === true) {
             raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Present the toast overlay after it has been created.

package/components/popover.js

@@ -1107,6 +1107,16 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
                 this.dismiss(undefined, undefined, false);
             });
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.configureTriggerInteraction();
     }
     /**
      * When opening a popover from a trigger, we should not be

package/dist/cjs/ion-action-sheet.cjs.entry.js

@@ -273,6 +273,16 @@ const ActionSheet = class {
         if (this.isOpen === true) {
             helpers.raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     render() {
         const { header, htmlAttributes, overlayIndex } = this;

package/dist/cjs/ion-alert.cjs.entry.js

@@ -294,6 +294,16 @@ const Alert = class {
         if (this.isOpen === true) {
             helpers.raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Present the alert overlay after it has been created.

package/dist/cjs/ion-datetime_3.cjs.entry.js

@@ -688,31 +688,22 @@ const Datetime = class {
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            const hasSingleDateSelected = Array.isArray(valueToProcess) ? valueToProcess.length === 1 : true;
-            /**
-             * If there is more than one date selected
-             * then we should neither animate to the date
-             * nor update the working parts because we do
-             * not know which date the user wants to view.
-             */
-            if (hasSingleDateSelected) {
-                if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-                    this.animateToDate(targetValue);
-                }
-                else {
-                    /**
-                     * We only need to do this if we didn't just animate to a new month,
-                     * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
-                     */
-                    this.setWorkingParts({
-                        month,
-                        day,
-                        year,
-                        hour,
-                        minute,
-                        ampm,
-                    });
-                }
+            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+                this.animateToDate(targetValue);
+            }
+            else {
+                /**
+                 * We only need to do this if we didn't just animate to a new month,
+                 * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+                 */
+                this.setWorkingParts({
+                    month,
+                    day,
+                    year,
+                    hour,
+                    minute,
+                    ampm,
+                });
             }
         };
         this.animateToDate = async (targetValue) => {
@@ -1879,6 +1870,16 @@ const Picker = class {
         if (this.isOpen === true) {
             helpers.raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Present the picker overlay after it has been created.

package/dist/cjs/ion-loading.cjs.entry.js

@@ -180,6 +180,16 @@ const Loading = class {
         if (this.isOpen === true) {
             helpers.raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();

package/dist/cjs/ion-modal.cjs.entry.js

@@ -1236,6 +1236,16 @@ const Modal = class {
             helpers.raf(() => this.present());
         }
         this.breakpointsChanged(this.breakpoints);
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Determines whether or not an overlay

package/dist/cjs/ion-popover.cjs.entry.js

@@ -1110,6 +1110,16 @@ const Popover = class {
                 this.dismiss(undefined, undefined, false);
             });
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.configureTriggerInteraction();
     }
     /**
      * When opening a popover from a trigger, we should not be

package/dist/cjs/ion-toast.cjs.entry.js

@@ -271,6 +271,16 @@ const Toast = class {
         if (this.isOpen === true) {
             helpers.raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Present the toast overlay after it has been created.

package/dist/collection/components/action-sheet/action-sheet.js

@@ -169,6 +169,16 @@ export class ActionSheet {
         if (this.isOpen === true) {
             raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     render() {
         const { header, htmlAttributes, overlayIndex } = this;

package/dist/collection/components/alert/alert.js

@@ -192,6 +192,16 @@ export class Alert {
         if (this.isOpen === true) {
             raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Present the alert overlay after it has been created.

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

@@ -526,31 +526,22 @@ export class Datetime {
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            const hasSingleDateSelected = Array.isArray(valueToProcess) ? valueToProcess.length === 1 : true;
-            /**
-             * If there is more than one date selected
-             * then we should neither animate to the date
-             * nor update the working parts because we do
-             * not know which date the user wants to view.
-             */
-            if (hasSingleDateSelected) {
-                if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-                    this.animateToDate(targetValue);
-                }
-                else {
-                    /**
-                     * We only need to do this if we didn't just animate to a new month,
-                     * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
-                     */
-                    this.setWorkingParts({
-                        month,
-                        day,
-                        year,
-                        hour,
-                        minute,
-                        ampm,
-                    });
-                }
+            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+                this.animateToDate(targetValue);
+            }
+            else {
+                /**
+                 * We only need to do this if we didn't just animate to a new month,
+                 * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+                 */
+                this.setWorkingParts({
+                    month,
+                    day,
+                    year,
+                    hour,
+                    minute,
+                    ampm,
+                });
             }
         };
         this.animateToDate = async (targetValue) => {

package/dist/collection/components/datetime/test/set-value/datetime.e2e.js

@@ -46,20 +46,5 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             const calendarHeader = datetime.locator('.calendar-month-year');
             await expect(calendarHeader).toHaveText(/May 2021/);
         });
-        test('should scroll to new month when value is initially set and then updated with multiple selection', async ({ page, }) => {
-            await page.setContent(`
-        <ion-datetime multiple="true" presentation="date"></ion-datetime>
-        <script>
-          const datetime = document.querySelector('ion-datetime');
-          datetime.value = ['2021-04-25'];
-        </script>
-      `, config);
-            await page.waitForSelector('.datetime-ready');
-            const datetime = page.locator('ion-datetime');
-            await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
-            await page.waitForChanges();
-            const calendarHeader = datetime.locator('.calendar-month-year');
-            await expect(calendarHeader).toHaveText(/May 2021/);
-        });
     });
 });

package/dist/collection/components/loading/loading.js

@@ -79,6 +79,16 @@ export class Loading {
         if (this.isOpen === true) {
             raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();

package/dist/collection/components/modal/modal.js

@@ -151,6 +151,16 @@ export class Modal {
             raf(() => this.present());
         }
         this.breakpointsChanged(this.breakpoints);
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Determines whether or not an overlay

package/dist/collection/components/picker/picker.js

@@ -78,6 +78,16 @@ export class Picker {
         if (this.isOpen === true) {
             raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Present the picker overlay after it has been created.

package/dist/collection/components/popover/popover.js

@@ -152,6 +152,16 @@ export class Popover {
                 this.dismiss(undefined, undefined, false);
             });
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.configureTriggerInteraction();
     }
     /**
      * When opening a popover from a trigger, we should not be

package/dist/collection/components/toast/toast.js

@@ -96,6 +96,16 @@ export class Toast {
         if (this.isOpen === true) {
             raf(() => this.present());
         }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
     }
     /**
      * Present the toast overlay after it has been created.

package/dist/collection/utils/test/playwright/generator.js

@@ -8,21 +8,40 @@
  * each test title is unique.
  */
 const generateTitle = (title, config) => {
-    const { mode, direction } = config;
-    return `${title} - ${mode}/${direction}`;
+    const { mode, direction, theme } = config;
+    if (theme === 'light') {
+        /**
+         * Ionic has many existing tests that existed prior to
+         * the introduction of theme testing. To maintain backwards
+         * compatibility, we will not include the theme in the test
+         * title if the theme is set to light.
+         */
+        return `${title} - ${mode}/${direction}`;
+    }
+    return `${title} - ${mode}/${direction}/${theme}`;
 };
 /**
  * Generates a unique filename based on a base filename
  * and a test config.
  */
 const generateScreenshotName = (fileName, config) => {
-    const { mode, direction } = config;
-    return `${fileName}-${mode}-${direction}.png`;
+    const { mode, direction, theme } = config;
+    if (theme === 'light') {
+        /**
+         * Ionic has many existing tests that existed prior to
+         * the introduction of theme testing. To maintain backwards
+         * compatibility, we will not include the theme in the screenshot
+         * name if the theme is set to light.
+         */
+        return `${fileName}-${mode}-${direction}.png`;
+    }
+    return `${fileName}-${mode}-${direction}-${theme}.png`;
 };
 /**
  * Given a config generate an array of test variants.
  */
 export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
+    var _a;
     const { modes, directions } = testConfig;
     const configs = [];
     /**
@@ -31,9 +50,12 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
      */
     const processedMode = modes !== null && modes !== void 0 ? modes : DEFAULT_MODES;
     const processedDirection = directions !== null && directions !== void 0 ? directions : DEFAULT_DIRECTIONS;
+    const processedTheme = (_a = testConfig.themes) !== null && _a !== void 0 ? _a : DEFAULT_THEMES;
     processedMode.forEach((mode) => {
         processedDirection.forEach((direction) => {
-            configs.push({ mode, direction });
+            processedTheme.forEach((theme) => {
+                configs.push({ mode, direction, theme });
+            });
         });
     });
     return configs.map((config) => {
@@ -46,6 +68,7 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
 };
 const DEFAULT_MODES = ['ios', 'md'];
 const DEFAULT_DIRECTIONS = ['ltr', 'rtl'];
+const DEFAULT_THEMES = ['light'];
 const DEFAULT_TEST_CONFIG_OPTION = {
     modes: DEFAULT_MODES,
     directions: DEFAULT_DIRECTIONS,

package/dist/collection/utils/test/playwright/page/utils/set-content.js

@@ -18,13 +18,16 @@ export const setContent = async (page, html, testInfo, options) => {
     }
     let mode;
     let direction;
+    let theme;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
+        theme = testInfo.project.metadata.theme;
     }
     else {
         mode = options.mode;
         direction = options.direction;
+        theme = options.theme;
     }
     const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
     const output = `
@@ -36,6 +39,7 @@ export const setContent = async (page, html, testInfo, options) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
+        ${theme !== 'light' ? `<link href="${baseUrl}/scripts/testing/themes/${theme}.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>
@@ -51,6 +55,10 @@ export const setContent = async (page, html, testInfo, options) => {
       </body>
     </html>
   `;
+    testInfo.annotations.push({
+        type: 'theme',
+        description: theme,
+    });
     if (baseUrl) {
         await page.route(baseUrl, (route) => {
             if (route.request().url() === `${baseUrl}/`) {