@ionic/core 8.7.17-dev.11771959013.18adabe2 → 8.7.17-dev.11772030258.1ee4f499

package/components/ion-router-outlet.js

@@ -1,4 +1,230 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,transformTag as o}from"@stencil/core/internal/client";import{g as a}from"./cubic-bezier.js";import{a as n,d as r}from"./framework-delegate.js";import{s as h,k as l}from"./helpers.js";import{c}from"./lock-controller.js";import{a as d,c as m}from"./index4.js";import{t as u}from"./index2.js";import{b as p}from"./ionic-global.js";const b=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ionNavWillLoad=e(this,"ionNavWillLoad",7),this.ionNavWillChange=e(this,"ionNavWillChange",3),this.ionNavDidChange=e(this,"ionNavDidChange",3),this.lockController=c(),this.gestureOrAnimationInProgress=!1,this.mode=p(this),this.animated=!0}swipeHandlerChanged(){this.gesture&&this.gesture.enable(void 0!==this.swipeHandler)}async connectedCallback(){const t=()=>{this.gestureOrAnimationInProgress=!0,this.swipeHandler&&this.swipeHandler.onStart()};this.gesture=(await import("./swipe-back.js")).createSwipeBackGesture(this.el,(()=>!this.gestureOrAnimationInProgress&&!!this.swipeHandler&&this.swipeHandler.canStart()),(()=>t()),(t=>{var i;return null===(i=this.ani)||void 0===i?void 0:i.progressStep(t)}),((t,i,e)=>{if(this.ani){this.ani.onFinish((()=>{this.gestureOrAnimationInProgress=!1,this.swipeHandler&&this.swipeHandler.onEnd(t)}),{oneTimeCallback:!0});let s=t?-.001:.001;t?s+=a([0,0],[.32,.72],[0,1],[1,1],i)[0]:(this.ani.easing("cubic-bezier(1, 0, 0.68, 0.28)"),s+=a([0,0],[1,0],[.68,.28],[1,1],i)[0]),this.ani.progressEnd(t?1:0,s,e)}else this.gestureOrAnimationInProgress=!1})),this.swipeHandlerChanged()}componentWillLoad(){this.ionNavWillLoad.emit()}disconnectedCallback(){this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}async commit(t,i,e){const s=await this.lockController.lock();let o=!1;try{o=await this.transition(t,i,e)}catch(t){d("[ion-router-outlet] - Exception in commit:",t)}return s(),o}async setRouteId(t,i,e,s){return{changed:await this.setRoot(t,i,{duration:"root"===e?0:void 0,direction:"back"===e?"back":"forward",animationBuilder:s}),element:this.activeEl}}async getRouteId(){const t=this.activeEl;return t?{id:t.tagName,element:t,params:this.activeParams}:void 0}async setRoot(t,i,e){if(this.activeComponent===t&&h(i,this.activeParams))return!1;const s=this.activeEl,o=await n(this.delegate,this.el,t,["ion-page","ion-page-invisible"],i);return this.activeComponent=t,this.activeEl=o,this.activeParams=i,await this.commit(o,s,e),await r(this.delegate,s),!0}async transition(t,i,e={}){if(i===t)return!1;this.ionNavWillChange.emit();const{el:s,mode:o}=this,a=this.animated&&m.getBoolean("animated",!0),n=e.animationBuilder||this.animation||m.get("navAnimation");return await u(Object.assign(Object.assign({mode:o,animated:a,enteringEl:t,leavingEl:i,baseEl:s,deepWait:l(s),progressCallback:e.progressAnimation?t=>{void 0===t||this.gestureOrAnimationInProgress?this.ani=t:(this.gestureOrAnimationInProgress=!0,t.onFinish((()=>{this.gestureOrAnimationInProgress=!1,this.swipeHandler&&this.swipeHandler.onEnd(!1)}),{oneTimeCallback:!0}),t.progressEnd(0,0,0))}:void 0},e),{animationBuilder:n})),this.ionNavDidChange.emit(),!0}render(){return s("slot",{key:"84b50f1155b0d780dff802ee13223287259fd525"})}get el(){return this}static get watchers(){return{swipeHandler:[{swipeHandlerChanged:0}]}}static get style(){return":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}"}},[257,"ion-router-outlet",{mode:[1025],delegate:[16],animated:[4],animation:[16],swipeHandler:[16],commit:[64],setRouteId:[64],getRouteId:[64]},void 0,{swipeHandler:[{swipeHandlerChanged:0}]}]),f=b,g=function(){"undefined"!=typeof customElements&&["ion-router-outlet"].forEach((t=>{"ion-router-outlet"===t&&(customElements.get(o(t))||customElements.define(o(t),b))}))};export{f as IonRouterOutlet,g as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as getTimeGivenProgression } from './cubic-bezier.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate.js';
+import { s as shallowEqualStringMap, k as hasLazyBuild } from './helpers.js';
+import { c as createLockController } from './lock-controller.js';
+import { a as printIonError, c as config } from './index4.js';
+import { t as transition } from './index2.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const routerOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}";
+
+const RouterOutlet = /*@__PURE__*/ proxyCustomElement(class RouterOutlet extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.ionNavWillLoad = createEvent(this, "ionNavWillLoad", 7);
+        this.ionNavWillChange = createEvent(this, "ionNavWillChange", 3);
+        this.ionNavDidChange = createEvent(this, "ionNavDidChange", 3);
+        this.lockController = createLockController();
+        this.gestureOrAnimationInProgress = false;
+        /**
+         * The mode determines which platform styles to use.
+         */
+        this.mode = getIonMode(this);
+        /**
+         * If `true`, the router-outlet should animate the transition of components.
+         */
+        this.animated = true;
+    }
+    swipeHandlerChanged() {
+        if (this.gesture) {
+            this.gesture.enable(this.swipeHandler !== undefined);
+        }
+    }
+    async connectedCallback() {
+        const onStart = () => {
+            this.gestureOrAnimationInProgress = true;
+            if (this.swipeHandler) {
+                this.swipeHandler.onStart();
+            }
+        };
+        this.gesture = (await import('./swipe-back.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
+            if (this.ani) {
+                this.ani.onFinish(() => {
+                    this.gestureOrAnimationInProgress = false;
+                    if (this.swipeHandler) {
+                        this.swipeHandler.onEnd(shouldComplete);
+                    }
+                }, { oneTimeCallback: true });
+                // Account for rounding errors in JS
+                let newStepValue = shouldComplete ? -1e-3 : 0.001;
+                /**
+                 * Animation will be reversed here, so need to
+                 * reverse the easing curve as well
+                 *
+                 * Additionally, we need to account for the time relative
+                 * to the new easing curve, as `stepValue` is going to be given
+                 * in terms of a linear curve.
+                 */
+                if (!shouldComplete) {
+                    this.ani.easing('cubic-bezier(1, 0, 0.68, 0.28)');
+                    newStepValue += getTimeGivenProgression([0, 0], [1, 0], [0.68, 0.28], [1, 1], step)[0];
+                }
+                else {
+                    newStepValue += getTimeGivenProgression([0, 0], [0.32, 0.72], [0, 1], [1, 1], step)[0];
+                }
+                this.ani.progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
+            }
+            else {
+                this.gestureOrAnimationInProgress = false;
+            }
+        });
+        this.swipeHandlerChanged();
+    }
+    componentWillLoad() {
+        this.ionNavWillLoad.emit();
+    }
+    disconnectedCallback() {
+        if (this.gesture) {
+            this.gesture.destroy();
+            this.gesture = undefined;
+        }
+    }
+    /** @internal */
+    async commit(enteringEl, leavingEl, opts) {
+        const unlock = await this.lockController.lock();
+        let changed = false;
+        try {
+            changed = await this.transition(enteringEl, leavingEl, opts);
+        }
+        catch (e) {
+            printIonError('[ion-router-outlet] - Exception in commit:', e);
+        }
+        unlock();
+        return changed;
+    }
+    /** @internal */
+    async setRouteId(id, params, direction, animation) {
+        const changed = await this.setRoot(id, params, {
+            duration: direction === 'root' ? 0 : undefined,
+            direction: direction === 'back' ? 'back' : 'forward',
+            animationBuilder: animation,
+        });
+        return {
+            changed,
+            element: this.activeEl,
+        };
+    }
+    /** @internal */
+    async getRouteId() {
+        const active = this.activeEl;
+        return active
+            ? {
+                id: active.tagName,
+                element: active,
+                params: this.activeParams,
+            }
+            : undefined;
+    }
+    async setRoot(component, params, opts) {
+        if (this.activeComponent === component && shallowEqualStringMap(params, this.activeParams)) {
+            return false;
+        }
+        // attach entering view to DOM
+        const leavingEl = this.activeEl;
+        const enteringEl = await attachComponent(this.delegate, this.el, component, ['ion-page', 'ion-page-invisible'], params);
+        this.activeComponent = component;
+        this.activeEl = enteringEl;
+        this.activeParams = params;
+        // commit animation
+        await this.commit(enteringEl, leavingEl, opts);
+        await detachComponent(this.delegate, leavingEl);
+        return true;
+    }
+    async transition(enteringEl, leavingEl, opts = {}) {
+        if (leavingEl === enteringEl) {
+            return false;
+        }
+        // emit nav will change event
+        this.ionNavWillChange.emit();
+        const { el, mode } = this;
+        const animated = this.animated && config.getBoolean('animated', true);
+        const animationBuilder = opts.animationBuilder || this.animation || config.get('navAnimation');
+        await transition(Object.assign(Object.assign({ mode,
+            animated,
+            enteringEl,
+            leavingEl, baseEl: el,
+            /**
+             * We need to wait for all Stencil components
+             * to be ready only when using the lazy
+             * loaded bundle.
+             */
+            deepWait: hasLazyBuild(el), progressCallback: opts.progressAnimation
+                ? (ani) => {
+                    /**
+                     * Because this progress callback is called asynchronously
+                     * it is possible for the gesture to start and end before
+                     * the animation is ever set. In that scenario, we should
+                     * immediately call progressEnd so that the transition promise
+                     * resolves and the gesture does not get locked up.
+                     */
+                    if (ani !== undefined && !this.gestureOrAnimationInProgress) {
+                        this.gestureOrAnimationInProgress = true;
+                        ani.onFinish(() => {
+                            this.gestureOrAnimationInProgress = false;
+                            if (this.swipeHandler) {
+                                this.swipeHandler.onEnd(false);
+                            }
+                        }, { oneTimeCallback: true });
+                        /**
+                         * Playing animation to beginning
+                         * with a duration of 0 prevents
+                         * any flickering when the animation
+                         * is later cleaned up.
+                         */
+                        ani.progressEnd(0, 0, 0);
+                    }
+                    else {
+                        this.ani = ani;
+                    }
+                }
+                : undefined }, opts), { animationBuilder }));
+        // emit nav changed event
+        this.ionNavDidChange.emit();
+        return true;
+    }
+    render() {
+        return h("slot", { key: '84b50f1155b0d780dff802ee13223287259fd525' });
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "swipeHandler": ["swipeHandlerChanged"]
+    }; }
+    static get style() { return routerOutletCss; }
+}, [257, "ion-router-outlet", {
+        "mode": [1025],
+        "delegate": [16],
+        "animated": [4],
+        "animation": [16],
+        "swipeHandler": [16],
+        "commit": [64],
+        "setRouteId": [64],
+        "getRouteId": [64]
+    }, undefined, {
+        "swipeHandler": ["swipeHandlerChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-router-outlet"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-router-outlet":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RouterOutlet);
+            }
+            break;
+    } });
+}
+
+const IonRouterOutlet = RouterOutlet;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonRouterOutlet, defineCustomElement };