@rdlabo/ionic-theme-ios26 1.1.1 → 1.2.0

package/dist/popover/utils.js

@@ -1,12 +1,5 @@
 import { getElementRoot, raf } from '../utils';
 import { POPOVER_IOS_BODY_MARGIN } from './animations/ios.enter';
-export const getArrowDimensions = (arrowEl) => {
-    if (!arrowEl) {
-        return { arrowWidth: 0, arrowHeight: 0 };
-    }
-    const { width, height } = arrowEl.getBoundingClientRect();
-    return { arrowWidth: width, arrowHeight: height };
-};
 export const getPopoverDimensions = (size, contentEl, triggerEl) => {
     const contentDimentions = contentEl.getBoundingClientRect();
     const contentHeight = contentDimentions.height;
@@ -170,70 +163,7 @@ const focusItem = (item) => {
         raf(() => button.focus());
     }
 };
-export const isTriggerElement = (el) => el.hasAttribute('data-ion-popover-trigger');
-export const configureKeyboardInteraction = (popoverEl) => {
-    const callback = async (ev) => {
-        const activeElement = document.activeElement;
-        let items = [];
-        const targetTagName = ev.target?.tagName;
-        if (targetTagName !== 'ION-POPOVER' && targetTagName !== 'ION-ITEM') {
-            return;
-        }
-        try {
-            items = Array.from(popoverEl.querySelectorAll('ion-item:not(ion-popover ion-popover *):not([disabled])'));
-        }
-        catch { }
-        switch (ev.key) {
-            case 'ArrowLeft':
-                const parentPopover = await popoverEl.getParentPopover();
-                if (parentPopover) {
-                    popoverEl.dismiss(undefined, undefined, false);
-                }
-                break;
-            case 'ArrowDown':
-                ev.preventDefault();
-                const nextItem = getNextItem(items, activeElement);
-                if (nextItem !== undefined) {
-                    focusItem(nextItem);
-                }
-                break;
-            case 'ArrowUp':
-                ev.preventDefault();
-                const prevItem = getPrevItem(items, activeElement);
-                if (prevItem !== undefined) {
-                    focusItem(prevItem);
-                }
-                break;
-            case 'Home':
-                ev.preventDefault();
-                const firstItem = items[0];
-                if (firstItem !== undefined) {
-                    focusItem(firstItem);
-                }
-                break;
-            case 'End':
-                ev.preventDefault();
-                const lastItem = items[items.length - 1];
-                if (lastItem !== undefined) {
-                    focusItem(lastItem);
-                }
-                break;
-            case 'ArrowRight':
-            case ' ':
-            case 'Enter':
-                if (activeElement && isTriggerElement(activeElement)) {
-                    const rightEvent = new CustomEvent('ionPopoverActivateTrigger');
-                    activeElement.dispatchEvent(rightEvent);
-                }
-                break;
-            default:
-                break;
-        }
-    };
-    popoverEl.addEventListener('keydown', callback);
-    return () => popoverEl.removeEventListener('keydown', callback);
-};
-export const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, triggerEl, event) => {
+export const getPopoverPosition = (isRTL, contentWidth, contentHeight, reference, side, align, defaultPosition, triggerEl, event) => {
     let referenceCoordinates = {
         top: 0,
         left: 0,
@@ -269,13 +199,12 @@ export const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidt
             };
             break;
     }
-    const coordinates = calculatePopoverSide(side, referenceCoordinates, contentWidth, contentHeight, arrowWidth, arrowHeight, isRTL);
+    const coordinates = calculatePopoverSide(side, referenceCoordinates, contentWidth, contentHeight, isRTL);
     const alignedCoordinates = calculatePopoverAlign(align, side, referenceCoordinates, contentWidth, contentHeight);
     const top = coordinates.top + alignedCoordinates.top;
     const left = coordinates.left + alignedCoordinates.left;
-    const { arrowTop, arrowLeft } = calculateArrowPosition(side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL);
     const { originX, originY } = calculatePopoverOrigin(side, align, isRTL);
-    return { top, left, referenceCoordinates, arrowTop, arrowLeft, originX, originY };
+    return { top, left, referenceCoordinates, originX, originY };
 };
 const calculatePopoverOrigin = (side, align, isRTL) => {
     switch (side) {
@@ -313,49 +242,26 @@ const getOriginYAlignment = (align) => {
             return 'bottom';
     }
 };
-const calculateArrowPosition = (side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL) => {
-    const leftPosition = {
-        arrowTop: top + contentHeight / 2 - arrowWidth / 2,
-        arrowLeft: left + contentWidth - arrowWidth / 2,
-    };
-    const rightPosition = { arrowTop: top + contentHeight / 2 - arrowWidth / 2, arrowLeft: left - arrowWidth * 1.5 };
-    switch (side) {
-        case 'top':
-            return { arrowTop: top + contentHeight, arrowLeft: left + contentWidth / 2 - arrowWidth / 2 };
-        case 'bottom':
-            return { arrowTop: top - arrowHeight, arrowLeft: left + contentWidth / 2 - arrowWidth / 2 };
-        case 'left':
-            return leftPosition;
-        case 'right':
-            return rightPosition;
-        case 'start':
-            return isRTL ? rightPosition : leftPosition;
-        case 'end':
-            return isRTL ? leftPosition : rightPosition;
-        default:
-            return { arrowTop: 0, arrowLeft: 0 };
-    }
-};
-const calculatePopoverSide = (side, triggerBoundingBox, contentWidth, contentHeight, arrowWidth, arrowHeight, isRTL) => {
+const calculatePopoverSide = (side, triggerBoundingBox, contentWidth, contentHeight, isRTL) => {
     const sideLeft = {
         top: triggerBoundingBox.top,
-        left: triggerBoundingBox.left - contentWidth - arrowWidth,
+        left: triggerBoundingBox.left - contentWidth,
     };
     const sideRight = {
         top: triggerBoundingBox.top,
-        left: triggerBoundingBox.left + triggerBoundingBox.width + arrowWidth,
+        left: triggerBoundingBox.left + triggerBoundingBox.width,
     };
     switch (side) {
         case 'top':
             return {
-                top: triggerBoundingBox.top - contentHeight - arrowHeight,
+                top: triggerBoundingBox.top - contentHeight,
                 left: triggerBoundingBox.left,
             };
         case 'right':
             return sideRight;
         case 'bottom':
             return {
-                top: triggerBoundingBox.top + triggerBoundingBox.height + arrowHeight,
+                top: triggerBoundingBox.top + triggerBoundingBox.height,
                 left: triggerBoundingBox.left,
             };
         case 'left':
@@ -415,9 +321,7 @@ const calculatePopoverCenterAlign = (side, triggerBoundingBox, contentWidth, con
             };
     }
 };
-export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeAreaMargin, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0, eventElementRect, isReplace = false) => {
-    let arrowTop = coordArrowTop;
-    const arrowLeft = coordArrowLeft;
+export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeAreaMargin, contentOriginX, contentOriginY, triggerCoordinates, eventElementRect, isReplace = false) => {
     const triggerTop = triggerCoordinates ? triggerCoordinates.top + triggerCoordinates.height : bodyHeight / 2 - contentHeight / 2;
     const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
     let left = coordLeft;
@@ -442,12 +346,11 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
     if (compareTop > bodyHeight / 2 && (side === 'top' || side === 'bottom')) {
         if (triggerTop - contentHeight > 0) {
             if (!isReplace) {
-                top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1)) - POPOVER_IOS_BODY_MARGIN;
+                top = Math.max(12, triggerTop - contentHeight - triggerHeight) - POPOVER_IOS_BODY_MARGIN;
             }
             else {
-                top = Math.max(12, triggerTop - contentHeight - (arrowHeight - 1));
+                top = Math.max(12, triggerTop - contentHeight);
             }
-            arrowTop = top + contentHeight;
             originY = 'bottom';
             addPopoverBottomClass = true;
         }
@@ -463,17 +366,6 @@ export const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding
         originY,
         checkSafeAreaLeft,
         checkSafeAreaRight,
-        arrowTop,
-        arrowLeft,
         addPopoverBottomClass,
     };
 };
