@venite/components 0.16.7 → 0.16.13

package/dist/cjs/ionic-global-581fb4f8.js

@@ -0,0 +1,204 @@
+'use strict';
+
+const index = require('./index-8fe0df8d.js');
+
+const getPlatforms = (win) => setupPlatforms(win);
+const isPlatform = (winOrPlatform, platform) => {
+    if (typeof winOrPlatform === 'string') {
+        platform = winOrPlatform;
+        winOrPlatform = undefined;
+    }
+    return getPlatforms(winOrPlatform).includes(platform);
+};
+const setupPlatforms = (win = window) => {
+    win.Ionic = win.Ionic || {};
+    let platforms = win.Ionic.platforms;
+    if (platforms == null) {
+        platforms = win.Ionic.platforms = detectPlatforms(win);
+        platforms.forEach(p => win.document.documentElement.classList.add(`plt-${p}`));
+    }
+    return platforms;
+};
+const detectPlatforms = (win) => Object.keys(PLATFORMS_MAP).filter(p => PLATFORMS_MAP[p](win));
+const isMobileWeb = (win) => isMobile(win) && !isHybrid(win);
+const isIpad = (win) => {
+    // iOS 12 and below
+    if (testUserAgent(win, /iPad/i)) {
+        return true;
+    }
+    // iOS 13+
+    if (testUserAgent(win, /Macintosh/i) && isMobile(win)) {
+        return true;
+    }
+    return false;
+};
+const isIphone = (win) => testUserAgent(win, /iPhone/i);
+const isIOS = (win) => testUserAgent(win, /iPhone|iPod/i) || isIpad(win);
+const isAndroid = (win) => testUserAgent(win, /android|sink/i);
+const isAndroidTablet = (win) => {
+    return isAndroid(win) && !testUserAgent(win, /mobile/i);
+};
+const isPhablet = (win) => {
+    const width = win.innerWidth;
+    const height = win.innerHeight;
+    const smallest = Math.min(width, height);
+    const largest = Math.max(width, height);
+    return (smallest > 390 && smallest < 520) &&
+        (largest > 620 && largest < 800);
+};
+const isTablet = (win) => {
+    const width = win.innerWidth;
+    const height = win.innerHeight;
+    const smallest = Math.min(width, height);
+    const largest = Math.max(width, height);
+    return (isIpad(win) ||
+        isAndroidTablet(win) ||
+        ((smallest > 460 && smallest < 820) &&
+            (largest > 780 && largest < 1400)));
+};
+const isMobile = (win) => matchMedia(win, '(any-pointer:coarse)');
+const isDesktop = (win) => !isMobile(win);
+const isHybrid = (win) => isCordova(win) || isCapacitorNative(win);
+const isCordova = (win) => !!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
+const isCapacitorNative = (win) => {
+    const capacitor = win['Capacitor'];
+    return !!(capacitor && capacitor.isNative);
+};
+const isElectron = (win) => testUserAgent(win, /electron/i);
+const isPWA = (win) => !!(win.matchMedia('(display-mode: standalone)').matches || win.navigator.standalone);
+const testUserAgent = (win, expr) => expr.test(win.navigator.userAgent);
+const matchMedia = (win, query) => win.matchMedia(query).matches;
+const PLATFORMS_MAP = {
+    'ipad': isIpad,
+    'iphone': isIphone,
+    'ios': isIOS,
+    'android': isAndroid,
+    'phablet': isPhablet,
+    'tablet': isTablet,
+    'cordova': isCordova,
+    'capacitor': isCapacitorNative,
+    'electron': isElectron,
+    'pwa': isPWA,
+    'mobile': isMobile,
+    'mobileweb': isMobileWeb,
+    'desktop': isDesktop,
+    'hybrid': isHybrid
+};
+
+class Config {
+    constructor() {
+        this.m = new Map();
+    }
+    reset(configObj) {
+        this.m = new Map(Object.entries(configObj));
+    }
+    get(key, fallback) {
+        const value = this.m.get(key);
+        return (value !== undefined) ? value : fallback;
+    }
+    getBoolean(key, fallback = false) {
+        const val = this.m.get(key);
+        if (val === undefined) {
+            return fallback;
+        }
+        if (typeof val === 'string') {
+            return val === 'true';
+        }
+        return !!val;
+    }
+    getNumber(key, fallback) {
+        const val = parseFloat(this.m.get(key));
+        return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;
+    }
+    set(key, value) {
+        this.m.set(key, value);
+    }
+}
+const config = /*@__PURE__*/ new Config();
+const configFromSession = (win) => {
+    try {
+        const configStr = win.sessionStorage.getItem(IONIC_SESSION_KEY);
+        return configStr !== null ? JSON.parse(configStr) : {};
+    }
+    catch (e) {
+        return {};
+    }
+};
+const saveConfig = (win, c) => {
+    try {
+        win.sessionStorage.setItem(IONIC_SESSION_KEY, JSON.stringify(c));
+    }
+    catch (e) {
+        return;
+    }
+};
+const configFromURL = (win) => {
+    const configObj = {};
+    win.location.search.slice(1)
+        .split('&')
+        .map(entry => entry.split('='))
+        .map(([key, value]) => [decodeURIComponent(key), decodeURIComponent(value)])
+        .filter(([key]) => startsWith(key, IONIC_PREFIX))
+        .map(([key, value]) => [key.slice(IONIC_PREFIX.length), value])
+        .forEach(([key, value]) => {
+        configObj[key] = value;
+    });
+    return configObj;
+};
+const startsWith = (input, search) => {
+    return input.substr(0, search.length) === search;
+};
+const IONIC_PREFIX = 'ionic:';
+const IONIC_SESSION_KEY = 'ionic-persist-config';
+
+let defaultMode;
+const getIonMode = (ref) => {
+  return (ref && index.getMode(ref)) || defaultMode;
+};
+const appGlobalScript = () => {
+  const doc = document;
+  const win = window;
+  const Ionic = win.Ionic = win.Ionic || {};
+  // Setup platforms
+  setupPlatforms(win);
+  // create the Ionic.config from raw config object (if it exists)
+  // and convert Ionic.config into a ConfigApi that has a get() fn
+  const configObj = Object.assign(Object.assign(Object.assign(Object.assign({}, configFromSession(win)), { persistConfig: false }), Ionic.config), configFromURL(win));
+  config.reset(configObj);
+  if (config.getBoolean('persistConfig')) {
+    saveConfig(win, configObj);
+  }
+  // first see if the mode was set as an attribute on <html>
+  // which could have been set by the user, or by pre-rendering
+  // otherwise get the mode via config settings, and fallback to md
+  Ionic.config = config;
+  Ionic.mode = defaultMode = config.get('mode', (doc.documentElement.getAttribute('mode')) || (isPlatform(win, 'ios') ? 'ios' : 'md'));
+  config.set('mode', defaultMode);
+  doc.documentElement.setAttribute('mode', defaultMode);
+  doc.documentElement.classList.add(defaultMode);
+  if (config.getBoolean('_testing')) {
+    config.set('animated', false);
+  }
+  const isIonicElement = (elm) => elm.tagName && elm.tagName.startsWith('ION-');
+  const isAllowedIonicModeValue = (elmMode) => ['ios', 'md'].includes(elmMode);
+  index.setMode((elm) => {
+    while (elm) {
+      const elmMode = elm.mode || elm.getAttribute('mode');
+      if (elmMode) {
+        if (isAllowedIonicModeValue(elmMode)) {
+          return elmMode;
+        }
+        else if (isIonicElement(elm)) {
+          console.warn('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
+        }
+      }
+      elm = elm.parentElement;
+    }
+    return defaultMode;
+  });
+};
+
+exports.appGlobalScript = appGlobalScript;
+exports.config = config;
+exports.getIonMode = getIonMode;
+exports.isPlatform = isPlatform;

package/dist/cjs/ios.transition-7244ac4e.js

@@ -0,0 +1,459 @@
+'use strict';
+
+const animation = require('./animation-34a434a2.js');
+const index = require('./index-1a73a70c.js');
+require('./helpers-41dfb43a.js');
+require('./index-8fe0df8d.js');
+
+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-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.70);
+                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 && 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, 1);
+                }
+                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.70, 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 && 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, 0.99, 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;