@ionic/core 8.4.2-dev.11736507189.18234064 → 8.4.2-dev.11736797843.16cc5058

package/dist/collection/components/loading/loading.js

@@ -9,15 +9,14 @@ import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegate
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Loading {
     constructor() {
@@ -26,26 +25,45 @@ export class Loading {
         this.triggerController = createTriggerController();
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
         this.presented = false;
-        this.onBackdropTap = () => {
-            this.dismiss(undefined, BACKDROP);
-        };
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
+        /** @internal */
         this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
         this.keyboardClose = true;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
-        this.message = undefined;
-        this.cssClass = undefined;
+        /**
+         * Number of milliseconds to wait before dismissing the loading indicator.
+         */
         this.duration = 0;
+        /**
+         * If `true`, the loading indicator will be dismissed when the backdrop is clicked.
+         */
         this.backdropDismiss = false;
+        /**
+         * If `true`, a backdrop will be displayed behind the loading indicator.
+         */
         this.showBackdrop = true;
-        this.spinner = undefined;
+        /**
+         * If `true`, the loading indicator 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;
+        /**
+         * If `true`, the loading indicator will animate.
+         */
         this.animated = true;
-        this.htmlAttributes = undefined;
+        /**
+         * If `true`, the loading indicator will open. If `false`, the loading indicator will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the loadingController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the loading indicator dismisses. You will need to do that in your code.
+         */
         this.isOpen = false;
-        this.trigger = undefined;
+        this.onBackdropTap = () => {
+            this.dismiss(undefined, BACKDROP);
+        };
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -68,8 +86,8 @@ export class Loading {
     componentWillLoad() {
         var _a;
         if (this.spinner === undefined) {
-            const theme = getIonTheme(this);
-            this.spinner = config.get('loadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
+            const mode = getIonMode(this);
+            this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
         }
         if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
             setOverlayId(this.el);
@@ -155,31 +173,29 @@ export class Loading {
     }
     render() {
         const { message, spinner, htmlAttributes, overlayIndex } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const msgId = `loading-${overlayIndex}-msg`;
         /**
          * If the message is defined, use that as the label.
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: '8ac040fdd2856dad3105905554586ebe654379d2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd97f536b7f443ea19a2bbf2dcbc7f546b8e0a092', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '7c062f2ac0b017e5e1ccb47cfefa6d01dd721b68', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '23275eaa81163a92ef5ff86f3f79e35e445c2888', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '64f46afe7e197ccf26f9ec3fb9e141f6937a3de2', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '58967d7525bf6ce35889ba86b2a58e7ef59df6f6', class: "loading-spinner" }, h("ion-spinner", { key: '3e4be00f0468050bc9931749f546fd67f20f227f', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'fa8a6aaab5c148fed75215593130fdcbb5370ef2', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '6cd39bd7912fd080ab59d041644054c96d238ea9', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c14ca5a9308844f11bcb010257e15208a75b39bc', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '118bceefa8e1cf8b225a858f224e6d919cf03c26', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '490d6e8ae4433835fe273162d7b90deab944fb39', class: "loading-spinner" }, h("ion-spinner", { key: 'c5cf6549c43df4cb23814b3e62ec4d9e7ea2b64f', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '2b888362122d3b66b0492d53b0c21bd6a2a97501', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["loading.ios.scss"],
-            "md": ["loading.md.scss"],
-            "ionic": ["loading.md.scss"]
+            "md": ["loading.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["loading.ios.css"],
-            "md": ["loading.md.css"],
-            "ionic": ["loading.md.css"]
+            "md": ["loading.md.css"]
         };
     }
     static get properties() {
@@ -201,6 +217,8 @@ export class Loading {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "overlay-index",
                 "reflect": false
             },
@@ -226,7 +244,9 @@ export class Loading {
                             "text": undefined
                         }],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "hasController": {
                 "type": "boolean",
@@ -245,6 +265,8 @@ export class Loading {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "has-controller",
                 "reflect": false,
                 "defaultValue": "false"
@@ -263,6 +285,8 @@ export class Loading {
                     "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"
@@ -286,7 +310,9 @@ export class Loading {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the loading indicator is presented."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "leaveAnimation": {
                 "type": "unknown",
@@ -307,7 +333,9 @@ export class Loading {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the loading indicator is dismissed."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "message": {
                 "type": "string",
@@ -329,6 +357,8 @@ export class Loading {
                     "tags": [],
                     "text": "Optional text content to display in the loading indicator.\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": "message",
                 "reflect": false
             },
@@ -346,6 +376,8 @@ export class Loading {
                     "tags": [],
                     "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
             },
@@ -363,6 +395,8 @@ export class Loading {
                     "tags": [],
                     "text": "Number of milliseconds to wait before dismissing the loading indicator."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "duration",
                 "reflect": false,
                 "defaultValue": "0"
@@ -381,6 +415,8 @@ export class Loading {
                     "tags": [],
                     "text": "If `true`, the loading indicator will be dismissed when the backdrop is clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "backdrop-dismiss",
                 "reflect": false,
                 "defaultValue": "false"
@@ -399,6 +435,8 @@ export class Loading {
                     "tags": [],
                     "text": "If `true`, a backdrop will be displayed behind the loading indicator."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-backdrop",
                 "reflect": false,
                 "defaultValue": "true"
@@ -423,6 +461,8 @@ export class Loading {
                     "tags": [],
                     "text": "The name of the spinner to display."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spinner",
                 "reflect": false
             },
@@ -438,8 +478,10 @@ export class Loading {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the loading indicator will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the loading indicator 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"
@@ -458,6 +500,8 @@ export class Loading {
                     "tags": [],
                     "text": "If `true`, the loading indicator will animate."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
@@ -475,7 +519,9 @@ export class Loading {
                 "docs": {
                     "tags": [],
                     "text": "Additional attributes to pass to the loader."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "isOpen": {
                 "type": "boolean",
@@ -491,6 +537,8 @@ export class Loading {
                     "tags": [],
                     "text": "If `true`, the loading indicator will open. If `false`, the loading indicator will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the loadingController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe loading indicator dismisses. You will need to do that in your code."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-open",
                 "reflect": false,
                 "defaultValue": "false"
@@ -509,6 +557,8 @@ export class Loading {
                     "tags": [],
                     "text": "An ID corresponding to the trigger element that\ncauses the loading indicator to open when clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "trigger",
                 "reflect": false
             }

package/dist/collection/components/loading/loading.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -81,8 +75,8 @@
   --height: auto;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -120,12 +114,6 @@ ion-spinner {
   color: var(--spinner-color);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/menu/menu.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -78,8 +72,8 @@
   --min-height: auto;
   --max-height: auto;
   --background: var(--ion-background-color, #fff);
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: none;
@@ -282,8 +276,8 @@ ion-backdrop {
 }
 
 :host(.menu-pane-visible.split-pane-side) {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -305,8 +299,8 @@ ion-backdrop {
 }
 
 :host(.menu-pane-visible) .menu-inner {
-  right: 0;
   left: 0;
+  right: 0;
   width: auto;
   transform: none;
   box-shadow: none;
@@ -339,12 +333,6 @@ ion-backdrop {
   max-width: var(--side-max-width);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/menu/menu.js

@@ -12,15 +12,12 @@ import { BACKDROP, GESTURE, getPresentedOverlay } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
 const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
 const iosEasingReverse = 'cubic-bezier(1, 0, 0.68, 0.28)';
 const mdEasingReverse = 'cubic-bezier(0.4, 0, 0.6, 1)';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @part container - The container for the menu content.
  * @part backdrop - The backdrop that appears over the main content when the menu is open.
  */
@@ -54,14 +51,32 @@ export class Menu {
             }
             this.trapKeyboardFocus(ev, document);
         };
+        /**
+         * If true, then the menu should be
+         * visible within a split pane.
+         * If false, then the menu is hidden.
+         * However, the menu-button/menu-toggle
+         * components can be used to open the
+         * menu.
+         */
         this.isPaneVisible = false;
         this.isEndSide = false;
-        this.contentId = undefined;
-        this.menuId = undefined;
-        this.type = undefined;
+        /**
+         * If `true`, the menu is disabled.
+         */
         this.disabled = false;
+        /**
+         * Which side of the view the menu should be placed.
+         */
         this.side = 'start';
+        /**
+         * If `true`, swiping the menu is enabled.
+         */
         this.swipeGesture = true;
+        /**
+         * The edge threshold for dragging the menu open.
+         * If a drag/swipe happens over this value, the menu is not triggered.
+         */
         this.maxEdgeStart = 50;
     }
     typeChanged(type, oldType) {
@@ -611,35 +626,33 @@ export class Menu {
     }
     render() {
         const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         /**
          * If the Close Watcher is enabled then
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '964fd60bf2f959dd63b049ecd564b861338038b5', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
-                [theme]: true,
+        return (h(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+                [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: '5dc09eac5f44ca2059392daa2727df041e473b10', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '2a2a9e0a834af2d13844db3220077081732fc3c1' })), h("ion-backdrop", { key: '01ad941f90206ba6321ff7681155e0c31578ae80', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["menu.ios.scss"],
-            "md": ["menu.md.scss"],
-            "ionic": ["menu.md.scss"]
+            "md": ["menu.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["menu.ios.css"],
-            "md": ["menu.md.css"],
-            "ionic": ["menu.md.css"]
+            "md": ["menu.md.css"]
         };
     }
     static get properties() {
@@ -658,6 +671,8 @@ export class Menu {
                     "tags": [],
                     "text": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "content-id",
                 "reflect": true
             },
@@ -675,6 +690,8 @@ export class Menu {
                     "tags": [],
                     "text": "An id for the menu."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "menu-id",
                 "reflect": true
             },
@@ -698,6 +715,8 @@ export class Menu {
                     "tags": [],
                     "text": "The display type of the menu.\nAvailable options: `\"overlay\"`, `\"reveal\"`, `\"push\"`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false
             },
@@ -715,6 +734,8 @@ export class Menu {
                     "tags": [],
                     "text": "If `true`, the menu is disabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -739,6 +760,8 @@ export class Menu {
                     "tags": [],
                     "text": "Which side of the view the menu should be placed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "side",
                 "reflect": true,
                 "defaultValue": "'start'"
@@ -757,6 +780,8 @@ export class Menu {
                     "tags": [],
                     "text": "If `true`, swiping the menu is enabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "swipe-gesture",
                 "reflect": false,
                 "defaultValue": "true"
@@ -775,6 +800,8 @@ export class Menu {
                     "tags": [],
                     "text": "The edge threshold for dragging the menu open.\nIf a drag/swipe happens over this value, the menu is not triggered."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max-edge-start",
                 "reflect": false,
                 "defaultValue": "50"

package/dist/collection/components/menu/menu.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -78,8 +72,8 @@
   --min-height: auto;
   --max-height: auto;
   --background: var(--ion-background-color, #fff);
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: none;
@@ -282,8 +276,8 @@ ion-backdrop {
 }
 
 :host(.menu-pane-visible.split-pane-side) {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -305,8 +299,8 @@ ion-backdrop {
 }
 
 :host(.menu-pane-visible) .menu-inner {
-  right: 0;
   left: 0;
+  right: 0;
   width: auto;
   transform: none;
   box-shadow: none;
@@ -339,12 +333,6 @@ ion-backdrop {
   max-width: var(--side-max-width);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use