@angular-wave/angular.ts 0.0.51 → 0.0.52

package/package.json

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

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

@@ -1,105 +1,25 @@
 import { isString } from "../shared/utils";
 import { NG_ANIMATE_CHILDREN_DATA } from "./shared";
 
-/**
- * @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;
+$$AnimateChildrenDirective.$inject = ["$interpolate"];
+export function $$AnimateChildrenDirective($interpolate) {
+  return {
+    link(scope, element, attrs) {
+      const val = attrs.ngAnimateChildren;
+      if (isString(val) && val.length === 0) {
+        // empty attribute
+        element.data(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);
       }
 
-      .item.ng-enter {
-        transform: translateX(50px);
+      function setData(value) {
+        value = value === "on" || value === "true";
+        element.data(NG_ANIMATE_CHILDREN_DATA, value);
       }
-
-      .item.ng-enter-active {
-        transform: translateX(0);
-      }
-    </file>
-    <file name="script.js">
-      angular.module('ngAnimateChildren', ['ngAnimate'])
-        .controller('MainController', function MainController() {
-          this.animateChildren = false;
-          this.enterElement = false;
-        });
-    </file>
-  </example>
- */
-export const $$AnimateChildrenDirective = [
-  "$interpolate",
-  function ($interpolate) {
-    return {
-      link(scope, element, attrs) {
-        const val = attrs.ngAnimateChildren;
-        if (isString(val) && val.length === 0) {
-          // empty attribute
-          element.data(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";
-          element.data(NG_ANIMATE_CHILDREN_DATA, value);
-        }
-      },
-    };
-  },
-];
+    },
+  };
+}

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

@@ -0,0 +1,80 @@
+/\*\*
+
+- @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', ['ngAnimate'])
+         .controller('MainController', function MainController() {
+           this.animateChildren = false;
+           this.enterElement = false;
+         });
+     </file>
+   </example>
+  */