@angular-wave/angular.ts 0.9.4 → 0.9.6

package/src/directive/if/if.js

@@ -1,72 +0,0 @@
-import { removeElement } from "../../shared/dom.js";
-import { hasAnimate } from "../../shared/utils.js";
-
-ngIfDirective.$inject = ["$animate"];
-/**
- * @param {*}  $animate
- * @returns {import("../../interface.ts").Directive}
- */
-export function ngIfDirective($animate) {
-  return {
-    transclude: "element",
-    priority: 600,
-    terminal: true,
-    restrict: "A",
-    /**
-     *
-     * @param {import("../../core/scope/scope.js").Scope} $scope
-     * @param {Element} $element
-     * @param {import("../../core/compile/attributes.js").Attributes} $attr
-     * @param {Object} _ctrl
-     * @param {*} $transclude
-     */
-    link($scope, $element, $attr, _ctrl, $transclude) {
-      /** @type {Element} */
-      let block;
-
-      /** @type {import('../../core/scope/scope.js').Scope} */
-      let childScope;
-
-      let previousElements;
-
-      $scope.$watch($attr["ngIf"], (value) => {
-        if (value) {
-          if (!childScope) {
-            $transclude((clone, newScope) => {
-              childScope = newScope;
-              // Note: We only need the first/last node of the cloned nodes.
-              // However, we need to keep the reference to the dom wrapper as it might be changed later
-              // by a directive with templateUrl when its template arrives.
-              block = clone;
-              if (hasAnimate(clone)) {
-                $animate.enter(clone, $element.parentElement, $element);
-              } else {
-                $element.after(clone);
-              }
-            });
-          }
-        } else {
-          if (previousElements) {
-            removeElement(previousElements);
-            previousElements = null;
-          }
-          if (childScope) {
-            childScope.$destroy();
-            childScope = null;
-          }
-          if (block) {
-            previousElements = block;
-            if (hasAnimate(previousElements)) {
-              $animate.leave(previousElements).done((response) => {
-                if (response !== false) previousElements = null;
-              });
-            } else {
-              $element.nextElementSibling.remove();
-            }
-            block = null;
-          }
-        }
-      });
-    },
-  };
-}

package/src/directive/if/if.md

