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

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

@@ -14,69 +14,118 @@ 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 {
-    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();
-            }
-        };
-    }
+    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;
     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
@@ -167,7 +216,7 @@ export class FabButton {
                 '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' }))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,17 +4,12 @@
 import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class FabList {
-    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';
-    }
+    el;
+    activateTimeouts = [];
+    /**
+     * If `true`, the fab list will show all fab buttons in the list.
+     */
+    activated = false;
     activatedChanged(activated) {
         this.activateTimeouts.forEach(clearTimeout);
         this.activateTimeouts = [];
@@ -25,6 +20,10 @@ 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,49 +10,26 @@ import { handleFooterFade } from "./footer.utils";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Footer {
-    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);
-        };
-    }
+    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;
     componentDidLoad() {
         this.checkCollapsibleFooter();
     }
@@ -96,6 +73,35 @@ 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);
@@ -106,7 +112,7 @@ export class Footer {
         const { translucent, collapse } = this;
         const mode = getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
-        const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
+        const tabBar = tabs?.querySelector(':scope > ion-tab-bar');
         return (h(Host, { key: '71939c4bbaef5062532a99ee2e33574102a9abad', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling

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

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

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

@@ -11,29 +11,28 @@ import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade,
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Header {
-    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);
-        };
-    }
+    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;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -77,6 +76,17 @@ 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();
@@ -148,14 +158,14 @@ 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, mode);
-        return (h(Host, Object.assign({ key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
+        return (h(Host, { key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
+            }, ...inheritedAttributes }, mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

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

@@ -3,27 +3,45 @@
  */
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
 import { getIonMode } from "../../global/ionic-global";
 /**
+ * @deprecated
+ *
  * @part image - The inner `img` element.
  */
 export class Img {
-    constructor() {
-        this.inheritedAttributes = {};
-        this.onLoad = () => {
-            this.ionImgDidLoad.emit();
-        };
-        this.onError = () => {
-            this.ionError.emit();
-        };
-    }
+    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;
     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() {
@@ -67,6 +85,12 @@ 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();
@@ -76,7 +100,7 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: '9bfaa659b0680189fd29f3acb2fdce7f70be6060', class: getIonMode(this) }, h("img", { key: 'd484beae0d5cbe0406958bfad40cdd6c05625340', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        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) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }