voyager-ionic-core 8.5.7 → 8.7.1

package/dist/collection/components/modal/animations/ios.transition.js

@@ -0,0 +1,152 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+import { getElementRoot } from "../../../utils/helpers";
+import { SwipeToCloseDefaults } from "../gestures/swipe-to-close";
+/**
+ * Transition animation from portrait view to landscape view
+ * This handles the case where a card modal is open in portrait view
+ * and the user switches to landscape view
+ */
+export const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
+    const { presentingEl } = opts;
+    if (!presentingEl) {
+        // No transition needed for non-card modals
+        return createAnimation('portrait-to-landscape-transition');
+    }
+    const presentingElIsCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
+    const presentingElRoot = getElementRoot(presentingEl);
+    const bodyEl = document.body;
+    const baseAnimation = createAnimation('portrait-to-landscape-transition')
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.32,0.72,0,1)')
+        .duration(duration);
+    const presentingAnimation = createAnimation().beforeStyles({
+        transform: 'translateY(0)',
+        'transform-origin': 'top center',
+        overflow: 'hidden',
+    });
+    if (!presentingElIsCardModal) {
+        // The presenting element is not a card modal, so we do not
+        // need to care about layering and modal-specific styles.
+        const root = getElementRoot(baseEl);
+        const wrapperAnimation = createAnimation()
+            .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
+            .fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
+        const backdropAnimation = createAnimation()
+            .addElement(root.querySelector('ion-backdrop'))
+            .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
+        // Animate presentingEl from portrait state back to normal
+        const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
+        presentingAnimation
+            .addElement(presentingEl)
+            .afterStyles({
+            transform: 'translateY(0px) scale(1)',
+            'border-radius': '0px',
+        })
+            .beforeAddWrite(() => bodyEl.style.setProperty('background-color', ''))
+            .fromTo('transform', fromTransform, 'translateY(0px) scale(1)')
+            .fromTo('filter', 'contrast(0.85)', 'contrast(1)')
+            .fromTo('border-radius', '10px 10px 0 0', '0px');
+        baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
+    }
+    else {
+        // The presenting element is a card modal, so we do
+        // need to care about layering and modal-specific styles.
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0px) scale(1)`;
+        presentingAnimation
+            .addElement(presentingEl)
+            .afterStyles({
+            transform: toTransform,
+        })
+            .fromTo('transform', fromTransform, toTransform)
+            .fromTo('filter', 'contrast(0.85)', 'contrast(1)');
+        const shadowAnimation = createAnimation()
+            .addElement(presentingElRoot.querySelector('.modal-shadow'))
+            .afterStyles({
+            transform: toTransform,
+            opacity: '0',
+        })
+            .fromTo('transform', fromTransform, toTransform);
+        baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
+    }
+    return baseAnimation;
+};
+/**
+ * Transition animation from landscape view to portrait view
+ * This handles the case where a card modal is open in landscape view
+ * and the user switches to portrait view
+ */
+export const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
+    const { presentingEl } = opts;
+    if (!presentingEl) {
+        // No transition needed for non-card modals
+        return createAnimation('landscape-to-portrait-transition');
+    }
+    const presentingElIsCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
+    const presentingElRoot = getElementRoot(presentingEl);
+    const bodyEl = document.body;
+    const baseAnimation = createAnimation('landscape-to-portrait-transition')
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.32,0.72,0,1)')
+        .duration(duration);
+    const presentingAnimation = createAnimation().beforeStyles({
+        transform: 'translateY(0)',
+        'transform-origin': 'top center',
+        overflow: 'hidden',
+    });
+    if (!presentingElIsCardModal) {
+        // The presenting element is not a card modal, so we do not
+        // need to care about layering and modal-specific styles.
+        const root = getElementRoot(baseEl);
+        const wrapperAnimation = createAnimation()
+            .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
+            .fromTo('opacity', '1', '1'); // Keep wrapper visible
+        const backdropAnimation = createAnimation()
+            .addElement(root.querySelector('ion-backdrop'))
+            .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
+        // Animate presentingEl from normal state to portrait state
+        const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
+        presentingAnimation
+            .addElement(presentingEl)
+            .afterStyles({
+            transform: toTransform,
+        })
+            .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
+            .keyframes([
+            { offset: 0, transform: 'translateY(0px) scale(1)', filter: 'contrast(1)', borderRadius: '0px' },
+            { offset: 0.2, transform: 'translateY(0px) scale(1)', filter: 'contrast(1)', borderRadius: '10px 10px 0 0' },
+            { offset: 1, transform: toTransform, filter: 'contrast(0.85)', borderRadius: '10px 10px 0 0' },
+        ]);
+        baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
+    }
+    else {
+        // The presenting element is also a card modal, so we need
+        // to handle layering and modal-specific styles.
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0) scale(1)`;
+        presentingAnimation
+            .addElement(presentingEl)
+            .afterStyles({
+            transform: toTransform,
+        })
+            .fromTo('transform', fromTransform, toTransform);
+        const shadowAnimation = createAnimation()
+            .addElement(presentingElRoot.querySelector('.modal-shadow'))
+            .afterStyles({
+            transform: toTransform,
+            opacity: '0',
+        })
+            .fromTo('transform', fromTransform, toTransform);
+        baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
+    }
+    return baseAnimation;
+};

package/dist/collection/components/modal/animations/md.enter.js

@@ -28,52 +28,12 @@ export const mdEnterAnimation = (baseEl, opts) => {
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
     // The content animation is only added if scrolling is enabled for
     // all the breakpoints.
-    expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
+    !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
     const baseAnimation = createAnimation()
         .addElement(baseEl)
         .easing('cubic-bezier(0.36,0.66,0.04,1)')
         .duration(280)
-        .addAnimation([backdropAnimation, wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * There are some browsers that causes flickering when
-         * dragging the content when scroll is enabled at every
-         * breakpoint. This is due to the wrapper element being
-         * transformed off the screen and having a snap animation.
-         *
-         * A workaround is to clone the footer element and append
-         * it outside of the wrapper element. This way, the footer
-         * is still visible and the drag can be done without
-         * flickering. The original footer is hidden until the modal
-         * is dismissed. This maintains the animation of the footer
-         * when the modal is dismissed.
-         *
-         * The workaround needs to be done before the animation starts
-         * so there are no flickering issues.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        /**
-         * This check is needed to prevent more than one footer
-         * from being appended to the shadow root.
-         * Otherwise, iOS and MD enter animations would append
-         * the footer twice.
-         */
-        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
-        if (ionFooter && !ionFooterAlreadyAppended) {
-            const footerHeight = ionFooter.clientHeight;
-            const clonedFooter = ionFooter.cloneNode(true);
-            baseEl.shadowRoot.appendChild(clonedFooter);
-            ionFooter.style.setProperty('display', 'none');
-            ionFooter.setAttribute('aria-hidden', 'true');
-            // Padding is added to prevent some content from being hidden.
-            const page = baseEl.querySelector('.ion-page');
-            page.style.setProperty('padding-bottom', `${footerHeight}px`);
-        }
-    });
+        .addAnimation([backdropAnimation, wrapperAnimation]);
     if (contentAnimation) {
         baseAnimation.addAnimation(contentAnimation);
     }

package/dist/collection/components/modal/animations/md.leave.js

@@ -16,7 +16,7 @@ const createLeaveAnimation = () => {
  * Md Modal Leave Animation
  */
 export const mdLeaveAnimation = (baseEl, opts) => {
-    const { currentBreakpoint, expandToScroll } = opts;
+    const { currentBreakpoint } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
@@ -24,28 +24,6 @@ export const mdLeaveAnimation = (baseEl, opts) => {
     const baseAnimation = createAnimation()
         .easing('cubic-bezier(0.47,0,0.745,0.715)')
         .duration(200)
-        .addAnimation([backdropAnimation, wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the visibility to the original, so the footer
-         * dismisses with the modal and doesn't stay
-         * until the modal is removed from the DOM.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        if (ionFooter) {
-            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
-            ionFooter.style.removeProperty('display');
-            ionFooter.removeAttribute('aria-hidden');
-            clonedFooter.style.setProperty('display', 'none');
-            clonedFooter.setAttribute('aria-hidden', 'true');
-            const page = baseEl.querySelector('.ion-page');
-            page.style.removeProperty('padding-bottom');
-        }
-    });
+        .addAnimation([backdropAnimation, wrapperAnimation]);
     return baseAnimation;
 };

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

@@ -35,6 +35,9 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     let offset = 0;
     let canDismissBlocksGesture = false;
     let cachedScrollEl = null;
+    let cachedFooterEls = null;
+    let cachedFooterYPosition = null;
+    let currentFooterState = null;
     const canDismissMaxStep = 0.95;
     const maxBreakpoint = breakpoints[breakpoints.length - 1];
     const minBreakpoint = breakpoints[0];
@@ -64,29 +67,87 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
     };
     /**
-     * Toggles the visible modal footer when `expandToScroll` is disabled.
-     * @param footer The footer to show.
+     * Toggles the footer to an absolute position while moving to prevent
+     * it from shaking while the sheet is being dragged.
+     * @param newPosition Whether the footer is in a moving or stationary position.
      */
-    const swapFooterVisibility = (footer) => {
-        const originalFooter = baseEl.querySelector('ion-footer');
-        if (!originalFooter) {
-            return;
+    const swapFooterPosition = (newPosition) => {
+        if (!cachedFooterEls) {
+            cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
+            if (!cachedFooterEls.length) {
+                return;
+            }
         }
-        const clonedFooter = wrapperEl.nextElementSibling;
-        const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
-        const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
-        footerToShow.style.removeProperty('display');
-        footerToShow.removeAttribute('aria-hidden');
         const page = baseEl.querySelector('.ion-page');
-        if (footer === 'original') {
-            page.style.removeProperty('padding-bottom');
+        currentFooterState = newPosition;
+        if (newPosition === 'stationary') {
+            cachedFooterEls.forEach((cachedFooterEl) => {
+                // Reset positioning styles to allow normal document flow
+                cachedFooterEl.classList.remove('modal-footer-moving');
+                cachedFooterEl.style.removeProperty('position');
+                cachedFooterEl.style.removeProperty('width');
+                cachedFooterEl.style.removeProperty('height');
+                cachedFooterEl.style.removeProperty('top');
+                cachedFooterEl.style.removeProperty('left');
+                page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
+                // Move to page
+                page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
+            });
         }
         else {
-            const pagePadding = footerToShow.clientHeight;
-            page.style.setProperty('padding-bottom', `${pagePadding}px`);
+            let footerHeights = 0;
+            cachedFooterEls.forEach((cachedFooterEl, index) => {
+                // Get both the footer and document body positions
+                const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
+                const bodyRect = document.body.getBoundingClientRect();
+                // Calculate the total height of all footers
+                // so we can add padding to the page element
+                footerHeights += cachedFooterEl.clientHeight;
+                // Calculate absolute position relative to body
+                // We need to subtract the body's offsetTop to get true position within document.body
+                const absoluteTop = cachedFooterElRect.top - bodyRect.top;
+                const absoluteLeft = cachedFooterElRect.left - bodyRect.left;
+                // Capture the footer's current dimensions and store them in CSS variables for
+                // later use when applying absolute positioning.
+                cachedFooterEl.style.setProperty('--pinned-width', `${cachedFooterEl.clientWidth}px`);
+                cachedFooterEl.style.setProperty('--pinned-height', `${cachedFooterEl.clientHeight}px`);
+                cachedFooterEl.style.setProperty('--pinned-top', `${absoluteTop}px`);
+                cachedFooterEl.style.setProperty('--pinned-left', `${absoluteLeft}px`);
+                // Only cache the first footer's Y position
+                // This is used to determine if the sheet has been moved below the footer
+                // and needs to be swapped back to stationary so it collapses correctly.
+                if (index === 0) {
+                    cachedFooterYPosition = absoluteTop;
+                    // If there's a header, we need to combine the header height with the footer position
+                    // because the header moves with the drag handle, so when it starts overlapping the footer,
+                    // we need to account for that.
+                    const header = baseEl.querySelector('ion-header');
+                    if (header) {
+                        cachedFooterYPosition -= header.clientHeight;
+                    }
+                }
+            });
+            // Apply the pinning of styles after we've calculated everything
+            // so that we don't cause layouts to shift while calculating the footer positions.
+            // Otherwise, with multiple footers we'll end up capturing the wrong positions.
+            cachedFooterEls.forEach((cachedFooterEl) => {
+                // Add padding to the parent element to prevent content from being hidden
+                // when the footer is positioned absolutely. This has to be done before we
+                // make the footer absolutely positioned or we may accidentally cause the
+                // sheet to scroll.
+                page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
+                // Apply positioning styles to keep footer at bottom
+                cachedFooterEl.classList.add('modal-footer-moving');
+                // Apply our preserved styles to pin the footer
+                cachedFooterEl.style.setProperty('position', 'absolute');
+                cachedFooterEl.style.setProperty('width', 'var(--pinned-width)');
+                cachedFooterEl.style.setProperty('height', 'var(--pinned-height)');
+                cachedFooterEl.style.setProperty('top', 'var(--pinned-top)');
+                cachedFooterEl.style.setProperty('left', 'var(--pinned-left)');
+                // Move the element to the body when everything else is done
+                document.body.appendChild(cachedFooterEl);
+            });
         }
-        footerToHide.style.setProperty('display', 'none');
-        footerToHide.setAttribute('aria-hidden', 'true');
     };
     /**
      * After the entering animation completes,
@@ -180,12 +241,11 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         }
         /**
          * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the original, so if the modal
-         * is dismissed, the footer dismisses with the modal
-         * and doesn't stay on the screen after the modal is gone.
+         * the footer position to moving so that it doesn't shake
+         * while the sheet is being dragged.
          */
         if (!expandToScroll) {
-            swapFooterVisibility('original');
+            swapFooterPosition('moving');
         }
         /**
          * If we are pulling down, then it is possible we are pulling on the content.
@@ -204,6 +264,21 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         animation.progressStart(true, 1 - currentBreakpoint);
     };
     const onMove = (detail) => {
+        /**
+         * If `expandToScroll` is disabled, we need to see if we're currently below
+         * the footer element and the footer is in a stationary position. If so,
+         * we need to make the stationary the original position so that the footer
+         * collapses with the sheet.
+         */
+        if (!expandToScroll && cachedFooterYPosition !== null && currentFooterState !== null) {
+            // Check if we need to swap the footer position
+            if (detail.currentY >= cachedFooterYPosition && currentFooterState === 'moving') {
+                swapFooterPosition('stationary');
+            }
+            else if (detail.currentY < cachedFooterYPosition && currentFooterState === 'stationary') {
+                swapFooterPosition('moving');
+            }
+        }
         /**
          * If `expandToScroll` is disabled, and an upwards swipe gesture is done within
          * the scrollable content, we should not allow the swipe gesture to continue.
@@ -263,6 +338,14 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          * is not scrolled to the top.
          */
         if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
+            /**
+             * If expand to scroll is disabled, we need to make sure we swap the footer position
+             * back to stationary so that it will collapse correctly if the modal is dismissed without
+             * dragging (e.g. through a dismiss button).
+             * This can cause issues if the user has a modal with content that can be dragged, as we'll
+             * swap to moving on drag and if we don't swap back here then the footer will get stuck.
+             */
+            swapFooterPosition('stationary');
             return;
         }
         /**
@@ -337,14 +420,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          * snapping animation completes.
          */
         gesture.enable(false);
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the cloned one so the footer
-         * doesn't flicker when the sheet's height is animated.
-         */
-        if (!expandToScroll && shouldRemainOpen) {
-            swapFooterVisibility('cloned');
-        }
         if (shouldPreventDismiss) {
             handleCanDismiss(baseEl, animation);
         }
@@ -361,10 +436,28 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
             contentEl.scrollY = true;
         }
+        /**
+         * If expandToScroll is disabled and we're animating
+         * to close the sheet, we need to swap
+         * the footer position to stationary so that it
+         * will collapse correctly. We cannot just always swap
+         * here or it'll be jittery while animating movement.
+         */
+        if (!expandToScroll && snapToBreakpoint === 0) {
+            swapFooterPosition('stationary');
+        }
         return new Promise((resolve) => {
             animation
                 .onFinish(() => {
                 if (shouldRemainOpen) {
+                    /**
+                     * If expandToScroll is disabled, we need to swap
+                     * the footer position to stationary so that it
+                     * will act as it would by default.
+                     */
+                    if (!expandToScroll) {
+                        swapFooterPosition('stationary');
+                    }
                     /**
                      * Once the snapping animation completes,
                      * we need to reset the animation to go

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

@@ -331,14 +331,4 @@ ion-backdrop {
   border-start-end-radius: var(--border-radius);
   border-end-end-radius: 0;
   border-end-start-radius: 0;
-}
-
-/**
- * Sheet modals require an additional padding as mentioned in the
- * `core.scss` file. However, there's a workaround that requires
- * a cloned footer to be added to the modal. This is only necessary
- * because the core styles are not being applied to the cloned footer.
- */
-:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type {
-  padding-top: 6px;
 }