@sparkle-learning/core 0.0.57 → 0.0.59

package/dist/sparkle-core/animation-676a644d.js

@@ -1,984 +0,0 @@
-import { r as raf } from './helpers-f11f0674.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) => {
-    for (const key in keyframe) {
-      // eslint-disable-next-line no-prototype-builtins
-      if (keyframe.hasOwnProperty(key)) {
-        const value = keyframe[key];
-        if (key === 'easing') {
-          const newKey = 'animation-timing-function';
-          keyframe[newKey] = value;
-          delete keyframe[key];
-        }
-        else {
-          const newKey = convertCamelCaseToHypen(key);
-          if (newKey !== key) {
-            keyframe[newKey] = value;
-            delete keyframe[key];
-          }
-        }
-      }
-    }
-  });
-  return keyframes;
-};
-const convertCamelCaseToHypen = (str) => {
-  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-};
-const getAnimationPrefix = (el) => {
-  if (animationPrefix === undefined) {
-    const supportsUnprefixed = el.style.animationName !== undefined;
-    const supportsWebkitPrefix = el.style.webkitAnimationName !== undefined;
-    animationPrefix = !supportsUnprefixed && supportsWebkitPrefix ? '-webkit-' : '';
-  }
-  return animationPrefix;
-};
-const setStyleProperty = (element, propertyName, value) => {
-  const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
-  element.style.setProperty(prefix + propertyName, value);
-};
-const removeStyleProperty = (element, propertyName) => {
-  const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
-  element.style.removeProperty(prefix + propertyName);
-};
-const animationEnd = (el, callback) => {
-  let unRegTrans;
-  const opts = { passive: true };
-  const unregister = () => {
-    if (unRegTrans) {
-      unRegTrans();
-    }
-  };
-  const onTransitionEnd = (ev) => {
-    if (el === ev.target) {
-      unregister();
-      callback(ev);
-    }
-  };
-  if (el) {
-    el.addEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-    el.addEventListener('animationend', onTransitionEnd, opts);
-    unRegTrans = () => {
-      el.removeEventListener('webkitAnimationEnd', onTransitionEnd, opts);
-      el.removeEventListener('animationend', onTransitionEnd, opts);
-    };
-  }
-  return unregister;
-};
-const generateKeyframeRules = (keyframes = []) => {
-  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(' ');
-};
-const keyframeIds = [];
-const generateKeyframeName = (keyframeRules) => {
-  let index = keyframeIds.indexOf(keyframeRules);
-  if (index < 0) {
-    index = keyframeIds.push(keyframeRules) - 1;
-  }
-  return `ion-animation-${index}`;
-};
-const getStyleContainer = (element) => {
-  const rootNode = element.getRootNode();
-  return rootNode.head || rootNode;
-};
-const createKeyframeStylesheet = (keyframeName, keyframeRules, element) => {
-  const styleContainer = getStyleContainer(element);
-  const keyframePrefix = getAnimationPrefix(element);
-  const existingStylesheet = styleContainer.querySelector('#' + keyframeName);
-  if (existingStylesheet) {
-    return existingStylesheet;
-  }
-  const stylesheet = (element.ownerDocument || document).createElement('style');
-  stylesheet.id = keyframeName;
-  stylesheet.textContent = `@${keyframePrefix}keyframes ${keyframeName} { ${keyframeRules} } @${keyframePrefix}keyframes ${keyframeName}-alt { ${keyframeRules} }`;
-  styleContainer.appendChild(stylesheet);
-  return stylesheet;
-};
-const addClassToArray = (classes = [], className) => {
-  if (className !== undefined) {
-    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;
-  let _easing;
-  let _iterations;
-  let _fill;
-  let _direction;
-  let _keyframes = [];
-  let beforeAddClasses = [];
-  let beforeRemoveClasses = [];
-  let initialized = false;
-  let parentAnimation;
-  let beforeStylesValue = {};
-  let afterAddClasses = [];
-  let afterRemoveClasses = [];
-  let afterStylesValue = {};
-  let numAnimationsRunning = 0;
-  let shouldForceLinearEasing = false;
-  let shouldForceSyncPlayback = false;
-  let cssAnimationsTimerFallback;
-  let forceDirectionValue;
-  let forceDurationValue;
-  let forceDelayValue;
-  let willComplete = true;
-  let finished = false;
-  let shouldCalculateNumAnimations = true;
-  let keyframeName;
-  let ani;
-  let paused = false;
-  const id = animationId;
-  const onFinishCallbacks = [];
-  const onFinishOneTimeCallbacks = [];
-  const elements = [];
-  const childAnimations = [];
-  const stylesheets = [];
-  const _beforeAddReadFunctions = [];
-  const _beforeAddWriteFunctions = [];
-  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 ANIMATION_END_FALLBACK_PADDING_MS = 100;
-  const getWebAnimations = () => {
-    return webAnimations;
-  };
-  const destroy = (clearStyleSheets) => {
-    childAnimations.forEach((childAnimation) => {
-      childAnimation.destroy(clearStyleSheets);
-    });
-    cleanUp(clearStyleSheets);
-    elements.length = 0;
-    childAnimations.length = 0;
-    _keyframes.length = 0;
-    clearOnFinish();
-    initialized = false;
-    shouldCalculateNumAnimations = true;
-    return ani;
-  };
-  /**
-   * Cancels any Web Animations, removes
-   * any animation properties from the
-   * animation's elements, and removes the
-   * animation's stylesheets from the DOM.
-   */
-  const cleanUp = (clearStyleSheets) => {
-    cleanUpElements();
-    if (clearStyleSheets) {
-      cleanUpStyleSheets();
-    }
-  };
-  const resetFlags = () => {
-    shouldForceLinearEasing = false;
-    shouldForceSyncPlayback = false;
-    shouldCalculateNumAnimations = true;
-    forceDirectionValue = undefined;
-    forceDurationValue = undefined;
-    forceDelayValue = undefined;
-    numAnimationsRunning = 0;
-    finished = false;
-    willComplete = true;
-    paused = false;
-  };
-  const isRunning = () => {
-    return numAnimationsRunning !== 0 && !paused;
-  };
-  const onFinish = (callback, opts) => {
-    const callbacks = (opts === null || opts === void 0 ? void 0 : opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
-    callbacks.push({ c: callback, o: opts });
-    return ani;
-  };
-  const clearOnFinish = () => {
-    onFinishCallbacks.length = 0;
-    onFinishOneTimeCallbacks.length = 0;
-    return ani;
-  };
-  /**
-   * Cancels any Web Animations and removes
-   * any animation properties from the
-   * the animation's elements.
-   */
-  const cleanUpElements = () => {
-    if (supportsWebAnimations) {
-      webAnimations.forEach((animation) => {
-        animation.cancel();
-      });
-      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
-   * from the DOM.
-   */
-  const cleanUpStyleSheets = () => {
-    stylesheets.forEach((stylesheet) => {
-      /**
-       * When sharing stylesheets, it's possible
-       * for another animation to have already
-       * cleaned up a particular stylesheet
-       */
-      if (stylesheet === null || stylesheet === void 0 ? void 0 : stylesheet.parentNode) {
-        stylesheet.parentNode.removeChild(stylesheet);
-      }
-    });
-    stylesheets.length = 0;
-  };
-  const beforeAddRead = (readFn) => {
-    _beforeAddReadFunctions.push(readFn);
-    return ani;
-  };
-  const beforeAddWrite = (writeFn) => {
-    _beforeAddWriteFunctions.push(writeFn);
-    return ani;
-  };
-  const afterAddRead = (readFn) => {
-    _afterAddReadFunctions.push(readFn);
-    return ani;
-  };
-  const afterAddWrite = (writeFn) => {
-    _afterAddWriteFunctions.push(writeFn);
-    return ani;
-  };
-  const beforeAddClass = (className) => {
-    beforeAddClasses = addClassToArray(beforeAddClasses, className);
-    return ani;
-  };
-  const beforeRemoveClass = (className) => {
-    beforeRemoveClasses = addClassToArray(beforeRemoveClasses, className);
-    return ani;
-  };
-  /**
-   * Set CSS inline styles to the animation's
-   * elements before the animation begins.
-   */
-  const beforeStyles = (styles = {}) => {
-    beforeStylesValue = styles;
-    return ani;
-  };
-  /**
-   * Clear CSS inline styles from the animation's
-   * elements before the animation begins.
-   */
-  const beforeClearStyles = (propertyNames = []) => {
-    for (const property of propertyNames) {
-      beforeStylesValue[property] = '';
-    }
-    return ani;
-  };
-  const afterAddClass = (className) => {
-    afterAddClasses = addClassToArray(afterAddClasses, className);
-    return ani;
-  };
-  const afterRemoveClass = (className) => {
-    afterRemoveClasses = addClassToArray(afterRemoveClasses, className);
-    return ani;
-  };
-  const afterStyles = (styles = {}) => {
-    afterStylesValue = styles;
-    return ani;
-  };
-  const afterClearStyles = (propertyNames = []) => {
-    for (const property of propertyNames) {
-      afterStylesValue[property] = '';
-    }
-    return ani;
-  };
-  const getFill = () => {
-    if (_fill !== undefined) {
-      return _fill;
-    }
-    if (parentAnimation) {
-      return parentAnimation.getFill();
-    }
-    return 'both';
-  };
-  const getDirection = () => {
-    if (forceDirectionValue !== undefined) {
-      return forceDirectionValue;
-    }
-    if (_direction !== undefined) {
-      return _direction;
-    }
-    if (parentAnimation) {
-      return parentAnimation.getDirection();
-    }
-    return 'normal';
-  };
-  const getEasing = () => {
-    if (shouldForceLinearEasing) {
-      return 'linear';
-    }
-    if (_easing !== undefined) {
-      return _easing;
-    }
-    if (parentAnimation) {
-      return parentAnimation.getEasing();
-    }
-    return 'linear';
-  };
-  const getDuration = () => {
-    if (shouldForceSyncPlayback) {
-      return 0;
-    }
-    if (forceDurationValue !== undefined) {
-      return forceDurationValue;
-    }
-    if (_duration !== undefined) {
-      return _duration;
-    }
-    if (parentAnimation) {
-      return parentAnimation.getDuration();
-    }
-    return 0;
-  };
-  const getIterations = () => {
-    if (_iterations !== undefined) {
-      return _iterations;
-    }
-    if (parentAnimation) {
-      return parentAnimation.getIterations();
-    }
-    return 1;
-  };
-  const getDelay = () => {
-    if (forceDelayValue !== undefined) {
-      return forceDelayValue;
-    }
-    if (_delay !== undefined) {
-      return _delay;
-    }
-    if (parentAnimation) {
-      return parentAnimation.getDelay();
-    }
-    return 0;
-  };
-  const getKeyframes = () => {
-    return _keyframes;
-  };
-  const direction = (animationDirection) => {
-    _direction = animationDirection;
-    update(true);
-    return ani;
-  };
-  const fill = (animationFill) => {
-    _fill = animationFill;
-    update(true);
-    return ani;
-  };
-  const delay = (animationDelay) => {
-    _delay = animationDelay;
-    update(true);
-    return ani;
-  };
-  const easing = (animationEasing) => {
-    _easing = animationEasing;
-    update(true);
-    return ani;
-  };
-  const duration = (animationDuration) => {
-    /**
-     * CSS Animation Durations of 0ms work fine on Chrome
-     * but do not run on Safari, so force it to 1ms to
-     * get it to run on both platforms.
-     */
-    if (!supportsWebAnimations && animationDuration === 0) {
-      animationDuration = 1;
-    }
-    _duration = animationDuration;
-    update(true);
-    return ani;
-  };
-  const iterations = (animationIterations) => {
-    _iterations = animationIterations;
-    update(true);
-    return ani;
-  };
-  const parent = (animation) => {
-    parentAnimation = animation;
-    return ani;
-  };
-  const addElement = (el) => {
-    if (el != null) {
-      if (el.nodeType === 1) {
-        elements.push(el);
-      }
-      else if (el.length >= 0) {
-        for (let i = 0; i < el.length; i++) {
-          elements.push(el[i]);
-        }
-      }
-      else {
-        console.error('Invalid addElement value');
-      }
-    }
-    return ani;
-  };
-  const addAnimation = (animationToAdd) => {
-    if (animationToAdd != null) {
-      if (Array.isArray(animationToAdd)) {
-        for (const animation of animationToAdd) {
-          animation.parent(ani);
-          childAnimations.push(animation);
-        }
-      }
-      else {
-        animationToAdd.parent(ani);
-        childAnimations.push(animationToAdd);
-      }
-    }
-    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());
-    // Runs all before write callbacks
-    _beforeAddWriteFunctions.forEach((callback) => callback());
-    // Updates styles and classes before animation runs
-    const addClasses = beforeAddClasses;
-    const removeClasses = beforeRemoveClasses;
-    const styles = beforeStylesValue;
-    elements.forEach((el) => {
-      const elementClassList = el.classList;
-      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]);
-        }
-      }
-    });
-  };
-  /**
-   * Run all "after" animation hooks.
-   */
-  const afterAnimation = () => {
-    clearCSSAnimationsTimeout();
-    // Runs all after read callbacks
-    _afterAddReadFunctions.forEach((callback) => callback());
-    // Runs all after write callbacks
-    _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) => {
-      const elementClassList = el.classList;
-      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) => {
-      return onFinishCallback.c(currentStep, ani);
-    });
-    onFinishOneTimeCallbacks.forEach((onFinishCallback) => {
-      return onFinishCallback.c(currentStep, ani);
-    });
-    onFinishOneTimeCallbacks.length = 0;
-    shouldCalculateNumAnimations = true;
-    if (willComplete) {
-      finished = true;
-    }
-    willComplete = true;
-  };
-  const animationFinish = () => {
-    if (numAnimationsRunning === 0) {
-      return;
-    }
-    numAnimationsRunning--;
-    if (numAnimationsRunning === 0) {
-      afterAnimation();
-      if (parentAnimation) {
-        parentAnimation.animationFinish();
-      }
-    }
-  };
-  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, {
-        id,
-        delay: getDelay(),
-        duration: getDuration(),
-        easing: getEasing(),
-        iterations: getIterations(),
-        fill: getFill(),
-        direction: getDirection(),
-      });
-      animation.pause();
-      webAnimations.push(animation);
-    });
-    if (webAnimations.length > 0) {
-      webAnimations[0].onfinish = () => {
-        animationFinish();
-      };
-    }
-  };
-  const initializeAnimation = (toggleAnimationName = true) => {
-    beforeAnimation();
-    if (_keyframes.length > 0) {
-      if (supportsWebAnimations) {
-        initializeWebAnimation();
-      }
-      else {
-        initializeCSSAnimation(toggleAnimationName);
-      }
-    }
-    initialized = true;
-  };
-  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;
-        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) => {
-      animation.effect.updateTiming({
-        delay: getDelay(),
-        duration: getDuration(),
-        easing: getEasing(),
-        iterations: getIterations(),
-        fill: getFill(),
-        direction: getDirection(),
-      });
-    });
-    if (step !== undefined) {
-      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) => {
-        animation.update(deep, toggleAnimationName, step);
-      });
-    }
-    if (supportsWebAnimations) {
-      updateWebAnimation(step);
-    }
-    else {
-      updateCSSAnimation(toggleAnimationName, step);
-    }
-    return ani;
-  };
-  const progressStart = (forceLinearEasing = false, step) => {
-    childAnimations.forEach((animation) => {
-      animation.progressStart(forceLinearEasing, step);
-    });
-    pauseAnimation();
-    shouldForceLinearEasing = forceLinearEasing;
-    if (!initialized) {
-      initializeAnimation();
-    }
-    update(false, true, step);
-    return ani;
-  };
-  const progressStep = (step) => {
-    childAnimations.forEach((animation) => {
-      animation.progressStep(step);
-    });
-    setAnimationStep(step);
-    return ani;
-  };
-  const progressEnd = (playTo, step, dur) => {
-    shouldForceLinearEasing = false;
-    childAnimations.forEach((animation) => {
-      animation.progressEnd(playTo, step, dur);
-    });
-    if (dur !== undefined) {
-      forceDurationValue = dur;
-    }
-    finished = false;
-    willComplete = true;
-    if (playTo === 0) {
-      forceDirectionValue = getDirection() === 'reverse' ? 'normal' : 'reverse';
-      if (forceDirectionValue === 'reverse') {
-        willComplete = false;
-      }
-      if (supportsWebAnimations) {
-        update();
-        setAnimationStep(1 - step);
-      }
-      else {
-        forceDelayValue = (1 - step) * getDuration() * -1;
-        update(false, false);
-      }
-    }
-    else if (playTo === 1) {
-      if (supportsWebAnimations) {
-        update();
-        setAnimationStep(step);
-      }
-      else {
-        forceDelayValue = step * getDuration() * -1;
-        update(false, false);
-      }
-    }
-    if (playTo !== undefined) {
-      onFinish(() => {
-        forceDurationValue = undefined;
-        forceDirectionValue = undefined;
-        forceDelayValue = undefined;
-      }, {
-        oneTimeCallback: true,
-      });
-      if (!parentAnimation) {
-        play();
-      }
-    }
-    return ani;
-  };
-  const pauseAnimation = () => {
-    if (initialized) {
-      if (supportsWebAnimations) {
-        webAnimations.forEach((animation) => {
-          animation.pause();
-        });
-      }
-      else {
-        elements.forEach((element) => {
-          setStyleProperty(element, 'animation-play-state', 'paused');
-        });
-      }
-      paused = true;
-    }
-  };
-  const pause = () => {
-    childAnimations.forEach((animation) => {
-      animation.pause();
-    });
-    pauseAnimation();
-    return ani;
-  };
-  const onAnimationEndFallback = () => {
-    cssAnimationsTimerFallback = undefined;
-    animationFinish();
-  };
-  const clearCSSAnimationsTimeout = () => {
-    if (cssAnimationsTimerFallback) {
-      clearTimeout(cssAnimationsTimerFallback);
-    }
-  };
-  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
-         *
-         * TODO: Is there a cleaner way to do this?
-         */
-        raf(() => {
-          clearCSSAnimationPlayState();
-          raf(animationFinish);
-        });
-      });
-    }
-  };
-  const clearCSSAnimationPlayState = () => {
-    elements.forEach((element) => {
-      removeStyleProperty(element, 'animation-duration');
-      removeStyleProperty(element, 'animation-delay');
-      removeStyleProperty(element, 'animation-play-state');
-    });
-  };
-  const playWebAnimations = () => {
-    webAnimations.forEach((animation) => {
-      animation.play();
-    });
-    if (_keyframes.length === 0 || elements.length === 0) {
-      animationFinish();
-    }
-  };
-  const resetAnimation = () => {
-    if (supportsWebAnimations) {
-      setAnimationStep(0);
-      updateWebAnimation();
-    }
-    else {
-      updateCSSAnimation();
-    }
-  };
-  const play = (opts) => {
-    return new Promise((resolve) => {
-      if (opts === null || opts === void 0 ? void 0 : opts.sync) {
-        shouldForceSyncPlayback = true;
-        onFinish(() => (shouldForceSyncPlayback = false), { oneTimeCallback: true });
-      }
-      if (!initialized) {
-        initializeAnimation();
-      }
-      if (finished) {
-        resetAnimation();
-        finished = false;
-      }
-      if (shouldCalculateNumAnimations) {
-        numAnimationsRunning = childAnimations.length + 1;
-        shouldCalculateNumAnimations = false;
-      }
-      onFinish(() => resolve(), { oneTimeCallback: true });
-      childAnimations.forEach((animation) => {
-        animation.play();
-      });
-      if (supportsWebAnimations) {
-        playWebAnimations();
-      }
-      else {
-        playCSSAnimations();
-      }
-      paused = false;
-    });
-  };
-  const stop = () => {
-    childAnimations.forEach((animation) => {
-      animation.stop();
-    });
-    if (initialized) {
-      cleanUpElements();
-      initialized = false;
-    }
-    resetFlags();
-  };
-  const from = (property, value) => {
-    const firstFrame = _keyframes[0];
-    if (firstFrame !== undefined && (firstFrame.offset === undefined || firstFrame.offset === 0)) {
-      firstFrame[property] = value;
-    }
-    else {
-      _keyframes = [{ offset: 0, [property]: value }, ..._keyframes];
-    }
-    return ani;
-  };
-  const to = (property, value) => {
-    const lastFrame = _keyframes[_keyframes.length - 1];
-    if (lastFrame !== undefined && (lastFrame.offset === undefined || lastFrame.offset === 1)) {
-      lastFrame[property] = value;
-    }
-    else {
-      _keyframes = [..._keyframes, { offset: 1, [property]: value }];
-    }
-    return ani;
-  };
-  const fromTo = (property, fromValue, toValue) => {
-    return from(property, fromValue).to(property, toValue);
-  };
-  return (ani = {
-    parentAnimation,
-    elements,
-    childAnimations,
-    id,
-    animationFinish,
-    from,
-    to,
-    fromTo,
-    parent,
-    play,
-    pause,
-    stop,
-    destroy,
-    keyframes,
-    addAnimation,
-    addElement,
-    update,
-    fill,
-    direction,
-    iterations,
-    duration,
-    easing,
-    delay,
-    getWebAnimations,
-    getKeyframes,
-    getFill,
-    getDirection,
-    getDelay,
-    getIterations,
-    getEasing,
-    getDuration,
-    afterAddRead,
-    afterAddWrite,
-    afterClearStyles,
-    afterStyles,
-    afterRemoveClass,
-    afterAddClass,
-    beforeAddRead,
-    beforeAddWrite,
-    beforeClearStyles,
-    beforeStyles,
-    beforeRemoveClass,
-    beforeAddClass,
-    onFinish,
-    isRunning,
-    progressStart,
-    progressStep,
-    progressEnd,
-  });
-};
-
-export { createAnimation as c };