@angular-wave/angular.ts 0.0.1

package/src/directive/ngShowHide.js

@@ -0,0 +1,255 @@
+const NG_HIDE_CLASS = "ng-hide";
+const NG_HIDE_IN_PROGRESS_CLASS = "ng-hide-animate";
+/**
+ * @ngdoc directive
+ * @name ngShow
+ * @multiElement
+ *
+ * @description
+ * The `ngShow` directive shows or hides the given HTML element based on the expression provided to
+ * the `ngShow` attribute.
+ *
+ * The element is shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
+ * The `.ng-hide` CSS class is predefined in AngularJS and sets the display style to none (using an
+ * `!important` flag). For CSP mode please add `angular-csp.css` to your HTML file (see
+ * {@link ng.directive:ngCsp ngCsp}).
+ *
+ * ```html
+ * <!-- when $scope.myValue is truthy (element is visible) -->
+ * <div ng-show="myValue"></div>
+ *
+ * <!-- when $scope.myValue is falsy (element is hidden) -->
+ * <div ng-show="myValue" class="ng-hide"></div>
+ * ```
+ *
+ * When the `ngShow` expression evaluates to a falsy value then the `.ng-hide` CSS class is added
+ * to the class attribute on the element causing it to become hidden. When truthy, the `.ng-hide`
+ * CSS class is removed from the element causing the element not to appear hidden.
+ *
+ * ## Why is `!important` used?
+ *
+ * You may be wondering why `!important` is used for the `.ng-hide` CSS class. This is because the
+ * `.ng-hide` selector can be easily overridden by heavier selectors. For example, something as
+ * simple as changing the display style on a HTML list item would make hidden elements appear
+ * visible. This also becomes a bigger issue when dealing with CSS frameworks.
+ *
+ * By using `!important`, the show and hide behavior will work as expected despite any clash between
+ * CSS selector specificity (when `!important` isn't used with any conflicting styles). If a
+ * developer chooses to override the styling to change how to hide an element then it is just a
+ * matter of using `!important` in their own CSS code.
+ *
+ * ### Overriding `.ng-hide`
+ *
+ * By default, the `.ng-hide` class will style the element with `display: none !important`. If you
+ * wish to change the hide behavior with `ngShow`/`ngHide`, you can simply overwrite the styles for
+ * the `.ng-hide` CSS class. Note that the selector that needs to be used is actually
+ * `.ng-hide:not(.ng-hide-animate)` to cope with extra animation classes that can be added.
+ *
+ * ```css
+ * .ng-hide:not(.ng-hide-animate) {
+ *   /&#42; These are just alternative ways of hiding an element &#42;/
+ *   display: block!important;
+ *   position: absolute;
+ *   top: -9999px;
+ *   left: -9999px;
+ * }
+ * ```
+ *
+ * By default you don't need to override anything in CSS and the animations will work around the
+ * display style.
+ *
+ * @animations
+ * | Animation                                           | Occurs                                                                                                        |
+ * |-----------------------------------------------------|---------------------------------------------------------------------------------------------------------------|
+ * | {@link $animate#addClass addClass} `.ng-hide`       | After the `ngShow` expression evaluates to a non truthy value and just before the contents are set to hidden. |
+ * | {@link $animate#removeClass removeClass} `.ng-hide` | After the `ngShow` expression evaluates to a truthy value and just before contents are set to visible.        |
+ *
+ * Animations in `ngShow`/`ngHide` work with the show and hide events that are triggered when the
+ * directive expression is true and false. This system works like the animation system present with
+ * `ngClass` except that you must also include the `!important` flag to override the display
+ * property so that the elements are not actually hidden during the animation.
+ *
+ * ```css
+ * /&#42; A working example can be found at the bottom of this page. &#42;/
+ * .my-element.ng-hide-add, .my-element.ng-hide-remove {
+ *   transition: all 0.5s linear;
+ * }
+ *
+ * .my-element.ng-hide-add { ... }
+ * .my-element.ng-hide-add.ng-hide-add-active { ... }
+ * .my-element.ng-hide-remove { ... }
+ * .my-element.ng-hide-remove.ng-hide-remove-active { ... }
+ * ```
+ *
+ * Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property
+ * to block during animation states - ngAnimate will automatically handle the style toggling for you.
+ *
+ * @element ANY
+ * @param {string} ngShow If the {@link guide/expression expression} is truthy/falsy then the
+ *                            element is shown/hidden respectively.
+ *
+ * @example
+ * A simple example, animating the element's opacity:
+
+* <hr />
+ *
+ * @knownIssue
+ *
+ * ### Flickering when using ngShow to toggle between elements
+ *
+ * When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
+ * happen that both the element to show and the element to hide are visible for a very short time.
+ *
+ * This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
+ * are defined for {@link ngShow} / {@link ngHide}.
+ * 
+ * There are several way to mitigate this problem:
+ *
+ * - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
+ * - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
+ * - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
+ * - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
+ * - Define an animation on the affected elements.
+ */
+export const ngShowDirective = [
+  "$animate",
+  ($animate) => ({
+    restrict: "A",
+    multiElement: true,
+    link(scope, element, attr) {
+      scope.$watch(attr.ngShow, (value) => {
+        // we're adding a temporary, animation-specific class for ng-hide since this way
+        // we can control when the element is actually displayed on screen without having
+        // to have a global/greedy CSS selector that breaks when other animations are run.
+        // Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845
+        $animate[value ? "removeClass" : "addClass"](element, NG_HIDE_CLASS, {
+          tempClasses: NG_HIDE_IN_PROGRESS_CLASS,
+        });
+      });
+    },
+  }),
+];
+
+/**
+ * @ngdoc directive
+ * @name ngHide
+ * @multiElement
+ *
+ * @description
+ * The `ngHide` directive shows or hides the given HTML element based on the expression provided to
+ * the `ngHide` attribute.
+ *
+ * The element is shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
+ * The `.ng-hide` CSS class is predefined in AngularJS and sets the display style to none (using an
+ * `!important` flag). For CSP mode please add `angular-csp.css` to your HTML file (see
+ * {@link ng.directive:ngCsp ngCsp}).
+ *
+ * ```html
+ * <!-- when $scope.myValue is truthy (element is hidden) -->
+ * <div ng-hide="myValue" class="ng-hide"></div>
+ *
+ * <!-- when $scope.myValue is falsy (element is visible) -->
+ * <div ng-hide="myValue"></div>
+ * ```
+ *
+ * When the `ngHide` expression evaluates to a truthy value then the `.ng-hide` CSS class is added
+ * to the class attribute on the element causing it to become hidden. When falsy, the `.ng-hide`
+ * CSS class is removed from the element causing the element not to appear hidden.
+ *
+ * ## Why is `!important` used?
+ *
+ * You may be wondering why `!important` is used for the `.ng-hide` CSS class. This is because the
+ * `.ng-hide` selector can be easily overridden by heavier selectors. For example, something as
+ * simple as changing the display style on a HTML list item would make hidden elements appear
+ * visible. This also becomes a bigger issue when dealing with CSS frameworks.
+ *
+ * By using `!important`, the show and hide behavior will work as expected despite any clash between
+ * CSS selector specificity (when `!important` isn't used with any conflicting styles). If a
+ * developer chooses to override the styling to change how to hide an element then it is just a
+ * matter of using `!important` in their own CSS code.
+ *
+ * ### Overriding `.ng-hide`
+ *
+ * By default, the `.ng-hide` class will style the element with `display: none !important`. If you
+ * wish to change the hide behavior with `ngShow`/`ngHide`, you can simply overwrite the styles for
+ * the `.ng-hide` CSS class. Note that the selector that needs to be used is actually
+ * `.ng-hide:not(.ng-hide-animate)` to cope with extra animation classes that can be added.
+ *
+ * ```css
+ * .ng-hide:not(.ng-hide-animate) {
+ *   /&#42; These are just alternative ways of hiding an element &#42;/
+ *   display: block!important;
+ *   position: absolute;
+ *   top: -9999px;
+ *   left: -9999px;
+ * }
+ * ```
+ *
+ * By default you don't need to override in CSS anything and the animations will work around the
+ * display style.
+ *
+ * @animations
+ * | Animation                                           | Occurs                                                                                                     |
+ * |-----------------------------------------------------|------------------------------------------------------------------------------------------------------------|
+ * | {@link $animate#addClass addClass} `.ng-hide`       | After the `ngHide` expression evaluates to a truthy value and just before the contents are set to hidden.  |
+ * | {@link $animate#removeClass removeClass} `.ng-hide` | After the `ngHide` expression evaluates to a non truthy value and just before contents are set to visible. |
+ *
+ * Animations in `ngShow`/`ngHide` work with the show and hide events that are triggered when the
+ * directive expression is true and false. This system works like the animation system present with
+ * `ngClass` except that you must also include the `!important` flag to override the display
+ * property so that the elements are not actually hidden during the animation.
+ *
+ * ```css
+ * /&#42; A working example can be found at the bottom of this page. &#42;/
+ * .my-element.ng-hide-add, .my-element.ng-hide-remove {
+ *   transition: all 0.5s linear;
+ * }
+ *
+ * .my-element.ng-hide-add { ... }
+ * .my-element.ng-hide-add.ng-hide-add-active { ... }
+ * .my-element.ng-hide-remove { ... }
+ * .my-element.ng-hide-remove.ng-hide-remove-active { ... }
+ * ```
+ *
+ * Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property
+ * to block during animation states - ngAnimate will automatically handle the style toggling for you.
+ *
+ * @element ANY
+ * @param {string} ngHide If the {@link guide/expression expression} is truthy/falsy then the
+ *                            element is hidden/shown respectively.
+ *
+ * @knownIssue
+ *
+ * ### Flickering when using ngHide to toggle between elements
+ *
+ * When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
+ * happen that both the element to show and the element to hide are visible for a very short time.
+ *
+ * This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
+ * are defined for {@link ngShow} / {@link ngHide}. Internet Explorer is affected more often than
+ * other browsers.
+ *
+ * There are several way to mitigate this problem:
+ *
+ * - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
+ * - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
+ * - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
+ * - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
+ * - Define an animation on the affected elements.
+ */
+export const ngHideDirective = [
+  "$animate",
+  ($animate) => ({
+    restrict: "A",
+    multiElement: true,
+    link(scope, element, attr) {
+      scope.$watch(attr.ngHide, (value) => {
+        // The comment inside of the ngShowDirective explains why we add and
+        // remove a temporary class for the show/hide animation
+        $animate[value ? "addClass" : "removeClass"](element, NG_HIDE_CLASS, {
+          tempClasses: NG_HIDE_IN_PROGRESS_CLASS,
+        });
+      });
+    },
+  }),
+];

package/src/directive/ngSwitch.js

@@ -0,0 +1,178 @@
+import { forEach } from "../core/utils";
+import { getBlockNodes } from "../jqLite";
+
+/**
+ * @ngdoc directive
+ * @name ngSwitch
+ * @restrict EA
+ *
+ * @description
+ * The `ngSwitch` directive is used to conditionally swap DOM structure on your template based on a scope expression.
+ * Elements within `ngSwitch` but without `ngSwitchWhen` or `ngSwitchDefault` directives will be preserved at the location
+ * as specified in the template.
+ *
+ * The directive itself works similar to ngInclude, however, instead of downloading template code (or loading it
+ * from the template cache), `ngSwitch` simply chooses one of the nested elements and makes it visible based on which element
+ * matches the value obtained from the evaluated expression. In other words, you define a container element
+ * (where you place the directive), place an expression on the **`on="..."` attribute**
+ * (or the **`ng-switch="..."` attribute**), define any inner elements inside of the directive and place
+ * a when attribute per element. The when attribute is used to inform ngSwitch which element to display when the on
+ * expression is evaluated. If a matching expression is not found via a when attribute then an element with the default
+ * attribute is displayed.
+ *
+ * <div class="alert alert-info">
+ * Be aware that the attribute values to match against cannot be expressions. They are interpreted
+ * as literal string values to match against.
+ * For example, **`ng-switch-when="someVal"`** will match against the string `"someVal"` not against the
+ * value of the expression `$scope.someVal`.
+ * </div>
+
+ * @animations
+ * | Animation                        | Occurs                              |
+ * |----------------------------------|-------------------------------------|
+ * | {@link ng.$animate#enter enter}  | after the ngSwitch contents change and the matched child element is placed inside the container |
+ * | {@link ng.$animate#leave leave}  | after the ngSwitch contents change and just before the former contents are removed from the DOM |
+ *
+ * @usage
+ *
+ * ```
+ * <ANY ng-switch="expression">
+ *   <ANY ng-switch-when="matchValue1">...</ANY>
+ *   <ANY ng-switch-when="matchValue2">...</ANY>
+ *   <ANY ng-switch-default>...</ANY>
+ * </ANY>
+ * ```
+ *
+ *
+ * @scope
+ * @priority 1200
+ * @param {*} ngSwitch|on expression to match against <code>ng-switch-when</code>.
+ * On child elements add:
+ *
+ * * `ngSwitchWhen`: the case statement to match against. If match then this
+ *   case will be displayed. If the same match appears multiple times, all the
+ *   elements will be displayed. It is possible to associate multiple values to
+ *   the same `ngSwitchWhen` by defining the optional attribute
+ *   `ngSwitchWhenSeparator`. The separator will be used to split the value of
+ *   the `ngSwitchWhen` attribute into multiple tokens, and the element will show
+ *   if any of the `ngSwitch` evaluates to any of these tokens.
+ * * `ngSwitchDefault`: the default case when no other case match. If there
+ *   are multiple default cases, all of them will be displayed when no other
+ *   case match.
+ *
+ */
+export const ngSwitchDirective = [
+  "$animate",
+  "$compile",
+  ($animate, $compile) => ({
+    require: "ngSwitch",
+
+    // asks for $scope to fool the BC controller module
+    controller: [
+      "$scope",
+      function NgSwitchController() {
+        this.cases = {};
+      },
+    ],
+    link(scope, element, attr, ngSwitchController) {
+      const watchExpr = attr.ngSwitch || attr.on;
+      let selectedTranscludes = [];
+      const selectedElements = [];
+      const previousLeaveAnimations = [];
+      const selectedScopes = [];
+
+      const spliceFactory = function (array, index) {
+        return function (response) {
+          if (response !== false) array.splice(index, 1);
+        };
+      };
+
+      scope.$watch(watchExpr, (value) => {
+        let i;
+        let ii;
+
+        // Start with the last, in case the array is modified during the loop
+        while (previousLeaveAnimations.length) {
+          $animate.cancel(previousLeaveAnimations.pop());
+        }
+
+        for (i = 0, ii = selectedScopes.length; i < ii; ++i) {
+          const selected = getBlockNodes(selectedElements[i].clone);
+          selectedScopes[i].$destroy();
+          const runner = (previousLeaveAnimations[i] =
+            $animate.leave(selected));
+          runner.done(spliceFactory(previousLeaveAnimations, i));
+        }
+
+        selectedElements.length = 0;
+        selectedScopes.length = 0;
+
+        if (
+          (selectedTranscludes =
+            ngSwitchController.cases[`!${value}`] ||
+            ngSwitchController.cases["?"])
+        ) {
+          forEach(selectedTranscludes, (selectedTransclude) => {
+            selectedTransclude.transclude((caseElement, selectedScope) => {
+              selectedScopes.push(selectedScope);
+              const anchor = selectedTransclude.element;
+              caseElement[caseElement.length++] =
+                $compile.$$createComment("end ngSwitchWhen");
+              const block = { clone: caseElement };
+
+              selectedElements.push(block);
+              $animate.enter(caseElement, anchor.parent(), anchor);
+            });
+          });
+        }
+      });
+    },
+  }),
+];
+
+/**
+ * @returns {angular.IDirective}
+ */
+export function ngSwitchWhenDirective() {
+  return {
+    transclude: "element",
+    priority: 1200,
+    restrict: "EA",
+    require: "^ngSwitch",
+    multiElement: true,
+    link(scope, element, attrs, ctrl, $transclude) {
+      const cases = attrs.ngSwitchWhen
+        .split(attrs.ngSwitchWhenSeparator)
+        .sort()
+        .filter(
+          // Filter duplicate cases
+          (element, index, array) => array[index - 1] !== element,
+        );
+
+      cases.forEach((whenCase) => {
+        ctrl.cases[`!${whenCase}`] = ctrl.cases[`!${whenCase}`] || [];
+        ctrl.cases[`!${whenCase}`].push({
+          transclude: $transclude,
+          element,
+        });
+      });
+    },
+  };
+}
+
+/**
+ * @returns {angular.IDirective}
+ */
+export function ngSwitchDefaultDirective() {
+  return {
+    restrict: "EA",
+    transclude: "element",
+    priority: 1200,
+    require: "^ngSwitch",
+    multiElement: true,
+    link(_scope, element, _attr, ctrl, $transclude) {
+      ctrl.cases["?"] = ctrl.cases["?"] || [];
+      ctrl.cases["?"].push({ transclude: $transclude, element });
+    },
+  };
+}

