@angular-wave/angular.ts 0.0.1

package/src/directive/a.js

@@ -0,0 +1,37 @@
+/**
+ * @ngdoc directive
+ * @name a
+ * @restrict E
+ *
+ * @description
+ * Modifies the default behavior of the html a tag so that the default action is prevented when
+ * the href attribute is empty.
+ *
+ * For dynamically creating `href` attributes for a tags, see the {@link ng.ngHref `ngHref`} directive.
+ */
+export function htmlAnchorDirective() {
+  return {
+    restrict: "E",
+    compile: (_element, attr) => {
+      if (!attr.href && !attr.xlinkHref) {
+        return (_scope, element) => {
+          // If the linked element is not an anchor tag anymore, do nothing
+          if (element[0].nodeName.toLowerCase() !== "a") return;
+
+          // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute.
+          const href =
+            toString.call(element.prop("href")) === "[object SVGAnimatedString]"
+              ? "xlink:href"
+              : "href";
+          element.on("click", (event) => {
+            // if we have no href url, then don't navigate anywhere.
+            if (!element.attr(href)) {
+              event.preventDefault();
+            }
+          });
+        };
+      }
+      return () => {};
+    },
+  };
+}

package/src/directive/attrs.js

@@ -0,0 +1,283 @@
+import { BOOLEAN_ATTR } from "../jqLite";
+import { forEach, directiveNormalize } from "../core/utils";
+import { ALIASED_ATTR } from "../constants";
+
+/**
+ * @ngdoc directive
+ * @name ngHref
+ * @restrict A
+ * @priority 99
+ *
+ * @description
+ * Using AngularJS markup like `{{hash}}` in an href attribute will
+ * make the link go to the wrong URL if the user clicks it before
+ * AngularJS has a chance to replace the `{{hash}}` markup with its
+ * value. Until AngularJS replaces the markup the link will be broken
+ * and will most likely return a 404 error. The `ngHref` directive
+ * solves this problem.
+ *
+ * The wrong way to write it:
+ * ```html
+ * <a href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
+ * ```
+ *
+ * The correct way to write it:
+ * ```html
+ * <a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
+ * ```
+ *
+ * @element A
+ * @param {template} ngHref any string which can contain `{{}}` markup.
+ *
+ */
+
+export const REGEX_STRING_REGEXP = /^\/(.+)\/([a-z]*)$/;
+/**
+ * @ngdoc directive
+ * @name ngSrc
+ * @restrict A
+ * @priority 99
+ *
+ * @description
+ * Using AngularJS markup like `{{hash}}` in a `src` attribute doesn't
+ * work right: The browser will fetch from the URL with the literal
+ * text `{{hash}}` until AngularJS replaces the expression inside
+ * `{{hash}}`. The `ngSrc` directive solves this problem.
+ *
+ * The buggy way to write it:
+ * ```html
+ * <img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>
+ * ```
+ *
+ * The correct way to write it:
+ * ```html
+ * <img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />
+ * ```
+ *
+ * @element IMG
+ * @param {template} ngSrc any string which can contain `{{}}` markup.
+ */
+
+/**
+ * @ngdoc directive
+ * @name ngSrcset
+ * @restrict A
+ * @priority 99
+ *
+ * @description
+ * Using AngularJS markup like `{{hash}}` in a `srcset` attribute doesn't
+ * work right: The browser will fetch from the URL with the literal
+ * text `{{hash}}` until AngularJS replaces the expression inside
+ * `{{hash}}`. The `ngSrcset` directive solves this problem.
+ *
+ * The buggy way to write it:
+ * ```html
+ * <img srcset="http://www.gravatar.com/avatar/{{hash}} 2x" alt="Description"/>
+ * ```
+ *
+ * The correct way to write it:
+ * ```html
+ * <img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x" alt="Description" />
+ * ```
+ *
+ * @element IMG
+ * @param {template} ngSrcset any string which can contain `{{}}` markup.
+ */
+
+/**
+ * @ngdoc directive
+ * @name ngDisabled
+ * @restrict A
+ * @priority 100
+ *
+ * @description
+ *
+ * This directive sets the `disabled` attribute on the element (typically a form control,
+ * e.g. `input`, `button`, `select` etc.) if the
+ * {@link guide/expression expression} inside `ngDisabled` evaluates to truthy.
+ *
+ * A special directive is necessary because we cannot use interpolation inside the `disabled`
+ * attribute. See the {@link guide/interpolation interpolation guide} for more info.
+ *
+ * @param {string} ngDisabled If the {@link guide/expression expression} is truthy,
+ *     then the `disabled` attribute will be set on the element
+ */
+
+/**
+ * @ngdoc directive
+ * @name ngChecked
+ * @restrict A
+ * @priority 100
+ *
+ * @description
+ * Sets the `checked` attribute on the element, if the expression inside `ngChecked` is truthy.
+ *
+ * Note that this directive should not be used together with {@link ngModel `ngModel`},
+ * as this can lead to unexpected behavior.
+ *
+ * A special directive is necessary because we cannot use interpolation inside the `checked`
+ * attribute. See the {@link guide/interpolation interpolation guide} for more info.
+ *
+ * @element INPUT
+ * @param {string} ngChecked If the {@link guide/expression expression} is truthy,
+ *     then the `checked` attribute will be set on the element
+ */
+
+/**
+ *
+ * @description
+ *
+ * Sets the `readonly` attribute on the element, if the expression inside `ngReadonly` is truthy.
+ * Note that `readonly` applies only to `input` elements with specific types. [See the input docs on
+ * MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) for more information.
+ *
+ * A special directive is necessary because we cannot use interpolation inside the `readonly`
+ * attribute. See the {@link guide/interpolation interpolation guide} for more info.
+ * @element INPUT
+ * @param {string} ngReadonly If the {@link guide/expression expression} is truthy,
+ *     then special attribute "readonly" will be set on the element
+ */
+
+/**
+ * @ngdoc directive
+ * @name ngSelected
+ * @restrict A
+ * @priority 100
+ *
+ * @description
+ *
+ * Sets the `selected` attribute on the element, if the expression inside `ngSelected` is truthy.
+ *
+ * A special directive is necessary because we cannot use interpolation inside the `selected`
+ * attribute. See the {@link guide/interpolation interpolation guide} for more info.
+ *
+ * <div class="alert alert-warning">
+ *   **Note:** `ngSelected` does not interact with the `select` and `ngModel` directives, it only
+ *   sets the `selected` attribute on the element. If you are using `ngModel` on the select, you
+ *   should not use `ngSelected` on the options, as `ngModel` will set the select value and
+ *   selected options.
+ * </div>
+ * @element OPTION
+ * @param {string} ngSelected If the {@link guide/expression expression} is truthy,
+ *     then special attribute "selected" will be set on the element
+ */
+
+/**
+ * @ngdoc directive
+ * @name ngOpen
+ * @restrict A
+ * @priority 100
+ *
+ * @description
+ *
+ * Sets the `open` attribute on the element, if the expression inside `ngOpen` is truthy.
+ *
+ * A special directive is necessary because we cannot use interpolation inside the `open`
+ * attribute. See the {@link guide/interpolation interpolation guide} for more info.
+ *
+ * ## A note about browser compatibility
+ *
+ * Internet Explorer and Edge do not support the `details` element, it is
+ * recommended to use {@link ng.ngShow} and {@link ng.ngHide} instead.
+ *
+ * @element DETAILS
+ * @param {string} ngOpen If the {@link guide/expression expression} is truthy,
+ *     then special attribute "open" will be set on the element
+ */
+
+export const ngAttributeAliasDirectives = {};
+
+// boolean attrs are evaluated
+forEach(BOOLEAN_ATTR, (propName, attrName) => {
+  // binding to multiple is not supported
+  if (propName === "multiple") return;
+
+  function defaultLinkFn(scope, element, attr) {
+    scope.$watch(attr[normalized], (value) => {
+      attr.$set(attrName, !!value);
+    });
+  }
+
+  let normalized = directiveNormalize(`ng-${attrName}`);
+  let linkFn = defaultLinkFn;
+
+  if (propName === "checked") {
+    linkFn = function (scope, element, attr) {
+      // ensuring ngChecked doesn't interfere with ngModel when both are set on the same input
+      if (attr.ngModel !== attr[normalized]) {
+        defaultLinkFn(scope, element, attr);
+      }
+    };
+  }
+
+  ngAttributeAliasDirectives[normalized] = function () {
+    return {
+      restrict: "A",
+      priority: 100,
+      link: linkFn,
+    };
+  };
+});
+
+// aliased input attrs are evaluated
+forEach(ALIASED_ATTR, (htmlAttr, ngAttr) => {
+  ngAttributeAliasDirectives[ngAttr] = function () {
+    return {
+      priority: 100,
+      link(scope, element, attr) {
+        // special case ngPattern when a literal regular expression value
+        // is used as the expression (this way we don't have to watch anything).
+        if (ngAttr === "ngPattern" && attr.ngPattern.charAt(0) === "/") {
+          const match = attr.ngPattern.match(REGEX_STRING_REGEXP);
+          if (match) {
+            attr.$set("ngPattern", new RegExp(match[1], match[2]));
+            return;
+          }
+        }
+
+        scope.$watch(attr[ngAttr], (value) => {
+          attr.$set(ngAttr, value);
+        });
+      },
+    };
+  };
+});
+
+// ng-src, ng-srcset, ng-href are interpolated
+forEach(["src", "srcset", "href"], (attrName) => {
+  const normalized = directiveNormalize(`ng-${attrName}`);
+  ngAttributeAliasDirectives[normalized] = [
+    "$sce",
+    function ($sce) {
+      return {
+        priority: 99, // it needs to run after the attributes are interpolated
+        link(_scope, element, attr) {
+          let name = attrName;
+
+          if (
+            attrName === "href" &&
+            toString.call(element.prop("href")) === "[object SVGAnimatedString]"
+          ) {
+            name = "xlinkHref";
+            attr.$attr[name] = "xlink:href";
+          }
+
+          // We need to sanitize the url at least once, in case it is a constant
+          // non-interpolated attribute.
+          attr.$set(normalized, $sce.getTrustedMediaUrl(attr[normalized]));
+
+          attr.$observe(normalized, (value) => {
+            if (!value) {
+              if (attrName === "href") {
+                attr.$set(name, null);
+              }
+              return;
+            }
+
+            attr.$set(name, value);
+          });
+        },
+      };
+    },
+  ];
+});

