@ionic/core 9.0.0 → 9.0.1-dev.11787248963.10a00c73

package/dist/collection/components/fab-button/fab-button.js

@@ -14,118 +14,69 @@ import { getIonMode } from "../../global/ionic-global";
  * @part close-icon - The close icon that is displayed when a fab list opens (uses ion-icon).
  */
 export class FabButton {
-    fab = null;
-    formButtonEl = null;
-    formEl = null;
-    inheritedAttributes = {};
-    el;
-    /**
-     * 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;
+    constructor() {
+        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();
+            }
+        };
+    }
     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

package/dist/collection/components/fab-list/fab-list.js

@@ -4,12 +4,17 @@
 import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class FabList {
-    el;
-    activateTimeouts = [];
-    /**
-     * If `true`, the fab list will show all fab buttons in the list.
-     */
-    activated = false;
+    constructor() {
+        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';
+    }
     activatedChanged(activated) {
         this.activateTimeouts.forEach(clearTimeout);
         this.activateTimeouts = [];
@@ -20,10 +25,6 @@ export class FabList {
             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 = [];

package/dist/collection/components/footer/footer.js

@@ -10,26 +10,49 @@ import { handleFooterFade } from "./footer.utils";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Footer {
-    scrollEl;
-    contentScrollCallback;
-    keyboardCtrl = null;
-    keyboardCtrlPromise = null;
-    keyboardVisible = false;
-    el;
-    /**
-     * Describes the scroll effect that will be applied to the footer.
-     * Only applies in iOS mode.
-     */
-    collapse;
-    /**
-     * If `true`, the footer 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).
-     *
-     * Note: In order to scroll content behind the footer, the `fullscreen`
-     * attribute needs to be set on the content.
-     */
-    translucent = false;
+    constructor() {
+        this.keyboardCtrl = null;
+        this.keyboardCtrlPromise = null;
+        this.keyboardVisible = false;
+        /**
+         * If `true`, the footer 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).
+         *
+         * Note: In order to scroll content behind the footer, the `fullscreen`
+         * attribute needs to be set on the content.
+         */
+        this.translucent = false;
+        this.checkCollapsibleFooter = () => {
+            const mode = getIonMode(this);
+            if (mode !== 'ios') {
+                return;
+            }
+            const { collapse } = this;
+            const hasFade = collapse === 'fade';
+            this.destroyCollapsibleFooter();
+            if (hasFade) {
+                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+                const contentEl = pageEl ? findIonContent(pageEl) : null;
+                if (!contentEl) {
+                    printIonContentErrorMsg(this.el);
+                    return;
+                }
+                this.setupFadeFooter(contentEl);
+            }
+        };
+        this.setupFadeFooter = async (contentEl) => {
+            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+            /**
+             * Handle fading of toolbars on scroll
+             */
+            this.contentScrollCallback = () => {
+                handleFooterFade(scrollEl, this.el);
+            };
+            scrollEl.addEventListener('scroll', this.contentScrollCallback);
+            handleFooterFade(scrollEl, this.el);
+        };
+    }
     componentDidLoad() {
         this.checkCollapsibleFooter();
     }
@@ -73,35 +96,6 @@ export class Footer {
             this.keyboardCtrl = null;
         }
     }
-    checkCollapsibleFooter = () => {
-        const mode = getIonMode(this);
-        if (mode !== 'ios') {
-            return;
-        }
-        const { collapse } = this;
-        const hasFade = collapse === 'fade';
-        this.destroyCollapsibleFooter();
-        if (hasFade) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
-            if (!contentEl) {
-                printIonContentErrorMsg(this.el);
-                return;
-            }
-            this.setupFadeFooter(contentEl);
-        }
-    };
-    setupFadeFooter = async (contentEl) => {
-        const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
-        /**
-         * Handle fading of toolbars on scroll
-         */
-        this.contentScrollCallback = () => {
-            handleFooterFade(scrollEl, this.el);
-        };
-        scrollEl.addEventListener('scroll', this.contentScrollCallback);
-        handleFooterFade(scrollEl, this.el);
-    };
     destroyCollapsibleFooter() {
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);

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

@@ -4,10 +4,12 @@
 import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Grid {
-    /**
-     * If `true`, the grid will have a fixed width based on the screen size.
-     */
-    fixed = false;
+    constructor() {
+        /**
+         * If `true`, the grid will have a fixed width based on the screen size.
+         */
+        this.fixed = false;
+    }
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '617127ecfabf9bf615bef1dda1be3fed5a065949', class: {

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

@@ -11,28 +11,29 @@ import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade,
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Header {
-    scrollEl;
-    contentScrollCallback;
-    intersectionObserver;
-    collapsibleMainHeader;
-    inheritedAttributes = {};
-    el;
-    /**
-     * Describes the scroll effect that will be applied to the header.
-     * Only applies in iOS mode.
-     *
-     * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
-     */
-    collapse;
-    /**
-     * If `true`, the header 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).
-     *
-     * Note: In order to scroll content behind the header, the `fullscreen`
-     * attribute needs to be set on the content.
-     */
-    translucent = false;
+    constructor() {
+        this.inheritedAttributes = {};
+        /**
+         * If `true`, the header 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).
+         *
+         * Note: In order to scroll content behind the header, the `fullscreen`
+         * attribute needs to be set on the content.
+         */
+        this.translucent = false;
+        this.setupFadeHeader = async (contentEl, condenseHeader) => {
+            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+            /**
+             * Handle fading of toolbars on scroll
+             */
+            this.contentScrollCallback = () => {
+                handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+            };
+            scrollEl.addEventListener('scroll', this.contentScrollCallback);
+            handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+        };
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -76,17 +77,6 @@ export class Header {
             await this.setupFadeHeader(contentEl, condenseHeader);
         }
     }
-    setupFadeHeader = async (contentEl, condenseHeader) => {
-        const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
-        /**
-         * Handle fading of toolbars on scroll
-         */
-        this.contentScrollCallback = () => {
-            handleHeaderFade(this.scrollEl, this.el, condenseHeader);
-        };
-        scrollEl.addEventListener('scroll', this.contentScrollCallback);
-        handleHeaderFade(this.scrollEl, this.el, condenseHeader);
-    };
     destroyCollapsibleHeader() {
         if (this.intersectionObserver) {
             this.intersectionObserver.disconnect();

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

@@ -11,31 +11,18 @@ import { getIonMode } from "../../global/ionic-global";
  * @part image - The inner `img` element.
  */
 export class Img {
-    io;
-    inheritedAttributes = {};
-    loadTimeout;
-    el;
-    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;
+    constructor() {
+        this.inheritedAttributes = {};
+        this.onLoad = () => {
+            this.ionImgDidLoad.emit();
+        };
+        this.onError = () => {
+            this.ionError.emit();
+        };
+    }
     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']);
     }
@@ -85,12 +72,6 @@ export class Img {
         this.loadSrc = this.src;
         this.ionImgWillLoad.emit();
     }
-    onLoad = () => {
-        this.ionImgDidLoad.emit();
-    };
-    onError = () => {
-        this.ionError.emit();
-    };
     removeIO() {
         if (this.io) {
             this.io.disconnect();

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

@@ -5,30 +5,72 @@ import { Host, h, readTask, writeTask } from "@stencil/core";
 import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { getIonMode } from "../../global/ionic-global";
 export class InfiniteScroll {
-    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;
-    el;
-    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%';
+    constructor() {
+        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;
+        };
+    }
     thresholdChanged() {
         const val = this.threshold;
         if (val.lastIndexOf('%') > -1) {
@@ -40,16 +82,6 @@ export class InfiniteScroll {
             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) {
@@ -58,18 +90,6 @@ export class InfiniteScroll {
         }
         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) {
@@ -91,33 +111,6 @@ export class InfiniteScroll {
         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`

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

@@ -7,26 +7,9 @@ import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 export class InfiniteScrollContent {
-    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;
+    constructor() {
+        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
             const mode = getIonMode(this);