@rdlabo/ionic-theme-ios27 1.2.0-3 → 1.2.0-4

package/dist/transition/index.js

@@ -1,219 +1,230 @@
-import { config } from '../utils';
-import { Build, writeTask } from '@stencil/core';
-import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
-import { createFocusController } from '../focus-controller';
-import { raf } from '../utils';
-const iosTransitionAnimation = () => import('./ios.transition');
+import { config, raf } from "../utils.js";
+import { createFocusController } from "../focus-controller/index.js";
+import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from "@ionic/core";
+import { Build, writeTask } from "@stencil/core";
+//#region src/transition/index.ts
+const iosTransitionAnimation = () => import("./ios.transition.js");
 const focusController = createFocusController();
-export 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(() => {
-                setHeaderTransitionClass(transitioningInactiveHeader, false);
-            });
-        });
-    });
+/**
+* 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(() => {
+				setHeaderTransitionClass(transitioningInactiveHeader, false);
+			});
+		});
+	});
 };
 const beforeTransition = (opts, transitioningInactiveHeader) => {
-    const enteringEl = opts.enteringEl;
-    const leavingEl = opts.leavingEl;
-    focusController.saveViewFocus(leavingEl);
-    setZIndex(enteringEl, leavingEl, opts.direction);
-    setHeaderTransitionClass(transitioningInactiveHeader, true);
-    if (opts.showGoBack) {
-        enteringEl.classList.add('can-go-back');
-    }
-    else {
-        enteringEl.classList.remove('can-go-back');
-    }
-    setPageHidden(enteringEl, false);
-    enteringEl.style.setProperty('pointer-events', 'none');
-    if (leavingEl) {
-        setPageHidden(leavingEl, false);
-        leavingEl.style.setProperty('pointer-events', 'none');
-    }
+	const enteringEl = opts.enteringEl;
+	const leavingEl = opts.leavingEl;
+	focusController.saveViewFocus(leavingEl);
+	setZIndex(enteringEl, leavingEl, opts.direction);
+	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);
-    return ani;
+	const animationBuilder = await getAnimationBuilder(opts);
+	return animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts);
 };
 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 enteringEl = opts.enteringEl;
+	const leavingEl = opts.leavingEl;
+	enteringEl.classList.remove("ion-page-invisible");
+	enteringEl.style.removeProperty("pointer-events");
+	if (leavingEl !== void 0) {
+		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 = (await iosTransitionAnimation()).iosTransitionAnimation;
-    return getAnimation;
+	if (!opts.leavingEl || !opts.animated || opts.duration === 0) return;
+	if (opts.animationBuilder) return opts.animationBuilder;
+	return (await iosTransitionAnimation()).iosTransitionAnimation;
 };
 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,
-    };
+	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(void 0);
+	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);
-    await waitForReady(opts, focusManagerEnabled);
-    fireWillEvents(enteringEl, leavingEl);
-    fireDidEvents(enteringEl, leavingEl);
-    return {
-        hasCompleted: true,
-    };
+	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);
+	if (opts.deepWait !== void 0 ? opts.deepWait : defaultDeep) 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);
-    }
+	if (viewIsReady) await viewIsReady(enteringEl);
 };
 const playTransition = (trans, opts) => {
-    const progressCallback = opts.progressCallback;
-    const promise = new Promise((resolve) => {
-        trans.onFinish((currentStep) => resolve(currentStep === 1));
-    });
-    if (progressCallback) {
-        trans.progressStart(true);
-        progressCallback(trans);
-    }
-    else {
-        trans.play();
-    }
-    return promise;
+	const progressCallback = opts.progressCallback;
+	const promise = new Promise((resolve) => {
+		trans.onFinish((currentStep) => resolve(currentStep === 1));
+	});
+	if (progressCallback) {
+		trans.progressStart(true);
+		progressCallback(trans);
+	} else trans.play();
+	return promise;
 };
 const fireWillEvents = (enteringEl, leavingEl) => {
-    lifecycle(leavingEl, LIFECYCLE_WILL_LEAVE);
-    lifecycle(enteringEl, LIFECYCLE_WILL_ENTER);
+	lifecycle(leavingEl, LIFECYCLE_WILL_LEAVE);
+	lifecycle(enteringEl, LIFECYCLE_WILL_ENTER);
 };
 const fireDidEvents = (enteringEl, leavingEl) => {
-    lifecycle(enteringEl, LIFECYCLE_DID_ENTER);
-    lifecycle(leavingEl, LIFECYCLE_DID_LEAVE);
-};
-export const lifecycle = (el, eventName) => {
-    if (el) {
-        const ev = new CustomEvent(eventName, {
-            bubbles: false,
-            cancelable: false,
-        });
-        el.dispatchEvent(ev);
-    }
-};
-export const waitForMount = () => {
-    return new Promise((resolve) => raf(() => raf(() => resolve())));
-};
-export const deepReady = async (el) => {
-    const element = el;
-    if (element) {
-        if (element.componentOnReady != null) {
-            const stencilEl = await element.componentOnReady();
-            if (stencilEl != null) {
-                return;
-            }
-        }
-        else if (element.__registerHost != null) {
-            const waitForCustomElement = new Promise((resolve) => raf(resolve));
-            await waitForCustomElement;
-            return;
-        }
-        await Promise.all(Array.from(element.children).map((child) => deepReady(child)));
-    }
-};
-export 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');
-    }
+	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) {
+			if (await element.componentOnReady() != null) return;
+		} else if (element.__registerHost != null) {
+			await new Promise((resolve) => raf(resolve));
+			return;
+		}
+		await Promise.all(Array.from(element.children).map((child) => deepReady(child)));
+	}
+};
+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';
-    }
-};
+	if (enteringEl !== void 0) enteringEl.style.zIndex = direction === "back" ? "99" : "101";
+	if (leavingEl !== void 0) 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);
-    }
-};
-export 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;
-    }
-    return element;
-};
+	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;
+	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');
-};
+	const enteringEl = opts.enteringEl;
+	const leavingEl = opts.leavingEl;
+	const direction = opts.direction;
+	if (opts.mode !== "ios") return null;
+	const element = direction === "back" ? leavingEl : enteringEl;
+	if (!element) return null;
+	return element.querySelector("ion-header");
+};
+//#endregion
+export { deepReady, getIonPageElement, lifecycle, setPageHidden, transition, waitForMount };
+
+//# sourceMappingURL=index.js.map

package/dist/transition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/transition/index.ts"],"sourcesContent":["import { config } from '../utils';\nimport { Build, writeTask } from '@stencil/core';\n\nimport { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';\nimport type { NavOptions, NavDirection } from '@ionic/core';\nimport type { Animation, AnimationBuilder } from '@ionic/core';\nimport { createFocusController } from '../focus-controller';\nimport { raf } from '../utils';\n\nconst iosTransitionAnimation = () => import('./ios.transition');\n// const mdTransitionAnimation = () => import('./md.transition');\nconst focusController = createFocusController();\n\n// TODO(FW-2832): types\n\n/**\n * Executes the main page transition.\n * It also manages the lifecycle of header visibility (if any)\n * to prevent visual flickering in iOS. The flickering only\n * occurs for a condensed header that is placed above the content.\n *\n * @param opts Options for the transition.\n * @returns A promise that resolves when the transition is complete.\n */\nexport const transition = (opts: TransitionOptions): Promise<TransitionResult> => {\n  return new Promise((resolve, reject) => {\n    writeTask(() => {\n      const transitioningInactiveHeader = getIosIonHeader(opts);\n      beforeTransition(opts, transitioningInactiveHeader);\n      runTransition(opts)\n        .then(\n          (result) => {\n            if (result.animation) {\n              result.animation.destroy();\n            }\n            afterTransition(opts);\n            resolve(result);\n          },\n          (error) => {\n            afterTransition(opts);\n            reject(error);\n          },\n        )\n        .finally(() => {\n          // Ensure that the header is restored to its original state.\n          setHeaderTransitionClass(transitioningInactiveHeader, false);\n        });\n    });\n  });\n};\n\nconst beforeTransition = (opts: TransitionOptions, transitioningInactiveHeader: HTMLElement | null) => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n\n  focusController.saveViewFocus(leavingEl);\n\n  setZIndex(enteringEl, leavingEl, opts.direction);\n  // Prevent flickering of the header by adding a class.\n  setHeaderTransitionClass(transitioningInactiveHeader, true);\n\n  if (opts.showGoBack) {\n    enteringEl.classList.add('can-go-back');\n  } else {\n    enteringEl.classList.remove('can-go-back');\n  }\n  setPageHidden(enteringEl, false);\n\n  /**\n   * When transitioning, the page should not\n   * respond to click events. This resolves small\n   * issues like users double tapping the ion-back-button.\n   * These pointer events are removed in `afterTransition`.\n   */\n  enteringEl.style.setProperty('pointer-events', 'none');\n\n  if (leavingEl) {\n    setPageHidden(leavingEl, false);\n    leavingEl.style.setProperty('pointer-events', 'none');\n  }\n};\n\nconst runTransition = async (opts: TransitionOptions): Promise<TransitionResult> => {\n  const animationBuilder = await getAnimationBuilder(opts);\n\n  const ani = animationBuilder && Build.isBrowser ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation\n\n  return ani;\n};\n\nconst afterTransition = (opts: TransitionOptions) => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n  enteringEl.classList.remove('ion-page-invisible');\n  enteringEl.style.removeProperty('pointer-events');\n  if (leavingEl !== undefined) {\n    leavingEl.classList.remove('ion-page-invisible');\n    leavingEl.style.removeProperty('pointer-events');\n  }\n\n  focusController.setViewFocus(enteringEl);\n};\n\nconst getAnimationBuilder = async (opts: TransitionOptions): Promise<AnimationBuilder | undefined> => {\n  if (!opts.leavingEl || !opts.animated || opts.duration === 0) {\n    return undefined;\n  }\n\n  if (opts.animationBuilder) {\n    return opts.animationBuilder;\n  }\n\n  const getAnimation =\n    // opts.mode === 'ios'\n    (await iosTransitionAnimation()).iosTransitionAnimation;\n  // : (await mdTransitionAnimation()).mdTransitionAnimation;\n\n  return getAnimation;\n};\n\nconst animation = async (animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise<TransitionResult> => {\n  await waitForReady(opts, true);\n\n  const trans = animationBuilder(opts.baseEl, opts);\n\n  fireWillEvents(opts.enteringEl, opts.leavingEl);\n\n  const didComplete = await playTransition(trans, opts);\n\n  if (opts.progressCallback) {\n    opts.progressCallback(undefined);\n  }\n\n  if (didComplete) {\n    fireDidEvents(opts.enteringEl, opts.leavingEl);\n  }\n\n  return {\n    hasCompleted: didComplete,\n    animation: trans,\n  };\n};\n\nconst noAnimation = async (opts: TransitionOptions): Promise<TransitionResult> => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n  const focusManagerEnabled = config.get('focusManagerPriority', false);\n\n  /**\n   * If the focus manager is enabled then we need to wait for Ionic components to be\n   * rendered otherwise the component to focus may not be focused because it is hidden.\n   */\n  await waitForReady(opts, focusManagerEnabled);\n\n  fireWillEvents(enteringEl, leavingEl);\n  fireDidEvents(enteringEl, leavingEl);\n\n  return {\n    hasCompleted: true,\n  };\n};\n\nconst waitForReady = async (opts: TransitionOptions, defaultDeep: boolean) => {\n  const deep = opts.deepWait !== undefined ? opts.deepWait : defaultDeep;\n\n  if (deep) {\n    await Promise.all([deepReady(opts.enteringEl), deepReady(opts.leavingEl)]);\n  }\n\n  await notifyViewReady(opts.viewIsReady, opts.enteringEl);\n};\n\nconst notifyViewReady = async (viewIsReady: undefined | ((enteringEl: HTMLElement) => Promise<unknown>), enteringEl: HTMLElement) => {\n  if (viewIsReady) {\n    await viewIsReady(enteringEl);\n  }\n};\n\nconst playTransition = (trans: Animation, opts: TransitionOptions): Promise<boolean> => {\n  const progressCallback = opts.progressCallback;\n\n  const promise = new Promise<boolean>((resolve) => {\n    trans.onFinish((currentStep) => resolve(currentStep === 1));\n  });\n\n  // cool, let's do this, start the transition\n  if (progressCallback) {\n    // this is a swipe to go back, just get the transition progress ready\n    // kick off the swipe animation start\n    trans.progressStart(true);\n    progressCallback(trans);\n  } else {\n    // only the top level transition should actually start \"play\"\n    // kick it off and let it play through\n    // ******** DOM WRITE ****************\n    trans.play();\n  }\n  // create a callback for when the animation is done\n  return promise;\n};\n\nconst fireWillEvents = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined) => {\n  lifecycle(leavingEl, LIFECYCLE_WILL_LEAVE);\n  lifecycle(enteringEl, LIFECYCLE_WILL_ENTER);\n};\n\nconst fireDidEvents = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined) => {\n  lifecycle(enteringEl, LIFECYCLE_DID_ENTER);\n  lifecycle(leavingEl, LIFECYCLE_DID_LEAVE);\n};\n\nexport const lifecycle = (el: HTMLElement | undefined, eventName: string) => {\n  if (el) {\n    const ev = new CustomEvent(eventName, {\n      bubbles: false,\n      cancelable: false,\n    });\n    el.dispatchEvent(ev);\n  }\n};\n\n/**\n * Wait two request animation frame loops.\n * This allows the framework implementations enough time to mount\n * the user-defined contents. This is often needed when using inline\n * modals and popovers that accept user components. For popover,\n * the contents must be mounted for the popover to be sized correctly.\n * For modals, the contents must be mounted for iOS to run the\n * transition correctly.\n *\n * On Angular and React, a single raf is enough time, but for Vue\n * we need to wait two rafs. As a result we are using two rafs for\n * all frameworks to ensure contents are mounted.\n */\nexport const waitForMount = (): Promise<void> => {\n  return new Promise((resolve) => raf(() => raf(() => resolve())));\n};\n\ntype LazyLoadedElement = Element & {\n  componentOnReady?: () => Promise<unknown>;\n  __registerHost?: unknown;\n};\n\nexport const deepReady = async (el: Element | undefined): Promise<void> => {\n  const element = el as LazyLoadedElement | undefined;\n  if (element) {\n    if (element.componentOnReady != null) {\n      // eslint-disable-next-line custom-rules/no-component-on-ready-method\n      const stencilEl = await element.componentOnReady();\n      if (stencilEl != null) {\n        return;\n      }\n\n      /**\n       * Custom elements in Stencil will have __registerHost.\n       */\n    } else if (element.__registerHost != null) {\n      /**\n       * Non-lazy loaded custom elements need to wait\n       * one frame for component to be loaded.\n       */\n      const waitForCustomElement = new Promise((resolve) => raf(resolve));\n      await waitForCustomElement;\n\n      return;\n    }\n    await Promise.all(Array.from(element.children).map((child) => deepReady(child)));\n  }\n};\n\nexport const setPageHidden = (el: HTMLElement, hidden: boolean) => {\n  if (hidden) {\n    el.setAttribute('aria-hidden', 'true');\n    el.classList.add('ion-page-hidden');\n  } else {\n    el.hidden = false;\n    el.removeAttribute('aria-hidden');\n    el.classList.remove('ion-page-hidden');\n  }\n};\n\nconst setZIndex = (enteringEl: HTMLElement | undefined, leavingEl: HTMLElement | undefined, direction: NavDirection | undefined) => {\n  if (enteringEl !== undefined) {\n    enteringEl.style.zIndex = direction === 'back' ? '99' : '101';\n  }\n  if (leavingEl !== undefined) {\n    leavingEl.style.zIndex = '100';\n  }\n};\n\n/**\n * Add a class to ensure that the header (if any)\n * does not flicker during the transition. By adding the\n * transitioning class, we ensure that the header has\n * the necessary styles to prevent the following flickers:\n * 1. When entering a page with a condensed header, the\n * header should never be visible. However,\n * it briefly renders the background color while\n * the transition is occurring.\n * 2. When leaving a page with a condensed header, the\n * header has an opacity of 0 and the pages\n * have a z-index which causes the entering page to\n * briefly show it's content underneath the leaving page.\n * 3. When entering a page or leaving a page with a fade\n * header, the header should not have a background color.\n * However, it briefly shows the background color while\n * the transition is occurring.\n *\n * @param header The header element to modify.\n * @param isTransitioning Whether the transition is occurring.\n */\nconst setHeaderTransitionClass = (header: HTMLElement | null, isTransitioning: boolean) => {\n  if (!header) {\n    return;\n  }\n\n  const transitionClass = 'header-transitioning';\n  if (isTransitioning) {\n    header.classList.add(transitionClass);\n  } else {\n    header.classList.remove(transitionClass);\n  }\n};\n\nexport const getIonPageElement = (element: HTMLElement) => {\n  if (element.classList.contains('ion-page')) {\n    return element;\n  }\n\n  const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');\n  if (ionPage) {\n    return ionPage;\n  }\n  // idk, return the original element so at least something animates and we don't have a null pointer\n  return element;\n};\n\n/**\n * Retrieves the ion-header element from a page based on the\n * direction of the transition.\n *\n * @param opts Options for the transition.\n * @returns The ion-header element or null if not found or not in 'ios' mode.\n */\nconst getIosIonHeader = (opts: TransitionOptions): HTMLElement | null => {\n  const enteringEl = opts.enteringEl;\n  const leavingEl = opts.leavingEl;\n  const direction = opts.direction;\n  const mode = opts.mode;\n\n  if (mode !== 'ios') {\n    return null;\n  }\n\n  const element = direction === 'back' ? leavingEl : enteringEl;\n\n  if (!element) {\n    return null;\n  }\n\n  return element.querySelector('ion-header');\n};\n\nexport interface TransitionOptions extends NavOptions {\n  progressCallback?: (ani: Animation | undefined) => void;\n  baseEl: HTMLElement;\n  enteringEl: HTMLElement;\n  leavingEl: HTMLElement | undefined;\n}\n\nexport interface TransitionResult {\n  hasCompleted: boolean;\n  animation?: Animation;\n}\n"],"mappings":"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"}

package/dist/transition/ios.transition.d.ts

@@ -1,10 +1,12 @@
-import { shadow } from '@rdlabo/ionic-theme-utils';
-import type { Animation } from '@ionic/core';
-import type { TransitionOptions } from './index';
-export { shadow };
+import { TransitionOptions } from "./index.js";
+import { Animation } from "@ionic/core";
+import { shadow } from "@rdlabo/ionic-theme-utils";
+//#region src/transition/ios.transition.d.ts
 export interface IosTransitionConfig {
-    radius: number;
+  radius: number;
 }
 export declare const setConfig: (config: Partial<IosTransitionConfig>) => void;
 export declare const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation;
+//#endregion
+export { shadow };
 //# sourceMappingURL=ios.transition.d.ts.map

package/dist/transition/ios.transition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ios.transition.d.ts","sourceRoot":"","sources":["../../src/transition/ios.transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AASD,eAAO,MAAM,SAAS,GAAI,QAAQ,OAAO,CAAC,mBAAmB,CAAC,KAAG,IAEhE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,iBAAiB,KAAK,SAErF,CAAC"}
+{"version":3,"file":"ios.transition.d.ts","names":[],"sources":["../../src/transition/ios.transition.ts"],"mappings":";;;;iBAQiB;EACf;;qBAUW,YAAa,QAAQ,QAAQ;qBAI7B,yBAAyB,OAAO,aAAa,MAAM,sBAAsB"}

package/dist/transition/ios.transition.js

@@ -1,14 +1,18 @@
-import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils';
-import { getIonPageElement } from './index';
-import { withNativeUIShellTransition } from '../native-integration/transition';
-export { shadow };
+import { getIonPageElement } from "./index.js";
+import { withNativeUIShellTransition } from "../native-integration/transition.js";
+import { createIosTransitionAnimation, shadow } from "@rdlabo/ionic-theme-utils";
+//#region src/transition/ios.transition.ts
 const transitionConfig = {
-    offLeftPercent: 30,
-    getIonPageElement,
-    shouldAnimateFixedBackButton: (navEl) => !navEl.closest('ion-app.ios-theme-vertical-bars'),
-    radius: 0,
+	offLeftPercent: 30,
+	getIonPageElement,
+	shouldAnimateFixedBackButton: (navEl) => !navEl.closest("ion-app.ios-theme-vertical-bars"),
+	radius: 0
 };
-export const setConfig = (config) => {
-    Object.assign(transitionConfig, config);
+const setConfig = (config) => {
+	Object.assign(transitionConfig, config);
 };
-export const iosTransitionAnimation = withNativeUIShellTransition(createIosTransitionAnimation(transitionConfig));
+const iosTransitionAnimation = withNativeUIShellTransition(createIosTransitionAnimation(transitionConfig));
+//#endregion
+export { iosTransitionAnimation, setConfig, shadow };
+
+//# sourceMappingURL=ios.transition.js.map

package/dist/transition/ios.transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ios.transition.js","names":[],"sources":["../../src/transition/ios.transition.ts"],"sourcesContent":["import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils';\nimport type { Animation } from '@ionic/core';\nimport type { TransitionOptions } from './index';\nimport { getIonPageElement } from './index';\nimport { withNativeUIShellTransition } from '../native-integration/transition';\n\nexport { shadow };\n\nexport interface IosTransitionConfig {\n  radius: number;\n}\n\nconst transitionConfig = {\n  offLeftPercent: 30,\n  getIonPageElement,\n  shouldAnimateFixedBackButton: (navEl: HTMLElement) => !navEl.closest('ion-app.ios-theme-vertical-bars'),\n  radius: 0,\n};\n\nexport const setConfig = (config: Partial<IosTransitionConfig>): void => {\n  Object.assign(transitionConfig, config);\n};\n\nexport const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation = withNativeUIShellTransition(\n  createIosTransitionAnimation<TransitionOptions>(transitionConfig),\n);\n"],"mappings":";;;;AAYA,MAAM,mBAAmB;CACvB,gBAAgB;CAChB;CACA,+BAA+B,UAAuB,CAAC,MAAM,QAAQ,iCAAiC;CACtG,QAAQ;AACV;AAEA,MAAa,aAAa,WAA+C;CACvE,OAAO,OAAO,kBAAkB,MAAM;AACxC;AAEA,MAAa,yBAAqF,4BAChG,6BAAgD,gBAAgB,CAClE"}

package/dist/utils.d.ts

@@ -1,17 +1,19 @@
-import { AnimationPosition } from './sheets-of-glass/interfaces';
-import { IonicConfig } from '@ionic/core';
+import { AnimationPosition } from "./sheets-of-glass/interfaces.js";
+import { IonicConfig } from "@ionic/core";
+//#region src/utils.d.ts
 export declare const getElementRoot: (el: HTMLElement, fallback?: HTMLElement) => HTMLElement | ShadowRoot;
 export declare const raf: (h: FrameRequestCallback) => number;
 export declare const cloneElement: (tagName: string, useCache?: boolean) => HTMLElement;
 export declare const getStep: (targetX: number, animationPosition: AnimationPosition) => number;
 export declare const changeSelectedElement: (targetElement: HTMLElement, selectedElement: HTMLElement, effectTagName: string, selectedClassName: string) => void;
 export declare class Config {
-    private m;
-    reset(configObj: IonicConfig): void;
-    get<T>(key: keyof IonicConfig, fallback?: T): T;
-    getBoolean(key: keyof IonicConfig, fallback?: boolean): boolean;
-    getNumber(key: keyof IonicConfig, fallback?: number): number;
-    set(key: keyof IonicConfig, value: unknown): void;
+  private m;
+  reset(configObj: IonicConfig): void;
+  get<T>(key: keyof IonicConfig, fallback?: T): T;
+  getBoolean(key: keyof IonicConfig, fallback?: boolean): boolean;
+  getNumber(key: keyof IonicConfig, fallback?: number): number;
+  set(key: keyof IonicConfig, value: unknown): void;
 }
 export declare const config: Config;
+//#endregion
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,eAAO,MAAM,cAAc,GAAI,IAAI,WAAW,EAAE,WAAU,WAAgB,6BAEzE,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,GAAG,oBAAoB,WAQ1C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,EAAE,WAAU,OAAc,KAAG,WAcxE,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,SAAS,MAAM,EAAE,mBAAmB,iBAAiB,WAQ5E,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,eAAe,WAAW,EAC1B,iBAAiB,WAAW,EAC5B,eAAe,MAAM,EACrB,mBAAmB,MAAM,KACxB,IAMF,CAAC;AAEF,qBAAa,MAAM;IACjB,OAAO,CAAC,CAAC,CAAyC;IAElD,KAAK,CAAC,SAAS,EAAE,WAAW;IAI5B,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC;IAK/C,UAAU,CAAC,GAAG,EAAE,MAAM,WAAW,EAAE,QAAQ,UAAQ,GAAG,OAAO;IAW7D,SAAS,CAAC,GAAG,EAAE,MAAM,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM;IAK5D,GAAG,CAAC,GAAG,EAAE,MAAM,WAAW,EAAE,KAAK,EAAE,OAAO;CAG3C;AAED,eAAO,MAAM,MAAM,QAA6B,CAAC"}
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../src/utils.ts"],"mappings":";;;qBAMa,iBAAkB,IAAI,aAAa,WAAU,gBAAgB,cAAA;qBAI7D,MAAO,GAAG;qBAUV,eAAgB,iBAAiB,uBAA2B;qBAgB5D,UAAW,iBAAiB,mBAAmB;qBAU/C,wBACX,eAAe,aACf,iBAAiB,aACjB,uBACA;qBASW;UACH;EAER,MAAM,WAAW;EAIjB,IAAI,GAAG,WAAW,aAAa,WAAW,IAAI;EAK9C,WAAW,WAAW,aAAa;EAWnC,UAAU,WAAW,aAAa;EAKlC,IAAI,WAAW,aAAa;;qBAKjB,QAAM"}