@ionic/core 7.5.4-dev.11699031793.11a4baba → 7.5.4-dev.11699037031.16f5cbc8

package/dist/collection/components/select/select.ios.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/select.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, forceUpdate } from "@stencil/core";
-import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
+import { compareOptions, createLegacyFormController, createNotchController, isOptionSelected } 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,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);
   }
@@ -737,7 +739,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "A property name or function used to compare object values"
+          "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 object\nequality (===) for comparison."
         },
         "attribute": "compare-with",
         "reflect": false
@@ -1215,17 +1217,6 @@ 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;
@@ -1239,17 +1230,6 @@ 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,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/md.enter.js

@@ -15,7 +15,7 @@ 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':
@@ -24,7 +24,7 @@ export const mdEnterAnimation = (baseEl, opts) => {
       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))`,
     };
   }
 }

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;

package/dist/collection/components/toast/toast.md.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;

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

@@ -123,6 +123,8 @@ 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,6 +463,16 @@ 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);
     });
@@ -667,17 +677,8 @@ export const createAnimation = (animationId) => {
         update(false, false);
       }
     }
-    if (playTo !== undefined) {
-      onFinish(() => {
-        forceDurationValue = undefined;
-        forceDirectionValue = undefined;
-        forceDelayValue = undefined;
-      }, {
-        oneTimeCallback: true,
-      });
-      if (!parentAnimation) {
-        play();
-      }
+    if (playTo !== undefined && !parentAnimation) {
+      play();
     }
     return ani;
   };

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

@@ -1,27 +1,5 @@
 /*!
  * (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/compare-with-utils.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+export 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;
+  }
+};
+/**
+ * Compares a value against the current value to determine if it is selected.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function to use to compare values.
+ */
+export 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);
+  }
+};

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

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

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

@@ -1,6 +1,7 @@
 /*!
  * (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";
@@ -11,7 +12,13 @@ const INPUT_BLURRING = true;
 const SCROLL_ASSIST = true;
 const HIDE_CARET = true;
 export const startInputShims = async (config, platform) => {
-  const doc = document;
+  /**
+   * If doc is undefined then we are in an SSR environment
+   * where input shims do not apply.
+   */
+  if (doc === undefined) {
+    return;
+  }
   const isIOS = platform === 'ios';
   const isAndroid = platform === 'android';
   /**
@@ -90,11 +97,10 @@ export const startInputShims = async (config, platform) => {
   for (const input of inputs) {
     registerInput(input);
   }
-  // TODO(FW-2832): types
-  doc.addEventListener('ionInputDidLoad', ((ev) => {
+  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,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { printIonWarning } from "../logging/index";
+import { doc } from "../browser/index";
 import { MENU_BACK_BUTTON_PRIORITY } from "../hardware-back-button";
+import { printIonWarning } from "../logging/index";
 import { componentOnReady } from "../helpers";
 import { menuOverlayAnimation } from "./animations/overlay";
 import { menuPushAnimation } from "./animations/push";
@@ -184,17 +185,14 @@ const createMenuController = () => {
   registerAnimation('reveal', menuRevealAnimation);
   registerAnimation('push', menuPushAnimation);
   registerAnimation('overlay', menuOverlayAnimation);
-  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();
-        });
-      }
-    });
-  }
+  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();
+      });
+    }
+  });
   return {
     registerAnimation,
     get,

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-11-03T17:18:50",
+  "timestamp": "2023-11-03T18:45:37",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.7.0",
@@ -19711,6 +19711,42 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "compareWith",
+          "type": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
+          "complexType": {
+            "original": "string | RadioGroupCompareFn | null",
+            "resolved": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
+            "references": {
+              "RadioGroupCompareFn": {
+                "location": "import",
+                "path": "./radio-group-interface",
+                "id": "src/components/radio-group/radio-group-interface.ts::RadioGroupCompareFn"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "compare-with",
+          "reflectToAttr": false,
+          "docs": "This property allows developers to specify a custom function or property\nname for comparing objects when determining the selected option in the\nion-radio-group. When not specified, the default behavior will use object\nequality (===) for comparison.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "((currentValue: any, compareValue: any) => boolean)"
+            },
+            {
+              "type": "null"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "name",
           "type": "string",
@@ -23909,7 +23945,7 @@
           "mutable": false,
           "attr": "compare-with",
           "reflectToAttr": false,
-          "docs": "A property name or function used to compare object values",
+          "docs": "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 object\nequality (===) for comparison.",
           "docsTags": [],
           "values": [
             {
@@ -29198,6 +29234,11 @@
       "docstring": "",
       "path": "src/components/popover/popover-interface.ts"
     },
+    "src/components/radio-group/radio-group-interface.ts::RadioGroupCompareFn": {
+      "declaration": "(currentValue: any, compareValue: any) => boolean",
+      "docstring": "",
+      "path": "src/components/radio-group/radio-group-interface.ts"
+    },
     "src/components/radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail": {
       "declaration": "export interface RadioGroupChangeEventDetail<T = any> {\n  value: T;\n  event?: Event;\n}",
       "docstring": "",

package/dist/esm/{animation-8aa13916.js → animation-cf3dd234.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './index-7a14ecec.js';
+import { w as win } from './index-a5d50daf.js';
 import { r as raf } from './helpers-3379ba19.js';
 
 let animationPrefix;
@@ -586,6 +586,16 @@ 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);
     });
@@ -790,17 +800,8 @@ const createAnimation = (animationId) => {
         update(false, false);
       }
     }
-    if (playTo !== undefined) {
-      onFinish(() => {
-        forceDurationValue = undefined;
-        forceDirectionValue = undefined;
-        forceDelayValue = undefined;
-      }, {
-        oneTimeCallback: true,
-      });
-      if (!parentAnimation) {
-        play();
-      }
+    if (playTo !== undefined && !parentAnimation) {
+      play();
     }
     return ani;
   };

package/dist/esm/{app-globals-8d413354.js → app-globals-ba8b3a06.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-8673c5ce.js';
+import { i as initialize } from './ionic-global-7efdecd0.js';
 
 const globalScripts = initialize;
 

package/dist/esm/{button-active-c7a04c9a.js → button-active-109ba60d.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-8eb0239b.js';
-import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-1243b917.js';
+import { w as writeTask } from './index-4392ebcb.js';
+import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-1a66d69f.js';
 import { createGesture } from './index-ff313b19.js';
 
 const createButtonActiveGesture = (el, isButton) => {

package/dist/esm/{capacitor-b4979570.js → capacitor-f1f25364.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './index-7a14ecec.js';
+import { w as win } from './index-a5d50daf.js';
 
 const getCapacitor = () => {
   if (win !== undefined) {

package/dist/esm/compare-with-utils-363d00b3.js

@@ -0,0 +1,34 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+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;
+  }
+};
+/**
+ * Compares a value against the current value to determine if it is selected.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function to use to compare values.
+ */
+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);
+  }
+};
+
+export { compareOptions as c, isOptionSelected as i };