@amwaljs/checkout-button 0.3.1 → 0.3.2

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

@@ -1,85 +1,83 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-93OyAGoo.js';
-import { i as inheritAttributes } from './helpers-C6kqtbmV.js';
-import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
+import { r as registerInstance, d as createEvent, h, H as Host, e as getElement } from './index-8cc94b11.js';
+import { d as inheritAttributes } from './helpers-f0dcbd72.js';
+import { g as getIonMode } from './ionic-global-0b7766cb.js';
 
-const imgCss = () => `:host{display:block;object-fit:contain}img{display:block;width:100%;height:100%;object-fit:inherit;object-position:inherit}`;
+const imgCss = ":host{display:block;object-fit:contain}img{display:block;width:100%;height:100%;object-fit:inherit;object-position:inherit}";
 
 const Img = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        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();
-        };
-        this.loadSrc = undefined;
-        this.loadError = undefined;
-        this.alt = undefined;
-        this.src = undefined;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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();
+    };
+    this.loadSrc = undefined;
+    this.loadError = undefined;
+    this.alt = undefined;
+    this.src = undefined;
+  }
+  srcChanged() {
+    this.addIO();
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['draggable']);
+  }
+  componentDidLoad() {
+    this.addIO();
+  }
+  addIO() {
+    if (this.src === undefined) {
+      return;
     }
-    srcChanged() {
-        this.addIO();
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['draggable']);
-    }
-    componentDidLoad() {
-        this.addIO();
-    }
-    addIO() {
-        if (this.src === undefined) {
-            return;
-        }
-        if (typeof window !== 'undefined' &&
-            'IntersectionObserver' in window &&
-            'IntersectionObserverEntry' in window &&
-            'isIntersecting' in window.IntersectionObserverEntry.prototype) {
-            this.removeIO();
-            this.io = new IntersectionObserver((data) => {
-                /**
-                 * On slower devices, it is possible for an intersection observer entry to contain multiple
-                 * objects in the array. This happens when quickly scrolling an image into view and then out of
-                 * view. In this case, the last object represents the current state of the component.
-                 */
-                if (data[data.length - 1].isIntersecting) {
-                    this.load();
-                    this.removeIO();
-                }
-            });
-            this.io.observe(this.el);
+    if (typeof window !== 'undefined' &&
+      'IntersectionObserver' in window &&
+      'IntersectionObserverEntry' in window &&
+      'isIntersecting' in window.IntersectionObserverEntry.prototype) {
+      this.removeIO();
+      this.io = new IntersectionObserver((data) => {
+        /**
+         * On slower devices, it is possible for an intersection observer entry to contain multiple
+         * objects in the array. This happens when quickly scrolling an image into view and then out of
+         * view. In this case, the last object represents the current state of the component.
+         */
+        if (data[data.length - 1].isIntersecting) {
+          this.load();
+          this.removeIO();
         }
-        else {
-            // fall back to setTimeout for Safari and IE
-            setTimeout(() => this.load(), 200);
-        }
-    }
-    load() {
-        this.loadError = this.onError;
-        this.loadSrc = this.src;
-        this.ionImgWillLoad.emit();
+      });
+      this.io.observe(this.el);
     }
-    removeIO() {
-        if (this.io) {
-            this.io.disconnect();
-            this.io = undefined;
-        }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => this.load(), 200);
     }
-    render() {
-        const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
-        const { draggable } = inheritedAttributes;
-        return (h(Host, { key: 'efff4d1bd0e54dbeff140c137eb50b803a9f6f60', class: getIonMode(this) }, h("img", { key: '3a1e0276ae67a7e40ec8c4ecd0061634573b2094', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+  }
+  load() {
+    this.loadError = this.onError;
+    this.loadSrc = this.src;
+    this.ionImgWillLoad.emit();
+  }
+  removeIO() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "src": [{
-                "srcChanged": 0
-            }]
-    }; }
+  }
+  render() {
+    const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
+    const { draggable } = inheritedAttributes;
+    return (h(Host, { key: 'efff4d1bd0e54dbeff140c137eb50b803a9f6f60', class: getIonMode(this) }, h("img", { key: '3a1e0276ae67a7e40ec8c4ecd0061634573b2094', 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"]
+  }; }
 };
 /**
  * Enumerated strings must be set as booleans
@@ -89,15 +87,15 @@ const Img = class {
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable.
  */
 const isDraggable = (draggable) => {
-    switch (draggable) {
-        case 'true':
-            return true;
-        case 'false':
-            return false;
-        default:
-            return undefined;
-    }
+  switch (draggable) {
+    case 'true':
+      return true;
+    case 'false':
+      return false;
+    default:
+      return undefined;
+  }
 };
-Img.style = imgCss();
+Img.style = imgCss;
 
 export { Img as ion_img };

package/dist/esm/ion-infinite-scroll-content.entry.js

@@ -1,43 +1,43 @@
-import { r as registerInstance, h, H as Host } from './index-93OyAGoo.js';
-import { E as ENABLE_HTML_CONTENT_DEFAULT, s as sanitizeDOMString } from './config-yu3xCFhr.js';
-import { c as config, g as getIonMode } from './ionic-global-DXXzPLPc.js';
+import { r as registerInstance, h, H as Host } from './index-8cc94b11.js';
+import { E as ENABLE_HTML_CONTENT_DEFAULT, s as sanitizeDOMString } from './config-8e06237c.js';
+import { c as config, g as getIonMode } from './ionic-global-0b7766cb.js';
 
-const infiniteScrollContentIosCss = () => `ion-infinite-scroll-content{display:flex;flex-direction:column;justify-content:center;min-height:84px;text-align:center;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}`;
+const infiniteScrollContentIosCss = "ion-infinite-scroll-content{display:flex;flex-direction:column;justify-content:center;min-height:84px;text-align:center;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}";
 
-const infiniteScrollContentMdCss = () => `ion-infinite-scroll-content{display:flex;flex-direction:column;justify-content:center;min-height:84px;text-align:center;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}`;
+const infiniteScrollContentMdCss = "ion-infinite-scroll-content{display:flex;flex-direction:column;justify-content:center;min-height:84px;text-align:center;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}";
 
 const InfiniteScrollContent = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-        this.loadingSpinner = undefined;
-        this.loadingText = undefined;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    this.loadingSpinner = undefined;
+    this.loadingText = undefined;
+  }
+  componentDidLoad() {
+    if (this.loadingSpinner === undefined) {
+      const mode = getIonMode(this);
+      this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
     }
-    componentDidLoad() {
-        if (this.loadingSpinner === undefined) {
-            const mode = getIonMode(this);
-            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
-        }
-    }
-    renderLoadingText() {
-        const { customHTMLEnabled, loadingText } = this;
-        if (customHTMLEnabled) {
-            return h("div", { class: "infinite-loading-text", innerHTML: sanitizeDOMString(loadingText) });
-        }
-        return h("div", { class: "infinite-loading-text" }, this.loadingText);
-    }
-    render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '2f4afb07bcfe3e12528eb9cee8646a097e0b359f', class: {
-                [mode]: true,
-                // Used internally for styling
-                [`infinite-scroll-content-${mode}`]: true,
-            } }, h("div", { key: 'af038177bf10c88c8970682487a4328689aaa5f2', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '1da5d419bc6a978b6a509fdab47dae347fc8d221', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '60cc5c64e0a317ac0005d5afe42c4bb8da58136f', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+  }
+  renderLoadingText() {
+    const { customHTMLEnabled, loadingText } = this;
+    if (customHTMLEnabled) {
+      return h("div", { class: "infinite-loading-text", innerHTML: sanitizeDOMString(loadingText) });
     }
+    return h("div", { class: "infinite-loading-text" }, this.loadingText);
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { key: '2f4afb07bcfe3e12528eb9cee8646a097e0b359f', class: {
+        [mode]: true,
+        // Used internally for styling
+        [`infinite-scroll-content-${mode}`]: true,
+      } }, h("div", { key: 'af038177bf10c88c8970682487a4328689aaa5f2', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '1da5d419bc6a978b6a509fdab47dae347fc8d221', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '60cc5c64e0a317ac0005d5afe42c4bb8da58136f', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+  }
 };
 InfiniteScrollContent.style = {
-    ios: infiniteScrollContentIosCss(),
-    md: infiniteScrollContentMdCss()
+  ios: infiniteScrollContentIosCss,
+  md: infiniteScrollContentMdCss
 };
 
 export { InfiniteScrollContent as ion_infinite_scroll_content };

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

@@ -1,192 +1,188 @@
-import { r as registerInstance, c as createEvent, w as writeTask, a as readTask, h, H as Host, g as getElement } from './index-93OyAGoo.js';
-import { f as findClosestIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-BMJhFU53.js';
-import { g as getIonMode } from './ionic-global-DXXzPLPc.js';
-import './helpers-C6kqtbmV.js';
-import './index-D8d_89Nl.js';
+import { r as registerInstance, d as createEvent, w as writeTask, f as readTask, h, e as getElement, H as Host } from './index-8cc94b11.js';
+import { a as findClosestIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-5e663431.js';
+import { g as getIonMode } from './ionic-global-0b7766cb.js';
+import './helpers-f0dcbd72.js';
+import './index-d9b41a43.js';
 
-const infiniteScrollCss = () => `ion-infinite-scroll{display:none;width:100%}.infinite-scroll-enabled{display:block}`;
+const infiniteScrollCss = "ion-infinite-scroll{display:none;width:100%}.infinite-scroll-enabled{display:block}";
 
 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.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;
-        };
-        this.isLoading = false;
-        this.threshold = '15%';
-        this.disabled = false;
-        this.position = 'bottom';
-    }
-    thresholdChanged() {
-        const val = this.threshold;
-        if (val.lastIndexOf('%') > -1) {
-            this.thrPx = 0;
-            this.thrPc = parseFloat(val) / 100;
-        }
-        else {
-            this.thrPx = parseFloat(val);
-            this.thrPc = 0;
+  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.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;
+    };
+    this.isLoading = false;
+    this.threshold = '15%';
+    this.disabled = false;
+    this.position = 'bottom';
+  }
+  thresholdChanged() {
+    const val = this.threshold;
+    if (val.lastIndexOf('%') > -1) {
+      this.thrPx = 0;
+      this.thrPc = parseFloat(val) / 100;
     }
-    disabledChanged() {
-        const disabled = this.disabled;
-        if (disabled) {
-            this.isLoading = false;
-            this.isBusy = false;
-        }
-        this.enableScrollEvents(!disabled);
+    else {
+      this.thrPx = parseFloat(val);
+      this.thrPc = 0;
     }
-    async connectedCallback() {
-        const contentEl = findClosestIonContent(this.el);
-        if (!contentEl) {
-            printIonContentErrorMsg(this.el);
-            return;
-        }
-        this.scrollEl = await getScrollElement(contentEl);
-        this.thresholdChanged();
-        this.disabledChanged();
-        if (this.position === 'top') {
-            writeTask(() => {
-                if (this.scrollEl) {
-                    this.scrollEl.scrollTop = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
-                }
-            });
-        }
+  }
+  disabledChanged() {
+    const disabled = this.disabled;
+    if (disabled) {
+      this.isLoading = false;
+      this.isBusy = false;
     }
-    disconnectedCallback() {
-        this.enableScrollEvents(false);
-        this.scrollEl = undefined;
+    this.enableScrollEvents(!disabled);
+  }
+  async connectedCallback() {
+    const contentEl = findClosestIonContent(this.el);
+    if (!contentEl) {
+      printIonContentErrorMsg(this.el);
+      return;
     }
-    /**
-     * Call `complete()` within the `ionInfinite` output event handler when
-     * your async operation has completed. For example, the `loading`
-     * state is while the app is performing an asynchronous operation,
-     * such as receiving more data from an AJAX request to add more items
-     * to a data list. Once the data has been received and UI updated, you
-     * then call this method to signify that the loading has completed.
-     * This method will change the infinite scroll's state from `loading`
-     * to `enabled`.
-     */
-    async complete() {
-        const scrollEl = this.scrollEl;
-        if (!this.isLoading || !scrollEl) {
-            return;
-        }
-        this.isLoading = false;
-        if (this.position === 'top') {
-            /**
-             * New content is being added at the top, but the scrollTop position stays the same,
-             * which causes a scroll jump visually. This algorithm makes sure to prevent this.
-             * (Frame 1)
-             *    - complete() is called, but the UI hasn't had time to update yet.
-             *    - Save the current content dimensions.
-             *    - Wait for the next frame using _dom.read, so the UI will be updated.
-             * (Frame 2)
-             *    - Read the new content dimensions.
-             *    - Calculate the height difference and the new scroll position.
-             *    - Delay the scroll position change until other possible dom reads are done using _dom.write to be performant.
-             * (Still frame 2, if I'm correct)
-             *    - Change the scroll position (= visually maintain the scroll position).
-             *    - Change the state to re-enable the InfiniteScroll.
-             *    - This should be after changing the scroll position, or it could
-             *    cause the InfiniteScroll to be triggered again immediately.
-             * (Frame 3)
-             *    Done.
-             */
-            this.isBusy = true;
-            // ******** DOM READ ****************
-            // Save the current content dimensions before the UI updates
-            const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
-            // ******** DOM READ ****************
-            requestAnimationFrame(() => {
-                readTask(() => {
-                    // UI has updated, save the new content dimensions
-                    const scrollHeight = scrollEl.scrollHeight;
-                    // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
-                    const newScrollTop = scrollHeight - prev;
-                    // ******** DOM WRITE ****************
-                    requestAnimationFrame(() => {
-                        writeTask(() => {
-                            scrollEl.scrollTop = newScrollTop;
-                            this.isBusy = false;
-                            this.didFire = false;
-                        });
-                    });
-                });
-            });
-        }
-        else {
-            this.didFire = false;
+    this.scrollEl = await getScrollElement(contentEl);
+    this.thresholdChanged();
+    this.disabledChanged();
+    if (this.position === 'top') {
+      writeTask(() => {
+        if (this.scrollEl) {
+          this.scrollEl.scrollTop = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
         }
+      });
     }
-    canStart() {
-        return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;
+  }
+  disconnectedCallback() {
+    this.enableScrollEvents(false);
+    this.scrollEl = undefined;
+  }
+  /**
+   * Call `complete()` within the `ionInfinite` output event handler when
+   * your async operation has completed. For example, the `loading`
+   * state is while the app is performing an asynchronous operation,
+   * such as receiving more data from an AJAX request to add more items
+   * to a data list. Once the data has been received and UI updated, you
+   * then call this method to signify that the loading has completed.
+   * This method will change the infinite scroll's state from `loading`
+   * to `enabled`.
+   */
+  async complete() {
+    const scrollEl = this.scrollEl;
+    if (!this.isLoading || !scrollEl) {
+      return;
     }
-    enableScrollEvents(shouldListen) {
-        if (this.scrollEl) {
-            if (shouldListen) {
-                this.scrollEl.addEventListener('scroll', this.onScroll);
-            }
-            else {
-                this.scrollEl.removeEventListener('scroll', this.onScroll);
-            }
-        }
+    this.isLoading = false;
+    if (this.position === 'top') {
+      /**
+       * New content is being added at the top, but the scrollTop position stays the same,
+       * which causes a scroll jump visually. This algorithm makes sure to prevent this.
+       * (Frame 1)
+       *    - complete() is called, but the UI hasn't had time to update yet.
+       *    - Save the current content dimensions.
+       *    - Wait for the next frame using _dom.read, so the UI will be updated.
+       * (Frame 2)
+       *    - Read the new content dimensions.
+       *    - Calculate the height difference and the new scroll position.
+       *    - Delay the scroll position change until other possible dom reads are done using _dom.write to be performant.
+       * (Still frame 2, if I'm correct)
+       *    - Change the scroll position (= visually maintain the scroll position).
+       *    - Change the state to re-enable the InfiniteScroll.
+       *    - This should be after changing the scroll position, or it could
+       *    cause the InfiniteScroll to be triggered again immediately.
+       * (Frame 3)
+       *    Done.
+       */
+      this.isBusy = true;
+      // ******** DOM READ ****************
+      // Save the current content dimensions before the UI updates
+      const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
+      // ******** DOM READ ****************
+      requestAnimationFrame(() => {
+        readTask(() => {
+          // UI has updated, save the new content dimensions
+          const scrollHeight = scrollEl.scrollHeight;
+          // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
+          const newScrollTop = scrollHeight - prev;
+          // ******** DOM WRITE ****************
+          requestAnimationFrame(() => {
+            writeTask(() => {
+              scrollEl.scrollTop = newScrollTop;
+              this.isBusy = false;
+              this.didFire = false;
+            });
+          });
+        });
+      });
+    }
+    else {
+      this.didFire = false;
     }
-    render() {
-        const mode = getIonMode(this);
-        const disabled = this.disabled;
-        return (h(Host, { key: 'c2248d06232dd7771dd155693ec75f9258dc969e', class: {
-                [mode]: true,
-                'infinite-scroll-loading': this.isLoading,
-                'infinite-scroll-enabled': !disabled,
-            } }));
+  }
+  canStart() {
+    return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;
+  }
+  enableScrollEvents(shouldListen) {
+    if (this.scrollEl) {
+      if (shouldListen) {
+        this.scrollEl.addEventListener('scroll', this.onScroll);
+      }
+      else {
+        this.scrollEl.removeEventListener('scroll', this.onScroll);
+      }
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "threshold": [{
-                "thresholdChanged": 0
-            }],
-        "disabled": [{
-                "disabledChanged": 0
-            }]
-    }; }
+  }
+  render() {
+    const mode = getIonMode(this);
+    const disabled = this.disabled;
+    return (h(Host, { key: 'c2248d06232dd7771dd155693ec75f9258dc969e', class: {
+        [mode]: true,
+        'infinite-scroll-loading': this.isLoading,
+        'infinite-scroll-enabled': !disabled,
+      } }));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "threshold": ["thresholdChanged"],
+    "disabled": ["disabledChanged"]
+  }; }
 };
-InfiniteScroll.style = infiniteScrollCss();
+InfiniteScroll.style = infiniteScrollCss;
 
 export { InfiniteScroll as ion_infinite_scroll };