@ionic/core 7.5.7 → 7.5.8-nightly.20231130

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

@@ -6,180 +6,180 @@ import { createAnimation } from "../../utils/animation/animation";
 import { clamp, componentOnReady, transitionEndAsync } from "../../utils/helpers";
 import { isPlatform } from "../../utils/platform";
 export const getRefresherAnimationType = (contentEl) => {
-  const previousSibling = contentEl.previousElementSibling;
-  const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
-  return hasHeader ? 'translate' : 'scale';
+    const previousSibling = contentEl.previousElementSibling;
+    const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
+    return hasHeader ? 'translate' : 'scale';
 };
 export const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
-  return type === 'scale'
-    ? createScaleAnimation(pullingSpinner, refresherEl)
-    : createTranslateAnimation(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 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 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)' },
+    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' },
     ]);
-    baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
-  }
-  return baseAnimation.addAnimation([spinnerArrowContainerAnimation, circleInnerAnimation, circleOuterAnimation]);
+    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]);
+    /**
+     * 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]);
+    /**
+     * 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]);
 };
 export const createSnapBackAnimation = (pullingRefresherIcon) => {
-  return createAnimation()
-    .duration(125)
-    .addElement(pullingRefresherIcon)
-    .fromTo('transform', 'translateY(var(--ion-pulling-refresher-translate, 100px))', 'translateY(0px)');
+    return createAnimation()
+        .duration(125)
+        .addElement(pullingRefresherIcon)
+        .fromTo('transform', 'translateY(var(--ion-pulling-refresher-translate, 100px))', 'translateY(0px)');
 };
 // iOS Native Refresher
 // -----------------------------
 export const setSpinnerOpacity = (spinner, opacity) => {
-  spinner.style.setProperty('opacity', opacity.toString());
+    spinner.style.setProperty('opacity', opacity.toString());
 };
 export 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 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());
+        });
     });
-  });
 };
 export 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');
-  });
+    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');
+    });
 };
 export 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)`);
+    if (!el) {
+        return Promise.resolve();
     }
-  });
-  return trans;
+    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
 // -----------------------------
 export 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'));
+    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'));
 };

package/dist/collection/components/refresher/test/basic/refresher.e2e.js

@@ -8,31 +8,31 @@ import { pullToRefresh } from "../test.utils";
  * This behavior does not vary across directions.
  */
 configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('refresher: basic'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto('/src/components/refresher/test/basic', config);
-    });
-    test.describe('legacy refresher', () => {
-      test('should load more items when performing a pull-to-refresh', async ({ page }) => {
-        const items = page.locator('ion-item');
-        expect(await items.count()).toBe(30);
-        await pullToRefresh(page);
-        expect(await items.count()).toBe(60);
-      });
-    });
-    test.describe('native refresher', () => {
-      test('should load more items when performing a pull-to-refresh', async ({ page }) => {
-        const refresherContent = page.locator('ion-refresher-content');
-        refresherContent.evaluateHandle((el) => {
-          // Resets the pullingIcon to enable the native refresher
-          el.pullingIcon = undefined;
+    test.describe(title('refresher: basic'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/refresher/test/basic', config);
+        });
+        test.describe('legacy refresher', () => {
+            test('should load more items when performing a pull-to-refresh', async ({ page }) => {
+                const items = page.locator('ion-item');
+                expect(await items.count()).toBe(30);
+                await pullToRefresh(page);
+                expect(await items.count()).toBe(60);
+            });
+        });
+        test.describe('native refresher', () => {
+            test('should load more items when performing a pull-to-refresh', async ({ page }) => {
+                const refresherContent = page.locator('ion-refresher-content');
+                refresherContent.evaluateHandle((el) => {
+                    // Resets the pullingIcon to enable the native refresher
+                    el.pullingIcon = undefined;
+                });
+                await page.waitForChanges();
+                const items = page.locator('ion-item');
+                expect(await items.count()).toBe(30);
+                await pullToRefresh(page);
+                expect(await items.count()).toBe(60);
+            });
         });
-        await page.waitForChanges();
-        const items = page.locator('ion-item');
-        expect(await items.count()).toBe(30);
-        await pullToRefresh(page);
-        expect(await items.count()).toBe(60);
-      });
     });
-  });
 });

package/dist/collection/components/refresher/test/scroll-target/refresher.e2e.js

@@ -8,31 +8,31 @@ import { pullToRefresh } from "../test.utils";
  * This behavior does not vary across directions.
  */
 configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('refresher: custom scroll target'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto('/src/components/refresher/test/scroll-target', config);
-    });
-    test.describe('legacy refresher', () => {
-      test('should load more items when performing a pull-to-refresh', async ({ page }) => {
-        const items = page.locator('ion-item');
-        expect(await items.count()).toBe(30);
-        await pullToRefresh(page);
-        expect(await items.count()).toBe(60);
-      });
-    });
-    test.describe('native refresher', () => {
-      test('should load more items when performing a pull-to-refresh', async ({ page }) => {
-        const refresherContent = page.locator('ion-refresher-content');
-        refresherContent.evaluateHandle((el) => {
-          // Resets the pullingIcon to enable the native refresher
-          el.pullingIcon = undefined;
+    test.describe(title('refresher: custom scroll target'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/components/refresher/test/scroll-target', config);
+        });
+        test.describe('legacy refresher', () => {
+            test('should load more items when performing a pull-to-refresh', async ({ page }) => {
+                const items = page.locator('ion-item');
+                expect(await items.count()).toBe(30);
+                await pullToRefresh(page);
+                expect(await items.count()).toBe(60);
+            });
+        });
+        test.describe('native refresher', () => {
+            test('should load more items when performing a pull-to-refresh', async ({ page }) => {
+                const refresherContent = page.locator('ion-refresher-content');
+                refresherContent.evaluateHandle((el) => {
+                    // Resets the pullingIcon to enable the native refresher
+                    el.pullingIcon = undefined;
+                });
+                await page.waitForChanges();
+                const items = page.locator('ion-item');
+                expect(await items.count()).toBe(30);
+                await pullToRefresh(page);
+                expect(await items.count()).toBe(60);
+            });
         });
-        await page.waitForChanges();
-        const items = page.locator('ion-item');
-        expect(await items.count()).toBe(30);
-        await pullToRefresh(page);
-        expect(await items.count()).toBe(60);
-      });
     });
-  });
 });

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

@@ -13,10 +13,10 @@ import { dragElementByYAxis } from "../../../utils/test/playwright/index";
  * @param selector The element selector to center the drag gesture on. Defaults to `body`.
  */
 const pullToRefresh = async (page, selector = 'body') => {
-  const target = page.locator(selector);
-  await page.waitForSelector('ion-refresher.hydrated', { state: 'attached' });
-  const ev = await page.spyOnEvent('ionRefreshComplete');
-  await dragElementByYAxis(target, page, 320);
-  await ev.next();
+    const target = page.locator(selector);
+    await page.waitForSelector('ion-refresher.hydrated', { state: 'attached' });
+    const ev = await page.spyOnEvent('ionRefreshComplete');
+    await dragElementByYAxis(target, page, 320);
+    await ev.next();
 };
 export { pullToRefresh };