-export const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
-    if (!ev && !trigger) {
-        return false;
-    }
-    if (side !== 'top' && side !== 'bottom' && didAdjustBounds) {
-        return false;
-    }
-    return true;
-};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sheets-of-glass/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAUjF,eAAO,MAAM,cAAc,GACzB,eAAe,WAAW,EAC1B,eAAe,MAAM,EACrB,mBAAmB,MAAM,EACzB,QAAQ,YAAY,KACnB,gBAAgB,GAAG,SAyLrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sheets-of-glass/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAUjF,eAAO,MAAM,cAAc,GACzB,eAAe,WAAW,EAC1B,eAAe,MAAM,EACrB,mBAAmB,MAAM,EACzB,QAAQ,YAAY,KACnB,gBAAgB,GAAG,SA8LrB,CAAC"}

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

@@ -15,6 +15,7 @@ export const registerEffect = (targetElement, effectTagName, selectedClassName,
     let scaleAnimationPromise;
     let startAnimationPromise;
     let maxVelocity = 0;
+    let wasRealUserClick = false;
     const effectElement = cloneElement(effectTagName);
     const onPointerDown = () => {
         clearActivated();
@@ -22,6 +23,7 @@ export const registerEffect = (targetElement, effectTagName, selectedClassName,
         createAnimationGesture();
     };
     const onPointerUp = (event) => {
+        wasRealUserClick = true;
         clearActivatedTimer = setTimeout(async () => {
             await onEndGesture();
             gesture.destroy();
@@ -49,12 +51,15 @@ export const registerEffect = (targetElement, effectTagName, selectedClassName,
         if (!currentTouchedElement) {
             return;
         }
-        currentTouchedElement.click();
+        if (!wasRealUserClick) {
+            currentTouchedElement.click();
+        }
         currentTouchedElement?.classList.remove('ion-activated');
         currentTouchedElement = undefined;
         effectElement.style.display = 'none';
         maxVelocity = 0;
         targetElement.classList.remove(ANIMATED_NAME);
+        wasRealUserClick = false;
     };
     const onStartGesture = (detail) => {
         currentTouchedElement = detail.event.target.closest(effectTagName) || undefined;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "iOS26 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/index.ts

@@ -3,6 +3,7 @@ import { registerEffect } from './sheets-of-glass';
 export * from './sheets-of-glass/interfaces';
 export { iosEnterAnimation as popoverEnterAnimation } from './popover/animations/ios.enter';
 export { iosLeaveAnimation as popoverLeaveAnimation } from './popover/animations/ios.leave';
+export * from './tab-bar-searchable';
 
 export const registerTabBarEffect = (targetElement: HTMLElement): registeredEffect | undefined => {
   return registerEffect(targetElement, 'ion-tab-button', 'tab-selected', {