@sparkle-learning/core 0.0.57 → 0.0.58

package/dist/cjs/ios.transition-da235483.js

@@ -0,0 +1,482 @@
+'use strict';
+
+const animation = require('./animation-ee586546.js');
+const index = require('./index-787d4498.js');
+require('./helpers-c2496722.js');
+require('./index-51e8292e.js');
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const DURATION = 540;
+const getClonedElement = (tagName) => {
+  return document.querySelector(`${tagName}.ion-cloned-element`);
+};
+const shadow = (el) => {
+  return el.shadowRoot || el;
+};
+const getLargeTitle = (refEl) => {
+  const tabs = refEl.tagName === 'ION-TABS' ? refEl : refEl.querySelector('ion-tabs');
+  const query = 'ion-content ion-header:not(.header-collapse-condense-inactive) ion-title.title-large';
+  if (tabs != null) {
+    const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
+    return activeTab != null ? activeTab.querySelector(query) : null;
+  }
+  return refEl.querySelector(query);
+};
+const getBackButton = (refEl, backDirection) => {
+  const tabs = refEl.tagName === 'ION-TABS' ? refEl : refEl.querySelector('ion-tabs');
+  let buttonsList = [];
+  if (tabs != null) {
+    const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
+    if (activeTab != null) {
+      buttonsList = activeTab.querySelectorAll('ion-buttons');
+    }
+  }
+  else {
+    buttonsList = refEl.querySelectorAll('ion-buttons');
+  }
+  for (const buttons of buttonsList) {
+    const parentHeader = buttons.closest('ion-header');
+    const activeHeader = parentHeader && !parentHeader.classList.contains('header-collapse-condense-inactive');
+    const backButton = buttons.querySelector('ion-back-button');
+    const buttonsCollapse = buttons.classList.contains('buttons-collapse');
+    const startSlot = buttons.slot === 'start' || buttons.slot === '';
+    if (backButton !== null && startSlot && ((buttonsCollapse && activeHeader && backDirection) || !buttonsCollapse)) {
+      return backButton;
+    }
+  }
+  return null;
+};
+const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringEl, leavingEl) => {
+  const enteringBackButton = getBackButton(enteringEl, backDirection);
+  const leavingLargeTitle = getLargeTitle(leavingEl);
+  const enteringLargeTitle = getLargeTitle(enteringEl);
+  const leavingBackButton = getBackButton(leavingEl, backDirection);
+  const shouldAnimationForward = enteringBackButton !== null && leavingLargeTitle !== null && !backDirection;
+  const shouldAnimationBackward = enteringLargeTitle !== null && leavingBackButton !== null && backDirection;
+  if (shouldAnimationForward) {
+    const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect();
+    const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
+    animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, enteringBackButtonBox);
+    animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, leavingLargeTitleBox, enteringBackButtonBox);
+  }
+  else if (shouldAnimationBackward) {
+    const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect();
+    const leavingBackButtonBox = leavingBackButton.getBoundingClientRect();
+    animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, leavingBackButtonBox);
+    animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, enteringLargeTitleBox, leavingBackButtonBox);
+  }
+  return {
+    forward: shouldAnimationForward,
+    backward: shouldAnimationBackward,
+  };
+};
+const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, largeTitleBox, backButtonBox) => {
+  const BACK_BUTTON_START_OFFSET = rtl ? `calc(100% - ${backButtonBox.right + 4}px)` : `${backButtonBox.left - 4}px`;
+  const START_TEXT_TRANSLATE = rtl ? '7px' : '-7px';
+  const END_TEXT_TRANSLATE = rtl ? '-4px' : '4px';
+  const ICON_TRANSLATE = rtl ? '-4px' : '4px';
+  const TEXT_ORIGIN_X = rtl ? 'right' : 'left';
+  const ICON_ORIGIN_X = rtl ? 'left' : 'right';
+  const FORWARD_TEXT_KEYFRAMES = [
+    {
+      offset: 0,
+      opacity: 0,
+      transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)`,
+    },
+    { offset: 1, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
+  ];
+  const BACKWARD_TEXT_KEYFRAMES = [
+    { offset: 0, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
+    { offset: 0.6, opacity: 0 },
+    {
+      offset: 1,
+      opacity: 0,
+      transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)`,
+    },
+  ];
+  const TEXT_KEYFRAMES = backDirection ? BACKWARD_TEXT_KEYFRAMES : FORWARD_TEXT_KEYFRAMES;
+  const FORWARD_ICON_KEYFRAMES = [
+    { offset: 0, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
+    { offset: 1, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
+  ];
+  const BACKWARD_ICON_KEYFRAMES = [
+    { offset: 0, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
+    { offset: 0.2, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
+    { offset: 1, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
+  ];
+  const ICON_KEYFRAMES = backDirection ? BACKWARD_ICON_KEYFRAMES : FORWARD_ICON_KEYFRAMES;
+  const enteringBackButtonTextAnimation = animation.createAnimation();
+  const enteringBackButtonIconAnimation = animation.createAnimation();
+  const clonedBackButtonEl = getClonedElement('ion-back-button');
+  const backButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
+  const backButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
+  clonedBackButtonEl.text = backButtonEl.text;
+  clonedBackButtonEl.mode = backButtonEl.mode;
+  clonedBackButtonEl.icon = backButtonEl.icon;
+  clonedBackButtonEl.color = backButtonEl.color;
+  clonedBackButtonEl.disabled = backButtonEl.disabled;
+  clonedBackButtonEl.style.setProperty('display', 'block');
+  clonedBackButtonEl.style.setProperty('position', 'fixed');
+  enteringBackButtonIconAnimation.addElement(backButtonIconEl);
+  enteringBackButtonTextAnimation.addElement(backButtonTextEl);
+  enteringBackButtonTextAnimation
+    .beforeStyles({
+    'transform-origin': `${TEXT_ORIGIN_X} center`,
+  })
+    .beforeAddWrite(() => {
+    backButtonEl.style.setProperty('display', 'none');
+    clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
+  })
+    .afterAddWrite(() => {
+    backButtonEl.style.setProperty('display', '');
+    clonedBackButtonEl.style.setProperty('display', 'none');
+    clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X);
+  })
+    .keyframes(TEXT_KEYFRAMES);
+  enteringBackButtonIconAnimation
+    .beforeStyles({
+    'transform-origin': `${ICON_ORIGIN_X} center`,
+  })
+    .keyframes(ICON_KEYFRAMES);
+  rootAnimation.addAnimation([enteringBackButtonTextAnimation, enteringBackButtonIconAnimation]);
+};
+const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, backButtonBox) => {
+  const TITLE_START_OFFSET = rtl ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`;
+  const START_TRANSLATE = rtl ? '-18px' : '18px';
+  const ORIGIN_X = rtl ? 'right' : 'left';
+  const BACKWARDS_KEYFRAMES = [
+    { offset: 0, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.49)` },
+    { offset: 0.1, opacity: 0 },
+    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
+  ];
+  const FORWARDS_KEYFRAMES = [
+    { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
+    { offset: 0.6, opacity: 0 },
+    { offset: 1, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.5)` },
+  ];
+  const KEYFRAMES = backDirection ? BACKWARDS_KEYFRAMES : FORWARDS_KEYFRAMES;
+  const clonedTitleEl = getClonedElement('ion-title');
+  const clonedLargeTitleAnimation = animation.createAnimation();
+  clonedTitleEl.innerText = largeTitleEl.innerText;
+  clonedTitleEl.size = largeTitleEl.size;
+  clonedTitleEl.color = largeTitleEl.color;
+  clonedLargeTitleAnimation.addElement(clonedTitleEl);
+  clonedLargeTitleAnimation
+    .beforeStyles({
+    'transform-origin': `${ORIGIN_X} center`,
+    height: '46px',
+    display: '',
+    position: 'relative',
+    [ORIGIN_X]: TITLE_START_OFFSET,
+  })
+    .beforeAddWrite(() => {
+    largeTitleEl.style.setProperty('display', 'none');
+  })
+    .afterAddWrite(() => {
+    largeTitleEl.style.setProperty('display', '');
+    clonedTitleEl.style.setProperty('display', 'none');
+  })
+    .keyframes(KEYFRAMES);
+  rootAnimation.addAnimation(clonedLargeTitleAnimation);
+};
+const iosTransitionAnimation = (navEl, opts) => {
+  try {
+    const EASING = 'cubic-bezier(0.32,0.72,0,1)';
+    const OPACITY = 'opacity';
+    const TRANSFORM = 'transform';
+    const CENTER = '0%';
+    const OFF_OPACITY = 0.8;
+    const isRTL = navEl.ownerDocument.dir === 'rtl';
+    const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%';
+    const OFF_LEFT = isRTL ? '33%' : '-33%';
+    const enteringEl = opts.enteringEl;
+    const leavingEl = opts.leavingEl;
+    const backDirection = opts.direction === 'back';
+    const contentEl = enteringEl.querySelector(':scope > ion-content');
+    const headerEls = enteringEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *');
+    const enteringToolBarEls = enteringEl.querySelectorAll(':scope > ion-header > ion-toolbar');
+    const rootAnimation = animation.createAnimation();
+    const enteringContentAnimation = animation.createAnimation();
+    rootAnimation
+      .addElement(enteringEl)
+      .duration(opts.duration || DURATION)
+      .easing(opts.easing || EASING)
+      .fill('both')
+      .beforeRemoveClass('ion-page-invisible');
+    if (leavingEl && navEl) {
+      const navDecorAnimation = animation.createAnimation();
+      navDecorAnimation.addElement(navEl);
+      rootAnimation.addAnimation(navDecorAnimation);
+    }
+    if (!contentEl && enteringToolBarEls.length === 0 && headerEls.length === 0) {
+      enteringContentAnimation.addElement(enteringEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs')); // REVIEW
+    }
+    else {
+      enteringContentAnimation.addElement(contentEl); // REVIEW
+      enteringContentAnimation.addElement(headerEls);
+    }
+    rootAnimation.addAnimation(enteringContentAnimation);
+    if (backDirection) {
+      enteringContentAnimation
+        .beforeClearStyles([OPACITY])
+        .fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`)
+        .fromTo(OPACITY, OFF_OPACITY, 1);
+    }
+    else {
+      // entering content, forward direction
+      enteringContentAnimation
+        .beforeClearStyles([OPACITY])
+        .fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
+    }
+    if (contentEl) {
+      const enteringTransitionEffectEl = shadow(contentEl).querySelector('.transition-effect');
+      if (enteringTransitionEffectEl) {
+        const enteringTransitionCoverEl = enteringTransitionEffectEl.querySelector('.transition-cover');
+        const enteringTransitionShadowEl = enteringTransitionEffectEl.querySelector('.transition-shadow');
+        const enteringTransitionEffect = animation.createAnimation();
+        const enteringTransitionCover = animation.createAnimation();
+        const enteringTransitionShadow = animation.createAnimation();
+        enteringTransitionEffect
+          .addElement(enteringTransitionEffectEl)
+          .beforeStyles({ opacity: '1', display: 'block' })
+          .afterStyles({ opacity: '', display: '' });
+        enteringTransitionCover
+          .addElement(enteringTransitionCoverEl) // REVIEW
+          .beforeClearStyles([OPACITY])
+          .fromTo(OPACITY, 0, 0.1);
+        enteringTransitionShadow
+          .addElement(enteringTransitionShadowEl) // REVIEW
+          .beforeClearStyles([OPACITY])
+          .fromTo(OPACITY, 0.03, 0.7);
+        enteringTransitionEffect.addAnimation([enteringTransitionCover, enteringTransitionShadow]);
+        enteringContentAnimation.addAnimation([enteringTransitionEffect]);
+      }
+    }
+    const enteringContentHasLargeTitle = enteringEl.querySelector('ion-header.header-collapse-condense');
+    const { forward, backward } = createLargeTitleTransition(rootAnimation, isRTL, backDirection, enteringEl, leavingEl);
+    enteringToolBarEls.forEach((enteringToolBarEl) => {
+      const enteringToolBar = animation.createAnimation();
+      enteringToolBar.addElement(enteringToolBarEl);
+      rootAnimation.addAnimation(enteringToolBar);
+      const enteringTitle = animation.createAnimation();
+      enteringTitle.addElement(enteringToolBarEl.querySelector('ion-title')); // REVIEW
+      const enteringToolBarButtons = animation.createAnimation();
+      const buttons = Array.from(enteringToolBarEl.querySelectorAll('ion-buttons,[menuToggle]'));
+      const parentHeader = enteringToolBarEl.closest('ion-header');
+      const inactiveHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.classList.contains('header-collapse-condense-inactive');
+      let buttonsToAnimate;
+      if (backDirection) {
+        buttonsToAnimate = buttons.filter((button) => {
+          const isCollapseButton = button.classList.contains('buttons-collapse');
+          return (isCollapseButton && !inactiveHeader) || !isCollapseButton;
+        });
+      }
+      else {
+        buttonsToAnimate = buttons.filter((button) => !button.classList.contains('buttons-collapse'));
+      }
+      enteringToolBarButtons.addElement(buttonsToAnimate);
+      const enteringToolBarItems = animation.createAnimation();
+      enteringToolBarItems.addElement(enteringToolBarEl.querySelectorAll(':scope > *:not(ion-title):not(ion-buttons):not([menuToggle])'));
+      const enteringToolBarBg = animation.createAnimation();
+      enteringToolBarBg.addElement(shadow(enteringToolBarEl).querySelector('.toolbar-background')); // REVIEW
+      const enteringBackButton = animation.createAnimation();
+      const backButtonEl = enteringToolBarEl.querySelector('ion-back-button');
+      if (backButtonEl) {
+        enteringBackButton.addElement(backButtonEl);
+      }
+      enteringToolBar.addAnimation([
+        enteringTitle,
+        enteringToolBarButtons,
+        enteringToolBarItems,
+        enteringToolBarBg,
+        enteringBackButton,
+      ]);
+      enteringToolBarButtons.fromTo(OPACITY, 0.01, 1);
+      enteringToolBarItems.fromTo(OPACITY, 0.01, 1);
+      if (backDirection) {
+        if (!inactiveHeader) {
+          enteringTitle
+            .fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`)
+            .fromTo(OPACITY, 0.01, 1);
+        }
+        enteringToolBarItems.fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`);
+        // back direction, entering page has a back button
+        enteringBackButton.fromTo(OPACITY, 0.01, 1);
+      }
+      else {
+        // entering toolbar, forward direction
+        if (!enteringContentHasLargeTitle) {
+          enteringTitle
+            .fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`)
+            .fromTo(OPACITY, 0.01, 1);
+        }
+        enteringToolBarItems.fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
+        enteringToolBarBg.beforeClearStyles([OPACITY, 'transform']);
+        const translucentHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.translucent;
+        if (!translucentHeader) {
+          enteringToolBarBg.fromTo(OPACITY, 0.01, 'var(--opacity)');
+        }
+        else {
+          enteringToolBarBg.fromTo('transform', isRTL ? 'translateX(-100%)' : 'translateX(100%)', 'translateX(0px)');
+        }
+        // forward direction, entering page has a back button
+        if (!forward) {
+          enteringBackButton.fromTo(OPACITY, 0.01, 1);
+        }
+        if (backButtonEl && !forward) {
+          const enteringBackBtnText = animation.createAnimation();
+          enteringBackBtnText
+            .addElement(shadow(backButtonEl).querySelector('.button-text')) // REVIEW
+            .fromTo(`transform`, isRTL ? 'translateX(-100px)' : 'translateX(100px)', 'translateX(0px)');
+          enteringToolBar.addAnimation(enteringBackBtnText);
+        }
+      }
+    });
+    // setup leaving view
+    if (leavingEl) {
+      const leavingContent = animation.createAnimation();
+      const leavingContentEl = leavingEl.querySelector(':scope > ion-content');
+      const leavingToolBarEls = leavingEl.querySelectorAll(':scope > ion-header > ion-toolbar');
+      const leavingHeaderEls = leavingEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *');
+      if (!leavingContentEl && leavingToolBarEls.length === 0 && leavingHeaderEls.length === 0) {
+        leavingContent.addElement(leavingEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs')); // REVIEW
+      }
+      else {
+        leavingContent.addElement(leavingContentEl); // REVIEW
+        leavingContent.addElement(leavingHeaderEls);
+      }
+      rootAnimation.addAnimation(leavingContent);
+      if (backDirection) {
+        // leaving content, back direction
+        leavingContent
+          .beforeClearStyles([OPACITY])
+          .fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)');
+        const leavingPage = index.getIonPageElement(leavingEl);
+        rootAnimation.afterAddWrite(() => {
+          if (rootAnimation.getDirection() === 'normal') {
+            leavingPage.style.setProperty('display', 'none');
+          }
+        });
+      }
+      else {
+        // leaving content, forward direction
+        leavingContent
+          .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
+          .fromTo(OPACITY, 1, OFF_OPACITY);
+      }
+      if (leavingContentEl) {
+        const leavingTransitionEffectEl = shadow(leavingContentEl).querySelector('.transition-effect');
+        if (leavingTransitionEffectEl) {
+          const leavingTransitionCoverEl = leavingTransitionEffectEl.querySelector('.transition-cover');
+          const leavingTransitionShadowEl = leavingTransitionEffectEl.querySelector('.transition-shadow');
+          const leavingTransitionEffect = animation.createAnimation();
+          const leavingTransitionCover = animation.createAnimation();
+          const leavingTransitionShadow = animation.createAnimation();
+          leavingTransitionEffect
+            .addElement(leavingTransitionEffectEl)
+            .beforeStyles({ opacity: '1', display: 'block' })
+            .afterStyles({ opacity: '', display: '' });
+          leavingTransitionCover
+            .addElement(leavingTransitionCoverEl) // REVIEW
+            .beforeClearStyles([OPACITY])
+            .fromTo(OPACITY, 0.1, 0);
+          leavingTransitionShadow
+            .addElement(leavingTransitionShadowEl) // REVIEW
+            .beforeClearStyles([OPACITY])
+            .fromTo(OPACITY, 0.7, 0.03);
+          leavingTransitionEffect.addAnimation([leavingTransitionCover, leavingTransitionShadow]);
+          leavingContent.addAnimation([leavingTransitionEffect]);
+        }
+      }
+      leavingToolBarEls.forEach((leavingToolBarEl) => {
+        const leavingToolBar = animation.createAnimation();
+        leavingToolBar.addElement(leavingToolBarEl);
+        const leavingTitle = animation.createAnimation();
+        leavingTitle.addElement(leavingToolBarEl.querySelector('ion-title')); // REVIEW
+        const leavingToolBarButtons = animation.createAnimation();
+        const buttons = leavingToolBarEl.querySelectorAll('ion-buttons,[menuToggle]');
+        const parentHeader = leavingToolBarEl.closest('ion-header');
+        const inactiveHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.classList.contains('header-collapse-condense-inactive');
+        const buttonsToAnimate = Array.from(buttons).filter((button) => {
+          const isCollapseButton = button.classList.contains('buttons-collapse');
+          return (isCollapseButton && !inactiveHeader) || !isCollapseButton;
+        });
+        leavingToolBarButtons.addElement(buttonsToAnimate);
+        const leavingToolBarItems = animation.createAnimation();
+        const leavingToolBarItemEls = leavingToolBarEl.querySelectorAll(':scope > *:not(ion-title):not(ion-buttons):not([menuToggle])');
+        if (leavingToolBarItemEls.length > 0) {
+          leavingToolBarItems.addElement(leavingToolBarItemEls);
+        }
+        const leavingToolBarBg = animation.createAnimation();
+        leavingToolBarBg.addElement(shadow(leavingToolBarEl).querySelector('.toolbar-background')); // REVIEW
+        const leavingBackButton = animation.createAnimation();
+        const backButtonEl = leavingToolBarEl.querySelector('ion-back-button');
+        if (backButtonEl) {
+          leavingBackButton.addElement(backButtonEl);
+        }
+        leavingToolBar.addAnimation([
+          leavingTitle,
+          leavingToolBarButtons,
+          leavingToolBarItems,
+          leavingBackButton,
+          leavingToolBarBg,
+        ]);
+        rootAnimation.addAnimation(leavingToolBar);
+        // fade out leaving toolbar items
+        leavingBackButton.fromTo(OPACITY, 0.99, 0);
+        leavingToolBarButtons.fromTo(OPACITY, 0.99, 0);
+        leavingToolBarItems.fromTo(OPACITY, 0.99, 0);
+        if (backDirection) {
+          if (!inactiveHeader) {
+            // leaving toolbar, back direction
+            leavingTitle
+              .fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)')
+              .fromTo(OPACITY, 0.99, 0);
+          }
+          leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)');
+          leavingToolBarBg.beforeClearStyles([OPACITY, 'transform']);
+          // leaving toolbar, back direction, and there's no entering toolbar
+          // should just slide out, no fading out
+          const translucentHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.translucent;
+          if (!translucentHeader) {
+            leavingToolBarBg.fromTo(OPACITY, 'var(--opacity)', 0);
+          }
+          else {
+            leavingToolBarBg.fromTo('transform', 'translateX(0px)', isRTL ? 'translateX(-100%)' : 'translateX(100%)');
+          }
+          if (backButtonEl && !backward) {
+            const leavingBackBtnText = animation.createAnimation();
+            leavingBackBtnText
+              .addElement(shadow(backButtonEl).querySelector('.button-text')) // REVIEW
+              .fromTo('transform', `translateX(${CENTER})`, `translateX(${(isRTL ? -124 : 124) + 'px'})`);
+            leavingToolBar.addAnimation(leavingBackBtnText);
+          }
+        }
+        else {
+          // leaving toolbar, forward direction
+          if (!inactiveHeader) {
+            leavingTitle
+              .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
+              .fromTo(OPACITY, 0.99, 0)
+              .afterClearStyles([TRANSFORM, OPACITY]);
+          }
+          leavingToolBarItems
+            .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
+            .afterClearStyles([TRANSFORM, OPACITY]);
+          leavingBackButton.afterClearStyles([OPACITY]);
+          leavingTitle.afterClearStyles([OPACITY]);
+          leavingToolBarButtons.afterClearStyles([OPACITY]);
+        }
+      });
+    }
+    return rootAnimation;
+  }
+  catch (err) {
+    throw err;
+  }
+};
+
+exports.iosTransitionAnimation = iosTransitionAnimation;
+exports.shadow = shadow;

package/dist/cjs/keyboard-91096619.js

@@ -0,0 +1,140 @@
+'use strict';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const KEYBOARD_DID_OPEN = 'ionKeyboardDidShow';
+const KEYBOARD_DID_CLOSE = 'ionKeyboardDidHide';
+const KEYBOARD_THRESHOLD = 150;
+let previousVisualViewport = {};
+let currentVisualViewport = {};
+let keyboardOpen = false;
+/**
+ * This is only used for tests
+ */
+const resetKeyboardAssist = () => {
+  previousVisualViewport = {};
+  currentVisualViewport = {};
+  keyboardOpen = false;
+};
+const startKeyboardAssist = (win) => {
+  startNativeListeners(win);
+  if (!win.visualViewport) {
+    return;
+  }
+  currentVisualViewport = copyVisualViewport(win.visualViewport);
+  win.visualViewport.onresize = () => {
+    trackViewportChanges(win);
+    if (keyboardDidOpen() || keyboardDidResize(win)) {
+      setKeyboardOpen(win);
+    }
+    else if (keyboardDidClose(win)) {
+      setKeyboardClose(win);
+    }
+  };
+};
+/**
+ * Listen for events fired by native keyboard plugin
+ * in Capacitor/Cordova so devs only need to listen
+ * in one place.
+ */
+const startNativeListeners = (win) => {
+  win.addEventListener('keyboardDidShow', (ev) => setKeyboardOpen(win, ev));
+  win.addEventListener('keyboardDidHide', () => setKeyboardClose(win));
+};
+const setKeyboardOpen = (win, ev) => {
+  fireKeyboardOpenEvent(win, ev);
+  keyboardOpen = true;
+};
+const setKeyboardClose = (win) => {
+  fireKeyboardCloseEvent(win);
+  keyboardOpen = false;
+};
+/**
+ * Returns `true` if the `keyboardOpen` flag is not
+ * set, the previous visual viewport width equal the current
+ * visual viewport width, and if the scaled difference
+ * of the previous visual viewport height minus the current
+ * visual viewport height is greater than KEYBOARD_THRESHOLD
+ *
+ * We need to be able to accommodate users who have zooming
+ * enabled in their browser (or have zoomed in manually) which
+ * is why we take into account the current visual viewport's
+ * scale value.
+ */
+const keyboardDidOpen = () => {
+  const scaledHeightDifference = (previousVisualViewport.height - currentVisualViewport.height) * currentVisualViewport.scale;
+  return (!keyboardOpen &&
+    previousVisualViewport.width === currentVisualViewport.width &&
+    scaledHeightDifference > KEYBOARD_THRESHOLD);
+};
+/**
+ * Returns `true` if the keyboard is open,
+ * but the keyboard did not close
+ */
+const keyboardDidResize = (win) => {
+  return keyboardOpen && !keyboardDidClose(win);
+};
+/**
+ * Determine if the keyboard was closed
+ * Returns `true` if the `keyboardOpen` flag is set and
+ * the current visual viewport height equals the
+ * layout viewport height.
+ */
+const keyboardDidClose = (win) => {
+  return keyboardOpen && currentVisualViewport.height === win.innerHeight;
+};
+/**
+ * Dispatch a keyboard open event
+ */
+const fireKeyboardOpenEvent = (win, nativeEv) => {
+  const keyboardHeight = nativeEv ? nativeEv.keyboardHeight : win.innerHeight - currentVisualViewport.height;
+  const ev = new CustomEvent(KEYBOARD_DID_OPEN, {
+    detail: { keyboardHeight },
+  });
+  win.dispatchEvent(ev);
+};
+/**
+ * Dispatch a keyboard close event
+ */
+const fireKeyboardCloseEvent = (win) => {
+  const ev = new CustomEvent(KEYBOARD_DID_CLOSE);
+  win.dispatchEvent(ev);
+};
+/**
+ * Given a window object, create a copy of
+ * the current visual and layout viewport states
+ * while also preserving the previous visual and
+ * layout viewport states
+ */
+const trackViewportChanges = (win) => {
+  previousVisualViewport = Object.assign({}, currentVisualViewport);
+  currentVisualViewport = copyVisualViewport(win.visualViewport);
+};
+/**
+ * Creates a deep copy of the visual viewport
+ * at a given state
+ */
+const copyVisualViewport = (visualViewport) => {
+  return {
+    width: Math.round(visualViewport.width),
+    height: Math.round(visualViewport.height),
+    offsetTop: visualViewport.offsetTop,
+    offsetLeft: visualViewport.offsetLeft,
+    pageTop: visualViewport.pageTop,
+    pageLeft: visualViewport.pageLeft,
+    scale: visualViewport.scale,
+  };
+};
+
+exports.KEYBOARD_DID_CLOSE = KEYBOARD_DID_CLOSE;
+exports.KEYBOARD_DID_OPEN = KEYBOARD_DID_OPEN;
+exports.copyVisualViewport = copyVisualViewport;
+exports.keyboardDidClose = keyboardDidClose;
+exports.keyboardDidOpen = keyboardDidOpen;
+exports.keyboardDidResize = keyboardDidResize;
+exports.resetKeyboardAssist = resetKeyboardAssist;
+exports.setKeyboardClose = setKeyboardClose;
+exports.setKeyboardOpen = setKeyboardOpen;
+exports.startKeyboardAssist = startKeyboardAssist;
+exports.trackViewportChanges = trackViewportChanges;