@ionic/core 7.5.4-dev.11699310489.151b2717 → 7.5.4-dev.11699469920.1af6ea12

package/dist/collection/components/select/select.js

@@ -465,6 +465,8 @@ export class Select {
       style['has-placeholder'] = this.placeholder !== undefined;
       style['has-value'] = this.hasValue();
       style['has-focus'] = this.isExpanded;
+      // TODO(FW-3194): remove this
+      style['legacy'] = !!this.legacy;
     }
     this.ionStyle.emit(style);
   }

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

@@ -110,6 +110,11 @@
   overflow: hidden;
 }
 
+:host(.in-item:not(.legacy-select)) {
+  flex: 1 1 0;
+  width: 0;
+}
+
 :host(.in-item.legacy-select) {
   position: static;
   max-width: 45%;

package/dist/collection/components/select/test/legacy/wrapping/select.e2e.js

@@ -27,7 +27,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(`
         <ion-item>
           <ion-label>Really long label should not wrap</ion-label>
-          <ion-select value="wrap" class="ion-text-wrap">
+          <ion-select value="wrap" legacy="true" class="ion-text-wrap">
             <ion-select-option value="wrap">Should wrap value only when label exists and really long text exists to make it wrap the text</ion-select-option>
           </ion-select>
         </ion-item>

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -9,6 +9,18 @@ export class SkeletonText {
   constructor() {
     this.animated = false;
   }
+  componentWillLoad() {
+    this.emitStyle();
+  }
+  emitStyle() {
+    // The emitted property is used by item in order
+    // to add the item-skeleton-text class which applies
+    // overflow: hidden to its label
+    const style = {
+      'skeleton-text': true,
+    };
+    this.ionStyle.emit(style);
+  }
   render() {
     const animated = this.animated && config.getBoolean('animated', true);
     const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
@@ -53,5 +65,32 @@ export class SkeletonText {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "ionStyle",
+        "name": "ionStyle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Emitted when the styles change."
+        },
+        "complexType": {
+          "original": "StyleEventDetail",
+          "resolved": "StyleEventDetail",
+          "references": {
+            "StyleEventDetail": {
+              "location": "import",
+              "path": "../../interface",
+              "id": "src/interface.d.ts::StyleEventDetail"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/textarea/textarea.js

@@ -189,6 +189,8 @@ export class Textarea {
         'has-placeholder': this.placeholder !== undefined,
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus,
+        // TODO(FW-2876): remove this
+        legacy: !!this.legacy,
       });
     }
   }

package/dist/collection/components/toast/animations/ios.enter.js

@@ -3,6 +3,7 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
+import { getOffsetForMiddlePosition } from "./utils";
 /**
  * iOS Toast Enter Animation
  */
@@ -18,7 +19,7 @@ export const iosEnterAnimation = (baseEl, opts) => {
       wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
       break;
     case 'middle':
-      const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
+      const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
       wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;

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

@@ -3,6 +3,7 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
+import { getOffsetForMiddlePosition } from "./utils";
 /**
  * MD Toast Enter Animation
  */
@@ -15,16 +16,16 @@ export const mdEnterAnimation = (baseEl, opts) => {
   wrapperAnimation.addElement(wrapperEl);
   switch (position) {
     case 'top':
-      wrapperEl.style.top = top;
+      wrapperEl.style.setProperty('transform', `translateY(${top})`);
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     case 'middle':
-      const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
+      const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
       wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     default:
-      wrapperEl.style.bottom = bottom;
+      wrapperEl.style.setProperty('transform', `translateY(${bottom})`);
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
   }

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

@@ -7,10 +7,12 @@ import { printIonWarning } from "../../../utils/logging/index";
  * Calculate the CSS top and bottom position of the toast, to be used
  * as starting points for the animation keyframes.
  *
- * Note that MD animates bottom-positioned toasts using style.bottom,
- * which calculates from the bottom edge of the screen, while iOS uses
- * translateY, which calculates from the top edge of the screen. This
- * is why the bottom calculates differ slightly between modes.
+ * The default animations for both MD and iOS
+ * use translateY, which calculates from the
+ * top edge of the screen. This behavior impacts
+ * how we compute the offset when a toast has
+ * position='bottom' since we need to calculate from
+ * the bottom edge of the screen instead.
  *
  * @param position The value of the toast's position prop.
  * @param positionAnchor The element the toast should be anchored to,
@@ -25,7 +27,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
    */
   let offset;
   if (mode === 'md') {
-    offset = 8;
+    offset = position === 'top' ? 8 : -8;
   }
   else {
     offset = position === 'top' ? 10 : -10;
@@ -48,12 +50,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
        * to the top edge of the anchor. We want to calculate from the
        * bottom edge of the screen instead.
        */
-      if (mode === 'md') {
-        offset += win.innerHeight - box.top;
-      }
-      else {
-        offset -= win.innerHeight - box.top;
-      }
+      offset -= win.innerHeight - box.top;
     }
     /**
      * We don't include safe area here because that should already be
@@ -67,9 +64,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
   else {
     return {
       top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
-      bottom: mode === 'md'
-        ? `calc(${offset}px + var(--ion-safe-area-bottom, 0px))`
-        : `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
+      bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
     };
   }
 }
