@angular-wave/angular.ts 0.0.57 → 0.0.59

package/src/directive/if/if.test.js

@@ -10,3 +10,105 @@ test("unit tests contain no errors", async ({ page }) => {
     /0 failures/,
   );
 });
+
+test.describe("animations", () => {
+  test("it should add enter and leave classes when animation is enabled", async ({
+    page,
+  }) => {
+    await page.goto("src/directive/if/if-animate-css.html");
+    await page.content();
+    // when if attribute has `data-animate` set to true
+    await page.click('button:has-text("Fade In!")');
+    let animated = await page.locator("#data-animate");
+
+    await expect(animated).toBeVisible();
+    await expect(animated).toHaveClass(/ng-enter/);
+    await expect(animated).toHaveClass(/ng-enter-active/);
+
+    // Wait for the transition to complete
+    await page.waitForTimeout(500);
+    await expect(animated).not.toHaveClass(/ng-enter/);
+    await expect(animated).not.toHaveClass(/ng-enter-active/);
+
+    await page.click('button:has-text("Fade Out!")');
+    await expect(animated).toHaveClass(/ng-leave/);
+    await expect(animated).toHaveClass(/ng-leave-active/);
+    await page.waitForTimeout(500);
+    // should be invisible
+    await expect(animated).not.toBeVisible();
+
+    // when if attribute has `animate` set to true
+    await page.click('button:has-text("Fade In!")');
+    animated = await page.locator("#animate");
+
+    await expect(animated).toBeVisible();
+    await expect(animated).toHaveClass(/ng-enter/);
+    await expect(animated).toHaveClass(/ng-enter-active/);
+
+    // Wait for the transition to complete
+    await page.waitForTimeout(500);
+    await expect(animated).not.toHaveClass(/ng-enter/);
+    await expect(animated).not.toHaveClass(/ng-enter-active/);
+
+    await page.click('button:has-text("Fade Out!")');
+    await expect(animated).toHaveClass(/ng-leave/);
+    await expect(animated).toHaveClass(/ng-leave-active/);
+    await page.waitForTimeout(500);
+    // should be invisible
+    await expect(animated).not.toBeVisible();
+
+    // when if attribute has no animate antributes
+    await page.click('button:has-text("Fade In!")');
+    let nonAnimated = await page.locator("#no-animate");
+
+    await expect(nonAnimated).toBeVisible();
+    await expect(nonAnimated).not.toHaveClass(/ng-enter/);
+    await expect(nonAnimated).not.toHaveClass(/ng-enter-active/);
+
+    // Wait for the transition to complete
+    await page.waitForTimeout(100);
+
+    await page.click('button:has-text("Fade Out!")');
+    // should be instantly invisible
+    await expect(nonAnimated).not.toBeVisible();
+  });
+
+  test("should destroy the previous leave animation if a new one takes place", async ({
+    page,
+  }) => {
+    await page.goto("src/directive/if/if-animate-css.html");
+    await page.content();
+    // when if attribute has `data-animate` set to true
+    await page.click('button:has-text("Fade In!")');
+    let animated = await page.locator("#data-animate");
+
+    await expect(animated).toBeVisible();
+    await expect(animated).toHaveClass(/ng-enter/);
+    await expect(animated).toHaveClass(/ng-enter-active/);
+
+    // Wait for the transition to complete
+    await page.waitForTimeout(500);
+    await expect(animated).not.toHaveClass(/ng-enter/);
+    await expect(animated).not.toHaveClass(/ng-enter-active/);
+
+    await page.click('button:has-text("Fade Out!")');
+    await page.click('button:has-text("Fade In!")');
+    // should be visible
+    await page.waitForTimeout(500);
+    await expect(animated).toBeVisible();
+    await expect(animated).not.toHaveClass(/ng-leave/);
+    await expect(animated).not.toHaveClass(/ng-leave-active/);
+  });
+
+  test("should work with svg elements when the svg container is transcluded", async ({
+    page,
+  }) => {
+    await page.goto("src/directive/if/if-animate-css.html");
+    await page.content();
+    await page.click('button:has-text("Fade In!")');
+    await page.waitForTimeout(600);
+    let animated = await page.locator("#circle");
+    await expect(animated).not.toHaveClass(/ng-enter/);
+    await expect(animated).not.toHaveClass(/ng-enter-active/);
+  });
+});

