@angular-wave/angular.ts 0.11.0 → 0.12.0

package/@types/angular.d.ts

@@ -24,11 +24,63 @@ export class Angular {
   getInjector: (Element: any) => ng.InjectorService;
   /**
    * Gets scope for a given element.
-   * @type {(Element) => *}
+   * @type {(Element) => ng.Scope}
    */
-  getScope: (Element: any) => any;
+  getScope: (Element: any) => ng.Scope;
   errorHandlingConfig: typeof errorHandlingConfig;
   $t: Readonly<Record<string, string>>;
+  /**
+   *
+   * The `angular.module` is a global place for creating, registering and retrieving AngularTS
+   * modules.
+   * All modules (AngularTS core or 3rd party) that should be available to an application must be
+   * registered using this mechanism.
+   *
+   * Passing one argument retrieves an existing {@link ng.NgModule},
+   * whereas passing more than one argument creates a new {@link ng.NgModule}
+   *
+   *
+   * # Module
+   *
+   * A module is a collection of services, directives, controllers, filters, workers, WebAssembly modules, and configuration information.
+   * `angular.module` is used to configure the {@link auto.$injector $injector}.
+   *
+   * ```js
+   * // Create a new module
+   * let myModule = angular.module('myModule', []);
+   *
+   * // register a new service
+   * myModule.value('appName', 'MyCoolApp');
+   *
+   * // configure existing services inside initialization blocks.
+   * myModule.config(['$locationProvider', function($locationProvider) {
+   *   // Configure existing providers
+   *   $locationProvider.hashPrefix('!');
+   * }]);
+   * ```
+   *
+   * Then you can create an injector and load your modules like this:
+   *
+   * ```js
+   * let injector = angular.injector(['ng', 'myModule'])
+   * ```
+   *
+   * However it's more likely that you'll just use
+   * `ng-app` directive or
+   * {@link bootstrap} to simplify this process for you.
+   *
+   * @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 {ng.Injectable<any>} [configFn] Optional configuration function for the module that gets
+   *        passed to {@link NgModule.config NgModule.config()}.
+   * @returns {NgModule} A newly registered module.
+   */
+  module(
+    name: string,
+    requires?: Array<string>,
+    configFn?: ng.Injectable<any>,
+  ): NgModule;
   /**
    * Use this function to manually start up AngularTS application.
    *
@@ -77,6 +129,7 @@ export class Angular {
     modules?: Array<string | any>,
     config?: import("./interface.ts").AngularBootstrapConfig,
   ): import("./core/di/internal-injector.js").InjectorService;
+  $rootScope: import("./interface.ts").Scope;
   $injector: import("./interface.ts").InjectorService;
   /**
    * @param {any[]} modules
@@ -92,57 +145,17 @@ export class Angular {
    */
   init(element: Element | Document): void;
   /**
+   * Retrieves a scope by its registered name and returns its Proxy wrapper.
    *
-   * The `angular.module` is a global place for creating, registering and retrieving AngularTS
-   * modules.
-   * All modules (AngularTS core or 3rd party) that should be available to an application must be
-   * registered using this mechanism.
-   *
-   * Passing one argument retrieves an existing {@link import('./interface.ts').Module},
-   * whereas passing more than one argument creates a new {@link import('./interface.ts').Module}
-   *
-   *
-   * # Module
-   *
-   * A module is a collection of services, directives, controllers, filters, and configuration information.
-   * `angular.module` is used to configure the {@link auto.$injector $injector}.
-   *
-   * ```js
-   * // Create a new module
-   * let myModule = angular.module('myModule', []);
+   * Internally, this walks down the `Scope` tree starting from `$rootScope`
+   * and checks for a matching `$scopename` property. The `$scopename` property
+   * may be defined statically on controllers using `as` syntax, assigned via the `ngScope` directive,
+   * or defined on `$scope` injectable.
    *
-   * // register a new service
-   * myModule.value('appName', 'MyCoolApp');
-   *
-   * // configure existing services inside initialization blocks.
-   * myModule.config(['$locationProvider', function($locationProvider) {
-   *   // Configure existing providers
-   *   $locationProvider.hashPrefix('!');
-   * }]);
-   * ```
-   *
-   * Then you can create an injector and load your modules like this:
-   *
-   * ```js
-   * let injector = angular.injector(['ng', 'myModule'])
-   * ```
-   *
-   * However it's more likely that you'll just use
-   * {@link ng.directive:ngApp ngApp} or
-   * {@link angular.bootstrap} to simplify this process for you.
-   *
-   * @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 {import("./interface.ts").Injectable<any>} [configFn] Optional configuration function for the module that gets
-   *        passed to {@link NgModule.config NgModule.config()}.
-   * @returns {NgModule} A newly registered module.
+   * @param {string} name
+   * @returns {ProxyHandler<ng.Scope>|undefined}
    */
-  module(
-    name: string,
-    requires?: Array<string>,
-    configFn?: import("./interface.ts").Injectable<any>,
-  ): NgModule;
+  getScopeByName(name: string): ProxyHandler<ng.Scope> | undefined;
 }
 import { errorHandlingConfig } from "./shared/utils.js";
