@ionic/core 7.5.4-dev.11700602203.1e7155a1 → 7.5.4-dev.11702935369.11a4baba

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

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, forceUpdate } from "@stencil/core";
-import { compareOptions, createLegacyFormController, createNotchController, isOptionSelected } from "../../utils/forms/index";
+import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
 import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController } from "../../utils/overlays";
@@ -465,8 +465,6 @@ 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);
   }
@@ -739,7 +737,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "This property allows developers to specify a custom function or property\nname for comparing objects when determining the selected option in the\nion-select. When not specified, the default behavior will use strict\nequality (===) for comparison."
+          "text": "A property name or function used to compare object values"
         },
         "attribute": "compare-with",
         "reflect": false
@@ -1217,6 +1215,17 @@ Developers can use the "legacy" property to continue using the legacy form marku
       }];
   }
 }
+const isOptionSelected = (currentValue, compareValue, compareWith) => {
+  if (currentValue === undefined) {
+    return false;
+  }
+  if (Array.isArray(currentValue)) {
+    return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
+  }
+  else {
+    return compareOptions(currentValue, compareValue, compareWith);
+  }
+};
 const getOptionValue = (el) => {
   const value = el.value;
   return value === undefined ? el.textContent || '' : value;
@@ -1230,6 +1239,17 @@ const parseValue = (value) => {
   }
   return value.toString();
 };
+const compareOptions = (currentValue, compareValue, compareWith) => {
+  if (typeof compareWith === 'function') {
+    return compareWith(currentValue, compareValue);
+  }
+  else if (typeof compareWith === 'string') {
+    return currentValue[compareWith] === compareValue[compareWith];
+  }
+  else {
+    return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
+  }
+};
 const generateText = (opts, value, compareWith) => {
   if (value === undefined) {
     return '';

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

@@ -110,11 +110,6 @@
   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" legacy="true" class="ion-text-wrap">
+          <ion-select value="wrap" 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,18 +9,6 @@ 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);
@@ -65,32 +53,5 @@ 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,8 +189,6 @@ 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,7 +3,6 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
-import { getOffsetForMiddlePosition } from "./utils";
 /**
  * iOS Toast Enter Animation
  */
@@ -19,7 +18,7 @@ export const iosEnterAnimation = (baseEl, opts) => {
       wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
       break;
     case 'middle':
-      const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
+      const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
       wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;

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

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

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

@@ -7,12 +7,10 @@ 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.
  *
- * 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.
+ * 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.
  *
  * @param position The value of the toast's position prop.
  * @param positionAnchor The element the toast should be anchored to,
@@ -27,7 +25,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
    */
   let offset;
   if (mode === 'md') {
-    offset = position === 'top' ? 8 : -8;
+    offset = 8;
   }
   else {
     offset = position === 'top' ? 10 : -10;
@@ -50,7 +48,12 @@ 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.
        */
-      offset -= win.innerHeight - box.top;
+      if (mode === 'md') {
+        offset += win.innerHeight - box.top;
+      }
+      else {
+        offset -= win.innerHeight - box.top;
+      }
     }
     /**
      * We don't include safe area here because that should already be
@@ -64,7 +67,9 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
   else {
     return {
       top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
-      bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
+      bottom: mode === 'md'
+        ? `calc(${offset}px + var(--ion-safe-area-bottom, 0px))`
+        : `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
     };
   }
 }
@@ -78,14 +83,3 @@ 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/toast.ios.css

@@ -167,16 +167,6 @@
   }
 }
 
-.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;
@@ -309,10 +299,20 @@
     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;

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

@@ -6,7 +6,7 @@ import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { GESTURE, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -16,7 +16,6 @@ import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { getAnimationPosition } from "./animations/utils";
-import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
 // TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -42,41 +41,6 @@ export class Toast {
         this.callButtonHandler(cancelButton);
       }
     };
-    /**
-     * Create a new swipe gesture so Toast
-     * can be swiped to dismiss.
-     */
-    this.createSwipeGesture = (toastPosition) => {
-      const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
-        /**
-         * If the gesture completed then
-         * we should dismiss the toast.
-         */
-        this.dismiss(undefined, GESTURE);
-      }));
-      gesture.enable(true);
-    };
-    /**
-     * Destroy an existing swipe gesture
-     * so Toast can no longer be swiped to dismiss.
-     */
-    this.destroySwipeGesture = () => {
-      const { gesture } = this;
-      if (gesture === undefined) {
-        return;
-      }
-      gesture.destroy();
-      this.gesture = undefined;
-    };
-    /**
-     * Returns `true` if swipeGesture
-     * is configured to a value that enables the swipe behavior.
-     * Returns `false` otherwise.
-     */
-    this.prefersSwipeGesture = () => {
-      const { swipeGesture } = this;
-      return swipeGesture === 'vertical';
-    };
     this.revealContentToScreenReader = false;
     this.overlayIndex = undefined;
     this.delegate = undefined;
