@ionic/core 8.8.9-dev.11780414486.1df2bd72 → 8.8.9-dev.11780493937.17fe092d

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -58,13 +64,97 @@ ion-header {
   position: relative;
   order: -1;
   width: 100%;
-  z-index: 10;
 }
 
 ion-header ion-toolbar:first-of-type {
   padding-top: var(--ion-safe-area-top, 0);
 }
 
+ion-header.header-collapse-hide {
+  transform: translateY(0);
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);
+  opacity: 1;
+  z-index: 10;
+}
+
+ion-header.header-collapse-hide.header-collapse-hide-hidden {
+  transform: translateY(calc(-1 * var(--header-hide-slide-y, 0px)));
+  pointer-events: none;
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+ion-header {
+  z-index: 10;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -3,6 +3,7 @@
  */
 import { readTask, writeTask } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
+import { createCollapseHideInteraction } from "../../utils/on-scroll/collapse-hide.utils";
 const TRANSITION = 'all 0.2s ease-in-out';
 const ROLE_NONE = 'none';
 const ROLE_BANNER = 'banner';
@@ -179,6 +180,14 @@ export const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) =
         titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
     });
 };
+export const createHeaderHideInteraction = (headerEl, scrollEl) => createCollapseHideInteraction({
+    regionEl: headerEl,
+    scrollEl,
+    slideCssVar: '--header-hide-slide-y',
+    contentPartnerClass: 'content-header-hide-scroll-partner',
+    contentHiddenClass: 'content-header-hide-scroll-hidden',
+    regionHiddenClass: 'header-collapse-hide-hidden',
+});
 export const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
     readTask(() => {
         const scrollTop = scrollEl.scrollTop;
@@ -215,20 +224,20 @@ export const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
  *
  * @param isInsideMenu If ion-header is inside ion-menu.
  * @param isCondensed If ion-header has collapse="condense".
- * @param mode The current mode.
+ * @param theme The current theme.
  * @returns 'none' if inside ion-menu or if condensed in md
- * mode, otherwise 'banner'.
+ * theme, otherwise 'banner'.
  */
-export const getRoleType = (isInsideMenu, isCondensed, mode) => {
+export const getRoleType = (isInsideMenu, isCondensed, theme) => {
     // If the header is inside a menu, it should not have the banner role.
     if (isInsideMenu) {
         return ROLE_NONE;
     }
     /**
-     * Only apply role="none" to `md` mode condensed headers
+     * Only apply role="none" to `md` & `ionic` theme condensed headers
      * since the large header is never shown.
      */
-    if (isCondensed && mode === 'md') {
+    if (isCondensed && theme !== 'ios') {
         return ROLE_NONE;
     }
     // Default to banner role.

package/dist/collection/components/img/img.js

@@ -3,8 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
  * @part image - The inner `img` element.
  */
 export class Img {
@@ -76,7 +79,10 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: '9bfaa659b0680189fd29f3acb2fdce7f70be6060', class: getIonMode(this) }, h("img", { key: 'd484beae0d5cbe0406958bfad40cdd6c05625340', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '91de170493b31d6260e975b440beceb6906b6d5a', class: {
+                [theme]: true,
+            } }, h("img", { key: 'ac1f41afbece34a3e38e656733f3e55cce385b4c', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/infinite-scroll/infinite-scroll.js

@@ -3,11 +3,16 @@
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
 import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class InfiniteScroll {
     constructor() {
         this.thrPx = 0;
         this.thrPc = 0;
+        this.minHeightLocked = false;
         /**
          * didFire exists so that ionInfinite
          * does not fire multiple times if
@@ -43,6 +48,12 @@ export class InfiniteScroll {
          * The value can be either `top` or `bottom`.
          */
         this.position = 'bottom';
+        /**
+         * If `true`, the infinite scroll will preserve the scroll position
+         * when the content is re-rendered. This is useful when the content is
+         * re-rendered with new keys, and the scroll position should be preserved.
+         */
+        this.preserveRerenderScrollPosition = false;
         this.onScroll = () => {
             const scrollEl = this.scrollEl;
             if (!scrollEl || !this.canStart()) {
@@ -64,7 +75,16 @@ export class InfiniteScroll {
                 if (!this.didFire) {
                     this.isLoading = true;
                     this.didFire = true;
-                    this.ionInfinite.emit();
+                    if (this.preserveRerenderScrollPosition) {
+                        // Lock the min height of the siblings of the infinite scroll
+                        // if we are preserving the rerender scroll position
+                        this.lockSiblingMinHeight(true).then(() => {
+                            this.ionInfinite.emit();
+                        });
+                    }
+                    else {
+                        this.ionInfinite.emit();
+                    }
                     return 3;
                 }
             }
@@ -111,6 +131,54 @@ export class InfiniteScroll {
         this.enableScrollEvents(false);
         this.scrollEl = undefined;
     }
+    /**
+     * Loop through our sibling elements and lock or unlock their min height.
+     * This keeps our siblings, for example `ion-list`, the same height as their
+     * content currently is, so when it loads new data and the DOM removes the old
+     * data, the height of the container doesn't change and we don't lose our scroll position.
+     *
+     * We preserve existing min-height values, if they're set, so we don't erase what
+     * has been previously set by the user when we restore after complete is called.
+     */
+    lockSiblingMinHeight(lock) {
+        return new Promise((resolve) => {
+            var _a;
+            const siblings = ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.children) || [];
+            const writes = [];
+            for (const sibling of siblings) {
+                // Loop through all the siblings of the infinite scroll, but ignore ourself
+                if (sibling !== this.el && sibling instanceof HTMLElement) {
+                    if (lock) {
+                        const elementHeight = sibling.getBoundingClientRect().height;
+                        writes.push(() => {
+                            if (this.minHeightLocked) {
+                                // The previous min height is from us locking it before, so we can disregard it
+                                // We still need to lock the min height if we're already locked, though, because
+                                // the user could have triggered a new load before we've finished the previous one.
+                                const previousMinHeight = sibling.style.minHeight;
+                                if (previousMinHeight) {
+                                    sibling.style.setProperty('--ion-previous-min-height', previousMinHeight);
+                                }
+                            }
+                            sibling.style.minHeight = `${elementHeight}px`;
+                        });
+                    }
+                    else {
+                        writes.push(() => {
+                            const previousMinHeight = sibling.style.getPropertyValue('--ion-previous-min-height');
+                            sibling.style.minHeight = previousMinHeight || 'auto';
+                            sibling.style.removeProperty('--ion-previous-min-height');
+                        });
+                    }
+                }
+            }
+            writeTask(() => {
+                writes.forEach((w) => w());
+                this.minHeightLocked = lock;
+                resolve();
+            });
+        });
+    }
     /**
      * Call `complete()` within the `ionInfinite` output event handler when
      * your async operation has completed. For example, the `loading`
@@ -172,6 +240,13 @@ export class InfiniteScroll {
         else {
             this.didFire = false;
         }
+        // Unlock the min height of the siblings of the infinite scroll
+        // if we are preserving the rerender scroll position
+        if (this.preserveRerenderScrollPosition) {
+            setTimeout(async () => {
+                await this.lockSiblingMinHeight(false);
+            }, 100);
+        }
     }
     canStart() {
         return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;
@@ -187,10 +262,10 @@ export class InfiniteScroll {
         }
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const disabled = this.disabled;
-        return (h(Host, { key: 'e844956795f69be33396ce4480aa7a54ad01b28c', class: {
-                [mode]: true,
+        return (h(Host, { key: '02beca21d668e4e605532ad5ca5a67a08c71eebb', class: {
+                [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
             } }));
@@ -267,6 +342,26 @@ export class InfiniteScroll {
                 "reflect": false,
                 "attribute": "position",
                 "defaultValue": "'bottom'"
+            },
+            "preserveRerenderScrollPosition": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the infinite scroll will preserve the scroll position\nwhen the content is re-rendered. This is useful when the content is\nre-rendered with new keys, and the scroll position should be preserved."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preserve-rerender-scroll-position",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.ios.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -84,6 +90,12 @@ ion-infinite-scroll-content {
   display: block;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js

@@ -5,15 +5,19 @@ import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class InfiniteScrollContent {
     constructor() {
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
-            const mode = getIonMode(this);
-            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
+            const theme = getIonTheme(this);
+            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
         }
     }
     renderLoadingText() {
@@ -24,24 +28,26 @@ export class InfiniteScrollContent {
         return h("div", { class: "infinite-loading-text" }, this.loadingText);
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '7c16060dcfe2a0b0fb3e2f8f4c449589a76f1baa', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'b51954f829eeafd5ec304b3e66e330776485ffc8', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`infinite-scroll-content-${mode}`]: true,
-            } }, h("div", { key: 'a94f4d8746e053dc718f97520bd7e48cb316443a', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '10143d5d2a50a2a2bc5de1cee8e7ab51263bcf23', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '8846e88191690d9c61a0b462889ed56fbfed8b0d', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+                [`infinite-scroll-content-${theme}`]: true,
+            } }, h("div", { key: '047da7f15fe38deed592dd66d1c97e12da4545bb', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '1c05820f091052b8ee9e9ca20054495a676c21aa', class: "infinite-loading-spinner" }, h("ion-spinner", { key: 'ff801e3486f3c1a4605d2a2de9b47bd7bd536698', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get is() { return "ion-infinite-scroll-content"; }
     static get originalStyleUrls() {
         return {
             "ios": ["infinite-scroll-content.ios.scss"],
-            "md": ["infinite-scroll-content.md.scss"]
+            "md": ["infinite-scroll-content.md.scss"],
+            "ionic": ["infinite-scroll-content.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["infinite-scroll-content.ios.css"],
-            "md": ["infinite-scroll-content.md.css"]
+            "md": ["infinite-scroll-content.md.css"],
+            "ionic": ["infinite-scroll-content.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.md.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -84,6 +90,12 @@ ion-infinite-scroll-content {
   display: block;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use