@angular-wave/angular.ts 0.9.4 → 0.9.6

package/src/animations/animate-cache.js

@@ -1,80 +0,0 @@
-const KEY = "$animId";
-let parentCounter = 0;
-const cache = new Map();
-
-export function animateCache() {
-  return {
-    /**
-     * Generates a unique cache key based on the node's parent and other parameters.
-     * @param {HTMLElement} node - The DOM node to generate the cache key for.
-     * @param {string} method - The animation method being applied.
-     * @param {string} [addClass] - Class to add during the animation.
-     * @param {string} [removeClass] - Class to remove during the animation.
-     * @returns {string} - The generated cache key.
-     */
-    cacheKey(node, method, addClass, removeClass) {
-      const { parentNode } = node;
-      const parentID = parentNode[KEY] ?? (parentNode[KEY] = ++parentCounter);
-      const parts = [parentID, method, node.getAttribute("class")];
-      if (addClass) parts.push(addClass);
-      if (removeClass) parts.push(removeClass);
-      return parts.join(" ");
-    },
-
-    /**
-     * Checks if a cached animation without a duration exists.
-     * @param {string} key - The cache key to check.
-     * @returns {boolean} - True if an invalid animation is cached, false otherwise.
-     */
-    containsCachedAnimationWithoutDuration(key) {
-      const entry = cache.get(key);
-      return entry ? !entry.isValid : false;
-    },
-
-    /**
-     * Clears the cache.
-     * @returns {void}
-     */
-    flush() {
-      cache.clear();
-    },
-
-    /**
-     * Gets the count of a specific cache entry.
-     * @param {string} key - The cache key to count.
-     * @returns {number} - The count of the cache entry.
-     */
-    count(key) {
-      return cache.get(key)?.total ?? 0;
-    },
-
-    /**
-     * Retrieves a value associated with a specific cache key.
-     * @param {string} key - The cache key to retrieve.
-     * @returns {any} - The value associated with the cache key.
-     */
-    get(key) {
-      return cache.get(key)?.value;
-    },
-
-    /**
-     * Adds or updates a cache entry.
-     * @param {string} key - The cache key to add or update.
-     * @param {any} value - The value to store.
-     * @param {boolean} isValid - Whether the cache entry is valid.
-     */
-    put(key, value, isValid) {
-      const entry = cache.get(key);
-      if (entry) {
-        entry.total++;
-        entry.value = value;
-      } else {
-        cache.set(key, { total: 1, value, isValid });
-      }
-    },
-  };
-}
-
-export function AnimateCacheProvider() {
-  this.$get = [animateCache];
-}

package/src/animations/animate-children-directive.js

@@ -1,32 +0,0 @@
-import { isString } from "../shared/utils.js";
-import { NG_ANIMATE_CHILDREN_DATA } from "./shared.js";
-import { setCacheData } from "../shared/dom.js";
-import { $injectTokens as $t } from "../injection-tokens.js";
-
-$$AnimateChildrenDirective.$inject = [$t.$interpolate];
-
-/**
- * @param {*} $interpolate
- * @returns {import("../interface.ts").Directive}
- */
-export function $$AnimateChildrenDirective($interpolate) {
-  return {
-    link(scope, element, attrs) {
-      const val = attrs["ngAnimateChildren"];
-      if (isString(val) && val.length === 0) {
-        // empty attribute
-        setCacheData(element, NG_ANIMATE_CHILDREN_DATA, true);
-      } else {
-        // Interpolate and set the value, so that it is available to
-        // animations that run right after compilation
-        setData($interpolate(val)(scope));
-        attrs.$observe("ngAnimateChildren", setData);
-      }
-
-      function setData(value) {
-        value = value === "on" || value === "true";
-        setCacheData(element, NG_ANIMATE_CHILDREN_DATA, value);
-      }
-    },
-  };
-}

package/src/animations/animate-children-directive.md

@@ -1,80 +0,0 @@
-/\*\*
-
-- @ngdoc directive
-- @name ngAnimateChildren
-- @restrict AE
-- @element ANY
--
-- @description
--
-- ngAnimateChildren allows you to specify that children of this element should animate even if any
-- of the children's parents are currently animating. By default, when an element has an active `enter`, `leave`, or `move`
-- (structural) animation, child elements that also have an active structural animation are not animated.
--
-- Note that even if `ngAnimateChildren` is set, no child animations will run when the parent element is removed from the DOM (`leave` animation).
--
--
-- @param {string} ngAnimateChildren If the value is empty, `true` or `on`,
--     then child animations are allowed. If the value is `false`, child animations are not allowed.
--
-- @example
-- <example module="ngAnimateChildren" name="ngAnimateChildren" deps="angular-animate.js" animations="true">
-      <file name="index.html">
-        <div ng-controller="MainController as main">
-          <label>Show container? <input type="checkbox" ng-model="main.enterElement" /></label>
-          <label>Animate children? <input type="checkbox" ng-model="main.animateChildren" /></label>
-          <hr>
-          <div ng-animate-children="{{main.animateChildren}}">
-            <div ng-if="main.enterElement" class="container">
-              List of items:
-              <div ng-repeat="item in [0, 1, 2, 3]" class="item">Item {{item}}</div>
-            </div>
-          </div>
-        </div>
-      </file>
-      <file name="animations.css">
-
-       .container.ng-enter,
-       .container.ng-leave {
-         transition: all ease 1.5s;
-       }
-
-       .container.ng-enter,
-       .container.ng-leave-active {
-         opacity: 0;
-       }
-
-       .container.ng-leave,
-       .container.ng-enter-active {
-         opacity: 1;
-       }
-
-       .item {
-         background: firebrick;
-         color: #FFF;
-         margin-bottom: 10px;
-       }
-
-       .item.ng-enter,
-       .item.ng-leave {
-         transition: transform 1.5s ease;
-       }
-
-       .item.ng-enter {
-         transform: translateX(50px);
-       }
-
-       .item.ng-enter-active {
-         transform: translateX(0);
-       }
-
-     </file>
-     <file name="script.js">
-       angular.module('ngAnimateChildren', [])
-         .controller('MainController', function MainController() {
-           this.animateChildren = false;
-           this.enterElement = false;
-         });
-     </file>
-   </example>
-  */

package/src/animations/animate-css-driver.js