@@ -97,37 +61,9 @@ export class Toast {
     this.animated = true;
     this.icon = undefined;
     this.htmlAttributes = undefined;
-    this.swipeGesture = undefined;
     this.isOpen = false;
     this.trigger = undefined;
   }
-  swipeGestureChanged() {
-    /**
-     * If the Toast is presented, then we need to destroy
-     * any actives gestures before a new gesture is potentially
-     * created below.
-     *
-     * If the Toast is dismissed, then no gesture should be available
-     * since the Toast is not visible. This case should never
-     * happen since the "dismiss" method handles destroying
-     * any active swipe gestures, but we keep this code
-     * around to handle the first case.
-     */
-    this.destroySwipeGesture();
-    /**
-     * A new swipe gesture should only be created
-     * if the Toast is presented. If the Toast is not
-     * yet presented then the "present" method will
-     * handle calling the swipe gesture setup function.
-     */
-    if (this.presented && this.prefersSwipeGesture()) {
-      /**
-       * If the Toast is presented then
-       * lastPresentedPosition is defined.
-       */
-      this.createSwipeGesture(this.lastPresentedPosition);
-    }
-  }
   onIsOpenChange(newValue, oldValue) {
     if (newValue === true && oldValue === false) {
       this.present();
@@ -189,14 +125,6 @@ export class Toast {
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
     }
-    /**
-     * If the Toast has a swipe gesture then we can
-     * create the gesture so users can swipe the
-     * presented Toast.
-     */
-    if (this.prefersSwipeGesture()) {
-      this.createSwipeGesture(animationPosition);
-    }
     unlock();
   }
   /**
@@ -231,11 +159,6 @@ export class Toast {
       this.revealContentToScreenReader = false;
     }
     this.lastPresentedPosition = undefined;
-    /**
-     * If the Toast has a swipe gesture then we can
-     * safely destroy it now that it is dismissed.
-     */
-    this.destroySwipeGesture();
     unlock();
     return dismissed;
   }
@@ -776,29 +699,6 @@ export class Toast {
           "text": "Additional attributes to pass to the toast."
         }
       },
-      "swipeGesture": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ToastSwipeGestureDirection",
-          "resolved": "\"vertical\" | undefined",
-          "references": {
-            "ToastSwipeGestureDirection": {
-              "location": "import",
-              "path": "./toast-interface",
-              "id": "src/components/toast/toast-interface.ts::ToastSwipeGestureDirection"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If set to 'vertical', the Toast can be dismissed with\na swipe gesture. The swipe direction is determined by\nthe value of the `position` property:\n`top`: The Toast can be swiped up to dismiss.\n`bottom`: The Toast can be swiped down to dismiss.\n`middle`: The Toast can be swiped up or down to dismiss."
-        },
-        "attribute": "swipe-gesture",
-        "reflect": false
-      },
       "isOpen": {
         "type": "boolean",
         "mutable": false,
@@ -1109,9 +1009,6 @@ export class Toast {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "swipeGesture",
-        "methodName": "swipeGestureChanged"
-      }, {
         "propName": "isOpen",
         "methodName": "onIsOpenChange"
       }, {

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

@@ -167,16 +167,6 @@
   }
 }
 
-.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;

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

@@ -123,8 +123,6 @@ export class Toggle {
     if (this.legacyFormController.hasLegacyControl()) {
       this.ionStyle.emit({
         'interactive-disabled': this.disabled,
-        // TODO(FW-2990): remove this
-        legacy: !!this.legacy,
       });
     }
   }

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

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

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

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

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

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

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

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

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

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

package/dist/collection/utils/overlays.js

@@ -562,7 +562,6 @@ export const safeCall = (handler, arg) => {
 };
 export const BACKDROP = 'backdrop';
 export const GESTURE = 'gesture';
-export const OVERLAY_GESTURE_PRIORITY = 39;
 /**
  * Creates a delegate controller.
  *