@angular-wave/angular.ts 0.0.1 → 0.0.4

package/dist/angular-ts.cjs.js

@@ -604,7 +604,7 @@ function isElement(node) {
   return !!(
     node &&
     (node.nodeName || // We are a direct element.
-      (node.prop && node.attr && node.find))
+      (node.attr && node.find))
   ); // We have an on and find method part of jQuery API.
 }
 
@@ -1351,6 +1351,8 @@ function directiveNormalize(name) {
  *
  */
 
+const EXPANDO = "ngId";
+
 /**
  * Expando cache for adding properties to DOM nodes with JavaScript.
  * This used to be an Object in JQLite decorator, but swapped out for a Map
@@ -1413,12 +1415,10 @@ const CACHE = new Proxy(new Map(), {
  * ## AngularJS's jqLite
  * jqLite provides only the following jQuery methods:
  *
- * - [`addClass()`](http://api.jquery.com/addClass/) - Does not support a function as first argument
  * - [`after()`](http://api.jquery.com/after/)
  * - [`append()`](http://api.jquery.com/append/) - Contrary to jQuery, this doesn't clone elements
  *   so will not work correctly when invoked on a jqLite object containing more than one DOM node
  * - [`attr()`](http://api.jquery.com/attr/) - Does not support functions as parameters
- * - [`bind()`](http://api.jquery.com/bind/) (_deprecated_, use [`on()`](http://api.jquery.com/on/)) - Does not support namespaces, selectors or eventData
  * - [`children()`](http://api.jquery.com/children/) - Does not support selectors
  * - [`data()`](http://api.jquery.com/data/)
  * - [`empty()`](http://api.jquery.com/empty/)
@@ -1429,7 +1429,6 @@ const CACHE = new Proxy(new Map(), {
  * - [`one()`](http://api.jquery.com/one/) - Does not support namespaces or selectors
  * - [`parent()`](http://api.jquery.com/parent/) - Does not support selectors
  * - [`prepend()`](http://api.jquery.com/prepend/)
- * - [`prop()`](http://api.jquery.com/prop/)
  * - [`remove()`](http://api.jquery.com/remove/)
  * - [`removeData()`](http://api.jquery.com/removeData/)
  * - [`replaceWith()`](http://api.jquery.com/replaceWith/)
@@ -1470,7 +1469,6 @@ const CACHE = new Proxy(new Map(), {
 
 JQLite.cache = CACHE;
 
-const EXPANDO = "ngId";
 let jqId = 1;
 
 /**
@@ -1565,13 +1563,6 @@ function elementAcceptsData(node) {
   }
 }
 
-function jqLiteHasData(node) {
-  for (const key in JQLite.cache.get(node[EXPANDO])) {
-    return true;
-  }
-  return false;
-}
-
 function jqLiteBuildFragment(html, context) {
   let tmp;
   let tag;
@@ -1967,7 +1958,6 @@ forEach(
   {
     data: jqLiteData,
     removeData: jqLiteRemoveData,
-    hasData: jqLiteHasData,
     cleanData: jqLiteCleanData,
   },
   (fn, name) => {
@@ -2040,15 +2030,6 @@ forEach(
         return ret === null ? undefined : ret;
       }
     },
-
-    prop(element, name, value) {
-      if (isDefined(value)) {
-        element[name] = value;
-      } else {
-        return element[name];
-      }
-    },
-
     text: (function () {
       getText.$dv = "";
       return getText;
@@ -6412,1104 +6393,6 @@ function createEventDirective(
   };
 }
 
-/* ! VARIABLE/FUNCTION NAMING CONVENTIONS THAT APPLY TO THIS FILE!
- *
- * DOM-related variables:
- *
- * - "node" - DOM Node
- * - "element" - DOM Element or Node
- * - "$node" or "$element" - jqLite-wrapped node or element
- *
- *
- * Compiler related stuff:
- *
- * - "linkFn" - linking fn of a single directive
- * - "nodeLinkFn" - function that aggregates all linking fns for a particular node
- * - "childLinkFn" -  function that aggregates all linking fns for child nodes of a particular node
- * - "compositeLinkFn" - function that aggregates all linking fns for a compilation root (nodeList)
- */
-
-/**
- * @ngdoc service
- * @name $compile
- * @kind function
- *
- * @description
- * Compiles an HTML string or DOM into a template and produces a template function, which
- * can then be used to link {@link ng.$rootScope.Scope `scope`} and the template together.
- *
- * The compilation is a process of walking the DOM tree and matching DOM elements to
- * {@link ng.$compileProvider#directive directives}.
- *
- * <div class="alert alert-warning">
- * **Note:** This document is an in-depth reference of all directive options.
- * For a gentle introduction to directives with examples of common use cases,
- * see the {@link guide/directive directive guide}.
- * </div>
- *
- * ## Comprehensive Directive API
- *
- * There are many different options for a directive.
- *
- * The difference resides in the return value of the factory function.
- * You can either return a {@link $compile#directive-definition-object Directive Definition Object (see below)}
- * that defines the directive properties, or just the `postLink` function (all other properties will have
- * the default values).
- *
- * <div class="alert alert-success">
- * **Best Practice:** It's recommended to use the "directive definition object" form.
- * </div>
- *
- * Here's an example directive declared with a Directive Definition Object:
- *
- * ```js
- *   let myModule = angular.module(...);
- *
- *   myModule.directive('directiveName', function factory(injectables) {
- *     let directiveDefinitionObject = {
- *       {@link $compile#-priority- priority}: 0,
- *       {@link $compile#-template- template}: '<div></div>', // or // function(tElement, tAttrs) { ... },
- *       // or
- *       // {@link $compile#-templateurl- templateUrl}: 'directive.html', // or // function(tElement, tAttrs) { ... },
- *       {@link $compile#-transclude- transclude}: false,
- *       {@link $compile#-restrict- restrict}: 'A',
- *       {@link $compile#-templatenamespace- templateNamespace}: 'html',
- *       {@link $compile#-scope- scope}: false,
- *       {@link $compile#-controller- controller}: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
- *       {@link $compile#-controlleras- controllerAs}: 'stringIdentifier',
- *       {@link $compile#-bindtocontroller- bindToController}: false,
- *       {@link $compile#-require- require}: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
- *       {@link $compile#-multielement- multiElement}: false,
- *       {@link $compile#-compile- compile}: function compile(tElement, tAttrs, transclude) {
- *         return {
- *            {@link $compile#pre-linking-function pre}: function preLink(scope, iElement, iAttrs, controller) { ... },
- *            {@link $compile#post-linking-function post}: function postLink(scope, iElement, iAttrs, controller) { ... }
- *         }
- *         // or
- *         // return function postLink( ... ) { ... }
- *       },
- *       // or
- *       // {@link $compile#-link- link}: {
- *       //  {@link $compile#pre-linking-function pre}: function preLink(scope, iElement, iAttrs, controller) { ... },
- *       //  {@link $compile#post-linking-function post}: function postLink(scope, iElement, iAttrs, controller) { ... }
- *       // }
- *       // or
- *       // {@link $compile#-link- link}: function postLink( ... ) { ... }
- *     };
- *     return directiveDefinitionObject;
- *   });
- * ```
- *
- * <div class="alert alert-warning">
- * **Note:** Any unspecified options will use the default value. You can see the default values below.
- * </div>
- *
- * Therefore the above can be simplified as:
- *
- * ```js
- *   let myModule = angular.module(...);
- *
- *   myModule.directive('directiveName', function factory(injectables) {
- *     let directiveDefinitionObject = {
- *       link: function postLink(scope, iElement, iAttrs) { ... }
- *     };
- *     return directiveDefinitionObject;
- *     // or
- *     // return function postLink(scope, iElement, iAttrs) { ... }
- *   });
- * ```
- *
- * ### Life-cycle hooks
- * Directive controllers can provide the following methods that are called by AngularJS at points in the life-cycle of the
- * directive:
- * * `$onInit()` - Called on each controller after all the controllers on an element have been constructed and
- *   had their bindings initialized (and before the pre &amp; post linking functions for the directives on
- *   this element). This is a good place to put initialization code for your controller.
- * * `$onChanges(changesObj)` - Called whenever one-way (`<`) or interpolation (`@`) bindings are updated. The
- *   `changesObj` is a hash whose keys are the names of the bound properties that have changed, and the values are an
- *   object of the form `{ currentValue, previousValue, isFirstChange() }`. Use this hook to trigger updates within a
- *   component such as cloning the bound value to prevent accidental mutation of the outer value. Note that this will
- *   also be called when your bindings are initialized.
- * * `$doCheck()` - Called on each turn of the digest cycle. Provides an opportunity to detect and act on
- *   changes. Any actions that you wish to take in response to the changes that you detect must be
- *   invoked from this hook; implementing this has no effect on when `$onChanges` is called. For example, this hook
- *   could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not
- *   be detected by AngularJS's change detector and thus not trigger `$onChanges`. This hook is invoked with no arguments;
- *   if detecting changes, you must store the previous value(s) for comparison to the current values.
- * * `$onDestroy()` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
- *   external resources, watches and event handlers. Note that components have their `$onDestroy()` hooks called in
- *   the same order as the `$scope.$broadcast` events are triggered, which is top down. This means that parent
- *   components will have their `$onDestroy()` hook called before child components.
- * * `$postLink()` - Called after this controller's element and its children have been linked. Similar to the post-link
- *   function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
- *   Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
- *   they are waiting for their template to load asynchronously and their own compilation and linking has been
- *   suspended until that occurs.
- *
- * #### Comparison with life-cycle hooks in the new Angular
- * The new Angular also uses life-cycle hooks for its components. While the AngularJS life-cycle hooks are similar there are
- * some differences that you should be aware of, especially when it comes to moving your code from AngularJS to Angular:
- *
- * * AngularJS hooks are prefixed with `$`, such as `$onInit`. Angular hooks are prefixed with `ng`, such as `ngOnInit`.
- * * AngularJS hooks can be defined on the controller prototype or added to the controller inside its constructor.
- *   In Angular you can only define hooks on the prototype of the Component class.
- * * Due to the differences in change-detection, you may get many more calls to `$doCheck` in AngularJS than you would to
- *   `ngDoCheck` in Angular.
- * * Changes to the model inside `$doCheck` will trigger new turns of the digest loop, which will cause the changes to be
- *   propagated throughout the application.
- *   Angular does not allow the `ngDoCheck` hook to trigger a change outside of the component. It will either throw an
- *   error or do nothing depending upon the state of `enableProdMode()`.
- *
- * #### Life-cycle hook examples
- *
- * This example shows how you can check for mutations to a Date object even though the identity of the object
- * has not changed.
- *
- * <example name="doCheckDateExample" module="do-check-module">
- *   <file name="app.js">
- *     angular.module('do-check-module', [])
- *       .component('app', {
- *         template:
- *           'Month: <input ng-model="$ctrl.month" ng-change="$ctrl.updateDate()">' +
- *           'Date: {{ $ctrl.date }}' +
- *           '<test date="$ctrl.date"></test>',
- *         controller: function() {
- *           this.date = new Date();
- *           this.month = this.date.getMonth();
- *           this.updateDate = function() {
- *             this.date.setMonth(this.month);
- *           };
- *         }
- *       })
- *       .component('test', {
- *         bindings: { date: '<' },
- *         template:
- *           '<pre>{{ $ctrl.log | json }}</pre>',
- *         controller: function() {
- *           let previousValue;
- *           this.log = [];
- *           this.$doCheck = function() {
- *             let currentValue = this.date && this.date.valueOf();
- *             if (previousValue !== currentValue) {
- *               this.log.push('doCheck: date mutated: ' + this.date);
- *               previousValue = currentValue;
- *             }
- *           };
- *         }
- *       });
- *   </file>
- *   <file name="index.html">
- *     <app></app>
- *   </file>
- * </example>
- *
- * This example show how you might use `$doCheck` to trigger changes in your component's inputs even if the
- * actual identity of the component doesn't change. (Be aware that cloning and deep equality checks on large
- * arrays or objects can have a negative impact on your application performance.)
- *
- * <example name="doCheckArrayExample" module="do-check-module">
- *   <file name="index.html">
- *     <div ng-init="items = []">
- *       <button ng-click="items.push(items.length)">Add Item</button>
- *       <button ng-click="items = []">Reset Items</button>
- *       <pre>{{ items }}</pre>
- *       <test items="items"></test>
- *     </div>
- *   </file>
- *   <file name="app.js">
- *      angular.module('do-check-module', [])
- *        .component('test', {
- *          bindings: { items: '<' },
- *          template:
- *            '<pre>{{ $ctrl.log | json }}</pre>',
- *          controller: function() {
- *            this.log = [];
- *
- *            this.$doCheck = function() {
- *              if (this.items_ref !== this.items) {
- *                this.log.push('doCheck: items changed');
- *                this.items_ref = this.items;
- *              }
- *              if (!angular.equals(this.items_clone, this.items)) {
- *                this.log.push('doCheck: items mutated');
- *                this.items_clone = structuredClone(this.items);
- *              }
- *            };
- *          }
- *        });
- *   </file>
- * </example>
- *
- *
- * ### Directive Definition Object
- *
- * The directive definition object provides instructions to the {@link ng.$compile
- * compiler}. The attributes are:
- *
- * #### `multiElement`
- * When this property is set to true (default is `false`), the HTML compiler will collect DOM nodes between
- * nodes with the attributes `directive-name-start` and `directive-name-end`, and group them
- * together as the directive elements. It is recommended that this feature be used on directives
- * which are not strictly behavioral (such as {@link ngClick}), and which
- * do not manipulate or replace child nodes (such as {@link ngInclude}).
- *
- * #### `priority`
- * When there are multiple directives defined on a single DOM element, sometimes it
- * is necessary to specify the order in which the directives are applied. The `priority` is used
- * to sort the directives before their `compile` functions get called. Priority is defined as a
- * number. Directives with greater numerical `priority` are compiled first. Pre-link functions
- * are also run in priority order, but post-link functions are run in reverse order. The order
- * of directives with the same priority is undefined. The default priority is `0`.
- *
- * #### `terminal`
- * If set to true then the current `priority` will be the last set of directives
- * which will execute (any directives at the current priority will still execute
- * as the order of execution on same `priority` is undefined). Note that expressions
- * and other directives used in the directive's template will also be excluded from execution.
- *
- * #### `scope`
- * The scope property can be `false`, `true`, or an object:
- *
- * * **`false` (default):** No scope will be created for the directive. The directive will use its
- * parent's scope.
- *
- * * **`true`:** A new child scope that prototypically inherits from its parent will be created for
- * the directive's element. If multiple directives on the same element request a new scope,
- * only one new scope is created.
- *
- * * **`{...}` (an object hash):** A new "isolate" scope is created for the directive's template.
- * The 'isolate' scope differs from normal scope in that it does not prototypically
- * inherit from its parent scope. This is useful when creating reusable components, which should not
- * accidentally read or modify data in the parent scope. Note that an isolate scope
- * directive without a `template` or `templateUrl` will not apply the isolate scope
- * to its children elements.
- *
- * The 'isolate' scope object hash defines a set of local scope properties derived from attributes on the
- * directive's element. These local properties are useful for aliasing values for templates. The keys in
- * the object hash map to the name of the property on the isolate scope; the values define how the property
- * is bound to the parent scope, via matching attributes on the directive's element:
- *
- * * `@` or `@attr` - bind a local scope property to the value of DOM attribute. The result is
- *   always a string since DOM attributes are strings. If no `attr` name is specified then the
- *   attribute name is assumed to be the same as the local name. Given `<my-component
- *   my-attr="hello {{name}}">` and the isolate scope definition `scope: { localName:'@myAttr' }`,
- *   the directive's scope property `localName` will reflect the interpolated value of `hello
- *   {{name}}`. As the `name` attribute changes so will the `localName` property on the directive's
- *   scope. The `name` is read from the parent scope (not the directive's scope).
- *
- * * `=` or `=attr` - set up a bidirectional binding between a local scope property and an expression
- *   passed via the attribute `attr`. The expression is evaluated in the context of the parent scope.
- *   If no `attr` name is specified then the attribute name is assumed to be the same as the local
- *   name. Given `<my-component my-attr="parentModel">` and the isolate scope definition `scope: {
- *   localModel: '=myAttr' }`, the property `localModel` on the directive's scope will reflect the
- *   value of `parentModel` on the parent scope. Changes to `parentModel` will be reflected in
- *   `localModel` and vice versa. If the binding expression is non-assignable, or if the attribute
- *   isn't  optional and doesn't exist, an exception
- *   ({@link error/$compile/nonassign `$compile:nonassign`}) will be thrown upon discovering changes
- *   to the local value, since it will be impossible to sync them back to the parent scope.
- *
- *   By default, the {@link ng.$rootScope.Scope#$watch `$watch`}
- *   method is used for tracking changes, and the equality check is based on object identity.
- *   However, if an object literal or an array literal is passed as the binding expression, the
- *   equality check is done by value (using the {@link angular.equals} function). It's also possible
- *   to watch the evaluated value shallowly with {@link ng.$rootScope.Scope#$watchCollection
- *   `$watchCollection`}: use `=*` or `=*attr`
- *
-  * * `<` or `<attr` - set up a one-way (one-directional) binding between a local scope property and an
- *   expression passed via the attribute `attr`. The expression is evaluated in the context of the
- *   parent scope. If no `attr` name is specified then the attribute name is assumed to be the same as the
- *   local name.
- *
- *   For example, given `<my-component my-attr="parentModel">` and directive definition of
- *   `scope: { localModel:'<myAttr' }`, then the isolated scope property `localModel` will reflect the
- *   value of `parentModel` on the parent scope. Any changes to `parentModel` will be reflected
- *   in `localModel`, but changes in `localModel` will not reflect in `parentModel`. There are however
- *   two caveats:
- *     1. one-way binding does not copy the value from the parent to the isolate scope, it simply
- *     sets the same value. That means if your bound value is an object, changes to its properties
- *     in the isolated scope will be reflected in the parent scope (because both reference the same object).
- *     2. one-way binding watches changes to the **identity** of the parent value. That means the
- *     {@link ng.$rootScope.Scope#$watch `$watch`} on the parent value only fires if the reference
- *     to the value has changed. In most cases, this should not be of concern, but can be important
- *     to know if you one-way bind to an object, and then replace that object in the isolated scope.
- *     If you now change a property of the object in your parent scope, the change will not be
- *     propagated to the isolated scope, because the identity of the object on the parent scope
- *     has not changed. Instead you must assign a new object.
- *
- *   One-way binding is useful if you do not plan to propagate changes to your isolated scope bindings
- *   back to the parent. However, it does not make this completely impossible.
- *
- *   By default, the {@link ng.$rootScope.Scope#$watch `$watch`}
- *   method is used for tracking changes, and the equality check is based on object identity.
- *   It's also possible to watch the evaluated value shallowly with
- *   {@link ng.$rootScope.Scope#$watchCollection `$watchCollection`}: use `<*` or `<*attr`
- *
- * * `&` or `&attr` - provides a way to execute an expression in the context of the parent scope. If
- *   no `attr` name is specified then the attribute name is assumed to be the same as the local name.
- *   Given `<my-component my-attr="count = count + value">` and the isolate scope definition `scope: {
- *   localFn:'&myAttr' }`, the isolate scope property `localFn` will point to a function wrapper for
- *   the `count = count + value` expression. Often it's desirable to pass data from the isolated scope
- *   via an expression to the parent scope. This can be done by passing a map of local variable names
- *   and values into the expression wrapper fn. For example, if the expression is `increment(amount)`
- *   then we can specify the amount value by calling the `localFn` as `localFn({amount: 22})`.
- *
- * All 4 kinds of bindings (`@`, `=`, `<`, and `&`) can be made optional by adding `?` to the expression.
- * The marker must come after the mode and before the attribute name.
- * See the {@link error/$compile/iscp Invalid Isolate Scope Definition error} for definition examples.
- * This is useful to refine the interface directives provide.
- * One subtle difference between optional and non-optional happens **when the binding attribute is not
- * set**:
- * - the binding is optional: the property will not be defined
- * - the binding is not optional: the property is defined
- *
- * ```js
- *app.directive('testDir', function() {
-    return {
-      scope: {
-        notoptional: '=',
-        optional: '=?',
-      },
-      bindToController: true,
-      controller: function() {
-        this.$onInit = function() {
-          console.log(this.hasOwnProperty('notoptional')) // true
-          console.log(this.hasOwnProperty('optional')) // false
-        }
-      }
-    }
-  })
- *```
- *
- *
- * ##### Combining directives with different scope defintions
- *
- * In general it's possible to apply more than one directive to one element, but there might be limitations
- * depending on the type of scope required by the directives. The following points will help explain these limitations.
- * For simplicity only two directives are taken into account, but it is also applicable for several directives:
- *
- * * **no scope** + **no scope** => Two directives which don't require their own scope will use their parent's scope
- * * **child scope** + **no scope** =>  Both directives will share one single child scope
- * * **child scope** + **child scope** =>  Both directives will share one single child scope
- * * **isolated scope** + **no scope** =>  The isolated directive will use it's own created isolated scope. The other directive will use
- * its parent's scope
- * * **isolated scope** + **child scope** =>  **Won't work!** Only one scope can be related to one element. Therefore these directives cannot
- * be applied to the same element.
- * * **isolated scope** + **isolated scope**  =>  **Won't work!** Only one scope can be related to one element. Therefore these directives
- * cannot be applied to the same element.
- *
- *
- * #### `bindToController`
- * This property is used to bind scope properties directly to the controller. It can be either
- * `true` or an object hash with the same format as the `scope` property.
- *
- * When an isolate scope is used for a directive (see above), `bindToController: true` will
- * allow a component to have its properties bound to the controller, rather than to scope.
- *
- * After the controller is instantiated, the initial values of the isolate scope bindings will be bound to the controller
- * properties. You can access these bindings once they have been initialized by providing a controller method called
- * `$onInit`, which is called after all the controllers on an element have been constructed and had their bindings
- * initialized.
- *
- * It is also possible to set `bindToController` to an object hash with the same format as the `scope` property.
- * This will set up the scope bindings to the controller directly. Note that `scope` can still be used
- * to define which kind of scope is created. By default, no scope is created. Use `scope: {}` to create an isolate
- * scope (useful for component directives).
- *
- * If both `bindToController` and `scope` are defined and have object hashes, `bindToController` overrides `scope`.
- *
- *
- * #### `controller`
- * Controller constructor function. The controller is instantiated before the
- * pre-linking phase and can be accessed by other directives (see
- * `require` attribute). This allows the directives to communicate with each other and augment
- * each other's behavior. The controller is injectable (and supports bracket notation) with the following locals:
- *
- * * `$scope` - Current scope associated with the element
- * * `$element` - Current element
- * * `$attrs` - Current attributes object for the element
- * * `$transclude` - A transclude linking function pre-bound to the correct transclusion scope:
- *   `function([scope], cloneLinkingFn, futureParentElement, slotName)`:
- *    * `scope`: (optional) override the scope.
- *    * `cloneLinkingFn`: (optional) argument to create clones of the original transcluded content.
- *    * `futureParentElement` (optional):
- *        * defines the parent to which the `cloneLinkingFn` will add the cloned elements.
- *        * default: `$element.parent()` resp. `$element` for `transclude:'element'` resp. `transclude:true`.
- *        * only needed for transcludes that are allowed to contain non html elements (e.g. SVG elements)
- *          and when the `cloneLinkingFn` is passed,
- *          as those elements need to created and cloned in a special way when they are defined outside their
- *          usual containers (e.g. like `<svg>`).
- *        * See also the `directive.templateNamespace` property.
- *    * `slotName`: (optional) the name of the slot to transclude. If falsy (e.g. `null`, `undefined` or `''`)
- *      then the default transclusion is provided.
- *    The `$transclude` function also has a method on it, `$transclude.isSlotFilled(slotName)`, which returns
- *    `true` if the specified slot contains content (i.e. one or more DOM nodes).
- *
- * #### `require`
- * Require another directive and inject its controller as the fourth argument to the linking function. The
- * `require` property can be a string, an array or an object:
- * * a **string** containing the name of the directive to pass to the linking function
- * * an **array** containing the names of directives to pass to the linking function. The argument passed to the
- * linking function will be an array of controllers in the same order as the names in the `require` property
- * * an **object** whose property values are the names of the directives to pass to the linking function. The argument
- * passed to the linking function will also be an object with matching keys, whose values will hold the corresponding
- * controllers.
- *
- * If the `require` property is an object and `bindToController` is truthy, then the required controllers are
- * bound to the controller using the keys of the `require` property. This binding occurs after all the controllers
- * have been constructed but before `$onInit` is called.
- * If the name of the required controller is the same as the local name (the key), the name can be
- * omitted. For example, `{parentDir: '^^'}` is equivalent to `{parentDir: '^^parentDir'}`.
- * See the {@link $compileProvider#component} helper for an example of how this can be used.
- * If no such required directive(s) can be found, or if the directive does not have a controller, then an error is
- * raised (unless no link function is specified and the required controllers are not being bound to the directive
- * controller, in which case error checking is skipped). The name can be prefixed with:
- *
- * * (no prefix) - Locate the required controller on the current element. Throw an error if not found.
- * * `?` - Attempt to locate the required controller or pass `null` to the `link` fn if not found.
- * * `^` - Locate the required controller by searching the element and its parents. Throw an error if not found.
- * * `^^` - Locate the required controller by searching the element's parents. Throw an error if not found.
- * * `?^` - Attempt to locate the required controller by searching the element and its parents or pass
- *   `null` to the `link` fn if not found.
- * * `?^^` - Attempt to locate the required controller by searching the element's parents, or pass
- *   `null` to the `link` fn if not found.
- *
- *
- * #### `controllerAs`
- * Identifier name for a reference to the controller in the directive's scope.
- * This allows the controller to be referenced from the directive template. This is especially
- * useful when a directive is used as component, i.e. with an `isolate` scope. It's also possible
- * to use it in a directive without an `isolate` / `new` scope, but you need to be aware that the
- * `controllerAs` reference might overwrite a property that already exists on the parent scope.
- *
- *
- * #### `restrict`
- * String of subset of `EACM` which restricts the directive to a specific directive
- * declaration style. If omitted, the defaults (elements and attributes) are used.
- *
- * * `E` - Element name (default): `<my-directive></my-directive>`
- * * `A` - Attribute (default): `<div my-directive="exp"></div>`
- * * `C` - Class: `<div class="my-directive: exp;"></div>`
- * * `M` - Comment: `<!-- directive: my-directive exp -->`
- *
- *
- * #### `templateNamespace`
- * String representing the document type used by the markup in the template.
- * AngularJS needs this information as those elements need to be created and cloned
- * in a special way when they are defined outside their usual containers like `<svg>` and `<math>`.
- *
- * * `html` - All root nodes in the template are HTML. Root nodes may also be
- *   top-level elements such as `<svg>` or `<math>`.
- * * `svg` - The root nodes in the template are SVG elements (excluding `<math>`).
- * * `math` - The root nodes in the template are MathML elements (excluding `<svg>`).
- *
- * If no `templateNamespace` is specified, then the namespace is considered to be `html`.
- *
- * #### `template`
- * HTML markup that may:
- * * Replace the contents of the directive's element (default).
- * * Replace the directive's element itself (if `replace` is true - DEPRECATED).
- * * Wrap the contents of the directive's element (if `transclude` is true).
- *
- * Value may be:
- *
- * * A string. For example `<div red-on-hover>{{delete_str}}</div>`.
- * * A function which takes two arguments `tElement` and `tAttrs` (described in the `compile`
- *   function api below) and returns a string value.
- *
- *
- * #### `templateUrl`
- * This is similar to `template` but the template is loaded from the specified URL, asynchronously.
- *
- * Because template loading is asynchronous the compiler will suspend compilation of directives on that element
- * for later when the template has been resolved.  In the meantime it will continue to compile and link
- * sibling and parent elements as though this element had not contained any directives.
- *
- * The compiler does not suspend the entire compilation to wait for templates to be loaded because this
- * would result in the whole app "stalling" until all templates are loaded asynchronously - even in the
- * case when only one deeply nested directive has `templateUrl`.
- *
- * Template loading is asynchronous even if the template has been preloaded into the {@link $templateCache}.
- *
- * You can specify `templateUrl` as a string representing the URL or as a function which takes two
- * arguments `tElement` and `tAttrs` (described in the `compile` function api below) and returns
- * a string value representing the url.  In either case, the template URL is passed through {@link
- * $sce#getTrustedResourceUrl $sce.getTrustedResourceUrl}.
- *
- *
- * #### `replace`
- * <div class="alert alert-danger">
- * **Note:** `replace` is deprecated in AngularJS and has been removed in the new Angular (v2+).
- * </div>
- *
- * Specifies what the template should replace. Defaults to `false`.
- *
- * * `true` - the template will replace the directive's element.
- * * `false` - the template will replace the contents of the directive's element.
- *
- * The replacement process migrates all of the attributes / classes from the old element to the new
- * one. See the {@link guide/directive#template-expanding-directive
- * Directives Guide} for an example.
- *
- * There are very few scenarios where element replacement is required for the application function,
- * the main one being reusable custom components that are used within SVG contexts
- * (because SVG doesn't work with custom elements in the DOM tree).
- *
- * #### `transclude`
- * Extract the contents of the element where the directive appears and make it available to the directive.
- * The contents are compiled and provided to the directive as a **transclusion function**. See the
- * {@link $compile#transclusion Transclusion} section below.
- *
- *
- * #### `compile`
- *
- * ```js
- *   function compile(tElement, tAttrs, transclude) { ... }
- * ```
- *
- * The compile function deals with transforming the template DOM. Since most directives do not do
- * template transformation, it is not used often. The compile function takes the following arguments:
- *
- *   * `tElement` - template element - The element where the directive has been declared. It is
- *     safe to do template transformation on the element and child elements only.
- *
- *   * `tAttrs` - template attributes - Normalized list of attributes declared on this element shared
- *     between all directive compile functions.
- *
- *   * `transclude` -  [*DEPRECATED*!] A transclude linking function: `function(scope, cloneLinkingFn)`
- *
- * <div class="alert alert-warning">
- * **Note:** The template instance and the link instance may be different objects if the template has
- * been cloned. For this reason it is **not** safe to do anything other than DOM transformations that
- * apply to all cloned DOM nodes within the compile function. Specifically, DOM listener registration
- * should be done in a linking function rather than in a compile function.
- * </div>
-
- * <div class="alert alert-warning">
- * **Note:** The compile function cannot handle directives that recursively use themselves in their
- * own templates or compile functions. Compiling these directives results in an infinite loop and
- * stack overflow errors.
- *
- * This can be avoided by manually using `$compile` in the postLink function to imperatively compile
- * a directive's template instead of relying on automatic template compilation via `template` or
- * `templateUrl` declaration or manual compilation inside the compile function.
- * </div>
- *
- * <div class="alert alert-danger">
- * **Note:** The `transclude` function that is passed to the compile function is deprecated, as it
- *   e.g. does not know about the right outer scope. Please use the transclude function that is passed
- *   to the link function instead.
- * </div>
-
- * A compile function can have a return value which can be either a function or an object.
- *
- * * returning a (post-link) function - is equivalent to registering the linking function via the
- *   `link` property of the config object when the compile function is empty.
- *
- * * returning an object with function(s) registered via `pre` and `post` properties - allows you to
- *   control when a linking function should be called during the linking phase. See info about
- *   pre-linking and post-linking functions below.
- *
- *
- * #### `link`
- * This property is used only if the `compile` property is not defined.
- *
- * ```js
- *   function link(scope, iElement, iAttrs, controller, transcludeFn) { ... }
- * ```
- *
- * The link function is responsible for registering DOM listeners as well as updating the DOM. It is
- * executed after the template has been cloned. This is where most of the directive logic will be
- * put.
- *
- *   * `scope` - {@link ng.$rootScope.Scope Scope} - The scope to be used by the
- *     directive for registering {@link ng.$rootScope.Scope#$watch watches}.
- *
- *   * `iElement` - instance element - The element where the directive is to be used. It is safe to
- *     manipulate the children of the element only in `postLink` function since the children have
- *     already been linked.
- *
- *   * `iAttrs` - instance attributes - Normalized list of attributes declared on this element shared
- *     between all directive linking functions.
- *
- *   * `controller` - the directive's required controller instance(s) - Instances are shared
- *     among all directives, which allows the directives to use the controllers as a communication
- *     channel. The exact value depends on the directive's `require` property:
- *       * no controller(s) required: the directive's own controller, or `undefined` if it doesn't have one
- *       * `string`: the controller instance
- *       * `array`: array of controller instances
- *
- *     If a required controller cannot be found, and it is optional, the instance is `null`,
- *     otherwise the {@link error:$compile:ctreq Missing Required Controller} error is thrown.
- *
- *     Note that you can also require the directive's own controller - it will be made available like
- *     any other controller.
- *
- *   * `transcludeFn` - A transclude linking function pre-bound to the correct transclusion scope.
- *     This is the same as the `$transclude` parameter of directive controllers,
- *     see {@link ng.$compile#-controller- the controller section for details}.
- *     `function([scope], cloneLinkingFn, futureParentElement)`.
- *
- * #### Pre-linking function
- *
- * Executed before the child elements are linked. Not safe to do DOM transformation since the
- * compiler linking function will fail to locate the correct elements for linking.
- *
- * #### Post-linking function
- *
- * Executed after the child elements are linked.
- *
- * Note that child elements that contain `templateUrl` directives will not have been compiled
- * and linked since they are waiting for their template to load asynchronously and their own
- * compilation and linking has been suspended until that occurs.
- *
- * It is safe to do DOM transformation in the post-linking function on elements that are not waiting
- * for their async templates to be resolved.
- *
- *
- * ### Transclusion
- *
- * Transclusion is the process of extracting a collection of DOM elements from one part of the DOM and
- * copying them to another part of the DOM, while maintaining their connection to the original AngularJS
- * scope from where they were taken.
- *
- * Transclusion is used (often with {@link ngTransclude}) to insert the
- * original contents of a directive's element into a specified place in the template of the directive.
- * The benefit of transclusion, over simply moving the DOM elements manually, is that the transcluded
- * content has access to the properties on the scope from which it was taken, even if the directive
- * has isolated scope.
- * See the {@link guide/directive#creating-a-directive-that-wraps-other-elements Directives Guide}.
- *
- * This makes it possible for the widget to have private state for its template, while the transcluded
- * content has access to its originating scope.
- *
- * <div class="alert alert-warning">
- * **Note:** When testing an element transclude directive you must not place the directive at the root of the
- * DOM fragment that is being compiled. See {@link guide/unit-testing#testing-transclusion-directives
- * Testing Transclusion Directives}.
- * </div>
- *
- * There are three kinds of transclusion depending upon whether you want to transclude just the contents of the
- * directive's element, the entire element or multiple parts of the element contents:
- *
- * * `true` - transclude the content (i.e. the child nodes) of the directive's element.
- * * `'element'` - transclude the whole of the directive's element including any directives on this
- *   element that are defined at a lower priority than this directive. When used, the `template`
- *   property is ignored.
- * * **`{...}` (an object hash):** - map elements of the content onto transclusion "slots" in the template.
- *
- * **Multi-slot transclusion** is declared by providing an object for the `transclude` property.
- *
- * This object is a map where the keys are the name of the slot to fill and the value is an element selector
- * used to match the HTML to the slot. The element selector should be in normalized form (e.g. `myElement`)
- * and will match the standard element variants (e.g. `my-element`, `my:element`, `data-my-element`, etc).
- *
- * For further information check out the guide on {@link guide/directive#matching-directives Matching Directives}.
- *
- * If the element selector is prefixed with a `?` then that slot is optional.
- *
- * For example, the transclude object `{ slotA: '?myCustomElement' }` maps `<my-custom-element>` elements to
- * the `slotA` slot, which can be accessed via the `$transclude` function or via the {@link ngTransclude} directive.
- *
- * Slots that are not marked as optional (`?`) will trigger a compile time error if there are no matching elements
- * in the transclude content. If you wish to know if an optional slot was filled with content, then you can call
- * `$transclude.isSlotFilled(slotName)` on the transclude function passed to the directive's link function and
- * injectable into the directive's controller.
- *
- *
- * #### Transclusion Functions
- *
- * When a directive requests transclusion, the compiler extracts its contents and provides a **transclusion
- * function** to the directive's `link` function and `controller`. This transclusion function is a special
- * **linking function** that will return the compiled contents linked to a new transclusion scope.
- *
- * <div class="alert alert-info">
- * If you are just using {@link ngTransclude} then you don't need to worry about this function, since
- * ngTransclude will deal with it for us.
- * </div>
- *
- * If you want to manually control the insertion and removal of the transcluded content in your directive
- * then you must use this transclude function. When you call a transclude function it returns a jqLite/JQuery
- * object that contains the compiled DOM, which is linked to the correct transclusion scope.
- *
- * When you call a transclusion function you can pass in a **clone attach function**. This function accepts
- * two parameters, `function(clone, scope) { ... }`, where the `clone` is a fresh compiled copy of your transcluded
- * content and the `scope` is the newly created transclusion scope, which the clone will be linked to.
- *
- * <div class="alert alert-info">
- * **Best Practice**: Always provide a `cloneFn` (clone attach function) when you call a transclude function
- * since you then get a fresh clone of the original DOM and also have access to the new transclusion scope.
- * </div>
- *
- * It is normal practice to attach your transcluded content (`clone`) to the DOM inside your **clone
- * attach function**:
- *
- * ```js
- * let transcludedContent, transclusionScope;
- *
- * $transclude(function(clone, scope) {
- *   element.append(clone);
- *   transcludedContent = clone;
- *   transclusionScope = scope;
- * });
- * ```
- *
- * Later, if you want to remove the transcluded content from your DOM then you should also destroy the
- * associated transclusion scope:
- *
- * ```js
- * transcludedContent.remove();
- * transclusionScope.$destroy();
- * ```
- *
- * <div class="alert alert-info">
- * **Best Practice**: if you intend to add and remove transcluded content manually in your directive
- * (by calling the transclude function to get the DOM and calling `element.remove()` to remove it),
- * then you are also responsible for calling `$destroy` on the transclusion scope.
- * </div>
- *
- * The built-in DOM manipulation directives, such as {@link ngIf}, {@link ngSwitch} and {@link ngRepeat}
- * automatically destroy their transcluded clones as necessary so you do not need to worry about this if
- * you are simply using {@link ngTransclude} to inject the transclusion into your directive.
- *
- *
- * #### Transclusion Scopes
- *
- * When you call a transclude function it returns a DOM fragment that is pre-bound to a **transclusion
- * scope**. This scope is special, in that it is a child of the directive's scope (and so gets destroyed
- * when the directive's scope gets destroyed) but it inherits the properties of the scope from which it
- * was taken.
- *
- * For example consider a directive that uses transclusion and isolated scope. The DOM hierarchy might look
- * like this:
- *
- * ```html
- * <div ng-app>
- *   <div isolate>
- *     <div transclusion>
- *     </div>
- *   </div>
- * </div>
- * ```
- *
- * The `$parent` scope hierarchy will look like this:
- *
-   ```
-   - $rootScope
-     - isolate
-       - transclusion
-   ```
- *
- * but the scopes will inherit prototypically from different scopes to their `$parent`.
- *
-   ```
-   - $rootScope
-     - transclusion
-   - isolate
-   ```
- *
- *
- * ### Attributes
- *
- * The {@link ng.$compile.directive.Attributes Attributes} object - passed as a parameter in the
- * `link()` or `compile()` functions. It has a variety of uses.
- *
- * * *Accessing normalized attribute names:* Directives like `ngBind` can be expressed in many ways:
- *   `ng:bind`, `data-ng-bind`, or `x-ng-bind`. The attributes object allows for normalized access
- *   to the attributes.
- *
- * * *Directive inter-communication:* All directives share the same instance of the attributes
- *   object which allows the directives to use the attributes object as inter directive
- *   communication.
- *
- * * *Supports interpolation:* Interpolation attributes are assigned to the attribute object
- *   allowing other directives to read the interpolated value.
- *
- * * *Observing interpolated attributes:* Use `$observe` to observe the value changes of attributes
- *   that contain interpolation (e.g. `src="{{bar}}"`). Not only is this very efficient but it's also
- *   the only way to easily get the actual value because during the linking phase the interpolation
- *   hasn't been evaluated yet and so the value is at this time set to `undefined`.
- *
- * ```js
- * function linkingFn(scope, elm, attrs, ctrl) {
- *   // get the attribute value
- *   console.log(attrs.ngModel);
- *
- *   // change the attribute
- *   attrs.$set('ngModel', 'new value');
- *
- *   // observe changes to interpolated attribute
- *   attrs.$observe('ngModel', function(value) {
- *     console.log('ngModel has changed value to ' + value);
- *   });
- * }
- * ```
- *
- *
- *
- * @param {string|Element} element Element or HTML string to compile into a template function.
- * @param {function(angular.Scope, cloneAttachFn=)} transclude function available to directives - DEPRECATED.
- *
- * <div class="alert alert-danger">
- * **Note:** Passing a `transclude` function to the $compile function is deprecated, as it
- *   e.g. will not use the right outer scope. Please pass the transclude function as a
- *   `parentBoundTranscludeFn` to the link function instead.
- * </div>
- *
- * @param {number} maxPriority only apply directives lower than given priority (Only effects the
- *                 root element(s), not their children)
- * @returns {function(scope, cloneAttachFn=, options=)} a link function which is used to bind template
- * (a DOM element/tree) to a scope. Where:
- *
- *  * `scope` - A {@link ng.$rootScope.Scope Scope} to bind to.
- *  * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone the
- *  `template` and call the `cloneAttachFn` function allowing the caller to attach the
- *  cloned elements to the DOM document at the appropriate place. The `cloneAttachFn` is
- *  called as: <br/> `cloneAttachFn(clonedElement, scope)` where:
- *
- *      * `clonedElement` - is a clone of the original `element` passed into the compiler.
- *      * `scope` - is the current scope with which the linking function is working with.
- *
- *  * `options` - An optional object hash with linking options. If `options` is provided, then the following
- *  keys may be used to control linking behavior:
- *
- *      * `parentBoundTranscludeFn` - the transclude function made available to
- *        directives; if given, it will be passed through to the link functions of
- *        directives found in `element` during compilation.
- *      * `transcludeControllers` - an object hash with keys that map controller names
- *        to a hash with the key `instance`, which maps to the controller instance;
- *        if given, it will make the controllers available to directives on the compileNode:
- *        ```
- *        {
- *          parent: {
- *            instance: parentControllerInstance
- *          }
- *        }
- *        ```
- *      * `futureParentElement` - defines the parent to which the `cloneAttachFn` will add
- *        the cloned elements; only needed for transcludes that are allowed to contain non HTML
- *        elements (e.g. SVG elements). See also the `directive.controller` property.
- *
- * Calling the linking function returns the element of the template. It is either the original
- * element passed in, or the clone of the element if the `cloneAttachFn` is provided.
- *
- * After linking the view is not updated until after a call to `$digest`, which typically is done by
- * AngularJS automatically.
- *
- * If you need access to the bound view, there are two ways to do it:
- *
- * - If you are not asking the linking function to clone the template, create the DOM element(s)
- *   before you send them to the compiler and keep this reference around.
- *   ```js
- *     let element = angular.element('<p>{{total}}</p>');
- *     $compile(element)(scope);
- *   ```
- *
- * - if on the other hand, you need the element to be cloned, the view reference from the original
- *   example would not point to the clone, but rather to the original template that was cloned. In
- *   this case, you can access the clone either via the `cloneAttachFn` or the value returned by the
- *   linking function:
- *   ```js
- *     let templateElement = angular.element('<p>{{total}}</p>');
- *     let clonedElement = $compile(templateElement)(scope, function(clonedElement, scope) {
- *       // Attach the clone to DOM document at the right place.
- *     });
- *
- *     // Now we have reference to the cloned DOM via `clonedElement`.
- *     // NOTE: The `clonedElement` returned by the linking function is the same as the
- *     //       `clonedElement` passed to `cloneAttachFn`.
- *   ```
- *
- *
- * For information on how the compiler works, see the
- * {@link guide/compiler AngularJS HTML Compiler} section of the Developer Guide.
- *
- * @knownIssue
- *
- * ### Double Compilation
- *
-   Double compilation occurs when an already compiled part of the DOM gets
-   compiled again. This is an undesired effect and can lead to misbehaving directives, performance issues,
-   and memory leaks. Refer to the Compiler Guide {@link guide/compiler#double-compilation-and-how-to-avoid-it
-   section on double compilation} for an in-depth explanation and ways to avoid it.
-
- * @knownIssue
-
-   ### Issues with `replace: true`
- *
- * <div class="alert alert-danger">
- *   **Note**: {@link $compile#-replace- `replace: true`} is deprecated and not recommended to use,
- *   mainly due to the issues listed here. It has been completely removed in the new Angular.
- * </div>
- *
- * #### Attribute values are not merged
- *
- * When a `replace` directive encounters the same attribute on the original and the replace node,
- * it will simply deduplicate the attribute and join the values with a space or with a `;` in case of
- * the `style` attribute.
- * ```html
- * Original Node: <span class="original" style="color: red;"></span>
- * Replace Template: <span class="replaced" style="background: blue;"></span>
- * Result: <span class="original replaced" style="color: red; background: blue;"></span>
- * ```
- *
- * That means attributes that contain AngularJS expressions will not be merged correctly, e.g.
- * {@link ngShow} or {@link ngClass} will cause a {@link $parse} error:
- *
- * ```html
- * Original Node: <span ng-class="{'something': something}" ng-show="!condition"></span>
- * Replace Template: <span ng-class="{'else': else}" ng-show="otherCondition"></span>
- * Result: <span ng-class="{'something': something} {'else': else}" ng-show="!condition otherCondition"></span>
- * ```
- *
- * See issue [#5695](https://github.com/angular/angular.js/issues/5695).
- *
- * #### Directives are not deduplicated before compilation
- *
- * When the original node and the replace template declare the same directive(s), they will be
- * {@link guide/compiler#double-compilation-and-how-to-avoid-it compiled twice} because the compiler
- * does not deduplicate them. In many cases, this is not noticeable, but e.g. {@link ngModel} will
- * attach `$formatters` and `$parsers` twice.
- *
- * See issue [#2573](https://github.com/angular/angular.js/issues/2573).
- *
- * #### `transclude: element` in the replace template root can have unexpected effects
- *
- * When the replace template has a directive at the root node that uses
- * {@link $compile#-transclude- `transclude: element`}, e.g.
- * {@link ngIf} or {@link ngRepeat}, the DOM structure or scope inheritance can be incorrect.
- * See the following issues:
- *
- * - Incorrect scope on replaced element:
- * [#9837](https://github.com/angular/angular.js/issues/9837)
- * - Different DOM between `template` and `templateUrl`:
- * [#10612](https://github.com/angular/angular.js/issues/14326)
- *
- */
-
-/**
- * @ngdoc directive
- * @name ngProp
- * @restrict A
- * @element ANY
- *
- * @usage
- *
- * ```html
- * <ANY ng-prop-propname="expression">
- * </ANY>
- * ```
- *
- * or with uppercase letters in property (e.g. "propName"):
- *
- *
- * ```html
- * <ANY ng-prop-prop_name="expression">
- * </ANY>
- * ```
- *
- *
- * @description
- * The `ngProp` directive binds an expression to a DOM element property.
- * `ngProp` allows writing to arbitrary properties by including
- * the property name in the attribute, e.g. `ng-prop-value="'my value'"` binds 'my value' to
- * the `value` property.
- *
- * Usually, it's not necessary to write to properties in AngularJS, as the built-in directives
- * handle the most common use cases (instead of the above example, you would use {@link ngValue}).
- *
- * However, [custom elements](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements)
- * often use custom properties to hold data, and `ngProp` can be used to provide input to these
- * custom elements.
- *
- * ## Binding to camelCase properties
- *
- * Since HTML attributes are case-insensitive, camelCase properties like `innerHTML` must be escaped.
- * AngularJS uses the underscore (_) in front of a character to indicate that it is uppercase, so
- * `innerHTML`  must be written as `ng-prop-inner_h_t_m_l="expression"` (Note that this is just an
- * example, and for binding HTML {@link ngBindHtml} should be used.
- *
- * ## Security
- *
- * Binding expressions to arbitrary properties poses a security risk, as  properties like `innerHTML`
- * can insert potentially dangerous HTML into the application, e.g. script tags that execute
- * malicious code.
- * For this reason, `ngProp` applies Strict Contextual Escaping with the {@link ng.$sce $sce service}.
- * This means vulnerable properties require their content to be "trusted", based on the
- * context of the property. For example, the `innerHTML` is in the `HTML` context, and the
- * `iframe.src` property is in the `RESOURCE_URL` context, which requires that values written to
- * this property are trusted as a `RESOURCE_URL`.
- *
- * This can be set explicitly by calling $sce.trustAs(type, value) on the value that is
- * trusted before passing it to the `ng-prop-*` directive. There are exist shorthand methods for
- * each context type in the form of {@link ng.$sce#trustAsResourceUrl $sce.trustAsResourceUrl()} et al.
- *
- * In some cases you can also rely upon automatic sanitization of untrusted values - see below.
- *
- * Based on the context, other options may exist to mark a value as trusted / configure the behavior
- * of {@link ng.$sce}. For example, to restrict the `RESOURCE_URL` context to specific origins, use
- * the {@link $sceDelegateProvider#trustedResourceUrlList trustedResourceUrlList()}
- * and {@link $sceDelegateProvider#bannedResourceUrlList bannedResourceUrlList()}.
- *
- * {@link ng.$sce#what-trusted-context-types-are-supported- Find out more about the different context types}.
- *
- * ### HTML Sanitization
- *
- * By default, `$sce` will throw an error if it detects untrusted HTML content, and will not bind the
- * content.
- * However, if you include the {@link ngSanitize ngSanitize module}, it will try to sanitize the
- * potentially dangerous HTML, e.g. strip non-trusted tags and attributes when binding to
- * `innerHTML`.
- *
- *
- */
-
-/** @ngdoc directive
- * @name ngOn
- * @restrict A
- * @element ANY
- *
- * @usage
- *
- * ```html
- * <ANY ng-on-eventname="expression">
- * </ANY>
- * ```
- *
- * or with uppercase letters in property (e.g. "eventName"):
- *
- *
- * ```html
- * <ANY ng-on-event_name="expression">
- * </ANY>
- * ```
- *
- * @description
- * The `ngOn` directive adds an event listener to a DOM element via
- * {@link angular.element angular.element().on()}, and evaluates an expression when the event is
- * fired.
- * `ngOn` allows adding listeners for arbitrary events by including
- * the event name in the attribute, e.g. `ng-on-drop="onDrop()"` executes the 'onDrop()' expression
- * when the `drop` event is fired.
- *
- * AngularJS provides specific directives for many events, such as {@link ngClick}, so in most
- * cases it is not necessary to use `ngOn`. However, AngularJS does not support all events
- * (e.g. the `drop` event in the example above), and new events might be introduced in later DOM
- * standards.
- *
- * Another use-case for `ngOn` is listening to
- * [custom events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events)
- * fired by
- * [custom elements](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements).
- *
- * ## Binding to camelCase properties
- *
- * Since HTML attributes are case-insensitive, camelCase properties like `myEvent` must be escaped.
- * AngularJS uses the underscore (_) in front of a character to indicate that it is uppercase, so
- * `myEvent` must be written as `ng-on-my_event="expression"`.
- *
- *
- */
-
 const $compileMinErr = minErr("$compile");
 
 function UNINITIALIZED_VALUE() {}
@@ -8416,7 +7299,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
           let nodeName;
 
           if (booleanKey) {
-            this.$$element.prop(key, value);
+            this.$$element[0][key] = value;
             attrName = booleanKey;
           } else if (aliasedKey) {
             this[aliasedKey] = value;
@@ -10544,6 +9427,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       function sanitizeSrcsetPropertyValue(value) {
         return sanitizeSrcset($sce.valueOf(value), "ng-prop-srcset");
       }
+
       function addPropertyDirective(node, directives, attrName, propName) {
         if (EVENT_HANDLER_ATTR_REGEXP.test(propName)) {
           throw $compileMinErr(
@@ -10696,9 +9580,9 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
        * This is a special jqLite.replaceWith, which can replace items which
        * have no parents, provided that the containing jqLite collection is provided.
        *
-       * @param {JqLite=} $rootElement The root of the compile tree. Used so that we can replace nodes
+       * @param {JQLite} $rootElement The root of the compile tree. Used so that we can replace nodes
        *                               in the root of the tree.
-       * @param {JqLite} elementsToRemove The jqLite element which we are going to replace. We keep
+       * @param {JQLite} elementsToRemove The jqLite element which we are going to replace. We keep
        *                                  the shell, but replace its DOM node reference.
        * @param {Node} newNode The new DOM node.
        */
@@ -10750,7 +9634,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
           fragment.appendChild(elementsToRemove[i]);
         }
 
-        if (jqLite.hasData(firstElementToRemove)) {
+        if (CACHE.has(firstElementToRemove[EXPANDO])) {
           // Copy over user data (that includes AngularJS's $scope etc.). Don't copy private
           // data here because there's no public interface in jQuery to do that and copying over
           // event listeners (which is the main use of private data) wouldn't work anyway.
@@ -11124,7 +10008,7 @@ function htmlAnchorDirective() {
 
           // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute.
           const href =
-            toString.call(element.prop("href")) === "[object SVGAnimatedString]"
+            toString.call(element[0].href) === "[object SVGAnimatedString]"
               ? "xlink:href"
               : "href";
           element.on("click", (event) => {
@@ -14760,7 +13644,7 @@ function badInputChecker(scope, element, attr, ctrl, parserName) {
 
   if (nativeValidation) {
     ctrl.$parsers.push((value) => {
-      const validity = element.prop(VALIDITY_STATE_PROPERTY) || {};
+      const validity = element[0][VALIDITY_STATE_PROPERTY] || {};
       if (validity.badInput || validity.typeMismatch) {
         ctrl.$$parserName = parserName;
         return undefined;
@@ -15417,7 +14301,7 @@ function ngValueDirective() {
     // Support: IE9 only
     // In IE9 values are converted to string (e.g. `input.value = null` results in `input.value === 'null'`).
     const propValue = isDefined(value) ? value : null;
-    element.prop("value", propValue);
+    element[0]["value"] = propValue;
     attr.$set("value", value);
   }
 
@@ -15474,7 +14358,7 @@ const scriptDirective = [
 const noopNgModelController = { $setViewValue: () => {}, $render: () => {} };
 
 function setOptionSelectedStatus(optionEl, value) {
-  optionEl.prop("selected", value);
+  optionEl[0].selected = value;
   /**
    * When unselecting an option, setting the property to null / false should be enough
    * However, screenreaders might react to the selected attribute instead, see
@@ -15741,7 +14625,7 @@ var SelectController = [
 
         optionAttrs.$observe("value", (newVal) => {
           let removal;
-          const previouslySelected = optionElement.prop("selected");
+          const previouslySelected = optionElement[0].selected;
 
           if (isDefined(hashedVal)) {
             self.removeOption(oldVal);
@@ -15769,7 +14653,7 @@ var SelectController = [
           self.readValue();
 
           let removal;
-          const previouslySelected = optionElement.prop("selected");
+          const previouslySelected = optionElement[0].selected;
 
           if (isDefined(oldVal)) {
             self.removeOption(oldVal);
@@ -15786,7 +14670,7 @@ var SelectController = [
         // The text content is interpolated
         optionScope.$watch(interpolateTextFn, (newVal, oldVal) => {
           optionAttrs.$set("value", newVal);
-          const previouslySelected = optionElement.prop("selected");
+          const previouslySelected = optionElement[0].selected;
           if (oldVal !== newVal) {
             self.removeOption(oldVal);
           }
@@ -15805,7 +14689,7 @@ var SelectController = [
         // Since model updates will also select disabled options (like ngOptions),
         // we only have to handle options becoming disabled, not enabled
 
-        if (newVal === "true" || (newVal && optionElement.prop("selected"))) {
+        if (newVal === "true" || (newVal && optionElement[0].selected)) {
           if (self.multiple) {
             scheduleViewValueUpdate(true);
           } else {
@@ -19093,7 +17977,7 @@ forEach(["src", "srcset", "href"], (attrName) => {
 
           if (
             attrName === "href" &&
-            toString.call(element.prop("href")) === "[object SVGAnimatedString]"
+            toString.call(element[0].href) === "[object SVGAnimatedString]"
           ) {
             name = "xlinkHref";
             attr.$attr[name] = "xlink:href";
@@ -23541,31 +22425,6 @@ function $$IntervalFactoryProvider() {
   ];
 }
 
-function $$ForceReflowProvider() {
-  this.$get = [
-    "$document",
-    ($document) =>
-      function (domNode) {
-        // the line below will force the browser to perform a repaint so
-        // that all the animated elements within the animation frame will
-        // be properly updated and drawn on screen. This is required to
-        // ensure that the preparation animation is properly flushed so that
-        // the active state picks up from there. DO NOT REMOVE THIS LINE.
-        // DO NOT OPTIMIZE THIS LINE. THE MINIFIER WILL REMOVE IT OTHERWISE WHICH
-        // WILL RESULT IN AN UNPREDICTABLE BUG THAT IS VERY HARD TO TRACK DOWN AND
-        // WILL TAKE YEARS AWAY FROM YOUR LIFE.
-        if (domNode) {
-          if (!domNode.nodeType && domNode instanceof jqLite) {
-            domNode = domNode[0];
-          }
-        } else {
-          domNode = $document[0].body;
-        }
-        return domNode.offsetWidth + 1;
-      },
-  ];
-}
-
 const APPLICATION_JSON = "application/json";
 const CONTENT_TYPE_APPLICATION_JSON = {
   "Content-Type": `${APPLICATION_JSON};charset=utf-8`,
@@ -26205,7 +25064,7 @@ function $LocationProvider() {
         if (isString(rewriteLinks) && isUndefined(elm.attr(rewriteLinks)))
           return;
 
-        let absHref = elm.prop("href");
+        let absHref = elm[0].href;
         // get the actual href attribute - see
         // http://msdn.microsoft.com/en-us/library/ie/dd347148(v=vs.85).aspx
         const relHref = elm.attr("href") || elm.attr("xlink:href");
@@ -26350,52 +25209,6 @@ function $LocationProvider() {
   ];
 }
 
-/**
- * @ngdoc service
- * @name $log
- *
- * @description
- * Simple service for logging. Default implementation safely writes the message
- * into the browser's console (if present).
- *
- * The main purpose of this service is to simplify debugging and troubleshooting.
- *
- * To reveal the location of the calls to `$log` in the JavaScript console,
- * you can "blackbox" the AngularJS source in your browser:
- *
- * [Mozilla description of blackboxing](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Black_box_a_source).
- * [Chrome description of blackboxing](https://developer.chrome.com/devtools/docs/blackboxing).
- *
- * Note: Not all browsers support blackboxing.
- *
- * The default is to log `debug` messages. You can use
- * {@link ng.$logProvider ng.$logProvider#debugEnabled} to change this.
- *
- * @example
-   <example module="logExample" name="log-service">
-     <file name="script.js">
-       angular.module('logExample', [])
-         .controller('LogController', ['$scope', '$log', function($scope, $log) {
-           $scope.$log = $log;
-           $scope.message = 'Hello World!';
-         }]);
-     </file>
-     <file name="index.html">
-       <div ng-controller="LogController">
-         <p>Reload this page with open console, enter text and hit the log button...</p>
-         <label>Message:
-         <input type="text" ng-model="message" /></label>
-         <button ng-click="$log.log(message)">log</button>
-         <button ng-click="$log.warn(message)">warn</button>
-         <button ng-click="$log.info(message)">info</button>
-         <button ng-click="$log.error(message)">error</button>
-         <button ng-click="$log.debug(message)">debug</button>
-       </div>
-     </file>
-   </example>
- */
-
-
 /**
  * @ngdoc provider
  * @name $logProvider
@@ -26404,9 +25217,10 @@ function $LocationProvider() {
  * @description
  * Use the `$logProvider` to configure how the application logs messages
  */
-function $LogProvider() {
-  let debug = true;
-  const self = this;
+class $LogProvider {
+  constructor() {
+    this.debug = true;
+  }
 
   /**
    * @ngdoc method
@@ -26415,15 +25229,15 @@ function $LogProvider() {
    * @param {boolean=} flag enable or disable debug level messages
    * @returns {*} current value if used as getter or itself (chaining) if used as setter
    */
-  this.debugEnabled = function (flag) {
-    if (isDefined(flag)) {
-      debug = flag;
+  debugEnabled(flag) {
+    if (typeof flag !== "undefined") {
+      this.debug = flag;
       return this;
     }
-    return debug;
-  };
+    return this.debug;
+  }
 
-  function formatError(arg) {
+  formatError(arg) {
     if (isError(arg)) {
       if (arg.stack) {
         arg =
@@ -26437,77 +25251,71 @@ function $LogProvider() {
     return arg;
   }
 
-  function consoleLog(type) {
+  consoleLog(type) {
     const console = window.console || {};
     const logFn = console[type] || console.log || (() => {});
 
-    return function () {
-      var args = [];
-      forEach(arguments, function (arg) {
-        args.push(formatError(arg));
-      });
-      return logFn.apply(console, args);
+    return (...args) => {
+      const formattedArgs = args.map((arg) => this.formatError(arg));
+      return logFn.apply(console, formattedArgs);
     };
   }
 
-  this.$get = [
-    function () {
-      return {
-        /**
-         * @ngdoc method
-         * @name $log#log
-         *
-         * @description
-         * Write a log message
-         */
-        log: consoleLog("log"),
-
-        /**
-         * @ngdoc method
-         * @name $log#info
-         *
-         * @description
-         * Write an information message
-         */
-        info: consoleLog("info"),
+  $get() {
+    return {
+      /**
+       * @ngdoc method
+       * @name $log#log
+       *
+       * @description
+       * Write a log message
+       */
+      log: this.consoleLog("log"),
 
-        /**
-         * @ngdoc method
-         * @name $log#warn
-         *
-         * @description
-         * Write a warning message
-         */
-        warn: consoleLog("warn"),
+      /**
+       * @ngdoc method
+       * @name $log#info
+       *
+       * @description
+       * Write an information message
+       */
+      info: this.consoleLog("info"),
 
-        /**
-         * @ngdoc method
-         * @name $log#error
-         *
-         * @description
-         * Write an error message
-         */
-        error: consoleLog("error"),
+      /**
+       * @ngdoc method
+       * @name $log#warn
+       *
+       * @description
+       * Write a warning message
+       */
+      warn: this.consoleLog("warn"),
 
-        /**
-         * @ngdoc method
-         * @name $log#debug
-         *
-         * @description
-         * Write a debug message
-         */
-        debug: (function () {
-          const fn = consoleLog("debug");
+      /**
+       * @ngdoc method
+       * @name $log#error
+       *
+       * @description
+       * Write an error message
+       */
+      error: this.consoleLog("error"),
 
-          return function () {
-            if (debug) {
-              fn.apply(self, arguments);
-            }
-          };
-        })(),
-      };
-    },
-  ];
+      /**
+       * @ngdoc method
+       * @name $log#debug
+       *
+       * @description
+       * Write a debug message
+       */
+      debug: (() => {
+        const fn = this.consoleLog("debug");
+        return (...args) => {
+          if (this.debug) {
+            fn.apply(this, args);
+          }
+        };
+      })(),
+    };
+  }
 }
 
 const $parseMinErr = minErr("$parse");
@@ -31208,501 +30016,498 @@ const $$AnimateChildrenDirective = [
   },
 ];
 
-const $$AnimationProvider = [
-  "$animateProvider",
-  function ($animateProvider) {
-    const NG_ANIMATE_REF_ATTR = "ng-animate-ref";
-
-    const drivers = (this.drivers = []);
+function $$AnimationProvider() {
+  const NG_ANIMATE_REF_ATTR = "ng-animate-ref";
 
-    const RUNNER_STORAGE_KEY = "$$animationRunner";
-    const PREPARE_CLASSES_KEY = "$$animatePrepareClasses";
+  const drivers = (this.drivers = []);
 
-    function setRunner(element, runner) {
-      element.data(RUNNER_STORAGE_KEY, runner);
-    }
+  const RUNNER_STORAGE_KEY = "$$animationRunner";
+  const PREPARE_CLASSES_KEY = "$$animatePrepareClasses";
 
-    function removeRunner(element) {
-      element.removeData(RUNNER_STORAGE_KEY);
-    }
+  function setRunner(element, runner) {
+    element.data(RUNNER_STORAGE_KEY, runner);
+  }
 
-    function getRunner(element) {
-      return element.data(RUNNER_STORAGE_KEY);
-    }
+  function removeRunner(element) {
+    element.removeData(RUNNER_STORAGE_KEY);
+  }
 
-    this.$get = [
-      "$rootScope",
-      "$injector",
-      "$$AnimateRunner",
-      "$$rAFScheduler",
-      "$$animateCache",
-      function (
-        $rootScope,
-        $injector,
-        $$AnimateRunner,
-        $$rAFScheduler,
-        $$animateCache,
-      ) {
-        const animationQueue = [];
-        const applyAnimationClasses = applyAnimationClassesFactory();
+  function getRunner(element) {
+    return element.data(RUNNER_STORAGE_KEY);
+  }
 
-        function sortAnimations(animations) {
-          const tree = { children: [] };
-          let i;
-          const lookup = new Map();
+  this.$get = [
+    "$rootScope",
+    "$injector",
+    "$$AnimateRunner",
+    "$$rAFScheduler",
+    "$$animateCache",
+    function (
+      $rootScope,
+      $injector,
+      $$AnimateRunner,
+      $$rAFScheduler,
+      $$animateCache,
+    ) {
+      const animationQueue = [];
+      const applyAnimationClasses = applyAnimationClassesFactory();
 
-          // this is done first beforehand so that the map
-          // is filled with a list of the elements that will be animated
-          // eslint-disable-next-line no-plusplus
-          for (i = 0; i < animations.length; i++) {
-            const animation = animations[i];
-            lookup.set(
-              animation.domNode,
-              (animations[i] = {
-                domNode: animation.domNode,
-                element: animation.element,
-                fn: animation.fn,
-                children: [],
-              }),
-            );
-          }
+      function sortAnimations(animations) {
+        const tree = { children: [] };
+        let i;
+        const lookup = new Map();
+
+        // this is done first beforehand so that the map
+        // is filled with a list of the elements that will be animated
+        // eslint-disable-next-line no-plusplus
+        for (i = 0; i < animations.length; i++) {
+          const animation = animations[i];
+          lookup.set(
+            animation.domNode,
+            (animations[i] = {
+              domNode: animation.domNode,
+              element: animation.element,
+              fn: animation.fn,
+              children: [],
+            }),
+          );
+        }
 
-          for (i = 0; i < animations.length; i++) {
-            processNode(animations[i]);
-          }
+        for (i = 0; i < animations.length; i++) {
+          processNode(animations[i]);
+        }
 
-          return flatten(tree);
+        return flatten(tree);
 
-          function processNode(entry) {
-            if (entry.processed) return entry;
-            entry.processed = true;
+        function processNode(entry) {
+          if (entry.processed) return entry;
+          entry.processed = true;
 
-            const elementNode = entry.domNode;
-            let { parentNode } = elementNode;
-            lookup.set(elementNode, entry);
+          const elementNode = entry.domNode;
+          let { parentNode } = elementNode;
+          lookup.set(elementNode, entry);
 
-            let parentEntry;
-            while (parentNode) {
-              parentEntry = lookup.get(parentNode);
-              if (parentEntry) {
-                if (!parentEntry.processed) {
-                  parentEntry = processNode(parentEntry);
-                }
-                break;
+          let parentEntry;
+          while (parentNode) {
+            parentEntry = lookup.get(parentNode);
+            if (parentEntry) {
+              if (!parentEntry.processed) {
+                parentEntry = processNode(parentEntry);
               }
-              parentNode = parentNode.parentNode;
+              break;
             }
-
-            (parentEntry || tree).children.push(entry);
-            return entry;
+            parentNode = parentNode.parentNode;
           }
 
-          function flatten(tree) {
-            const result = [];
-            const queue = [];
-            let i;
+          (parentEntry || tree).children.push(entry);
+          return entry;
+        }
 
-            for (i = 0; i < tree.children.length; i++) {
-              queue.push(tree.children[i]);
-            }
+        function flatten(tree) {
+          const result = [];
+          const queue = [];
+          let i;
 
-            let remainingLevelEntries = queue.length;
-            let nextLevelEntries = 0;
-            let row = [];
-
-            for (i = 0; i < queue.length; i++) {
-              const entry = queue[i];
-              if (remainingLevelEntries <= 0) {
-                remainingLevelEntries = nextLevelEntries;
-                nextLevelEntries = 0;
-                result.push(row);
-                row = [];
-              }
-              row.push(entry);
-              entry.children.forEach((childEntry) => {
-                nextLevelEntries++;
-                queue.push(childEntry);
-              });
-              remainingLevelEntries--;
-            }
+          for (i = 0; i < tree.children.length; i++) {
+            queue.push(tree.children[i]);
+          }
 
-            if (row.length) {
+          let remainingLevelEntries = queue.length;
+          let nextLevelEntries = 0;
+          let row = [];
+
+          for (i = 0; i < queue.length; i++) {
+            const entry = queue[i];
+            if (remainingLevelEntries <= 0) {
+              remainingLevelEntries = nextLevelEntries;
+              nextLevelEntries = 0;
               result.push(row);
+              row = [];
             }
+            row.push(entry);
+            entry.children.forEach((childEntry) => {
+              nextLevelEntries++;
+              queue.push(childEntry);
+            });
+            remainingLevelEntries--;
+          }
 
-            return result;
+          if (row.length) {
+            result.push(row);
           }
-        }
 
-        // TODO(matsko): document the signature in a better way
-        return function (element, event, options) {
-          options = prepareAnimationOptions(options);
-          const isStructural = ["enter", "move", "leave"].indexOf(event) >= 0;
+          return result;
+        }
+      }
 
-          // there is no animation at the current moment, however
-          // these runner methods will get later updated with the
-          // methods leading into the driver's end/cancel methods
-          // for now they just stop the animation from starting
-          const runner = new $$AnimateRunner({
-            end() {
-              close();
-            },
-            cancel() {
-              close(true);
-            },
-          });
+      // TODO(matsko): document the signature in a better way
+      return function (element, event, options) {
+        options = prepareAnimationOptions(options);
+        const isStructural = ["enter", "move", "leave"].indexOf(event) >= 0;
 
-          if (!drivers.length) {
+        // there is no animation at the current moment, however
+        // these runner methods will get later updated with the
+        // methods leading into the driver's end/cancel methods
+        // for now they just stop the animation from starting
+        const runner = new $$AnimateRunner({
+          end() {
             close();
-            return runner;
-          }
-
-          let classes = mergeClasses$1(
-            element.attr("class"),
-            mergeClasses$1(options.addClass, options.removeClass),
-          );
-          let { tempClasses } = options;
-          if (tempClasses) {
-            classes += ` ${tempClasses}`;
-            options.tempClasses = null;
-          }
+          },
+          cancel() {
+            close(true);
+          },
+        });
 
-          if (isStructural) {
-            element.data(
-              PREPARE_CLASSES_KEY,
-              `ng-${event}${PREPARE_CLASS_SUFFIX}`,
-            );
-          }
+        if (!drivers.length) {
+          close();
+          return runner;
+        }
 
-          setRunner(element, runner);
+        let classes = mergeClasses$1(
+          element.attr("class"),
+          mergeClasses$1(options.addClass, options.removeClass),
+        );
+        let { tempClasses } = options;
+        if (tempClasses) {
+          classes += ` ${tempClasses}`;
+          options.tempClasses = null;
+        }
 
-          animationQueue.push({
-            // this data is used by the postDigest code and passed into
-            // the driver step function
-            element,
-            classes,
-            event,
-            structural: isStructural,
-            options,
-            beforeStart,
-            close,
-          });
+        if (isStructural) {
+          element.data(
+            PREPARE_CLASSES_KEY,
+            `ng-${event}${PREPARE_CLASS_SUFFIX}`,
+          );
+        }
 
-          element.on("$destroy", handleDestroyedElement);
+        setRunner(element, runner);
 
-          // we only want there to be one function called within the post digest
-          // block. This way we can group animations for all the animations that
-          // were apart of the same postDigest flush call.
-          if (animationQueue.length > 1) return runner;
+        animationQueue.push({
+          // this data is used by the postDigest code and passed into
+          // the driver step function
+          element,
+          classes,
+          event,
+          structural: isStructural,
+          options,
+          beforeStart,
+          close,
+        });
 
-          $rootScope.$$postDigest(() => {
-            const animations = [];
-            forEach(animationQueue, (entry) => {
-              // the element was destroyed early on which removed the runner
-              // form its storage. This means we can't animate this element
-              // at all and it already has been closed due to destruction.
-              if (getRunner(entry.element)) {
-                animations.push(entry);
-              } else {
-                entry.close();
-              }
-            });
+        element.on("$destroy", handleDestroyedElement);
+
+        // we only want there to be one function called within the post digest
+        // block. This way we can group animations for all the animations that
+        // were apart of the same postDigest flush call.
+        if (animationQueue.length > 1) return runner;
+
+        $rootScope.$$postDigest(() => {
+          const animations = [];
+          forEach(animationQueue, (entry) => {
+            // the element was destroyed early on which removed the runner
+            // form its storage. This means we can't animate this element
+            // at all and it already has been closed due to destruction.
+            if (getRunner(entry.element)) {
+              animations.push(entry);
+            } else {
+              entry.close();
+            }
+          });
 
-            // now any future animations will be in another postDigest
-            animationQueue.length = 0;
+          // now any future animations will be in another postDigest
+          animationQueue.length = 0;
 
-            const groupedAnimations = groupAnimations(animations);
-            const toBeSortedAnimations = [];
+          const groupedAnimations = groupAnimations(animations);
+          const toBeSortedAnimations = [];
 
-            forEach(groupedAnimations, (animationEntry) => {
-              const element = animationEntry.from
-                ? animationEntry.from.element
-                : animationEntry.element;
-              let extraClasses = options.addClass;
+          forEach(groupedAnimations, (animationEntry) => {
+            const element = animationEntry.from
+              ? animationEntry.from.element
+              : animationEntry.element;
+            let extraClasses = options.addClass;
 
-              extraClasses =
-                (extraClasses ? `${extraClasses} ` : "") + NG_ANIMATE_CLASSNAME;
-              const cacheKey = $$animateCache.cacheKey(
-                element[0],
-                animationEntry.event,
-                extraClasses,
-                options.removeClass,
-              );
+            extraClasses =
+              (extraClasses ? `${extraClasses} ` : "") + NG_ANIMATE_CLASSNAME;
+            const cacheKey = $$animateCache.cacheKey(
+              element[0],
+              animationEntry.event,
+              extraClasses,
+              options.removeClass,
+            );
 
-              toBeSortedAnimations.push({
-                element,
-                domNode: getDomNode(element),
-                fn: function triggerAnimationStart() {
-                  let startAnimationFn;
-                  const closeFn = animationEntry.close;
-
-                  // in the event that we've cached the animation status for this element
-                  // and it's in fact an invalid animation (something that has duration = 0)
-                  // then we should skip all the heavy work from here on
-                  if (
-                    $$animateCache.containsCachedAnimationWithoutDuration(
-                      cacheKey,
-                    )
-                  ) {
-                    closeFn();
-                    return;
-                  }
+            toBeSortedAnimations.push({
+              element,
+              domNode: getDomNode(element),
+              fn: function triggerAnimationStart() {
+                let startAnimationFn;
+                const closeFn = animationEntry.close;
+
+                // in the event that we've cached the animation status for this element
+                // and it's in fact an invalid animation (something that has duration = 0)
+                // then we should skip all the heavy work from here on
+                if (
+                  $$animateCache.containsCachedAnimationWithoutDuration(
+                    cacheKey,
+                  )
+                ) {
+                  closeFn();
+                  return;
+                }
 
-                  // it's important that we apply the `ng-animate` CSS class and the
-                  // temporary classes before we do any driver invoking since these
-                  // CSS classes may be required for proper CSS detection.
-                  animationEntry.beforeStart();
-
-                  // in the event that the element was removed before the digest runs or
-                  // during the RAF sequencing then we should not trigger the animation.
-                  const targetElement = animationEntry.anchors
-                    ? animationEntry.from.element || animationEntry.to.element
-                    : animationEntry.element;
-
-                  if (getRunner(targetElement)) {
-                    const operation = invokeFirstDriver(animationEntry);
-                    if (operation) {
-                      startAnimationFn = operation.start;
-                    }
+                // it's important that we apply the `ng-animate` CSS class and the
+                // temporary classes before we do any driver invoking since these
+                // CSS classes may be required for proper CSS detection.
+                animationEntry.beforeStart();
+
+                // in the event that the element was removed before the digest runs or
+                // during the RAF sequencing then we should not trigger the animation.
+                const targetElement = animationEntry.anchors
+                  ? animationEntry.from.element || animationEntry.to.element
+                  : animationEntry.element;
+
+                if (getRunner(targetElement)) {
+                  const operation = invokeFirstDriver(animationEntry);
+                  if (operation) {
+                    startAnimationFn = operation.start;
                   }
+                }
 
-                  if (!startAnimationFn) {
-                    closeFn();
-                  } else {
-                    const animationRunner = startAnimationFn();
-                    animationRunner.done((status) => {
-                      closeFn(!status);
-                    });
-                    updateAnimationRunners(animationEntry, animationRunner);
-                  }
-                },
-              });
+                if (!startAnimationFn) {
+                  closeFn();
+                } else {
+                  const animationRunner = startAnimationFn();
+                  animationRunner.done((status) => {
+                    closeFn(!status);
+                  });
+                  updateAnimationRunners(animationEntry, animationRunner);
+                }
+              },
             });
+          });
 
-            // we need to sort each of the animations in order of parent to child
-            // relationships. This ensures that the child classes are applied at the
-            // right time.
-            const finalAnimations = sortAnimations(toBeSortedAnimations);
-            for (let i = 0; i < finalAnimations.length; i++) {
-              const innerArray = finalAnimations[i];
-              for (let j = 0; j < innerArray.length; j++) {
-                const entry = innerArray[j];
-                const { element } = entry;
-
-                // the RAFScheduler code only uses functions
-                finalAnimations[i][j] = entry.fn;
-
-                // the first row of elements shouldn't have a prepare-class added to them
-                // since the elements are at the top of the animation hierarchy and they
-                // will be applied without a RAF having to pass...
-                if (i === 0) {
-                  element.removeData(PREPARE_CLASSES_KEY);
-                  continue;
-                }
+          // we need to sort each of the animations in order of parent to child
+          // relationships. This ensures that the child classes are applied at the
+          // right time.
+          const finalAnimations = sortAnimations(toBeSortedAnimations);
+          for (let i = 0; i < finalAnimations.length; i++) {
+            const innerArray = finalAnimations[i];
+            for (let j = 0; j < innerArray.length; j++) {
+              const entry = innerArray[j];
+              const { element } = entry;
+
+              // the RAFScheduler code only uses functions
+              finalAnimations[i][j] = entry.fn;
+
+              // the first row of elements shouldn't have a prepare-class added to them
+              // since the elements are at the top of the animation hierarchy and they
+              // will be applied without a RAF having to pass...
+              if (i === 0) {
+                element.removeData(PREPARE_CLASSES_KEY);
+                continue;
+              }
 
-                const prepareClassName = element.data(PREPARE_CLASSES_KEY);
-                if (prepareClassName) {
-                  element[0].classList.add(prepareClassName);
-                }
+              const prepareClassName = element.data(PREPARE_CLASSES_KEY);
+              if (prepareClassName) {
+                element[0].classList.add(prepareClassName);
               }
             }
+          }
 
-            $$rAFScheduler(finalAnimations);
+          $$rAFScheduler(finalAnimations);
+        });
+
+        return runner;
+
+        // TODO(matsko): change to reference nodes
+        function getAnchorNodes(node) {
+          const SELECTOR = `[${NG_ANIMATE_REF_ATTR}]`;
+          const items = node.hasAttribute(NG_ANIMATE_REF_ATTR)
+            ? [node]
+            : node.querySelectorAll(SELECTOR);
+          const anchors = [];
+          forEach(items, (node) => {
+            const attr = node.getAttribute(NG_ANIMATE_REF_ATTR);
+            if (attr && attr.length) {
+              anchors.push(node);
+            }
           });
+          return anchors;
+        }
+
+        function groupAnimations(animations) {
+          const preparedAnimations = [];
+          const refLookup = {};
+          forEach(animations, (animation, index) => {
+            const { element } = animation;
+            const node = getDomNode(element);
+            const { event } = animation;
+            const enterOrMove = ["enter", "move"].indexOf(event) >= 0;
+            const anchorNodes = animation.structural
+              ? getAnchorNodes(node)
+              : [];
 
-          return runner;
+            if (anchorNodes.length) {
+              const direction = enterOrMove ? "to" : "from";
 
-          // TODO(matsko): change to reference nodes
-          function getAnchorNodes(node) {
-            const SELECTOR = `[${NG_ANIMATE_REF_ATTR}]`;
-            const items = node.hasAttribute(NG_ANIMATE_REF_ATTR)
-              ? [node]
-              : node.querySelectorAll(SELECTOR);
-            const anchors = [];
-            forEach(items, (node) => {
-              const attr = node.getAttribute(NG_ANIMATE_REF_ATTR);
-              if (attr && attr.length) {
-                anchors.push(node);
-              }
-            });
-            return anchors;
-          }
-
-          function groupAnimations(animations) {
-            const preparedAnimations = [];
-            const refLookup = {};
-            forEach(animations, (animation, index) => {
-              const { element } = animation;
-              const node = getDomNode(element);
-              const { event } = animation;
-              const enterOrMove = ["enter", "move"].indexOf(event) >= 0;
-              const anchorNodes = animation.structural
-                ? getAnchorNodes(node)
-                : [];
-
-              if (anchorNodes.length) {
-                const direction = enterOrMove ? "to" : "from";
-
-                forEach(anchorNodes, (anchor) => {
-                  const key = anchor.getAttribute(NG_ANIMATE_REF_ATTR);
-                  refLookup[key] = refLookup[key] || {};
-                  refLookup[key][direction] = {
-                    animationID: index,
-                    element: jqLite(anchor),
-                  };
-                });
-              } else {
-                preparedAnimations.push(animation);
-              }
-            });
+              forEach(anchorNodes, (anchor) => {
+                const key = anchor.getAttribute(NG_ANIMATE_REF_ATTR);
+                refLookup[key] = refLookup[key] || {};
+                refLookup[key][direction] = {
+                  animationID: index,
+                  element: jqLite(anchor),
+                };
+              });
+            } else {
+              preparedAnimations.push(animation);
+            }
+          });
 
-            const usedIndicesLookup = {};
-            const anchorGroups = {};
-            Object.values(refLookup).forEach((operations) => {
-              const { from } = operations;
-              const { to } = operations;
-
-              if (!from || !to) {
-                // only one of these is set therefore we can't have an
-                // anchor animation since all three pieces are required
-                const index = from ? from.animationID : to.animationID;
-                const indexKey = index.toString();
-                if (!usedIndicesLookup[indexKey]) {
-                  usedIndicesLookup[indexKey] = true;
-                  preparedAnimations.push(animations[index]);
-                }
-                return;
+          const usedIndicesLookup = {};
+          const anchorGroups = {};
+          Object.values(refLookup).forEach((operations) => {
+            const { from } = operations;
+            const { to } = operations;
+
+            if (!from || !to) {
+              // only one of these is set therefore we can't have an
+              // anchor animation since all three pieces are required
+              const index = from ? from.animationID : to.animationID;
+              const indexKey = index.toString();
+              if (!usedIndicesLookup[indexKey]) {
+                usedIndicesLookup[indexKey] = true;
+                preparedAnimations.push(animations[index]);
               }
+              return;
+            }
 
-              const fromAnimation = animations[from.animationID];
-              const toAnimation = animations[to.animationID];
-              const lookupKey = from.animationID.toString();
-              if (!anchorGroups[lookupKey]) {
-                const group = (anchorGroups[lookupKey] = {
-                  structural: true,
-                  beforeStart() {
-                    fromAnimation.beforeStart();
-                    toAnimation.beforeStart();
-                  },
-                  close() {
-                    fromAnimation.close();
-                    toAnimation.close();
-                  },
-                  classes: cssClassesIntersection(
-                    fromAnimation.classes,
-                    toAnimation.classes,
-                  ),
-                  from: fromAnimation,
-                  to: toAnimation,
-                  anchors: [], // TODO(matsko): change to reference nodes
-                });
+            const fromAnimation = animations[from.animationID];
+            const toAnimation = animations[to.animationID];
+            const lookupKey = from.animationID.toString();
+            if (!anchorGroups[lookupKey]) {
+              const group = (anchorGroups[lookupKey] = {
+                structural: true,
+                beforeStart() {
+                  fromAnimation.beforeStart();
+                  toAnimation.beforeStart();
+                },
+                close() {
+                  fromAnimation.close();
+                  toAnimation.close();
+                },
+                classes: cssClassesIntersection(
+                  fromAnimation.classes,
+                  toAnimation.classes,
+                ),
+                from: fromAnimation,
+                to: toAnimation,
+                anchors: [], // TODO(matsko): change to reference nodes
+              });
 
-                // the anchor animations require that the from and to elements both have at least
-                // one shared CSS class which effectively marries the two elements together to use
-                // the same animation driver and to properly sequence the anchor animation.
-                if (group.classes.length) {
-                  preparedAnimations.push(group);
-                } else {
-                  preparedAnimations.push(fromAnimation);
-                  preparedAnimations.push(toAnimation);
-                }
+              // the anchor animations require that the from and to elements both have at least
+              // one shared CSS class which effectively marries the two elements together to use
+              // the same animation driver and to properly sequence the anchor animation.
+              if (group.classes.length) {
+                preparedAnimations.push(group);
+              } else {
+                preparedAnimations.push(fromAnimation);
+                preparedAnimations.push(toAnimation);
               }
+            }
 
-              anchorGroups[lookupKey].anchors.push({
-                out: from.element,
-                in: to.element,
-              });
+            anchorGroups[lookupKey].anchors.push({
+              out: from.element,
+              in: to.element,
             });
+          });
 
-            return preparedAnimations;
-          }
+          return preparedAnimations;
+        }
 
-          function cssClassesIntersection(a, b) {
-            a = a.split(" ");
-            b = b.split(" ");
-            const matches = [];
+        function cssClassesIntersection(a, b) {
+          a = a.split(" ");
+          b = b.split(" ");
+          const matches = [];
 
-            for (let i = 0; i < a.length; i++) {
-              const aa = a[i];
-              if (aa.substring(0, 3) === "ng-") continue;
+          for (let i = 0; i < a.length; i++) {
+            const aa = a[i];
+            if (aa.substring(0, 3) === "ng-") continue;
 
-              for (let j = 0; j < b.length; j++) {
-                if (aa === b[j]) {
-                  matches.push(aa);
-                  break;
-                }
+            for (let j = 0; j < b.length; j++) {
+              if (aa === b[j]) {
+                matches.push(aa);
+                break;
               }
             }
-
-            return matches.join(" ");
           }
 
-          function invokeFirstDriver(animationDetails) {
-            // we loop in reverse order since the more general drivers (like CSS and JS)
-            // may attempt more elements, but custom drivers are more particular
-            for (let i = drivers.length - 1; i >= 0; i--) {
-              const driverName = drivers[i];
-              const factory = $injector.get(driverName);
-              const driver = factory(animationDetails);
-              if (driver) {
-                return driver;
-              }
-            }
-          }
+          return matches.join(" ");
+        }
 
-          function beforeStart() {
-            tempClasses =
-              (tempClasses ? `${tempClasses} ` : "") + NG_ANIMATE_CLASSNAME;
-            element.className += ` ${tempClasses}`;
-            let prepareClassName = element.data(PREPARE_CLASSES_KEY);
-            if (prepareClassName) {
-              element[0].classList.remove(prepareClassName);
-              prepareClassName = null;
+        function invokeFirstDriver(animationDetails) {
+          // we loop in reverse order since the more general drivers (like CSS and JS)
+          // may attempt more elements, but custom drivers are more particular
+          for (let i = drivers.length - 1; i >= 0; i--) {
+            const driverName = drivers[i];
+            const factory = $injector.get(driverName);
+            const driver = factory(animationDetails);
+            if (driver) {
+              return driver;
             }
           }
+        }
 
-          function updateAnimationRunners(animation, newRunner) {
-            if (animation.from && animation.to) {
-              update(animation.from.element);
-              update(animation.to.element);
-            } else {
-              update(animation.element);
-            }
+        function beforeStart() {
+          tempClasses =
+            (tempClasses ? `${tempClasses} ` : "") + NG_ANIMATE_CLASSNAME;
+          element.className += ` ${tempClasses}`;
+          let prepareClassName = element.data(PREPARE_CLASSES_KEY);
+          if (prepareClassName) {
+            element[0].classList.remove(prepareClassName);
+            prepareClassName = null;
+          }
+        }
 
-            function update(element) {
-              const runner = getRunner(element);
-              if (runner) runner.setHost(newRunner);
-            }
+        function updateAnimationRunners(animation, newRunner) {
+          if (animation.from && animation.to) {
+            update(animation.from.element);
+            update(animation.to.element);
+          } else {
+            update(animation.element);
           }
 
-          function handleDestroyedElement() {
+          function update(element) {
             const runner = getRunner(element);
-            if (runner && (event !== "leave" || !options.$$domOperationFired)) {
-              runner.end();
-            }
+            if (runner) runner.setHost(newRunner);
           }
+        }
 
-          function close(rejected) {
-            element.off("$destroy", handleDestroyedElement);
-            removeRunner(element);
+        function handleDestroyedElement() {
+          const runner = getRunner(element);
+          if (runner && (event !== "leave" || !options.$$domOperationFired)) {
+            runner.end();
+          }
+        }
 
-            applyAnimationClasses(element, options);
-            applyAnimationStyles(element, options);
-            options.domOperation();
+        function close(rejected) {
+          element.off("$destroy", handleDestroyedElement);
+          removeRunner(element);
 
-            if (tempClasses) {
-              tempClasses
-                .split(" ")
-                .forEach((cls) => element[0].classList.remove(cls));
-            }
+          applyAnimationClasses(element, options);
+          applyAnimationStyles(element, options);
+          options.domOperation();
 
-            runner.complete(!rejected);
+          if (tempClasses) {
+            tempClasses
+              .split(" ")
+              .forEach((cls) => element[0].classList.remove(cls));
           }
-        };
-      },
-    ];
-  },
-];
+
+          runner.complete(!rejected);
+        }
+      };
+    },
+  ];
+}
 
 const $$rAFSchedulerFactory = [
   () => {
@@ -33069,14 +31874,12 @@ const $AnimateCssProvider = [
       "$$AnimateRunner",
       "$timeout",
       "$$animateCache",
-      "$$forceReflow",
       "$$rAFScheduler",
       "$$animateQueue",
       function (
         $$AnimateRunner,
         $timeout,
         $$animateCache,
-        $$forceReflow,
         $$rAFScheduler,
         $$animateQueue,
       ) {
@@ -33159,8 +31962,16 @@ const $AnimateCssProvider = [
             $$animateCache.flush();
 
             // DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable.
-            // PLEASE EXAMINE THE `$$forceReflow` service to understand why.
-            const pageWidth = $$forceReflow();
+            // the line below will force the browser to perform a repaint so
+            // that all the animated elements within the animation frame will
+            // be properly updated and drawn on screen. This is required to
+            // ensure that the preparation animation is properly flushed so that
+            // the active state picks up from there. DO NOT REMOVE THIS LINE.
+            // DO NOT OPTIMIZE THIS LINE. THE MINIFIER WILL REMOVE IT OTHERWISE WHICH
+            // WILL RESULT IN AN UNPREDICTABLE BUG THAT IS VERY HARD TO TRACK DOWN AND
+            // WILL TAKE YEARS AWAY FROM YOUR LIFE.
+
+            const pageWidth = document.body.offsetWidth + 1;
 
             // we use a for loop to ensure that if the queue is changed
             // during this looping then it will consider new requests
@@ -36797,7 +35608,6 @@ function publishExternalAPI() {
           $$isDocumentHidden: $$IsDocumentHiddenProvider,
           $exceptionHandler: $ExceptionHandlerProvider,
           $filter: $FilterProvider,
-          $$forceReflow: $$ForceReflowProvider,
           $interpolate: $InterpolateProvider,
           $interval: $IntervalProvider,
           $$intervalFactory: $$IntervalFactoryProvider,