@angular-wave/angular.ts 0.0.53 → 0.0.55

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@angular-wave/angular.ts",
   "license": "MIT",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "type": "module",
   "main": "dist/angular-ts.esm.js",
   "browser": "dist/angular-ts.umd.js",

package/src/angular.spec.js

@@ -2049,14 +2049,6 @@ describe("angular", () => {
       expect(toJson({ $few: "v" }, false)).toEqual('{"$few":"v"}');
     });
 
-    it("should not serialize $window object", () => {
-      expect(toJson(window)).toEqual('"$WINDOW"');
-    });
-
-    it("should not serialize $document object", () => {
-      expect(toJson(document)).toEqual('"$DOCUMENT"');
-    });
-
     it("should not serialize scope instances", () => {
       expect(toJson({ key: $rootScope })).toEqual('{"key":"$SCOPE"}');
     });

package/src/animations/animate-cache.js

@@ -1,50 +1,75 @@
-const KEY = "$$ngAnimateParentKey";
+const KEY = "$animId";
 let parentCounter = 0;
-let cache = Object.create(null);
+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 parentID = parentNode[KEY] ?? (parentNode[KEY] = ++parentCounter);
       const parts = [parentID, method, node.getAttribute("class")];
-      if (addClass) {
-        parts.push(addClass);
-      }
-      if (removeClass) {
-        parts.push(removeClass);
-      }
+      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[key];
-
-      // nothing cached, so go ahead and animate
-      // otherwise it should be a valid animation
-      return (entry && !entry.isValid) || false;
+      const entry = cache.get(key);
+      return entry ? !entry.isValid : false;
     },
 
+    /**
+     * Clears the cache.
+     * @returns {void}
+     */
     flush() {
-      cache = Object.create(null);
+      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) {
-      const entry = cache[key];
-      return entry ? entry.total : 0;
+      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) {
-      const entry = cache[key];
-      return entry && entry.value;
+      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) {
-      if (!cache[key]) {
-        cache[key] = { total: 1, value, isValid };
+      const entry = cache.get(key);
+      if (entry) {
+        entry.total++;
+        entry.value = value;
       } else {
-        cache[key].total++;
-        cache[key].value = value;
+        cache.set(key, { total: 1, value, isValid });
       }
     },
   };

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

@@ -2,6 +2,11 @@ import { isString } from "../shared/utils";
 import { NG_ANIMATE_CHILDREN_DATA } from "./shared";
 
 $$AnimateChildrenDirective.$inject = ["$interpolate"];
