@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11789504012.1a675914

package/dist/collection/components/spinner/spinner.js

@@ -4,28 +4,19 @@
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme, getIonMode } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
+/**
+ * @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 Spinner {
-    /**
-     * 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).
-     */
-    color;
-    /**
-     * Duration of the spinner animation in milliseconds. The default varies based on the spinner.
-     */
-    duration;
-    /**
-     * The name of the SVG spinner to use. If a name is not provided, the platform's default
-     * spinner will be used.
-     */
-    name;
-    /**
-     * If `true`, the spinner's animation will be paused.
-     */
-    paused = false;
+    constructor() {
+        /**
+         * If `true`, the spinner's animation will be paused.
+         */
+        this.paused = false;
+    }
     getName() {
         const spinnerName = this.name || config.get('spinner');
         const mode = getIonMode(this);
@@ -34,11 +25,25 @@ export class Spinner {
         }
         return mode === 'ios' ? 'lines' : 'circular';
     }
+    getSize() {
+        const theme = getIonTheme(this);
+        const { size } = this;
+        // TODO(ROU-10912): Remove theme check when sizes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (size === undefined) {
+            return 'xsmall';
+        }
+        return size;
+    }
     render() {
+        var _a;
         const self = this;
-        const mode = getIonMode(self);
+        const theme = getIonTheme(self);
         const spinnerName = self.getName();
-        const spinner = SPINNERS[spinnerName] ?? SPINNERS['lines'];
+        const size = this.getSize();
+        const spinner = (_a = SPINNERS[spinnerName]) !== null && _a !== void 0 ? _a : SPINNERS['lines'];
         const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
         const svgs = [];
         if (spinner.circles !== undefined) {
@@ -51,22 +56,27 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '87102ff9ea58b0ecde5d0978386374f7d0e9cf98', class: createColorClasses(self.color, {
-                [mode]: true,
+        return (h(Host, { key: 'b79be740dda143c26a7eba82cc9e293817c36f9c', class: createColorClasses(self.color, {
+                [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
+                [`spinner-${size}`]: size !== undefined,
             }), role: "progressbar", style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} }, svgs));
     }
     static get is() { return "ion-spinner"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["spinner.scss"]
+            "ios": ["spinner.native.scss"],
+            "md": ["spinner.native.scss"],
+            "ionic": ["spinner.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["spinner.css"]
+            "ios": ["spinner.native.css"],
+            "md": ["spinner.native.css"],
+            "ionic": ["spinner.ionic.css"]
         };
     }
     static get properties() {
@@ -161,6 +171,25 @@ export class Spinner {
                 "reflect": false,
                 "attribute": "paused",
                 "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"xsmall\"` for the smallest size.\nSet to `\"small\"` for a smaller size.\nSet to `\"medium\"` for a medium size.\nSet to `\"large\"` for a large size.\nSet to `\"xlarge\"` for the largest size.\n\nDefaults to `\"xsmall\"` for the `ionic` theme, undefined for all other themes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
             }
         };
     }

package/dist/collection/components/spinner/spinner.native.css

@@ -0,0 +1,199 @@
+/**
+ * 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 {
+  /**
+   * @prop --color: Color of the spinner
+   */
+  display: inline-block;
+  position: relative;
+  width: 28px;
+  height: 28px;
+  color: var(--color);
+  overflow: hidden;
+  user-select: none;
+}
+
+:host(.ion-color) {
+  color: var(--ion-color-base);
+}
+
+svg {
+  transform-origin: center;
+  position: absolute;
+  /**
+   * Do not use @include position
+   * as the alignment of the elements with
+   * a spinner should not be RTL aware.
+   */
+  top: 0;
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateZ(0);
+}
+:host-context([dir=rtl]) svg {
+  transform-origin: calc(100% - center);
+}
+
+[dir=rtl] svg {
+  transform-origin: calc(100% - center);
+}
+
+@supports selector(:dir(rtl)) {
+  svg:dir(rtl) {
+    transform-origin: calc(100% - center);
+  }
+}
+
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line,
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-linecap: round;
+  stroke: currentColor;
+}
+
+:host(.spinner-lines) svg,
+:host(.spinner-lines-small) svg,
+:host(.spinner-lines-sharp) svg,
+:host(.spinner-lines-sharp-small) svg {
+  animation: spinner-fade-out 1s linear infinite;
+}
+
+:host(.spinner-bubbles) svg {
+  animation: spinner-scale-out 1s linear infinite;
+  fill: currentColor;
+}
+
+:host(.spinner-circles) svg {
+  animation: spinner-fade-out 1s linear infinite;
+  fill: currentColor;
+}
+
+:host(.spinner-crescent) circle {
+  fill: transparent;
+  stroke-width: 4px;
+  stroke-dasharray: 128px;
+  stroke-dashoffset: 82px;
+  stroke: currentColor;
+}
+
+:host(.spinner-crescent) svg {
+  animation: spinner-rotate 1s linear infinite;
+}
+
+:host(.spinner-dots) circle {
+  stroke-width: 0;
+  fill: currentColor;
+}
+
+:host(.spinner-dots) svg {
+  animation: spinner-dots 1s linear infinite;
+}
+
+:host(.spinner-circular) svg {
+  animation: spinner-circular linear infinite;
+}
+
+:host(.spinner-circular) circle {
+  animation: spinner-circular-inner ease-in-out infinite;
+  stroke: currentColor;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0px;
+  stroke-width: 5.6;
+  fill: none;
+}
+
+:host(.spinner-paused),
+:host(.spinner-paused) svg,
+:host(.spinner-paused) circle {
+  animation-play-state: paused;
+}
+
+@keyframes spinner-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes spinner-scale-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(0, 0);
+  }
+}
+@keyframes spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-dots {
+  0% {
+    transform: scale(1, 1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(0.4, 0.4);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 0.9;
+  }
+}
+@keyframes spinner-circular {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-circular-inner {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0px;
+  }
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+}
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line {
+  stroke-width: 7px;
+}
+
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-width: 4px;
+}