package/src/directive/ngTransclude.js

@@ -0,0 +1,98 @@
+import { minErr } from "../core/utils";
+import { startingTag } from "../jqLite";
+
+/**
+ * @ngdoc directive
+ * @name ngTransclude
+ * @restrict EAC
+ *
+ * @description
+ * Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
+ *
+ * You can specify that you want to insert a named transclusion slot, instead of the default slot, by providing the slot name
+ * as the value of the `ng-transclude` or `ng-transclude-slot` attribute.
+ *
+ * If the transcluded content is not empty (i.e. contains one or more DOM nodes, including whitespace text nodes), any existing
+ * content of this element will be removed before the transcluded content is inserted.
+ * If the transcluded content is empty (or only whitespace), the existing content is left intact. This lets you provide fallback
+ * content in the case that no transcluded content is provided.
+ *
+ * @element ANY
+ *
+ * @param {string} ngTransclude|ngTranscludeSlot the name of the slot to insert at this point. If this is not provided, is empty
+ *                                               or its value is the same as the name of the attribute then the default slot is used.
+ */
+const ngTranscludeMinErr = minErr("ngTransclude");
+export const ngTranscludeDirective = [
+  "$compile",
+  function ($compile) {
+    return {
+      restrict: "EAC",
+      compile: function ngTranscludeCompile(tElement) {
+        // Remove and cache any original content to act as a fallback
+        const fallbackLinkFn = $compile(tElement[0].childNodes);
+        tElement.empty();
+
+        return function ngTranscludePostLink(
+          $scope,
+          $element,
+          $attrs,
+          controller,
+          $transclude,
+        ) {
+          if (!$transclude) {
+            throw ngTranscludeMinErr(
+              "orphan",
+              "Illegal use of ngTransclude directive in the template! " +
+                "No parent directive that requires a transclusion found. " +
+                "Element: {0}",
+              startingTag($element),
+            );
+          }
+
+          // If the attribute is of the form: `ng-transclude="ng-transclude"` then treat it like the default
+          if ($attrs.ngTransclude === $attrs.$attr.ngTransclude) {
+            $attrs.ngTransclude = "";
+          }
+          const slotName = $attrs.ngTransclude || $attrs.ngTranscludeSlot;
+
+          // If the slot is required and no transclusion content is provided then this call will throw an error
+          $transclude(ngTranscludeCloneAttachFn, null, slotName);
+
+          // If the slot is optional and no transclusion content is provided then use the fallback content
+          if (slotName && !$transclude.isSlotFilled(slotName)) {
+            useFallbackContent();
+          }
+
+          function ngTranscludeCloneAttachFn(clone, transcludedScope) {
+            if (clone.length && notWhitespace(clone)) {
+              $element.append(clone);
+            } else {
+              useFallbackContent();
+              // There is nothing linked against the transcluded scope since no content was available,
+              // so it should be safe to clean up the generated scope.
+              transcludedScope.$destroy();
+            }
+          }
+
+          function useFallbackContent() {
+            // Since this is the fallback content rather than the transcluded content,
+            // we link against the scope of this directive rather than the transcluded scope
+            fallbackLinkFn($scope, (clone) => {
+              $element.append(clone);
+            });
+          }
+
+          function notWhitespace(nodes) {
+            for (let i = 0, ii = nodes.length; i < ii; i++) {
+              const node = nodes[i];
+              if (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim()) {
+                return true;
+              }
+            }
+          }
+        };
+      },
+    };
+  },
+];

