@angular-wave/angular.ts 0.0.66 → 0.0.67

package/src/directive/show-hide/show-hide.md

@@ -0,0 +1,257 @@
+/\*\*
+
+- @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) {
+- /\* These are just alternative ways of hiding an element \*/
+- 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
+
+  ```
+
+- /\* A working example can be found at the bottom of this page. \*/
+- .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.
+    \*/
+
+/\*\*
+
+- @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) {
+- /\* These are just alternative ways of hiding an element \*/
+- 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
+
+  ```
+
+- /\* A working example can be found at the bottom of this page. \*/
+- .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.
+    \*/

package/src/filters/limit-to.spec.js

@@ -1,5 +1,5 @@
 import { Angular } from "../loader";
-import { createInjector } from "../di/injector";
+import { createInjector } from "../core/di/injector";
 import { JQLite } from "../shared/jqlite/jqlite";
 
 describe("Filter: limitTo", () => {

package/src/filters/order-by.spec.js

@@ -1,5 +1,5 @@
 import { Angular } from "../loader";
-import { createInjector } from "../di/injector";
+import { createInjector } from "../core/di/injector";
 
 describe("Filter: orderBy", () => {
   let orderBy;

package/src/index.js

@@ -3,6 +3,10 @@ import { Angular } from "./loader";
 export const angular = new Angular();
 window["angular"] = angular;
 
-document.addEventListener("DOMContentLoaded", () => {
+if (document.readyState === "complete") {
   angular.init(document);
-});
+} else {
+  document.addEventListener("DOMContentLoaded", () => {
+    angular.init(document);
+  });
+}

package/src/loader.js

@@ -175,7 +175,7 @@ export class Angular {
    *
    * @param {any[]} modules
    * @param {boolean?} strictDi
-   * @returns {import("./types").InjectorService}
+   * @returns {import("./core/di/internal-injector").InjectorService}
    */
   injector(modules, strictDi) {
     return createInjector(modules, strictDi);
@@ -267,7 +267,7 @@ export class Angular {
    * @param {string} name The name of the module to create or retrieve.
    * @param {Array.<string>} [requires] If specified then new module is being created. If
    *        unspecified then the module is being retrieved for further configuration.
-   * @param {Function} [configFn] Optional configuration function for the module. Same as
+   * @param {Array<any>|Function} [configFn] Optional configuration function for the module. Same as
    *        {@link import('./types').Module#config Module#config()}.
    * @returns {NgModule} A newly registered module.
    */
@@ -284,7 +284,11 @@ export class Angular {
           name,
         );
       }
-      const moduleInstance = new NgModule(name, requires, configFn);
+      const moduleInstance = new NgModule(
+        name,
+        requires,
+        /** @type {Function} */ (configFn),
+      );
       return moduleInstance;
     });
   }

package/src/public.js

@@ -59,7 +59,6 @@ import {
 } from "./core/animate/animate";
 import { BrowserProvider } from "./services/browser";
 import { CoreAnimateCssProvider } from "./core/animate/animate-css";
-import { CookieReaderProvider } from "./services/cookie-reader";
 import {
   AnimateAsyncRunFactoryProvider,
   AnimateRunnerFactoryProvider,
@@ -79,10 +78,7 @@ import {
   $HttpParamSerializerProvider,
   $HttpParamSerializerJQLikeProvider,
 } from "./services/http/http";
-import {
-  $HttpBackendProvider,
-  $xhrFactoryProvider,
-} from "./services/http-backend/http-backend";
+import { $HttpBackendProvider } from "./services/http-backend/http-backend";
 import { $LocationProvider } from "./core/location/location";
 import { $LogProvider } from "./services/log";
 import { $ParseProvider } from "./core/parser/parse";
@@ -192,7 +188,6 @@ export function publishExternalAPI(angular) {
             $httpParamSerializer: $HttpParamSerializerProvider,
             $httpParamSerializerJQLike: $HttpParamSerializerJQLikeProvider,
             $httpBackend: $HttpBackendProvider,
-            $xhrFactory: $xhrFactoryProvider,
             $location: $LocationProvider,
             $log: $LogProvider,
             $parse: $ParseProvider,
@@ -205,7 +200,6 @@ export function publishExternalAPI(angular) {
             $templateCache: TemplateCacheProvider,
             $templateRequest: TemplateRequestProvider,
             $timeout: $TimeoutProvider,
-            $$cookieReader: CookieReaderProvider,
           });
         },
       ],

package/src/router/state/state-builder.js

@@ -17,9 +17,7 @@ const parseUrl = (url) => {
   const root = url.charAt(0) === "^";
   return { val: root ? url.substring(1) : url, root };
 };
-function nameBuilder(state) {
-  return state.name;
-}
+
 function selfBuilder(state) {
   state.self.$$state = () => state;
   return state.self;
@@ -250,7 +248,7 @@ export class StateBuilder {
       return matcher.find(self.parentName(state)) || root();
     }
     this.builders = {
-      name: [nameBuilder],
+      name: [(state) => state.name],
       self: [selfBuilder],
       parent: [parentBuilder],
       data: [dataBuilder],

package/src/router/state/state-service.js

@@ -190,7 +190,7 @@ export class StateService {
 
   /**
    *
-   * @param {angular.Ng1StateDeclaration} definition
+   * @param {any} definition
    */
   state(definition) {
     if (!definition.name) {

package/src/router/state-provider.js

@@ -155,7 +155,7 @@ export class StateProvider {
 
   /**
    *
-   * @param {angular.Ng1StateDeclaration} definition
+   * @param {*} definition
    * @returns {StateProvider}
    */
   state(definition) {

package/src/router/template-factory.js

@@ -27,10 +27,10 @@ export class TemplateFactory {
     "$q",
     "$injector",
     /**
-     * @param {angular.IHttpService} $http
-     * @param {angular.ITemplateCacheService} $templateCache
-     * @param {angular.ITemplateRequestService} $templateRequest
-     * @param {angular.IQService} $q
+     * @param {any} $http
+     * @param {any} $templateCache
+     * @param {any} $templateRequest
+     * @param {any} $q
      * @param {import("../core/di/internal-injector").InjectorService} $injector
      * @returns
      */
@@ -59,9 +59,9 @@ export class TemplateFactory {
    * The following properties are search in the specified order, and the first one
    * that is defined is used to create the template:
    *
-   * @param {angular.Ng1ViewDeclaration} config
+   * @param {any} config
    * @param {any} params  Parameters to pass to the template function.
-   * @param {angular.ResolveContext} context The resolve context associated with the template's view
+   * @param {import("./resolve/resolve-context").ResolveContext} context The resolve context associated with the template's view
    *
    * @return {string|object}  The template html as a string, or a promise for
    * that string,or `null` if no template is configured.
@@ -105,7 +105,7 @@ export class TemplateFactory {
    * Creates a template from a string or a function returning a string.
    *
    * @param {string | Function} template html template as a string or function that returns an html template as a string.
-   * @param {angular.RawParams} [params] Parameters to pass to the template function.
+   * @param {any} [params] Parameters to pass to the template function.
    *
    * @return {string|object} The template html as a string, or a promise for that
    * string.
@@ -142,7 +142,7 @@ export class TemplateFactory {
    *
    * @param {import('../types').Injectable<any>} provider Function to invoke via `locals`
    * @param {Function} injectFn a function used to invoke the template provider
-   * @param {angular.ResolveContext} context
+   * @param {import("./resolve/resolve-context").ResolveContext} context
    * @return {string|Promise.<string>} The template html as a string, or a promise
    * for that string.
    */
@@ -173,8 +173,8 @@ export class TemplateFactory {
    * It analyses the component's bindings, then constructs a template that instantiates the component.
    * The template wires input and output bindings to resolves or from the parent component.
    *
-   * @param {angular.IAugmentedJQuery} ngView {object} The parent ui-view (for binding outputs to callbacks)
-   * @param {angular.ResolveContext} context The ResolveContext (for binding outputs to callbacks returned from resolves)
+   * @param {any} ngView {object} The parent ui-view (for binding outputs to callbacks)
+   * @param {import("./resolve/resolve-context").ResolveContext} context The ResolveContext (for binding outputs to callbacks returned from resolves)
    * @param {string} component {string} Component's name in camel case.
    * @param {any} [bindings] An object defining the component's bindings: {foo: '<'}
    * @return {string} The template as a string: "<component-name input1='::$resolve.foo'></component-name>".

package/src/router/url/url-service.js

@@ -159,11 +159,11 @@ export class UrlService {
    * locationServices.url("/some/path?query=value#anchor", true);
    * ```
    *
-   * @param {string} newUrl The new value for the URL.
+   * @param {string} [newUrl] The new value for the URL.
    *               This url should reflect only the new internal [[path]], [[search]], and [[hash]] values.
    *               It should not include the protocol, site, port, or base path of an absolute HREF.
-   * @param {boolean} replace When true, replaces the current history entry (instead of appending it) with this new url
-   * @param {any} state The history's state object, i.e., pushState (if the LocationServices implementation supports it)
+   * @param {boolean} [replace] When true, replaces the current history entry (instead of appending it) with this new url
+   * @param {any} [state] The history's state object, i.e., pushState (if the LocationServices implementation supports it)
    *
    * @return the url (after potentially being processed)
    */
@@ -231,7 +231,7 @@ export class UrlService {
       hash: this.hash(),
     };
     /**
-     * @type {MatchResult}
+     * @type {*}
      */
     const best = this.match(url);
     const applyResult = pattern([

package/src/services/anchor-scroll.js

@@ -18,8 +18,8 @@ export function AnchorScrollProvider() {
     "$rootScope",
     /**
      *
-     * @param {angular.IRootScopeService} $location
-     * @param {*} $rootScope
+     * @param {*} $location
+     * @param {import('../core/scope/scope').Scope} $rootScope
      * @returns
      */
     function ($location, $rootScope) {

package/src/services/browser.js

@@ -291,8 +291,6 @@ export function Browser(taskTracker) {
 }
 
 /**
- * @typedef {import('../types').ServiceProvider} angular.BrowserProvider
- * @description
  * This object has two goals:
  *
  * - hide all the global state in the browser caused by the window object
@@ -300,13 +298,8 @@ export function Browser(taskTracker) {
  *
  * Remove this in the future
  */
-
-/**
- * @constructor
- * @this {angular.BrowserProvider}
- */
-export function BrowserProvider() {
-  this.$get = [
+export class BrowserProvider {
+  $get = [
     "$$taskTrackerFactory",
     /**
      * @param {import('../core/task-tracker-factory').TaskTracker} $$taskTrackerFactory

package/src/services/cache-factory.js

@@ -1,72 +1,5 @@
 import { extend, forEach, isUndefined, minErr } from "../shared/utils";
 
-/**
- * @ngdoc service
- * @name $cacheFactory
- * 
- *
- * @description
- * Factory that constructs {@link $cacheFactory.Cache Cache} objects and gives access to
- * them.
- *
- * ```js
- *
- *  let cache = $cacheFactory('cacheId');
- *  expect($cacheFactory.get('cacheId')).toBe(cache);
- *  expect($cacheFactory.get('noSuchCacheId')).not.toBeDefined();
- *
- *  cache.put("key", "value");
- *  cache.put("another key", "another value");
- *
- *  // We've specified no options on creation
- *  expect(cache.info()).toEqual({id: 'cacheId', size: 2});
- *
- * ```
- *
- *
- * @example
-   <example module="cacheExampleApp" name="cache-factory">
-     <file name="index.html">
-       <div ng-controller="CacheController">
-         <input ng-model="newCacheKey" placeholder="Key">
-         <input ng-model="newCacheValue" placeholder="Value">
-         <button ng-click="put(newCacheKey, newCacheValue)">Cache</button>
-
-         <p ng-if="keys.length">Cached Values</p>
-         <div ng-repeat="key in keys">
-           <span ng-bind="key"></span>
-           <span>: </span>
-           <b ng-bind="cache.get(key)"></b>
-         </div>
-
-         <p>Cache Info</p>
-         <div ng-repeat="(key, value) in cache.info()">
-           <span ng-bind="key"></span>
-           <span>: </span>
-           <b ng-bind="value"></b>
-         </div>
-       </div>
-     </file>
-     <file name="script.js">
-       angular.module('cacheExampleApp', []).
-         controller('CacheController', ['$scope', '$cacheFactory', function($scope, $cacheFactory) {
-           $scope.keys = [];
-           $scope.cache = $cacheFactory('cacheId');
-           $scope.put = function(key, value) {
-             if (angular.isUndefined($scope.cache.get(key))) {
-               $scope.keys.push(key);
-             }
-             $scope.cache.put(key, angular.isUndefined(value) ? null : value);
-           };
-         }]);
-     </file>
-     <file name="style.css">
-       p {
-         margin: 10px 0 3px;
-       }
-     </file>
-   </example>
- */
 export function CacheFactoryProvider() {
   this.$get = function () {
     const caches = {};

package/src/services/cache-factory.md

@@ -0,0 +1,75 @@
+/\*\*
+
+- @ngdoc service
+- @name $cacheFactory
+-
+-
+- @description
+- Factory that constructs {@link $cacheFactory.Cache Cache} objects and gives access to
+- them.
+-
+- ```js
+
+  ```
+
+-
+- let cache = $cacheFactory('cacheId');
+- expect($cacheFactory.get('cacheId')).toBe(cache);
+- expect($cacheFactory.get('noSuchCacheId')).not.toBeDefined();
+-
+- cache.put("key", "value");
+- cache.put("another key", "another value");
+-
+- // We've specified no options on creation
+- expect(cache.info()).toEqual({id: 'cacheId', size: 2});
+-
+- ```
+
+  ```
+
+-
+-
+- @example
+  <example module="cacheExampleApp" name="cache-factory">
+  <file name="index.html">
+  <div ng-controller="CacheController">
+  <input ng-model="newCacheKey" placeholder="Key">
+  <input ng-model="newCacheValue" placeholder="Value">
+  <button ng-click="put(newCacheKey, newCacheValue)">Cache</button>
+
+          <p ng-if="keys.length">Cached Values</p>
+          <div ng-repeat="key in keys">
+            <span ng-bind="key"></span>
+            <span>: </span>
+            <b ng-bind="cache.get(key)"></b>
+          </div>
+
+          <p>Cache Info</p>
+          <div ng-repeat="(key, value) in cache.info()">
+            <span ng-bind="key"></span>
+            <span>: </span>
+            <b ng-bind="value"></b>
+          </div>
+        </div>
+      </file>
+      <file name="script.js">
+        angular.module('cacheExampleApp', []).
+          controller('CacheController', ['$scope', '$cacheFactory', function($scope, $cacheFactory) {
+            $scope.keys = [];
+            $scope.cache = $cacheFactory('cacheId');
+            $scope.put = function(key, value) {
+              if (angular.isUndefined($scope.cache.get(key))) {
+                $scope.keys.push(key);
+              }
+              $scope.cache.put(key, angular.isUndefined(value) ? null : value);
+            };
+          }]);
+      </file>
+      <file name="style.css">
+        p {
+          margin: 10px 0 3px;
+        }
+      </file>
+
+    </example>
+  */