-import { NgModule } from "./core/di/ng-module.js";
+import { NgModule } from "./core/di/ng-module/ng-module.js";

package/@types/animations/animate.d.ts

@@ -93,358 +93,8 @@ export class AnimateProvider {
    * @return {RegExp} The current CSS className expression value. If null then there is no expression value
    */
   classNameFilter: (expression?: RegExp | undefined, ...args: any[]) => RegExp;
-  $get: (
-    | string
-    | (($$animateQueue: any) => {
-        /**
-         *
-         * Sets up an event listener to fire whenever the animation event (enter, leave, move, etc...)
-         *    has fired on the given element or among any of its children. Once the listener is fired, the provided callback
-         *    is fired with the following params:
-         *
-         * ```js
-         * $animate.on('enter', container,
-         *    function callback(element, phase) {
-         *      // cool we detected an enter animation within the container
-         *    }
-         * );
-         * ```
-         *
-         * <div class="alert alert-warning">
-         * **Note**: Generally, the events that are fired correspond 1:1 to `$animate` method names,
-         * e.g. {@link ng.$animate#addClass addClass()} will fire `addClass`, and {@link ng.ngClass}
-         * will fire `addClass` if classes are added, and `removeClass` if classes are removed.
-         * However, there are two exceptions:
-         *
-         * <ul>
-         *   <li>if both an {@link ng.$animate#addClass addClass()} and a
-         *   {@link ng.$animate#removeClass removeClass()} action are performed during the same
-         *   animation, the event fired will be `setClass`. This is true even for `ngClass`.</li>
-         *   <li>an {@link ng.$animate#animate animate()} call that adds and removes classes will fire
-         *   the `setClass` event, but if it either removes or adds classes,
-         *   it will fire `animate` instead.</li>
-         * </ul>
-         *
-         * </div>
-         *
-         * @param {string} event the animation event that will be captured (e.g. enter, leave, move, addClass, removeClass, etc...)
-         * @param {Element} container the container element that will capture each of the animation events that are fired on itself
-         *     as well as among its children
-         * @param {Function} callback the callback function that will be fired when the listener is triggered.
-         *
-         * The arguments present in the callback function are:
-         * * `element` - The captured DOM element that the animation was fired on.
-         * * `phase` - The phase of the animation. The two possible phases are **start** (when the animation starts) and **close** (when it ends).
-         * * `data` - an object with these properties:
-         *     * addClass - `{string|null}` - space-separated CSS classes to add to the element
-         *     * removeClass - `{string|null}` - space-separated CSS classes to remove from the element
-         *     * from - `{Object|null}` - CSS properties & values at the beginning of the animation
-         *     * to - `{Object|null}` - CSS properties & values at the end of the animation
-         *
-         * Note that the callback does not trigger a scope digest. Wrap your call into a
-         * {@link $rootScope.Scope#$apply scope.$apply} to propagate changes to the scope.
-         */
-        on: any;
-        /**
-         * Deregisters an event listener based on the event which has been associated with the provided element. This method
-         * can be used in three different ways depending on the arguments:
-         *
-         * ```js
-         * // remove all the animation event listeners listening for `enter`
-         * $animate.off('enter');
-         *
-         * // remove listeners for all animation events from the container element
-         * $animate.off(container);
-         *
-         * // remove all the animation event listeners listening for `enter` on the given element and its children
-         * $animate.off('enter', container);
-         *
-         * // remove the event listener function provided by `callback` that is set
-         * // to listen for `enter` on the given `container` as well as its children
-         * $animate.off('enter', container, callback);
-         * ```
-         *
-         * @param {string|Element} event|container the animation event (e.g. enter, leave, move,
-         * addClass, removeClass, etc...), or the container element. If it is the element, all other
-         * arguments are ignored.
-         * @param {Element=} container the container element the event listener was placed on
-         * @param {Function=} callback the callback function that was registered as the listener
-         */
-        off: any;
-        /**
-         *  Associates the provided element with a host parent element to allow the element to be animated even if it exists
-         *  outside of the DOM structure of the AngularTS application. By doing so, any animation triggered via `$animate` can be issued on the
-         *  element despite being outside the realm of the application or within another application. Say for example if the application
-         *  was bootstrapped on an element that is somewhere inside of the `<body>` tag, but we wanted to allow for an element to be situated
-         *  as a direct child of `document.body`, then this can be achieved by pinning the element via `$animate.pin(element)`. Keep in mind
-         *  that calling `$animate.pin(element, parentElement)` will not actually insert into the DOM anywhere; it will just create the association.
-         *
-         *  Note that this feature is only active when the `ngAnimate` module is used.
-         *
-         * @param {Element} element the external element that will be pinned
-         * @param {Element} parentElement the host parent element that will be associated with the external element
-         */
-        pin: any;
-        /**
-         * Used to get and set whether animations are enabled or not on the entire application or on an element and its children. This
-         * function can be called in four ways:
-         *
-         * ```js
-         * // returns true or false
-         * $animate.enabled();
-         *
-         * // changes the enabled state for all animations
-         * $animate.enabled(false);
-         * $animate.enabled(true);
-         *
-         * // returns true or false if animations are enabled for an element
-         * $animate.enabled(element);
-         *
-         * // changes the enabled state for an element and its children
-         * $animate.enabled(element, true);
-         * $animate.enabled(element, false);
-         * ```
-         *
-         * @param {Element=} element the element that will be considered for checking/setting the enabled state
-         * @param {boolean=} enabled whether or not the animations will be enabled for the element
-         *
-         * @return {boolean} whether or not animations are enabled
-         */
-        enabled: any;
-        /**
-       * Cancels the provided animation and applies the end state of the animation.
-       * Note that this does not cancel the underlying operation, e.g. the setting of classes or
-       * adding the element to the DOM.
-       *
-       * @param {import('./runner/animate-runner.js').AnimateRunner} runner An animation runner returned by an $animate function.
-       *
-       * @example
-        <example module="animationExample" deps="angular-animate.js" animations="true" name="animate-cancel">
-          <file name="app.js">
-            angular.module('animationExample', []).component('cancelExample', {
-              templateUrl: 'template.html',
-              controller: function($element, $animate) {
-                this.runner = null;
-
-                this.addClass = function() {
-                  this.runner = $animate.addClass($element.querySelectorAll('div'), 'red');
-                  let ctrl = this;
-                  this.runner.finally(function() {
-                    ctrl.runner = null;
-                  });
-                };
-
-                this.removeClass = function() {
-                  this.runner = $animate.removeClass($element.querySelectorAll('div'), 'red');
-                  let ctrl = this;
-                  this.runner.finally(function() {
-                    ctrl.runner = null;
-                  });
-                };
-
-                this.cancel = function() {
-                  $animate.cancel(this.runner);
-                };
-              }
-            });
-          </file>
-          <file name="template.html">
-            <p>
-              <button id="add" ng-click="$ctrl.addClass()">Add</button>
-              <button ng-click="$ctrl.removeClass()">Remove</button>
-              <br>
-              <button id="cancel" ng-click="$ctrl.cancel()" ng-disabled="!$ctrl.runner">Cancel</button>
-              <br>
-              <div id="target">CSS-Animated Text</div>
-            </p>
-          </file>
-          <file name="index.html">
-            <cancel-example></cancel-example>
-          </file>
-          <file name="style.css">
-            .red-add, .red-remove {
-              transition: all 4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
-            }
-
-            .red,
-            .red-add.red-add-active {
-              color: #FF0000;
-              font-size: 40px;
-            }
-
-            .red-remove.red-remove-active {
-              font-size: 10px;
-              color: black;
-            }
-
-          </file>
-        </example>
-       */
-        cancel(
-          runner: import("./runner/animate-runner.js").AnimateRunner,
-        ): void;
-        /**
-         * Inserts the element into the DOM either after the `after` element (if provided) or
-         * as the first child within the `parent` element and then triggers an animation.
-         * A promise is returned that will be resolved during the next digest once the animation
-         * has completed.
-         *
-         * @param {Element} element - the element which will be inserted into the DOM
-         * @param {Element} parent - the parent element which will append the element as a child (so long as the after element is not present)
-         * @param {Element} [after] - after the sibling element after which the element will be appended
-         * @param {AnimationOptions} [options] - an optional collection of options/styles that will be applied to the element.
-         * @returns {import('./runner/animate-runner.js').AnimateRunner} the animation runner
-         */
-        enter(
-          element: Element,
-          parent: Element,
-          after?: Element,
-          options?: AnimationOptions,
-        ): import("./runner/animate-runner.js").AnimateRunner;
-        /**
-         * Inserts (moves) the element into its new position in the DOM either after
-         * the `after` element (if provided) or as the first child within the `parent` element
-         * and then triggers an animation. A promise is returned that will be resolved
-         * during the next digest once the animation has completed.
-         *
-         * @param {Element} element - the element which will be inserted into the DOM
-         * @param {Element} parent - the parent element which will append the element as a child (so long as the after element is not present)
-         * @param {Element} after - after the sibling element after which the element will be appended
-         * @param {AnimationOptions} [options] - an optional collection of options/styles that will be applied to the element.
-         * @returns {import('./runner/animate-runner.js').AnimateRunner} the animation runner
-         */
-        move(
-          element: Element,
-          parent: Element,
-          after: Element,
-          options?: AnimationOptions,
-        ): import("./runner/animate-runner.js").AnimateRunner;
-        /**
-         * Triggers an animation and then removes the element from the DOM.
-         * When the function is called a promise is returned that will be resolved during the next
-         * digest once the animation has completed.
-         *
-         * @param {Element} element the element which will be removed from the DOM
-         * @param {AnimationOptions} [options] an optional collection of options/styles that will be applied to the element.
-         * @returns {import('./runner/animate-runner.js').AnimateRunner} the animation runner
-         */
-        leave(
-          element: Element,
-          options?: AnimationOptions,
-        ): import("./runner/animate-runner.js").AnimateRunner;
-        /**
-         * Triggers an addClass animation surrounding the addition of the provided CSS class(es). Upon
-         * execution, the addClass operation will only be handled after the next digest and it will not trigger an
-         * animation if element already contains the CSS class or if the class is removed at a later step.
-         * Note that class-based animations are treated differently compared to structural animations
-         * (like enter, move and leave) since the CSS classes may be added/removed at different points
-         * depending if CSS or JavaScript animations are used.
-         *
-         * @param {Element} element the element which the CSS classes will be applied to
-         * @param {string} className the CSS class(es) that will be added (multiple classes are separated via spaces)
-         * @param {AnimationOptions} [options] an optional collection of options/styles that will be applied to the element.
-         * @return {import('./runner/animate-runner.js').AnimateRunner}} animationRunner the animation runner
-         */
-        addClass(
-          element: Element,
-          className: string,
-          options?: AnimationOptions,
-        ): import("./runner/animate-runner.js").AnimateRunner;
-        /**
-         * Triggers a removeClass animation surrounding the removal of the provided CSS class(es). Upon
-         * execution, the removeClass operation will only be handled after the next digest and it will not trigger an
-         * animation if element does not contain the CSS class or if the class is added at a later step.
-         * Note that class-based animations are treated differently compared to structural animations
-         * (like enter, move and leave) since the CSS classes may be added/removed at different points
-         * depending if CSS or JavaScript animations are used.
-         *
-         * @param {Element} element the element which the CSS classes will be applied to
-         * @param {string} className the CSS class(es) that will be removed (multiple classes are separated via spaces)
-         * @param {AnimationOptions} [options] an optional collection of options/styles that will be applied to the element.         *
-         * @return {import('./runner/animate-runner.js').AnimateRunner} animationRunner the animation runner
-         */
-        removeClass(
-          element: Element,
-          className: string,
-          options?: AnimationOptions,
-        ): import("./runner/animate-runner.js").AnimateRunner;
-        /**
-         * Performs both the addition and removal of a CSS classes on an element and (during the process)
-         * triggers an animation surrounding the class addition/removal. Much like `$animate.addClass` and
-         * `$animate.removeClass`, `setClass` will only evaluate the classes being added/removed once a digest has
-         * passed. Note that class-based animations are treated differently compared to structural animations
-         * (like enter, move and leave) since the CSS classes may be added/removed at different points
-         * depending if CSS or JavaScript animations are used.
-         *
-         * @param {Element} element the element which the CSS classes will be applied to
-         * @param {string} add the CSS class(es) that will be added (multiple classes are separated via spaces)
-         * @param {string} remove the CSS class(es) that will be removed (multiple classes are separated via spaces)
-         * @param {object=} options an optional collection of options/styles that will be applied to the element.
-         *
-         * @return {import('./runner/animate-runner.js').AnimateRunner} the animation runner
-         */
-        setClass(
-          element: Element,
-          add: string,
-          remove: string,
-          options?: object | undefined,
-        ): import("./runner/animate-runner.js").AnimateRunner;
-        /**
-         * Performs an inline animation on the element which applies the provided to and from CSS styles to the element.
-         * If any detected CSS transition, keyframe or JavaScript matches the provided className value, then the animation will take
-         * on the provided styles. For example, if a transition animation is set for the given className, then the provided `from` and
-         * `to` styles will be applied alongside the given transition. If the CSS style provided in `from` does not have a corresponding
-         * style in `to`, the style in `from` is applied immediately, and no animation is run.
-         * If a JavaScript animation is detected then the provided styles will be given in as function parameters into the `animate`
-         * method (or as part of the `options` parameter):
-         *
-         * ```js
-         * ngModule.animation('.my-inline-animation', function() {
-         *   return {
-         *     animate : function(element, from, to, done, options) {
-         *       //animation
-         *       done();
-         *     }
-         *   }
-         * });
-         * ```
-         *  @return {import('./runner/animate-runner.js').AnimateRunner} the animation runner
-         */
-        animate(
-          element: any,
-          from: any,
-          to: any,
-          className: any,
-          options: any,
-        ): import("./runner/animate-runner.js").AnimateRunner;
-      })
-  )[];
+  $get: any[];
 }
 export namespace AnimateProvider {
   let $inject: string[];
 }
