@angular-wave/angular.ts 0.0.51 → 0.0.53

package/src/router/directives/state-directives.md

@@ -0,0 +1,435 @@
+/\*\*
+
+- `ng-sref`: A directive for linking to a state
+-
+- A directive which links to a state (and optionally, parameters).
+- When clicked, this directive activates the linked state with the supplied parameter values.
+-
+- ### Linked State
+- The attribute value of the `ng-sref` is the name of the state to link to.
+-
+- #### Example:
+- This will activate the `home` state when the link is clicked.
+- ```html
+
+  ```
+
+- <a ng-sref="home">Home</a>
+- ```
+
+  ```
+
+-
+- ### Relative Links
+- You can also use relative state paths within `ng-sref`, just like a relative path passed to `$state.go()` ([[StateService.go]]).
+- You just need to be aware that the path is relative to the state that _created_ the link.
+- This allows a state to create a relative `ng-sref` which always targets the same destination.
+-
+- #### Example:
+- Both these links are relative to the parent state, even when a child state is currently active.
+- ```html
+
+  ```
+
+- <a ng-sref=".child1">child 1 state</a>
+- <a ng-sref=".child2">child 2 state</a>
+- ```
+
+  ```
+
+-
+- This link activates the parent state.
+- ```html
+
+  ```
+
+- <a ng-sref="^">Return</a>
+- ```
+
+  ```
+
+-
+- ### hrefs
+- If the linked state has a URL, the directive will automatically generate and
+- update the `href` attribute (using the [[StateService.href]] method).
+-
+- #### Example:
+- Assuming the `users` state has a url of `/users/`
+- ```html
+
+  ```
+
+- <a ng-sref="users" href="/users/">Users</a>
+- ```
+
+  ```
+
+-
+- ### Parameter Values
+- In addition to the state name, a `ng-sref` can include parameter values which are applied when activating the state.
+- Param values can be provided in the `ng-sref` value after the state name, enclosed by parentheses.
+- The content inside the parentheses is an expression, evaluated to the parameter values.
+-
+- #### Example:
+- This example renders a list of links to users.
+- The state's `userId` parameter value comes from each user's `user.id` property.
+- ```html
+
+  ```
+
+- <li ng-repeat="user in users">
+- <a ng-sref="users.detail({ userId: user.id })">{{ user.displayName }}</a>
+- </li>
+- ```
+
+  ```
+
+-
+- Note:
+- The parameter values expression is `$watch`ed for updates.
+-
+- ### Transition Options
+- You can specify [[TransitionOptions]] to pass to [[StateService.go]] by using the `ng-sref-opts` attribute.
+- Options are restricted to `location`, `inherit`, and `reload`.
+-
+- #### Example:
+- ```html
+
+  ```
+
+- <a ng-sref="home" ng-sref-opts="{ reload: true }">Home</a>
+- ```
+
+  ```
+
+-
+- ### Other DOM Events
+-
+- You can also customize which DOM events to respond to (instead of `click`) by
+- providing an `events` array in the `ng-sref-opts` attribute.
+-
+- #### Example:
+- ```html
+
+  ```
+
+- <input type="text" ng-sref="contacts" ng-sref-opts="{ events: ['change', 'blur'] }">
+- ```
+
+  ```
+
+-
+- ### Highlighting the active link
+- This directive can be used in conjunction with [[ngSrefActive]] to highlight the active link.
+-
+- ### Examples
+- If you have the following template:
+-
+- ```html
+
+  ```
+
+- <a ng-sref="home">Home</a>
+- <a ng-sref="about">About</a>
+- <a ng-sref="{page: 2}">Next page</a>
+-
+- <ul>
+-     <li ng-repeat="contact in contacts">
+-         <a ng-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>
+-     </li>
+- </ul>
+- ```
+
+  ```
+
+-
+- Then (assuming the current state is `contacts`) the rendered html including hrefs would be:
+-
+- ```html
+
+  ```
+
+- <a href="#/home" ng-sref="home">Home</a>
+- <a href="#/about" ng-sref="about">About</a>
+- <a href="#/contacts?page=2" ng-sref="{page: 2}">Next page</a>
+-
+- <ul>
+-     <li ng-repeat="contact in contacts">
+-         <a href="#/contacts/1" ng-sref="contacts.detail({ id: contact.id })">Joe</a>
+-     </li>
+-     <li ng-repeat="contact in contacts">
+-         <a href="#/contacts/2" ng-sref="contacts.detail({ id: contact.id })">Alice</a>
+-     </li>
+-     <li ng-repeat="contact in contacts">
+-         <a href="#/contacts/3" ng-sref="contacts.detail({ id: contact.id })">Bob</a>
+-     </li>
+- </ul>
+-
+- <a href="#/home" ng-sref="home" ng-sref-opts="{reload: true}">Home</a>
+- ```
+
+  ```
+
+-
+- ### Notes
+-
+- - You can use `ng-sref` to change **only the parameter values** by omitting the state name and parentheses.
+- #### Example:
+- Sets the `lang` parameter to `en` and remains on the same state.
+-
+- ```html
+
+  ```
+
+- <a ng-sref="{ lang: 'en' }">English</a>
+- ```
+
+  ```
+
+-
+- - A middle-click, right-click, or ctrl-click is handled (natively) by the browser to open the href in a new window, for example.
+-
+- - Unlike the parameter values expression, the state name is not `$watch`ed (for performance reasons).
+- If you need to dynamically update the state being linked to, use the fully dynamic [[ngState]] directive.
+  \*/
+
+/\*\*
+
+- `ng-state`: A fully dynamic directive for linking to a state
+-
+- A directive which links to a state (and optionally, parameters).
+- When clicked, this directive activates the linked state with the supplied parameter values.
+-
+- **This directive is very similar to [[ngSref]], but it `$observe`s and `$watch`es/evaluates all its inputs.**
+-
+- A directive which links to a state (and optionally, parameters).
+- When clicked, this directive activates the linked state with the supplied parameter values.
+-
+- ### Linked State
+- The attribute value of `ng-state` is an expression which is `$watch`ed and evaluated as the state to link to.
+- **This is in contrast with `ui-sref`, which takes a state name as a string literal.**
+-
+- #### Example:
+- Create a list of links.
+- ```html
+
+  ```
+
+- <li ng-repeat="link in navlinks">
+- <a ng-state="link.state">{{ link.displayName }}</a>
+- </li>
+- ```
+
+  ```
+
+-
+- ### Relative Links
+- If the expression evaluates to a relative path, it is processed like [[ngSref]].
+- You just need to be aware that the path is relative to the state that _created_ the link.
+- This allows a state to create relative `ng-state` which always targets the same destination.
+-
+- ### hrefs
+- If the linked state has a URL, the directive will automatically generate and
+- update the `href` attribute (using the [[StateService.href]] method).
+-
+- ### Parameter Values
+- In addition to the state name expression, a `ng-state` can include parameter values which are applied when activating the state.
+- Param values should be provided using the `ng-state-params` attribute.
+- The `ng-state-params` attribute value is `$watch`ed and evaluated as an expression.
+-
+- #### Example:
+- This example renders a list of links with param values.
+- The state's `userId` parameter value comes from each user's `user.id` property.
+- ```html
+
+  ```
+
+- <li ng-repeat="link in navlinks">
+- <a ng-state="link.state" ng-state-params="link.params">{{ link.displayName }}</a>
+- </li>
+- ```
+
+  ```
+
+-
+- ### Transition Options
+- You can specify [[TransitionOptions]] to pass to [[StateService.go]] by using the `ng-state-opts` attribute.
+- Options are restricted to `location`, `inherit`, and `reload`.
+- The value of the `ng-state-opts` is `$watch`ed and evaluated as an expression.
+-
+- #### Example:
+- ```html
+
+  ```
+
+- <a ng-state="returnto.state" ng-state-opts="{ reload: true }">Home</a>
+- ```
+
+  ```
+
+-
+- ### Other DOM Events
+-
+- You can also customize which DOM events to respond to (instead of `click`) by
+- providing an `events` array in the `ng-state-opts` attribute.
+-
+- #### Example:
+- ```html
+
+  ```
+
+- <input type="text" ng-state="contacts" ng-state-opts="{ events: ['change', 'blur'] }">
+- ```
+
+  ```
+
+-
+- ### Highlighting the active link
+- This directive can be used in conjunction with [[ngSrefActive]] to highlight the active link.
+-
+- ### Notes
+-
+- - You can use `ui-params` to change **only the parameter values** by omitting the state name and supplying only `ng-state-params`.
+- However, it might be simpler to use [[ngSref]] parameter-only links.
+-
+- #### Example:
+- Sets the `lang` parameter to `en` and remains on the same state.
+-
+- ```html
+
+  ```
+
+- <a ng-state="" ng-state-params="{ lang: 'en' }">English</a>
+- ```
+
+  ```
+
+-
+- - A middle-click, right-click, or ctrl-click is handled (natively) by the browser to open the href in a new window, for example.
+- ```
+  */
+  ```
+
+/\*\*
+
+- `ui-sref-active` and `ui-sref-active-eq`: A directive that adds a CSS class when a `ui-sref` is active
+-
+- A directive working alongside [[ngSref]] and [[ngState]] to add classes to an element when the
+- related directive's state is active (and remove them when it is inactive).
+-
+- The primary use-case is to highlight the active link in navigation menus,
+- distinguishing it from the inactive menu items.
+-
+- ### Linking to a `ui-sref` or `ng-state`
+- `ui-sref-active` can live on the same element as `ui-sref`/`ng-state`, or it can be on a parent element.
+- If a `ui-sref-active` is a parent to more than one `ui-sref`/`ng-state`, it will apply the CSS class when **any of the links are active**.
+-
+- ### Matching
+-
+- The `ui-sref-active` directive applies the CSS class when the `ui-sref`/`ng-state`'s target state **or any child state is active**.
+- This is a "fuzzy match" which uses [[StateService.includes]].
+-
+- The `ui-sref-active-eq` directive applies the CSS class when the `ui-sref`/`ng-state`'s target state is directly active (not when child states are active).
+- This is an "exact match" which uses [[StateService.is]].
+-
+- ### Parameter values
+- If the `ui-sref`/`ng-state` includes parameter values, the current parameter values must match the link's values for the link to be highlighted.
+- This allows a list of links to the same state with different parameters to be rendered, and the correct one highlighted.
+-
+- #### Example:
+- ```html
+
+  ```
+
+- <li ng-repeat="user in users" ui-sref-active="active">
+- <a ui-sref="user.details({ userId: user.id })">{{ user.lastName }}</a>
+- </li>
+- ```
+
+  ```
+
+-
+- ### Examples
+-
+- Given the following template:
+- #### Example:
+- ```html
+
+  ```
+
+- <ul>
+- <li ui-sref-active="active" class="item">
+-     <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
+- </li>
+- </ul>
+- ```
+
+  ```
+
+-
+- When the app state is `app.user` (or any child state),
+- and contains the state parameter "user" with value "bilbobaggins",
+- the resulting HTML will appear as (note the 'active' class):
+-
+- ```html
+
+  ```
+
+- <ul>
+- <li ui-sref-active="active" class="item active">
+-     <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
+- </li>
+- </ul>
+- ```
+
+  ```
+
+-
+- ### Glob mode
+-
+- It is possible to pass `ui-sref-active` an expression that evaluates to an object.
+- The objects keys represent active class names and values represent the respective state names/globs.
+- `ui-sref-active` will match if the current active state **includes** any of
+- the specified state names/globs, even the abstract ones.
+-
+- #### Example:
+- Given the following template, with "admin" being an abstract state:
+- ```html
+
+  ```
+
+- <div ui-sref-active="{'active': 'admin.**'}">
+- <a ui-sref-active="active" ui-sref="admin.roles">Roles</a>
+- </div>
+- ```
+
+  ```
+
+-
+- Arrays are also supported as values in the `ngClass`-like interface.
+- This allows multiple states to add `active` class.
+-
+- #### Example:
+- Given the following template, with "admin.roles" being the current state, the class will be added too:
+- ```html
+
+  ```
+
+- <div ui-sref-active="{'active': ['owner.**', 'admin.**']}">
+- <a ui-sref-active="active" ui-sref="admin.roles">Roles</a>
+- </div>
+- ```
+
+  ```
+
+-
+- When the current state is "admin.roles" the "active" class will be applied to both the `<div>` and `<a>` elements.
+- It is important to note that the state names/globs passed to `ui-sref-active` override any state provided by a linked `ui-sref`.
+-
+- ### Notes:
+-
+- - The class name is interpolated **once** during the directives link time (any further changes to the
+- interpolated value are ignored).
+-
+- - Multiple classes may be specified in a space-separated format: `ui-sref-active='class1 class2 class3'`
+    \*/

