@ionic/core 9.0.0 → 9.0.1-dev.11787248963.10a00c73

package/dist/esm/ion-back-button.entry.js

@@ -1,11 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, g as getElement, e as config, h, d as Host } from './index-ChhhtsGZ.js';
-import { i as inheritAriaAttributes } from './helpers-CAGf8Wgp.js';
+import { r as registerInstance, e as config, h, d as Host, g as getElement } from './index-CKYcsw8f.js';
+import { i as inheritAriaAttributes } from './helpers-BIgoInJU.js';
 import { o as openURL, c as createColorClasses, h as hostContext } from './theme-byZM6qHV.js';
 import { c as chevronBack, a as arrowBackSharp } from './index-BvabGprD.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.js';
 import './dir-Dojwmvde.js';
 
 const backButtonIosCss = () => `:host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-kerning:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-hover:transparent;--background-hover-opacity:1;--background-focused:currentColor;--background-focused-opacity:.1;--border-radius:4px;--color:var(--ion-color-primary, #0054e9);--icon-margin-end:1px;--icon-margin-start:-4px;--icon-font-size:1.6em;--min-height:32px;font-size:clamp(17px, 1.0625rem, 21.998px)}.button-native{-webkit-transform:translateZ(0);transform:translateZ(0);overflow:visible;z-index:99}:host(.ion-activated) .button-native{opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}`;
@@ -15,41 +15,24 @@ const backButtonMdCss = () => `:host{--background:transparent;--color-focused:cu
 const BackButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.inheritedAttributes = {};
+        /**
+         * If `true`, the user cannot interact with the button.
+         */
+        this.disabled = false;
+        /**
+         * The type of the button.
+         */
+        this.type = 'button';
+        this.onClick = async (ev) => {
+            const nav = this.el.closest('ion-nav');
+            ev.preventDefault();
+            if (nav && (await nav.canGoBack())) {
+                return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
+            }
+            return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
+        };
     }
-    inheritedAttributes = {};
-    get el() { return getElement(this); }
-    /**
-     * 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 url to navigate back to by default when there is no history.
-     */
-    defaultHref;
-    /**
-     * If `true`, the user cannot interact with the button.
-     */
-    disabled = false;
-    /**
-     * The built-in named SVG icon name or the exact `src` of an SVG file
-     * to use for the back button.
-     */
-    icon;
-    /**
-     * The text to display in the back button.
-     */
-    text;
-    /**
-     * The type of the button.
-     */
-    type = 'button';
-    /**
-     * When using a router, it specifies the transition animation when navigating to
-     * another page.
-     */
-    routerAnimation;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
         if (this.defaultHref === undefined) {
@@ -84,14 +67,6 @@ const BackButton = class {
         }
         return 'bounded';
     }
-    onClick = async (ev) => {
-        const nav = this.el.closest('ion-nav');
-        ev.preventDefault();
-        if (nav && (await nav.canGoBack())) {
-            return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
-        }
-        return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
-    };
     render() {
         const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes, } = this;
         const showBackButton = defaultHref !== undefined;
@@ -109,6 +84,7 @@ const BackButton = class {
                 'show-back-button': showBackButton,
             }) }, h("button", { key: '63bc75ef0ad7cc9fb79e58217a3314b20acd73e3', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '5d3eacbd11af2245c6e1151cab446a0d96559ad8', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '6439af0ae463764174e7d3207f02267811df666d', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '8ee89fb18dfdb5b75948a8b197ff4cdbc008742f', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { key: '63803a884998bc73bea5afe0b2a0a14e3fa4d6bf', type: this.rippleType }))));
     }
+    get el() { return getElement(this); }
 };
 BackButton.style = {
     ios: backButtonIosCss(),

package/dist/esm/ion-backdrop.entry.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, h, d as Host } from './index-ChhhtsGZ.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { r as registerInstance, c as createEvent, h, d as Host } from './index-CKYcsw8f.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.js';
 
 const backdropIosCss = () => `:host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}`;
 
@@ -12,23 +12,19 @@ const Backdrop = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
+        /**
+         * If `true`, the backdrop will be visible.
+         */
+        this.visible = true;
+        /**
+         * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
+         */
+        this.tappable = true;
+        /**
+         * If `true`, the backdrop will stop propagation on tap.
+         */
+        this.stopPropagation = true;
     }
-    /**
-     * If `true`, the backdrop will be visible.
-     */
-    visible = true;
-    /**
-     * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
-     */
-    tappable = true;
-    /**
-     * If `true`, the backdrop will stop propagation on tap.
-     */
-    stopPropagation = true;
-    /**
-     * Emitted when the backdrop is tapped.
-     */
-    ionBackdropTap;
     onMouseDown(ev) {
         this.emitTap(ev);
     }

package/dist/esm/ion-breadcrumb_2.entry.js

@@ -1,11 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, d as Host } from './index-ChhhtsGZ.js';
-import { i as inheritAriaAttributes } from './helpers-CAGf8Wgp.js';
+import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-CKYcsw8f.js';
+import { i as inheritAriaAttributes } from './helpers-BIgoInJU.js';
 import { c as createColorClasses, o as openURL, h as hostContext } from './theme-byZM6qHV.js';
 import { p as chevronForwardOutline, q as ellipsisHorizontal } from './index-BvabGprD.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.js';
 import './dir-Dojwmvde.js';
 
 const breadcrumbIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;align-items:center;color:var(--color);font-size:1rem;font-weight:400;line-height:1.5}.breadcrumb-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing: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;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;outline:none;background:inherit}:host(.breadcrumb-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.breadcrumb-active){color:var(--color-active)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .breadcrumb-native{background:var(--background-focused)}@media (any-hover: hover){:host(.ion-activatable:hover){color:var(--color-hover)}:host(.ion-activatable.in-breadcrumbs-color:hover),:host(.ion-activatable.ion-color:hover){color:var(--ion-color-shade)}}.breadcrumb-separator{display:-ms-inline-flexbox;display:inline-flex}:host(.breadcrumb-collapsed) .breadcrumb-native{display:none}:host(.in-breadcrumbs-color),:host(.in-breadcrumbs-color.breadcrumb-active){color:var(--ion-color-base)}:host(.in-breadcrumbs-color) .breadcrumb-separator{color:var(--ion-color-base)}:host(.ion-color){color:var(--ion-color-base)}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumb-separator{color:rgba(var(--ion-color-contrast-rgb), 0.8)}:host(.in-toolbar-color.breadcrumb-active){color:var(--ion-color-contrast)}.breadcrumbs-collapsed-indicator{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:14px;margin-inline-end:14px;margin-top:0;margin-bottom:0;display:-ms-flexbox;display:flex;-ms-flex:1 1 100%;flex:1 1 100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:32px;height:18px;border:0;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.breadcrumbs-collapsed-indicator ion-icon{margin-top:1px;font-size:1.375rem}:host{--color:var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665));--color-active:var(--ion-text-color, #03060b);--color-hover:var(--ion-text-color, #03060b);--color-focused:var(--color-active);--background-focused:var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7)));font-size:clamp(16px, 1rem, 22px)}:host(.breadcrumb-active){font-weight:600}.breadcrumb-native{border-radius:4px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:5px;padding-bottom:5px;border:1px solid transparent}:host(.ion-focused) .breadcrumb-native{border-radius:8px}:host(.in-breadcrumbs-color.ion-focused) .breadcrumb-native,:host(.ion-color.ion-focused) .breadcrumb-native{background:rgba(var(--ion-color-base-rgb), 0.1);color:var(--ion-color-base)}:host(.ion-focused) ::slotted(ion-icon),:host(.in-breadcrumbs-color.ion-focused) ::slotted(ion-icon),:host(.ion-color.ion-focused) ::slotted(ion-icon){color:var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78))}.breadcrumb-separator{color:var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a))}::slotted(ion-icon){color:var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));font-size:min(1.125rem, 21.6px)}::slotted(ion-icon[slot=start]){-webkit-margin-end:8px;margin-inline-end:8px}::slotted(ion-icon[slot=end]){-webkit-margin-start:8px;margin-inline-start:8px}:host(.breadcrumb-active) ::slotted(ion-icon){color:var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39))}.breadcrumbs-collapsed-indicator{border-radius:4px;background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3));color:var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a))}.breadcrumbs-collapsed-indicator:hover{opacity:0.45}.breadcrumbs-collapsed-indicator:focus{background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea))}.breadcrumbs-collapsed-indicator ion-icon{font-size:min(1.375rem, 22px)}`;
@@ -18,103 +18,40 @@ const Breadcrumb = class {
         this.ionFocus = createEvent(this, "ionFocus", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
         this.collapsedClick = createEvent(this, "collapsedClick", 7);
+        this.inheritedAttributes = {};
+        /** @internal */
+        this.collapsed = false;
+        /**
+         * If `true`, the breadcrumb will take on a different look to show that
+         * it is the currently active breadcrumb. Defaults to `true` for the
+         * last breadcrumb if it is not set on any.
+         */
+        this.active = false;
+        /**
+         * If `true`, the user cannot interact with the breadcrumb.
+         */
+        this.disabled = false;
+        /**
+         * When using a router, it specifies the transition direction when navigating to
+         * another page using `href`.
+         */
+        this.routerDirection = 'forward';
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+        this.collapsedIndicatorClick = () => {
+            this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
+        };
     }
-    inheritedAttributes = {};
-    collapsedRef;
-    /** @internal */
-    collapsed = false;
-    /** @internal */
-    last;
-    /** @internal */
-    showCollapsedIndicator;
-    get el() { return getElement(this); }
-    /**
-     * 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;
-    /**
-     * If `true`, the breadcrumb will take on a different look to show that
-     * it is the currently active breadcrumb. Defaults to `true` for the
-     * last breadcrumb if it is not set on any.
-     */
-    active = false;
-    /**
-     * If `true`, the user cannot interact with the breadcrumb.
-     */
-    disabled = false;
-    /**
-     * This attribute instructs browsers to download a URL instead of navigating to
-     * it, so the user will be prompted to save it as a local file. If the attribute
-     * has a value, it is used as the pre-filled file name in the Save prompt
-     * (the user can still change the file name if they want).
-     */
-    download;
-    /**
-     * Contains a URL or a URL fragment that the hyperlink points to.
-     * If this property is set, an anchor tag will be rendered.
-     */
-    href;
-    /**
-     * Specifies the relationship of the target object to the link object.
-     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-     */
-    rel;
-    /**
-     * If true, show a separator between this breadcrumb and the next.
-     * Defaults to `true` for all breadcrumbs except the last.
-     */
-    separator;
-    /**
-     * Specifies where to display the linked URL.
-     * Only applies when an `href` is provided.
-     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
-     */
-    target;
-    /**
-     * When using a router, it specifies the transition direction when navigating to
-     * another page using `href`.
-     */
-    routerDirection = 'forward';
-    /**
-     * When using a router, it specifies the transition animation when navigating to
-     * another page using `href`.
-     */
-    routerAnimation;
-    /**
-     * Emitted when the breadcrumb has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the breadcrumb loses focus.
-     */
-    ionBlur;
-    /**
-     * Emitted when the collapsed indicator is clicked on.
-     * `ion-breadcrumbs` will listen for this and emit ionCollapsedClick.
-     * Normally we could just emit this as `ionCollapsedClick`
-     * and let the event bubble to `ion-breadcrumbs`,
-     * but if the event custom event is not set on `ion-breadcrumbs`,
-     * TypeScript will throw an error in user applications.
-     * @internal
-     */
-    collapsedClick;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     isClickable() {
         return this.href !== undefined;
     }
-    onFocus = () => {
-        this.ionFocus.emit();
-    };
-    onBlur = () => {
-        this.ionBlur.emit();
-    };
-    collapsedIndicatorClick = () => {
-        this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
-    };
     render() {
         const { color, active, collapsed, disabled, download, el, inheritedAttributes, last, routerAnimation, routerDirection, separator, showCollapsedIndicator, target, } = this;
         const clickable = this.isClickable();
@@ -154,6 +91,7 @@ const Breadcrumb = class {
          */
         h("span", { key: 'fc3c741cb01fafef8b26046c7ee5b190efc69a7c', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: '4871932ae1dae520767e0713e7cee2d11b0bba6d', name: "separator" }, mode === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
     }
+    get el() { return getElement(this); }
 };
 Breadcrumb.style = {
     ios: breadcrumbIosCss(),
@@ -168,36 +106,92 @@ const Breadcrumbs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionCollapsedClick = createEvent(this, "ionCollapsedClick", 7);
+        /**
+         * 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();
+        };
     }
-    collapsed;
-    activeChanged;
-    get el() { return getElement(this); }
-    /**
-     * 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;
     onCollapsedClick(ev) {
         const breadcrumbs = this.getBreadcrumbs();
         const collapsedBreadcrumbs = breadcrumbs.filter((breadcrumb) => breadcrumb.collapsed);
@@ -210,79 +204,6 @@ const Breadcrumbs = class {
     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);
@@ -293,6 +214,7 @@ const Breadcrumbs = class {
                 'breadcrumbs-collapsed': collapsed,
             }) }, h("slot", { key: 'a2c99b579e339055c50a613d5c6b61032f5ddffe', onSlotchange: this.slotChanged })));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "maxItems": [{
                 "maxItemsChanged": 0