-export type AnimationMethod =
-  | "enter"
-  | "leave"
-  | "move"
-  | "addClass"
-  | "setClass"
-  | "removeClass";
-export type AnimationOptions = {
-  /**
-   * - space-separated CSS classes to add to element
-   */
-  addClass: string;
-  /**
-   * - CSS properties & values at the beginning of animation. Must have matching `to`
-   */
-  from: any;
-  /**
-   * - space-separated CSS classes to remove from element
-   */
-  removeClass: string;
-  /**
-   * - CSS properties & values at end of animation. Must have matching `from`
-   */
-  to: string;
-};

package/@types/animations/animation.d.ts

@@ -5,8 +5,8 @@ export class AnimationProvider {
     | string
     | ((
         $rootScope: ng.RootScopeService,
-        $injector: any,
-        $$rAFScheduler: any,
+        $injector: ng.InjectorService,
+        $$rAFScheduler: import("./raf-scheduler.js").RafScheduler,
         $$animateCache: any,
       ) => (element: any, event: any, options: any) => AnimateRunner)
   )[];

package/@types/animations/interface.d.ts

@@ -1,3 +1,5 @@
+import { AnimateRunner } from "./runner/animate-runner.js";
+import { QueuePhase } from "./queue/interface.ts";
 export type RafScheduler = {
   /**
    * Schedules a list of functions to run on the next animation frame(s).
@@ -27,3 +29,73 @@ export interface AnimationHost {
   /** Report animation progress. */
   progress?: (...args: any[]) => void;
 }
