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

package/dist/collection/components/refresher/refresher.js

@@ -13,113 +13,80 @@ import { createPullingAnimation, createSnapBackAnimation, getRefresherAnimationT
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Refresher {
-    appliedStyles = false;
-    didStart = false;
-    progress = 0;
-    scrollEl;
-    backgroundContentEl;
-    scrollListenerCallback;
-    gesture;
-    overflowStyles;
-    pointerDown = false;
-    needsCompletion = false;
-    didRefresh = false;
-    contentFullscreen = false;
-    lastVelocityY = 0;
-    elementToTransform;
-    animations = [];
-    nativeRefresher = false;
-    el;
-    /**
-     * The current state which the refresher is in. The refresher's states include:
-     *
-     * - `inactive` - The refresher is not being pulled down or refreshing and is currently hidden.
-     * - `pulling` - The user is actively pulling down the refresher, but has not reached the point yet that if the user lets go, it'll refresh.
-     * - `cancelling` - The user pulled down the refresher and let go, but did not pull down far enough to kick off the `refreshing` state. After letting go, the refresher is in the `cancelling` state while it is closing, and will go back to the `inactive` state once closed.
-     * - `ready` - The user has pulled down the refresher far enough that if they let go, it'll begin the `refreshing` state.
-     * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `complete()` it will begin the `completing` state.
-     * - `completing` - The `refreshing` state has finished and the refresher is in the way of closing itself. Once closed, the refresher will go back to the `inactive` state.
-     */
-    state = 1 /* RefresherState.Inactive */;
-    /**
-     * The minimum distance the user must pull down until the
-     * refresher will go into the `refreshing` state.
-     * Does not apply when the refresher content uses a spinner,
-     * enabling the native refresher.
-     */
-    pullMin = 60;
-    /**
-     * The maximum distance of the pull until the refresher
-     * will automatically go into the `refreshing` state.
-     * Defaults to the result of `pullMin + 60`.
-     * Does not apply when  the refresher content uses a spinner,
-     * enabling the native refresher.
-     */
-    pullMax = this.pullMin + 60;
-    /**
-     * Time it takes to close the refresher.
-     * Does not apply when the refresher content uses a spinner,
-     * enabling the native refresher.
-     */
-    closeDuration = '280ms';
-    /**
-     * Time it takes the refresher to snap back to the `refreshing` state.
-     * Does not apply when the refresher content uses a spinner,
-     * enabling the native refresher.
-     */
-    snapbackDuration = '280ms';
-    /**
-     * How much to multiply the pull speed by. To slow the pull animation down,
-     * pass a number less than `1`. To speed up the pull, pass a number greater
-     * than `1`. The default value is `1` which is equal to the speed of the cursor.
-     * If a negative value is passed in, the factor will be `1` instead.
-     *
-     * For example, If the value passed is `1.2` and the content is dragged by
-     * `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels
-     * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
-     * will be `8` pixels, less than the amount the cursor has moved.
-     *
-     * Does not apply when the refresher content uses a spinner,
-     * enabling the native refresher.
-     */
-    pullFactor = 1;
-    /**
-     * If `true`, the refresher will be hidden.
-     */
-    disabled = false;
+    constructor() {
+        this.appliedStyles = false;
+        this.didStart = false;
+        this.progress = 0;
+        this.pointerDown = false;
+        this.needsCompletion = false;
+        this.didRefresh = false;
+        this.contentFullscreen = false;
+        this.lastVelocityY = 0;
+        this.animations = [];
+        this.nativeRefresher = false;
+        /**
+         * The current state which the refresher is in. The refresher's states include:
+         *
+         * - `inactive` - The refresher is not being pulled down or refreshing and is currently hidden.
+         * - `pulling` - The user is actively pulling down the refresher, but has not reached the point yet that if the user lets go, it'll refresh.
+         * - `cancelling` - The user pulled down the refresher and let go, but did not pull down far enough to kick off the `refreshing` state. After letting go, the refresher is in the `cancelling` state while it is closing, and will go back to the `inactive` state once closed.
+         * - `ready` - The user has pulled down the refresher far enough that if they let go, it'll begin the `refreshing` state.
+         * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `complete()` it will begin the `completing` state.
+         * - `completing` - The `refreshing` state has finished and the refresher is in the way of closing itself. Once closed, the refresher will go back to the `inactive` state.
+         */
+        this.state = 1 /* RefresherState.Inactive */;
+        /**
+         * The minimum distance the user must pull down until the
+         * refresher will go into the `refreshing` state.
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
+        this.pullMin = 60;
+        /**
+         * The maximum distance of the pull until the refresher
+         * will automatically go into the `refreshing` state.
+         * Defaults to the result of `pullMin + 60`.
+         * Does not apply when  the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
+        this.pullMax = this.pullMin + 60;
+        /**
+         * Time it takes to close the refresher.
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
+        this.closeDuration = '280ms';
+        /**
+         * Time it takes the refresher to snap back to the `refreshing` state.
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
+        this.snapbackDuration = '280ms';
+        /**
+         * How much to multiply the pull speed by. To slow the pull animation down,
+         * pass a number less than `1`. To speed up the pull, pass a number greater
+         * than `1`. The default value is `1` which is equal to the speed of the cursor.
+         * If a negative value is passed in, the factor will be `1` instead.
+         *
+         * For example, If the value passed is `1.2` and the content is dragged by
+         * `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels
+         * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
+         * will be `8` pixels, less than the amount the cursor has moved.
+         *
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
+        this.pullFactor = 1;
+        /**
+         * If `true`, the refresher will be hidden.
+         */
+        this.disabled = false;
+    }
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
     }
-    /**
-     * Emitted when the user lets go of the content and has pulled down
-     * further than the `pullMin` or pulls the content down and exceeds the pullMax.
-     * Updates the refresher state to `refreshing`. The `complete()` method should be
-     * called when the async operation has completed.
-     */
-    ionRefresh;
-    /**
-     * Emitted while the user is pulling down the content and exposing the refresher.
-     */
-    ionPull;
-    // TODO(FW-7044): Remove this in a major release
-    /**
-     * Emitted when the user begins to start pulling down.
-     *
-     * @deprecated Use `ionPullStart` instead.
-     */
-    ionStart;
-    /**
-     * Emitted when the user begins to start pulling down.
-     */
-    ionPullStart;
-    /**
-     * Emitted when the refresher has returned to the inactive state
-     * after a pull gesture. This fires whether the refresh completed
-     * successfully or was canceled.
-     */
-    ionPullEnd;
     async checkNativeRefresher() {
         const useNativeRefresher = await shouldUseNativeRefresher(this.el, getIonMode(this));
         if (useNativeRefresher && !this.nativeRefresher) {
@@ -411,11 +378,18 @@ export class Refresher {
     componentDidUpdate() {
         this.checkNativeRefresher();
     }
-    async connectedCallback() {
+    /**
+     * Validate the slot attribute before rendering, while the host still reflects the
+     * developer's original markup. `connectedCallback` is too early: in the custom
+     * elements build it runs during insertion, before frameworks such as React assign
+     * the slot.
+     */
+    componentWillLoad() {
         if (this.el.getAttribute('slot') !== 'fixed') {
             printIonError('[ion-refresher] - Make sure you use: <ion-refresher slot="fixed">');
-            return;
         }
+    }
+    async connectedCallback() {
         const contentEl = this.el.closest(ION_CONTENT_ELEMENT_SELECTOR);
         if (!contentEl) {
             printIonContentErrorMsg(this.el);
@@ -775,7 +749,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b76e9fb79121799717063137135e448a3c784d82', slot: "fixed", class: {
+        return (h(Host, { key: 'fd9c8e51155d56f12148e8eb547e45c05807b4b5', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/dist/collection/components/refresher-content/refresher-content.js

@@ -10,46 +10,9 @@ import { getIonMode } from "../../global/ionic-global";
 import { supportsRubberBandScrolling } from "../refresher/refresher.utils";
 import { SPINNERS } from "../spinner/spinner-configs";
 export class RefresherContent {
-    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-    el;
-    /**
-     * A static icon or a spinner to display when you begin to pull down.
-     * A spinner name can be provided to gradually show tick marks
-     * when pulling down on iOS devices.
-     */
-    pullingIcon;
-    /**
-     * The text you want to display when you begin to pull down.
-     * `pullingText` can accept either plaintext or HTML as a string.
-     * To display characters normally reserved for HTML, they
-     * must be escaped. For example `<Ionic>` would become
-     * `&lt;Ionic&gt;`
-     *
-     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
-     *
-     * Content is parsed as plaintext by default.
-     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
-     * before custom HTML can be used.
-     */
-    pullingText;
-    /**
-     * An animated SVG spinner that shows when refreshing begins
-     */
-    refreshingSpinner;
-    /**
-     * The text you want to display when performing a refresh.
-     * `refreshingText` can accept either plaintext or HTML as a string.
-     * To display characters normally reserved for HTML, they
-     * must be escaped. For example `<Ionic>` would become
-     * `&lt;Ionic&gt;`
-     *
-     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
-     *
-     * Content is parsed as plaintext by default.
-     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
-     * before custom HTML can be used.
-     */
-    refreshingText;
+    constructor() {
+        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    }
     componentWillLoad() {
         if (this.pullingIcon === undefined) {
             /**

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

@@ -8,7 +8,6 @@ import { getIonMode } from "../../global/ionic-global";
  * @part icon - The icon of the reorder handle (uses ion-icon).
  */
 export class Reorder {
-    el;
     onClick(ev) {
         const reorderGroup = this.el.closest('ion-reorder-group');
         ev.preventDefault();

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

@@ -7,54 +7,25 @@ import { raf } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
 import { getIonMode } from "../../global/ionic-global";
 export class ReorderGroup {
-    selectedItemEl;
-    selectedItemHeight;
-    lastToIndex = -1;
-    cachedHeights = [];
-    scrollEl;
-    gesture;
-    scrollElTop = 0;
-    scrollElBottom = 0;
-    scrollElInitial = 0;
-    containerTop = 0;
-    containerBottom = 0;
-    state = 0 /* ReorderGroupState.Idle */;
-    el;
-    /**
-     * If `true`, the reorder will be hidden.
-     */
-    disabled = true;
+    constructor() {
+        this.lastToIndex = -1;
+        this.cachedHeights = [];
+        this.scrollElTop = 0;
+        this.scrollElBottom = 0;
+        this.scrollElInitial = 0;
+        this.containerTop = 0;
+        this.containerBottom = 0;
+        this.state = 0 /* ReorderGroupState.Idle */;
+        /**
+         * If `true`, the reorder will be hidden.
+         */
+        this.disabled = true;
+    }
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
     }
-    // TODO(FW-6590): Remove this in a major release.
-    /**
-     * Event that needs to be listened to in order to complete the reorder action.
-     * @deprecated Use `ionReorderEnd` instead. If you are accessing
-     * `event.detail.from` or `event.detail.to` and relying on them
-     * being different you should now add checks as they are always emitted
-     * in `ionReorderEnd`, even when they are the same.
-     */
-    ionItemReorder;
-    /**
-     * Event that is emitted when the reorder gesture starts.
-     */
-    ionReorderStart;
-    /**
-     * Event that is emitted as the reorder gesture moves.
-     */
-    ionReorderMove;
-    /**
-     * Event that is emitted when the reorder gesture ends.
-     * The from and to properties are always available, regardless of
-     * if the reorder gesture moved the item. If the item did not change
-     * from its start position, the from and to properties will be the same.
-     * Once the event has been emitted, the `complete()` method then needs
-     * to be called in order to finalize the reorder action.
-     */
-    ionReorderEnd;
     async connectedCallback() {
         const contentEl = findClosestIonContent(this.el);
         if (contentEl) {

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

@@ -4,17 +4,18 @@
 import { Host, h, readTask, writeTask } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class RippleEffect {
-    el;
-    /**
-     * Sets the type of ripple-effect:
-     *
-     * - `bounded`: the ripple effect expands from the user's click position
-     * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
-     *
-     * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
-     * while surfaces for unbounded ripples should have it set to visible.
-     */
-    type = 'bounded';
+    constructor() {
+        /**
+         * Sets the type of ripple-effect:
+         *
+         * - `bounded`: the ripple effect expands from the user's click position
+         * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
+         *
+         * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
+         * while surfaces for unbounded ripples should have it set to visible.
+         */
+        this.type = 'bounded';
+    }
     /**
      * Adds the ripple effect to the parent element.
      *

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

@@ -1,43 +1,14 @@
 // TODO(FW-2832): types
 export class Route {
-    /**
-     * Relative path that needs to match in order for this route to apply.
-     *
-     * Accepts paths similar to expressjs so that you can define parameters
-     * in the url /foo/:bar where bar would be available in incoming props.
-     */
-    url = '';
-    /**
-     * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-router-outlet`)
-     * when the route matches.
-     *
-     * The value of this property is not always the tagname of the component to load,
-     * in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
-     */
-    component;
-    /**
-     * A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed
-     * to the defined component when rendered.
-     */
-    componentProps;
-    /**
-     * A navigation hook that is fired when the route tries to leave.
-     * Returning `true` allows the navigation to proceed, while returning
-     * `false` causes it to be cancelled. Returning a `NavigationHookOptions`
-     * object causes the router to redirect to the path specified.
-     */
-    beforeLeave;
-    /**
-     * A navigation hook that is fired when the route tries to enter.
-     * Returning `true` allows the navigation to proceed, while returning
-     * `false` causes it to be cancelled. Returning a `NavigationHookOptions`
-     * object causes the router to redirect to the path specified.
-     */
-    beforeEnter;
-    /**
-     * Used internally by `ion-router` to know when this route did change.
-     */
-    ionRouteDataChanged;
+    constructor() {
+        /**
+         * Relative path that needs to match in order for this route to apply.
+         *
+         * Accepts paths similar to expressjs so that you can define parameters
+         * in the url /foo/:bar where bar would be available in incoming props.
+         */
+        this.url = '';
+    }
     onUpdate(newValue) {
         this.ionRouteDataChanged.emit(newValue);
     }

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

@@ -1,35 +1,4 @@
 export class RouteRedirect {
-    /**
-     * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL.
-     * It needs to be an exact match of the navigated URL in order to apply.
-     *
-     * The path specified in this value is always an absolute path, even if the initial `/` slash
-     * is not specified.
-     *
-     */
-    from;
-    /**
-     * A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL.
-     * When the defined `ion-route-redirect` rule matches, the router will redirect to the path
-     * specified in this property.
-     *
-     * The value of this property is always an absolute path inside the scope of routes defined in
-     * `ion-router` it can't be used with another router or to perform a redirection to a different domain.
-     *
-     * Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's
-     * a redirect inside the context of ion-router.
-     *
-     * When this property is not specified or his value is `undefined` the whole redirect route is noop,
-     * even if the "from" value matches.
-     */
-    to;
-    /**
-     * Internal event that fires when any value of this rule is added/removed from the DOM,
-     * or any of his public properties changes.
-     *
-     * `ion-router` captures this event in order to update his internal registry of router rules.
-     */
-    ionRouteRedirectChanged;
     propDidChange() {
         this.ionRouteRedirectChanged.emit();
     }

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

@@ -7,41 +7,33 @@ import { findChainForIDs, findChainForSegments, findRouteRedirect } from "./util
 import { readRedirects, readRoutes } from "./utils/parser";
 import { chainToSegments, generatePath, parsePath, readSegments, writeSegments } from "./utils/path";
 export class Router {
-    previousPath = null;
-    busy = false;
-    state = 0;
-    lastState = 0;
-    waitPromise;
-    fragmentScrollToken = 0;
-    el;
-    /**
-     * The root path to use when matching URLs. By default, this is set to "/", but you can specify
-     * an alternate prefix for all URL paths.
-     */
-    root = '/';
-    /**
-     * The router can work in two "modes":
-     * - With hash: `/index.html#/path/to/page`
-     * - Without hash: `/path/to/page`
-     *
-     * Using one or another might depend in the requirements of your app and/or where it's deployed.
-     *
-     * Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might
-     * requires additional server-side configuration in order to properly work.
-     *
-     * On the other side hash-navigation is much easier to deploy, it even works over the file protocol.
-     *
-     * By default, this property is `true`, change to `false` to allow hash-less URLs.
-     */
-    useHash = true;
-    /**
-     * Event emitted when the route is about to change
-     */
-    ionRouteWillChange;
-    /**
-     * Emitted when the route had changed
-     */
-    ionRouteDidChange;
+    constructor() {
+        this.previousPath = null;
+        this.busy = false;
+        this.state = 0;
+        this.lastState = 0;
+        this.fragmentScrollToken = 0;
+        /**
+         * The root path to use when matching URLs. By default, this is set to "/", but you can specify
+         * an alternate prefix for all URL paths.
+         */
+        this.root = '/';
+        /**
+         * The router can work in two "modes":
+         * - With hash: `/index.html#/path/to/page`
+         * - Without hash: `/path/to/page`
+         *
+         * Using one or another might depend in the requirements of your app and/or where it's deployed.
+         *
+         * Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might
+         * requires additional server-side configuration in order to properly work.
+         *
+         * On the other side hash-navigation is much easier to deploy, it even works over the file protocol.
+         *
+         * By default, this property is `true`, change to `false` to allow hash-less URLs.
+         */
+        this.useHash = true;
+    }
     async componentWillLoad() {
         await waitUntilNavNode();
         const canProceed = await this.runGuards(this.getSegments());

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

@@ -212,7 +212,6 @@ export const computePriority = (chain) => {
     return score;
 };
 export class RouterSegments {
-    segments;
     constructor(segments) {
         this.segments = segments.slice();
     }

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

@@ -5,41 +5,16 @@ import { Host, h } from "@stencil/core";
 import { createColorClasses, openURL } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 export class RouterLink {
-    /**
-     * 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;
-    /**
-     * 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;
-    onClick = (ev) => {
-        openURL(this.href, ev, this.routerDirection, this.routerAnimation);
-    };
+    constructor() {
+        /**
+         * When using a router, it specifies the transition direction when navigating to
+         * another page using `href`.
+         */
+        this.routerDirection = 'forward';
+        this.onClick = (ev) => {
+            openURL(this.href, ev, this.routerDirection, this.routerAnimation);
+        };
+    }
     render() {
         const mode = getIonMode(this);
         const attrs = {