package/dist/collection/components/split-pane/split-pane.ios.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
@@ -116,8 +128,8 @@
    * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
    */
   --side-width: 100%;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -128,8 +140,8 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -151,6 +163,12 @@
   display: none;
 }
 
+/**
+ * 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/split-pane/split-pane.js

@@ -3,10 +3,11 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 // TODO(FW-2832): types
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
+// TODO(FW-7285): Replace with global breakpoints
 const QUERY = {
     xs: '(min-width: 0px)',
     sm: '(min-width: 576px)',
@@ -15,32 +16,24 @@ const QUERY = {
     xl: '(min-width: 1200px)',
     never: '',
 };
+/**
+ * @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 SplitPane {
-    rmL;
-    el;
-    visible = false;
-    /**
-     * The `id` of the main content. When using
-     * a router this is typically `ion-router-outlet`.
-     * When not using a router, this is typically
-     * your main view's `ion-content`. This is not the
-     * id of the `ion-content` inside of your `ion-menu`.
-     */
-    contentId;
-    /**
-     * If `true`, the split pane will be hidden.
-     */
-    disabled = false;
-    /**
-     * When the split-pane should be shown.
-     * Can be a CSS media query expression, or a shortcut expression.
-     * Can also be a boolean expression.
-     */
-    when = QUERY['lg'];
-    /**
-     * Expression to be called when the split-pane visibility has changed
-     */
-    ionSplitPaneVisible;
+    constructor() {
+        this.visible = false;
+        /**
+         * If `true`, the split pane will be hidden.
+         */
+        this.disabled = false;
+        /**
+         * When the split-pane should be shown.
+         * Can be a CSS media query expression, or a shortcut expression.
+         * Can also be a boolean expression.
+         */
+        this.when = QUERY['lg'];
+    }
     visibleChanged(visible) {
         this.ionSplitPaneVisible.emit({ visible });
     }
@@ -137,26 +130,28 @@ export class SplitPane {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '652bc0965ae962dc36a67fd7129dacaa1ba8e551', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '99c50cd64e68d1c6b0bc96dd0b26536e0e4b4abd', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`split-pane-${mode}`]: true,
+                [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '9eac85f4c4e33ec00e8e16e2679f5975d7652452' })));
+            } }, h("slot", { key: '5cfb890a39fbe765df1880d1ecce78e90d997218' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["split-pane.ios.scss"],
-            "md": ["split-pane.md.scss"]
+            "md": ["split-pane.md.scss"],
+            "ionic": ["split-pane.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["split-pane.ios.css"],
-            "md": ["split-pane.md.css"]
+            "md": ["split-pane.md.css"],
+            "ionic": ["split-pane.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/split-pane/split-pane.md.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
@@ -116,8 +128,8 @@
    * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
    */
   --side-width: 100%;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -128,8 +140,8 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -151,6 +163,12 @@
   display: none;
 }
 
+/**
+ * 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/tab/tab.js

@@ -4,22 +4,15 @@
 import { Build, Host, h } from "@stencil/core";
 import { attachComponent } from "../../utils/framework-delegate";
 import { printIonError } from "../../utils/logging/index";
+/**
+ * @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 Tab {
-    loadPromise;
-    el;
-    /** @internal */
-    active = false;
-    /** @internal */
-    delegate;
-    /**
-     * A tab id must be provided for each `ion-tab`. It's used internally to reference
-     * the selected tab or by the router to switch between them.
-     */
-    tab;
-    /**
-     * The component to display inside of the tab.
-     */
-    component;
+    constructor() {
+        /** @internal */
+        this.active = false;
+    }
     async componentWillLoad() {
         if (Build.isDev) {
             if (this.component !== undefined && this.el.childElementCount > 0) {
@@ -65,10 +58,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '8ecbd7a85d3370ed8ed40561cd8134e71584d6aa', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'fad6d6f10e09fa268c978b3edc5fd2fa2353289b', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '8d6326d75812888e33fd09665b7e588e1e270df1' })));
+            } }, h("slot", { key: 'ff3bfedc122f2641d4d742ab7f635941931939e9' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }