@rdlabo/ionic-theme-ios26 1.0.6 → 1.1.1

package/dist/popover/animations/ios.leave.js

@@ -0,0 +1,60 @@
+import { createAnimation } from '@ionic/core';
+import { getElementRoot } from '../../utils';
+export const iosLeaveAnimation = (baseEl) => {
+    const root = getElementRoot(baseEl);
+    const contentEl = root.querySelector('.popover-content');
+    const arrowEl = root.querySelector('.popover-arrow');
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const contentAnimation = createAnimation();
+    const targetAnimation = createAnimation();
+    const doc = baseEl.ownerDocument;
+    const replaceElement = doc.querySelector('.ios26-replace-element');
+    if (replaceElement) {
+        const ratio = contentEl.getBoundingClientRect().width / contentEl.getBoundingClientRect().height;
+        const scale = ratio > 1 ? `${Math.min(1.2, 1.05 * ratio)}, 1.05` : `1.05, ${Math.min(1.2, 1.05 * ratio)}`;
+        targetAnimation
+            .addElement(replaceElement)
+            .delay(100)
+            .duration(300)
+            .afterRemoveClass('ios26-replace-element')
+            .fromTo('transform', `scale(${scale})`, 'scale(1)')
+            .fromTo('opacity', 0, 0.9);
+    }
+    backdropAnimation.addElement(root.querySelector('ion-backdrop')).fromTo('opacity', 'var(--backdrop-opacity)', 0);
+    contentAnimation
+        .duration(400)
+        .easing('ease')
+        .addElement(root.querySelector('.popover-arrow'))
+        .addElement(root.querySelector('.popover-content'))
+        .fromTo('opacity', 0.99, 0);
+    const popoverContentDataset = root.querySelector('.popover-content').dataset['transformOrigin'];
+    if (popoverContentDataset) {
+        contentAnimation.beforeStyles({ 'transform-origin': popoverContentDataset }).afterAddRead(() => {
+            root.querySelector('.popover-content').dataset['transformOrigin'] = '';
+        });
+        if (replaceElement) {
+            contentAnimation.fromTo('transform', 'scale(1)', 'scale(0.55)');
+        }
+        else {
+            contentAnimation.fromTo('transform', 'scale(1)', 'scale(0)');
+        }
+    }
+    return baseAnimation
+        .easing('ease')
+        .afterAddWrite(() => {
+        baseEl.style.removeProperty('--width');
+        baseEl.classList.remove('popover-bottom');
+        contentEl.style.removeProperty('top');
+        contentEl.style.removeProperty('left');
+        contentEl.style.removeProperty('bottom');
+        contentEl.style.removeProperty('transform-origin');
+        if (arrowEl) {
+            arrowEl.style.removeProperty('top');
+            arrowEl.style.removeProperty('left');
+            arrowEl.style.removeProperty('display');
+        }
+    })
+        .duration(300)
+        .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
+};

package/dist/popover/popover-interface.d.ts

@@ -0,0 +1,38 @@
+import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode, OverlayInterface } from '@ionic/core';
+export interface PopoverInterface extends OverlayInterface {
+    present: (event?: MouseEvent | TouchEvent | PointerEvent) => Promise<void>;
+}
+export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
+    component: T;
+    componentProps?: ComponentProps<T>;
+    showBackdrop?: boolean;
+    backdropDismiss?: boolean;
+    translucent?: boolean;
+    cssClass?: string | string[];
+    event?: Event;
+    delegate?: FrameworkDelegate;
+    animated?: boolean;
+    focusTrap?: boolean;
+    mode?: Mode;
+    keyboardClose?: boolean;
+    id?: string;
+    htmlAttributes?: {
+        [key: string]: any;
+    };
+    enterAnimation?: AnimationBuilder;
+    leaveAnimation?: AnimationBuilder;
+    size?: PopoverSize;
+    dismissOnSelect?: boolean;
+    reference?: PositionReference;
+    side?: PositionSide;
+    alignment?: PositionAlign;
+    arrow?: boolean;
+    trigger?: string;
+    triggerAction?: string;
+}
+export type PopoverSize = 'cover' | 'auto';
+export type TriggerAction = 'click' | 'hover' | 'context-menu';
+export type PositionReference = 'trigger' | 'event';
+export type PositionSide = 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
+export type PositionAlign = 'start' | 'center' | 'end';
+//# sourceMappingURL=popover-interface.d.ts.map