@@ -83,3 +78,14 @@ function warnIfAnchorIsHidden(positionAnchor, toast) {
     printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
   }
 }
+/**
+ * Returns the top offset required to place
+ * the toast in the middle of the screen.
+ * Only needed when position="toast".
+ * @param toastHeight: The height of the ion-toast element
+ * @param wrapperHeight: The height of the .toast-wrapper element
+ * inside the toast's shadow root.
+ */
+export const getOffsetForMiddlePosition = (toastHeight, wrapperHeight) => {
+  return Math.floor(toastHeight / 2 - wrapperHeight / 2);
+};

package/dist/collection/components/toast/gestures/swipe-to-dismiss.js

@@ -0,0 +1,267 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Build } from "@stencil/core";
+import { createAnimation } from "../../../utils/animation/animation";
+import { createGesture } from "../../../utils/gesture/index";
+import { getElementRoot } from "../../../utils/helpers";
+import { OVERLAY_GESTURE_PRIORITY } from "../../../utils/overlays";
+import { getOffsetForMiddlePosition } from "../animations/utils";
+/**
+ * Create a gesture that allows the Toast
+ * to be swiped to dismiss.
+ * @param el - The Toast element
+ * @param toastPosition - The last computed position of the Toast. This is computed in the "present" method.
+ * @param onDismiss - A callback to fire when the Toast was swiped to dismiss.
+ */
+export const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
+  /**
+   * Users should swipe on the visible toast wrapper
+   * rather than on ion-toast which covers the entire screen.
+   * When testing the class instance the inner wrapper will not
+   * be defined. As a result, we use a placeholder element in those environments.
+   */
+  const wrapperEl = Build.isTesting
+    ? document.createElement('div')
+    : getElementRoot(el).querySelector('.toast-wrapper');
+  const hostElHeight = el.clientHeight;
+  const wrapperElBox = wrapperEl.getBoundingClientRect();
+  /**
+   * The maximum amount that
+   * the toast can be swiped. This should
+   * account for the wrapper element's height
+   * too so the toast can be swiped offscreen
+   * completely.
+   */
+  let MAX_SWIPE_DISTANCE = 0;
+  /**
+   * The step value at which a toast
+   * is eligible for dismissing via gesture.
+   */
+  const DISMISS_THRESHOLD = 0.5;
+  /**
+   * The middle position Toast starts 50% of the way
+   * through the animation, so we need to use this
+   * as the starting point for our step values.
+   */
+  const STEP_OFFSET = el.position === 'middle' ? 0.5 : 0;
+  /**
+   * When the Toast is at the top users will be
+   * swiping up. As a result, the delta values will be
+   * negative numbers which will result in negative steps
+   * and thresholds. As a result, we need to make those numbers
+   * positive.
+   */
+  const INVERSION_FACTOR = el.position === 'top' ? -1 : 1;
+  /**
+   * The top offset that places the
+   * toast in the middle of the screen.
+   * Only needed when position="middle".
+   */
+  const topPosition = getOffsetForMiddlePosition(hostElHeight, wrapperElBox.height);
+  const SWIPE_UP_DOWN_KEYFRAMES = [
+    { offset: 0, transform: `translateY(-${topPosition + wrapperElBox.height}px)` },
+    { offset: 0.5, transform: `translateY(0px)` },
+    { offset: 1, transform: `translateY(${topPosition + wrapperElBox.height}px)` },
+  ];
+  const swipeAnimation = createAnimation('toast-swipe-to-dismiss-animation')
+    .addElement(wrapperEl)
+    /**
+     * The specific value here does not actually
+     * matter. We just need this to be a positive
+     * value so the animation does not jump
+     * to the end when the user beings to drag.
+     */
+    .duration(100);
+  switch (el.position) {
+    case 'middle':
+      MAX_SWIPE_DISTANCE = hostElHeight + wrapperElBox.height;
+      swipeAnimation.keyframes(SWIPE_UP_DOWN_KEYFRAMES);
+      /**
+       * Toast can be swiped up or down but
+       * should start in the middle of the screen.
+       */
+      swipeAnimation.progressStart(true, 0.5);
+      break;
+    case 'top':
+      /**
+       * The bottom edge of the wrapper
+       * includes the distance between the top
+       * of the screen and the top of the wrapper
+       * as well as the wrapper height so the wrapper
+       * can be dragged fully offscreen.
+       */
+      MAX_SWIPE_DISTANCE = wrapperElBox.bottom;
+      swipeAnimation.keyframes([
+        { offset: 0, transform: `translateY(${toastPosition.top})` },
+        { offset: 1, transform: 'translateY(-100%)' },
+      ]);
+      swipeAnimation.progressStart(true, 0);
+      break;
+    case 'bottom':
+    default:
+      /**
+       * This computes the distance between the
+       * top of the wrapper and the bottom of the
+       * screen including the height of the wrapper
+       * element so it can be dragged fully offscreen.
+       */
+      MAX_SWIPE_DISTANCE = hostElHeight - wrapperElBox.top;
+      swipeAnimation.keyframes([
+        { offset: 0, transform: `translateY(${toastPosition.bottom})` },
+        { offset: 1, transform: 'translateY(100%)' },
+      ]);
+      swipeAnimation.progressStart(true, 0);
+      break;
+  }
+  const computeStep = (delta) => {
+    return (delta * INVERSION_FACTOR) / MAX_SWIPE_DISTANCE;
+  };
+  const onMove = (detail) => {
+    const step = STEP_OFFSET + computeStep(detail.deltaY);
+    swipeAnimation.progressStep(step);
+  };
+  const onEnd = (detail) => {
+    const velocity = detail.velocityY;
+    const threshold = ((detail.deltaY + velocity * 1000) / MAX_SWIPE_DISTANCE) * INVERSION_FACTOR;
+    /**
+     * Disable the gesture for the remainder of the animation.
+     * It will be re-enabled if the toast animates back to
+     * its initial presented position.
+     */
+    gesture.enable(false);
+    let shouldDismiss = true;
+    let playTo = 1;
+    let step = 0;
+    let remainingDistance = 0;
+    if (el.position === 'middle') {
+      /**
+       * A middle positioned Toast appears
+       * in the middle of the screen (at animation offset 0.5).
+       * As a result, the threshold will be calculated relative
+       * to this starting position. In other words at animation offset 0.5
+       * the threshold will be 0. We want the middle Toast to be eligible
+       * for dismiss when the user has swiped either half way up or down the
+       * screen. As a result, we divide DISMISS_THRESHOLD in half. We also
+       * consider when the threshold is a negative in the event the
+       * user drags up (since the deltaY will also be negative).
+       */
+      shouldDismiss = threshold >= DISMISS_THRESHOLD / 2 || threshold <= -DISMISS_THRESHOLD / 2;
+      /**
+       * Since we are replacing the keyframes
+       * below the animation always starts from
+       * the beginning of the new keyframes.
+       * Similarly, we are always playing to
+       * the end of the new keyframes.
+       */
+      playTo = 1;
+      step = 0;
+      /**
+       * The Toast should animate from wherever its
+       * current position is to the desired end state.
+       *
+       * To begin, we get the current position of the
+       * Toast for its starting state.
+       */
+      const wrapperElBox = wrapperEl.getBoundingClientRect();
+      const startOffset = wrapperElBox.top - topPosition;
+      const startPosition = `${startOffset}px`;
+      /**
+       * If the deltaY is negative then the user is swiping
+       * up, so the Toast should animate to the top of the screen.
+       * If the deltaY is positive then the user is swiping
+       * down, so the Toast should animate to the bottom of the screen.
+       * We also account for when the deltaY is 0, but realistically
+       * that should never happen because it means the user did not drag
+       * the toast.
+       */
+      const offsetFactor = detail.deltaY <= 0 ? -1 : 1;
+      const endOffset = (topPosition + wrapperElBox.height) * offsetFactor;
+      /**
+       * If the Toast should dismiss
+       * then we need to figure out which edge of
+       * the screen it should animate towards.
+       * By default, the Toast will come
+       * back to its default state in the
+       * middle of the screen.
+       */
+      const endPosition = shouldDismiss ? `${endOffset}px` : '0px';
+      const KEYFRAMES = [
+        { offset: 0, transform: `translateY(${startPosition})` },
+        { offset: 1, transform: `translateY(${endPosition})` },
+      ];
+      swipeAnimation.keyframes(KEYFRAMES);
+      /**
+       * Compute the remaining amount of pixels the
+       * toast needs to move to be fully dismissed.
+       */
+      remainingDistance = endOffset - startOffset;
+    }
+    else {
+      shouldDismiss = threshold >= DISMISS_THRESHOLD;
+      playTo = shouldDismiss ? 1 : 0;
+      step = computeStep(detail.deltaY);
+      /**
+       * Compute the remaining amount of pixels the
+       * toast needs to move to be fully dismissed.
+       */
+      const remainingStepAmount = shouldDismiss ? 1 - step : step;
+      remainingDistance = remainingStepAmount * MAX_SWIPE_DISTANCE;
+    }
+    /**
+     * The animation speed should depend on how quickly
+     * the user flicks the toast across the screen. However,
+     * it should be no slower than 200ms.
+     * We use Math.abs on the remainingDistance because that value
+     * can be negative when swiping up on a middle position toast.
+     */
+    const duration = Math.min(Math.abs(remainingDistance) / Math.abs(velocity), 200);
+    swipeAnimation
+      .onFinish(() => {
+      if (shouldDismiss) {
+        onDismiss();
+        swipeAnimation.destroy();
+      }
+      else {
+        if (el.position === 'middle') {
+          /**
+           * If the toast snapped back to
+           * the middle of the screen we need
+           * to reset the keyframes
+           * so the toast can be swiped
+           * up or down again.
+           */
+          swipeAnimation.keyframes(SWIPE_UP_DOWN_KEYFRAMES).progressStart(true, 0.5);
+        }
+        else {
+          swipeAnimation.progressStart(true, 0);
+        }
+        /**
+         * If the toast did not dismiss then
+         * the user should be able to swipe again.
+         */
+        gesture.enable(true);
+      }
+      /**
+       * This must be a one time callback
+       * otherwise a new callback will
+       * be added every time onEnd runs.
+       */
+    }, { oneTimeCallback: true })
+      .progressEnd(playTo, step, duration);
+  };
+  const gesture = createGesture({
+    el: wrapperEl,
+    gestureName: 'toast-swipe-to-dismiss',
+    gesturePriority: OVERLAY_GESTURE_PRIORITY,
+    /**
+     * Toast only supports vertical swipes.
+     * This needs to be updated if we later
+     * support horizontal swipes.
+     */
+    direction: 'y',
+    onMove,
+    onEnd,
+  });
+  return gesture;
+};