+export interface AnimateService {
+  on(
+    event: string,
+    container: Element,
+    callback: (
+      element: Element,
+      phase: QueuePhase,
+      data: {
+        addClass?: string | null;
+        removeClass?: string | null;
+        from?: Record<string, any> | null;
+        to?: Record<string, any> | null;
+      },
+    ) => void,
+  ): void;
+  off(event: string, container?: Element, callback?: Function): void;
+  pin(element: Element, parentElement: Element): void;
+  enabled(element?: Element, enabled?: boolean): boolean;
+  cancel(runner: AnimateRunner): void;
+  enter(
+    element: Element,
+    parent: Element,
+    after?: Element,
+    options?: AnimationOptions,
+  ): AnimateRunner;
+  move(
+    element: Element,
+    parent: Element,
+    after?: Element,
+    options?: AnimationOptions,
+  ): AnimateRunner;
+  leave(element: Element, options?: AnimationOptions): AnimateRunner;
+  addClass(
+    element: Element,
+    className: string,
+    options?: AnimationOptions,
+  ): AnimateRunner;
+  removeClass(
+    element: Element,
+    className: string,
+    options?: AnimationOptions,
+  ): AnimateRunner;
+  setClass(
+    element: Element,
+    add: string,
+    remove: string,
+    options?: AnimationOptions,
+  ): AnimateRunner;
+  animate(
+    element: Element,
+    from: Record<string, any>,
+    to: Record<string, any>,
+    className?: string,
+    options?: AnimationOptions,
+  ): AnimateRunner;
+}
+export type AnimationMethod =
+  | "enter"
+  | "leave"
+  | "move"
+  | "addClass"
+  | "setClass"
+  | "removeClass";
+export interface AnimationOptions {
+  addClass?: string;
+  from?: Record<string, string | number>;
+  removeClass?: string;
+  to?: Record<string, string | number>;
+  tempClasses: string | string[];
+}

package/@types/animations/{animate-queue.d.ts → queue/animate-queue.d.ts}

@@ -12,13 +12,8 @@ export class AnimateQueueProvider {
         $rootScope: ng.RootScopeService,
         $injector: ng.InjectorService,
         $$animation: 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;
-      })
+        $templateRequest: ng.TemplateRequestService,
+      ) => import("../queue/interface.ts").AnimateQueueService)
   )[];
 }
 export namespace AnimateQueueProvider {

package/@types/animations/queue/interface.d.ts

@@ -0,0 +1,50 @@
+import { AnimateRunner } from "../runner/animate-runner.js";
+export type QueuePhase =
+  | "start"
+  | "close"
+  | "cancel"
+  | "progress"
+  | "dom"
+  | string;
+export interface QueueAnimationData {
+  addClass: string | null;
+  removeClass: string | null;
+  from: Record<string, any> | null;
+  to: Record<string, any> | null;
+  [key: string]: any;
+}
+export interface AnimateQueueService {
+  on(
+    event: string,
+    container: Element,
+    callback?: (
+      el: Element,
+      phase: QueuePhase,
+      data: QueueAnimationData,
+    ) => void,
+  ): void;
+  off(
+    event: string,
+    container?: Element,
+    callback?: (
+      el: Element,
+      phase: QueuePhase,
+      data: QueueAnimationData,
+    ) => void,
+  ): void;
+  pin(element: Element, parent: Element): void;
+  push(
+    element: Element,
+    event: string,
+    options: {
+      addClass?: string | null;
+      removeClass?: string | null;
+      from?: Record<string, any> | null;
+      to?: Record<string, any> | null;
+      tempClasses?: string | string[] | null;
+      domOperation?: () => void;
+      [key: string]: any;
+    },
+    domOperation?: () => void,
+  ): AnimateRunner;
+}