@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11788449221.155f9f1e

package/dist/collection/components/breadcrumb/breadcrumb.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
@@ -55,12 +61,12 @@
  */
 :host {
   /**
-    * @prop --color: Text color of the breadcrumb
-    * @prop --color-active: Text color of the active breadcrumb
-    * @prop --color-hover: Text color of the breadcrumb on hover
-    * @prop --color-focused: Text color of the breadcrumb when focused
-    * @prop --background-focused: Background color of the breadcrumb when focused
-    */
+   * @prop --color: Text color of the breadcrumb
+   * @prop --color-active: Text color of the active breadcrumb
+   * @prop --color-hover: Text color of the breadcrumb on hover
+   * @prop --color-focused: Text color of the breadcrumb when focused
+   * @prop --background-focused: Background color of the breadcrumb when focused
+   */
   display: flex;
   flex: 0 0 auto;
   align-items: center;
@@ -71,18 +77,18 @@
 }
 
 .breadcrumb-native {
+  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;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -183,6 +189,12 @@
   font-size: 1.375rem;
 }
 
+/**
+ * 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/breadcrumbs/breadcrumbs.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

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -3,45 +3,103 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- *
+ * @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 Breadcrumbs {
-    collapsed;
-    activeChanged;
-    el;
-    /**
-     * 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;
-    /**
-     * The maximum number of breadcrumbs to show before collapsing.
-     */
-    maxItems;
-    /**
-     * The number of breadcrumbs to show before the collapsed indicator.
-     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
-     * the breadcrumbs will not be collapsed.
-     */
-    itemsBeforeCollapse = 1;
-    /**
-     * The number of breadcrumbs to show after the collapsed indicator.
-     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
-     * the breadcrumbs will not be collapsed.
-     */
-    itemsAfterCollapse = 1;
-    /**
-     * Emitted when the collapsed indicator is clicked on.
-     */
-    ionCollapsedClick;
+    constructor() {
+        /**
+         * The number of breadcrumbs to show before the collapsed indicator.
+         * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+         * the breadcrumbs will not be collapsed.
+         */
+        this.itemsBeforeCollapse = 1;
+        /**
+         * The number of breadcrumbs to show after the collapsed indicator.
+         * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+         * the breadcrumbs will not be collapsed.
+         */
+        this.itemsAfterCollapse = 1;
+        this.breadcrumbsInit = () => {
+            this.setBreadcrumbSeparator();
+            this.setMaxItems();
+        };
+        this.resetActiveBreadcrumb = () => {
+            const breadcrumbs = this.getBreadcrumbs();
+            // Only reset the active breadcrumb if we were the ones to change it
+            // otherwise use the one set on the component
+            const activeBreadcrumb = breadcrumbs.find((breadcrumb) => breadcrumb.active);
+            if (activeBreadcrumb && this.activeChanged) {
+                activeBreadcrumb.active = false;
+            }
+        };
+        this.setMaxItems = () => {
+            const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
+            const breadcrumbs = this.getBreadcrumbs();
+            for (const breadcrumb of breadcrumbs) {
+                breadcrumb.showCollapsedIndicator = false;
+                breadcrumb.collapsed = false;
+            }
+            // If the number of breadcrumbs exceeds the maximum number of items
+            // that should show and the items before / after collapse do not
+            // exceed the maximum items then we need to collapse the breadcrumbs
+            const shouldCollapse = maxItems !== undefined && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
+            if (shouldCollapse) {
+                // Show the collapsed indicator in the first breadcrumb that collapses
+                breadcrumbs.forEach((breadcrumb, index) => {
+                    if (index === itemsBeforeCollapse) {
+                        breadcrumb.showCollapsedIndicator = true;
+                    }
+                    // Collapse all breadcrumbs that have an index greater than or equal to
+                    // the number before collapse and an index less than the total number
+                    // of breadcrumbs minus the items that should show after the collapse
+                    if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
+                        breadcrumb.collapsed = true;
+                    }
+                });
+            }
+        };
+        this.setBreadcrumbSeparator = () => {
+            const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
+            const breadcrumbs = this.getBreadcrumbs();
+            // Check if an active breadcrumb exists already
+            const active = breadcrumbs.find((breadcrumb) => breadcrumb.active);
+            // Set the separator on all but the last breadcrumb
+            for (const breadcrumb of breadcrumbs) {
+                // The only time the last breadcrumb changes is when
+                // itemsAfterCollapse is set to 0, in this case the
+                // last breadcrumb will be the collapsed indicator
+                const last = maxItems !== undefined && itemsAfterCollapse === 0
+                    ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
+                    : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
+                breadcrumb.last = last;
+                // If the breadcrumb has defined whether or not to show the
+                // separator then use that value, otherwise check if it's the
+                // last breadcrumb
+                const separator = breadcrumb.separator !== undefined ? breadcrumb.separator : last ? undefined : true;
+                breadcrumb.separator = separator;
+                // If there is not an active breadcrumb already
+                // set the last one to active
+                if (!active && last) {
+                    breadcrumb.active = true;
+                    this.activeChanged = true;
+                }
+            }
+        };
+        this.getBreadcrumbs = () => {
+            return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
+        };
+        this.slotChanged = () => {
+            this.resetActiveBreadcrumb();
+            this.breadcrumbsInit();
+        };
+    }
     onCollapsedClick(ev) {
         const breadcrumbs = this.getBreadcrumbs();
         const collapsedBreadcrumbs = breadcrumbs.filter((breadcrumb) => breadcrumb.collapsed);
-        this.ionCollapsedClick.emit({ ...ev.detail, collapsedBreadcrumbs });
+        this.ionCollapsedClick.emit(Object.assign(Object.assign({}, ev.detail), { collapsedBreadcrumbs }));
     }
     maxItemsChanged() {
         this.resetActiveBreadcrumb();
@@ -50,101 +108,30 @@ export class Breadcrumbs {
     componentWillLoad() {
         this.breadcrumbsInit();
     }
-    breadcrumbsInit = () => {
-        this.setBreadcrumbSeparator();
-        this.setMaxItems();
-    };
-    resetActiveBreadcrumb = () => {
-        const breadcrumbs = this.getBreadcrumbs();
-        // Only reset the active breadcrumb if we were the ones to change it
-        // otherwise use the one set on the component
-        const activeBreadcrumb = breadcrumbs.find((breadcrumb) => breadcrumb.active);
-        if (activeBreadcrumb && this.activeChanged) {
-            activeBreadcrumb.active = false;
-        }
-    };
-    setMaxItems = () => {
-        const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
-        const breadcrumbs = this.getBreadcrumbs();
-        for (const breadcrumb of breadcrumbs) {
-            breadcrumb.showCollapsedIndicator = false;
-            breadcrumb.collapsed = false;
-        }
-        // If the number of breadcrumbs exceeds the maximum number of items
-        // that should show and the items before / after collapse do not
-        // exceed the maximum items then we need to collapse the breadcrumbs
-        const shouldCollapse = maxItems !== undefined && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
-        if (shouldCollapse) {
-            // Show the collapsed indicator in the first breadcrumb that collapses
-            breadcrumbs.forEach((breadcrumb, index) => {
-                if (index === itemsBeforeCollapse) {
-                    breadcrumb.showCollapsedIndicator = true;
-                }
-                // Collapse all breadcrumbs that have an index greater than or equal to
-                // the number before collapse and an index less than the total number
-                // of breadcrumbs minus the items that should show after the collapse
-                if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
-                    breadcrumb.collapsed = true;
-                }
-            });
-        }
-    };
-    setBreadcrumbSeparator = () => {
-        const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
-        const breadcrumbs = this.getBreadcrumbs();
-        // Check if an active breadcrumb exists already
-        const active = breadcrumbs.find((breadcrumb) => breadcrumb.active);
-        // Set the separator on all but the last breadcrumb
-        for (const breadcrumb of breadcrumbs) {
-            // The only time the last breadcrumb changes is when
-            // itemsAfterCollapse is set to 0, in this case the
-            // last breadcrumb will be the collapsed indicator
-            const last = maxItems !== undefined && itemsAfterCollapse === 0
-                ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
-                : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
-            breadcrumb.last = last;
-            // If the breadcrumb has defined whether or not to show the
-            // separator then use that value, otherwise check if it's the
-            // last breadcrumb
-            const separator = breadcrumb.separator !== undefined ? breadcrumb.separator : last ? undefined : true;
-            breadcrumb.separator = separator;
-            // If there is not an active breadcrumb already
-            // set the last one to active
-            if (!active && last) {
-                breadcrumb.active = true;
-                this.activeChanged = true;
-            }
-        }
-    };
-    getBreadcrumbs = () => {
-        return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
-    };
-    slotChanged = () => {
-        this.resetActiveBreadcrumb();
-        this.breadcrumbsInit();
-    };
     render() {
         const { color, collapsed } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'fe64e9cdf597ede2db140bf5fa05a0359d82db57', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '40b6dc5e9e13ca903d2e67b726f505813365a653', class: createColorClasses(color, {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, h("slot", { key: 'a2c99b579e339055c50a613d5c6b61032f5ddffe', onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: '40eac8ef488b237dc9d21b349d0837c9bf3e52f3', onSlotchange: this.slotChanged })));
     }
     static get is() { return "ion-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["breadcrumbs.ios.scss"],
-            "md": ["breadcrumbs.md.scss"]
+            "md": ["breadcrumbs.md.scss"],
+            "ionic": ["breadcrumbs.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["breadcrumbs.ios.css"],
-            "md": ["breadcrumbs.md.css"]
+            "md": ["breadcrumbs.md.css"],
+            "ionic": ["breadcrumbs.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/breadcrumbs/breadcrumbs.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