@ionic/core 7.5.8-dev.11701876182.1e71e7a0 → 7.5.8-dev.11702056888.11188f48

package/dist/collection/components/toggle/toggle.js

@@ -18,7 +18,6 @@ import { getIonMode } from "../../global/ionic-global";
  *
  * @part track - The background track of the toggle.
  * @part handle - The toggle handle, or knob, used to change the checked state.
- * @part label - The label text describing the toggle.
  */
 export class Toggle {
     constructor() {
@@ -124,8 +123,6 @@ export class Toggle {
         if (this.legacyFormController.hasLegacyControl()) {
             this.ionStyle.emit({
                 'interactive-disabled': this.disabled,
-                // TODO(FW-2990): remove this
-                legacy: !!this.legacy,
             });
         }
     }
@@ -193,7 +190,7 @@ export class Toggle {
             }) }, h("label", { class: "toggle-wrapper" }, h("input", Object.assign({ type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", null)), h("div", { class: "native-wrapper" }, this.renderToggleControl()))));
+            } }, h("slot", null)), h("div", { class: "native-wrapper" }, this.renderToggleControl()))));
     }
     renderLegacyToggle() {
         if (!this.hasLoggedDeprecationWarning) {

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

@@ -184,6 +184,12 @@ input {
 }
 
 .label-text-wrapper {
+  /**
+   * This ensures that double tapping this text
+   * clicks the <label> and focuses the input
+   * when a screen reader is enabled.
+   */
+  pointer-events: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

package/dist/collection/utils/animation/animation.js

@@ -463,16 +463,6 @@ export const createAnimation = (animationId) => {
                 }
             }
         });
-        /**
-         * Clean up any value coercion before
-         * the user callbacks fire otherwise
-         * they may get stale values. For example,
-         * if someone calls progressStart(0) the
-         * animation may still be reversed.
-         */
-        forceDurationValue = undefined;
-        forceDirectionValue = undefined;
-        forceDelayValue = undefined;
         onFinishCallbacks.forEach((onFinishCallback) => {
             return onFinishCallback.c(currentStep, ani);
         });
@@ -677,8 +667,17 @@ export const createAnimation = (animationId) => {
                 update(false, false);
             }
         }
-        if (playTo !== undefined && !parentAnimation) {
-            play();
+        if (playTo !== undefined) {
+            onFinish(() => {
+                forceDurationValue = undefined;
+                forceDirectionValue = undefined;
+                forceDelayValue = undefined;
+            }, {
+                oneTimeCallback: true,
+            });
+            if (!parentAnimation) {
+                play();
+            }
         }
         return ani;
     };

package/dist/collection/utils/animation/test/animation.spec.js

