@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/esm/ion-fab_3.entry.js

@@ -1,30 +1,39 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, h, d as Host, g as getElement, c as createEvent, f as printIonWarning } from './index-tcQvqkiX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import { k as hasShadowDom, i as inheritAriaAttributes } from './helpers-DkCLSLI9.js';
-import { h as hostContext, o as openURL, c as createColorClasses } from './theme-DiVJyqlX.js';
-import { t as close } from './index-DV3sJJW8.js';
-import './dir-o8OKV5aD.js';
+import { r as registerInstance, g as getElement, h, d as Host, c as createEvent, f as printIonWarning } from './index-ChhhtsGZ.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { k as hasShadowDom, i as inheritAriaAttributes } from './helpers-CAGf8Wgp.js';
+import { h as hostContext, o as openURL, c as createColorClasses } from './theme-byZM6qHV.js';
+import { t as close } from './index-BvabGprD.js';
+import './dir-Dojwmvde.js';
 
 const fabCss = () => `:host{position:absolute;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;z-index:999}:host(.fab-horizontal-center){left:0px;right:0px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-start:dir(rtl)){right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}}:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-end:dir(rtl)){left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:0}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-top:calc((-100% + 16px) / 2)}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-top:calc(50% + 10px)}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:0}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-bottom:calc((-100% + 16px) / 2)}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-bottom:calc(50% + 10px)}:host(.fab-vertical-center){top:0px;bottom:0px;margin-top:auto;margin-bottom:auto}`;
 
 const Fab = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * If `true`, the fab will display on the edge of the header if
-         * `vertical` is `"top"`, and on the edge of the footer if
-         * it is `"bottom"`. Should be used with a `fixed` slot.
-         */
-        this.edge = false;
-        /**
-         * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.
-         * That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
-         */
-        this.activated = false;
     }