package/dist/popover/popover-interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-interface.d.ts","sourceRoot":"","sources":["../../src/popover/popover-interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,YAAY,EAAE,iBAAiB,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE7H,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5E;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY;IACnE,SAAS,EAAE,CAAC,CAAC;IACb,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAExC,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAElC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,CAAC;AAE/D,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,OAAO,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AACjF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC"}

package/dist/popover/popover-interface.js

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

package/dist/popover/utils.d.ts

@@ -0,0 +1,48 @@
+import type { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from './popover-interface';
+export interface ReferenceCoordinates {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+interface PopoverPosition {
+    top: number;
+    left: number;
+    referenceCoordinates?: ReferenceCoordinates;
+    arrowTop?: number;
+    arrowLeft?: number;
+    originX: string;
+    originY: string;
+}
+export interface PopoverStyles {
+    top: number;
+    left: number;
+    bottom?: number;
+    originX: string;
+    originY: string;
+    checkSafeAreaLeft: boolean;
+    checkSafeAreaRight: boolean;
+    arrowTop: number;
+    arrowLeft: number;
+    addPopoverBottomClass: boolean;
+}
+export declare const getArrowDimensions: (arrowEl: HTMLElement | null) => {
+    arrowWidth: number;
+    arrowHeight: number;
+};
+export declare const getPopoverDimensions: (size: PopoverSize, contentEl: HTMLElement, triggerEl?: HTMLElement) => {
+    contentWidth: number;
+    contentHeight: number;
+};
+export declare const configureDismissInteraction: (triggerEl: HTMLElement, triggerAction: TriggerAction, popoverEl: HTMLIonPopoverElement, parentPopoverEl: HTMLIonPopoverElement) => () => void;
+export declare const configureTriggerInteraction: (triggerEl: HTMLElement, triggerAction: TriggerAction, popoverEl: HTMLIonPopoverElement) => () => void;
+export declare const getIndexOfItem: (items: HTMLIonItemElement[], item: HTMLElement | null) => number;
+export declare const getNextItem: (items: HTMLIonItemElement[], currentItem: HTMLElement | null) => HTMLIonItemElement;
+export declare const getPrevItem: (items: HTMLIonItemElement[], currentItem: HTMLElement | null) => HTMLIonItemElement;
+export declare const isTriggerElement: (el: HTMLElement) => boolean;
+export declare const configureKeyboardInteraction: (popoverEl: HTMLIonPopoverElement) => () => void;
+export declare const getPopoverPosition: (isRTL: boolean, contentWidth: number, contentHeight: number, arrowWidth: number, arrowHeight: number, reference: PositionReference, side: PositionSide, align: PositionAlign, defaultPosition: PopoverPosition, triggerEl?: HTMLElement, event?: MouseEvent | CustomEvent) => PopoverPosition;
+export declare const calculateWindowAdjustment: (side: PositionSide, coordTop: number, coordLeft: number, bodyPadding: number, bodyWidth: number, bodyHeight: number, contentWidth: number, contentHeight: number, safeAreaMargin: number, contentOriginX: string, contentOriginY: string, triggerCoordinates?: ReferenceCoordinates, coordArrowTop?: number, coordArrowLeft?: number, arrowHeight?: number, eventElementRect?: DOMRect, isReplace?: boolean) => PopoverStyles;
+export declare const shouldShowArrow: (side: PositionSide, didAdjustBounds?: boolean, ev?: Event, trigger?: HTMLElement) => boolean;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/popover/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/popover/utils.ts"],"names":[],"mappings":"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"}

package/dist/popover/utils.js

@@ -0,0 +1,479 @@
+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;
+    let contentWidth = contentDimentions.width;
+    if (size === 'cover' && triggerEl) {
+        const triggerDimensions = triggerEl.getBoundingClientRect();
+        contentWidth = triggerDimensions.width;
+    }
+    return {
+        contentWidth,
+        contentHeight,
+    };
+};
+export const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
+    let dismissCallbacks = [];
+    const root = getElementRoot(parentPopoverEl);
+    const parentContentEl = root.querySelector('.popover-content');
+    switch (triggerAction) {
+        case 'hover':
+            dismissCallbacks = [
+                {
+                    eventName: 'mouseenter',
+                    callback: (ev) => {
+                        const element = document.elementFromPoint(ev.clientX, ev.clientY);
+                        if (element === triggerEl) {
+                            return;
+                        }
+                        popoverEl.dismiss(undefined, undefined, false);
+                    },
+                },
+            ];
+            break;
+        case 'context-menu':
+        case 'click':
+        default:
+            dismissCallbacks = [
+                {
+                    eventName: 'click',
+                    callback: (ev) => {
+                        const target = ev.target;
+                        const closestTrigger = target.closest('[data-ion-popover-trigger]');
+                        if (closestTrigger === triggerEl) {
+                            ev.stopPropagation();
+                            return;
+                        }
+                        popoverEl.dismiss(undefined, undefined, false);
+                    },
+                },
+            ];
+            break;
+    }
+    dismissCallbacks.forEach(({ eventName, callback }) => parentContentEl.addEventListener(eventName, callback));
+    return () => {
+        dismissCallbacks.forEach(({ eventName, callback }) => parentContentEl.removeEventListener(eventName, callback));
+    };
+};
+export const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
+    let triggerCallbacks = [];
+    switch (triggerAction) {
+        case 'hover':
+            let hoverTimeout;
+            triggerCallbacks = [
+                {
+                    eventName: 'mouseenter',
+                    callback: async (ev) => {
+                        ev.stopPropagation();
+                        if (hoverTimeout) {
+                            clearTimeout(hoverTimeout);
+                        }
+                        hoverTimeout = setTimeout(() => {
+                            raf(() => {
+                                popoverEl.presentFromTrigger(ev);
+                                hoverTimeout = undefined;
+                            });
+                        }, 100);
+                    },
+                },
+                {
+                    eventName: 'mouseleave',
+                    callback: (ev) => {
+                        if (hoverTimeout) {
+                            clearTimeout(hoverTimeout);
+                        }
+                        const target = ev.relatedTarget;
+                        if (!target) {
+                            return;
+                        }
+                        if (target.closest('ion-popover') !== popoverEl) {
+                            popoverEl.dismiss(undefined, undefined, false);
+                        }
+                    },
+                },
+                {
+                    eventName: 'click',
+                    callback: (ev) => ev.stopPropagation(),
+                },
+                {
+                    eventName: 'ionPopoverActivateTrigger',
+                    callback: (ev) => popoverEl.presentFromTrigger(ev, true),
+                },
+            ];
+            break;
+        case 'context-menu':
+            triggerCallbacks = [
+                {
+                    eventName: 'contextmenu',
+                    callback: (ev) => {
+                        ev.preventDefault();
+                        popoverEl.presentFromTrigger(ev);
+                    },
+                },
+                {
+                    eventName: 'click',
+                    callback: (ev) => ev.stopPropagation(),
+                },
+                {
+                    eventName: 'ionPopoverActivateTrigger',
+                    callback: (ev) => popoverEl.presentFromTrigger(ev, true),
+                },
+            ];
+            break;
+        case 'click':
+        default:
+            triggerCallbacks = [
+                {
+                    eventName: 'click',
+                    callback: (ev) => popoverEl.presentFromTrigger(ev),
+                },
+                {
+                    eventName: 'ionPopoverActivateTrigger',
+                    callback: (ev) => popoverEl.presentFromTrigger(ev, true),
+                },
+            ];
+            break;
+    }
+    triggerCallbacks.forEach(({ eventName, callback }) => triggerEl.addEventListener(eventName, callback));
+    triggerEl.setAttribute('data-ion-popover-trigger', 'true');
+    return () => {
+        triggerCallbacks.forEach(({ eventName, callback }) => triggerEl.removeEventListener(eventName, callback));
+        triggerEl.removeAttribute('data-ion-popover-trigger');
+    };
+};
+export const getIndexOfItem = (items, item) => {
+    if (!item || item.tagName !== 'ION-ITEM') {
+        return -1;
+    }
+    return items.findIndex((el) => el === item);
+};
+export const getNextItem = (items, currentItem) => {
+    const currentItemIndex = getIndexOfItem(items, currentItem);
+    return items[currentItemIndex + 1];
+};
+export const getPrevItem = (items, currentItem) => {
+    const currentItemIndex = getIndexOfItem(items, currentItem);
+    return items[currentItemIndex - 1];
+};
+const focusItem = (item) => {
+    const root = getElementRoot(item);
+    const button = root.querySelector('button');
+    if (button) {
+        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) => {
+    let referenceCoordinates = {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+    };
+    switch (reference) {
+        case 'event':
+            if (!event) {
+                return defaultPosition;
+            }
+            const mouseEv = event;
+            referenceCoordinates = {
+                top: mouseEv.clientY,
+                left: mouseEv.clientX,
+                width: 1,
+                height: 1,
+            };
+            break;
+        case 'trigger':
+        default:
+            const customEv = event;
+            const actualTriggerEl = (triggerEl || customEv?.detail?.ionShadowTarget || customEv?.target);
+            if (!actualTriggerEl) {
+                return defaultPosition;
+            }
+            const triggerBoundingBox = actualTriggerEl.getBoundingClientRect();
+            referenceCoordinates = {
+                top: triggerBoundingBox.top,
+                left: triggerBoundingBox.left,
+                width: triggerBoundingBox.width,
+                height: triggerBoundingBox.height,
+            };
+            break;
+    }
+    const coordinates = calculatePopoverSide(side, referenceCoordinates, contentWidth, contentHeight, arrowWidth, arrowHeight, 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 };
+};
+const calculatePopoverOrigin = (side, align, isRTL) => {
+    switch (side) {
+        case 'top':
+            return { originX: getOriginXAlignment(align), originY: 'bottom' };
+        case 'bottom':
+            return { originX: getOriginXAlignment(align), originY: 'top' };
+        case 'left':
+            return { originX: 'right', originY: getOriginYAlignment(align) };
+        case 'right':
+            return { originX: 'left', originY: getOriginYAlignment(align) };
+        case 'start':
+            return { originX: isRTL ? 'left' : 'right', originY: getOriginYAlignment(align) };
+        case 'end':
+            return { originX: isRTL ? 'right' : 'left', originY: getOriginYAlignment(align) };
+    }
+};
+const getOriginXAlignment = (align) => {
+    switch (align) {
+        case 'start':
+            return 'left';
+        case 'center':
+            return 'center';
+        case 'end':
+            return 'right';
+    }
+};
+const getOriginYAlignment = (align) => {
+    switch (align) {
+        case 'start':
+            return 'top';
+        case 'center':
+            return 'center';
+        case 'end':
+            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 sideLeft = {
+        top: triggerBoundingBox.top,
+        left: triggerBoundingBox.left - contentWidth - arrowWidth,
+    };
+    const sideRight = {
+        top: triggerBoundingBox.top,
+        left: triggerBoundingBox.left + triggerBoundingBox.width + arrowWidth,
+    };
+    switch (side) {
+        case 'top':
+            return {
+                top: triggerBoundingBox.top - contentHeight - arrowHeight,
+                left: triggerBoundingBox.left,
+            };
+        case 'right':
+            return sideRight;
+        case 'bottom':
+            return {
+                top: triggerBoundingBox.top + triggerBoundingBox.height + arrowHeight,
+                left: triggerBoundingBox.left,
+            };
+        case 'left':
+            return sideLeft;
+        case 'start':
+            return isRTL ? sideRight : sideLeft;
+        case 'end':
+            return isRTL ? sideLeft : sideRight;
+    }
+};
+const calculatePopoverAlign = (align, side, triggerBoundingBox, contentWidth, contentHeight) => {
+    switch (align) {
+        case 'center':
+            return calculatePopoverCenterAlign(side, triggerBoundingBox, contentWidth, contentHeight);
+        case 'end':
+            return calculatePopoverEndAlign(side, triggerBoundingBox, contentWidth, contentHeight);
+        case 'start':
+        default:
+            return { top: 0, left: 0 };
+    }
+};
+const calculatePopoverEndAlign = (side, triggerBoundingBox, contentWidth, contentHeight) => {
+    switch (side) {
+        case 'start':
+        case 'end':
+        case 'left':
+        case 'right':
+            return {
+                top: -(contentHeight - triggerBoundingBox.height),
+                left: 0,
+            };
+        case 'top':
+        case 'bottom':
+        default:
+            return {
+                top: 0,
+                left: -(contentWidth - triggerBoundingBox.width),
+            };
+    }
+};
+const calculatePopoverCenterAlign = (side, triggerBoundingBox, contentWidth, contentHeight) => {
+    switch (side) {
+        case 'start':
+        case 'end':
+        case 'left':
+        case 'right':
+            return {
+                top: -(contentHeight / 2 - triggerBoundingBox.height / 2),
+                left: 0,
+            };
+        case 'top':
+        case 'bottom':
+        default:
+            return {
+                top: 0,
+                left: -(contentWidth / 2 - triggerBoundingBox.width / 2),
+            };
+    }
+};
+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;
+    const triggerTop = triggerCoordinates ? triggerCoordinates.top + triggerCoordinates.height : bodyHeight / 2 - contentHeight / 2;
+    const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
+    let left = coordLeft;
+    let top = !isReplace ? coordTop + POPOVER_IOS_BODY_MARGIN : coordTop - triggerHeight;
+    let bottom;
+    let originX = contentOriginX;
+    let originY = contentOriginY;
+    let checkSafeAreaLeft = false;
+    let checkSafeAreaRight = false;
+    let addPopoverBottomClass = false;
+    if (left < bodyPadding + safeAreaMargin) {
+        left = !eventElementRect ? bodyPadding : eventElementRect.left;
+        checkSafeAreaLeft = true;
+        originX = 'left';
+    }
+    else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
+        checkSafeAreaRight = true;
+        left = !eventElementRect ? bodyWidth - contentWidth - bodyPadding : eventElementRect.right - contentWidth;
+        originX = 'right';
+    }
+    const compareTop = triggerCoordinates ? triggerCoordinates.top + triggerCoordinates.height / 2 : bodyHeight / 2 - contentHeight / 2;
+    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;
+            }
+            else {
+                top = Math.max(12, triggerTop - contentHeight - (arrowHeight - 1));
+            }
+            arrowTop = top + contentHeight;
+            originY = 'bottom';
+            addPopoverBottomClass = true;
+        }
+        else {
+            bottom = bodyPadding;
+        }
+    }
+    return {
+        top,
+        left,
+        bottom,
+        originX,
+        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/animations.d.ts

@@ -0,0 +1,8 @@
+import { Animation, AnimationKeyFrames } from '@ionic/core/dist/types/utils/animation/animation-interface';
+import { AnimationPosition, EffectScales } from './interfaces';
+import { GestureDetail } from '@ionic/core';
+export declare const getScaleAnimation: (effectElement: Element) => Animation;
+export declare const createPreMoveAnimation: (effectElement: Element, tabSelectedElement: Element, currentTouchedElement: Element, animationPosition: AnimationPosition) => Animation;
+export declare const createMoveAnimation: (effectElement: Element, detail: GestureDetail, tabSelectedElement: Element, animationPosition: AnimationPosition) => Animation;
+export declare const getMoveAnimationKeyframe: (type: "moveRight" | "moveLeft" | "slowly", scales: EffectScales) => AnimationKeyFrames;
+//# sourceMappingURL=animations.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../src/sheets-of-glass/animations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,4DAA4D,CAAC;AAC3G,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAmB,aAAa,EAAE,MAAM,aAAa,CAAC;AAG7D,eAAO,MAAM,iBAAiB,GAAI,eAAe,OAAO,KAAG,SAE1D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,eAAe,OAAO,EACtB,oBAAoB,OAAO,EAC3B,uBAAuB,OAAO,EAC9B,mBAAmB,iBAAiB,KACnC,SA0BF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,eAAe,OAAO,EACtB,QAAQ,aAAa,EACrB,oBAAoB,OAAO,EAC3B,mBAAmB,iBAAiB,KACnC,SAiBF,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,MAAM,WAAW,GAAG,UAAU,GAAG,QAAQ,EAAE,QAAQ,YAAY,KAAG,kBAqD1G,CAAC"}