@ionic/core 8.4.2-dev.11736277041.14f34ba1 → 8.4.2-dev.11736797843.16cc5058

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

@@ -16,6 +16,39 @@ export class FabButton {
     constructor() {
         this.fab = 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();
         };
@@ -29,20 +62,6 @@ export class FabButton {
             }
             fab.toggle();
         };
-        this.color = undefined;
-        this.activated = false;
-        this.disabled = false;
-        this.download = undefined;
-        this.href = undefined;
-        this.rel = undefined;
-        this.routerDirection = 'forward';
-        this.routerAnimation = undefined;
-        this.target = undefined;
-        this.show = false;
-        this.translucent = false;
-        this.type = 'button';
-        this.size = undefined;
-        this.closeIcon = close;
     }
     connectedCallback() {
         this.fab = this.el.closest('ion-fab');
@@ -112,6 +131,8 @@ export class FabButton {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -129,6 +150,8 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the fab button will be show a close icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "activated",
                 "reflect": false,
                 "defaultValue": "false"
@@ -147,6 +170,8 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the fab button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -165,6 +190,8 @@ export class FabButton {
                     "tags": [],
                     "text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "download",
                 "reflect": false
             },
@@ -182,6 +209,8 @@ export class FabButton {
                     "tags": [],
                     "text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false
             },
@@ -199,6 +228,8 @@ export class FabButton {
                     "tags": [],
                     "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rel",
                 "reflect": false
             },
@@ -222,6 +253,8 @@ export class FabButton {
                     "tags": [],
                     "text": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "router-direction",
                 "reflect": false,
                 "defaultValue": "'forward'"
@@ -245,7 +278,9 @@ export class FabButton {
                 "docs": {
                     "tags": [],
                     "text": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "target": {
                 "type": "string",
@@ -261,6 +296,8 @@ export class FabButton {
                     "tags": [],
                     "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target",
                 "reflect": false
             },
@@ -278,6 +315,8 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the fab button will show when in a fab-list."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show",
                 "reflect": false,
                 "defaultValue": "false"
@@ -296,6 +335,8 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"
@@ -314,6 +355,8 @@ export class FabButton {
                     "tags": [],
                     "text": "The type of the button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'button'"
@@ -332,6 +375,8 @@ export class FabButton {
                     "tags": [],
                     "text": "The size of the button. Set this to `small` in order to have a mini fab button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false
             },
@@ -349,6 +394,8 @@ export class FabButton {
                     "tags": [],
                     "text": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "close-icon",
                 "reflect": false,
                 "defaultValue": "close"

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

@@ -5,7 +5,13 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class FabList {
     constructor() {
+        /**
+         * 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) {
@@ -52,6 +58,8 @@ export class FabList {
                     "tags": [],
                     "text": "If `true`, the fab list will show all fab buttons in the list."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "activated",
                 "reflect": false,
                 "defaultValue": "false"
@@ -70,6 +78,8 @@ export class FabList {
                     "tags": [],
                     "text": "The side the fab list will show on relative to the main fab button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "side",
                 "reflect": false,
                 "defaultValue": "'bottom'"

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

@@ -12,6 +12,16 @@ import { handleFooterFade } from "./footer.utils";
 export class Footer {
     constructor() {
         this.keyboardCtrl = 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') {
@@ -41,9 +51,6 @@ export class Footer {
             scrollEl.addEventListener('scroll', this.contentScrollCallback);
             handleFooterFade(scrollEl, this.el);
         };
-        this.keyboardVisible = false;
-        this.collapse = undefined;
-        this.translucent = false;
     }
     componentDidLoad() {
         this.checkCollapsibleFooter();
@@ -119,6 +126,8 @@ export class Footer {
                     "tags": [],
                     "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "collapse",
                 "reflect": false
             },
@@ -136,6 +145,8 @@ export class Footer {
                     "tags": [],
                     "text": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -5,6 +5,9 @@ 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;
     }
     render() {
@@ -42,6 +45,8 @@ export class Grid {
                     "tags": [],
                     "text": "If `true`, the grid will have a fixed width based on the screen size."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "fixed",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -13,6 +13,15 @@ import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade,
 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));
             /**
@@ -24,8 +33,6 @@ export class Header {
             scrollEl.addEventListener('scroll', this.contentScrollCallback);
             handleHeaderFade(this.scrollEl, this.el, condenseHeader);
         };
-        this.collapse = undefined;
-        this.translucent = false;
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
@@ -178,6 +185,8 @@ export class Header {
                     "tags": [],
                     "text": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "collapse",
                 "reflect": false
             },
@@ -195,6 +204,8 @@ export class Header {
                     "tags": [],
                     "text": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -16,10 +16,6 @@ export class Img {
         this.onError = () => {
             this.ionError.emit();
         };
-        this.loadSrc = undefined;
-        this.loadError = undefined;
-        this.alt = undefined;
-        this.src = undefined;
     }
     srcChanged() {
         this.addIO();
@@ -101,6 +97,8 @@ export class Img {
                     "tags": [],
                     "text": "This attribute defines the alternative text describing the image.\nUsers will see this text displayed if the image URL is wrong,\nthe image is not in one of the supported formats, or if the image is not yet downloaded."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "alt",
                 "reflect": false
             },
@@ -118,6 +116,8 @@ export class Img {
                     "tags": [],
                     "text": "The image URL. This attribute is mandatory for the `<img>` element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "src",
                 "reflect": false
             }

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

@@ -17,6 +17,32 @@ export class InfiniteScroll {
          */
         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()) {
@@ -44,10 +70,6 @@ export class InfiniteScroll {
             }
             return 4;
         };
-        this.isLoading = false;
-        this.threshold = '15%';
-        this.disabled = false;
-        this.position = 'bottom';
     }
     thresholdChanged() {
         const val = this.threshold;
@@ -200,6 +222,8 @@ export class InfiniteScroll {
                     "tags": [],
                     "text": "The threshold distance from the bottom\nof the content to call the `infinite` output event when scrolled.\nThe threshold value can be either a percent, or\nin pixels. For example, use the value of `10%` for the `infinite`\noutput event to get called when the user has scrolled 10%\nfrom the bottom of the page. Use the value `100px` when the\nscroll is within 100 pixels from the bottom of the page."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "threshold",
                 "reflect": false,
                 "defaultValue": "'15%'"
@@ -218,6 +242,8 @@ export class InfiniteScroll {
                     "tags": [],
                     "text": "If `true`, the infinite scroll will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the infinite scroll from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe infinite scroll is no longer needed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -236,6 +262,8 @@ export class InfiniteScroll {
                     "tags": [],
                     "text": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'bottom'"

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

@@ -9,8 +9,6 @@ import { getIonMode } from "../../global/ionic-global";
 export class InfiniteScrollContent {
     constructor() {
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-        this.loadingSpinner = undefined;
-        this.loadingText = undefined;
     }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
@@ -68,6 +66,8 @@ export class InfiniteScrollContent {
                     "tags": [],
                     "text": "An animated SVG spinner that shows while loading."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading-spinner",
                 "reflect": false
             },
@@ -91,6 +91,8 @@ export class InfiniteScrollContent {
                     "tags": [],
                     "text": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading-text",
                 "reflect": false
             }