@@ -1,284 +0,0 @@
-import { isString } from "../shared/utils.js";
-import { concatWithSpace } from "./shared.js";
-
-const NG_ANIMATE_SHIM_CLASS_NAME = "ng-animate-shim";
-const NG_ANIMATE_ANCHOR_CLASS_NAME = "ng-anchor";
-
-const NG_OUT_ANCHOR_CLASS_NAME = "ng-anchor-out";
-const NG_IN_ANCHOR_CLASS_NAME = "ng-anchor-in";
-
-AnimateCssDriverProvider.$inject = ["$$animationProvider"];
-export function AnimateCssDriverProvider($$animationProvider) {
-  $$animationProvider.drivers.push("$$animateCssDriver");
-
-  function isDocumentFragment(node) {
-    return node.parentNode && node.parentNode.nodeType === 11;
-  }
-
-  /**
-   * @returns {Function}
-   */
-  this.$get = [
-    "$animateCss",
-    "$$AnimateRunner",
-    "$rootElement",
-    /**
-     *
-     * @param {*} $animateCss
-     * @param {typeof import('./animate-runner.js').AnimateRunner} $$AnimateRunner
-     * @param {Element} $rootElement
-     * @returns
-     */
-    function ($animateCss, $$AnimateRunner, $rootElement) {
-      const bodyNode = document.body;
-      const rootNode = $rootElement;
-
-      const rootBodyElement =
-        // this is to avoid using something that exists outside of the body
-        // we also special case the doc fragment case because our unit test code
-        // appends the $rootElement to the body after the app has been bootstrapped
-        isDocumentFragment(rootNode) || bodyNode.contains(rootNode)
-          ? rootNode
-          : bodyNode;
-
-      return function initDriverFn(animationDetails) {
-        return animationDetails.from && animationDetails.to
-          ? prepareFromToAnchorAnimation(
-              animationDetails.from,
-              animationDetails.to,
-              animationDetails.anchors,
-            )
-          : prepareRegularAnimation(animationDetails);
-      };
-
-      function prepareAnchoredAnimation(outAnchor, inAnchor) {
-        const clone = outAnchor.cloneNode(true);
-        const startingClasses = filterCssClasses(getClassVal(clone));
-
-        outAnchor[0].classList.add(NG_ANIMATE_SHIM_CLASS_NAME);
-        inAnchor[0].classList.add(NG_ANIMATE_SHIM_CLASS_NAME);
-
-        clone.classList.add(NG_ANIMATE_ANCHOR_CLASS_NAME);
-
-        rootBodyElement.append(clone);
-
-        let animatorIn;
-        const animatorOut = prepareOutAnimation();
-
-        // the user may not end up using the `out` animation and
-        // only making use of the `in` animation or vice-versa.
-        // In either case we should allow this and not assume the
-        // animation is over unless both animations are not used.
-        if (!animatorOut) {
-          animatorIn = prepareInAnimation();
-          if (!animatorIn) {
-            return end();
-          }
-        }
-
-        const startingAnimator = animatorOut || animatorIn;
-
-        return {
-          start() {
-            let runner;
-
-            let currentAnimation = startingAnimator.start();
-            currentAnimation.done(() => {
-              currentAnimation = null;
-              if (!animatorIn) {
-                animatorIn = prepareInAnimation();
-                if (animatorIn) {
-                  currentAnimation = animatorIn.start();
-                  currentAnimation.done(() => {
-                    currentAnimation = null;
-                    end();
-                    runner.complete();
-                  });
-                  return currentAnimation;
-                }
-              }
-              // in the event that there is no `in` animation
-              end();
-              runner.complete();
-            });
-
-            runner = new $$AnimateRunner({
-              end: endFn,
-              cancel: endFn,
-            });
-
-            return runner;
-
-            function endFn() {
-              if (currentAnimation) {
-                currentAnimation.end();
-              }
-            }
-          },
-        };
-
-        function calculateAnchorStyles(anchor) {
-          const styles = {};
-
-          const coords = anchor.getBoundingClientRect();
-
-          // we iterate directly since safari messes up and doesn't return
-          // all the keys for the coords object when iterated
-          ["width", "height", "top", "left"].forEach((key) => {
-            let value = coords[key];
-            switch (key) {
-              case "top":
-                value += bodyNode.scrollTop;
-                break;
-              case "left":
-                value += bodyNode.scrollLeft;
-                break;
-            }
-            styles[key] = `${Math.floor(value)}px`;
-          });
-          return styles;
-        }
-
-        function prepareOutAnimation() {
-          const animator = $animateCss(clone, {
-            addClass: NG_OUT_ANCHOR_CLASS_NAME,
-            delay: true,
-            from: calculateAnchorStyles(outAnchor),
-          });
-
-          // read the comment within `prepareRegularAnimation` to understand
-          // why this check is necessary
-          return animator.$$willAnimate ? animator : null;
-        }
-
-        function getClassVal(element) {
-          return element.getAttribute("class") || "";
-        }
-
-        function prepareInAnimation() {
-          const endingClasses = filterCssClasses(getClassVal(inAnchor));
-          const toAdd = getUniqueValues(endingClasses, startingClasses);
-          const toRemove = getUniqueValues(startingClasses, endingClasses);
-
-          const animator = $animateCss(clone, {
-            to: calculateAnchorStyles(inAnchor),
-            addClass: `${NG_IN_ANCHOR_CLASS_NAME} ${toAdd}`,
-            removeClass: `${NG_OUT_ANCHOR_CLASS_NAME} ${toRemove}`,
-            delay: true,
-          });
-
-          // read the comment within `prepareRegularAnimation` to understand
-          // why this check is necessary
-          return animator.$$willAnimate ? animator : null;
-        }
-
-        function end() {
-          clone.remove();
-          outAnchor[0].classList.remove(NG_ANIMATE_SHIM_CLASS_NAME);
-          inAnchor[0].classList.remove(NG_ANIMATE_SHIM_CLASS_NAME);
-        }
-      }
-
-      function prepareFromToAnchorAnimation(from, to, anchors) {
-        const fromAnimation = prepareRegularAnimation(from);
-        const toAnimation = prepareRegularAnimation(to);
-
-        const anchorAnimations = [];
-        anchors.forEach((anchor) => {
-          const outElement = anchor.out;
-          const inElement = anchor.in;
-          const animator = prepareAnchoredAnimation(outElement, inElement);
-          if (animator) {
-            anchorAnimations.push(animator);
-          }
-        });
-
-        // no point in doing anything when there are no elements to animate
-        if (!fromAnimation && !toAnimation && anchorAnimations.length === 0)
-          return;
-
-        return {
-          start() {
-            const animationRunners = [];
-
-            if (fromAnimation) {
-              animationRunners.push(fromAnimation.start());
-            }
-
-            if (toAnimation) {
-              animationRunners.push(toAnimation.start());
-            }
-
-            anchorAnimations.forEach((animation) => {
-              animationRunners.push(animation.start());
-            });
-
-            const runner = new $$AnimateRunner({
-              end: endFn,
-              cancel: endFn, // CSS-driven animations cannot be cancelled, only ended
-            });
-
-            $$AnimateRunner.all(animationRunners, (status) => {
-              runner.complete(status);
-            });
-
-            return runner;
-
-            function endFn() {
-              animationRunners.forEach((runner) => {
-                runner.end();
-              });
-            }
-          },
-        };
-      }
-
-      function prepareRegularAnimation(animationDetails) {
-        const options = animationDetails.options || {};
-
-        if (animationDetails.structural) {
-          options.event = animationDetails.event;
-          options.structural = true;
-          options.applyClassesEarly = true;
-
-          // we special case the leave animation since we want to ensure that
-          // the element is removed as soon as the animation is over. Otherwise
-          // a flicker might appear or the element may not be removed at all
-          if (animationDetails.event === "leave") {
-            options.onDone = options.domOperation;
-          }
-        }
-
-        // We assign the preparationClasses as the actual animation event since
-        // the internals of $animateCss will just suffix the event token values
-        // with `-active` to trigger the animation.
-        if (options.preparationClasses) {
-          options.event = concatWithSpace(
-            options.event,
-            options.preparationClasses,
-          );
-        }
-
-        const animator = $animateCss(animationDetails.element, options);
-
-        // the driver lookup code inside of $$animation attempts to spawn a
-        // driver one by one until a driver returns a.$$willAnimate animator object.
-        // $animateCss will always return an object, however, it will pass in
-        // a flag as a hint as to whether an animation was detected or not
-
-        return animator.$$willAnimate ? animator : null;
-      }
-    },
-  ];
-}
-
-function filterCssClasses(classes) {
-  // remove all the `ng-` stuff
-  return classes.replace(/\bng-\S+\b/g, "");
-}
-
-function getUniqueValues(a, b) {
-  if (isString(a)) a = a.split(" ");
-  if (isString(b)) b = b.split(" ");
-  return a.filter((val) => b.indexOf(val) === -1).join(" ");
-}

