@pod-os/elements 0.7.1-92705ee.0 → 0.7.1-a71f01c.0

package/dist/{esm/animation-fe6ed422.js → components/animation.js}

@@ -1,13 +1,18 @@
-import { r as raf } from './helpers-44e3bd9f.js';
+import { r as raf } from './helpers.js';
+import { w as win } from './index10.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 let animationPrefix;
 /**
  * Web Animations requires hyphenated CSS properties
  * to be written in camelCase when animating
  */
 const processKeyframes = (keyframes) => {
-  keyframes.forEach(keyframe => {
+  keyframes.forEach((keyframe) => {
     for (const key in keyframe) {
+      // eslint-disable-next-line no-prototype-builtins
       if (keyframe.hasOwnProperty(key)) {
         const value = keyframe[key];
         if (key === 'easing') {
@@ -34,7 +39,7 @@ const getAnimationPrefix = (el) => {
   if (animationPrefix === undefined) {
     const supportsUnprefixed = el.style.animationName !== undefined;
     const supportsWebkitPrefix = el.style.webkitAnimationName !== undefined;
-    animationPrefix = (!supportsUnprefixed && supportsWebkitPrefix) ? '-webkit-' : '';
+    animationPrefix = !supportsUnprefixed && supportsWebkitPrefix ? '-webkit-' : '';
   }
   return animationPrefix;
 };
@@ -71,37 +76,42 @@ const animationEnd = (el, callback) => {
   return unregister;
 };
 const generateKeyframeRules = (keyframes = []) => {
-  return keyframes.map(keyframe => {
+  return keyframes
+    .map((keyframe) => {
     const offset = keyframe.offset;
     const frameString = [];
     for (const property in keyframe) {
+      // eslint-disable-next-line no-prototype-builtins
       if (keyframe.hasOwnProperty(property) && property !== 'offset') {
         frameString.push(`${property}: ${keyframe[property]};`);
       }
     }
     return `${offset * 100}% { ${frameString.join(' ')} }`;
-  }).join(' ');
+  })
+    .join(' ');
 };
 const keyframeIds = [];
 const generateKeyframeName = (keyframeRules) => {
   let index = keyframeIds.indexOf(keyframeRules);
   if (index < 0) {
-    index = (keyframeIds.push(keyframeRules) - 1);
+    index = keyframeIds.push(keyframeRules) - 1;
   }
   return `ion-animation-${index}`;
 };
 const getStyleContainer = (element) => {
-  const rootNode = element.getRootNode();
-  return (rootNode.head || rootNode);
+  // getRootNode is not always available in SSR environments.
+  const rootNode = element.getRootNode !== undefined ? element.getRootNode() : element;
+  return rootNode.head || rootNode;
 };
 const createKeyframeStylesheet = (keyframeName, keyframeRules, element) => {
+  var _a;
   const styleContainer = getStyleContainer(element);
   const keyframePrefix = getAnimationPrefix(element);
   const existingStylesheet = styleContainer.querySelector('#' + keyframeName);
   if (existingStylesheet) {
     return existingStylesheet;
   }
-  const stylesheet = (element.ownerDocument || document).createElement('style');
+  const stylesheet = ((_a = element.ownerDocument) !== null && _a !== void 0 ? _a : document).createElement('style');
   stylesheet.id = keyframeName;
   stylesheet.textContent = `@${keyframePrefix}keyframes ${keyframeName} { ${keyframeRules} } @${keyframePrefix}keyframes ${keyframeName}-alt { ${keyframeRules} }`;
   styleContainer.appendChild(stylesheet);
@@ -109,12 +119,15 @@ const createKeyframeStylesheet = (keyframeName, keyframeRules, element) => {
 };
 const addClassToArray = (classes = [], className) => {
   if (className !== undefined) {
-    const classNameToAppend = (Array.isArray(className)) ? className : [className];
+    const classNameToAppend = Array.isArray(className) ? className : [className];
     return [...classes, ...classNameToAppend];
   }
   return classes;
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const createAnimation = (animationId) => {
   let _delay;
   let _duration;
@@ -143,6 +156,7 @@ const createAnimation = (animationId) => {
   let shouldCalculateNumAnimations = true;
   let keyframeName;
   let ani;
+  let paused = false;
   const id = animationId;
   const onFinishCallbacks = [];
   const onFinishOneTimeCallbacks = [];
@@ -154,14 +168,17 @@ const createAnimation = (animationId) => {
   const _afterAddReadFunctions = [];
   const _afterAddWriteFunctions = [];
   const webAnimations = [];
-  const supportsAnimationEffect = (typeof AnimationEffect === 'function' || typeof window.AnimationEffect === 'function');
-  const supportsWebAnimations = (typeof Element === 'function') && (typeof Element.prototype.animate === 'function') && supportsAnimationEffect;
+  const supportsAnimationEffect = typeof AnimationEffect === 'function' ||
+    (win !== undefined && typeof win.AnimationEffect === 'function');
+  const supportsWebAnimations = typeof Element === 'function' &&
+    typeof Element.prototype.animate === 'function' &&
+    supportsAnimationEffect;
   const ANIMATION_END_FALLBACK_PADDING_MS = 100;
   const getWebAnimations = () => {
     return webAnimations;
   };
   const destroy = (clearStyleSheets) => {
-    childAnimations.forEach(childAnimation => {
+    childAnimations.forEach((childAnimation) => {
       childAnimation.destroy(clearStyleSheets);
     });
     cleanUp(clearStyleSheets);
@@ -195,9 +212,13 @@ const createAnimation = (animationId) => {
     numAnimationsRunning = 0;
     finished = false;
     willComplete = true;
+    paused = false;
+  };
+  const isRunning = () => {
+    return numAnimationsRunning !== 0 && !paused;
   };
   const onFinish = (callback, opts) => {
-    const callbacks = (opts && opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
+    const callbacks = (opts === null || opts === void 0 ? void 0 : opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
     callbacks.push({ c: callback, o: opts });
     return ani;
   };
@@ -213,7 +234,7 @@ const createAnimation = (animationId) => {
    */
   const cleanUpElements = () => {
     if (supportsWebAnimations) {
-      webAnimations.forEach(animation => {
+      webAnimations.forEach((animation) => {
         animation.cancel();
       });
       webAnimations.length = 0;
@@ -221,7 +242,7 @@ const createAnimation = (animationId) => {
     else {
       const elementsArray = elements.slice();
       raf(() => {
-        elementsArray.forEach(element => {
+        elementsArray.forEach((element) => {
           removeStyleProperty(element, 'animation-name');
           removeStyleProperty(element, 'animation-duration');
           removeStyleProperty(element, 'animation-timing-function');
@@ -239,13 +260,13 @@ const createAnimation = (animationId) => {
    * from the DOM.
    */
   const cleanUpStyleSheets = () => {
-    stylesheets.forEach(stylesheet => {
+    stylesheets.forEach((stylesheet) => {
       /**
        * When sharing stylesheets, it's possible
        * for another animation to have already
        * cleaned up a particular stylesheet
        */
-      if (stylesheet && stylesheet.parentNode) {
+      if (stylesheet === null || stylesheet === void 0 ? void 0 : stylesheet.parentNode) {
         stylesheet.parentNode.removeChild(stylesheet);
       }
     });
@@ -457,26 +478,47 @@ const createAnimation = (animationId) => {
     return ani;
   };
   const keyframes = (keyframeValues) => {
+    const different = _keyframes !== keyframeValues;
     _keyframes = keyframeValues;
+    if (different) {
+      updateKeyframes(_keyframes);
+    }
     return ani;
   };
+  const updateKeyframes = (keyframeValues) => {
+    if (supportsWebAnimations) {
+      getWebAnimations().forEach((animation) => {
+        if (animation.effect.setKeyframes) {
+          animation.effect.setKeyframes(keyframeValues);
+        }
+        else {
+          const newEffect = new KeyframeEffect(animation.effect.target, keyframeValues, animation.effect.getTiming());
+          animation.effect = newEffect;
+        }
+      });
+    }
+    else {
+      initializeCSSAnimation();
+    }
+  };
   /**
    * Run all "before" animation hooks.
    */
   const beforeAnimation = () => {
     // Runs all before read callbacks
-    _beforeAddReadFunctions.forEach(callback => callback());
+    _beforeAddReadFunctions.forEach((callback) => callback());
     // Runs all before write callbacks
-    _beforeAddWriteFunctions.forEach(callback => callback());
+    _beforeAddWriteFunctions.forEach((callback) => callback());
     // Updates styles and classes before animation runs
     const addClasses = beforeAddClasses;
     const removeClasses = beforeRemoveClasses;
     const styles = beforeStylesValue;
-    elements.forEach(el => {
+    elements.forEach((el) => {
       const elementClassList = el.classList;
-      addClasses.forEach(c => elementClassList.add(c));
-      removeClasses.forEach(c => elementClassList.remove(c));
+      addClasses.forEach((c) => elementClassList.add(c));
+      removeClasses.forEach((c) => elementClassList.remove(c));
       for (const property in styles) {
+        // eslint-disable-next-line no-prototype-builtins
         if (styles.hasOwnProperty(property)) {
           setStyleProperty(el, property, styles[property]);
         }
@@ -489,28 +531,29 @@ const createAnimation = (animationId) => {
   const afterAnimation = () => {
     clearCSSAnimationsTimeout();
     // Runs all after read callbacks
-    _afterAddReadFunctions.forEach(callback => callback());
+    _afterAddReadFunctions.forEach((callback) => callback());
     // Runs all after write callbacks
-    _afterAddWriteFunctions.forEach(callback => callback());
+    _afterAddWriteFunctions.forEach((callback) => callback());
     // Updates styles and classes before animation ends
     const currentStep = willComplete ? 1 : 0;
     const addClasses = afterAddClasses;
     const removeClasses = afterRemoveClasses;
     const styles = afterStylesValue;
-    elements.forEach(el => {
+    elements.forEach((el) => {
       const elementClassList = el.classList;
-      addClasses.forEach(c => elementClassList.add(c));
-      removeClasses.forEach(c => elementClassList.remove(c));
+      addClasses.forEach((c) => elementClassList.add(c));
+      removeClasses.forEach((c) => elementClassList.remove(c));
       for (const property in styles) {
+        // eslint-disable-next-line no-prototype-builtins
         if (styles.hasOwnProperty(property)) {
           setStyleProperty(el, property, styles[property]);
         }
       }
     });
-    onFinishCallbacks.forEach(onFinishCallback => {
+    onFinishCallbacks.forEach((onFinishCallback) => {
       return onFinishCallback.c(currentStep, ani);
     });
-    onFinishOneTimeCallbacks.forEach(onFinishCallback => {
+    onFinishOneTimeCallbacks.forEach((onFinishCallback) => {
       return onFinishCallback.c(currentStep, ani);
     });
     onFinishOneTimeCallbacks.length = 0;
@@ -535,10 +578,10 @@ const createAnimation = (animationId) => {
   const initializeCSSAnimation = (toggleAnimationName = true) => {
     cleanUpStyleSheets();
     const processedKeyframes = processKeyframes(_keyframes);
-    elements.forEach(element => {
+    elements.forEach((element) => {
       if (processedKeyframes.length > 0) {
         const keyframeRules = generateKeyframeRules(processedKeyframes);
-        keyframeName = (animationId !== undefined) ? animationId : generateKeyframeName(keyframeRules);
+        keyframeName = animationId !== undefined ? animationId : generateKeyframeName(keyframeRules);
         const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
         stylesheets.push(stylesheet);
         setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
@@ -546,9 +589,7 @@ const createAnimation = (animationId) => {
         setStyleProperty(element, 'animation-delay', `${getDelay()}ms`);
         setStyleProperty(element, 'animation-fill-mode', getFill());
         setStyleProperty(element, 'animation-direction', getDirection());
-        const iterationsCount = (getIterations() === Infinity)
-          ? 'infinite'
-          : getIterations().toString();
+        const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
         setStyleProperty(element, 'animation-iteration-count', iterationsCount);
         setStyleProperty(element, 'animation-play-state', 'paused');
         if (toggleAnimationName) {
@@ -561,7 +602,7 @@ const createAnimation = (animationId) => {
     });
   };
   const initializeWebAnimation = () => {
-    elements.forEach(element => {
+    elements.forEach((element) => {
       const animation = element.animate(_keyframes, {
         id,
         delay: getDelay(),
@@ -569,7 +610,7 @@ const createAnimation = (animationId) => {
         easing: getEasing(),
         iterations: getIterations(),
         fill: getFill(),
-        direction: getDirection()
+        direction: getDirection(),
       });
       animation.pause();
       webAnimations.push(animation);
@@ -595,14 +636,14 @@ const createAnimation = (animationId) => {
   const setAnimationStep = (step) => {
     step = Math.min(Math.max(step, 0), 0.9999);
     if (supportsWebAnimations) {
-      webAnimations.forEach(animation => {
-        animation.currentTime = animation.effect.getComputedTiming().delay + (getDuration() * step);
+      webAnimations.forEach((animation) => {
+        animation.currentTime = animation.effect.getComputedTiming().delay + getDuration() * step;
         animation.pause();
       });
     }
     else {
       const animationDuration = `-${getDuration() * step}ms`;
-      elements.forEach(element => {
+      elements.forEach((element) => {
         if (_keyframes.length > 0) {
           setStyleProperty(element, 'animation-delay', animationDuration);
           setStyleProperty(element, 'animation-play-state', 'paused');
@@ -611,14 +652,14 @@ const createAnimation = (animationId) => {
     }
   };
   const updateWebAnimation = (step) => {
-    webAnimations.forEach(animation => {
+    webAnimations.forEach((animation) => {
       animation.effect.updateTiming({
         delay: getDelay(),
         duration: getDuration(),
         easing: getEasing(),
         iterations: getIterations(),
         fill: getFill(),
-        direction: getDirection()
+        direction: getDirection(),
       });
     });
     if (step !== undefined) {
@@ -627,16 +668,14 @@ const createAnimation = (animationId) => {
   };
   const updateCSSAnimation = (toggleAnimationName = true, step) => {
     raf(() => {
-      elements.forEach(element => {
+      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-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();
+        const iterationsCount = getIterations() === Infinity ? 'infinite' : getIterations().toString();
         setStyleProperty(element, 'animation-iteration-count', iterationsCount);
         if (toggleAnimationName) {
           setStyleProperty(element, 'animation-name', `${keyframeName}-alt`);
@@ -649,7 +688,7 @@ const createAnimation = (animationId) => {
   };
   const update = (deep = false, toggleAnimationName = true, step) => {
     if (deep) {
-      childAnimations.forEach(animation => {
+      childAnimations.forEach((animation) => {
         animation.update(deep, toggleAnimationName, step);
       });
     }
@@ -662,7 +701,7 @@ const createAnimation = (animationId) => {
     return ani;
   };
   const progressStart = (forceLinearEasing = false, step) => {
-    childAnimations.forEach(animation => {
+    childAnimations.forEach((animation) => {
       animation.progressStart(forceLinearEasing, step);
     });
     pauseAnimation();
@@ -670,13 +709,11 @@ const createAnimation = (animationId) => {
     if (!initialized) {
       initializeAnimation();
     }
-    else {
-      update(false, true, step);
-    }
+    update(false, true, step);
     return ani;
   };
   const progressStep = (step) => {
-    childAnimations.forEach(animation => {
+    childAnimations.forEach((animation) => {
       animation.progressStep(step);
     });
     setAnimationStep(step);
@@ -684,17 +721,16 @@ const createAnimation = (animationId) => {
   };
   const progressEnd = (playTo, step, dur) => {
     shouldForceLinearEasing = false;
-    childAnimations.forEach(animation => {
+    childAnimations.forEach((animation) => {
       animation.progressEnd(playTo, step, dur);
     });
     if (dur !== undefined) {
       forceDurationValue = dur;
     }
     finished = false;
-    // tslint:disable-next-line: strict-boolean-conditions
     willComplete = true;
     if (playTo === 0) {
-      forceDirectionValue = (getDirection() === 'reverse') ? 'normal' : 'reverse';
+      forceDirectionValue = getDirection() === 'reverse' ? 'normal' : 'reverse';
       if (forceDirectionValue === 'reverse') {
         willComplete = false;
       }
@@ -703,7 +739,7 @@ const createAnimation = (animationId) => {
         setAnimationStep(1 - step);
       }
       else {
-        forceDelayValue = ((1 - step) * getDuration()) * -1;
+        forceDelayValue = (1 - step) * getDuration() * -1;
         update(false, false);
       }
     }
@@ -713,7 +749,7 @@ const createAnimation = (animationId) => {
         setAnimationStep(step);
       }
       else {
-        forceDelayValue = (step * getDuration()) * -1;
+        forceDelayValue = step * getDuration() * -1;
         update(false, false);
       }
     }
@@ -723,7 +759,7 @@ const createAnimation = (animationId) => {
         forceDirectionValue = undefined;
         forceDelayValue = undefined;
       }, {
-        oneTimeCallback: true
+        oneTimeCallback: true,
       });
       if (!parentAnimation) {
         play();
@@ -734,19 +770,20 @@ const createAnimation = (animationId) => {
   const pauseAnimation = () => {
     if (initialized) {
       if (supportsWebAnimations) {
-        webAnimations.forEach(animation => {
+        webAnimations.forEach((animation) => {
           animation.pause();
         });
       }
       else {
-        elements.forEach(element => {
+        elements.forEach((element) => {
           setStyleProperty(element, 'animation-play-state', 'paused');
         });
       }
+      paused = true;
     }
   };
   const pause = () => {
-    childAnimations.forEach(animation => {
+    childAnimations.forEach((animation) => {
       animation.pause();
     });
     pauseAnimation();
@@ -764,7 +801,7 @@ const createAnimation = (animationId) => {
   const playCSSAnimations = () => {
     clearCSSAnimationsTimeout();
     raf(() => {
-      elements.forEach(element => {
+      elements.forEach((element) => {
         if (_keyframes.length > 0) {
           setStyleProperty(element, 'animation-play-state', 'running');
         }
@@ -787,7 +824,7 @@ const createAnimation = (animationId) => {
       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);
+        cssAnimationsTimerFallback = setTimeout(onAnimationEndFallback, animationDelay + animationDuration * animationIterations + ANIMATION_END_FALLBACK_PADDING_MS);
       }
       animationEnd(elements[0], () => {
         clearCSSAnimationsTimeout();
@@ -799,8 +836,6 @@ const createAnimation = (animationId) => {
          * may be flickering if a new
          * animation is started on the same
          * element too quickly
-         *
-         * TODO: Is there a cleaner way to do this?
          */
         raf(() => {
           clearCSSAnimationPlayState();
@@ -810,14 +845,14 @@ const createAnimation = (animationId) => {
     }
   };
   const clearCSSAnimationPlayState = () => {
-    elements.forEach(element => {
+    elements.forEach((element) => {
       removeStyleProperty(element, 'animation-duration');
       removeStyleProperty(element, 'animation-delay');
       removeStyleProperty(element, 'animation-play-state');
     });
   };
   const playWebAnimations = () => {
-    webAnimations.forEach(animation => {
+    webAnimations.forEach((animation) => {
       animation.play();
     });
     if (_keyframes.length === 0 || elements.length === 0) {
@@ -834,10 +869,10 @@ const createAnimation = (animationId) => {
     }
   };
   const play = (opts) => {
-    return new Promise(resolve => {
-      if (opts && opts.sync) {
+    return new Promise((resolve) => {
+      if (opts === null || opts === void 0 ? void 0 : opts.sync) {
         shouldForceSyncPlayback = true;
-        onFinish(() => shouldForceSyncPlayback = false, { oneTimeCallback: true });
+        onFinish(() => (shouldForceSyncPlayback = false), { oneTimeCallback: true });
       }
       if (!initialized) {
         initializeAnimation();
@@ -851,7 +886,7 @@ const createAnimation = (animationId) => {
         shouldCalculateNumAnimations = false;
       }
       onFinish(() => resolve(), { oneTimeCallback: true });
-      childAnimations.forEach(animation => {
+      childAnimations.forEach((animation) => {
         animation.play();
       });
       if (supportsWebAnimations) {
@@ -860,10 +895,11 @@ const createAnimation = (animationId) => {
       else {
         playCSSAnimations();
       }
+      paused = false;
     });
   };
   const stop = () => {
-    childAnimations.forEach(animation => {
+    childAnimations.forEach((animation) => {
       animation.stop();
     });
     if (initialized) {
@@ -878,10 +914,7 @@ const createAnimation = (animationId) => {
       firstFrame[property] = value;
     }
     else {
-      _keyframes = [
-        { offset: 0, [property]: value },
-        ..._keyframes
-      ];
+      _keyframes = [{ offset: 0, [property]: value }, ..._keyframes];
     }
     return ani;
   };
@@ -891,17 +924,14 @@ const createAnimation = (animationId) => {
       lastFrame[property] = value;
     }
     else {
-      _keyframes = [
-        ..._keyframes,
-        { offset: 1, [property]: value }
-      ];
+      _keyframes = [..._keyframes, { offset: 1, [property]: value }];
     }
     return ani;
   };
   const fromTo = (property, fromValue, toValue) => {
     return from(property, fromValue).to(property, toValue);
   };
-  return ani = {
+  return (ani = {
     parentAnimation,
     elements,
     childAnimations,
@@ -946,10 +976,11 @@ const createAnimation = (animationId) => {
     beforeRemoveClass,
     beforeAddClass,
     onFinish,
+    isRunning,
     progressStart,
     progressStep,
-    progressEnd
-  };
+    progressEnd,
+  });
 };
 
 export { createAnimation as c };