+    get el() { return getElement(this); }
+    /**
+     * Where to align the fab horizontally in the viewport.
+     */
+    horizontal;
+    /**
+     * Where to align the fab vertically in the viewport.
+     */
+    vertical;
+    /**
+     * If `true`, the fab will display on the edge of the header if
+     * `vertical` is `"top"`, and on the edge of the footer if
+     * it is `"bottom"`. Should be used with a `fixed` slot.
+     */
+    edge = false;
+    /**
+     * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.
+     * That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
+     */
+    activated = false;
     activatedChanged() {
         const activated = this.activated;
         const fab = this.getFab();
@@ -69,7 +78,6 @@ const Fab = class {
                 'fab-edge': edge,
             } }, h("slot", { key: '9394ef6d6e5b0410fa6ba212171f687fb178ce2d' })));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "activated": [{
                 "activatedChanged": 0
@@ -87,68 +95,119 @@ const FabButton = class {
         registerInstance(this, hostRef);
         this.ionFocus = createEvent(this, "ionFocus", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.fab = null;
-        this.formButtonEl = null;
-        this.formEl = null;
-        this.inheritedAttributes = {};
-        /**
-         * If `true`, the fab button will be show a close icon.
-         */
-        this.activated = false;
-        /**
-         * If `true`, the user cannot interact with the fab button.
-         */
-        this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
-        this.routerDirection = 'forward';
-        /**
-         * If `true`, the fab button will show when in a fab-list.
-         */
-        this.show = false;
-        /**
-         * If `true`, the fab button will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         */
-        this.translucent = false;
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        /**
-         * The icon name to use for the close icon. This will appear when the fab button
-         * is pressed. Only applies if it is the main button inside of a fab containing a
-         * fab list.
-         */
-        this.closeIcon = close;
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.onClick = (ev) => {
-            const { el, fab } = this;
-            if (this.type !== 'button' && hasShadowDom(el)) {
-                this.submitForm(ev);
-            }
-            if (fab) {
-                fab.toggle();
-            }
-        };
     }
+    fab = null;
+    formButtonEl = null;
+    formEl = null;
+    inheritedAttributes = {};
+    get el() { return getElement(this); }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * If `true`, the fab button will be show a close icon.
+     */
+    activated = false;
+    /**
+     * If `true`, the user cannot interact with the fab button.
+     */
+    disabled = false;
     disabledChanged() {
         const { disabled } = this;
         if (this.formButtonEl) {
             this.formButtonEl.disabled = disabled;
         }
     }
+    /**
+     * This attribute instructs browsers to download a URL instead of navigating to
+     * it, so the user will be prompted to save it as a local file. If the attribute
+     * has a value, it is used as the pre-filled file name in the Save prompt
+     * (the user can still change the file name if they want).
+     */
+    download;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+     */
+    rel;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    routerDirection = 'forward';
+    /**
+     * When using a router, it specifies the transition animation when navigating to
+     * another page using `href`.
+     */
+    routerAnimation;
+    /**
+     * Specifies where to display the linked URL.
+     * Only applies when an `href` is provided.
+     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+     */
+    target;
+    /**
+     * If `true`, the fab button will show when in a fab-list.
+     */
+    show = false;
+    /**
+     * If `true`, the fab button will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    translucent = false;
+    /**
+     * The type of the button.
+     */
+    type = 'button';
+    /**
+     * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+     */
+    form;
+    /**
+     * The size of the button. Set this to `small` in order to have a mini fab button.
+     */
+    size;
+    /**
+     * The icon name to use for the close icon. This will appear when the fab button
+     * is pressed. Only applies if it is the main button inside of a fab containing a
+     * fab list.
+     */
+    closeIcon = close;
+    /**
+     * Emitted when the button has focus.
+     */
+    ionFocus;
+    /**
+     * Emitted when the button loses focus.
+     */
+    ionBlur;
     connectedCallback() {
         this.fab = this.el.closest('ion-fab');
     }
+    onFocus = () => {
+        this.ionFocus.emit();
+    };
+    onBlur = () => {
+        this.ionBlur.emit();
+    };
+    onClick = (ev) => {
+        const { el, fab } = this;
+        if (this.type !== 'button' && hasShadowDom(el)) {
+            this.submitForm(ev);
+        }
+        if (fab) {
+            fab.toggle();
+        }
+    };
     /**
      * The native button rendered inside `ion-fab-button` is in the Shadow DOM and
      * does not participate in form submission, so a hidden native button is added
@@ -239,9 +298,8 @@ const FabButton = class {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: '9e2fd462316e1aec50f53fa1b7ad7f02fd399592' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: 'c3bdb8614eb249297afc963810066658dc85efd6', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'a6a505b24d21cc716d2e3351ad4c380b95c768d7', class: "button-inner" }, h("slot", { key: 'f44fc1e95533438ee3adc8cc5bdd9e1e85849fd6' })), mode === 'md' && h("ion-ripple-effect", { key: 'b7c7dc7fceb0bb5613239608225f040010b7b2bd' }))));
+            }) }, h(TagType, { key: '9e2fd462316e1aec50f53fa1b7ad7f02fd399592', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: 'c3bdb8614eb249297afc963810066658dc85efd6', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'a6a505b24d21cc716d2e3351ad4c380b95c768d7', class: "button-inner" }, h("slot", { key: 'f44fc1e95533438ee3adc8cc5bdd9e1e85849fd6' })), mode === 'md' && h("ion-ripple-effect", { key: 'b7c7dc7fceb0bb5613239608225f040010b7b2bd' }))));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "disabled": [{
                 "disabledChanged": 0
@@ -258,16 +316,13 @@ const fabListCss = () => `:host{margin-left:0;margin-right:0;margin-top:calc(100
 const FabList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.activateTimeouts = [];
-        /**
-         * If `true`, the fab list will show all fab buttons in the list.
-         */
-        this.activated = false;
-        /**
-         * The side the fab list will show on relative to the main fab button.
-         */
-        this.side = 'bottom';
     }
+    get el() { return getElement(this); }
+    activateTimeouts = [];
+    /**
+     * If `true`, the fab list will show all fab buttons in the list.
+     */
+    activated = false;
     activatedChanged(activated) {
         this.activateTimeouts.forEach(clearTimeout);
         this.activateTimeouts = [];
@@ -278,6 +333,10 @@ const FabList = class {
             this.activateTimeouts.push(setTimeout(() => (fab.show = activated), i * timeout));
         });
     }
+    /**
+     * The side the fab list will show on relative to the main fab button.
+     */
+    side = 'bottom';
     disconnectedCallback() {
         this.activateTimeouts.forEach(clearTimeout);
         this.activateTimeouts = [];
@@ -290,7 +349,6 @@ const FabList = class {
                 [`fab-list-side-${this.side}`]: true,
             } }, h("slot", { key: 'd9e1541cb044e209bc2dff14080f3b938a2b84ae' })));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "activated": [{
                 "activatedChanged": 0

package/dist/esm/ion-img.entry.js

@@ -1,10 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
-import { b as inheritAttributes } from './helpers-DkCLSLI9.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import './dir-o8OKV5aD.js';
+import { r as registerInstance, c as createEvent, g as getElement, f as printIonWarning, h, d as Host } from './index-ChhhtsGZ.js';
+import { b as inheritAttributes } from './helpers-CAGf8Wgp.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import './dir-Dojwmvde.js';
 
 const imgCss = () => `:host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}`;
 
@@ -14,21 +14,38 @@ const Img = class {
         this.ionImgWillLoad = createEvent(this, "ionImgWillLoad", 7);
         this.ionImgDidLoad = createEvent(this, "ionImgDidLoad", 7);
         this.ionError = createEvent(this, "ionError", 7);
-        this.inheritedAttributes = {};
-        this.onLoad = () => {
-            this.ionImgDidLoad.emit();
-        };
-        this.onError = () => {
-            this.ionError.emit();
-        };
     }
+    io;
+    inheritedAttributes = {};
+    loadTimeout;
+    get el() { return getElement(this); }
+    loadSrc;
+    loadError;
+    /**
+     * This attribute defines the alternative text describing the image.
+     * Users will see this text displayed if the image URL is wrong,
+     * the image is not in one of the supported formats, or if the image is not yet downloaded.
+     */
+    alt;
+    /**
+     * The image URL. This attribute is mandatory for the `<img>` element.
+     */
+    src;
     srcChanged() {
         this.addIO();
     }
+    /** Emitted when the img src has been set */
+    ionImgWillLoad;
+    /** Emitted when the image has finished loading */
+    ionImgDidLoad;
+    /** Emitted when the img fails to load */
+    ionError;
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['draggable']);
     }
     componentDidLoad() {
+        printIonWarning('[ion-img] - This component is deprecated and will be removed in Ionic v10. ' +
+            'Use a native <img> with the loading="lazy" attribute instead.', this.el);
         this.addIO();
     }
     disconnectedCallback() {
@@ -72,6 +89,12 @@ const Img = class {
         this.loadSrc = this.src;
         this.ionImgWillLoad.emit();
     }
+    onLoad = () => {
+        this.ionImgDidLoad.emit();
+    };
+    onError = () => {
+        this.ionError.emit();
+    };
     removeIO() {
         if (this.io) {
             this.io.disconnect();
@@ -81,9 +104,8 @@ const Img = class {
     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) })));
