@ionic/core 7.5.8-dev.11701383555.17254408 → 7.5.8-dev.11701448395.18799530

package/components/ion-refresher-content.js

@@ -3,8 +3,9 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
-import { c as config, b as getIonMode, a as isPlatform } from './ionic-global.js';
 import { n as caretBackSharp, o as arrowDown } from './index7.js';
+import { c as config, b as getIonMode } from './ionic-global.js';
+import { e as supportsRubberBandScrolling } from './refresher.utils.js';
 import { d as defineCustomElement$2, S as SPINNERS } from './spinner.js';
 import { d as defineCustomElement$3 } from './icon.js';
 
@@ -20,9 +21,15 @@ const RefresherContent = /*@__PURE__*/ proxyCustomElement(class RefresherContent
     }
     componentWillLoad() {
         if (this.pullingIcon === undefined) {
+            /**
+             * The native iOS refresher uses a spinner instead of
+             * an icon, so we need to see if this device supports
+             * the native iOS refresher.
+             */
+            const hasRubberBandScrolling = supportsRubberBandScrolling();
             const mode = getIonMode(this);
-            const overflowRefresher = this.el.style.webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
-            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular');
+            const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
+            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
             const mode = getIonMode(this);

package/components/ion-refresher.js

@@ -1,192 +1,13 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { writeTask, proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, writeTask, readTask, h, Host } from '@stencil/core/internal/client';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
 import { I as ION_CONTENT_CLASS_SELECTOR, b as ION_CONTENT_ELEMENT_SELECTOR, p as printIonContentErrorMsg, g as getScrollElement } from './index8.js';
-import { t as transitionEndAsync, c as componentOnReady, m as clamp, g as getElementRoot, r as raf } from './helpers.js';
+import { t as transitionEndAsync, m as clamp, g as getElementRoot, c as componentOnReady, r as raf } from './helpers.js';
 import { c as hapticImpact, I as ImpactStyle } from './haptic.js';
-import { a as isPlatform, b as getIonMode } from './ionic-global.js';
-import { c as createAnimation } from './animation.js';
-
-const getRefresherAnimationType = (contentEl) => {
-    const previousSibling = contentEl.previousElementSibling;
-    const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
-    return hasHeader ? 'translate' : 'scale';
-};
-const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
-    return type === 'scale'
-        ? createScaleAnimation(pullingSpinner, refresherEl)
-        : createTranslateAnimation(pullingSpinner, refresherEl);
-};
-const createBaseAnimation = (pullingRefresherIcon) => {
-    const spinner = pullingRefresherIcon.querySelector('ion-spinner');
-    const circle = spinner.shadowRoot.querySelector('circle');
-    const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
-    const arrowContainer = pullingRefresherIcon.querySelector('.arrow-container');
-    const arrow = arrowContainer ? arrowContainer.querySelector('ion-icon') : null;
-    const baseAnimation = createAnimation().duration(1000).easing('ease-out');
-    const spinnerArrowContainerAnimation = createAnimation()
-        .addElement(spinnerArrowContainer)
-        .keyframes([
-        { offset: 0, opacity: '0.3' },
-        { offset: 0.45, opacity: '0.3' },
-        { offset: 0.55, opacity: '1' },
-        { offset: 1, opacity: '1' },
-    ]);
-    const circleInnerAnimation = createAnimation()
-        .addElement(circle)
-        .keyframes([
-        { offset: 0, strokeDasharray: '1px, 200px' },
-        { offset: 0.2, strokeDasharray: '1px, 200px' },
-        { offset: 0.55, strokeDasharray: '100px, 200px' },
-        { offset: 1, strokeDasharray: '100px, 200px' },
-    ]);
-    const circleOuterAnimation = createAnimation()
-        .addElement(spinner)
-        .keyframes([
-        { offset: 0, transform: 'rotate(-90deg)' },
-        { offset: 1, transform: 'rotate(210deg)' },
-    ]);
-    /**
-     * Only add arrow animation if present
-     * this allows users to customize the spinners
-     * without errors being thrown
-     */
-    if (arrowContainer && arrow) {
-        const arrowContainerAnimation = createAnimation()
-            .addElement(arrowContainer)
-            .keyframes([
-            { offset: 0, transform: 'rotate(0deg)' },
-            { offset: 0.3, transform: 'rotate(0deg)' },
-            { offset: 0.55, transform: 'rotate(280deg)' },
-            { offset: 1, transform: 'rotate(400deg)' },
-        ]);
-        const arrowAnimation = createAnimation()
-            .addElement(arrow)
-            .keyframes([
-            { offset: 0, transform: 'translateX(2px) scale(0)' },
-            { offset: 0.3, transform: 'translateX(2px) scale(0)' },
-            { offset: 0.55, transform: 'translateX(-1.5px) scale(1)' },
-            { offset: 1, transform: 'translateX(-1.5px) scale(1)' },
-        ]);
-        baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
-    }
-    return baseAnimation.addAnimation([spinnerArrowContainerAnimation, circleInnerAnimation, circleOuterAnimation]);
-};
-const createScaleAnimation = (pullingRefresherIcon, refresherEl) => {
-    /**
-     * Do not take the height of the refresher icon
-     * because at this point the DOM has not updated,
-     * so the refresher icon is still hidden with
-     * display: none.
-     * The `ion-refresher` container height
-     * is roughly the amount we need to offset
-     * the icon by when pulling down.
-     */
-    const height = refresherEl.clientHeight;
-    const spinnerAnimation = createAnimation()
-        .addElement(pullingRefresherIcon)
-        .keyframes([
-        { offset: 0, transform: `scale(0) translateY(-${height}px)` },
-        { offset: 1, transform: 'scale(1) translateY(100px)' },
-    ]);
-    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
-};
-const createTranslateAnimation = (pullingRefresherIcon, refresherEl) => {
-    /**
-     * Do not take the height of the refresher icon
-     * because at this point the DOM has not updated,
-     * so the refresher icon is still hidden with
-     * display: none.
-     * The `ion-refresher` container height
-     * is roughly the amount we need to offset
-     * the icon by when pulling down.
-     */
-    const height = refresherEl.clientHeight;
-    const spinnerAnimation = createAnimation()
-        .addElement(pullingRefresherIcon)
-        .keyframes([
-        { offset: 0, transform: `translateY(-${height}px)` },
-        { offset: 1, transform: 'translateY(100px)' },
-    ]);
-    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
-};
-const createSnapBackAnimation = (pullingRefresherIcon) => {
-    return createAnimation()
-        .duration(125)
-        .addElement(pullingRefresherIcon)
-        .fromTo('transform', 'translateY(var(--ion-pulling-refresher-translate, 100px))', 'translateY(0px)');
-};
-// iOS Native Refresher
-// -----------------------------
-const setSpinnerOpacity = (spinner, opacity) => {
-    spinner.style.setProperty('opacity', opacity.toString());
-};
-const handleScrollWhilePulling = (ticks, numTicks, pullAmount) => {
-    const max = 1;
-    writeTask(() => {
-        ticks.forEach((el, i) => {
-            /**
-             * Compute the opacity of each tick
-             * mark as a percentage of the pullAmount
-             * offset by max / numTicks so
-             * the tick marks are shown staggered.
-             */
-            const min = i * (max / numTicks);
-            const range = max - min;
-            const start = pullAmount - min;
-            const progression = clamp(0, start / range, 1);
-            el.style.setProperty('opacity', progression.toString());
-        });
-    });
-};
-const handleScrollWhileRefreshing = (spinner, lastVelocityY) => {
-    writeTask(() => {
-        // If user pulls down quickly, the spinner should spin faster
-        spinner.style.setProperty('--refreshing-rotation-duration', lastVelocityY >= 1.0 ? '0.5s' : '2s');
-        spinner.style.setProperty('opacity', '1');
-    });
-};
-const translateElement = (el, value, duration = 200) => {
-    if (!el) {
-        return Promise.resolve();
-    }
-    const trans = transitionEndAsync(el, duration);
-    writeTask(() => {
-        el.style.setProperty('transition', `${duration}ms all ease-out`);
-        if (value === undefined) {
-            el.style.removeProperty('transform');
-        }
-        else {
-            el.style.setProperty('transform', `translate3d(0px, ${value}, 0px)`);
-        }
-    });
-    return trans;
-};
-// Utils
-// -----------------------------
-const shouldUseNativeRefresher = async (referenceEl, mode) => {
-    const refresherContent = referenceEl.querySelector('ion-refresher-content');
-    if (!refresherContent) {
-        return Promise.resolve(false);
-    }
-    await new Promise((resolve) => componentOnReady(refresherContent, resolve));
-    const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
-    const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
-    return (pullingSpinner !== null &&
-        refreshingSpinner !== null &&
-        /**
-         * We use webkitOverflowScrolling for feature detection with rubber band scrolling
-         * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
-         * However, it will be the empty string on iOS.
-         * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
-         * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
-         * set on the element, even if the platform does not support that.
-         */
-        ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
-            mode === 'md'));
-};
+import { b as getIonMode } from './ionic-global.js';
+import { s as shouldUseNativeRefresher, t as translateElement, a as setSpinnerOpacity, h as handleScrollWhileRefreshing, b as handleScrollWhilePulling, c as createPullingAnimation, d as createSnapBackAnimation, g as getRefresherAnimationType } from './refresher.utils.js';
 
 const refresherIosCss = "ion-refresher{top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}@supports (inset-inline-start: 0){ion-refresher{inset-inline-start:0}}@supports not (inset-inline-start: 0){ion-refresher{left:0}:host-context([dir=rtl]) ion-refresher{left:unset;right:unset;right:0}[dir=rtl] ion-refresher{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){ion-refresher:dir(rtl){left:unset;right:unset;right:0}}}ion-refresher.refresher-active{display:block}ion-refresher-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{-webkit-transform-origin:center;transform-origin:center;-webkit-transition:200ms;transition:200ms;font-size:30px;text-align:center}:host-context([dir=rtl]) .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}[dir=rtl] .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}@supports selector(:dir(rtl)){.refresher-pulling-icon:dir(rtl),.refresher-refreshing-icon:dir(rtl){-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-ios .refresher-pulling-icon,.refresher-ios .refresher-refreshing-icon{color:var(--ion-text-color, #000)}.refresher-ios .refresher-pulling-text,.refresher-ios .refresher-refreshing-text{color:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-lines-ios line,.refresher-ios .refresher-refreshing .spinner-lines-small-ios line,.refresher-ios .refresher-refreshing .spinner-crescent circle{stroke:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-bubbles circle,.refresher-ios .refresher-refreshing .spinner-circles circle,.refresher-ios .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color, #000)}ion-refresher.refresher-native{display:block;z-index:1}ion-refresher.refresher-native ion-spinner{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}.refresher-native .refresher-refreshing ion-spinner{--refreshing-rotation-duration:2s;display:none;-webkit-animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards;animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards}.refresher-native .refresher-refreshing{display:none;-webkit-animation:250ms linear refresher-pop forwards;animation:250ms linear refresher-pop forwards}.refresher-native ion-spinner{width:32px;height:32px;color:var(--ion-color-step-450, #747577)}.refresher-native.refresher-refreshing .refresher-pulling ion-spinner,.refresher-native.refresher-completing .refresher-pulling ion-spinner{display:none}.refresher-native.refresher-refreshing .refresher-refreshing ion-spinner,.refresher-native.refresher-completing .refresher-refreshing ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-pulling ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-refreshing ion-spinner{display:none}.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0) rotate(180deg);transform:scale(0) rotate(180deg);-webkit-transition:300ms;transition:300ms}@-webkit-keyframes refresher-pop{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes refresher-pop{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes refresher-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@keyframes refresher-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}";
 