package/src/directive/bind.js

@@ -0,0 +1,51 @@
+import { isUndefined, stringify } from "../core/utils";
+
+/**
+ * @returns {angular.IDirective}
+ */
+export function ngBindDirective() {
+  return {
+    restrict: "EA",
+    link: (scope, element, attr) => {
+      scope.$watch(attr.ngBind, (value) => {
+        element[0].textContent = stringify(value);
+      });
+    },
+  };
+}
+
+/**
+ * @returns {angular.IDirective}
+ */
+export function ngBindTemplateDirective() {
+  return {
+    restrict: "EA",
+    link: (_scope, element, attr) => {
+      attr.$observe("ngBindTemplate", (value) => {
+        element[0].textContent = isUndefined(value) ? "" : value;
+      });
+    },
+  };
+}
+
+/**
+ * TODO: add type
+ */
+export const ngBindHtmlDirective = [
+  "$parse",
+  ($parse) => {
+    return {
+      restrict: "A",
+      compile: (_tElement, tAttrs) => {
+        var ngBindHtmlGetter = $parse(tAttrs.ngBindHtml);
+        var ngBindHtmlWatch = $parse(tAttrs.ngBindHtml, (val) => val);
+        return (scope, element) => {
+          scope.$watch(ngBindHtmlWatch, () => {
+            // The watched value is the unwrapped value. To avoid re-escaping, use the direct getter.
+            element.html(ngBindHtmlGetter(scope) || "");
+          });
+        };
+      },
+    };
+  },
+];