package/src/directive/non-bindable.js

@@ -0,0 +1,11 @@
+/**
+ *
+ * @returns {angular.IDirective}
+ */
+export function ngNonBindableDirective() {
+  return {
+    restrict: "EA",
+    terminal: true,
+    priority: 1000,
+  };
+}

package/src/directive/non-bindable.md

@@ -0,0 +1,17 @@
+## `ngNonBindable` Directive
+
+### Restrict
+
+`AC`
+
+### Priority
+
+1000
+
+### Element
+
+`ANY`
+
+### Description
+
+The `ngNonBindable` directive tells AngularJS not to compile or bind the contents of the current DOM element, including directives on the element itself that have a lower priority than `ngNonBindable`. This is useful if the element contains what appears to be AngularJS directives and bindings but which should be ignored by AngularJS. This could be the case if you have a site that displays snippets of code, for instance.

package/src/directive/script.js

@@ -0,0 +1,30 @@
+/**
+ * @ngdoc directive
+ * @name script
+ * @restrict E
+ *
+ * @description
+ * Load the content of a `<script>` element into {@link ng.$templateCache `$templateCache`}, so that the
+ * template can be used by {@link ng.directive:ngInclude `ngInclude`},
+ * {@link ngRoute.directive:ngView `ngView`}, or {@link guide/directive directives}. The type of the
+ * `<script>` element must be specified as `text/ng-template`, and a cache name for the template must be
+ * assigned through the element's `id`, which can then be used as a directive's `templateUrl`.
+ *
+ * @param {string} type Must be set to `'text/ng-template'`.
+ * @param {string} id Cache name of the template.
+ */
+export const scriptDirective = [
+  "$templateCache",
+  ($templateCache) => ({
+    restrict: "E",
+    terminal: true,
+    compile(element, attr) {
+      if (attr.type === "text/ng-template") {
+        const templateUrl = attr.id;
+        const { text } = element[0];
+
+        $templateCache.put(templateUrl, text);
+      }
+    },
+  }),
+];