package/dist/collection/components/toast/test/swipe-gesture/toast.e2e.js

@@ -0,0 +1,84 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes and directions.
+ */
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => {
+  test.describe(title('toast: swipe gesture with top position'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('src/components/toast/test/swipe-gesture', config);
+    });
+    test('should swipe up to dismiss', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+      const presentButton = page.locator('#top');
+      await presentButton.click();
+      await ionToastDidPresent.next();
+      const toastWrapper = page.locator('ion-toast#top-toast .toast-wrapper');
+      await dragElementBy(toastWrapper, page, 0, -30);
+      await ionToastDidDismiss.next();
+    });
+    test('should swipe up to dismiss with anchor', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+      const presentButton = page.locator('#top-anchor');
+      await presentButton.click();
+      await ionToastDidPresent.next();
+      const toastWrapper = page.locator('ion-toast#top-anchor-toast .toast-wrapper');
+      await dragElementBy(toastWrapper, page, 0, -30);
+      await ionToastDidDismiss.next();
+    });
+  });
+  test.describe(title('toast: swipe gesture with bottom position'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('src/components/toast/test/swipe-gesture', config);
+    });
+    test('should swipe down to dismiss', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+      const presentButton = page.locator('#bottom');
+      await presentButton.click();
+      await ionToastDidPresent.next();
+      const toastWrapper = page.locator('ion-toast#bottom-toast .toast-wrapper');
+      await dragElementBy(toastWrapper, page, 0, 30);
+      await ionToastDidDismiss.next();
+    });
+    test('should swipe down to dismiss with anchor', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+      const presentButton = page.locator('#bottom-anchor');
+      await presentButton.click();
+      await ionToastDidPresent.next();
+      const toastWrapper = page.locator('ion-toast#bottom-anchor-toast .toast-wrapper');
+      await dragElementBy(toastWrapper, page, 0, 30);
+      await ionToastDidDismiss.next();
+    });
+  });
+  test.describe(title('toast: swipe gesture with middle position'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('src/components/toast/test/swipe-gesture', config);
+    });
+    test('should swipe down to dismiss', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+      const presentButton = page.locator('#middle');
+      await presentButton.click();
+      await ionToastDidPresent.next();
+      const toastWrapper = page.locator('ion-toast#middle-toast .toast-wrapper');
+      await dragElementBy(toastWrapper, page, 0, 100);
+      await ionToastDidDismiss.next();
+    });
+    test('should swipe up to dismiss', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+      const presentButton = page.locator('#middle');
+      await presentButton.click();
+      await ionToastDidPresent.next();
+      const toastWrapper = page.locator('ion-toast#middle-toast .toast-wrapper');
+      await dragElementBy(toastWrapper, page, 0, -100);
+      await ionToastDidDismiss.next();
+    });
+  });
+});

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

@@ -167,6 +167,16 @@
   }
 }
 
+.toast-wrapper.toast-top {
+  transform: translate3d(0,  -100%,  0);
+  top: 0;
+}
+
+.toast-wrapper.toast-bottom {
+  transform: translate3d(0,  100%,  0);
+  bottom: 0;
+}
+
 .toast-container {
   display: flex;
   align-items: center;
@@ -299,20 +309,10 @@
     background: rgba(var(--ion-color-base-rgb), 0.8);
   }
 }
-.toast-wrapper.toast-top {
-  transform: translate3d(0,  -100%,  0);
-  top: 0;
-}
-
 .toast-wrapper.toast-middle {
   opacity: 0.01;
 }
 
-.toast-wrapper.toast-bottom {
-  transform: translate3d(0,  100%,  0);
-  bottom: 0;
-}
-
 .toast-content {
   -webkit-padding-start: 15px;
   padding-inline-start: 15px;