package/components/refresher.utils.js

@@ -0,0 +1,198 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { writeTask } from '@stencil/core/internal/client';
+import { c as createAnimation } from './animation.js';
+import { t as transitionEndAsync, c as componentOnReady, m as clamp } from './helpers.js';
+import { a as isPlatform } from './ionic-global.js';
+
+const getRefresherAnimationType = (contentEl) => {
+    const previousSibling = contentEl.previousElementSibling;
+    const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
+    return hasHeader ? 'translate' : 'scale';
+};
+const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
+    return type === 'scale'
+        ? createScaleAnimation(pullingSpinner, refresherEl)
+        : createTranslateAnimation(pullingSpinner, refresherEl);
+};
+const createBaseAnimation = (pullingRefresherIcon) => {
+    const spinner = pullingRefresherIcon.querySelector('ion-spinner');
+    const circle = spinner.shadowRoot.querySelector('circle');
+    const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
+    const arrowContainer = pullingRefresherIcon.querySelector('.arrow-container');
+    const arrow = arrowContainer ? arrowContainer.querySelector('ion-icon') : null;
+    const baseAnimation = createAnimation().duration(1000).easing('ease-out');
+    const spinnerArrowContainerAnimation = createAnimation()
+        .addElement(spinnerArrowContainer)
+        .keyframes([
+        { offset: 0, opacity: '0.3' },
+        { offset: 0.45, opacity: '0.3' },
+        { offset: 0.55, opacity: '1' },
+        { offset: 1, opacity: '1' },
+    ]);
+    const circleInnerAnimation = createAnimation()
+        .addElement(circle)
+        .keyframes([
+        { offset: 0, strokeDasharray: '1px, 200px' },
+        { offset: 0.2, strokeDasharray: '1px, 200px' },
+        { offset: 0.55, strokeDasharray: '100px, 200px' },
+        { offset: 1, strokeDasharray: '100px, 200px' },
+    ]);
+    const circleOuterAnimation = createAnimation()
+        .addElement(spinner)
+        .keyframes([
+        { offset: 0, transform: 'rotate(-90deg)' },
+        { offset: 1, transform: 'rotate(210deg)' },
+    ]);
+    /**
+     * Only add arrow animation if present
+     * this allows users to customize the spinners
+     * without errors being thrown
+     */
+    if (arrowContainer && arrow) {
+        const arrowContainerAnimation = createAnimation()
+            .addElement(arrowContainer)
+            .keyframes([
+            { offset: 0, transform: 'rotate(0deg)' },
+            { offset: 0.3, transform: 'rotate(0deg)' },
+            { offset: 0.55, transform: 'rotate(280deg)' },
+            { offset: 1, transform: 'rotate(400deg)' },
+        ]);
+        const arrowAnimation = createAnimation()
+            .addElement(arrow)
+            .keyframes([
+            { offset: 0, transform: 'translateX(2px) scale(0)' },
+            { offset: 0.3, transform: 'translateX(2px) scale(0)' },
+            { offset: 0.55, transform: 'translateX(-1.5px) scale(1)' },
+            { offset: 1, transform: 'translateX(-1.5px) scale(1)' },
+        ]);
+        baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
+    }
+    return baseAnimation.addAnimation([spinnerArrowContainerAnimation, circleInnerAnimation, circleOuterAnimation]);
+};
+const createScaleAnimation = (pullingRefresherIcon, refresherEl) => {
+    /**
+     * Do not take the height of the refresher icon
+     * because at this point the DOM has not updated,
+     * so the refresher icon is still hidden with
+     * display: none.
+     * The `ion-refresher` container height
+     * is roughly the amount we need to offset
+     * the icon by when pulling down.
+     */
+    const height = refresherEl.clientHeight;
+    const spinnerAnimation = createAnimation()
+        .addElement(pullingRefresherIcon)
+        .keyframes([
+        { offset: 0, transform: `scale(0) translateY(-${height}px)` },
+        { offset: 1, transform: 'scale(1) translateY(100px)' },
+    ]);
+    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
+};
+const createTranslateAnimation = (pullingRefresherIcon, refresherEl) => {
+    /**
+     * Do not take the height of the refresher icon
+     * because at this point the DOM has not updated,
+     * so the refresher icon is still hidden with
+     * display: none.
+     * The `ion-refresher` container height
+     * is roughly the amount we need to offset
+     * the icon by when pulling down.
+     */
+    const height = refresherEl.clientHeight;
+    const spinnerAnimation = createAnimation()
+        .addElement(pullingRefresherIcon)
+        .keyframes([
+        { offset: 0, transform: `translateY(-${height}px)` },
+        { offset: 1, transform: 'translateY(100px)' },
+    ]);
+    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
+};
+const createSnapBackAnimation = (pullingRefresherIcon) => {
+    return createAnimation()
+        .duration(125)
+        .addElement(pullingRefresherIcon)
+        .fromTo('transform', 'translateY(var(--ion-pulling-refresher-translate, 100px))', 'translateY(0px)');
+};
+// iOS Native Refresher
+// -----------------------------
+const setSpinnerOpacity = (spinner, opacity) => {
+    spinner.style.setProperty('opacity', opacity.toString());
+};
+const handleScrollWhilePulling = (ticks, numTicks, pullAmount) => {
+    const max = 1;
+    writeTask(() => {
+        ticks.forEach((el, i) => {
+            /**
+             * Compute the opacity of each tick
+             * mark as a percentage of the pullAmount
+             * offset by max / numTicks so
+             * the tick marks are shown staggered.
+             */
+            const min = i * (max / numTicks);
+            const range = max - min;
+            const start = pullAmount - min;
+            const progression = clamp(0, start / range, 1);
+            el.style.setProperty('opacity', progression.toString());
+        });
+    });
+};
+const handleScrollWhileRefreshing = (spinner, lastVelocityY) => {
+    writeTask(() => {
+        // If user pulls down quickly, the spinner should spin faster
+        spinner.style.setProperty('--refreshing-rotation-duration', lastVelocityY >= 1.0 ? '0.5s' : '2s');
+        spinner.style.setProperty('opacity', '1');
+    });
+};
+const translateElement = (el, value, duration = 200) => {
+    if (!el) {
+        return Promise.resolve();
+    }
+    const trans = transitionEndAsync(el, duration);
+    writeTask(() => {
+        el.style.setProperty('transition', `${duration}ms all ease-out`);
+        if (value === undefined) {
+            el.style.removeProperty('transform');
+        }
+        else {
+            el.style.setProperty('transform', `translate3d(0px, ${value}, 0px)`);
+        }
+    });
+    return trans;
+};
+// Utils
+// -----------------------------
+/**
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
+ * The ios + mobile platform check ensures that desktop Safari is not included. Desktop Safari
+ * has a slightly different rubber band effect that is not compatible with the native refresher
+ * in Ionic.
+ *
+ * We also need to be careful not to include devices that spoof their user agent.
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
+ * isPlatform('ios') and isPlatform('mobile') both return true. To work around this,
+ * we check to see if the apple-pay-logo is supported as a named image which is only
+ * true on Apple devices.
+ *
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
+ * that this will be removed on iOS in the future too.
+ */
+const supportsRubberBandScrolling = () => {
+    return (isPlatform('ios') && isPlatform('mobile') && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)'));
+};
+const shouldUseNativeRefresher = async (referenceEl, mode) => {
+    const refresherContent = referenceEl.querySelector('ion-refresher-content');
+    if (!refresherContent) {
+        return Promise.resolve(false);
+    }
+    await new Promise((resolve) => componentOnReady(refresherContent, resolve));
+    const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
+    const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
+    return (pullingSpinner !== null &&
+        refreshingSpinner !== null &&
+        ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
+};
+
+export { setSpinnerOpacity as a, handleScrollWhilePulling as b, createPullingAnimation as c, createSnapBackAnimation as d, supportsRubberBandScrolling as e, getRefresherAnimationType as g, handleScrollWhileRefreshing as h, shouldUseNativeRefresher as s, translateElement as t };

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

@@ -176,6 +176,25 @@ const translateElement = (el, value, duration = 200) => {
 };
 // Utils
 // -----------------------------
+/**
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
+ * The ios + mobile platform check ensures that desktop Safari is not included. Desktop Safari
+ * has a slightly different rubber band effect that is not compatible with the native refresher
+ * in Ionic.
+ *
+ * We also need to be careful not to include devices that spoof their user agent.
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
+ * isPlatform('ios') and isPlatform('mobile') both return true. To work around this,
+ * we check to see if the apple-pay-logo is supported as a named image which is only
+ * true on Apple devices.
+ *
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
+ * that this will be removed on iOS in the future too.
+ */
+const supportsRubberBandScrolling = () => {
+    return (ionicGlobal.isPlatform('ios') && ionicGlobal.isPlatform('mobile') && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)'));
+};
 const shouldUseNativeRefresher = async (referenceEl, mode) => {
     const refresherContent = referenceEl.querySelector('ion-refresher-content');
     if (!refresherContent) {
@@ -186,16 +205,7 @@ const shouldUseNativeRefresher = async (referenceEl, mode) => {
     const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
     return (pullingSpinner !== null &&
         refreshingSpinner !== null &&
-        /**
-         * We use webkitOverflowScrolling for feature detection with rubber band scrolling
-         * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
-         * However, it will be the empty string on iOS.
-         * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
-         * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
-         * set on the element, even if the platform does not support that.
-         */
-        ((mode === 'ios' && ionicGlobal.isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
-            mode === 'md'));
+        ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
 };
 
 const refresherIosCss = "ion-refresher{top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}@supports (inset-inline-start: 0){ion-refresher{inset-inline-start:0}}@supports not (inset-inline-start: 0){ion-refresher{left:0}:host-context([dir=rtl]) ion-refresher{left:unset;right:unset;right:0}[dir=rtl] ion-refresher{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){ion-refresher:dir(rtl){left:unset;right:unset;right:0}}}ion-refresher.refresher-active{display:block}ion-refresher-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{-webkit-transform-origin:center;transform-origin:center;-webkit-transition:200ms;transition:200ms;font-size:30px;text-align:center}:host-context([dir=rtl]) .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}[dir=rtl] .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}@supports selector(:dir(rtl)){.refresher-pulling-icon:dir(rtl),.refresher-refreshing-icon:dir(rtl){-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-ios .refresher-pulling-icon,.refresher-ios .refresher-refreshing-icon{color:var(--ion-text-color, #000)}.refresher-ios .refresher-pulling-text,.refresher-ios .refresher-refreshing-text{color:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-lines-ios line,.refresher-ios .refresher-refreshing .spinner-lines-small-ios line,.refresher-ios .refresher-refreshing .spinner-crescent circle{stroke:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-bubbles circle,.refresher-ios .refresher-refreshing .spinner-circles circle,.refresher-ios .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color, #000)}ion-refresher.refresher-native{display:block;z-index:1}ion-refresher.refresher-native ion-spinner{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}.refresher-native .refresher-refreshing ion-spinner{--refreshing-rotation-duration:2s;display:none;-webkit-animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards;animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards}.refresher-native .refresher-refreshing{display:none;-webkit-animation:250ms linear refresher-pop forwards;animation:250ms linear refresher-pop forwards}.refresher-native ion-spinner{width:32px;height:32px;color:var(--ion-color-step-450, #747577)}.refresher-native.refresher-refreshing .refresher-pulling ion-spinner,.refresher-native.refresher-completing .refresher-pulling ion-spinner{display:none}.refresher-native.refresher-refreshing .refresher-refreshing ion-spinner,.refresher-native.refresher-completing .refresher-refreshing ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-pulling ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-refreshing ion-spinner{display:none}.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0) rotate(180deg);transform:scale(0) rotate(180deg);-webkit-transition:300ms;transition:300ms}@-webkit-keyframes refresher-pop{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes refresher-pop{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes refresher-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@keyframes refresher-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}";
@@ -823,9 +833,15 @@ const RefresherContent = class {
     }
     componentWillLoad() {
         if (this.pullingIcon === undefined) {
+            /**
+             * The native iOS refresher uses a spinner instead of
+             * an icon, so we need to see if this device supports
+             * the native iOS refresher.
+             */
+            const hasRubberBandScrolling = supportsRubberBandScrolling();
             const mode = ionicGlobal.getIonMode(this);
-            const overflowRefresher = this.el.style.webkitOverflowScrolling !== undefined ? 'lines' : index$2.arrowDown;
-            this.pullingIcon = ionicGlobal.config.get('refreshingIcon', mode === 'ios' && ionicGlobal.isPlatform('mobile') ? ionicGlobal.config.get('spinner', overflowRefresher) : 'circular');
+            const overflowRefresher = hasRubberBandScrolling ? 'lines' : index$2.arrowDown;
+            this.pullingIcon = ionicGlobal.config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? ionicGlobal.config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
             const mode = ionicGlobal.getIonMode(this);

package/dist/collection/components/refresher/refresher.utils.js

@@ -162,6 +162,25 @@ export const translateElement = (el, value, duration = 200) => {
 };
 // Utils
 // -----------------------------
+/**
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
+ * The ios + mobile platform check ensures that desktop Safari is not included. Desktop Safari
+ * has a slightly different rubber band effect that is not compatible with the native refresher
+ * in Ionic.
+ *
+ * We also need to be careful not to include devices that spoof their user agent.
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
+ * isPlatform('ios') and isPlatform('mobile') both return true. To work around this,
+ * we check to see if the apple-pay-logo is supported as a named image which is only
+ * true on Apple devices.
+ *
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
+ * that this will be removed on iOS in the future too.
+ */
+export const supportsRubberBandScrolling = () => {
+    return (isPlatform('ios') && isPlatform('mobile') && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)'));
+};
 export const shouldUseNativeRefresher = async (referenceEl, mode) => {
     const refresherContent = referenceEl.querySelector('ion-refresher-content');
     if (!refresherContent) {
@@ -172,14 +191,5 @@ export const shouldUseNativeRefresher = async (referenceEl, mode) => {
     const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
     return (pullingSpinner !== null &&
         refreshingSpinner !== null &&
-        /**
-         * We use webkitOverflowScrolling for feature detection with rubber band scrolling
-         * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
-         * However, it will be the empty string on iOS.
-         * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
-         * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
-         * set on the element, even if the platform does not support that.
-         */
-        ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
-            mode === 'md'));
+        ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
 };

package/dist/collection/components/refresher-content/refresher-content.js

@@ -3,11 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
-import { isPlatform } from "../../utils/platform";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { arrowDown, caretBackSharp } from "ionicons/icons";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
+import { supportsRubberBandScrolling } from "../refresher/refresher.utils";
 import { SPINNERS } from "../spinner/spinner-configs";
 export class RefresherContent {
     constructor() {
@@ -19,9 +19,15 @@ export class RefresherContent {
     }
     componentWillLoad() {
         if (this.pullingIcon === undefined) {
+            /**
+             * The native iOS refresher uses a spinner instead of
+             * an icon, so we need to see if this device supports
+             * the native iOS refresher.
+             */
+            const hasRubberBandScrolling = supportsRubberBandScrolling();
             const mode = getIonMode(this);
-            const overflowRefresher = this.el.style.webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
-            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular');
+            const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
+            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
             const mode = getIonMode(this);

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-11-30T22:34:24",
+  "timestamp": "2023-12-01T16:36:44",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.8.0",