@rdlabo/ionic-theme-ios27 0.1.0-0

package/dist/sheets-of-glass/index.js

@@ -0,0 +1,174 @@
+import { createGesture } from '@ionic/core';
+import { changeSelectedElement, cloneElement, getStep } from '../utils';
+import { createMoveAnimation, createPreMoveAnimation, getMoveAnimationKeyframe, getScaleAnimation } from './animations';
+const GESTURE_NAME = 'ios26-enable-gesture';
+const ANIMATED_NAME = 'ios26-animated';
+export const registerEffect = (targetElement, effectTagName, selectedClassName, scales) => {
+    if (!targetElement.classList.contains('ios')) {
+        return undefined;
+    }
+    let gesture;
+    let moveAnimation;
+    let currentTouchedElement;
+    let clearActivatedTimer;
+    let animationPosition = undefined;
+    let scaleAnimationPromise;
+    let startAnimationPromise;
+    let maxVelocity = 0;
+    const effectElement = cloneElement(effectTagName);
+    const onPointerDown = (event) => {
+        clearActivated();
+        gesture.destroy();
+        createAnimationGesture();
+        const onPointerUp = async (e) => {
+            clearActivatedTimer = setTimeout(async () => {
+                await onEndGesture();
+                gesture.destroy();
+                createAnimationGesture();
+            });
+            document.removeEventListener('pointerup', onPointerUp);
+        };
+        document.addEventListener('pointerup', onPointerUp);
+    };
+    targetElement.addEventListener('pointerdown', onPointerDown);
+    const createAnimationGesture = () => {
+        targetElement.classList.add(GESTURE_NAME);
+        gesture = createGesture({
+            el: targetElement,
+            threshold: 0,
+            gestureName: `${GESTURE_NAME}_${effectTagName}_${crypto.randomUUID()}`,
+            onStart: (event) => onStartGesture(event),
+            onMove: (event) => onMoveGesture(event),
+            onEnd: () => {
+                onEndGesture().then();
+            },
+        });
+        gesture.enable(true);
+    };
+    createAnimationGesture();
+    const clearActivated = (isEndGesture = false) => {
+        if (!currentTouchedElement) {
+            return;
+        }
+        if (!isEndGesture && !currentTouchedElement.classList.contains(selectedClassName)) {
+            currentTouchedElement.click();
+            currentTouchedElement.classList.add(selectedClassName);
+        }
+        currentTouchedElement.classList.remove('ion-activated');
+        currentTouchedElement = undefined;
+        effectElement.style.display = 'none';
+        maxVelocity = 0;
+        targetElement.classList.remove(ANIMATED_NAME);
+    };
+    const onStartGesture = (detail) => {
+        currentTouchedElement = detail.event.target.closest(effectTagName) || undefined;
+        const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
+        if (currentTouchedElement === undefined || tabSelectedElement === null) {
+            return false;
+        }
+        animationPosition = {
+            minPositionX: targetElement.getBoundingClientRect().left,
+            maxPositionX: targetElement.getBoundingClientRect().right - tabSelectedElement.clientWidth,
+            width: tabSelectedElement.clientWidth,
+            positionY: tabSelectedElement.getBoundingClientRect().top,
+        };
+        targetElement.classList.add(ANIMATED_NAME);
+        changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
+        const startAnimation = (() => {
+            if (tabSelectedElement === currentTouchedElement) {
+                return new Promise((resolve) => resolve());
+            }
+            else {
+                const preMoveAnimation = createPreMoveAnimation(effectElement, tabSelectedElement, currentTouchedElement, animationPosition);
+                return preMoveAnimation.play().finally(() => preMoveAnimation.destroy());
+            }
+        })();
+        startAnimationPromise = startAnimation;
+        startAnimation.then(() => {
+            if (!currentTouchedElement) {
+                return;
+            }
+            moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition);
+            moveAnimation.progressStart(true, getStep(currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2, animationPosition));
+        });
+        getScaleAnimation(effectElement).duration(200).to('opacity', 1).to('transform', scales.large).play();
+        return true;
+    };
+    const onMoveGesture = (detail) => {
+        if (currentTouchedElement === undefined || !moveAnimation) {
+            return false;
+        }
+        if (scaleAnimationPromise === undefined) {
+            if (Math.abs(detail.velocityX) > maxVelocity) {
+                maxVelocity = Math.abs(detail.velocityX);
+            }
+            if (Math.abs(detail.velocityX) > 0.2) {
+                scaleAnimationPromise = getScaleAnimation(effectElement)
+                    .duration(720)
+                    .keyframes(getMoveAnimationKeyframe('slowly', scales))
+                    .play()
+                    .finally(() => (scaleAnimationPromise = undefined));
+            }
+            if (maxVelocity > 0.2 && Math.abs(detail.velocityX) < 0.15 && Math.abs(detail.startX - detail.currentX) > 100) {
+                scaleAnimationPromise = getScaleAnimation(effectElement)
+                    .duration(720)
+                    .keyframes(getMoveAnimationKeyframe(detail.velocityX > 0 ? 'moveRight' : 'moveLeft', scales))
+                    .play()
+                    .finally(() => (scaleAnimationPromise = undefined));
+                maxVelocity = 0;
+            }
+        }
+        const currentX = detail.currentX;
+        const previousY = targetElement.getBoundingClientRect().top + targetElement.getBoundingClientRect().height / 2;
+        const nextEl = targetElement.getRootNode().elementFromPoint(currentX, previousY);
+        const latestTouchedElement = nextEl?.closest(effectTagName) || undefined;
+        if (latestTouchedElement && currentTouchedElement !== latestTouchedElement) {
+            currentTouchedElement = latestTouchedElement;
+            changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
+        }
+        moveAnimation.progressStep(getStep(detail.currentX, animationPosition));
+        return true;
+    };
+    const onEndGesture = async () => {
+        if (clearActivatedTimer !== undefined) {
+            clearTimeout(clearActivatedTimer);
+            clearActivatedTimer = undefined;
+        }
+        if (currentTouchedElement && !currentTouchedElement.classList.contains(selectedClassName)) {
+            currentTouchedElement.click();
+            currentTouchedElement.classList.add(selectedClassName);
+        }
+        if (startAnimationPromise) {
+            await startAnimationPromise;
+        }
+        if (currentTouchedElement === undefined || !moveAnimation) {
+            return false;
+        }
+        setTimeout(() => {
+            if (!currentTouchedElement) {
+                return;
+            }
+            const targetX = currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2;
+            const step = getStep(targetX, animationPosition);
+            moveAnimation.progressStep(step);
+        });
+        await getScaleAnimation(effectElement).duration(120).to('transform', `scale(1, 0.92)`).play();
+        moveAnimation.destroy();
+        clearActivated(true);
+        return true;
+    };
+    return {
+        destroy: () => {
+            targetElement.removeEventListener('pointerdown', onPointerDown);
+            if (clearActivatedTimer !== undefined) {
+                clearTimeout(clearActivatedTimer);
+                clearActivatedTimer = undefined;
+            }
+            clearActivated();
+            if (gesture) {
+                gesture.destroy();
+            }
+            targetElement.classList.remove(GESTURE_NAME);
+        },
+    };
+};