@@ -1,76 +0,0 @@
-@name ngIf
-@restrict A
-
-@description
-The `ngIf` directive removes or recreates a portion of the DOM tree based on an
-{expression}. If the expression assigned to `ngIf` evaluates to a false
-value then the element is removed from the DOM, otherwise a clone of the
-element is reinserted into the DOM.
-
-`ngIf` differs from `ngShow` and `ngHide` in that `ngIf` completely removes and recreates the
-element in the DOM rather than changing its visibility via the `display` css property. A common
-case when this difference is significant is when using css selectors that rely on an element's
-position within the DOM, such as the `:first-child` or `:last-child` pseudo-classes.
-
-Note that when an element is removed using `ngIf` its scope is destroyed and a new scope
-is created when the element is restored. The scope created within `ngIf` inherits from
-its parent scope using
-[prototypal inheritance](https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance).
-An important implication of this is if `ngModel` is used within `ngIf` to bind to
-a javascript primitive defined in the parent scope. In this case any modifications made to the
-variable within the child scope will override (hide) the value in the parent scope.
-
-Also, `ngIf` recreates elements using their compiled state. An example of this behavior
-is if an element's class attribute is directly modified after it's compiled, using something like
-jQuery's `.addClass()` method, and the element is later removed. When `ngIf` recreates the element
-the added class will be lost because the original compiled state is used to regenerate the element.
-
-Additionally, 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 |
-|----------------------------------|-------------------------------------|
-| {@link ng.$animate#enter enter} | just after the `ngIf` contents change and a new DOM element is created and injected into the `ngIf` container |
-| {@link ng.$animate#leave leave} | just before the `ngIf` contents are removed from the DOM |
-
-- @element ANY
-  @scope
-  @priority 600
-  @param {string} ngIf If the {@link guide/expression expression} is falsy then
-  the element is removed from the DOM tree. If it is truthy a copy of the compiled
-  element is added to the DOM tree.
-
-- @example
-  <example module="ngAnimate" deps="angular-animate.js" animations="true" name="ng-if">
-  <file name="index.html">
-  <label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
-  Show when checked:
-  <span ng-if="checked" class="animate-if">
-  This is removed when the checkbox is unchecked.
-  </span>
-  </file>
-  <file name="animations.css">
-  .animate-if {
-  background:white;
-  border:1px solid black;
-  padding:10px;
-  }
-
-         .animate-if.ng-enter, .animate-if.ng-leave {
-           transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-         }
-
-         .animate-if.ng-enter,
-         .animate-if.ng-leave.ng-leave-active {
-           opacity:0;
-         }
-
-         .animate-if.ng-leave,
-         .animate-if.ng-enter.ng-enter-active {
-           opacity:1;
-         }
-
-       </file>
-
-     </example>

package/src/directive/if/if.spec.js

@@ -1,293 +0,0 @@
-import {
-  createElementFromHTML,
-  dealoc,
-  getCacheData,
-  setCacheData,
-} from "../../shared/dom.js";
-import { Angular } from "../../angular.js";
-import { wait } from "../../shared/test-utils.js";
-
-describe("ngIf", () => {
-  describe("basic", () => {
-    let $scope;
-    let $compile;
-    let element;
-    let $compileProvider;
-    let $rootScope;
-    let injector;
-    let angular;
-
-    beforeEach(function () {
-      dealoc(document.getElementById("app"));
-      angular = window.angular = new Angular();
-      window.angular.module("test", []);
-      injector = window.angular.bootstrap(document.getElementById("app"), [
-        "test",
-        function (_$compileProvider_) {
-          $compileProvider = _$compileProvider_;
-        },
-      ]);
-      injector.invoke((_$rootScope_, _$compile_) => {
-        $rootScope = _$rootScope_;
-        $scope = $rootScope.$new();
-        $compile = _$compile_;
-        element = $compile("<div></div>")($scope);
-      });
-    });
-
-    function makeIf() {
-      element = createElementFromHTML("<div></div>");
-      Array.from(arguments).forEach((expr) => {
-        element.append(
-          createElementFromHTML(
-            `<div class="my-class" ng-if="${expr}"><div>Hi</div></div>`,
-          ),
-        );
-      });
-      let res = $compile(element);
-      element = res($scope);
-    }
-
-    it("should immediately remove the element and replace it with comment node if condition is falsy", async () => {
-      makeIf("false", "undefined", "null", "NaN", "''", "0");
-      await wait();
-      Array.from(element.children).forEach((node) => {
-        expect(node.nodeType).toBe(Node.COMMENT_NODE);
-      });
-      expect().toBe();
-    });
-
-    it("should leave the element if condition is true", async () => {
-      makeIf("true");
-      await wait();
-      expect(element.children.length).toBe(1);
-    });
-
-    it("should leave the element if the condition is a non-empty string", async () => {
-      makeIf("'f'", "'0'", "'false'", "'no'", "'n'", "'[]'");
-      await wait();
-      expect(element.children.length).toBe(6);
-    });
-
-    it("should leave the element if the condition is an object", async () => {
-      makeIf("[]", "{}");
-      await wait();
-      expect(element.children.length).toBe(2);
-    });
-
-    it("should react to changes on a property of an object", async () => {
-      $scope.a = {
-        b: true,
-      };
-      makeIf("a.b");
-      await wait();
-      expect(element.children.length).toBe(1);
-
-      $scope.a.b = false;
-      await wait();
-      expect(element.childNodes[0].nodeType).toBe(Node.COMMENT_NODE);
-    });
-
-    it("should react to changes on a property of a nested object", async () => {
-      $scope.a = {
-        b: {
-          c: true,
-        },
-      };
-      makeIf("a.b.c");
-      await wait();
-      expect(element.children.length).toBe(1);
-
-      $scope.a.b.c = false;
-      await wait();
-      expect(element.childNodes[0].nodeType).toBe(Node.COMMENT_NODE);
-
-      $scope.a.b.c = true;
-      await wait();
-      expect(element.children.length).toBe(1);
-    });
-
-    it("should not add the element twice if the condition goes from true to true", async () => {
-      $scope.hello = "true1";
-      makeIf("hello");
-      await wait();
-      expect(element.children.length).toBe(1);
-      $scope.$apply('hello = "true2"');
-      await wait();
-      expect(element.children.length).toBe(1);
-    });
-
-    it("should not recreate the element if the condition goes from true to true", async () => {
-      $scope.hello = "true1";
-      makeIf("hello");
-      await wait();
-      expect(element.children.length).toBe(1);
-      setCacheData(element.children[0], "flag", true);
-      $scope.$apply('hello = "true2"');
-      await wait();
-      expect(element.children.length).toBe(1);
-      expect(getCacheData(element.children[0], "flag")).toBe(true);
-    });
-
-    it("should create then remove the element if condition changes", async () => {
-      $scope.hello = true;
-      makeIf("hello");
-      await wait();
-      expect(element.children.length).toBe(1);
-      $scope.$apply("hello = false");
-      await wait();
-      expect(element.childNodes[0].nodeType).toBe(Node.COMMENT_NODE);
-    });
-
-    it("should create a new scope every time the expression evaluates to true", async () => {
-      $scope.$apply("value = true");
-      await wait();
-      element.append(
-        createElementFromHTML(
-          '<div ng-if="value"><span ng-init="value=false"></span></div>',
-        ),
-      );
-      $compile(element)($scope);
-      await wait();
-      expect(element.children.length).toBe(1);
-    });
-
-    it("should destroy the child scope every time the expression evaluates to false", async () => {
-      $scope.value = true;
-      element.append(createElementFromHTML('<div ng-if="value"></div>'));
-      $compile(element)($scope);
-      await wait();
-      const childScope = $scope.$handler.$children[0];
-      let destroyed = false;
-
-      childScope.$on("$destroy", () => {
-        destroyed = true;
-      });
-
-      $scope.value = false;
-
-      await wait();
-
-      expect(destroyed).toBe(true);
-    });
-
-    it("should play nice with other elements beside it", async () => {
-      $scope.values = [1, 2, 3, 4];
-
-      element.innerHTML =
-        '<div ng-repeat="i in values">1</div>' +
-        '<div ng-if="values.length==4">1</div>' +
-        '<div ng-repeat="i in values">1</div>';
-
-      $compile(element)($scope);
-      await wait();
-      expect(element.children.length).toBe(9);
-
-      $scope.$apply("values.splice(0,1)");
-      await wait();
-      expect(element.children.length).toBe(6);
-
-      $scope.$apply("values.push(1)");
-      await wait();
-      expect(element.children.length).toBe(9);
-    });
-
-    it("should play nice with ngInclude on the same element", (done) => {
-      element.innerHTML = `<div><div ng-if="value=='first'" ng-include="'/mock/hello'"></div></div>`;
-
-      window.angular.module("myModule", []).run(($rootScope) => {
-        $rootScope.value = "first";
-      });
-      injector = angular.bootstrap(element, ["myModule"]);
-
-      setTimeout(() => {
-        expect(element.textContent).toBe("Hello");
-        done();
-      }, 300);
-    });
-
-    it("should restore the element to its compiled state", async () => {
-      $scope.value = true;
-      makeIf("value");
-      await wait();
-
-      expect(element.children.length).toBe(1);
-      element.children[0].classList.remove("my-class");
-      expect(element.children[0].className).not.toContain("my-class");
-
-      $scope.$apply("value = false");
-      await wait();
-
-      expect(element.childNodes[0].nodeType).toBe(Node.COMMENT_NODE);
-
-      $scope.$apply("value = true");
-      await wait();
-      expect(element.children.length).toBe(1);
-      expect(element.children[0].className).toContain("my-class");
-    });
-
-    it("should work when combined with an ASYNC template that loads after the first digest", async () => {
-      $compileProvider.directive("test", () => ({
-        templateUrl: "/public/test.html",
-      }));
-
-      element.innerHTML = '<div ng-if="show" test></div>';
-      $compile(element)($rootScope);
-      $rootScope.show = true;
-      await wait();
-      expect(element.textContent).toBe("");
-
-      await wait(100);
-
-      expect(element.textContent.trim()).toBe("hello");
-
-      $rootScope.show = false;
-      await wait();
-      expect(element.textContent).toBe("");
-    });
-
-    describe("and transcludes", () => {
-      it("should allow access to directive controller from children when used in a replace template", async () => {
-        let controller;
-        const { directive } = $compileProvider;
-        directive("template", () => ({
-          template: '<div ng-if="true"><span test></span></div>',
-          replace: true,
-          controller() {
-            this.flag = true;
-          },
-        }));
-        directive("test", () => ({
-          require: "^template",
-          link(scope, el, attr, ctrl) {
-            controller = ctrl;
-          },
-        }));
-        $compile("<div><div template></div></div>")($rootScope);
-        await wait();
-        expect(controller.flag).toBe(true);
-      });
-
-      it("should use the correct transcluded scope", async () => {
-        $compileProvider.directive("iso", () => ({
-          link(scope) {
-            scope.val = "value in iso scope";
-          },
-          restrict: "E",
-          transclude: true,
-          template:
-            '<div ng-if="true">val={{val}}-<div ng-transclude></div></div>',
-          scope: {},
-        }));
-        $rootScope.val = "transcluded content";
-        const element = $compile('<iso><span ng-bind="val"></span></iso>')(
-          $rootScope,
-        );
-        await wait();
-        expect(element.textContent.trim()).toEqual(
-          "val=value in iso scope-transcluded content",
-        );
-      });
-    });
-  });
-});

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

@@ -1,114 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-const TEST_URL = "src/directive/if/if.html";
-
-test("unit tests contain no errors", async ({ page }) => {
-  await page.goto(TEST_URL);
-  await page.content();
-
-  await expect(page.locator(".jasmine-overall-result")).toHaveText(
-    / 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(100);
-    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/);
-  });
-
-  // TODO
-  // test("should work with svg elements when the svg container is transcluded", async ({
-  //   page,
-  // }) => {
-  //   await page.goto("src/directive/if/if-animate-svg.html");
-  //   await page.content();
-  //   await page.click('button:has-text("Fade In!")');
-  //   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.html

@@ -1,19 +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" />
-    <link rel="stylesheet" href="/jasmine/jasmine.css" />
-    <link rel="stylesheet" href="/public/jasmine-helper.css" />
-    <script src="/jasmine/jasmine.js"></script>
-    <script src="/jasmine/jasmine-html.js"></script>
-    <script src="/jasmine/boot0.js"></script>
-    <script src="/jasmine/boot1.js"></script>
-    <script type="module" src="/src/directive/include/include.spec.js"></script>
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>