@@ -5,22 +5,6 @@ import { createAnimation } from "../animation";
 import { processKeyframes } from "../animation-utils";
 import { getTimeGivenProgression } from "../cubic-bezier";
 describe('Animation Class', () => {
-    describe('progressEnd callbacks', () => {
-        test('coerced state should be reset before onFinish runs', (done) => {
-            const el = document.createElement('div');
-            const animation = createAnimation()
-                .addElement(el)
-                .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-                .duration(50);
-            animation
-                .onFinish(() => {
-                expect(animation.getDirection()).toBe('normal');
-                expect(animation.getDuration()).toBe(50);
-                done();
-            })
-                .progressEnd(0, 0.5, 10);
-        });
-    });
     describe('play()', () => {
         it('should resolve when the animation is cancelled', async () => {
             // Tell Jest to expect 1 assertion for async code

package/dist/collection/utils/browser/index.js

@@ -1,5 +1,27 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+/**
+ * When accessing the document or window, it is important
+ * to account for SSR applications where the
+ * window is not available. Code that accesses
+ * window when it is not available will crash.
+ * Even checking if `window === undefined` will cause
+ * apps to crash in SSR.
+ *
+ * Use win below to access an SSR-safe version
+ * of the window.
+ *
+ * Example 1:
+ * Before:
+ * if (window.innerWidth > 768) { ... }
+ *
+ * After:
+ * import { win } from 'path/to/this/file';
+ * if (win?.innerWidth > 768) { ... }
+ *
+ * Note: Code inside of this if-block will
+ * not run in an SSR environment.
+ */
 export const win = typeof window !== 'undefined' ? window : undefined;
 export const doc = typeof document !== 'undefined' ? document : undefined;

package/dist/collection/utils/forms/index.js

@@ -3,4 +3,3 @@
  */
 export * from './form-controller';
 export * from './notch-controller';
-export * from './compare-with-utils';

package/dist/collection/utils/gesture/gesture-controller.js

@@ -189,5 +189,5 @@ class BlockerDelegate {
         this.ctrl = undefined;
     }
 }
-const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
+export const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 export const GESTURE_CONTROLLER = new GestureController();

package/dist/collection/utils/input-shims/input-shims.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { doc } from "../browser/index";
 import { findClosestIonContent } from "../content";
 import { componentOnReady } from "../helpers";
 import { Keyboard } from "../native/keyboard";
@@ -12,13 +11,7 @@ const INPUT_BLURRING = true;
 const SCROLL_ASSIST = true;
 const HIDE_CARET = true;
 export const startInputShims = async (config, platform) => {
-    /**
-     * If doc is undefined then we are in an SSR environment
-     * where input shims do not apply.
-     */
-    if (doc === undefined) {
-        return;
-    }
+    const doc = document;
     const isIOS = platform === 'ios';
     const isAndroid = platform === 'android';
     /**
@@ -97,10 +90,11 @@ export const startInputShims = async (config, platform) => {
     for (const input of inputs) {
         registerInput(input);
     }
-    doc.addEventListener('ionInputDidLoad', (ev) => {
+    // TODO(FW-2832): types
+    doc.addEventListener('ionInputDidLoad', ((ev) => {
         registerInput(ev.detail);
-    });
-    doc.addEventListener('ionInputDidUnload', (ev) => {
+    }));
+    doc.addEventListener('ionInputDidUnload', ((ev) => {
         unregisterInput(ev.detail);
-    });
+    }));
 };

package/dist/collection/utils/menu-controller/index.js

@@ -1,9 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { doc } from "../browser/index";
-import { MENU_BACK_BUTTON_PRIORITY } from "../hardware-back-button";
 import { printIonWarning } from "../logging/index";
+import { MENU_BACK_BUTTON_PRIORITY } from "../hardware-back-button";
 import { componentOnReady } from "../helpers";
 import { menuOverlayAnimation } from "./animations/overlay";
 import { menuPushAnimation } from "./animations/push";
@@ -185,14 +184,17 @@ const createMenuController = () => {
     registerAnimation('reveal', menuRevealAnimation);
     registerAnimation('push', menuPushAnimation);
     registerAnimation('overlay', menuOverlayAnimation);
-    doc === null || doc === void 0 ? void 0 : doc.addEventListener('ionBackButton', (ev) => {
-        const openMenu = _getOpenSync();
-        if (openMenu) {
-            ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
-                return openMenu.close();
-            });
-        }
-    });
+    if (typeof document !== 'undefined') {
+        document.addEventListener('ionBackButton', (ev) => {
+            // TODO(FW-2832): type
+            const openMenu = _getOpenSync();
+            if (openMenu) {
+                ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
+                    return openMenu.close();
+                });
+            }
+        });
+    }
     return {
         registerAnimation,
         get,

package/dist/collection/utils/overlays.js

@@ -5,6 +5,7 @@ import { doc } from "./browser/index";
 import { config } from "../global/config";
 import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
+import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
 import { addEventListener, componentOnReady, focusElement, getElementRoot, removeEventListener } from "./helpers";
 import { printIonWarning } from "./logging";
@@ -28,7 +29,10 @@ export const alertController = /*@__PURE__*/ createController('ion-alert');
 export const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 export const loadingController = /*@__PURE__*/ createController('ion-loading');
 export const modalController = /*@__PURE__*/ createController('ion-modal');
-export const pickerController = /*@__PURE__*/ createController('ion-picker');
+/**
+ * @deprecated Use the inline ion-picker component instead.
+ */
+export const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
 export const popoverController = /*@__PURE__*/ createController('ion-popover');
 export const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -138,7 +142,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -323,7 +327,7 @@ export const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 export const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -389,6 +393,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         return;
     }
     setRootAriaHidden(true);
+    document.body.classList.add(BACKDROP_NO_SCROLL);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -451,12 +456,14 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     if (!overlay.presented) {
         return false;
     }
+    const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
     /**
      * If this is the last visible overlay then
      * we want to re-add the root to the accessibility tree.
      */
-    if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
+    if (lastOverlay) {
         setRootAriaHidden(false);
+        document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
     overlay.presented = false;
     try {
@@ -562,7 +569,6 @@ export const safeCall = (handler, arg) => {
 };
 export const BACKDROP = 'backdrop';
 export const GESTURE = 'gesture';
-export const OVERLAY_GESTURE_PRIORITY = 39;
 /**
  * Creates a delegate controller.
  *

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

@@ -9,14 +9,13 @@ import { raf } from "./helpers";
  * This is not needed for components using native slots in the Shadow DOM.
  * @internal
  * @param el The host element to observe
- * @param slotName mutationCallback will fire when nodes on these slot(s) change
+ * @param slotName mutationCallback will fire when nodes on this slot change
  * @param mutationCallback The callback to fire whenever the slotted content changes
  */
 export const createSlotMutationController = (el, slotName, mutationCallback) => {
     let hostMutationObserver;
     let slottedContentMutationObserver;
     if (win !== undefined && 'MutationObserver' in win) {
-        const slots = Array.isArray(slotName) ? slotName : [slotName];
         hostMutationObserver = new MutationObserver((entries) => {
             for (const entry of entries) {
                 for (const node of entry.addedNodes) {
@@ -24,7 +23,7 @@ export const createSlotMutationController = (el, slotName, mutationCallback) =>
                      * Check to see if the added node
                      *  is our slotted content.
                      */
-                    if (node.nodeType === Node.ELEMENT_NODE && slots.includes(node.slot)) {
+                    if (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) {
                         /**
                          * If so, we want to watch the slotted
                          * content itself for changes. This lets us

package/dist/collection/utils/test/overlays/overlays-scroll-blocking.spec.js

@@ -0,0 +1,65 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Modal } from "../../../components/modal/modal";
+describe('overlays: scroll blocking', () => {
+    it('should not block scroll when the overlay is created', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const body = page.doc.querySelector('body');
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should block scroll when the overlay is presented', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const modal = page.body.querySelector('ion-modal');
+        const body = page.doc.querySelector('body');
+        await modal.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modal.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should not block scroll when the overlay is dismissed', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const modal = page.body.querySelector('ion-modal');
+        const body = page.doc.querySelector('body');
+        await modal.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modal.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should not enable scroll until last overlay is dismissed', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal id="one"></ion-modal>
+        <ion-modal id="two"></ion-modal>
+      `,
+        });
+        const modalOne = page.body.querySelector('#one');
+        const modalTwo = page.body.querySelector('#two');
+        const body = page.doc.querySelector('body');
+        await modalOne.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalTwo.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalOne.dismiss();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalTwo.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+});