voyager-ionic-core 8.0.0-beta.3 → 8.0.0

package/dist/collection/utils/animation/animation.js

@@ -2,8 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { win } from "../browser";
-import { raf } from "../helpers";
-import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyframeName, generateKeyframeRules, processKeyframes, removeStyleProperty, setStyleProperty, } from "./animation-utils";
+import { addClassToArray, setStyleProperty } from "./animation-utils";
 export const createAnimation = (animationId) => {
     let _delay;
     let _duration;
@@ -30,7 +29,6 @@ export const createAnimation = (animationId) => {
     let willComplete = true;
     let finished = false;
     let shouldCalculateNumAnimations = true;
-    let keyframeName;
     let ani;
     let paused = false;
     const id = animationId;
@@ -47,10 +45,16 @@ export const createAnimation = (animationId) => {
     const webAnimations = [];
     const supportsAnimationEffect = typeof AnimationEffect === 'function' ||
         (win !== undefined && typeof win.AnimationEffect === 'function');
+    /**
+     * This is a feature detection for Web Animations.
+     *
+     * Certain environments such as emulated browser environments for testing,
+     * do not support Web Animations. As a result, we need to check for support
+     * and provide a fallback to test certain functionality related to Web Animations.
+     */
     const supportsWebAnimations = typeof Element === 'function' &&
         typeof Element.prototype.animate === 'function' &&
         supportsAnimationEffect;
-    const ANIMATION_END_FALLBACK_PADDING_MS = 100;
     const getWebAnimations = () => {
         return webAnimations;
     };
@@ -138,21 +142,6 @@ export const createAnimation = (animationId) => {
             });
             webAnimations.length = 0;
         }
-        else {
-            const elementsArray = elements.slice();
-            raf(() => {
-                elementsArray.forEach((element) => {
-                    removeStyleProperty(element, 'animation-name');
-                    removeStyleProperty(element, 'animation-duration');
-                    removeStyleProperty(element, 'animation-timing-function');
-                    removeStyleProperty(element, 'animation-iteration-count');
-                    removeStyleProperty(element, 'animation-delay');
-                    removeStyleProperty(element, 'animation-play-state');
-                    removeStyleProperty(element, 'animation-fill-mode');
-                    removeStyleProperty(element, 'animation-direction');
-                });
-            });
-        }
     };
     /**
      * Removes the animation's stylesheets
@@ -410,9 +399,6 @@ export const createAnimation = (animationId) => {
                 }
             });
         }
-        else {
-            initializeCSSAnimation();
-        }
     };
     /**
      * Run all "before" animation hooks.
@@ -498,32 +484,6 @@ export const createAnimation = (animationId) => {
             }
         }
     };
-    const initializeCSSAnimation = (toggleAnimationName = true) => {
-        cleanUpStyleSheets();
-        const processedKeyframes = processKeyframes(_keyframes);
-        elements.forEach((element) => {
-            if (processedKeyframes.length > 0) {
-                const keyframeRules = generateKeyframeRules(processedKeyframes);
-                keyframeName = animationId !== undefined ? animationId : generateKeyframeName(keyframeRules);
-                const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
-                stylesheets.push(stylesheet);
-                setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
-                setStyleProperty(element, 'animation-timing-function', getEasing());
-                setStyleProperty(element, 'animation-delay', `${getDelay()}ms`);
-                setStyleProperty(element, 'animation-fill-mode', getFill());
-                setStyleProperty(element, 'animation-direction', getDirection());
-                const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
-                setStyleProperty(element, 'animation-iteration-count', iterationsCount);
-                setStyleProperty(element, 'animation-play-state', 'paused');
-                if (toggleAnimationName) {
-                    setStyleProperty(element, 'animation-name', `${stylesheet.id}-alt`);
-                }
-                raf(() => {
-                    setStyleProperty(element, 'animation-name', stylesheet.id || null);
-                });
-            }
-        });
-    };
     const initializeWebAnimation = () => {
         elements.forEach((element) => {
             const animation = element.animate(_keyframes, {
@@ -544,15 +504,12 @@ export const createAnimation = (animationId) => {
             };
         }
     };
-    const initializeAnimation = (toggleAnimationName = true) => {
+    const initializeAnimation = () => {
         beforeAnimation();
         if (_keyframes.length > 0) {
             if (supportsWebAnimations) {
                 initializeWebAnimation();
             }
-            else {
-                initializeCSSAnimation(toggleAnimationName);
-            }
         }
         initialized = true;
     };
@@ -565,15 +522,6 @@ export const createAnimation = (animationId) => {
                 animation.pause();
             });
         }
-        else {
-            const animationDuration = `-${getDuration() * step}ms`;
-            elements.forEach((element) => {
-                if (_keyframes.length > 0) {
-                    setStyleProperty(element, 'animation-delay', animationDuration);
-                    setStyleProperty(element, 'animation-play-state', 'paused');
-                }
-            });
-        }
     };
     const updateWebAnimation = (step) => {
         webAnimations.forEach((animation) => {
@@ -590,26 +538,6 @@ export const createAnimation = (animationId) => {
             setAnimationStep(step);
         }
     };
-    const updateCSSAnimation = (toggleAnimationName = true, step) => {
-        raf(() => {
-            elements.forEach((element) => {
-                setStyleProperty(element, 'animation-name', keyframeName || null);
-                setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
-                setStyleProperty(element, 'animation-timing-function', getEasing());
-                setStyleProperty(element, 'animation-delay', step !== undefined ? `-${step * getDuration()}ms` : `${getDelay()}ms`);
-                setStyleProperty(element, 'animation-fill-mode', getFill() || null);
-                setStyleProperty(element, 'animation-direction', getDirection() || null);
-                const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
-                setStyleProperty(element, 'animation-iteration-count', iterationsCount);
-                if (toggleAnimationName) {
-                    setStyleProperty(element, 'animation-name', `${keyframeName}-alt`);
-                }
-                raf(() => {
-                    setStyleProperty(element, 'animation-name', keyframeName || null);
-                });
-            });
-        });
-    };
     const update = (deep = false, toggleAnimationName = true, step) => {
         if (deep) {
             childAnimations.forEach((animation) => {
@@ -619,9 +547,6 @@ export const createAnimation = (animationId) => {
         if (supportsWebAnimations) {
             updateWebAnimation(step);
         }
-        else {
-            updateCSSAnimation(toggleAnimationName, step);
-        }
         return ani;
     };
     const progressStart = (forceLinearEasing = false, step) => {
@@ -704,10 +629,6 @@ export const createAnimation = (animationId) => {
         pauseAnimation();
         return ani;
     };
-    const onAnimationEndFallback = () => {
-        cssAnimationsTimerFallback = undefined;
-        animationFinish();
-    };
     const clearCSSAnimationsTimeout = () => {
         if (cssAnimationsTimerFallback) {
             clearTimeout(cssAnimationsTimerFallback);
@@ -715,56 +636,7 @@ export const createAnimation = (animationId) => {
     };
     const playCSSAnimations = () => {
         clearCSSAnimationsTimeout();
-        raf(() => {
-            elements.forEach((element) => {
-                if (_keyframes.length > 0) {
-                    setStyleProperty(element, 'animation-play-state', 'running');
-                }
-            });
-        });
-        if (_keyframes.length === 0 || elements.length === 0) {
-            animationFinish();
-        }
-        else {
-            /**
-             * This is a catchall in the event that a CSS Animation did not finish.
-             * The Web Animations API has mechanisms in place for preventing this.
-             * CSS Animations will not fire an `animationend` event
-             * for elements with `display: none`. The Web Animations API
-             * accounts for this, but using raw CSS Animations requires
-             * this workaround.
-             */
-            const animationDelay = getDelay() || 0;
-            const animationDuration = getDuration() || 0;
-            const animationIterations = getIterations() || 1;
-            // No need to set a timeout when animation has infinite iterations
-            if (isFinite(animationIterations)) {
-                cssAnimationsTimerFallback = setTimeout(onAnimationEndFallback, animationDelay + animationDuration * animationIterations + ANIMATION_END_FALLBACK_PADDING_MS);
-            }
-            animationEnd(elements[0], () => {
-                clearCSSAnimationsTimeout();
-                /**
-                 * Ensure that clean up
-                 * is always done a frame
-                 * before the onFinish handlers
-                 * are fired. Otherwise, there
-                 * may be flickering if a new
-                 * animation is started on the same
-                 * element too quickly
-                 */
-                raf(() => {
-                    clearCSSAnimationPlayState();
-                    raf(animationFinish);
-                });
-            });
-        }
-    };
-    const clearCSSAnimationPlayState = () => {
-        elements.forEach((element) => {
-            removeStyleProperty(element, 'animation-duration');
-            removeStyleProperty(element, 'animation-delay');
-            removeStyleProperty(element, 'animation-play-state');
-        });
+        animationFinish();
     };
     const playWebAnimations = () => {
         webAnimations.forEach((animation) => {
@@ -779,9 +651,6 @@ export const createAnimation = (animationId) => {
             setAnimationStep(0);
             updateWebAnimation();
         }
-        else {
-            updateCSSAnimation();
-        }
     };
     const play = (opts) => {
         return new Promise((resolve) => {

package/dist/collection/utils/animation/test/animation.spec.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { createAnimation } from "../animation";
-import { processKeyframes } from "../animation-utils";
 import { getTimeGivenProgression } from "../cubic-bezier";
 describe('Animation Class', () => {
     describe('progressEnd callbacks', () => {
@@ -48,84 +47,6 @@ describe('Animation Class', () => {
             animation.play();
             expect(animation.isRunning()).toEqual(false);
         });
-        it('should be running', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            expect(animation.isRunning()).toEqual(true);
-        });
-        it('should not be running after finishing the animation', async () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            await animation.play();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should not be running after calling pause', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            expect(animation.isRunning()).toEqual(true);
-            animation.pause();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should not be running when doing progress steps', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            animation.progressStart();
-            expect(animation.isRunning()).toEqual(false);
-        });
-        it('should be running after calling progressEnd', () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            animation.play();
-            animation.progressStart();
-            animation.progressEnd(1, 0);
-            expect(animation.isRunning()).toEqual(true);
-        });
-        it('should not be running after playing to beginning', async () => {
-            const el = document.createElement('div');
-            animation.addElement(el);
-            animation.keyframes([
-                { transform: 'scale(1)', opacity: 1, offset: 0 },
-                { transform: 'scale(0)', opacity: 0, offset: 1 },
-            ]);
-            animation.duration(250);
-            await animation.play();
-            animation.progressStart();
-            animation.progressEnd(0, 0);
-            await new Promise((resolve) => {
-                animation.onFinish(() => {
-                    expect(animation.isRunning()).toEqual(false);
-                    resolve();
-                });
-            });
-        });
     });
     describe('addElement()', () => {
         let animation;
@@ -183,16 +104,6 @@ describe('Animation Class', () => {
             ]);
             expect(animation.getKeyframes().length).toEqual(3);
         });
-        it('should convert properties for CSS Animations', () => {
-            const processedKeyframes = processKeyframes([
-                { borderRadius: '0px', easing: 'ease-in', offset: 0 },
-                { borderRadius: '4px', easing: 'ease-out', offset: 1 },
-            ]);
-            expect(processedKeyframes).toEqual([
-                { 'border-radius': '0px', 'animation-timing-function': 'ease-in', offset: 0 },
-                { 'border-radius': '4px', 'animation-timing-function': 'ease-out', offset: 1 },
-            ]);
-        });
         it('should set the from keyframe properly', () => {
             animation.from('opacity', 0).from('background', 'red').from('color', 'purple');
             const keyframes = animation.getKeyframes();

package/dist/collection/utils/animation/test/animationbuilder/animation.e2e.js

@@ -12,10 +12,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.goto('/src/utils/animation/test/animationbuilder', config);
             await testNavigation(page);
         });
-        test('ios-transition css', async ({ page }) => {
-            await page.goto('/src/utils/animation/test/animationbuilder?ionic:_forceCSSAnimations=true', config);
-            await testNavigation(page);
-        });
     });
 });
 const testNavigation = async (page) => {

package/dist/collection/utils/animation/test/basic/animation.e2e.js

@@ -8,10 +8,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/basic', config);
             await testPage(page);
         });
-        test(`should resolve using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/basic?ionic:_forceCSSAnimations=true', config);
-            await testPage(page);
-        });
     });
 });
 const testPage = async (page) => {

package/dist/collection/utils/animation/test/display/animation.e2e.js

@@ -9,10 +9,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/display', config);
             await testDisplay(page);
         });
-        test(`should resolve using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/display?ionic:_forceCSSAnimations=true', config);
-            await testDisplay(page);
-        });
     });
 });
 const testDisplay = async (page) => {

package/dist/collection/utils/animation/test/hooks/animation.e2e.js

@@ -9,10 +9,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/hooks', config);
             await testHooks(page);
         });
-        test(`should fire hooks using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/hooks?ionic:_forceCSSAnimations=true', config);
-            await testHooks(page);
-        });
     });
 });
 const testHooks = async (page) => {

package/dist/collection/utils/animation/test/multiple/animation.e2e.js

@@ -9,13 +9,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.goto('/src/utils/animation/test/multiple', config);
             await testMultiple(page);
         });
-        /**
-         * CSS animations will occasionally resolve out of order, so we skip for now
-         */
-        test.skip(`should resolve grouped animations using css animations`, async ({ page }) => {
-            await page.goto('/src/utils/animation/test/multiple?ionic:_forceCSSAnimations=true', config);
-            await testMultiple(page);
-        });
     });
 });
 const testMultiple = async (page) => {

package/dist/collection/utils/native/haptic.js

@@ -46,12 +46,6 @@ export var NotificationType;
 })(NotificationType || (NotificationType = {}));
 const HapticEngine = {
     getEngine() {
-        const tapticEngine = window.TapticEngine;
-        if (tapticEngine) {
-            // Cordova
-            // TODO FW-4707 - Remove this in Ionic 8
-            return tapticEngine;
-        }
         const capacitor = getCapacitor();
         if (capacitor === null || capacitor === void 0 ? void 0 : capacitor.isPluginAvailable('Haptics')) {
             // Capacitor
@@ -80,85 +74,43 @@ const HapticEngine = {
         }
         return true;
     },
-    isCordova() {
-        return window.TapticEngine !== undefined;
-    },
-    isCapacitor() {
-        return getCapacitor() !== undefined;
-    },
     impact(options) {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        /**
-         * To provide backwards compatibility with Cordova apps,
-         * we convert the style to lowercase.
-         *
-         * TODO: FW-4707 - Remove this in Ionic 8
-         */
-        const style = this.isCapacitor() ? options.style : options.style.toLowerCase();
-        engine.impact({ style });
+        engine.impact({ style: options.style });
     },
     notification(options) {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        /**
-         * To provide backwards compatibility with Cordova apps,
-         * we convert the style to lowercase.
-         *
-         * TODO: FW-4707 - Remove this in Ionic 8
-         */
-        const type = this.isCapacitor() ? options.type : options.type.toLowerCase();
-        engine.notification({ type });
+        engine.notification({ type: options.type });
     },
     selection() {
-        /**
-         * To provide backwards compatibility with Cordova apps,
-         * we convert the style to lowercase.
-         *
-         * TODO: FW-4707 - Remove this in Ionic 8
-         */
-        const style = this.isCapacitor() ? ImpactStyle.Light : 'light';
-        this.impact({ style });
+        this.impact({ style: ImpactStyle.Light });
     },
     selectionStart() {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        if (this.isCapacitor()) {
-            engine.selectionStart();
-        }
-        else {
-            engine.gestureSelectionStart();
-        }
+        engine.selectionStart();
     },
     selectionChanged() {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        if (this.isCapacitor()) {
-            engine.selectionChanged();
-        }
-        else {
-            engine.gestureSelectionChanged();
-        }
+        engine.selectionChanged();
     },
     selectionEnd() {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        if (this.isCapacitor()) {
-            engine.selectionEnd();
-        }
-        else {
-            engine.gestureSelectionEnd();
-        }
+        engine.selectionEnd();
     },
 };
 /**

package/dist/collection/utils/tap-click/index.js

@@ -2,43 +2,17 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { doc } from "../browser/index";
-import { now, pointerCoord } from "../helpers";
+import { pointerCoord } from "../helpers";
 export const startTapClick = (config) => {
     if (doc === undefined) {
         return;
     }
-    let lastTouch = -MOUSE_WAIT * 10;
     let lastActivated = 0;
     let activatableEle;
     let activeRipple;
     let activeDefer;
     const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
     const clearDefers = new WeakMap();
-    // Touch Events
-    const onTouchStart = (ev) => {
-        lastTouch = now(ev);
-        pointerDown(ev);
-    };
-    const onTouchEnd = (ev) => {
-        lastTouch = now(ev);
-        pointerUp(ev);
-    };
-    const onMouseDown = (ev) => {
-        // Ignore right clicks
-        if (ev.button === 2) {
-            return;
-        }
-        const t = now(ev) - MOUSE_WAIT;
-        if (lastTouch < t) {
-            pointerDown(ev);
-        }
-    };
-    const onMouseUp = (ev) => {
-        const t = now(ev) - MOUSE_WAIT;
-        if (lastTouch < t) {
-            pointerUp(ev);
-        }
-    };
     const cancelActive = () => {
         if (activeDefer)
             clearTimeout(activeDefer);
@@ -49,7 +23,8 @@ export const startTapClick = (config) => {
         }
     };
     const pointerDown = (ev) => {
-        if (activatableEle) {
+        // Ignore right clicks
+        if (activatableEle || ev.button === 2) {
             return;
         }
         setActivatedElement(getActivatableTarget(ev), ev);
@@ -133,9 +108,8 @@ export const startTapClick = (config) => {
         }
     };
     doc.addEventListener('ionGestureCaptured', cancelActive);
-    doc.addEventListener('touchstart', onTouchStart, true);
-    doc.addEventListener('touchcancel', onTouchEnd, true);
-    doc.addEventListener('touchend', onTouchEnd, true);
+    doc.addEventListener('pointerdown', pointerDown, true);
+    doc.addEventListener('pointerup', pointerUp, true);
     /**
      * Tap click effects such as the ripple effect should
      * not happen when scrolling. For example, if a user scrolls
@@ -149,8 +123,6 @@ export const startTapClick = (config) => {
      * ion-content's scroll events.
      */
     doc.addEventListener('pointercancel', cancelActive, true);
-    doc.addEventListener('mousedown', onMouseDown, true);
-    doc.addEventListener('mouseup', onMouseUp, true);
 };
 // TODO(FW-2832): type
 const getActivatableTarget = (ev) => {
@@ -190,4 +162,3 @@ const getRippleEffect = (el) => {
 const ACTIVATED = 'ion-activated';
 const ADD_ACTIVATED_DEFERS = 100;
 const CLEAR_STATE_DEFERS = 150;
-const MOUSE_WAIT = 2500;