package/src/directive/bind.md

@@ -0,0 +1,142 @@
+## ngBind Directive
+
+### Description
+
+The `ngBind` attribute tells AngularJS to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
+
+Typically, you don't use `ngBind` directly, but instead, you use the double curly markup like `{{ expression }}` which is similar but less verbose.
+
+It is preferable to use `ngBind` instead of `{{ expression }}` if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. Since `ngBind` is an element attribute, it makes the bindings invisible to the user while the page is loading.
+
+An alternative solution to this problem would be using the [`ngCloak`](https://docs.angularjs.org/api/ng/directive/ngCloak) directive.
+
+### Element
+
+ANY
+
+### Parameter
+
+- `ngBind`: [Expression](https://docs.angularjs.org/guide/expression) to evaluate.
+
+### Example
+
+Enter a name in the Live Preview text box; the greeting below the text box changes instantly.
+
+```html
+<example module="bindExample" name="ng-bind">
+  <file name="index.html">
+    <script>
+      angular.module("bindExample", []).controller("ExampleController", [
+        "$scope",
+        function ($scope) {
+          $scope.name = "Whirled";
+        },
+      ]);
+    </script>
+    <div ng-controller="ExampleController">
+      <label>Enter name: <input type="text" ng-model="name" /></label><br />
+      Hello <span ng-bind="name"></span>!
+    </div>
+  </file>
+  <file name="protractor.js" type="protractor">
+    it('should check ng-bind', function() { var nameInput =
+    element(by.model('name'));
+    expect(element(by.binding('name')).getText()).toBe('Whirled');
+    nameInput.clear(); nameInput.sendKeys('world');
+    expect(element(by.binding('name')).getText()).toBe('world'); });
+  </file>
+</example>
+```
+
+## ngBindTemplate Directive
+
+### Description
+
+The `ngBindTemplate` directive specifies that the element text content should be replaced with the interpolation of the template in the `ngBindTemplate` attribute. Unlike `ngBind`, the `ngBindTemplate` can contain multiple `{{ }}` expressions. This directive is necessary since some HTML elements (such as `TITLE` and `OPTION`) cannot contain `SPAN` elements.
+
+### Element
+
+ANY
+
+### Parameter
+
+- `ngBindTemplate`: Template of form `{{ expression }}` to evaluate.
+
+### Example
+
+Try it here: enter text in the text box and watch the greeting change.
+
+````html
+<example module="bindExample" name="ng-bind-template">
+  <file name="index.html">
+    <script>
+      angular.module("bindExample", []).controller("ExampleController", [
+        "$scope",
+        function ($scope) {
+          $scope.salutation = "Hello";
+          $scope.name = "World";
+        },
+      ]);
+    </script>
+    <div ng-controller="ExampleController">
+      <label>Salutation: <input type="text" ng-model="salutation" /></label
+      ><br />
+      <label>Name: <input type="text" ng-model="name" /></label><br />
+      <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
+    </div>
+  </file>
+  <file name="protractor.js" type="protractor">
+    it('should check ng-bind', function() { var salutationElem =
+    element(by.binding('salutation')); var salutationInput =
+    element(by.model('salutation')); var nameInput = element(by.model('name'));
+    expect(salutationElem.getText()).toBe('Hello World!');
+    salutationInput.clear(); salutationInput.sendKeys('Greetings');
+    nameInput.clear(); nameInput.sendKeys('user');
+    expect(salutationElem.getText()).toBe('Greetings user!'); });
+  </file>
+</example>
+
+## ngBindHtml Directive ### Description Evaluates the expression and inserts the
+resulting HTML into the element in a secure way. By default, the resulting HTML
+content will be sanitized using the
+[`$sanitize`](https://docs.angularjs.org/api/ngSanitize/service/$sanitize)
+service. To utilize this functionality, ensure that `$sanitize` is available,
+for example, by including
+[`ngSanitize`](https://docs.angularjs.org/api/ngSanitize) in your module's
+dependencies (not in core AngularJS). To use `ngSanitize` in your module's
+dependencies, you need to include "angular-sanitize.js" in your application. You
+may also bypass sanitization for values you know are safe. To do so, bind to an
+explicitly trusted value via
+[`$sce.trustAsHtml`](https://docs.angularjs.org/api/ng/service/$sce#trustAsHtml).
+See the example under [Strict Contextual Escaping
+(SCE)](https://docs.angularjs.org/api/ng/service/$sce#show-me-an-example-using-sce).
+**Note:** If a `$sanitize` service is unavailable and the bound value isn't
+explicitly trusted, you will encounter an exception (instead of an exploit). ###
+Element ANY ### Parameter - `ngBindHtml`:
+[Expression](https://docs.angularjs.org/guide/expression) to evaluate. ###
+Example ```html
+<example
+  module="bindHtmlExample"
+  deps="angular-sanitize.js"
+  name="ng-bind-html"
+>
+  <file name="index.html">
+    <div ng-controller="ExampleController">
+      <p ng-bind-html="myHTML"></p>
+    </div>
+  </file>
+
+  <file name="script.js">
+    angular.module('bindHtmlExample', ['ngSanitize'])
+    .controller('ExampleController', ['$scope', function($scope) { $scope.myHTML
+    = 'I am an <code>HTML</code>string with ' + '<a href="#">links!</a> and
+    other <em>stuff</em>'; }]);
+  </file>
+
+  <file name="protractor.js" type="protractor">
+    it('should check ng-bind-html', function() {
+    expect(element(by.binding('myHTML')).getText()).toBe( 'I am an HTMLstring
+    with links! and other stuff'); });
+  </file>
+</example>
+````

package/src/directive/change.js

@@ -0,0 +1,12 @@
+/**
+ * @returns {angular.IDirective}
+ */
+export function ngChangeDirective() {
+  return {
+    restrict: "A",
+    require: "ngModel",
+    link(scope, _element, attr, ctrl) {
+      ctrl.$viewChangeListeners.push(() => scope.$eval(attr.ngChange));
+    },
+  };
+}

package/src/directive/change.md

@@ -0,0 +1,25 @@
+## ngChange Directive
+
+### Description
+
+Evaluate the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript `onchange` event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key).
+
+The `ngChange` expression is only evaluated when a change in the input value causes a new value to be committed to the model.
+
+### Conditions where `ngChange` is Not Evaluated
+
+- If the value returned from the `$parsers` transformation pipeline has not changed.
+- If the input has continued to be invalid since the model will stay `null`.
+- If the model is changed programmatically and not by a change to the input value.
+
+### Requirements
+
+Note, this directive requires `ngModel` to be present.
+
+### Element
+
+`ANY`
+
+### Parameters
+
+- `ngChange` (`string`): [Expression](guide/expression) to evaluate upon change in input value.

package/src/directive/cloak.js

@@ -0,0 +1,12 @@
+/**
+ * @returns {angular.IDirective}
+ */
+export function ngCloakDirective() {
+  return {
+    restrict: "EA",
+    compile(element, attr) {
+      attr.$set("ngCloak", undefined);
+      element[0].classList.remove("ng-cloak");
+    },
+  };
+}

package/src/directive/cloak.md

@@ -0,0 +1,24 @@
+## `ngCloak` Directive
+
+### Restrict
+
+`AC`
+
+### Description
+
+The `ngCloak` directive is used to prevent the AngularJS HTML template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the HTML template display.
+
+The directive can be applied to the `<body>` element, but the preferred usage is to apply multiple `ngCloak` directives to small portions of the page to permit progressive rendering of the browser view.
+
+`ngCloak` works in cooperation with the following CSS rule embedded within `angular.js` and `angular.min.js`. For CSP mode, please add `angular-csp.css` to your HTML file (see [`ngCsp`](ng.directive:ngCsp)).
+
+```css
+[ng\:cloak],
+[ng-cloak],
+[data-ng-cloak],
+[x-ng-cloak],
+.ng-cloak,
+.x-ng-cloak {
+  display: none !important;
+}
+```

package/src/directive/events.js

@@ -0,0 +1,75 @@
+import { directiveNormalize } from "../core/utils";
+
+/*
+ * A collection of directives that allows creation of custom event handlers that are defined as
+ * AngularJS expressions and are compiled and executed within the current scope.
+ */
+export const ngEventDirectives = {};
+
+// For events that might fire synchronously during DOM manipulation
+// we need to execute their event handlers asynchronously using $evalAsync,
+// so that they are not executed in an inconsistent state.
+const forceAsyncEvents = {
+  blur: true,
+  focus: true,
+};
+
+"click dblclick submit focus blur copy cut paste"
+  .split(" ")
+  .forEach((eventName) => {
+    const directiveName = directiveNormalize(`ng-${eventName}`);
+    ngEventDirectives[directiveName] = [
+      "$parse",
+      "$rootScope",
+      "$exceptionHandler",
+      ($parse, $rootScope, $exceptionHandler) => {
+        return createEventDirective(
+          $parse,
+          $rootScope,
+          $exceptionHandler,
+          directiveName,
+          eventName,
+          forceAsyncEvents[eventName],
+        );
+      },
+    ];
+  });
+
+export function createEventDirective(
+  $parse,
+  $rootScope,
+  $exceptionHandler,
+  directiveName,
+  eventName,
+  forceAsync,
+) {
+  return {
+    restrict: "A",
+    compile(_element, attr) {
+      // NOTE:
+      // We expose the powerful `$event` object on the scope that provides access to the Window,
+      // etc. This is OK, because expressions are not sandboxed any more (and the expression
+      // sandbox was never meant to be a security feature anyway).
+      const fn = $parse(attr[directiveName]);
+      return function ngEventHandler(scope, element) {
+        element.on(eventName, (event) => {
+          const callback = function () {
+            fn(scope, { $event: event });
+          };
+
+          if (!$rootScope.$$phase) {
+            scope.$apply(callback);
+          } else if (forceAsync) {
+            scope.$evalAsync(callback);
+          } else {
+            try {
+              callback();
+            } catch (error) {
+              $exceptionHandler(error);
+            }
+          }
+        });
+      };
+    },
+  };
+}