@ionic/core 8.8.6-dev.11777559143.1d1ad1ad → 8.8.6-dev.11777569278.1613db2e

package/dist/collection/components/gallery/gallery.css

@@ -0,0 +1,103 @@
+/**
+ * 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;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --ion-gallery-gap: Space between gallery items
+   */
+  display: grid;
+  grid-template-columns: repeat(var(--internal-gallery-columns, 2), minmax(0, 1fr));
+}
+
+:host(.gallery-layout-uniform) {
+  gap: var(--ion-gallery-gap, 16px);
+}
+
+:host(.gallery-layout-uniform) ::slotted(*) {
+  aspect-ratio: 1/1;
+}
+
+:host(.gallery-layout-masonry) {
+  align-items: start;
+  column-gap: var(--ion-gallery-gap, 16px);
+  row-gap: 0;
+  grid-auto-rows: 2px;
+}
+
+:host(.gallery-layout-masonry) ::slotted(*) {
+  display: block;
+  min-height: unset;
+  margin-bottom: var(--ion-gallery-gap, 16px);
+}
+
+::slotted(*) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  width: 100%;
+}
+
+::slotted(img) {
+  display: block;
+  object-fit: cover;
+  object-position: center;
+}

package/dist/collection/components/gallery/gallery.js

@@ -0,0 +1,421 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Host, h } from "@stencil/core";
+import { printIonWarning } from "../../utils/logging/index";
+import { getIonTheme } from "../../global/ionic-global";
+// TODO(FW-7285): Replace with global breakpoints
+const BREAKPOINTS = {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1400,
+};
+const DEFAULT_COLUMNS = {
+    xs: 2,
+    sm: 3,
+    md: 4,
+    lg: 6,
+    xl: 8,
+    xxl: 10,
+};
+const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+/**
+ * @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.
+ *
+ * @slot - Content is placed in a responsive gallery layout.
+ */
+export class Gallery {
+    constructor() {
+        // Keep track of whether we've warned about invalid columns to avoid
+        // duplicate warnings on screen resize.
+        this.hasWarnedInvalidColumns = false;
+        /**
+         * The visual layout of the gallery. When `uniform`, rows take up the height
+         * of the tallest item and are spaced evenly across the gallery. Additionally,
+         * items will have an aspect ratio of 1/1, forcing them to be square unless a
+         * height is explicitly set. When `masonry`, items will be positioned under each
+         * other with only the specified gap between them.
+         */
+        this.layout = 'uniform';
+        /**
+         * The order in which items are positioned. Only applies when layout is
+         * `masonry`. When `sequential`, items are positioned in the order they are
+         * placed in the DOM. When `best-fit`, items are positioned under the column
+         * with the most available space.
+         */
+        this.order = 'sequential';
+        /**
+         * The number of columns to display. Can be set as a number or an object of
+         * breakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`).
+         */
+        this.columns = DEFAULT_COLUMNS;
+        /**
+         * Listen for the slotchange event on the slot.
+         * When the layout is `masonry`, this listener is used to schedule a resize
+         * of the masonry grid when the slot changes. This is useful for when items
+         * are added or removed from the gallery.
+         */
+        this.onSlotChange = () => {
+            this.scheduleMasonryResize();
+        };
+        /**
+         * Measure the host and children, then compute masonry placement.
+         */
+        this.resizeMasonryGrid = () => {
+            this.masonryRaf = undefined;
+            if (this.layout !== 'masonry') {
+                this.clearMasonryStyles();
+                return;
+            }
+            const styles = getComputedStyle(this.el);
+            const rowHeight = parseFloat(styles.getPropertyValue('grid-auto-rows')) || 0;
+            const rowGap = parseFloat(styles.getPropertyValue('row-gap')) || parseFloat(styles.getPropertyValue('gap')) || 0;
+            const columnsStr = styles.getPropertyValue('--internal-gallery-columns');
+            // Fallback to 2 columns for masonry calculations when the resolved
+            // --internal-gallery-columns CSS value is missing or unparsable.
+            const columns = parseInt(columnsStr, 10) || 2;
+            const items = this.getItems();
+            this.layoutMasonry(items, rowHeight, rowGap, columns);
+        };
+    }
+    layoutChanged() {
+        this.updateResponsiveColumns(true);
+        this.scheduleMasonryResize();
+    }
+    componentDidLoad() {
+        this.updateResponsiveColumns(true);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateResponsiveColumns();
+            this.scheduleMasonryResize();
+        });
+        this.resizeObserver.observe(this.el);
+        this.scheduleMasonryResize();
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.masonryRaf !== undefined) {
+            cancelAnimationFrame(this.masonryRaf);
+            this.masonryRaf = undefined;
+        }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+    }
+    /**
+     * Listen for the load event on child elements.
+     * When the layout is `masonry`, this listener is used to schedule a resize
+     * of the masonry grid when the child elements load. This is useful for when
+     * images take time to load.
+     */
+    onChildLoad(ev) {
+        if (this.layout !== 'masonry') {
+            return;
+        }
+        const target = ev.target;
+        if (target !== null && this.el.contains(target)) {
+            this.scheduleMasonryResize();
+        }
+    }
+    /**
+     * Batch masonry measurements to a single animation frame.
+     * This avoids repeated sync layouts during rapid resize/load/slot changes.
+     */
+    scheduleMasonryResize() {
+        if (this.layout !== 'masonry') {
+            this.clearMasonryStyles();
+            return;
+        }
+        if (this.masonryRaf !== undefined) {
+            cancelAnimationFrame(this.masonryRaf);
+        }
+        this.masonryRaf = requestAnimationFrame(this.resizeMasonryGrid);
+    }
+    /**
+     * Normalize a columns value to a positive integer.
+     * Returns undefined when the input cannot be interpreted as a finite number.
+     */
+    sanitizeColumns(columns) {
+        if (columns === undefined) {
+            return undefined;
+        }
+        const numericColumns = typeof columns === 'number' ? columns : Number(columns);
+        if (!Number.isFinite(numericColumns) || !Number.isInteger(numericColumns) || numericColumns <= 0) {
+            return undefined;
+        }
+        return numericColumns;
+    }
+    /**
+     * Check if the value is a breakpoint columns object.
+     */
+    isBreakpointColumns(value) {
+        return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
+    /**
+     * Check if the breakpoint columns object has any invalid values.
+     * Returns true if any value is undefined or not a positive integer.
+     */
+    hasInvalidBreakpointColumns(breakpointColumns) {
+        for (const breakpoint of BREAKPOINT_ORDER) {
+            const value = breakpointColumns[breakpoint];
+            if (value !== undefined && this.sanitizeColumns(value) === undefined) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Get the columns from a responsive breakpoint map.
+     * Returns the columns for the last matching breakpoint.
+     */
+    getColumnsFromBreakpointColumns(width, breakpointColumns) {
+        let columns;
+        for (const bp of BREAKPOINT_ORDER) {
+            const customValue = breakpointColumns[bp];
+            const parsedCustom = this.sanitizeColumns(customValue);
+            const parsedDefault = this.sanitizeColumns(DEFAULT_COLUMNS[bp]);
+            // Use valid custom values when present; otherwise fall back to defaults per breakpoint.
+            const resolved = customValue === undefined || parsedCustom === undefined ? parsedDefault : parsedCustom;
+            if (resolved !== undefined && width >= BREAKPOINTS[bp]) {
+                columns = resolved;
+            }
+        }
+        return columns;
+    }
+    /**
+     * Warn about an invalid columns value when it is set to a non-positive
+     * integer or a breakpoint map object with invalid values.
+     */
+    warnInvalidColumns(columns) {
+        printIonWarning(`[ion-gallery] - Invalid "columns" value (${JSON.stringify(columns)}). Expected a positive integer or breakpoint map object (e.g. { xs: 2, md: 4 }). Falling back to default responsive columns.`, this.el);
+        this.hasWarnedInvalidColumns = true;
+    }
+    /**
+     * Resolve the active columns value for the current width. Falls back to
+     * the default responsive columns when the provided prop is invalid.
+     */
+    getColumnsForWidth(width) {
+        const { columns, hasWarnedInvalidColumns } = this;
+        const isBreakpointColumns = this.isBreakpointColumns(columns);
+        const hasInvalidBreakpointColumns = isBreakpointColumns && this.hasInvalidBreakpointColumns(columns);
+        const sanitizedColumns = isBreakpointColumns
+            ? this.getColumnsFromBreakpointColumns(width, columns)
+            : this.sanitizeColumns(columns);
+        if (!hasWarnedInvalidColumns &&
+            (hasInvalidBreakpointColumns || (!isBreakpointColumns && sanitizedColumns === undefined))) {
+            this.warnInvalidColumns(columns);
+        }
+        if (sanitizedColumns !== undefined) {
+            return sanitizedColumns;
+        }
+        return this.getColumnsFromBreakpointColumns(width, DEFAULT_COLUMNS);
+    }
+    /**
+     * Update the responsive columns for the gallery.
+     * This is used to update the columns when the component width changes.
+     */
+    updateResponsiveColumns(force = false) {
+        const width = this.el.getBoundingClientRect().width;
+        // Only update the columns if the component width has changed by more than
+        // 1px or if the force flag is true. This prevents unnecessary re-renders
+        // when the component width has not changed.
+        if (!width || (!force && this.lastWidth !== undefined && Math.abs(this.lastWidth - width) < 1)) {
+            return;
+        }
+        this.lastWidth = width;
+        const columns = this.getColumnsForWidth(width);
+        this.el.style.setProperty('--internal-gallery-columns', `${columns}`);
+    }
+    /**
+     * Return all directly slotted HTMLElement children of the gallery.
+     */
+    getItems() {
+        return Array.from(this.el.children).filter((child) => child instanceof HTMLElement);
+    }
+    /**
+     * Clear the item styles for the given item element.
+     * This is used to switch between uniform and masonry layouts.
+     */
+    clearItemStyles(itemEl) {
+        itemEl.style.gridRowStart = '';
+        itemEl.style.gridRowEnd = '';
+        itemEl.style.gridColumn = '';
+    }
+    /**
+     * Clear placement styles for all items when leaving masonry mode.
+     */
+    clearMasonryStyles() {
+        this.getItems().forEach((itemEl) => this.clearItemStyles(itemEl));
+    }
+    /**
+     * Convert a rendered item height to the number of grid rows it should span.
+     * Returns undefined for images that are not fully loaded yet.
+     */
+    calculateRowSpan(itemEl, rowHeight, rowGap) {
+        if (itemEl instanceof HTMLImageElement && (!itemEl.complete || itemEl.naturalHeight === 0)) {
+            return undefined;
+        }
+        const height = itemEl.getBoundingClientRect().height;
+        const itemStyles = getComputedStyle(itemEl);
+        const marginBottom = parseFloat(itemStyles.getPropertyValue('margin-bottom')) || 0;
+        const denominator = rowHeight + rowGap;
+        if (!denominator || !Number.isFinite(denominator)) {
+            return 1;
+        }
+        return Math.ceil((height + marginBottom + rowGap) / denominator) || 1;
+    }
+    /**
+     * Get the index of the column to position the item in.
+     * When the order is `best-fit`, the column with the shortest height is
+     * returned. Otherwise, items are placed in the column that matches their
+     * natural DOM order.
+     */
+    getColumnIndex(index, columnHeights, columns) {
+        const { order } = this;
+        if (order === 'best-fit') {
+            let columnIndex = 0;
+            for (let i = 1; i < columns; i++) {
+                if (columnHeights[i] < columnHeights[columnIndex]) {
+                    columnIndex = i;
+                }
+            }
+            return columnIndex;
+        }
+        return index % columns;
+    }
+    /**
+     * Apply masonry placement by assigning each item a column and row span.
+     */
+    layoutMasonry(items, rowHeight, rowGap, columns) {
+        const columnHeights = new Array(columns).fill(0);
+        items.forEach((itemEl, i) => {
+            const span = this.calculateRowSpan(itemEl, rowHeight, rowGap);
+            if (span === undefined) {
+                this.clearItemStyles(itemEl);
+                return;
+            }
+            const columnIndex = this.getColumnIndex(i, columnHeights, columns);
+            const start = columnHeights[columnIndex] + 1;
+            itemEl.style.gridColumn = `${columnIndex + 1}`;
+            itemEl.style.gridRowStart = `${start}`;
+            itemEl.style.gridRowEnd = `span ${span}`;
+            columnHeights[columnIndex] = start + span - 1;
+        });
+    }
+    render() {
+        const { layout, order } = this;
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'c8e3d332f3bf28671cd960571c7752bdacb503eb', class: {
+                [theme]: true,
+                [`gallery-layout-${layout}`]: true,
+                [`gallery-order-${order}`]: layout === 'masonry',
+            } }, h("slot", { key: 'ee0509845dfa77e0257bc01852f6b96cb78bee45', onSlotchange: this.onSlotChange })));
+    }
+    static get is() { return "ion-gallery"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gallery.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gallery.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'uniform' | 'masonry'",
+                    "resolved": "\"masonry\" | \"uniform\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual layout of the gallery. When `uniform`, rows take up the height\nof the tallest item and are spaced evenly across the gallery. Additionally,\nitems will have an aspect ratio of 1/1, forcing them to be square unless a\nheight is explicitly set. When `masonry`, items will be positioned under each\nother with only the specified gap between them."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'uniform'"
+            },
+            "order": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sequential' | 'best-fit'",
+                    "resolved": "\"best-fit\" | \"sequential\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The order in which items are positioned. Only applies when layout is\n`masonry`. When `sequential`, items are positioned in the order they are\nplaced in the DOM. When `best-fit`, items are positioned under the column\nwith the most available space."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "order",
+                "defaultValue": "'sequential'"
+            },
+            "columns": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "GalleryColumns",
+                    "resolved": "GalleryBreakpointColumns | number | string",
+                    "references": {
+                        "GalleryColumns": {
+                            "location": "import",
+                            "path": "./gallery-interface",
+                            "id": "src/components/gallery/gallery-interface.ts::GalleryColumns",
+                            "referenceLocation": "GalleryColumns"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of columns to display. Can be set as a number or an object of\nbreakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "DEFAULT_COLUMNS"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "layout",
+                "methodName": "layoutChanged"
+            }, {
+                "propName": "order",
+                "methodName": "layoutChanged"
+            }, {
+                "propName": "columns",
+                "methodName": "layoutChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "load",
+                "method": "onChildLoad",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/gallery/test/utils.js

@@ -0,0 +1,100 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+export const sharedStyles = `
+  ion-gallery {
+    width: 343px;
+  }
+
+  div {
+    color: #fff;
+    height: 150px;
+  }
+
+  div:nth-child(1) {
+    background: #ff6b6b;
+  }
+
+  div:nth-child(2) {
+    background: #4ecdc4;
+  }
+
+  div:nth-child(3) {
+    background: #ffe66d;
+    color: #333;
+  }
+
+  div:nth-child(4) {
+    background: #5f27cd;
+  }
+
+  div:nth-child(5) {
+    background: #7f8c8d;
+  }
+
+  div:nth-child(6) {
+    background: #ff9f43;
+  }
+
+  div:nth-child(7) {
+    background: #ff3f34;
+  }
+
+  div:nth-child(8) {
+    background: #2ecc71;
+  }
+
+  div:nth-child(9) {
+    background: #34495e;
+  }
+
+  div:nth-child(10) {
+    background: #1abc9c;
+  }
+
+  div:nth-child(11) {
+    background: #e67e22;
+  }
+
+  div:nth-child(12) {
+    background: #9b59b6;
+  }
+`;
+export const numberToWords = (value) => {
+    const ones = [
+        'zero',
+        'one',
+        'two',
+        'three',
+        'four',
+        'five',
+        'six',
+        'seven',
+        'eight',
+        'nine',
+        'ten',
+        'eleven',
+        'twelve',
+        'thirteen',
+        'fourteen',
+        'fifteen',
+        'sixteen',
+        'seventeen',
+        'eighteen',
+        'nineteen',
+    ];
+    const tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
+    if (!Number.isInteger(value) || value < 0 || value >= 100) {
+        return `${value}`;
+    }
+    let word = '';
+    if (value < 20) {
+        word = ones[value];
+    }
+    else {
+        const tensValue = Math.floor(value / 10);
+        const onesValue = value % 10;
+        word = onesValue === 0 ? tens[tensValue] : `${tens[tensValue]}-${ones[onesValue]}`;
+    }
+    return word.charAt(0).toUpperCase() + word.slice(1);
+};

package/dist/collection/components/grid/grid.js

@@ -16,10 +16,10 @@ export class Grid {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'cd55886cabaeab57e3b13193381b196bec2f07f8', class: {
+        return (h(Host, { key: '43b4e05ef076160d901c70dc37e177f19b524349', class: {
                 [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'c9b95999e6a274a8a0c997451c0be45b1304d77b' })));
+            } }, h("slot", { key: 'f3805936034708e6783223ded72c0ecfd40e5fb0' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -156,7 +156,7 @@ export class Header {
         const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, theme);
-        return (h(Host, Object.assign({ key: '658d5746920c349cc9fe85666c7215f2edc3c794', role: roleType, class: {
+        return (h(Host, Object.assign({ key: 'b43e5f542bdcec5e94c299556183cf6d9d673438', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -164,7 +164,7 @@ export class Header {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: '4a1470d86e1aac6f8d545fe01e75b4dce665fb70', class: "header-background" }), h("slot", { key: '3b02661242bda5834c4e13e4eb61bf79b53ba33e' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'fd9938f02edd38e1afc83025373ec0aec5633711', class: "header-background" }), h("slot", { key: '900aaa7da5d6f08e6f94b128fa065348d595159e' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

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

@@ -80,9 +80,9 @@ export class Img {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '840d5b29d81222b061ac72168ef6551b5a061e3a', class: {
+        return (h(Host, { key: '91de170493b31d6260e975b440beceb6906b6d5a', class: {
                 [theme]: true,
-            } }, h("img", { key: 'e22e66ee4bb3a648b21c6080674e68eebf4a3feb', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, 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

@@ -264,7 +264,7 @@ export class InfiniteScroll {
     render() {
         const theme = getIonTheme(this);
         const disabled = this.disabled;
-        return (h(Host, { key: '22d99824cb589d9024666a3c1ed205f781858eed', class: {
+        return (h(Host, { key: '02beca21d668e4e605532ad5ca5a67a08c71eebb', class: {
                 [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,