package/dist/sheets-of-glass/interfaces.d.ts

@@ -0,0 +1,16 @@
+export interface EffectScales {
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+}
+export interface registeredEffect {
+    destroy: () => void;
+}
+export interface AnimationPosition {
+    minPositionX: number;
+    maxPositionX: number;
+    width: number;
+    positionY: number;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/sheets-of-glass/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/sheets-of-glass/interfaces.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/dist/sheets-of-glass/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/tab-bar-searchable/animations/enter.d.ts

@@ -0,0 +1,8 @@
+import { ElementReferences, ElementSizes } from '../interfaces';
+import { Animation } from '@ionic/core';
+export declare const createEffectAnimation: (references: ElementReferences, sizes: ElementSizes) => Animation;
+export declare const createSearchContainerAnimation: (references: ElementReferences, sizes: ElementSizes) => Animation;
+export declare const createCloseButtonsAnimation: (references: ElementReferences) => Animation;
+export declare const createTabBarAnimation: (ionTabBar: HTMLElement, references: ElementReferences, sizes: ElementSizes) => Animation;
+export declare const createFabButtonAnimation: (ionFabButton: HTMLElement) => Animation;
+//# sourceMappingURL=enter.d.ts.map

package/dist/tab-bar-searchable/animations/enter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enter.d.ts","sourceRoot":"","sources":["../../../src/tab-bar-searchable/animations/enter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,SAAS,EAAmB,MAAM,aAAa,CAAC;AAIzD,eAAO,MAAM,qBAAqB,GAAI,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SA0B1F,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAUnG,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,YAAY,iBAAiB,KAAG,SAO3E,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,WAAW,WAAW,EAAE,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAwBlH,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,cAAc,WAAW,KAAG,SAWpE,CAAC"}

package/dist/tab-bar-searchable/animations/enter.js

@@ -0,0 +1,73 @@
+import { createAnimation } from '@ionic/core';
+import { cloneElement } from '../../utils';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
+export const createEffectAnimation = (references, sizes) => {
+    const effectElement = cloneElement('ion-icon');
+    const closeButtonRect = references.closeButtonIcon?.getBoundingClientRect();
+    const iconName = references.selectedTabButtonIcon?.getAttribute('name');
+    const selectedTabButtonIconRect = references.selectedTabButtonIcon?.getBoundingClientRect();
+    return createAnimation()
+        .addElement(effectElement)
+        .beforeAddWrite(() => {
+        effectElement.style.display = 'inline-block';
+        references.closeButtonIcon.style.opacity = '0';
+        if (iconName && closeButtonRect) {
+            effectElement.setAttribute('name', iconName);
+            effectElement.style.width = `${closeButtonRect.width}px`;
+            effectElement.style.height = `${closeButtonRect.height}px`;
+        }
+    })
+        .afterAddWrite(() => {
+        effectElement.style.display = 'none';
+        references.closeButtonIcon.style.opacity = '1';
+    })
+        .fromTo('transform', `translate3d(${selectedTabButtonIconRect.left}px, ${selectedTabButtonIconRect.top}px, 0)`, `translate3d(${closeButtonRect.left}px, ${closeButtonRect.top}px, 0)`);
+};
+export const createSearchContainerAnimation = (references, sizes) => {
+    return createAnimation()
+        .addElement(references.searchContainer)
+        .beforeAddWrite(() => (references.searchContainer.style.transformOrigin = 'right center'))
+        .fromTo('transform', `scale(${sizes.fabButton.width / sizes.searchContainer.width}, ${sizes.fabButton.height / sizes.searchContainer.height})`, 'scale(1)')
+        .fromTo('opacity', '0.2', '1');
+};
+export const createCloseButtonsAnimation = (references) => {
+    return createAnimation()
+        .delay(ANIMATION_DELAY_CLOSE_BUTTONS)
+        .addElement(references.closeButtons)
+        .beforeAddWrite(() => (references.closeButtons.style.transformOrigin = 'left center'))
+        .afterClearStyles(['transform', 'transform-origin'])
+        .fromTo('transform', 'scale(1.5, 1)', 'scale(1)');
+};
+export const createTabBarAnimation = (ionTabBar, references, sizes) => {
+    return createAnimation()
+        .addElement(ionTabBar)
+        .beforeAddWrite(() => {
+        ionTabBar.querySelectorAll('ion-tab-button').forEach((element) => {
+            element.style.transition = OPACITY_TRANSITION;
+            element.style.opacity = '0';
+        });
+        references.selectedTabButton.classList.remove('tab-selected');
+        const iconName = references.selectedTabButtonIcon?.getAttribute('name');
+        if (iconName) {
+            references.closeButtonIcon?.setAttribute('name', iconName);
+        }
+    })
+        .afterAddWrite(() => {
+        references.selectedTabButton.classList.add('tab-selected');
+        ionTabBar.style.pointerEvents = 'none';
+    })
+        .fromTo('transform', 'scale(1)', `scale(${sizes.closeButton.width / sizes.tabBar.width}, ${sizes.closeButton.height / sizes.tabBar.height})`)
+        .fromTo('opacity', '1', '0');
+};
+export const createFabButtonAnimation = (ionFabButton) => {
+    return createAnimation()
+        .addElement(ionFabButton)
+        .beforeAddWrite(() => {
+        ionFabButton.style.transformOrigin = 'center right';
+        ionFabButton.querySelector('ion-icon')?.style.setProperty('opacity', '0');
+    })
+        .afterAddWrite(() => {
+        ionFabButton.style.pointerEvents = 'none';
+    })
+        .fromTo('opacity', '1', '0');
+};

package/dist/tab-bar-searchable/animations/leave.d.ts

@@ -0,0 +1,8 @@
+import { ElementReferences, ElementSizes } from '../interfaces';
+import { Animation } from '@ionic/core';
+export declare const createReverseEffectAnimation: (references: ElementReferences, searchableElementSizes: ElementSizes, colorSelected: string) => Animation;
+export declare const createReverseSearchContainerAnimation: (references: ElementReferences, sizes: ElementSizes) => Animation;
+export declare const createReverseCloseButtonsAnimation: (references: ElementReferences) => Animation;
+export declare const createReverseTabBarAnimation: (ionTabBar: HTMLElement, references: ElementReferences, sizes: ElementSizes) => Animation;
+export declare const createReverseFabButtonAnimation: (ionFabButton: HTMLElement, references: ElementSizes) => Animation;
+//# sourceMappingURL=leave.d.ts.map

package/dist/tab-bar-searchable/animations/leave.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"leave.d.ts","sourceRoot":"","sources":["../../../src/tab-bar-searchable/animations/leave.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,SAAS,EAAmB,MAAM,aAAa,CAAC;AAIzD,eAAO,MAAM,4BAA4B,GACvC,YAAY,iBAAiB,EAC7B,wBAAwB,YAAY,EACpC,eAAe,MAAM,KACpB,SAyBF,CAAC;AAEF,eAAO,MAAM,qCAAqC,GAAI,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAU1G,CAAC;AAEF,eAAO,MAAM,kCAAkC,GAAI,YAAY,iBAAiB,KAAG,SAOlF,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,WAAW,WAAW,EAAE,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAiBzH,CAAC;AAEF,eAAO,MAAM,+BAA+B,GAAI,cAAc,WAAW,EAAE,YAAY,YAAY,KAAG,SAYrG,CAAC"}

package/dist/tab-bar-searchable/animations/leave.js

@@ -0,0 +1,66 @@
+import { createAnimation } from '@ionic/core';
+import { cloneElement } from '../../utils';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
+export const createReverseEffectAnimation = (references, searchableElementSizes, colorSelected) => {
+    const effectElement = cloneElement('ion-icon');
+    const closeButtonRect = references.closeButtonIcon?.getBoundingClientRect();
+    return createAnimation()
+        .addElement(effectElement)
+        .beforeAddWrite(() => {
+        effectElement.style.display = 'inline-block';
+        references.closeButtonIcon.style.opacity = '0';
+        if (searchableElementSizes.selectedTabButtonIcon) {
+            effectElement.style.width = `${searchableElementSizes.selectedTabButtonIcon.width}px`;
+            effectElement.style.height = `${searchableElementSizes.selectedTabButtonIcon.height}px`;
+            effectElement.style.color = colorSelected;
+        }
+    })
+        .afterAddWrite(() => {
+        effectElement.style.display = 'none';
+        references.closeButtonIcon.style.opacity = '1';
+        effectElement.style.color = '';
+    })
+        .fromTo('transform', `translate3d(${closeButtonRect.left}px, ${closeButtonRect.top}px, 0)`, `translate3d(${searchableElementSizes.selectedTabButtonIcon.left}px, ${searchableElementSizes.selectedTabButtonIcon.top}px, 0)`);
+};
+export const createReverseSearchContainerAnimation = (references, sizes) => {
+    return createAnimation()
+        .addElement(references.searchContainer)
+        .beforeAddWrite(() => (references.searchContainer.style.transformOrigin = 'right center'))
+        .fromTo('transform', 'scale(1)', `scale(${sizes.fabButton.width / sizes.searchContainer.width}, ${sizes.fabButton.height / sizes.searchContainer.height})`)
+        .fromTo('opacity', '1', '0.2');
+};
+export const createReverseCloseButtonsAnimation = (references) => {
+    return createAnimation()
+        .delay(ANIMATION_DELAY_CLOSE_BUTTONS)
+        .addElement(references.closeButtons)
+        .beforeAddWrite(() => (references.closeButtons.style.transformOrigin = 'left center'))
+        .afterClearStyles(['transform', 'transform-origin'])
+        .fromTo('transform', 'scale(1)', 'scale(1.5, 1)');
+};
+export const createReverseTabBarAnimation = (ionTabBar, references, sizes) => {
+    return createAnimation()
+        .addElement(ionTabBar)
+        .beforeAddWrite(() => {
+        ionTabBar.style.pointerEvents = 'auto';
+        ionTabBar.querySelectorAll('ion-tab-button').forEach((element) => {
+            element.style.transition = OPACITY_TRANSITION;
+            element.style.opacity = '1';
+        });
+    })
+        .afterClearStyles(['transform', 'opacity'])
+        .fromTo('transform', `scale(${sizes.closeButton.width / sizes.tabBar.width}, ${sizes.closeButton.height / sizes.tabBar.height})`, 'scale(1)')
+        .fromTo('opacity', '0', '1');
+};
+export const createReverseFabButtonAnimation = (ionFabButton, references) => {
+    return createAnimation()
+        .addElement(ionFabButton)
+        .beforeAddWrite(() => {
+        ionFabButton.querySelector('ion-icon')?.style.setProperty('opacity', '1');
+        ionFabButton.style.transformOrigin = 'center right';
+    })
+        .afterAddWrite(() => {
+        ionFabButton.style.pointerEvents = 'auto';
+    })
+        .fromTo('opacity', '0', '1')
+        .fromTo('transform', `scale(${references.searchContainer.height / references.fabButton.height})`, 'scale(1)');
+};

package/dist/tab-bar-searchable/index.d.ts

@@ -0,0 +1,4 @@
+import { TabBarSearchableFunction } from './interfaces';
+export * from './interfaces';
+export declare const attachTabBarSearchable: (ionTabBar: HTMLElement, ionFabButton: HTMLElement, ionFooter: HTMLElement) => TabBarSearchableFunction;
+//# sourceMappingURL=index.d.ts.map

package/dist/tab-bar-searchable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab-bar-searchable/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAwB,wBAAwB,EAAwB,MAAM,cAAc,CAAC;AAgBpG,cAAc,cAAc,CAAC;AAqB7B,eAAO,MAAM,sBAAsB,GACjC,WAAW,WAAW,EACtB,cAAc,WAAW,EACzB,WAAW,WAAW,KACrB,wBAsBF,CAAC"}

package/dist/tab-bar-searchable/index.js

@@ -0,0 +1,75 @@
+import { createAnimation } from '@ionic/core';
+import { ANIMATION_DELAY_BASE, ANIMATION_DURATION, ANIMATION_EASING, getElementReferences, getElementSizes, throwErrorByFailedClickElement, } from './utils';
+import { TabBarSearchableType } from './interfaces';
+import { createCloseButtonsAnimation, createEffectAnimation, createFabButtonAnimation, createSearchContainerAnimation, createTabBarAnimation, } from './animations/enter';
+import { createReverseCloseButtonsAnimation, createReverseEffectAnimation, createReverseFabButtonAnimation, createReverseSearchContainerAnimation, createReverseTabBarAnimation, } from './animations/leave';
+export * from './interfaces';
+export const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
+    if (!ionTabBar || !ionFabButton || !ionFooter) {
+        throw new Error('TabBarSearchable should be defined with props');
+    }
+    ionFooter.style.pointerEvents = 'none';
+    ionFooter.style.opacity = '0';
+    ionTabBar.style.transformOrigin = 'left center';
+    let searchableEventCache;
+    return async (event, type) => {
+        if (type === TabBarSearchableType.Enter) {
+            searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter);
+        }
+        else if (searchableEventCache !== undefined) {
+            await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter);
+            searchableEventCache = undefined;
+        }
+        else {
+            throw new Error('TabBarSearchableType.Leave should be run after TabBarSearchableType.Enter');
+        }
+    };
+};
+const enterEvent = async (event, ionTabBar, ionFabButton, ionFooter) => {
+    if (!event.target?.closest('ion-fab-button')) {
+        throw throwErrorByFailedClickElement('ion-fab-button');
+    }
+    const references = getElementReferences(ionTabBar, ionFooter);
+    const sizes = getElementSizes(ionTabBar, ionFabButton, references);
+    const colorSelected = references.selectedTabButton
+        ? getComputedStyle(references.selectedTabButton).getPropertyValue('--color-selected').trim()
+        : '';
+    const effectAnimation = createEffectAnimation(references, sizes);
+    const searchContainerAnimation = createSearchContainerAnimation(references, sizes);
+    const closeButtonsAnimation = createCloseButtonsAnimation(references);
+    const tabBarAnimation = createTabBarAnimation(ionTabBar, references, sizes);
+    const fabButtonAnimation = createFabButtonAnimation(ionFabButton);
+    await createAnimation()
+        .delay(ANIMATION_DELAY_BASE)
+        .duration(ANIMATION_DURATION)
+        .easing(ANIMATION_EASING)
+        .addElement(ionFooter)
+        .afterAddWrite(() => (ionFooter.style.pointerEvents = 'auto'))
+        .fromTo('opacity', '0.8', '1')
+        .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+        .play();
+    return {
+        elementSizes: sizes,
+        colorSelected,
+    };
+};
+const leaveEvent = async (event, searchableEventCache, ionTabBar, ionFabButton, ionFooter) => {
+    if (!event.target?.closest('ion-buttons[slot=start] ion-button')) {
+        throw throwErrorByFailedClickElement('ion-buttons[slot=start] ion-button');
+    }
+    const references = getElementReferences(ionTabBar, ionFooter);
+    const effectAnimation = createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected);
+    const searchContainerAnimation = createReverseSearchContainerAnimation(references, searchableEventCache.elementSizes);
+    const closeButtonsAnimation = createReverseCloseButtonsAnimation(references);
+    const tabBarAnimation = createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes);
+    const fabButtonAnimation = createReverseFabButtonAnimation(ionFabButton, searchableEventCache.elementSizes);
+    await createAnimation()
+        .delay(ANIMATION_DELAY_BASE)
+        .duration(ANIMATION_DURATION)
+        .easing(ANIMATION_EASING)
+        .addElement(ionFooter)
+        .afterAddWrite(() => (ionFooter.style.pointerEvents = 'none'))
+        .fromTo('opacity', '1', '0')
+        .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+        .play();
+};

