@ionic/core 7.5.4-dev.11699404450.136700d7 → 7.5.4-dev.11699632730.1e6d9b70

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,39 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Uses the compareWith param to compare two values to determine if they are equal.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+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(s) 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 or property name 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/form-controller.js

@@ -39,6 +39,10 @@ export const createLegacyFormController = (el) => {
   return { hasLegacyControl };
 };
 const hasLabelSlot = (controlEl) => {
+  const root = controlEl.shadowRoot;
+  if (root === null) {
+    return false;
+  }
   /**
    * Components that have a named label slot
    * also have other slots, so we need to query for
@@ -57,5 +61,5 @@ const hasLabelSlot = (controlEl) => {
   }
   return false;
 };
-const NAMED_LABEL_SLOT_COMPONENTS = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-RANGE'];
+const NAMED_LABEL_SLOT_COMPONENTS = ['ION-RANGE'];
 const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE', 'ION-CHECKBOX', 'ION-RADIO'];

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,8 +1,8 @@
 {
-  "timestamp": "2023-11-08T00:49:44",
+  "timestamp": "2023-11-10T16:14:04",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.7.1",
+    "version": "4.7.0",
     "typescriptVersion": "5.2.2"
   },
   "components": [
@@ -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 strict\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 strict\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/{button-active-1fb561b0.js → button-active-109ba60d.js}

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as writeTask } from './index-4392ebcb.js';
-import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-1243b917.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-4928c09d.js

@@ -0,0 +1,41 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Uses the compareWith param to compare two values to determine if they are equal.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+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(s) 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 or property name 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 };

package/dist/esm/{form-controller-64edeaad.js → form-controller-ed77647a.js}

@@ -40,6 +40,10 @@ const createLegacyFormController = (el) => {
   return { hasLegacyControl };
 };
 const hasLabelSlot = (controlEl) => {
+  const root = controlEl.shadowRoot;
+  if (root === null) {
+    return false;
+  }
   /**
    * Components that have a named label slot
    * also have other slots, so we need to query for
@@ -58,7 +62,7 @@ const hasLabelSlot = (controlEl) => {
   }
   return false;
 };
-const NAMED_LABEL_SLOT_COMPONENTS = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-RANGE'];
+const NAMED_LABEL_SLOT_COMPONENTS = ['ION-RANGE'];
 const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE', 'ION-CHECKBOX', 'ION-RADIO'];
 
 export { createLegacyFormController as c };

package/dist/esm/{haptic-1243b917.js → haptic-1a66d69f.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { g as getCapacitor } from './capacitor-b4979570.js';
+import { g as getCapacitor } from './capacitor-f1f25364.js';
 
 var ImpactStyle;
 (function (ImpactStyle) {

package/dist/esm/{index-47a510cf.js → index-50582f1c.js}

@@ -10,8 +10,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-b53e19a3.js');
-const mdTransitionAnimation = () => import('./md.transition-276c1159.js');
+const iosTransitionAnimation = () => import('./ios.transition-e20d71bc.js');
+const mdTransitionAnimation = () => import('./md.transition-a8469407.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
   return new Promise((resolve, reject) => {