@ionic/core 8.7.17-dev.11772118942.181221d4 → 8.7.17-dev.11772568074.1d7a4aea

package/components/index2.js

@@ -1,419 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as config, p as printIonWarning } from './index4.js';
-import { writeTask, Build } from '@stencil/core/internal/client';
-import { r as raf } from './helpers.js';
-
-const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
-const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
-const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
-const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
-const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
-
-/**
- * Moves focus to a specified element. Note that we do not remove the tabindex
- * because that can result in an unintentional blur. Non-focusables can't be
- * focused, so the body will get focused again.
- */
-const moveFocus = (el) => {
-    el.tabIndex = -1;
-    el.focus();
-};
-/**
- * Elements that are hidden using `display: none` should not be focused even if
- * they are present in the DOM.
- */
-const isVisible = (el) => {
-    return el.offsetParent !== null;
-};
-/**
- * The focus controller allows us to manage focus within a view so assistive
- * technologies can inform users of changes to the navigation state. Traditional
- * native apps have a way of informing assistive technology about a navigation
- * state change. Mobile browsers have this too, but only when doing a full page
- * load. In a single page app we do not do that, so we need to build this
- * integration ourselves.
- */
-const createFocusController = () => {
-    const saveViewFocus = (referenceEl) => {
-        const focusManagerEnabled = config.get('focusManagerPriority', false);
-        /**
-         * When going back to a previously visited page focus should typically be moved
-         * back to the element that was last focused when the user was on this view.
-         */
-        if (focusManagerEnabled) {
-            const activeEl = document.activeElement;
-            if (activeEl !== null && (referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.contains(activeEl))) {
-                activeEl.setAttribute(LAST_FOCUS, 'true');
-            }
-        }
-    };
-    const setViewFocus = (referenceEl) => {
-        const focusManagerPriorities = config.get('focusManagerPriority', false);
-        /**
-         * If the focused element is a descendant of the referenceEl then it's possible
-         * that the app developer manually moved focus, so we do not want to override that.
-         * This can happen with inputs the are focused when a view transitions in.
-         */
-        if (Array.isArray(focusManagerPriorities) && !referenceEl.contains(document.activeElement)) {
-            /**
-             * When going back to a previously visited view focus should always be moved back
-             * to the element that the user was last focused on when they were on this view.
-             */
-            const lastFocus = referenceEl.querySelector(`[${LAST_FOCUS}]`);
-            if (lastFocus && isVisible(lastFocus)) {
-                moveFocus(lastFocus);
-                return;
-            }
-            for (const priority of focusManagerPriorities) {
-                /**
-                 * For each recognized case (excluding the default case) make sure to return
-                 * so that the fallback focus behavior does not run.
-                 *
-                 * We intentionally query for specific roles/semantic elements so that the
-                 * transition manager can work with both Ionic and non-Ionic UI components.
-                 *
-                 * If new selectors are added, be sure to remove the outline ring by adding
-                 * new selectors to rule in core.scss.
-                 */
-                switch (priority) {
-                    case 'content':
-                        const content = referenceEl.querySelector('main, [role="main"]');
-                        if (content && isVisible(content)) {
-                            moveFocus(content);
-                            return;
-                        }
-                        break;
-                    case 'heading':
-                        const headingOne = referenceEl.querySelector('h1, [role="heading"][aria-level="1"]');
-                        if (headingOne && isVisible(headingOne)) {
-                            moveFocus(headingOne);
-                            return;
-                        }
-                        break;
-                    case 'banner':
-                        const header = referenceEl.querySelector('header, [role="banner"]');
-                        if (header && isVisible(header)) {
-                            moveFocus(header);
-                            return;
-                        }
-                        break;
-                    default:
-                        printIonWarning(`Unrecognized focus manager priority value ${priority}`);
-                        break;
-                }
-            }
-            /**
-             * If there is nothing to focus then focus the page so focus at least moves to
-             * the correct view. The browser will then determine where within the page to
-             * move focus to.
-             */
-            moveFocus(referenceEl);
-        }
-    };
-    return {
-        saveViewFocus,
-        setViewFocus,
-    };
-};
-const LAST_FOCUS = 'ion-last-focus';
-
-const iosTransitionAnimation = () => import('./ios.transition.js');
-const mdTransitionAnimation = () => import('./md.transition.js');
-const focusController = createFocusController();
-// TODO(FW-2832): types
-/**
- * Executes the main page transition.
- * It also manages the lifecycle of header visibility (if any)
- * to prevent visual flickering in iOS. The flickering only
- * occurs for a condensed header that is placed above the content.
- *
- * @param opts Options for the transition.
- * @returns A promise that resolves when the transition is complete.
- */
-const transition = (opts) => {
-    return new Promise((resolve, reject) => {
-        writeTask(() => {
-            const transitioningInactiveHeader = getIosIonHeader(opts);
-            beforeTransition(opts, transitioningInactiveHeader);
-            runTransition(opts)
-                .then((result) => {
-                if (result.animation) {
-                    result.animation.destroy();
-                }
-                afterTransition(opts);
-                resolve(result);
-            }, (error) => {
-                afterTransition(opts);
-                reject(error);
-            })
-                .finally(() => {
-                // Ensure that the header is restored to its original state.
-                setHeaderTransitionClass(transitioningInactiveHeader, false);
-            });
-        });
-    });
-};
-const beforeTransition = (opts, transitioningInactiveHeader) => {
-    const enteringEl = opts.enteringEl;
-    const leavingEl = opts.leavingEl;
-    focusController.saveViewFocus(leavingEl);
-    setZIndex(enteringEl, leavingEl, opts.direction);
-    // Prevent flickering of the header by adding a class.
-    setHeaderTransitionClass(transitioningInactiveHeader, true);
-    if (opts.showGoBack) {
-        enteringEl.classList.add('can-go-back');
-    }
-    else {
-        enteringEl.classList.remove('can-go-back');
-    }
-    setPageHidden(enteringEl, false);
-    /**
-     * When transitioning, the page should not
-     * respond to click events. This resolves small
-     * issues like users double tapping the ion-back-button.
-     * These pointer events are removed in `afterTransition`.
-     */
-    enteringEl.style.setProperty('pointer-events', 'none');
-    if (leavingEl) {
-        setPageHidden(leavingEl, false);
-        leavingEl.style.setProperty('pointer-events', 'none');
-    }
-};
-const runTransition = async (opts) => {
-    const animationBuilder = await getAnimationBuilder(opts);
-    const ani = animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation
-    return ani;
-};
-const afterTransition = (opts) => {
-    const enteringEl = opts.enteringEl;
-    const leavingEl = opts.leavingEl;
-    enteringEl.classList.remove('ion-page-invisible');
-    enteringEl.style.removeProperty('pointer-events');
-    if (leavingEl !== undefined) {
-        leavingEl.classList.remove('ion-page-invisible');
-        leavingEl.style.removeProperty('pointer-events');
-    }
-    focusController.setViewFocus(enteringEl);
-};
-const getAnimationBuilder = async (opts) => {
-    if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
-        return undefined;
-    }
-    if (opts.animationBuilder) {
-        return opts.animationBuilder;
-    }
-    const getAnimation = opts.mode === 'ios'
-        ? (await iosTransitionAnimation()).iosTransitionAnimation
-        : (await mdTransitionAnimation()).mdTransitionAnimation;
-    return getAnimation;
-};
-const animation = async (animationBuilder, opts) => {
-    await waitForReady(opts, true);
-    const trans = animationBuilder(opts.baseEl, opts);
-    fireWillEvents(opts.enteringEl, opts.leavingEl);
-    const didComplete = await playTransition(trans, opts);
-    if (opts.progressCallback) {
-        opts.progressCallback(undefined);
-    }
-    if (didComplete) {
-        fireDidEvents(opts.enteringEl, opts.leavingEl);
-    }
-    return {
-        hasCompleted: didComplete,
-        animation: trans,
-    };
-};
-const noAnimation = async (opts) => {
-    const enteringEl = opts.enteringEl;
-    const leavingEl = opts.leavingEl;
-    const focusManagerEnabled = config.get('focusManagerPriority', false);
-    /**
-     * If the focus manager is enabled then we need to wait for Ionic components to be
-     * rendered otherwise the component to focus may not be focused because it is hidden.
-     */
-    await waitForReady(opts, focusManagerEnabled);
-    fireWillEvents(enteringEl, leavingEl);
-    fireDidEvents(enteringEl, leavingEl);
-    return {
-        hasCompleted: true,
-    };
-};
-const waitForReady = async (opts, defaultDeep) => {
-    const deep = opts.deepWait !== undefined ? opts.deepWait : defaultDeep;
-    if (deep) {
-        await Promise.all([deepReady(opts.enteringEl), deepReady(opts.leavingEl)]);
-    }
-    await notifyViewReady(opts.viewIsReady, opts.enteringEl);
-};
-const notifyViewReady = async (viewIsReady, enteringEl) => {
-    if (viewIsReady) {
-        await viewIsReady(enteringEl);
-    }
-};
-const playTransition = (trans, opts) => {
-    const progressCallback = opts.progressCallback;
-    const promise = new Promise((resolve) => {
-        trans.onFinish((currentStep) => resolve(currentStep === 1));
-    });
-    // cool, let's do this, start the transition
-    if (progressCallback) {
-        // this is a swipe to go back, just get the transition progress ready
-        // kick off the swipe animation start
-        trans.progressStart(true);
-        progressCallback(trans);
-    }
-    else {
-        // only the top level transition should actually start "play"
-        // kick it off and let it play through
-        // ******** DOM WRITE ****************
-        trans.play();
-    }
-    // create a callback for when the animation is done
-    return promise;
-};
-const fireWillEvents = (enteringEl, leavingEl) => {
-    lifecycle(leavingEl, LIFECYCLE_WILL_LEAVE);
-    lifecycle(enteringEl, LIFECYCLE_WILL_ENTER);
-};
-const fireDidEvents = (enteringEl, leavingEl) => {
-    lifecycle(enteringEl, LIFECYCLE_DID_ENTER);
-    lifecycle(leavingEl, LIFECYCLE_DID_LEAVE);
-};
-const lifecycle = (el, eventName) => {
-    if (el) {
-        const ev = new CustomEvent(eventName, {
-            bubbles: false,
-            cancelable: false,
-        });
-        el.dispatchEvent(ev);
-    }
-};
-/**
- * Wait two request animation frame loops.
- * This allows the framework implementations enough time to mount
- * the user-defined contents. This is often needed when using inline
- * modals and popovers that accept user components. For popover,
- * the contents must be mounted for the popover to be sized correctly.
- * For modals, the contents must be mounted for iOS to run the
- * transition correctly.
- *
- * On Angular and React, a single raf is enough time, but for Vue
- * we need to wait two rafs. As a result we are using two rafs for
- * all frameworks to ensure contents are mounted.
- */
-const waitForMount = () => {
-    return new Promise((resolve) => raf(() => raf(() => resolve())));
-};
-const deepReady = async (el) => {
-    const element = el;
-    if (element) {
-        if (element.componentOnReady != null) {
-            // eslint-disable-next-line custom-rules/no-component-on-ready-method
-            const stencilEl = await element.componentOnReady();
-            if (stencilEl != null) {
-                return;
-            }
-            /**
-             * Custom elements in Stencil will have __registerHost.
-             */
-        }
-        else if (element.__registerHost != null) {
-            /**
-             * Non-lazy loaded custom elements need to wait
-             * one frame for component to be loaded.
-             */
-            const waitForCustomElement = new Promise((resolve) => raf(resolve));
-            await waitForCustomElement;
-            return;
-        }
-        await Promise.all(Array.from(element.children).map(deepReady));
-    }
-};
-const setPageHidden = (el, hidden) => {
-    if (hidden) {
-        el.setAttribute('aria-hidden', 'true');
-        el.classList.add('ion-page-hidden');
-    }
-    else {
-        el.hidden = false;
-        el.removeAttribute('aria-hidden');
-        el.classList.remove('ion-page-hidden');
-    }
-};
-const setZIndex = (enteringEl, leavingEl, direction) => {
-    if (enteringEl !== undefined) {
-        enteringEl.style.zIndex = direction === 'back' ? '99' : '101';
-    }
-    if (leavingEl !== undefined) {
-        leavingEl.style.zIndex = '100';
-    }
-};
-/**
- * Add a class to ensure that the header (if any)
- * does not flicker during the transition. By adding the
- * transitioning class, we ensure that the header has
- * the necessary styles to prevent the following flickers:
- * 1. When entering a page with a condensed header, the
- * header should never be visible. However,
- * it briefly renders the background color while
- * the transition is occurring.
- * 2. When leaving a page with a condensed header, the
- * header has an opacity of 0 and the pages
- * have a z-index which causes the entering page to
- * briefly show it's content underneath the leaving page.
- * 3. When entering a page or leaving a page with a fade
- * header, the header should not have a background color.
- * However, it briefly shows the background color while
- * the transition is occurring.
- *
- * @param header The header element to modify.
- * @param isTransitioning Whether the transition is occurring.
- */
-const setHeaderTransitionClass = (header, isTransitioning) => {
-    if (!header) {
-        return;
-    }
-    const transitionClass = 'header-transitioning';
-    if (isTransitioning) {
-        header.classList.add(transitionClass);
-    }
-    else {
-        header.classList.remove(transitionClass);
-    }
-};
-const getIonPageElement = (element) => {
-    if (element.classList.contains('ion-page')) {
-        return element;
-    }
-    const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
-    if (ionPage) {
-        return ionPage;
-    }
-    // idk, return the original element so at least something animates and we don't have a null pointer
-    return element;
-};
-/**
- * Retrieves the ion-header element from a page based on the
- * direction of the transition.
- *
- * @param opts Options for the transition.
- * @returns The ion-header element or null if not found or not in 'ios' mode.
- */
-const getIosIonHeader = (opts) => {
-    const enteringEl = opts.enteringEl;
-    const leavingEl = opts.leavingEl;
-    const direction = opts.direction;
-    const mode = opts.mode;
-    if (mode !== 'ios') {
-        return null;
-    }
-    const element = direction === 'back' ? leavingEl : enteringEl;
-    if (!element) {
-        return null;
-    }
-    return element.querySelector('ion-header');
-};
-
-export { LIFECYCLE_WILL_ENTER as L, LIFECYCLE_DID_ENTER as a, LIFECYCLE_WILL_LEAVE as b, LIFECYCLE_DID_LEAVE as c, LIFECYCLE_WILL_UNLOAD as d, deepReady as e, getIonPageElement as g, lifecycle as l, setPageHidden as s, transition as t, waitForMount as w };
+import{c as n,p as i}from"./index4.js";import{writeTask as e,Build as a}from"@stencil/core/internal/client";import{r as o}from"./helpers.js";const r="ionViewWillEnter",t="ionViewDidEnter",s="ionViewWillLeave",c="ionViewDidLeave",l="ionViewWillUnload",u=n=>{n.tabIndex=-1,n.focus()},d=n=>null!==n.offsetParent,f="ion-last-focus",m=i=>{if(n.get("focusManagerPriority",!1)){const n=document.activeElement;null!==n&&(null==i?void 0:i.contains(n))&&n.setAttribute(f,"true")}},p=e=>{const a=n.get("focusManagerPriority",!1);if(Array.isArray(a)&&!e.contains(document.activeElement)){const n=e.querySelector(`[${f}]`);if(n&&d(n))return void u(n);for(const n of a)switch(n){case"content":const a=e.querySelector('main, [role="main"]');if(a&&d(a))return void u(a);break;case"heading":const o=e.querySelector('h1, [role="heading"][aria-level="1"]');if(o&&d(o))return void u(o);break;case"banner":const r=e.querySelector('header, [role="banner"]');if(r&&d(r))return void u(r);break;default:i(`Unrecognized focus manager priority value ${n}`)}u(e)}},w=n=>new Promise(((i,a)=>{e((()=>{const e=$(n);v(n,e),b(n).then((e=>{e.animation&&e.animation.destroy(),g(n),i(e)}),(i=>{g(n),a(i)})).finally((()=>{D(e,!1)}))}))})),v=(n,i)=>{const e=n.enteringEl,a=n.leavingEl;m(a),A(e,a,n.direction),D(i,!0),n.showGoBack?e.classList.add("can-go-back"):e.classList.remove("can-go-back"),x(e,!1),e.style.setProperty("pointer-events","none"),a&&(x(a,!1),a.style.setProperty("pointer-events","none"))},b=async n=>{const i=await h(n);return i&&a.isBrowser?y(i,n):P(n)},g=n=>{const i=n.enteringEl,e=n.leavingEl;i.classList.remove("ion-page-invisible"),i.style.removeProperty("pointer-events"),void 0!==e&&(e.classList.remove("ion-page-invisible"),e.style.removeProperty("pointer-events")),p(i)},h=async n=>{if(n.leavingEl&&n.animated&&0!==n.duration)return n.animationBuilder?n.animationBuilder:"ios"===n.mode?(await import("./ios.transition.js")).iosTransitionAnimation:(await import("./md.transition.js")).mdTransitionAnimation},y=async(n,i)=>{await k(i,!0);const e=n(i.baseEl,i);C(i.enteringEl,i.leavingEl);const a=await j(e,i);return i.progressCallback&&i.progressCallback(void 0),a&&E(i.enteringEl,i.leavingEl),{hasCompleted:a,animation:e}},P=async i=>{const e=i.enteringEl,a=i.leavingEl,o=n.get("focusManagerPriority",!1);return await k(i,o),C(e,a),E(e,a),{hasCompleted:!0}},k=async(n,i)=>{(void 0!==n.deepWait?n.deepWait:i)&&await Promise.all([W(n.enteringEl),W(n.leavingEl)]),await V(n.viewIsReady,n.enteringEl)},V=async(n,i)=>{n&&await n(i)},j=(n,i)=>{const e=i.progressCallback,a=new Promise((i=>{n.onFinish((n=>i(1===n)))}));return e?(n.progressStart(!0),e(n)):n.play(),a},C=(n,i)=>{L(i,s),L(n,r)},E=(n,i)=>{L(n,t),L(i,c)},L=(n,i)=>{if(n){const e=new CustomEvent(i,{bubbles:!1,cancelable:!1});n.dispatchEvent(e)}},M=()=>new Promise((n=>o((()=>o((()=>n())))))),W=async n=>{const i=n;if(i){if(null!=i.componentOnReady){if(null!=await i.componentOnReady())return}else if(null!=i.__registerHost){const n=new Promise((n=>o(n)));return void await n}await Promise.all(Array.from(i.children).map(W))}},x=(n,i)=>{i?(n.setAttribute("aria-hidden","true"),n.classList.add("ion-page-hidden")):(n.hidden=!1,n.removeAttribute("aria-hidden"),n.classList.remove("ion-page-hidden"))},A=(n,i,e)=>{void 0!==n&&(n.style.zIndex="back"===e?"99":"101"),void 0!==i&&(i.style.zIndex="100")},D=(n,i)=>{if(!n)return;const e="header-transitioning";i?n.classList.add(e):n.classList.remove(e)},U=n=>{if(n.classList.contains("ion-page"))return n;return n.querySelector(":scope > .ion-page, :scope > ion-nav, :scope > ion-tabs")||n},$=n=>{if("ios"!==n.mode)return null;const i="back"===n.direction?n.leavingEl:n.enteringEl;return i?i.querySelector("ion-header"):null};export{r as L,t as a,s as b,c,l as d,W as e,U as g,L as l,x as s,w as t,M as w}