package/src/directive/include/include.js

@@ -1,5 +1,7 @@
 import { isDefined } from "../../shared/utils";
 import { buildFragment } from "../../shared/jqlite/jqlite";
+import { hasAnimate } from "../../shared/utils";
+import { domInsert } from "../../core/animate/animate";
 
 export const ngIncludeDirective = [
   "$templateRequest",
@@ -17,6 +19,15 @@ export const ngIncludeDirective = [
       const autoScrollExp = attr.autoscroll;
 
       return (scope, $element, _$attr, ctrl, $transclude) => {
+        function maybeScroll() {
+          if (
+            isDefined(autoScrollExp) &&
+            (!autoScrollExp || scope.$eval(autoScrollExp))
+          ) {
+            $anchorScroll();
+          }
+        }
+
         let changeCounter = 0;
         let currentScope;
         let previousElement;
@@ -31,9 +42,14 @@ export const ngIncludeDirective = [
             currentScope = null;
           }
           if (currentElement) {
-            $animate.leave(currentElement).done((response) => {
-              if (response !== false) previousElement = null;
-            });
+            if (hasAnimate(currentElement[0])) {
+              $animate.leave(currentElement).done((response) => {
+                if (response !== false) previousElement = null;
+              });
+            } else {
+              currentElement.remove();
+            }
+
             previousElement = currentElement;
             currentElement = null;
           }
@@ -41,13 +57,7 @@ export const ngIncludeDirective = [
 
         scope.$watch(srcExp, (src) => {
           const afterAnimation = function (response) {
-            if (
-              response !== false &&
-              isDefined(autoScrollExp) &&
-              (!autoScrollExp || scope.$eval(autoScrollExp))
-            ) {
-              $anchorScroll();
-            }
+            response !== false && maybeScroll();
           };
 
           const thisChangeId = ++changeCounter;
@@ -70,7 +80,12 @@ export const ngIncludeDirective = [
                 // directives to non existing elements.
                 const clone = $transclude(newScope, (clone) => {
                   cleanupLastIncludeContent();
-                  $animate.enter(clone, null, $element).done(afterAnimation);
+                  if (hasAnimate(clone[0])) {
+                    $animate.enter(clone, null, $element).done(afterAnimation);
+                  } else {
+                    domInsert(clone, null, $element);
+                    maybeScroll();
+                  }
                 });
 
                 currentScope = newScope;

package/src/directive/include/include.md

@@ -1,6 +1,5 @@
 /\*\*
 
-- @ngdoc directive
 - @name ngInclude
 - @restrict ECA
 - @scope
@@ -22,7 +21,9 @@
 - policy may further restrict whether the template is successfully loaded.
 - For example, `ngInclude` won't work for cross-domain requests on all browsers and for `file://`
 - access on some browsers.
--
+- The `enter` and `leave` animation effects can be enabled for the element by
+  setting data attribute (`data-*`) or custom attribute `animate` to `true` attribute.
+
 - @animations
 - | Animation | Occurs |
 - |----------------------------------|-------------------------------------|

package/src/directive/model/model.js

@@ -15,6 +15,7 @@ import {
   isPromiseLike,
   isUndefined,
   isFunction,
+  hasAnimate,
 } from "../../shared/utils";
 import {
   addSetValidityMethod,
@@ -335,11 +336,21 @@ NgModelController.prototype = {
 
   $$updateEmptyClasses(value) {
     if (this.$isEmpty(value)) {
-      this.$$animate.removeClass(this.$$element, NOT_EMPTY_CLASS);
-      this.$$animate.addClass(this.$$element, EMPTY_CLASS);
+      if (hasAnimate(this.$$element[0])) {
+        this.$$animate.removeClass(this.$$element, NOT_EMPTY_CLASS);
+        this.$$animate.addClass(this.$$element, EMPTY_CLASS);
+      } else {
+        this.$$element[0].classList.remove(NOT_EMPTY_CLASS);
+        this.$$element[0].classList.add(EMPTY_CLASS);
+      }
     } else {
-      this.$$animate.removeClass(this.$$element, EMPTY_CLASS);
-      this.$$animate.addClass(this.$$element, NOT_EMPTY_CLASS);
+      if (hasAnimate(this.$$element[0])) {
+        this.$$animate.removeClass(this.$$element, EMPTY_CLASS);
+        this.$$animate.addClass(this.$$element, NOT_EMPTY_CLASS);
+      } else {
+        this.$$element[0].classList.remove(EMPTY_CLASS);
+        this.$$element[0].classList.add(NOT_EMPTY_CLASS);
+      }
     }
   },
 
@@ -357,8 +368,13 @@ NgModelController.prototype = {
   $setPristine() {
     this.$dirty = false;
     this.$pristine = true;
-    this.$$animate.removeClass(this.$$element, DIRTY_CLASS);
-    this.$$animate.addClass(this.$$element, PRISTINE_CLASS);
+    if (hasAnimate(this.$$element[0])) {
+      this.$$animate.removeClass(this.$$element, EMPTY_CLASS);
+      this.$$animate.addClass(this.$$element, PRISTINE_CLASS);
+    } else {
+      this.$$element[0].classList.remove(EMPTY_CLASS);
+      this.$$element[0].classList.add(PRISTINE_CLASS);
+    }
   },
 
   /**
@@ -375,8 +391,13 @@ NgModelController.prototype = {
   $setDirty() {
     this.$dirty = true;
     this.$pristine = false;
-    this.$$animate.removeClass(this.$$element, PRISTINE_CLASS);
-    this.$$animate.addClass(this.$$element, DIRTY_CLASS);
+    if (hasAnimate(this.$$element[0])) {
+      this.$$animate.removeClass(this.$$element, PRISTINE_CLASS);
+      this.$$animate.addClass(this.$$element, DIRTY_CLASS);
+    } else {
+      this.$$element[0].classList.remove(PRISTINE_CLASS);
+      this.$$element[0].classList.add(DIRTY_CLASS);
+    }
     this.$$parentForm.$setDirty();
   },
 
@@ -395,7 +416,12 @@ NgModelController.prototype = {
   $setUntouched() {
     this.$touched = false;
     this.$untouched = true;
-    this.$$animate.setClass(this.$$element, UNTOUCHED_CLASS, TOUCHED_CLASS);
+    if (hasAnimate(this.$$element[0])) {
+      this.$$animate.setClass(this.$$element, UNTOUCHED_CLASS, TOUCHED_CLASS);
+    } else {
+      this.$$element[0].classList.remove(TOUCHED_CLASS);
+      this.$$element[0].classList.add(UNTOUCHED_CLASS);
+    }
   },
 
   /**
@@ -412,7 +438,12 @@ NgModelController.prototype = {
   $setTouched() {
     this.$touched = true;
     this.$untouched = false;
-    this.$$animate.setClass(this.$$element, TOUCHED_CLASS, UNTOUCHED_CLASS);
+    if (hasAnimate(this.$$element[0])) {
+      this.$$animate.setClass(this.$$element, TOUCHED_CLASS, UNTOUCHED_CLASS);
+    } else {
+      this.$$element[0].classList.remove(UNTOUCHED_CLASS);
+      this.$$element[0].classList.add(TOUCHED_CLASS);
+    }
   },
 
   /**

package/src/shared/jqlite/jqlite.js

@@ -1209,7 +1209,7 @@ export function startingTag(elementStr) {
 
 /**
  * Return the DOM siblings between the first and last node in the given array.
- * @param {Array} nodes An array-like object
+ * @param {JQLite|Array} nodes An array-like object
  * @returns {JQLite} the inputted object or a JQLite collection containing the nodes
  */
 export function getBlockNodes(nodes) {

package/types/animations/animate-css.d.ts

@@ -1,6 +1,6 @@
 export function $AnimateCssProvider(): void;
 export class $AnimateCssProvider {
-    $get: (string | (($$AnimateRunner: any, $timeout: any, $$animateCache: any, $$rAFScheduler: any, $$animateQueue: any) => (element: any, initialOptions: any) => {
+    $get: (string | (($$AnimateRunner: any, $timeout: any, $$animateCache: any, $$rAFScheduler: import("./raf-scheduler").RafScheduler, $$animateQueue: any) => (element: any, initialOptions: any) => {
         $$willAnimate: boolean;
         start(): any;
         end: () => void;

package/types/animations/animation.d.ts

@@ -1,5 +1,5 @@
 export function $$AnimationProvider(): void;
 export class $$AnimationProvider {
     drivers: any[];
-    $get: (string | (($rootScope: any, $injector: any, $$AnimateRunner: any, $$rAFScheduler: any, $$animateCache: any) => (element: any, event: any, options: any) => any))[];
+    $get: (string | (($rootScope: any, $injector: any, $$AnimateRunner: any, $$rAFScheduler: import("./raf-scheduler").RafScheduler, $$animateCache: any) => (element: any, event: any, options: any) => any))[];
 }

package/types/animations/raf-scheduler.d.ts

@@ -1,5 +1,19 @@
-export const $$rAFSchedulerFactory: (() => {
-    (tasks: any): void;
-    queue: any[];
-    waitUntilQuiet(fn: any): void;
-})[];
+/**
+ * @typedef {Function} RafSchedulerFunction
+ * @typedef {Object} RafSchedulerObject
+ * @property {Function} waitUntilQuiet - Function to wait until the animation frame is quiet.
+ * @typedef {RafSchedulerObject & RafSchedulerFunction} RafScheduler
+ */
+/**
+ * Creates a requestAnimationFrame scheduler.
+ * @returns {RafScheduler} The scheduler object.
+ */
+export function $$rAFSchedulerFactory(): RafScheduler;
+export type RafSchedulerFunction = Function;
+export type RafSchedulerObject = {
+    /**
+     * - Function to wait until the animation frame is quiet.
+     */
+    waitUntilQuiet: Function;
+};
+export type RafScheduler = RafSchedulerObject & RafSchedulerFunction;

package/types/core/parser/parse.d.ts

@@ -8,7 +8,7 @@
  * @property {function(any, any): any} assign - Assigns a value to a context. If value is not provided,
  */
 /**
- * @typedef {function } CompiledExpressionFunction
+ * @typedef {function} CompiledExpressionFunction
  * @param {import('../scope/scope').Scope} context - An object against which any expressions embedded in the strings are evaluated against (typically a scope object).
  * @param {object} [locals] - local variables context object, useful for overriding values in `context`.
  * @param {any} [assign]

package/types/directive/if/if.d.ts

@@ -1,11 +1,10 @@
-export function ngIfDirective($animate: any): {
-    multiElement: boolean;
-    transclude: string;
-    priority: number;
-    terminal: boolean;
-    restrict: string;
-    link($scope: any, $element: any, $attr: any, _ctrl: any, $transclude: any): void;
-};
+/**
+ *
+ * TODO // Add type for animate service
+ * @param {*}  $animate
+ * @returns {import("../../types").Directive}
+ */
+export function ngIfDirective($animate: any): import("../../types").Directive;
 export namespace ngIfDirective {
     let $inject: string[];
 }

package/types/shared/jqlite/jqlite.d.ts

@@ -193,10 +193,10 @@ export function removeElement(element: Element, keepData?: boolean): void;
 export function startingTag(elementStr: string): string;
 /**
  * Return the DOM siblings between the first and last node in the given array.
- * @param {Array} nodes An array-like object
+ * @param {JQLite|Array} nodes An array-like object
  * @returns {JQLite} the inputted object or a JQLite collection containing the nodes
  */
-export function getBlockNodes(nodes: any[]): JQLite;
+export function getBlockNodes(nodes: JQLite | any[]): JQLite;
 export function getBooleanAttrName(element: any, name: any): any;
 /**
  * Takes an array of elements, calls any `$destroy` event handlers, removes any data in cache, and finally removes any