package/dist/tab-bar-searchable/interfaces.d.ts

@@ -0,0 +1,41 @@
+export declare enum TabBarSearchableType {
+    Enter = "enter",
+    Leave = "leave"
+}
+export type TabBarSearchableFunction = (event: Event, type: TabBarSearchableType) => Promise<void>;
+export interface SearchableEventCache {
+    elementSizes: ElementSizes;
+    colorSelected: string;
+}
+export interface ElementSizes {
+    tabBar: {
+        width: number;
+        height: number;
+    };
+    closeButton: {
+        width: number;
+        height: number;
+    };
+    fabButton: {
+        width: number;
+        height: number;
+    };
+    searchContainer: {
+        width: number;
+        height: number;
+    };
+    selectedTabButtonIcon: {
+        width: number;
+        height: number;
+        top: number;
+        left: number;
+    };
+}
+export interface ElementReferences {
+    searchContainer: HTMLElement;
+    closeButtons: HTMLElement;
+    selectedTabButton: HTMLElement;
+    selectedTabButtonIcon: HTMLElement;
+    closeButtonIcon: HTMLElement;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/tab-bar-searchable/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/tab-bar-searchable/interfaces.ts"],"names":[],"mappings":"AAAA,oBAAY,oBAAoB;IAC9B,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,wBAAwB,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,oBAAoB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnG,MAAM,WAAW,oBAAoB;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;CACvB;AAGD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,eAAe,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,qBAAqB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACrF;AAED,MAAM,WAAW,iBAAiB;IAChC,eAAe,EAAE,WAAW,CAAC;IAC7B,YAAY,EAAE,WAAW,CAAC;IAC1B,iBAAiB,EAAE,WAAW,CAAC;IAC/B,qBAAqB,EAAE,WAAW,CAAC;IACnC,eAAe,EAAE,WAAW,CAAC;CAC9B"}

package/dist/tab-bar-searchable/interfaces.js

@@ -0,0 +1,5 @@
+export var TabBarSearchableType;
+(function (TabBarSearchableType) {
+    TabBarSearchableType["Enter"] = "enter";
+    TabBarSearchableType["Leave"] = "leave";
+})(TabBarSearchableType || (TabBarSearchableType = {}));

package/dist/tab-bar-searchable/utils.d.ts

@@ -0,0 +1,12 @@
+import { ElementReferences, ElementSizes } from './interfaces';
+export declare const ANIMATION_DURATION = 400;
+export declare const ANIMATION_DELAY_BASE = 140;
+export declare const ANIMATION_DELAY_CLOSE_BUTTONS = 240;
+export declare const ANIMATION_EASING = "cubic-bezier(0, 1, 0.22, 1)";
+export declare const OPACITY_TRANSITION = "opacity 140ms ease";
+export declare const throwErrorByFailedClickElement: (selector: string) => Error;
+export declare const throwErrorByFailedExistElement: (selector: string) => Error;
+export declare const getElement: (docs: HTMLElement, selector: string) => HTMLElement;
+export declare const getElementReferences: (ionTabBar: HTMLElement, ionFooter: HTMLElement) => ElementReferences;
+export declare const getElementSizes: (ionTabBar: HTMLElement, ionFabButton: HTMLElement, references: ElementReferences) => ElementSizes;
+//# sourceMappingURL=utils.d.ts.map

package/dist/tab-bar-searchable/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/tab-bar-searchable/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE/D,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,6BAA6B,MAAM,CAAC;AACjD,eAAO,MAAM,gBAAgB,gCAAgC,CAAC;AAC9D,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AAEvD,eAAO,MAAM,8BAA8B,GAAI,UAAU,MAAM,KAAG,KAEjE,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,UAAU,MAAM,KAAG,KAEjE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,MAAM,WAAW,EAAE,UAAU,MAAM,KAAG,WAMhE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,WAAW,WAAW,EAAE,WAAW,WAAW,KAAG,iBA0BrF,CAAC;AAKF,eAAO,MAAM,eAAe,GAAI,WAAW,WAAW,EAAE,cAAc,WAAW,EAAE,YAAY,iBAAiB,KAAG,YAmBlH,CAAC"}

package/dist/tab-bar-searchable/utils.js

@@ -0,0 +1,60 @@
+export const ANIMATION_DURATION = 400;
+export const ANIMATION_DELAY_BASE = 140;
+export const ANIMATION_DELAY_CLOSE_BUTTONS = 240;
+export const ANIMATION_EASING = 'cubic-bezier(0, 1, 0.22, 1)';
+export const OPACITY_TRANSITION = 'opacity 140ms ease';
+export const throwErrorByFailedClickElement = (selector) => {
+    return new Error('Expected click element to be inside `' + selector + '`');
+};
+export const throwErrorByFailedExistElement = (selector) => {
+    return new Error('Expected element `' + selector + '` to exist');
+};
+export const getElement = (docs, selector) => {
+    const el = docs.querySelector(selector);
+    if (!el) {
+        throw throwErrorByFailedClickElement(selector);
+    }
+    return el;
+};
+export const getElementReferences = (ionTabBar, ionFooter) => {
+    const searchContainer = getElement(ionFooter, 'ion-searchbar .searchbar-input-container');
+    const closeButtons = getElement(ionFooter, 'ion-buttons[slot=start]');
+    const selectedTabButton = ionTabBar.querySelector('ion-tab-button.tab-selected');
+    const selectedTabButtonIcon = selectedTabButton?.querySelector('ion-icon');
+    const closeButtonIcon = closeButtons.querySelector('ion-icon');
+    if (!selectedTabButton) {
+        throw throwErrorByFailedExistElement('ion-tab-button.tab-selected');
+    }
+    if (!selectedTabButtonIcon) {
+        throw throwErrorByFailedExistElement('ion-tab-button.tab-selected ion-icon');
+    }
+    if (!closeButtonIcon) {
+        throw throwErrorByFailedExistElement('ion-buttons[slot=start] ion-button ion-icon');
+    }
+    return {
+        searchContainer,
+        closeButtons,
+        selectedTabButton,
+        selectedTabButtonIcon,
+        closeButtonIcon,
+    };
+};
+export const getElementSizes = (ionTabBar, ionFabButton, references) => {
+    const tabBarRect = ionTabBar.getBoundingClientRect();
+    const fabButtonRect = ionFabButton.getBoundingClientRect();
+    const closeButtonRect = references.closeButtons.getBoundingClientRect();
+    const searchContainerRect = references.searchContainer.getBoundingClientRect();
+    const selectedTabButtonIconRect = references.selectedTabButtonIcon.getBoundingClientRect();
+    return {
+        tabBar: { width: tabBarRect.width, height: tabBarRect.height },
+        closeButton: { width: closeButtonRect.width, height: closeButtonRect.height },
+        fabButton: { width: fabButtonRect.width, height: fabButtonRect.height },
+        searchContainer: { width: searchContainerRect.width, height: searchContainerRect.height },
+        selectedTabButtonIcon: {
+            width: selectedTabButtonIconRect.width,
+            height: selectedTabButtonIconRect.height,
+            top: selectedTabButtonIconRect.top,
+            left: selectedTabButtonIconRect.left,
+        },
+    };
+};

package/dist/transition/index.d.ts

@@ -0,0 +1,19 @@
+import type { NavOptions } from '@ionic/core';
+import type { Animation } from '@ionic/core';
+export declare const transition: (opts: TransitionOptions) => Promise<TransitionResult>;
+export declare const lifecycle: (el: HTMLElement | undefined, eventName: string) => void;
+export declare const waitForMount: () => Promise<void>;
+export declare const deepReady: (el: any | undefined) => Promise<void>;
+export declare const setPageHidden: (el: HTMLElement, hidden: boolean) => void;
+export declare const getIonPageElement: (element: HTMLElement) => Element;
+export interface TransitionOptions extends NavOptions {
+    progressCallback?: (ani: Animation | undefined) => void;
+    baseEl: any;
+    enteringEl: HTMLElement;
+    leavingEl: HTMLElement | undefined;
+}
+export interface TransitionResult {
+    hasCompleted: boolean;
+    animation?: Animation;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/transition/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,aAAa,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAoB,MAAM,aAAa,CAAC;AAmB/D,eAAO,MAAM,UAAU,GAAI,MAAM,iBAAiB,KAAG,OAAO,CAAC,gBAAgB,CAyB5E,CAAC;AAkKF,eAAO,MAAM,SAAS,GAAI,IAAI,WAAW,GAAG,SAAS,EAAE,WAAW,MAAM,SAQvE,CAAC;AAeF,eAAO,MAAM,YAAY,QAAO,OAAO,CAAC,IAAI,CAE3C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAU,IAAI,GAAG,GAAG,SAAS,KAAG,OAAO,CAAC,IAAI,CAyBjE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,IAAI,WAAW,EAAE,QAAQ,OAAO,SAS7D,CAAC;AA6CF,eAAO,MAAM,iBAAiB,GAAI,SAAS,WAAW,YAWrD,CAAC;AA4BF,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,WAAW,CAAC;IACxB,SAAS,EAAE,WAAW,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}