package/src/router/directives/view-directive.js

@@ -399,10 +399,10 @@ export function $ViewDirectiveFill(
     },
   };
 }
-/** @hidden */
-/** @hidden incrementing id */
+/** @ignore */
+/** @ignore incrementing id */
 let _uiCanExitId = 0;
-/** @hidden TODO: move these callbacks to $view and/or `/hooks/components.ts` or something */
+/** @ignore TODO: move these callbacks to $view and/or `/hooks/components.ts` or something */
 function registerControllerCallbacks(
   $q,
   $transitions,

package/src/router/index.js

@@ -4,9 +4,9 @@ import { trace } from "./common/trace";
 import { $ViewScrollProvider } from "./view-scroll";
 import { $IsStateFilter, $IncludedByStateFilter } from "./state-filters";
 import {
-  ngSrefActiveDirective,
-  ngStateDirective,
-  ngSrefDirective,
+  $StateRefDirective,
+  $StateRefDynamicDirective,
+  $StateRefActiveDirective,
 } from "./directives/state-directives";
 import { ngView, $ViewDirectiveFill } from "./directives/view-directive";
 import { UrlConfigProvider } from "./url/url-config";
@@ -42,10 +42,10 @@ export function initRouter() {
     .value("$trace", trace)
     .filter("isState", $IsStateFilter)
     .filter("includedByState", $IncludedByStateFilter)
-    .directive("ngSref", ngSrefDirective)
-    .directive("ngSrefActive", ngSrefActiveDirective)
-    .directive("ngSrefActiveEq", ngSrefActiveDirective)
-    .directive("ngState", ngStateDirective)
+    .directive("ngSref", $StateRefDirective)
+    .directive("ngSrefActive", $StateRefActiveDirective)
+    .directive("ngSrefActiveEq", $StateRefActiveDirective)
+    .directive("ngState", $StateRefDynamicDirective)
     .directive("ngView", ngView)
     .directive("ngView", $ViewDirectiveFill)
 

package/types/animations/animate-children-directive.d.ts

@@ -1,81 +1,6 @@
-/**
- * @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>
- */
-export const $$AnimateChildrenDirective: (string | (($interpolate: any) => {
+export function $$AnimateChildrenDirective($interpolate: any): {
     link(scope: any, element: any, attrs: any): void;
-}))[];
+};
+export namespace $$AnimateChildrenDirective {
+    let $inject: string[];
+}

package/types/animations/animate-css-driver.d.ts

@@ -0,0 +1,11 @@
+export function $$AnimateCssDriverProvider($$animationProvider: any): void;
+export class $$AnimateCssDriverProvider {
+    constructor($$animationProvider: any);
+    /**
+     * @returns {Function}
+     */
+    $get: (string | (($animateCss: any, $$AnimateRunner: any, $rootElement: any, $document: any) => (animationDetails: any) => any))[];
+}
+export namespace $$AnimateCssDriverProvider {
+    let $inject: string[];
+}

package/types/animations/animate-css.d.ts

@@ -0,0 +1,8 @@
+export function $AnimateCssProvider(): void;
+export class $AnimateCssProvider {
+    $get: (string | (($$AnimateRunner: any, $timeout: any, $$animateCache: any, $$rAFScheduler: any, $$animateQueue: any) => (element: any, initialOptions: any) => {
+        $$willAnimate: boolean;
+        start(): any;
+        end: () => void;
+    }))[];
+}

package/types/animations/animate-js-driver.d.ts

@@ -0,0 +1,8 @@
+export function $$AnimateJsDriverProvider($$animationProvider: any): void;
+export class $$AnimateJsDriverProvider {
+    constructor($$animationProvider: any);
+    $get: (string | (($$animateJs: any, $$AnimateRunner: any) => (animationDetails: any) => any))[];
+}
+export namespace $$AnimateJsDriverProvider {
+    let $inject: string[];
+}

package/types/animations/animate-js.d.ts

@@ -0,0 +1,12 @@
+export function $$AnimateJsProvider($animateProvider: any): void;
+export class $$AnimateJsProvider {
+    constructor($animateProvider: any);
+    $get: (string | (($injector: any, $$AnimateRunner: any) => (element: any, event: any, classes: any, options: any, ...args: any[]) => {
+        $$willAnimate: boolean;
+        end(): any;
+        start(): any;
+    }))[];
+}
+export namespace $$AnimateJsProvider {
+    let $inject: string[];
+}

package/types/animations/animate-queue.d.ts

@@ -0,0 +1,19 @@
+export function $$AnimateQueueProvider($animateProvider: any): void;
+export class $$AnimateQueueProvider {
+    constructor($animateProvider: any);
+    rules: {
+        skip: any[];
+        cancel: any[];
+        join: any[];
+    };
+    $get: (string | (($rootScope: any, $rootElement: any, $document: any, $$animation: any, $$AnimateRunner: any, $templateRequest: any) => {
+        on(event: any, container: any, callback: any): void;
+        off(event: any, container: any, callback: any, ...args: any[]): void;
+        pin(element: any, parentElement: any): void;
+        push(element: any, event: any, options: any, domOperation: any): any;
+        enabled(element: any, bool: any, ...args: any[]): any;
+    }))[];
+}
+export namespace $$AnimateQueueProvider {
+    let $inject: string[];
+}