+        return (h(Host, { key: '57bfb44d9850381fe7b6fcf0c9019b03f7ef86ec', class: getIonMode(this) }, h("img", { key: '888ec06a266fa2751fc0147ede6a567f4e2b29a6', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "src": [{
                 "srcChanged": 0

package/dist/esm/ion-infinite-scroll_2.entry.js

@@ -1,12 +1,13 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, w as writeTask, a as readTask, h, d as Host, g as getElement, e as config } from './index-tcQvqkiX.js';
-import { a as findClosestIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-B_8X7INq.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-DQCONYYp.js';
-import './helpers-DkCLSLI9.js';
-import './dir-o8OKV5aD.js';
+import { r as registerInstance, c as createEvent, g as getElement, w as writeTask, a as readTask, h, d as Host, e as config } from './index-ChhhtsGZ.js';
+import { a as findClosestIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-T0JxBI8V.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { E as ENABLE_HTML_CONTENT_DEFAULT } from './config-DWCzVL3Y.js';
+import { s as sanitizeDOMString } from './index-CKM1DdGm.js';
+import './helpers-CAGf8Wgp.js';
+import './dir-Dojwmvde.js';
 
 const infiniteScrollCss = () => `ion-infinite-scroll{display:none;width:100%}.infinite-scroll-enabled{display:block}`;
 
@@ -14,71 +15,31 @@ const InfiniteScroll = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionInfinite = createEvent(this, "ionInfinite", 7);
-        this.thrPx = 0;
-        this.thrPc = 0;
-        /**
-         * didFire exists so that ionInfinite
-         * does not fire multiple times if
-         * users continue to scroll after
-         * scrolling into the infinite
-         * scroll threshold.
-         */
-        this.didFire = false;
-        this.isBusy = false;
-        this.isLoading = false;
-        /**
-         * The threshold distance from the bottom
-         * of the content to call the `infinite` output event when scrolled.
-         * The threshold value can be either a percent, or
-         * in pixels. For example, use the value of `10%` for the `infinite`
-         * output event to get called when the user has scrolled 10%
-         * from the bottom of the page. Use the value `100px` when the
-         * scroll is within 100 pixels from the bottom of the page.
-         */
-        this.threshold = '15%';
-        /**
-         * If `true`, the infinite scroll will be hidden and scroll event listeners
-         * will be removed.
-         *
-         * Set this to true to disable the infinite scroll from actively
-         * trying to receive new data while scrolling. This is useful
-         * when it is known that there is no more data that can be added, and
-         * the infinite scroll is no longer needed.
-         */
-        this.disabled = false;
-        /**
-         * The position of the infinite scroll element.
-         * The value can be either `top` or `bottom`.
-         */
-        this.position = 'bottom';
-        this.onScroll = () => {
-            const scrollEl = this.scrollEl;
-            if (!scrollEl || !this.canStart()) {
-                return 1;
-            }
-            const infiniteHeight = this.el.offsetHeight;
-            if (infiniteHeight === 0) {
-                // if there is no height of this element then do nothing
-                return 2;
-            }
-            const scrollTop = scrollEl.scrollTop;
-            const scrollHeight = scrollEl.scrollHeight;
-            const height = scrollEl.offsetHeight;
-            const threshold = this.thrPc !== 0 ? height * this.thrPc : this.thrPx;
-            const distanceFromInfinite = this.position === 'bottom'
-                ? scrollHeight - infiniteHeight - scrollTop - threshold - height
-                : scrollTop - infiniteHeight - threshold;
-            if (distanceFromInfinite < 0) {
-                if (!this.didFire) {
-                    this.isLoading = true;
-                    this.didFire = true;
-                    this.ionInfinite.emit();
-                    return 3;
-                }
-            }
-            return 4;
-        };
     }
+    thrPx = 0;
+    thrPc = 0;
+    scrollEl;
+    /**
+     * didFire exists so that ionInfinite
+     * does not fire multiple times if
+     * users continue to scroll after
+     * scrolling into the infinite
+     * scroll threshold.
+     */
+    didFire = false;
+    isBusy = false;
+    get el() { return getElement(this); }
+    isLoading = false;
+    /**
+     * The threshold distance from the bottom
+     * of the content to call the `infinite` output event when scrolled.
+     * The threshold value can be either a percent, or
+     * in pixels. For example, use the value of `10%` for the `infinite`
+     * output event to get called when the user has scrolled 10%
+     * from the bottom of the page. Use the value `100px` when the
+     * scroll is within 100 pixels from the bottom of the page.
+     */
+    threshold = '15%';
     thresholdChanged() {
         const val = this.threshold;
         if (val.lastIndexOf('%') > -1) {
@@ -90,6 +51,16 @@ const InfiniteScroll = class {
             this.thrPc = 0;
         }
     }
+    /**
+     * If `true`, the infinite scroll will be hidden and scroll event listeners
+     * will be removed.
+     *
+     * Set this to true to disable the infinite scroll from actively
+     * trying to receive new data while scrolling. This is useful
+     * when it is known that there is no more data that can be added, and
+     * the infinite scroll is no longer needed.
+     */
+    disabled = false;
     disabledChanged() {
         const disabled = this.disabled;
         if (disabled) {
@@ -98,6 +69,18 @@ const InfiniteScroll = class {
         }
         this.enableScrollEvents(!disabled);
     }
+    /**
+     * The position of the infinite scroll element.
+     * The value can be either `top` or `bottom`.
+     */
+    position = 'bottom';
+    /**
+     * Emitted when the scroll reaches
+     * the threshold distance. From within your infinite handler,
+     * you must call the infinite scroll's `complete()` method when
+     * your async operation has completed.
+     */
+    ionInfinite;
     async connectedCallback() {
         const contentEl = findClosestIonContent(this.el);
         if (!contentEl) {
@@ -119,6 +102,33 @@ const InfiniteScroll = class {
         this.enableScrollEvents(false);
         this.scrollEl = undefined;
     }
+    onScroll = () => {
+        const scrollEl = this.scrollEl;
+        if (!scrollEl || !this.canStart()) {
+            return 1;
+        }
+        const infiniteHeight = this.el.offsetHeight;
+        if (infiniteHeight === 0) {
+            // if there is no height of this element then do nothing
+            return 2;
+        }
+        const scrollTop = scrollEl.scrollTop;
+        const scrollHeight = scrollEl.scrollHeight;
+        const height = scrollEl.offsetHeight;
+        const threshold = this.thrPc !== 0 ? height * this.thrPc : this.thrPx;
+        const distanceFromInfinite = this.position === 'bottom'
+            ? scrollHeight - infiniteHeight - scrollTop - threshold - height
+            : scrollTop - infiniteHeight - threshold;
+        if (distanceFromInfinite < 0) {
+            if (!this.didFire) {
+                this.isLoading = true;
+                this.didFire = true;
+                this.ionInfinite.emit();
+                return 3;
+            }
+        }
+        return 4;
+    };
     /**
      * Call `complete()` within the `ionInfinite` output event handler when
      * your async operation has completed. For example, the `loading`
@@ -203,7 +213,6 @@ const InfiniteScroll = class {
                 'infinite-scroll-enabled': !disabled,
             } }));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "threshold": [{
                 "thresholdChanged": 0
@@ -222,8 +231,27 @@ const infiniteScrollContentMdCss = () => `ion-infinite-scroll-content{display:-m
 const InfiniteScrollContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     }
+    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    /**
+     * An animated SVG spinner that shows while loading.
+     */
+    loadingSpinner;
+    /**
+     * Optional text to display while loading.
+     * `loadingText` can accept either plaintext or HTML as a string.
+     * To display characters normally reserved for HTML, they
+     * must be escaped. For example `<Ionic>` would become
+     * `&lt;Ionic&gt;`
+     *
+     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+     *
+     * This property accepts custom HTML as a string.
+     * Content is parsed as plaintext by default.
+     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
+     * before custom HTML can be used.
+     */
+    loadingText;
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
             const mode = getIonMode(this);