package/src/animations/animate-css.html

@@ -1,58 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>AngularTS Test Runner</title>
-
-    <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
-
-    <!--     
-    <script src="https://cdn.jsdelivr.net/npm/angular@1.8.3/angular.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/angular-animate@1.8.3/angular-animate.js"></script>
-    <script>window.angular.module("test", [])</script> -->
-
-    <script type="module" src="/src/index.js"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", () => {
-        window.angular.module("test", []);
-      });
-    </script>
-
-    <style>
-      .fade {
-        background-color: red;
-      }
-      /* The starting CSS styles for the enter animation */
-      .fade.ng-enter {
-        transition: 0.5s linear all;
-        background-color: unset;
-        opacity: 0;
-      }
-
-      /* The finishing CSS styles for the enter animation */
-      .fade.ng-enter.ng-enter-active {
-        opacity: 1;
-        background-color: red;
-      }
-
-      /* The starting CSS styles for the leave animation */
-      .fade.ng-leave {
-        transition: 0.5s linear all;
-        opacity: 1;
-      }
-
-      /* The finishing CSS styles for the leave animation */
-      .fade.ng-leave.ng-leave-active {
-        opacity: 0;
-        background-color: unset;
-      }
-    </style>
-  </head>
-  <body ng-app="test">
-    <div ng-if="bool" id="data-animate" class="fade" data-animate="true">
-      Fade me in out
-    </div>
-    <button ng-click="bool=true">Fade In!</button>
-    <button ng-click="bool=false">Fade Out!</button>
-  </body>
-</html>