@ionic/core 8.4.2-dev.11736265112.120bf7af → 8.4.2-dev.11736507189.18234064

package/dist/collection/components/reorder-group/reorder-group.js

@@ -5,7 +5,11 @@ import { Host, h } from "@stencil/core";
 import { findClosestIonContent, getScrollElement } from "../../utils/content/index";
 import { raf } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class ReorderGroup {
     constructor() {
         this.lastToIndex = -1;
@@ -237,9 +241,9 @@ export class ReorderGroup {
         return this.scrollEl.scrollTop - this.scrollElInitial;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'a38c7fbceb677201330a602273d5b55abb32da19', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'd0943b2132b0923a2b2e480b11b30665c84820f8', class: {
+                [theme]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
             } }));
@@ -271,8 +275,6 @@ export class ReorderGroup {
                     "tags": [],
                     "text": "If `true`, the reorder will be hidden."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "true"

package/dist/collection/components/ripple-effect/{ripple-effect.css → ripple-effect.common.css}

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -54,8 +60,8 @@
  * }
  */
 :host {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;

package/dist/collection/components/ripple-effect/ripple-effect.ionic.css

@@ -0,0 +1,154 @@
+/**
+ * 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
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  contain: strict;
+  pointer-events: none;
+}
+
+:host(.unbounded) {
+  contain: layout size style;
+}
+
+.ripple-effect {
+  border-radius: 50%;
+  position: absolute;
+  background-color: currentColor;
+  color: inherit;
+  contain: strict;
+  opacity: 0;
+  animation: 225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;
+  will-change: transform, opacity;
+  pointer-events: none;
+}
+
+.fade-out {
+  transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  animation: 150ms fadeOutAnimation forwards;
+}
+
+@keyframes rippleAnimation {
+  from {
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transform: scale(1);
+  }
+  to {
+    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  }
+}
+@keyframes fadeInAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0;
+  }
+  to {
+    opacity: 0.16;
+  }
+}
+@keyframes fadeOutAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0.16;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.ripple-effect {
+  animation-name: rippleAnimation, fadeInAnimation;
+}
+
+.fade-out {
+  animation-name: fadeOutAnimation;
+}
+
+@keyframes rippleAnimation {
+  from {
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transform: scale(1);
+  }
+  to {
+    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  }
+}
+@keyframes fadeInAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0;
+  }
+  to {
+    opacity: var(--ripple-opacity, 0.16);
+  }
+}
+@keyframes fadeOutAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: var(--ripple-opacity, 0.16);
+  }
+  to {
+    opacity: 0;
+  }
+}

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -2,7 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class RippleEffect {
     constructor() {
         this.type = 'bounded';
@@ -58,9 +62,9 @@ export class RippleEffect {
         return this.type === 'unbounded';
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '7ae559bda5d2c1856a45bfa150c2cb4f83373f8e', role: "presentation", class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '3247c71e55919c1d84abd099dbfae9afd2626cb2', role: "presentation", class: {
+                [theme]: true,
                 unbounded: this.unbounded,
             } }));
     }
@@ -68,12 +72,16 @@ export class RippleEffect {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["ripple-effect.scss"]
+            "ios": ["ripple-effect.common.scss"],
+            "md": ["ripple-effect.common.scss"],
+            "ionic": ["ripple-effect.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["ripple-effect.css"]
+            "ios": ["ripple-effect.common.css"],
+            "md": ["ripple-effect.common.css"],
+            "ionic": ["ripple-effect.ionic.css"]
         };
     }
     static get properties() {
@@ -92,8 +100,6 @@ export class RippleEffect {
                     "tags": [],
                     "text": "Sets the type of ripple-effect:\n\n- `bounded`: the ripple effect expands from the user's click position\n- `unbounded`: the ripple effect expands from the center of the button and overflows the container.\n\nNOTE: Surfaces for bounded ripples should have the overflow property set to hidden,\nwhile surfaces for unbounded ripples should have it set to visible."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'bounded'"

package/dist/collection/components/route/route.js

@@ -1,4 +1,8 @@
 // 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.
+ */
 export class Route {
     constructor() {
         this.url = '';
@@ -47,8 +51,6 @@ export class Route {
                     "tags": [],
                     "text": "Relative path that needs to match in order for this route to apply.\n\nAccepts paths similar to expressjs so that you can define parameters\nin the url /foo/:bar where bar would be available in incoming props."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "url",
                 "reflect": false,
                 "defaultValue": "''"
@@ -67,8 +69,6 @@ export class Route {
                     "tags": [],
                     "text": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "component",
                 "reflect": false
             },
@@ -85,9 +85,7 @@ export class Route {
                 "docs": {
                     "tags": [],
                     "text": "A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed\nto the defined component when rendered."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "beforeLeave": {
                 "type": "unknown",
@@ -108,9 +106,7 @@ export class Route {
                 "docs": {
                     "tags": [],
                     "text": "A navigation hook that is fired when the route tries to leave.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "beforeEnter": {
                 "type": "unknown",
@@ -131,9 +127,7 @@ export class Route {
                 "docs": {
                     "tags": [],
                     "text": "A navigation hook that is fired when the route tries to enter.\nReturning `true` allows the navigation to proceed, while returning\n`false` causes it to be cancelled. Returning a `NavigationHookOptions`\nobject causes the router to redirect to the path specified."
-                },
-                "getter": false,
-                "setter": false
+                }
             }
         };
     }

package/dist/collection/components/route-redirect/route-redirect.js

@@ -26,8 +26,6 @@ export class RouteRedirect {
                     "tags": [],
                     "text": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "from",
                 "reflect": false
             },
@@ -45,8 +43,6 @@ export class RouteRedirect {
                     "tags": [],
                     "text": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL.\nWhen the defined `ion-route-redirect` rule matches, the router will redirect to the path\nspecified in this property.\n\nThe value of this property is always an absolute path inside the scope of routes defined in\n`ion-router` it can't be used with another router or to perform a redirection to a different domain.\n\nNote that this is a virtual redirect, it will not cause a real browser refresh, again, it's\na redirect inside the context of ion-router.\n\nWhen this property is not specified or his value is `undefined` the whole redirect route is noop,\neven if the \"from\" value matches."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "to",
                 "reflect": false
             }

package/dist/collection/components/router/router.js

@@ -5,6 +5,10 @@ import { readNavState, waitUntilNavNode, writeNavState } from "./utils/dom";
 import { findChainForIDs, findChainForSegments, findRouteRedirect } from "./utils/matching";
 import { readRedirects, readRoutes } from "./utils/parser";
 import { chainToSegments, generatePath, parsePath, readSegments, writeSegments } from "./utils/path";
+/**
+ * @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.
+ */
 export class Router {
     constructor() {
         this.previousPath = null;
@@ -283,8 +287,6 @@ export class Router {
                     "tags": [],
                     "text": "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify\nan alternate prefix for all URL paths."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "root",
                 "reflect": false,
                 "defaultValue": "'/'"
@@ -303,8 +305,6 @@ export class Router {
                     "tags": [],
                     "text": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "use-hash",
                 "reflect": false,
                 "defaultValue": "true"

package/dist/collection/components/router-link/router-link.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -69,16 +75,16 @@
 }
 
 a {
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
 }

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

@@ -3,7 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses, openURL } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class RouterLink {
     constructor() {
         this.onClick = (ev) => {
@@ -17,16 +21,16 @@ export class RouterLink {
         this.target = undefined;
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const attrs = {
             href: this.href,
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '529ceed5beaf92d7b4cc315c82f449eac18310e8', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '0fde5901c0926db89fa26ed4f381eb1d08e66abe', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'd5f1f8b256695d70bdafd20ff3d1b625963fa2da' }, attrs), h("slot", { key: '613fcdb36a71e076f989551ea21f1d5c118b1cd2' }))));
+            }) }, h("a", Object.assign({ key: 'd22a6b6d76a2260bcaa98b6d8baf4ba28bb3a5ef' }, attrs), h("slot", { key: '4bc67249a8b9eaf224a6725ff0af4101a1c1560c' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }
@@ -62,8 +66,6 @@ export class RouterLink {
                     "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
             },
@@ -81,8 +83,6 @@ export class RouterLink {
                     "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
             },
@@ -100,8 +100,6 @@ export class RouterLink {
                     "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
             },
@@ -125,8 +123,6 @@ export class RouterLink {
                     "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'"
@@ -150,9 +146,7 @@ export class RouterLink {
                 "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",
@@ -168,8 +162,6 @@ export class RouterLink {
                     "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
             }

package/dist/collection/components/router-outlet/router-outlet.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -54,8 +60,8 @@
  * }
  */
 :host {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;

package/dist/collection/components/router-outlet/router-outlet.js

@@ -9,6 +9,9 @@ import { createLockController } from "../../utils/lock-controller";
 import { transition } from "../../utils/transition/index";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
+/**
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class RouterOutlet {
     constructor() {
         this.lockController = createLockController();
@@ -177,7 +180,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: 'a70341f58d19df55de1dad00e3464388e446aa2a' });
+        return h("slot", { key: 'ecc0afb72e03453f0f196901ed4f48ffcb13fae1' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }
@@ -210,10 +213,8 @@ export class RouterOutlet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The mode determines which platform styles to use."
+                    "text": "The mode determines the platform behaviors of the component."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "mode",
                 "reflect": false,
                 "defaultValue": "getIonMode(this)"
@@ -240,9 +241,7 @@ export class RouterOutlet {
                             "text": undefined
                         }],
                     "text": ""
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "animated": {
                 "type": "boolean",
@@ -258,8 +257,6 @@ export class RouterOutlet {
                     "tags": [],
                     "text": "If `true`, the router-outlet should animate the transition of components."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
@@ -283,9 +280,7 @@ export class RouterOutlet {
                 "docs": {
                     "tags": [],
                     "text": "This property allows to create custom transition using AnimationBuilder functions."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "swipeHandler": {
                 "type": "unknown",
@@ -309,9 +304,7 @@ export class RouterOutlet {
                             "text": undefined
                         }],
                     "text": ""
-                },
-                "getter": false,
-                "setter": false
+                }
             }
         };
     }

package/dist/collection/components/row/row.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * 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/row/row.js

@@ -2,10 +2,17 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class Row {
     render() {
-        return (h(Host, { key: 'aea072a5005e3f1f309f0d1ae5be5ee19869b035', class: getIonMode(this) }, h("slot", { key: '2a481c2126ac6ca65f0a1bbd07c2d3365409cb78' })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '369ed55bee4f62544da323faabea568ff6ad2b8e', class: {
+                [theme]: true,
+            } }, h("slot", { key: '4b1a1ed7d933f83b0f4a79e961312db46a2a2eb2' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }