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

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -14,102 +14,41 @@ import { getIonMode } from "../../global/ionic-global";
  * @part collapsed-indicator - The indicator element that shows the breadcrumbs are collapsed.
  */
 export class Breadcrumb {
-    inheritedAttributes = {};
-    collapsedRef;
-    /** @internal */
-    collapsed = false;
-    /** @internal */
-    last;
-    /** @internal */
-    showCollapsedIndicator;
-    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;
-    /**
-     * 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;
+    constructor() {
+        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 });
+        };
+    }
     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();

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

@@ -9,35 +9,93 @@ import { getIonMode } from "../../global/ionic-global";
  *
  */
 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);
@@ -50,79 +108,6 @@ 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);

package/dist/collection/components/button/button.js

@@ -17,113 +17,71 @@ import { getIonMode } from "../../global/ionic-global";
  * @part native - The native HTML button or anchor element that wraps all child elements.
  */
 export class Button {
-    inItem = false;
-    inListHeader = false;
-    inToolbar = false;
-    formButtonEl = null;
-    formEl = null;
-    inheritedAttributes = {};
-    el;
-    /**
-     * If `true`, the button only has an icon.
-     */
-    isCircle = false;
-    /**
-     * 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 type of button.
-     */
-    buttonType = 'button';
-    /**
-     * If `true`, the user cannot interact with the button.
-     */
-    disabled = false;
+    constructor() {
+        this.inItem = false;
+        this.inListHeader = false;
+        this.inToolbar = false;
+        this.formButtonEl = null;
+        this.formEl = null;
+        this.inheritedAttributes = {};
+        /**
+         * If `true`, the button only has an icon.
+         */
+        this.isCircle = false;
+        /**
+         * The type of button.
+         */
+        this.buttonType = 'button';
+        /**
+         * If `true`, the user cannot interact with the button.
+         */
+        this.disabled = false;
+        /**
+         * When using a router, it specifies the transition direction when navigating to
+         * another page using `href`.
+         */
+        this.routerDirection = 'forward';
+        /**
+         * If `true`, activates a button with a heavier font weight.
+         */
+        this.strong = false;
+        /**
+         * The type of the button.
+         */
+        this.type = 'button';
+        this.handleClick = (ev) => {
+            const { el } = this;
+            if (this.type === 'button') {
+                openURL(this.href, ev, this.routerDirection, this.routerAnimation);
+            }
+            else if (hasShadowDom(el)) {
+                this.submitForm(ev);
+            }
+        };
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+        this.slotChanged = () => {
+            /**
+             * Ensures that the 'has-icon-only' class is properly added
+             * or removed from `ion-button` when manipulating the
+             * `icon-only` slot.
+             *
+             * Without this, the 'has-icon-only' class is only checked
+             * or added when `ion-button` component first renders.
+             */
+            this.isCircle = this.hasIconOnly;
+        };
+    }
     disabledChanged() {
         const { disabled } = this;
         if (this.formButtonEl) {
             this.formButtonEl.disabled = disabled;
         }
     }
-    /**
-     * Set to `"block"` for a full-width button or to `"full"` for a full-width button
-     * with square corners and no left or right borders.
-     */
-    expand;
-    /**
-     * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"`
-     * for a transparent button with a border, or to `"solid"` for a button with a filled background.
-     * The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
-     */
-    fill;
-    /**
-     * 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;
-    /**
-     * 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;
-    /**
-     * Set to `"round"` for a button with more rounded corners.
-     */
-    shape;
-    /**
-     * Set to `"small"` for a button with less height and padding, to `"default"`
-     * for a button with the default height and padding, or to `"large"` for a button
-     * with more height and padding. By default the size is unset, unless the button
-     * is inside of an item, where the size is `"small"` by default. Set the size to
-     * `"default"` inside of an item to make it a standard size button.
-     */
-    size;
-    /**
-     * If `true`, activates a button with a heavier font weight.
-     */
-    strong = false;
-    /**
-     * Specifies where to display the linked URL.
-     * Only applies when an `href` is provided.
-     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
-     */
-    target;
-    /**
-     * The type of the button.
-     */
-    type = 'button';
-    /**
-     * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
-     */
-    form;
-    /**
-     * Emitted when the button has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the button loses focus.
-     */
-    ionBlur;
     /**
      * This component is used within the `ion-input-password-toggle` component
      * to toggle the visibility of the password input.
@@ -251,32 +209,6 @@ export class Button {
             this.formButtonEl.click();
         }
     }
-    handleClick = (ev) => {
-        const { el } = this;
-        if (this.type === 'button') {
-            openURL(this.href, ev, this.routerDirection, this.routerAnimation);
-        }
-        else if (hasShadowDom(el)) {
-            this.submitForm(ev);
-        }
-    };
-    onFocus = () => {
-        this.ionFocus.emit();
-    };
-    onBlur = () => {
-        this.ionBlur.emit();
-    };
-    slotChanged = () => {
-        /**
-         * Ensures that the 'has-icon-only' class is properly added
-         * or removed from `ion-button` when manipulating the
-         * `icon-only` slot.
-         *
-         * Without this, the 'has-icon-only' class is only checked
-         * or added when `ion-button` component first renders.
-         */
-        this.isCircle = this.hasIconOnly;
-    };
     render() {
         const mode = getIonMode(this);
         const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;

package/dist/collection/components/buttons/buttons.js

@@ -4,19 +4,21 @@
 import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Buttons {
-    /**
-     * If true, buttons will disappear when its
-     * parent toolbar has fully collapsed if the toolbar
-     * is not the first toolbar. If the toolbar is the
-     * first toolbar, the buttons will be hidden and will
-     * only be shown once all toolbars have fully collapsed.
-     *
-     * Only applies in `ios` mode with `collapse` set to
-     * `true` on `ion-header`.
-     *
-     * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
-     */
-    collapse = false;
+    constructor() {
+        /**
+         * If true, buttons will disappear when its
+         * parent toolbar has fully collapsed if the toolbar
+         * is not the first toolbar. If the toolbar is the
+         * first toolbar, the buttons will be hidden and will
+         * only be shown once all toolbars have fully collapsed.
+         *
+         * Only applies in `ios` mode with `collapse` set to
+         * `true` on `ion-header`.
+         *
+         * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+         */
+        this.collapse = false;
+    }
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '58c1fc5eb867d0731c63549b1ccb3ec3bbbe6e1b', class: {

package/dist/collection/components/card/card.js

@@ -11,59 +11,26 @@ import { getIonMode } from "../../global/ionic-global";
  * @part native - The native HTML button, anchor, or div element that wraps all child elements.
  */
 export class Card {
-    inheritedAriaAttributes = {};
-    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;
-    /**
-     * If `true`, a button tag will be rendered and the card will be tappable.
-     */
-    button = false;
-    /**
-     * The type of the button. Only used when an `onclick` or `button` property is present.
-     */
-    type = 'button';
-    /**
-     * If `true`, the user cannot interact with the card.
-     */
-    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;
-    /**
-     * 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;
-    /**
-     * Specifies where to display the linked URL.
-     * Only applies when an `href` is provided.
-     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
-     */
-    target;
+    constructor() {
+        this.inheritedAriaAttributes = {};
+        /**
+         * If `true`, a button tag will be rendered and the card will be tappable.
+         */
+        this.button = false;
+        /**
+         * The type of the button. Only used when an `onclick` or `button` property is present.
+         */
+        this.type = 'button';
+        /**
+         * If `true`, the user cannot interact with the card.
+         */
+        this.disabled = false;
+        /**
+         * When using a router, it specifies the transition direction when navigating to
+         * another page using `href`.
+         */
+        this.routerDirection = 'forward';
+    }
     componentWillLoad() {
         this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
     }