+
+/**
+ * @param {*} $interpolate
+ * @returns {import("../types").Directive}
+ */
 export function $$AnimateChildrenDirective($interpolate) {
   return {
     link(scope, element, attrs) {

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

@@ -23,10 +23,16 @@ export function $$AnimateCssDriverProvider($$animationProvider) {
     "$animateCss",
     "$$AnimateRunner",
     "$rootElement",
-    "$document",
-    function ($animateCss, $$AnimateRunner, $rootElement, $document) {
-      const bodyNode = $document[0].body;
-      const rootNode = getDomNode($rootElement);
+    /**
+     *
+     * @param {*} $animateCss
+     * @param {typeof import('../core/animate/animate-runner').AnimateRunner} $$AnimateRunner
+     * @param {*} $rootElement
+     * @returns
+     */
+    function ($animateCss, $$AnimateRunner, $rootElement) {
+      const bodyNode = document.body;
+      const rootNode = $rootElement[0];
 
       const rootBodyElement = JQLite(
         // this is to avoid using something that exists outside of the body
@@ -42,24 +48,12 @@ export function $$AnimateCssDriverProvider($$animationProvider) {
           ? prepareFromToAnchorAnimation(
               animationDetails.from,
               animationDetails.to,
-              animationDetails.classes,
               animationDetails.anchors,
             )
           : prepareRegularAnimation(animationDetails);
       };
 
-      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(" ");
-      }
-
-      function prepareAnchoredAnimation(classes, outAnchor, inAnchor) {
+      function prepareAnchoredAnimation(outAnchor, inAnchor) {
         const clone = JQLite(getDomNode(outAnchor).cloneNode(true));
         const startingClasses = filterCssClasses(getClassVal(clone));
 
@@ -187,19 +181,15 @@ export function $$AnimateCssDriverProvider($$animationProvider) {
         }
       }
 
-      function prepareFromToAnchorAnimation(from, to, classes, anchors) {
+      function prepareFromToAnchorAnimation(from, to, anchors) {
         const fromAnimation = prepareRegularAnimation(from);
         const toAnimation = prepareRegularAnimation(to);
 
         const anchorAnimations = [];
-        forEach(anchors, (anchor) => {
+        anchors.forEach((anchor) => {
           const outElement = anchor.out;
           const inElement = anchor.in;
-          const animator = prepareAnchoredAnimation(
-            classes,
-            outElement,
-            inElement,
-          );
+          const animator = prepareAnchoredAnimation(outElement, inElement);
           if (animator) {
             anchorAnimations.push(animator);
           }
@@ -237,7 +227,7 @@ export function $$AnimateCssDriverProvider($$animationProvider) {
             return runner;
 
             function endFn() {
-              forEach(animationRunners, (runner) => {
+              animationRunners.forEach((runner) => {
                 runner.end();
               });
             }
@@ -246,7 +236,6 @@ export function $$AnimateCssDriverProvider($$animationProvider) {
       }
 
       function prepareRegularAnimation(animationDetails) {
-        const { element } = animationDetails;
         const options = animationDetails.options || {};
 
         if (animationDetails.structural) {
@@ -272,14 +261,26 @@ export function $$AnimateCssDriverProvider($$animationProvider) {
           );
         }
 
-        const animator = $animateCss(element, options);
+        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

@@ -0,0 +1,40 @@
+<!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", ["ngAnimate"])</script> -->
+
+    <script type="module" src="/src/index.js"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        window.angular.module("test", ["ngAnimate"]);
+      });
+    </script>
+
+    <style>
+      /* The starting CSS styles for the enter animation */
+      .fade.ng-enter {
+        transition: 0.5s linear all;
+        opacity: 0;
+      }
+
+      /* The finishing CSS styles for the enter animation */
+      .fade.ng-enter.ng-enter-active {
+        opacity: 1;
+        background-color: red;
+      }
+    </style>
+  </head>
+  <body ng-app="test">
+    <div ng-if="bool" class="fade">Fade me in out</div>
+    <button ng-click="bool=true">Fade In!</button>
+    <button ng-click="bool=false">Fade Out!</button>
+  </body>
+</html>

package/src/animations/animate-css.js

@@ -155,7 +155,6 @@ export function $AnimateCssProvider() {
 
       function computeCachedCssStyles(
         node,
-        className,
         cacheKey,
         allowNoDuration,
         properties,
@@ -247,10 +246,9 @@ export function $AnimateCssProvider() {
         });
       }
 
-      function computeTimings(node, className, cacheKey, allowNoDuration) {
+      function computeTimings(node, cacheKey, allowNoDuration) {
         const timings = computeCachedCssStyles(
           node,
-          className,
           cacheKey,
           allowNoDuration,
           DETECT_CSS_PROPERTIES,
@@ -343,7 +341,6 @@ export function $AnimateCssProvider() {
         let preparationClasses = [structuralClassName, addRemoveClassName]
           .join(" ")
           .trim();
-        let fullClassName = `${classes} ${preparationClasses}`;
         const hasToStyles = styles.to && Object.keys(styles.to).length > 0;
         const containsKeyframeAnimation =
           (options.keyframeStyle || "").length > 0;
@@ -405,6 +402,7 @@ export function $AnimateCssProvider() {
 
           // we set the duration so that it will be picked up by getComputedStyle later
           applyInlineStyle(node, durationStyle);
+
           temporaryStyles.push(durationStyle);
         }
 
@@ -432,12 +430,7 @@ export function $AnimateCssProvider() {
           blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);
         }
 
-        let timings = computeTimings(
-          node,
-          fullClassName,
-          cacheKey,
-          !isStructural,
-        );
+        let timings = computeTimings(node, cacheKey, !isStructural);
         let relativeDelay = timings.maxDelay;
         maxDelay = Math.max(relativeDelay, 0);
         maxDuration = timings.maxDuration;
@@ -485,7 +478,7 @@ export function $AnimateCssProvider() {
           return closeAndReturnNoopAnimator();
         }
 
-        const activeClasses = pendClasses(
+        var activeClasses = pendClasses(
           preparationClasses,
           ACTIVE_CLASS_SUFFIX,
         );
@@ -585,15 +578,15 @@ export function $AnimateCssProvider() {
           animationPaused = false;
 
           if (preparationClasses && !options.$$skipPreparationClasses) {
-            preparationClasses
-              .split(" ")
-              .forEach((cls) => element.classList.remove(cls));
+            preparationClasses.split(" ").forEach(function (cls) {
+              element[0].classList.remove(cls);
+            });
           }
-
+          activeClasses = pendClasses(preparationClasses, ACTIVE_CLASS_SUFFIX);
           if (activeClasses) {
-            activeClasses
-              .split(" ")
-              .forEach((cls) => element.classList.remove(cls));
+            activeClasses.split(" ").forEach(function (cls) {
+              element[0].classList.remove(cls);
+            });
           }
 
           blockKeyframeAnimations(node, false);
@@ -782,7 +775,8 @@ export function $AnimateCssProvider() {
             });
 
             applyAnimationClasses(element, options);
-            element.className += ` ${activeClasses}`;
+
+            element[0].classList.add(activeClasses);
             if (flags.recalculateTimingStyles) {
               fullClassName = `${node.getAttribute("class")} ${preparationClasses}`;
               cacheKey = $$animateCache.cacheKey(
@@ -792,7 +786,7 @@ export function $AnimateCssProvider() {
                 options.removeClass,
               );
 
-              timings = computeTimings(node, fullClassName, cacheKey, false);
+              timings = computeTimings(node, cacheKey, false);
               relativeDelay = timings.maxDelay;
               maxDelay = Math.max(relativeDelay, 0);
               maxDuration = timings.maxDuration;

package/src/animations/animate-queue.js

@@ -146,14 +146,12 @@ export function $$AnimateQueueProvider($animateProvider) {
   this.$get = [
     "$rootScope",
     "$rootElement",
-    "$document",
     "$$animation",
     "$$AnimateRunner",
     "$templateRequest",
     function (
       $rootScope,
       $rootElement,
-      $document,
       $$animation,
       $$AnimateRunner,
       $templateRequest,
@@ -393,7 +391,7 @@ export function $$AnimateQueueProvider($animateProvider) {
         // we always make a copy of the options since
         // there should never be any side effects on
         // the input data when running `$animateCss`.
-        let options = structuredClone(initialOptions);
+        let options = initialOptions;
 
         let element = stripCommentsFromElement(originalElement);
         const node = getDomNode(element);
@@ -739,7 +737,7 @@ export function $$AnimateQueueProvider($animateProvider) {
        * d) the element is not a child of the $rootElement
        */
       function areAnimationsAllowed(node, parentNode) {
-        const bodyNode = $document[0].body;
+        const bodyNode = document.body;
         const rootNode = getDomNode($rootElement);
 
         let bodyNodeDetected = node === bodyNode || node.nodeName === "HTML";