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

package/dist/collection/components/modal/modal.js

@@ -41,6 +41,98 @@ export class Modal {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
+        this.presented = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = true;
+        /**
+         * A decimal value between 0 and 1 that indicates the
+         * point after which the backdrop will begin to fade in
+         * when using a sheet modal. Prior to this point, the
+         * backdrop will be hidden and the content underneath
+         * the sheet can be interacted with. This value is exclusive
+         * meaning the backdrop will become active after the value
+         * specified.
+         */
+        this.backdropBreakpoint = 0;
+        /**
+         * The interaction behavior for the sheet modal when the handle is pressed.
+         *
+         * Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed.
+         * Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.
+         *
+         * Handle behavior is unavailable when the `handle` property is set to `false` or
+         * when the `breakpoints` property is not set (using a fullscreen or card modal).
+         */
+        this.handleBehavior = 'none';
+        /**
+         * If `true`, the modal will be dismissed when the backdrop is clicked.
+         */
+        this.backdropDismiss = true;
+        /**
+         * If `true`, a backdrop will be displayed behind the modal.
+         * This property controls whether or not the backdrop
+         * darkens the screen when the modal is presented.
+         * It does not control whether or not the backdrop
+         * is active or present in the DOM.
+         */
+        this.showBackdrop = true;
+        /**
+         * If `true`, the modal will animate.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the modal will open. If `false`, the modal will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the modalController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the modal dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
+        /**
+         * If `true`, the component passed into `ion-modal` will
+         * automatically be mounted when the modal is created. The
+         * component will remain mounted even when the modal is dismissed.
+         * However, the component will be destroyed when the modal is
+         * destroyed. This property is not reactive and should only be
+         * used when initially creating a modal.
+         *
+         * Note: This feature only applies to inline modals in JavaScript
+         * frameworks such as Angular, React, and Vue.
+         */
+        this.keepContentsMounted = false;
+        /**
+         * If `true`, focus will not be allowed to move outside of this overlay.
+         * If `false`, focus will be allowed to move outside of the overlay.
+         *
+         * In most scenarios this property should remain set to `true`. Setting
+         * this property to `false` can cause severe accessibility issues as users
+         * relying on assistive technologies may be able to move focus into
+         * a confusing state. We recommend only setting this to `false` when
+         * absolutely necessary.
+         *
+         * Developers may want to consider disabling focus trapping if this
+         * overlay presents a non-Ionic overlay from a 3rd party library.
+         * Developers would disable focus trapping on the Ionic overlay
+         * when presenting the 3rd party overlay and then re-enable
+         * focus trapping when dismissing the 3rd party overlay and moving
+         * focus back to the Ionic overlay.
+         */
+        this.focusTrap = true;
+        /**
+         * Determines whether or not a modal can dismiss
+         * when calling the `dismiss` method.
+         *
+         * If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.
+         * If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+         *
+         * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+         * if you need to access `this` from within the callback.
+         */
+        this.canDismiss = true;
         this.onHandleClick = () => {
             const { sheetTransition, handleBehavior } = this;
             if (handleBehavior !== 'cycle' || sheetTransition !== undefined) {
@@ -78,31 +170,6 @@ export class Modal {
                 el.dispatchEvent(ev);
             }
         };
-        this.presented = false;
-        this.hasController = false;
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
-        this.keyboardClose = true;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
-        this.breakpoints = undefined;
-        this.initialBreakpoint = undefined;
-        this.backdropBreakpoint = 0;
-        this.handle = undefined;
-        this.handleBehavior = 'none';
-        this.component = undefined;
-        this.componentProps = undefined;
-        this.cssClass = undefined;
-        this.backdropDismiss = true;
-        this.showBackdrop = true;
-        this.animated = true;
-        this.presentingElement = undefined;
-        this.htmlAttributes = undefined;
-        this.isOpen = false;
-        this.trigger = undefined;
-        this.keepContentsMounted = false;
-        this.focusTrap = true;
-        this.canDismiss = true;
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -612,6 +679,8 @@ export class Modal {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "has-controller",
                 "reflect": false,
                 "defaultValue": "false"
@@ -633,6 +702,8 @@ export class Modal {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "overlay-index",
                 "reflect": false
             },
@@ -658,7 +729,9 @@ export class Modal {
                             "text": undefined
                         }],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "keyboardClose": {
                 "type": "boolean",
@@ -674,6 +747,8 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "keyboard-close",
                 "reflect": false,
                 "defaultValue": "true"
@@ -697,7 +772,9 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the modal is presented."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "leaveAnimation": {
                 "type": "unknown",
@@ -718,7 +795,9 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the modal is dismissed."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "breakpoints": {
                 "type": "unknown",
@@ -733,7 +812,9 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "The breakpoints to use when creating a sheet modal. Each value in the\narray must be a decimal between 0 and 1 where 0 indicates the modal is fully\nclosed and 1 indicates the modal is fully open. Values are relative\nto the height of the modal, not the height of the screen. One of the values in this\narray must be the value of the `initialBreakpoint` property.\nFor example: [0, .25, .5, 1]"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "initialBreakpoint": {
                 "type": "number",
@@ -749,6 +830,8 @@ export class Modal {
                     "tags": [],
                     "text": "A decimal value between 0 and 1 that indicates the\ninitial point the modal will open at when creating a\nsheet modal. This value must also be listed in the\n`breakpoints` array."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "initial-breakpoint",
                 "reflect": false
             },
@@ -766,6 +849,8 @@ export class Modal {
                     "tags": [],
                     "text": "A decimal value between 0 and 1 that indicates the\npoint after which the backdrop will begin to fade in\nwhen using a sheet modal. Prior to this point, the\nbackdrop will be hidden and the content underneath\nthe sheet can be interacted with. This value is exclusive\nmeaning the backdrop will become active after the value\nspecified."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "backdrop-breakpoint",
                 "reflect": false,
                 "defaultValue": "0"
@@ -784,6 +869,8 @@ export class Modal {
                     "tags": [],
                     "text": "The horizontal line that displays at the top of a sheet modal. It is `true` by default when\nsetting the `breakpoints` and `initialBreakpoint` properties."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "handle",
                 "reflect": false
             },
@@ -807,6 +894,8 @@ export class Modal {
                     "tags": [],
                     "text": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "handle-behavior",
                 "reflect": false,
                 "defaultValue": "'none'"
@@ -834,6 +923,8 @@ export class Modal {
                         }],
                     "text": "The component to display inside of the modal."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "component",
                 "reflect": false
             },
@@ -859,7 +950,9 @@ export class Modal {
                             "text": undefined
                         }],
                     "text": "The data to pass to the modal component."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "cssClass": {
                 "type": "string",
@@ -878,6 +971,8 @@ export class Modal {
                         }],
                     "text": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "css-class",
                 "reflect": false
             },
@@ -895,6 +990,8 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the modal will be dismissed when the backdrop is clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "backdrop-dismiss",
                 "reflect": false,
                 "defaultValue": "true"
@@ -913,6 +1010,8 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, a backdrop will be displayed behind the modal.\nThis property controls whether or not the backdrop\ndarkens the screen when the modal is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-backdrop",
                 "reflect": false,
                 "defaultValue": "true"
@@ -931,6 +1030,8 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the modal will animate."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
@@ -953,7 +1054,9 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "The element that presented the modal. This is used for card presentation effects\nand for stacking multiple modals on top of each other. Only applies in iOS mode."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "htmlAttributes": {
                 "type": "unknown",
@@ -968,7 +1071,9 @@ export class Modal {
                 "docs": {
                     "tags": [],
                     "text": "Additional attributes to pass to the modal."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "isOpen": {
                 "type": "boolean",
@@ -984,6 +1089,8 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the modal will open. If `false`, the modal will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the modalController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe modal dismisses. You will need to do that in your code."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-open",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1002,6 +1109,8 @@ export class Modal {
                     "tags": [],
                     "text": "An ID corresponding to the trigger element that\ncauses the modal to open when clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "trigger",
                 "reflect": false
             },
@@ -1019,6 +1128,8 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, the component passed into `ion-modal` will\nautomatically be mounted when the modal is created. The\ncomponent will remain mounted even when the modal is dismissed.\nHowever, the component will be destroyed when the modal is\ndestroyed. This property is not reactive and should only be\nused when initially creating a modal.\n\nNote: This feature only applies to inline modals in JavaScript\nframeworks such as Angular, React, and Vue."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "keep-contents-mounted",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1037,6 +1148,8 @@ export class Modal {
                     "tags": [],
                     "text": "If `true`, focus will not be allowed to move outside of this overlay.\nIf `false`, focus will be allowed to move outside of the overlay.\n\nIn most scenarios this property should remain set to `true`. Setting\nthis property to `false` can cause severe accessibility issues as users\nrelying on assistive technologies may be able to move focus into\na confusing state. We recommend only setting this to `false` when\nabsolutely necessary.\n\nDevelopers may want to consider disabling focus trapping if this\noverlay presents a non-Ionic overlay from a 3rd party library.\nDevelopers would disable focus trapping on the Ionic overlay\nwhen presenting the 3rd party overlay and then re-enable\nfocus trapping when dismissing the 3rd party overlay and moving\nfocus back to the Ionic overlay."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "focus-trap",
                 "reflect": false,
                 "defaultValue": "true"
@@ -1060,6 +1173,8 @@ export class Modal {
                     "tags": [],
                     "text": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "can-dismiss",
                 "reflect": false,
                 "defaultValue": "true"

package/dist/collection/components/nav/nav.js

@@ -19,12 +19,10 @@ export class Nav {
         this.destroyed = false;
         this.views = [];
         this.didLoad = false;
-        this.delegate = undefined;
-        this.swipeGesture = undefined;
+        /**
+         * If `true`, the nav should animate the transition of components.
+         */
         this.animated = true;
-        this.animation = undefined;
-        this.rootParams = undefined;
-        this.root = undefined;
     }
     swipeGestureChanged() {
         if (this.gesture) {
@@ -868,7 +866,9 @@ export class Nav {
                             "text": undefined
                         }],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "swipeGesture": {
                 "type": "boolean",
@@ -884,6 +884,8 @@ export class Nav {
                     "tags": [],
                     "text": "If the nav component should allow for swipe-to-go-back."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "swipe-gesture",
                 "reflect": false
             },
@@ -901,6 +903,8 @@ export class Nav {
                     "tags": [],
                     "text": "If `true`, the nav should animate the transition of components."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
@@ -924,7 +928,9 @@ export class Nav {
                 "docs": {
                     "tags": [],
                     "text": "By default `ion-nav` animates transition between pages based in the mode (ios or material design).\nHowever, this property allows to create custom transition using `AnimationBuilder` functions."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "rootParams": {
                 "type": "unknown",
@@ -945,7 +951,9 @@ export class Nav {
                 "docs": {
                     "tags": [],
                     "text": "Any parameters for the root component"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "root": {
                 "type": "string",
@@ -967,6 +975,8 @@ export class Nav {
                     "tags": [],
                     "text": "Root NavComponent to load"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "root",
                 "reflect": false
             }

package/dist/collection/components/nav-link/nav-link.js

@@ -5,13 +5,13 @@ import { Host, h } from "@stencil/core";
 import { navLink } from "./nav-link-utils";
 export class NavLink {
     constructor() {
+        /**
+         * The transition direction when navigating to another page.
+         */
+        this.routerDirection = 'forward';
         this.onClick = () => {
             return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
         };
-        this.component = undefined;
-        this.componentProps = undefined;
-        this.routerDirection = 'forward';
-        this.routerAnimation = undefined;
     }
     render() {
         return h(Host, { key: 'd2f8545b4fbd5aa25ef36eb01dffbc5d35ccfbb9', onClick: this.onClick });
@@ -39,6 +39,8 @@ export class NavLink {
                     "tags": [],
                     "text": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "component",
                 "reflect": false
             },
@@ -61,7 +63,9 @@ export class NavLink {
                 "docs": {
                     "tags": [],
                     "text": "Data you want to pass to the component as props. Only used if the `\"routerDirection\"` is `\"forward\"` or `\"root\"`."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "routerDirection": {
                 "type": "string",
@@ -83,6 +87,8 @@ export class NavLink {
                     "tags": [],
                     "text": "The transition direction when navigating to another page."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "router-direction",
                 "reflect": false,
                 "defaultValue": "'forward'"
@@ -106,7 +112,9 @@ export class NavLink {
                 "docs": {
                     "tags": [],
                     "text": "The transition animation when navigating to another page."
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

package/dist/collection/components/note/note.js

@@ -8,9 +8,6 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Note {
-    constructor() {
-        this.color = undefined;
-    }
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '10a3495bc21166176986441479f8f7539029d161', class: createColorClasses(this.color, {
@@ -53,6 +50,8 @@ export class Note {
                     "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
             }

package/dist/collection/components/picker-column/picker-column.js

@@ -20,6 +20,28 @@ export class PickerColumn {
         this.isColumnVisible = false;
         this.canExitInputMode = true;
         this.updateValueTextOnScroll = false;
+        this.ariaLabel = null;
+        this.isActive = false;
+        /**
+         * If `true`, the user cannot interact with the picker.
+         */
+        this.disabled = 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`, tapping the picker will
+         * reveal a number input keyboard that lets
+         * the user type in values for each picker
+         * column. This is useful when working
+         * with time pickers.
+         *
+         * @internal
+         */
+        this.numericInput = false;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
             const { isColumnVisible, scrollEl } = this;
             if (isColumnVisible && scrollEl) {
@@ -388,12 +410,6 @@ export class PickerColumn {
              */
             return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
         };
-        this.ariaLabel = null;
-        this.isActive = false;
-        this.disabled = false;
-        this.value = undefined;
-        this.color = 'primary';
-        this.numericInput = false;
     }
     ariaLabelChanged(newValue) {
         this.ariaLabel = newValue;
@@ -590,6 +606,8 @@ export class PickerColumn {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the picker."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -608,6 +626,8 @@ export class PickerColumn {
                     "tags": [],
                     "text": "The selected option in the picker."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -631,6 +651,8 @@ export class PickerColumn {
                     "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'"
@@ -652,6 +674,8 @@ export class PickerColumn {
                         }],
                     "text": "If `true`, tapping the picker will\nreveal a number input keyboard that lets\nthe user type in values for each picker\ncolumn. This is useful when working\nwith time pickers."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "numeric-input",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/picker-column-option/picker-column-option.js

@@ -13,9 +13,24 @@ export class PickerColumnOption {
          * clicking an enable option.
          */
         this.pickerColumn = null;
+        /**
+         * The aria-label of the option.
+         *
+         * If the value changes, then it will trigger a
+         * re-render of the picker since it's a @State variable.
+         * Otherwise, the `aria-label` attribute cannot be updated
+         * after the component is loaded.
+         */
         this.ariaLabel = null;
+        /**
+         * If `true`, the user cannot interact with the picker column option.
+         */
         this.disabled = false;
-        this.value = undefined;
+        /**
+         * 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';
     }
     /**
@@ -111,6 +126,8 @@ export class PickerColumnOption {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the picker column option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -129,6 +146,8 @@ export class PickerColumnOption {
                     "tags": [],
                     "text": "The text value of the option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -152,6 +171,8 @@ export class PickerColumnOption {
                     "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'"