@ionic/core 8.5.4-dev.11743814940.14e938eb → 8.5.4-dev.11744052844.17c6a004

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

@@ -22,18 +22,6 @@ export class DatetimeButton {
     constructor() {
         this.datetimeEl = null;
         this.overlayEl = null;
-        this.datetimePresentation = 'date-time';
-        this.datetimeActive = false;
-        /**
-         * 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).
-         */
-        this.color = 'primary';
-        /**
-         * If `true`, the user cannot interact with the button.
-         */
-        this.disabled = false;
         /**
          * Accepts one or more string values and converts
          * them to DatetimeParts. This is done so datetime-button
@@ -249,6 +237,14 @@ export class DatetimeButton {
                 overlayEl.present();
             }
         };
+        this.datetimePresentation = 'date-time';
+        this.dateText = undefined;
+        this.timeText = undefined;
+        this.datetimeActive = false;
+        this.selectedButton = undefined;
+        this.color = 'primary';
+        this.disabled = false;
+        this.datetime = undefined;
     }
     async componentWillLoad() {
         const { datetime } = this;
@@ -365,7 +361,6 @@ export class DatetimeButton {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -384,14 +379,12 @@ export class DatetimeButton {
                     "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,
                 "defaultValue": "'primary'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -404,14 +397,12 @@ export class DatetimeButton {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "datetime": {
                 "type": "string",
-                "attribute": "datetime",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -424,8 +415,7 @@ export class DatetimeButton {
                     "tags": [],
                     "text": "The ID of the `ion-datetime` instance\nassociated with the datetime button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "datetime",
                 "reflect": false
             }
         };

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

@@ -5,16 +5,9 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Fab {
     constructor() {
-        /**
-         * If `true`, the fab will display on the edge of the header if
-         * `vertical` is `"top"`, and on the edge of the footer if
-         * it is `"bottom"`. Should be used with a `fixed` slot.
-         */
+        this.horizontal = undefined;
+        this.vertical = undefined;
         this.edge = false;
-        /**
-         * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.
-         * That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
-         */
         this.activated = false;
     }
     activatedChanged() {
@@ -77,7 +70,6 @@ export class Fab {
         return {
             "horizontal": {
                 "type": "string",
-                "attribute": "horizontal",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'center'",
@@ -90,13 +82,11 @@ export class Fab {
                     "tags": [],
                     "text": "Where to align the fab horizontally in the viewport."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "horizontal",
                 "reflect": false
             },
             "vertical": {
                 "type": "string",
-                "attribute": "vertical",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom' | 'center'",
@@ -109,13 +99,11 @@ export class Fab {
                     "tags": [],
                     "text": "Where to align the fab vertically in the viewport."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "vertical",
                 "reflect": false
             },
             "edge": {
                 "type": "boolean",
-                "attribute": "edge",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -128,14 +116,12 @@ export class Fab {
                     "tags": [],
                     "text": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "edge",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "activated": {
                 "type": "boolean",
-                "attribute": "activated",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -148,8 +134,7 @@ export class Fab {
                     "tags": [],
                     "text": "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.\nThat means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "activated",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -16,39 +16,6 @@ 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();
         };
@@ -62,6 +29,20 @@ 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');
@@ -113,7 +94,6 @@ export class FabButton {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -132,13 +112,11 @@ 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
             },
             "activated": {
                 "type": "boolean",
-                "attribute": "activated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -151,14 +129,12 @@ 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"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -171,14 +147,12 @@ 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"
             },
             "download": {
                 "type": "string",
-                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -191,13 +165,11 @@ 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
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -210,13 +182,11 @@ 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
             },
             "rel": {
                 "type": "string",
-                "attribute": "rel",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -229,13 +199,11 @@ 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
             },
             "routerDirection": {
                 "type": "string",
-                "attribute": "router-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "RouterDirection",
@@ -254,14 +222,12 @@ 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'"
             },
             "routerAnimation": {
                 "type": "unknown",
-                "attribute": "router-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder | undefined",
@@ -279,13 +245,10 @@ 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",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -298,13 +261,11 @@ 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
             },
             "show": {
                 "type": "boolean",
-                "attribute": "show",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -317,14 +278,12 @@ 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"
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -337,14 +296,12 @@ 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"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'submit' | 'reset' | 'button'",
@@ -357,14 +314,12 @@ export class FabButton {
                     "tags": [],
                     "text": "The type of the button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'button'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small'",
@@ -377,13 +332,11 @@ 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
             },
             "closeIcon": {
                 "type": "string",
-                "attribute": "close-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -396,8 +349,7 @@ 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,13 +5,7 @@ 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) {
@@ -46,7 +40,6 @@ export class FabList {
         return {
             "activated": {
                 "type": "boolean",
-                "attribute": "activated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -59,14 +52,12 @@ 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"
             },
             "side": {
                 "type": "string",
-                "attribute": "side",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'top' | 'bottom'",
@@ -79,8 +70,7 @@ 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,16 +12,6 @@ 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') {
@@ -51,6 +41,9 @@ export class Footer {
             scrollEl.addEventListener('scroll', this.contentScrollCallback);
             handleFooterFade(scrollEl, this.el);
         };
+        this.keyboardVisible = false;
+        this.collapse = undefined;
+        this.translucent = false;
     }
     componentDidLoad() {
         this.checkCollapsibleFooter();
@@ -114,7 +107,6 @@ export class Footer {
         return {
             "collapse": {
                 "type": "string",
-                "attribute": "collapse",
                 "mutable": false,
                 "complexType": {
                     "original": "'fade'",
@@ -127,13 +119,11 @@ 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
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -146,8 +136,7 @@ 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,9 +5,6 @@ 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() {
@@ -33,7 +30,6 @@ export class Grid {
         return {
             "fixed": {
                 "type": "boolean",
-                "attribute": "fixed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -46,8 +42,7 @@ 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,15 +13,6 @@ 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));
             /**
@@ -33,6 +24,8 @@ 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);
@@ -173,7 +166,6 @@ export class Header {
         return {
             "collapse": {
                 "type": "string",
-                "attribute": "collapse",
                 "mutable": false,
                 "complexType": {
                     "original": "'condense' | 'fade'",
@@ -186,13 +178,11 @@ 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
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -205,8 +195,7 @@ 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"
             }