@angular-wave/angular.ts 0.9.8 → 0.10.0

package/dist/angular-ts.esm.js

@@ -1,4 +1,4 @@
-/* Version: 0.9.8 - October 26, 2025 19:05:36 */
+/* Version: 0.10.0 - November 8, 2025 10:37:14 */
 const VALID_CLASS = "ng-valid";
 const INVALID_CLASS = "ng-invalid";
 const PRISTINE_CLASS = "ng-pristine";
@@ -906,7 +906,7 @@ function assertArgFn(arg, name, acceptArrayAnnotation) {
   return arg;
 }
 
-/** @type {import("./interface.js").ErrorHandlingConfig} */
+/** @type {import("./interface.ts").ErrorHandlingConfig} */
 const minErrConfig = {
   objectMaxDepth: 5,
   urlErrorParamsEnabled: true,
@@ -1198,6 +1198,382 @@ function startsWith(str, search) {
  */
 const Cache = new Map();
 
+/**
+ * @readonly
+ * @enum {number}
+ */
+const ASTType = {
+  Program: 1,
+  ExpressionStatement: 2,
+  AssignmentExpression: 3,
+  ConditionalExpression: 4,
+  LogicalExpression: 5,
+  BinaryExpression: 6,
+  UnaryExpression: 7,
+  CallExpression: 8,
+  MemberExpression: 9,
+  Identifier: 10,
+  Literal: 11,
+  ArrayExpression: 12,
+  Property: 13,
+  ObjectExpression: 14,
+  ThisExpression: 15,
+  LocalsExpression: 16,
+  NGValueParameter: 17,
+};
+
+const ADD_CLASS_SUFFIX = "-add";
+const REMOVE_CLASS_SUFFIX = "-remove";
+const EVENT_CLASS_PREFIX = "ng-";
+const ACTIVE_CLASS_SUFFIX = "-active";
+const PREPARE_CLASS_SUFFIX = "-prepare";
+
+const NG_ANIMATE_CLASSNAME = "ng-animate";
+const NG_ANIMATE_CHILDREN_DATA = "$$ngAnimateChildren";
+let TRANSITION_PROP;
+let TRANSITIONEND_EVENT;
+let ANIMATION_PROP;
+let ANIMATIONEND_EVENT;
+
+// If unprefixed events are not supported but webkit-prefixed are, use the latter.
+// Otherwise, just use W3C names, browsers not supporting them at all will just ignore them.
+// Note: Chrome implements `window.onwebkitanimationend` and doesn't implement `window.onanimationend`
+// but at the same time dispatches the `animationend` event and not `webkitAnimationEnd`.
+// Register both events in case `window.onanimationend` is not supported because of that,
+// do the same for `transitionend` as Safari is likely to exhibit similar behavior.
+// Also, the only modern browser that uses vendor prefixes for transitions/keyframes is webkit
+// therefore there is no reason to test anymore for other vendor prefixes:
+// http://caniuse.com/#search=transition
+if (
+  window.ontransitionend === undefined &&
+  window.onwebkittransitionend !== undefined
+) {
+  TRANSITION_PROP = "WebkitTransition";
+  TRANSITIONEND_EVENT = "webkitTransitionEnd transitionend";
+} else {
+  TRANSITION_PROP = "transition";
+  TRANSITIONEND_EVENT = "transitionend";
+}
+
+if (
+  window.onanimationend === undefined &&
+  window.onwebkitanimationend !== undefined
+) {
+  ANIMATION_PROP = "WebkitAnimation";
+  ANIMATIONEND_EVENT = "webkitAnimationEnd animationend";
+} else {
+  ANIMATION_PROP = "animation";
+  ANIMATIONEND_EVENT = "animationend";
+}
+
+const DURATION_KEY = "Duration";
+const PROPERTY_KEY = ASTType.Property;
+const DELAY_KEY = "Delay";
+const TIMING_KEY = "TimingFunction";
+const ANIMATION_ITERATION_COUNT_KEY = "IterationCount";
+const ANIMATION_PLAYSTATE_KEY = "PlayState";
+const SAFE_FAST_FORWARD_DURATION_VALUE = 9999;
+
+const ANIMATION_DELAY_PROP = ANIMATION_PROP + DELAY_KEY;
+const ANIMATION_DURATION_PROP = ANIMATION_PROP + DURATION_KEY;
+const TRANSITION_DELAY_PROP = TRANSITION_PROP + DELAY_KEY;
+const TRANSITION_DURATION_PROP = TRANSITION_PROP + DURATION_KEY;
+
+const ngMinErr$1 = minErr("ng");
+function assertArg(arg, name, reason) {
+  if (!arg) {
+    throw ngMinErr$1(
+      "areq",
+      "Argument '{0}' is {1}",
+      name || "?",
+      reason,
+    );
+  }
+  return arg;
+}
+
+function packageStyles(options) {
+  const styles = {};
+  if (options && (options.to || options.from)) {
+    styles.to = options.to;
+    styles.from = options.from;
+  }
+  return styles;
+}
+
+function pendClasses(classes, fix, isPrefix) {
+  let className = "";
+
+  classes = Array.isArray(classes)
+    ? classes
+    : classes && isString(classes) && classes.length
+      ? classes.split(/\s+/)
+      : [];
+  classes.forEach((klass, i) => {
+    if (klass && klass.length > 0) {
+      className += i > 0 ? " " : "";
+      className += isPrefix ? fix + klass : klass + fix;
+    }
+  });
+  return className;
+}
+
+function removeFromArray(arr, val) {
+  const index = arr.indexOf(val);
+  if (val >= 0) {
+    arr.splice(index, 1);
+  }
+}
+
+/**
+ *
+ * @param {NodeList|Node} element
+ * @returns {Node[]|Node|undefined}
+ */
+function stripCommentsFromElement(element) {
+  if (element instanceof NodeList) {
+    return Array.from(element).filter((x) => x.nodeType == Node.ELEMENT_NODE);
+  } else if (element.nodeType === Node.ELEMENT_NODE) {
+    return /** @type {Node} */ (element);
+  } else {
+    return undefined;
+  }
+}
+
+/**
+ * @param {NodeList|Node} element
+ * @returns {Node}
+ */
+function extractElementNode(element) {
+  if (!element || !Array.isArray(element)) return /** @type {Node} */ (element);
+  for (let i = 0; i < /** @type {NodeList} */ (element).length; i++) {
+    const elm = element[i];
+    if (elm.nodeType === Node.ELEMENT_NODE) {
+      return elm;
+    }
+  }
+}
+
+function applyAnimationClassesFactory() {
+  return function (element, options) {
+    if (options.addClass) {
+      element.classList.add(...options.addClass.trim().split(" "));
+      options.addClass = null;
+    }
+    if (options.removeClass) {
+      element.classList.remove(...options.removeClass.trim().split(" "));
+      options.removeClass = null;
+    }
+  };
+}
+
+function prepareAnimationOptions(options) {
+  options = options || {};
+  if (!options.$$prepared) {
+    let domOperation = options.domOperation || (() => {});
+    options.domOperation = function () {
+      options.$$domOperationFired = true;
+      domOperation();
+      domOperation = () => {};
+    };
+    options.$$prepared = true;
+  }
+  return options;
+}
+
+function applyAnimationStyles(element, options) {
+  applyAnimationFromStyles(element, options);
+  applyAnimationToStyles(element, options);
+}
+
+/**
+ * Applies initial animation styles to a DOM element.
+ *
+ * This function sets the element's inline styles using the properties
+ * defined in `options.from`, then clears the property to prevent reuse.
+ *
+ * @param {HTMLElement} element - The target DOM element to apply styles to.
+ * @param {{ from?: Partial<CSSStyleDeclaration> | null }} options - options containing a `from` object with CSS property–value pairs.
+ */
+function applyAnimationFromStyles(element, options) {
+  if (options.from) {
+    Object.assign(element.style, options.from);
+    options.from = null;
+  }
+}
+
+/**
+ * Applies final animation styles to a DOM element.
+ *
+ * This function sets the element's inline styles using the properties
+ * defined in `options.to`, then clears the property to prevent reuse.
+ *
+ * @param {HTMLElement} element - The target DOM element to apply styles to.
+ * @param {{ to?: Partial<CSSStyleDeclaration> | null }} options - options containing a `from` object with CSS property–value pairs.
+ */
+function applyAnimationToStyles(element, options) {
+  if (options.to) {
+    Object.assign(element.style, options.to);
+    options.to = null;
+  }
+}
+
+function mergeAnimationDetails(element, oldAnimation, newAnimation) {
+  const target = oldAnimation.options || {};
+  const newOptions = newAnimation.options || {};
+
+  const toAdd = `${target.addClass || ""} ${newOptions.addClass || ""}`;
+  const toRemove = `${target.removeClass || ""} ${newOptions.removeClass || ""}`;
+  const classes = resolveElementClasses(
+    element.getAttribute("class"),
+    toAdd,
+    toRemove,
+  );
+
+  if (newOptions.preparationClasses) {
+    target.preparationClasses = concatWithSpace(
+      newOptions.preparationClasses,
+      target.preparationClasses,
+    );
+    delete newOptions.preparationClasses;
+  }
+
+  extend(target, newOptions);
+
+  if (classes.addClass) {
+    target.addClass = classes.addClass;
+  } else {
+    target.addClass = null;
+  }
+
+  if (classes.removeClass) {
+    target.removeClass = classes.removeClass;
+  } else {
+    target.removeClass = null;
+  }
+
+  oldAnimation.addClass = target.addClass;
+  oldAnimation.removeClass = target.removeClass;
+
+  return target;
+}
+
+function resolveElementClasses(existing, toAdd, toRemove) {
+  const ADD_CLASS = 1;
+  const REMOVE_CLASS = -1;
+
+  const flags = {};
+  existing = splitClassesToLookup(existing);
+
+  toAdd = splitClassesToLookup(toAdd);
+  Object.keys(toAdd).forEach((key) => {
+    flags[key] = ADD_CLASS;
+  });
+
+  toRemove = splitClassesToLookup(toRemove);
+  Object.keys(toRemove).forEach((key) => {
+    flags[key] = flags[key] === ADD_CLASS ? null : REMOVE_CLASS;
+  });
+
+  const classes = {
+    addClass: "",
+    removeClass: "",
+  };
+
+  Object.entries(flags).forEach(([klass, val]) => {
+    let prop, allow;
+    if (val === ADD_CLASS) {
+      prop = "addClass";
+      allow = !existing[klass] || existing[klass + REMOVE_CLASS_SUFFIX];
+    } else if (val === REMOVE_CLASS) {
+      prop = "removeClass";
+      allow = existing[klass] || existing[klass + ADD_CLASS_SUFFIX];
+    }
+    if (allow) {
+      if (classes[prop].length) {
+        classes[prop] += " ";
+      }
+      classes[prop] += klass;
+    }
+  });
+
+  function splitClassesToLookup(classes) {
+    if (isString(classes)) {
+      classes = classes.trim().split(" ");
+    }
+
+    const obj = {};
+    if (classes) {
+      classes.forEach((klass) => {
+        // sometimes the split leaves empty string values
+        // incase extra spaces were applied to the options
+        if (klass.length) {
+          obj[klass] = true;
+        }
+      });
+    }
+    return obj;
+  }
+
+  return classes;
+}
+
+function applyGeneratedPreparationClasses(element, event, options) {
+  let classes = "";
+  if (event) {
+    classes = pendClasses(event, EVENT_CLASS_PREFIX, true);
+  }
+  if (options.addClass) {
+    classes = concatWithSpace(
+      classes,
+      pendClasses(options.addClass, ADD_CLASS_SUFFIX),
+    );
+  }
+  if (options.removeClass) {
+    classes = concatWithSpace(
+      classes,
+      pendClasses(options.removeClass, REMOVE_CLASS_SUFFIX),
+    );
+  }
+  if (classes.length) {
+    options.preparationClasses = classes;
+    element.className += ` ${classes}`;
+  }
+}
+
+function clearGeneratedClasses(element, options) {
+  if (options.preparationClasses) {
+    options.preparationClasses
+      .split(" ")
+      .forEach((cls) => element.classList.remove(cls));
+    options.preparationClasses = null;
+  }
+  if (options.activeClasses) {
+    options.activeClasses
+      .split(" ")
+      .forEach((cls) => element.classList.remove(cls));
+    options.activeClasses = null;
+  }
+}
+
+function blockKeyframeAnimations(node, applyBlock) {
+  const value = applyBlock ? "paused" : "";
+  const key = ANIMATION_PROP + ANIMATION_PLAYSTATE_KEY;
+  applyInlineStyle(node, [key, value]);
+  return [key, value];
+}
+
+function applyInlineStyle(node, styleTuple) {
+  const prop = styleTuple[0];
+  node.style[prop] = styleTuple[1];
+}
+
+function concatWithSpace(a, b) {
+  if (!a) return b;
+  if (!b) return a;
+  return `${a} ${b}`;
+}
+
 /** @type {number} */
 let jqId = 1;
 
@@ -1719,12 +2095,8 @@ function domInsert(element, parentElement, afterElement) {
   // from the dom sometime before this code runs then let's
   // just stick to using the parent element as the anchor
   if (afterElement) {
-    const afterNode = extractElementNode$1(afterElement);
-    if (
-      afterNode &&
-      !afterNode.parentNode &&
-      !afterNode.previousElementSibling
-    ) {
+    const afterNode = extractElementNode(afterElement);
+    if (afterNode && !afterNode.parentNode && !afterNode.previousSibling) {
       afterElement = null;
     }
   }
@@ -1735,16 +2107,6 @@ function domInsert(element, parentElement, afterElement) {
   }
 }
 
-function extractElementNode$1(element) {
-  const { length } = element;
-  for (let i = 0; i < length; i++) {
-    const elm = element[i];
-    if (elm.nodeType === Node.ELEMENT_NODE) {
-      return elm;
-    }
-  }
-}
-
 /**
  * Returns the base href of the document.
  *
@@ -1863,7 +2225,7 @@ class NgModule {
   /**
    * @param {string} name - Name of the module
    * @param {Array<string>} requires - List of modules which the injector will load before the current module
-   * @param {import("../../interface.js").Injectable<any>} [configFn]
+   * @param {import("../../interface.ts").Injectable<any>} [configFn]
    */
   constructor(name, requires, configFn) {
     assert(isString(name), "name required");
@@ -1889,7 +2251,7 @@ class NgModule {
     /** @type {!Array<Array<*>>} */
     this.configBlocks = [];
 
-    /** @type {!Array.<import("../../interface.js").Injectable<any>>} */
+    /** @type {!Array.<import("../../interface.ts").Injectable<any>>} */
     this.runBlocks = [];
 
     if (configFn) {
@@ -1993,7 +2355,7 @@ class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable<any>} decorFn
+   * @param {import("../../interface.ts").Injectable<any>} decorFn
    * @returns {NgModule}
    */
   decorator(name, decorFn) {
@@ -2006,7 +2368,7 @@ class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable<any>} directiveFactory
+   * @param {import("../../interface.ts").Injectable<any>} directiveFactory
    * @returns {NgModule}
    */
   directive(name, directiveFactory) {
@@ -2023,7 +2385,7 @@ class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable<any>} animationFactory
+   * @param {import("../../interface.ts").Injectable<any>} animationFactory
    * @returns {NgModule}
    */
   animation(name, animationFactory) {
@@ -2040,7 +2402,7 @@ class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable<any>} filterFn
+   * @param {import("../../interface.ts").Injectable<any>} filterFn
    * @return {NgModule}
    */
   filter(name, filterFn) {
@@ -2053,7 +2415,7 @@ class NgModule {
 
   /**
    * @param {string} name
-   * @param {import("../../interface.js").Injectable<any>} ctlFn
+   * @param {import("../../interface.ts").Injectable<any>} ctlFn
    * @returns {NgModule}
    */
   controller(name, ctlFn) {
@@ -2438,7 +2800,7 @@ function createInjector(modulesToLoad, strictDi = false) {
    * Registers a factory.
    * @param {string} name
    * @param {(string|(function(*): *))[]} factoryFn
-   * @returns {import('../../interface.js').ServiceProvider}
+   * @returns {import('../../interface.ts').ServiceProvider}
    */
   function factory(name, factoryFn) {
     return provider(name, {
@@ -2460,7 +2822,7 @@ function createInjector(modulesToLoad, strictDi = false) {
    * Registers a service constructor.
    * @param {string} name
    * @param {Function} constructor
-   * @returns {import('../../interface.js').ServiceProvider}
+   * @returns {import('../../interface.ts').ServiceProvider}
    */
   function service(name, constructor) {
     return factory(name, [
@@ -2929,7 +3291,7 @@ class ControllerProvider {
 
     /**
      * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
-     * @returns {import("./interface.js").ControllerService} A service function that creates controllers.
+     * @returns {import("./interface.ts").ControllerService} A service function that creates controllers.
      */
     ($injector) => {
       return (expression, locals, later, ident) => {
@@ -3047,18 +3409,19 @@ class ControllerProvider {
       );
     }
     locals.$scope[identifier] = instance;
+    locals.$scope["$controllerIdentifier"] = identifier;
   }
 }
 
 const originUrl = urlResolve(window.location.href);
 
 /**
- * @param {import("./interface.js").ResolvableUrl} url
- * @return {import("./interface.js").ParsedUrl}
+ * @param {import("./interface.ts").ResolvableUrl} url
+ * @return {import("./interface.ts").ParsedUrl}
  */
 function urlResolve(url) {
   if (!isString(url))
-    return /** @type {import("./interface.js").ParsedUrl} */ (url);
+    return /** @type {import("./interface.ts").ParsedUrl} */ (url);
 
   const urlParsingNode = new URL(
     /** @type {string} */ (url),
@@ -3090,7 +3453,7 @@ function urlResolve(url) {
  * Parse a request URL and determine whether this is a same-origin request as the application
  * document.
  *
- * @param {import("./interface.js").ResolvableUrl} requestUrl The url of the request as a string that will be resolved
+ * @param {import("./interface.ts").ResolvableUrl} requestUrl The url of the request as a string that will be resolved
  * or a parsed URL object.
  * @returns {boolean} Whether the request is for the same origin as the application document.
  */
@@ -3104,7 +3467,7 @@ function urlIsSameOrigin(requestUrl) {
  * Note: The base URL is usually the same as the document location (`location.href`) but can
  * be overriden by using the `<base>` tag.
  *
- * @param {import("./interface.js").ResolvableUrl} requestUrl The url of the request as a string that will be resolved
+ * @param {import("./interface.ts").ResolvableUrl} requestUrl The url of the request as a string that will be resolved
  * or a parsed URL object.
  * @returns {boolean} Whether the URL is same-origin as the document base URL.
  */
@@ -3118,7 +3481,7 @@ function urlIsSameOriginAsBaseUrl(requestUrl) {
  *
  * @param {string[]} trustedOriginUrls - A list of URLs (strings), whose origins are trusted.
  *
- * @returns {(url: import("./interface.js").ResolvableUrl) => boolean } - A function that receives a URL (string or parsed URL object) and returns
+ * @returns {(url: import("./interface.ts").ResolvableUrl) => boolean } - A function that receives a URL (string or parsed URL object) and returns
  *     whether it is of an allowed origin.
  */
 function urlIsAllowedOriginFactory(trustedOriginUrls) {
@@ -3131,7 +3494,7 @@ function urlIsAllowedOriginFactory(trustedOriginUrls) {
    * based on a list of trusted-origin URLs. The current location's origin is implicitly
    * trusted.
    *
-   * @param {import("./interface.js").ResolvableUrl} requestUrl - The URL to be checked (provided as a string that will be
+   * @param {import("./interface.ts").ResolvableUrl} requestUrl - The URL to be checked (provided as a string that will be
    *     resolved or a parsed URL object).
    *
    * @returns {boolean} - Whether the specified URL is of an allowed origin.
@@ -3147,9 +3510,9 @@ function urlIsAllowedOriginFactory(trustedOriginUrls) {
 /**
  * Determine if two URLs share the same origin.
  *
- * @param {import("./interface.js").ResolvableUrl} url1 - First URL to compare as a string or a normalized URL in the form of
+ * @param {import("./interface.ts").ResolvableUrl} url1 - First URL to compare as a string or a normalized URL in the form of
  *     a dictionary object returned by `urlResolve()`.
- * @param {import("./interface.js").ResolvableUrl} url2 - Second URL to compare as a string or a normalized URL in the form
+ * @param {import("./interface.ts").ResolvableUrl} url2 - Second URL to compare as a string or a normalized URL in the form
  *     of a dictionary object returned by `urlResolve()`.
  *
  * @returns {boolean} - True if both URLs have the same origin, and false otherwise.
@@ -3783,7 +4146,7 @@ function SceProvider() {
        *
        * @param {string} type The SCE context in which this result will be used.
        * @param {string} expr String expression to compile.
-       * @return {import("../../core/parse/interface.js").CompiledExpression} A function which represents the compiled expression:
+       * @return {import("../../core/parse/interface.ts").CompiledExpression} A function which represents the compiled expression:
        *
        *    * `context` – `{object}` – an object against which any expressions embedded in the
        *      strings are evaluated against (typically a scope object).
@@ -4020,10 +4383,11 @@ const ngEventDirectives = {};
   .forEach((eventName) => {
     const directiveName = directiveNormalize(`ng-${eventName}`);
     ngEventDirectives[directiveName] = [
-      "$parse",
-      "$exceptionHandler",
+      $injectTokens.$parse,
+      $injectTokens.$exceptionHandler,
+
       /**
-       * @param {import("../../core/parse/interface.ts").ParseService} $parse
+       * @param {ng.ParseService} $parse
        * @param {ng.ExceptionHandlerService} $exceptionHandler
        * @returns
        */
@@ -4056,14 +4420,58 @@ function createEventDirective(
     restrict: "A",
     compile(_element, attr) {
       const fn = $parse(attr[directiveName]);
-      return function ngEventHandler(scope, element) {
-        element.addEventListener(eventName, (event) => {
+      return (scope, element) => {
+        const handler = (event) => {
           try {
             fn(scope, { $event: event });
           } catch (error) {
             $exceptionHandler(error);
           }
-        });
+        };
+        element.addEventListener(eventName, handler);
+
+        scope.$on("$destroy", () =>
+          element.removeEventListener(eventName, handler),
+        );
+      };
+    },
+  };
+}
+
+/**
+ *
+ * @param {ng.ParseService} $parse
+ * @param {ng.ExceptionHandlerService} $exceptionHandler
+ * @param {ng.WindowService} $window
+ * @param {string} directiveName
+ * @param {string} eventName
+ * @returns {ng.Directive}
+ */
+function createWindowEventDirective(
+  $parse,
+  $exceptionHandler,
+  $window,
+  directiveName,
+  eventName,
+) {
+  return {
+    restrict: "A",
+    compile(_element, attr) {
+      const fn = $parse(attr[directiveName]);
+      return (scope) => {
+        const handler = (event) => {
+          try {
+            fn(scope, { $event: event });
+          } catch (error) {
+            $exceptionHandler(error);
+          }
+        };
+
+        $window.addEventListener(eventName, handler);
+
+        scope.$on("$destroy", () =>
+          $window.removeEventListener(eventName, handler),
+        );
       };
     },
   };
@@ -4073,16 +4481,13 @@ const $compileMinErr$1 = minErr("$compile");
 const SIMPLE_ATTR_NAME = /^\w/;
 const specialAttrHolder = document.createElement("div");
 
-/**
- * @implements {Record<string, any>}
- */
 class Attributes {
   static $nonscope = true;
 
   /**
-   * @param {import('../scope/scope.js').Scope} $rootScope
+   * @param {ng.Scope} $rootScope
    * @param {*} $animate
-   * @param {import("../../services/exception/exception-handler.js").ErrorHandler} $exceptionHandler
+   * @param {ng.ExceptionHandlerService} $exceptionHandler
    * @param {*} $sce
    * @param {import("../../shared/noderef.js").NodeRef} [nodeRef]
    * @param {Object} [attributesToCopy]
@@ -4395,19 +4800,18 @@ function tokenDifference(str1, str2) {
 /**
  * @param {string} source - the name of the attribute to be observed
  * @param {string} prop - the scope property to be updated with attribute value
- * @returns {import("../../interface.ts").Directive}
+ * @returns {ng.Directive}
  */
 function ngObserveDirective(source, prop) {
   return {
     restrict: "A",
     compile: () => (scope, element) => {
-      const targetElement = element;
       if (prop === "") {
         prop = source;
       }
       const normalized = kebabToCamel(prop);
       if (!scope[normalized]) {
-        scope[normalized] = targetElement.getAttribute(source);
+        scope[normalized] = element.getAttribute(source);
       }
 
       const observer = new MutationObserver((mutations) => {
@@ -4420,7 +4824,7 @@ function ngObserveDirective(source, prop) {
         }
       });
 
-      observer.observe(targetElement, {
+      observer.observe(element, {
         attributes: true,
         attributeFilter: [source],
       });
@@ -4432,91 +4836,6 @@ function ngObserveDirective(source, prop) {
   };
 }
 
-/**
- * A function passed as the fifth argument to a {@type PublicLinkFn} link function.
- * It behaves like a linking function, with the `scope` argument automatically created
- * as a new child of the transcluded parent scope.
- *
- * The function returns the DOM content to be injected (transcluded) into the directive.
- *
- * @callback TranscludeFn
- * @param {Element | Node | ChildNode | NodeList | Node[]} [clone] - The DOM node to be inserted into the transcluded directive.
- * @param {import("../scope/scope.js").Scope} [scope] - The new child scope created from the transcluded parent.
- * @returns void
-
-/**
- * A specialized version of {@link TranscludeFn} with the scope argument already bound.
- * This function requires no parameters and returns the same result as {@link TranscludeFn}.
- *
- * @typedef {() => Element|Node} BoundTranscludeFn
- */
-
-/**
- * @typedef {Object} SimpleChange
- * @property {any} currentValue
- * @property {boolean} firstChange
- */
-
-/**
- * @description A function returned by the '$compile' service that links a compiled template to a scope.
- *
- * @callback PublicLinkFn
- * @param {import('../scope/scope.js').Scope} scope - Scope to link with element
- * @param {TranscludeFn} [cloneConnectFn]
- * @param {*} [options]
- * @return {Element|Node|ChildNode|Node[]} The nodes to be linked.
- */
-
-/**
- * @description Entry point for the '$compile' service.
- *
- * @callback CompileFn
- * @param {string|Element|Node|ChildNode|NodeList} compileNode - The node to be compiled.
- * @param {TranscludeFn} [transcludeFn] - An optional transclusion function to be used during compilation.
- * @param {number} [maxPriority] - An optional maximum priority for directives.
- * @param {string} [ignoreDirective] - An optional directive to ignore during compilation.
- * @param {*} [previousCompileContext] - An optional context from a previous compilation. TODO
- * @returns {PublicLinkFn} A public link function.
- */
-
-/**
- * @typedef {Object} LinkFnMapping
- * @property {number} index
- * @property {NodeLinkFnCtx} [nodeLinkFnCtx]
- * @property {CompositeLinkFn} [childLinkFn]
- */
-
-/**
- * @typedef {function(): CompositeLinkFn} CompileNodesFn
- */
-
-/**
- * @callback NodeLinkFn
- * @returns {Node|Element|NodeList}
- */
-
-/**
- * @typedef {Object} NodeLinkFnCtx
- * @property {NodeLinkFn} nodeLinkFn
- * @property {boolean} terminal
- * @property {TranscludeFn} transclude
- * @property {boolean} transcludeOnThisElement
- * @property {boolean} templateOnThisElement
- * @property {boolean} newScope
- */
-
-/**
- * @typedef {function(): NodeLinkFn} ApplyDirectivesToNodeFn
- */
-
-/**
- * @description Function that aggregates all linking fns for a compilation root (nodeList)
- * @callback CompositeLinkFn
- * @param {import('../scope/scope.js').Scope} scope - The scope to be linked to the template
- * @param {NodeRef} $linkNode - wrapper around a nodeList
- * @param {Function} [parentBoundTranscludeFn]
- */
-
 const $compileMinErr = minErr("$compile");
 const EXCLUDED_DIRECTIVES = ["ngIf", "ngRepeat"];
 const ALL_OR_NOTHING_ATTRS = ["ngSrc", "ngSrcset", "src", "srcset"];
@@ -4531,7 +4850,7 @@ class CompileProvider {
   /* @ignore */ static $inject = [$injectTokens.$provide, $injectTokens.$$sanitizeUriProvider];
 
   /**
-   * @param {import('../../interface.js').Provider} $provide
+   * @param {import('../../interface.ts').Provider} $provide
    * @param {import('../sanitize/sanitize-uri.js').SanitizeUriProvider} $$sanitizeUriProvider
    */
   constructor($provide, $$sanitizeUriProvider) {
@@ -4540,7 +4859,6 @@ class CompileProvider {
     const bindingCache = Object.create(null);
 
     /**
-     *
      * @param {import("../scope/scope.js").Scope} scope
      * @param {string} directiveName
      * @param {boolean} isController
@@ -4722,7 +5040,7 @@ class CompileProvider {
     /**
      * @param {string|Object} name Name of the component in camelCase (i.e. `myComp` which will match `<my-comp>`),
      *    or an object map of components where the keys are the names and the values are the component definition objects.
-     * @param {import("../../interface.js").Component} options Component definition object (a simplified
+     * @param {import("../../interface.ts").Component} options Component definition object (a simplified
      *    {directive definition object}),
      *    with the following properties (all optional):
      *
@@ -5053,12 +5371,11 @@ class CompileProvider {
             ? (x) => x
             : (x) => x.replace(/\{\{/g, startSymbol).replace(/}}/g, endSymbol);
 
-        const NG_PREFIX_BINDING = /^ng(Attr|Prop|On|Observe)([A-Z].*)$/;
+        const NG_PREFIX_BINDING = /^ng(Attr|Prop|On|Observe|Window)([A-Z].*)$/;
         return compile;
 
-        //= ===============================
         /**
-         * @type {CompileFn}
+         * @type {ng.CompileService}
          */
         function compile(
           element,
@@ -5072,7 +5389,7 @@ class CompileProvider {
           /**
            * The composite link function is a composite of individual node linking functions.
            * It will be invoke by the public link function below.
-           * @type {CompositeLinkFn}
+           * @type {ng.CompositeLinkFn}
            */
           let compositeLinkFn = compileNodes(
             nodeRef,
@@ -5085,7 +5402,7 @@ class CompileProvider {
           let namespace = null;
           return publicLinkFn;
 
-          /** @type {PublicLinkFn} */
+          /** @type {ng.PublicLinkFn} */
           function publicLinkFn(scope, cloneConnectFn, options) {
             if (!nodeRef) {
               throw $compileMinErr(
@@ -5207,7 +5524,7 @@ class CompileProvider {
          * @param {number=} [maxPriority] Max directive priority.
          * @param {*} [ignoreDirective]
          * @param {*} [previousCompileContext]
-         * @returns {CompositeLinkFn} A composite linking function of all of the matched directives or null.
+         * @returns {ng.CompositeLinkFn} A composite linking function of all of the matched directives or null.
          */
         function compileNodes(
           nodeRefList,
@@ -5220,7 +5537,7 @@ class CompileProvider {
            * Aggregates for the composite linking function, where a node in a node list is mapped
            * to a corresponding link function. For single elements, the node should be mapped to
            * a single node link function.
-           * @type {LinkFnMapping[]}
+           * @type {ng.LinkFnMapping[]}
            */
           const linkFnsList = []; // An array to hold node indices and their linkFns
           let nodeLinkFnFound;
@@ -5240,7 +5557,7 @@ class CompileProvider {
               ignoreDirective,
             );
 
-            /** @type {NodeLinkFnCtx} */
+            /** @type {ng.NodeLinkFnCtx} */
             let nodeLinkFnCtx;
 
             if (directives.length) {
@@ -5387,10 +5704,10 @@ class CompileProvider {
 
         /**
          * Prebinds the transclusion function to a scope
-         * @param {import("../scope/scope.js").Scope} scope
+         * @param {ng.Scope} scope
          * @param {*} transcludeFn
          * @param {*} previousBoundTranscludeFn
-         * @returns {BoundTranscludeFn}
+         * @returns {ng.BoundTranscludeFn}
          */
         function createBoundTranscludeFn(
           scope,
@@ -5448,7 +5765,7 @@ class CompileProvider {
          */
         function collectDirectives(node, attrs, maxPriority, ignoreDirective) {
           /**
-           * @type {import('../../interface.ts').Directive[]}
+           * @type {ng.Directive[]}
            */
           const directives = [];
           const { nodeType } = node;
@@ -5474,6 +5791,7 @@ class CompileProvider {
                 let isNgProp = false;
                 let isNgEvent = false;
                 let isNgObserve = false;
+                let isWindow = false;
 
                 let attr = node.attributes[j];
                 let name = attr.name;
@@ -5487,6 +5805,7 @@ class CompileProvider {
                   isNgProp = ngPrefixMatch[1] === "Prop";
                   isNgEvent = ngPrefixMatch[1] === "On";
                   isNgObserve = ngPrefixMatch[1] === "Observe";
+                  isWindow = ngPrefixMatch[1] === "Window";
 
                   // Normalize the non-prefixed name
                   name = name
@@ -5496,13 +5815,13 @@ class CompileProvider {
                     .replace(/_(.)/g, (match, letter) => letter.toUpperCase());
                 }
 
-                if (isNgProp || isNgEvent) {
+                if (isNgProp || isNgEvent || isWindow) {
                   attrs[nName] = value;
                   attrsMap[nName] = attr.name;
 
                   if (isNgProp) {
                     addPropertyDirective(node, directives, nName, name);
-                  } else {
+                  } else if (isNgEvent) {
                     directives.push(
                       createEventDirective(
                         $parse,
@@ -5511,6 +5830,17 @@ class CompileProvider {
                         name,
                       ),
                     );
+                  } else {
+                    // isWindow
+                    directives.push(
+                      createWindowEventDirective(
+                        $parse,
+                        $exceptionHandler,
+                        window,
+                        nName,
+                        name,
+                      ),
+                    );
                   }
                 } else if (isNgObserve) {
                   directives.push(ngObserveDirective(name, value));
@@ -5569,7 +5899,7 @@ class CompileProvider {
          * @param maxPriority
          * @param ignoreDirective
          * @param previousCompileContext
-         * @returns {PublicLinkFn|TranscludeFn}
+         * @returns {ng.PublicLinkFn|ng.TranscludeFn}
          */
         function compilationGenerator(
           eager,
@@ -5616,14 +5946,14 @@ class CompileProvider {
          *        this needs to be pre-sorted by priority order.
          * @param {Node | Element} compileNode  DOM node to apply the compile functions to
          * @param {Attributes} templateAttrs The shared attribute function
-         * @param {TranscludeFn} transcludeFn
+         * @param {ng.TranscludeFn} transcludeFn
          * @param {Object=} originalReplaceDirective An optional directive that will be ignored when
          *                                           compiling the transclusion.
          * @param {Array.<Function>} [preLinkFns]
          * @param {Array.<Function>} [postLinkFns]
          * @param {Object} [previousCompileContext] Context used for previous compilation of the current
          *                                        node
-         * @returns {NodeLinkFnCtx} node link function
+         * @returns {ng.NodeLinkFnCtx} node link function
          */
         function applyDirectivesToNode(
           directives,
@@ -5658,7 +5988,7 @@ class CompileProvider {
           let directiveName;
           let $template;
           let replaceDirective = originalReplaceDirective;
-          /** @type {TranscludeFn} */
+          /** @type {ng.TranscludeFn} */
           let childTranscludeFn = transcludeFn;
 
           let didScanForMultipleTransclusion = false;
@@ -5667,7 +5997,7 @@ class CompileProvider {
 
           /**
            * Links all the directives of a single node.
-           * @type {NodeLinkFn}
+           * @type {ng.NodeLinkFn}
            */
           // @ts-ignore
           let nodeLinkFn = function (
@@ -6349,7 +6679,7 @@ class CompileProvider {
               ii = directives.length;
             } else if (directive.compile) {
               try {
-                /** @type {PublicLinkFn} */
+                /** @type {ng.PublicLinkFn} */
                 const linkFn = directive.compile(
                   compileNodeRef.getAny(),
                   templateAttrs,
@@ -7365,7 +7695,7 @@ class CompileProvider {
                   }
 
                   /**
-                   * @type {SimpleChange}
+                   * @type {import("./inteface.ts").SimpleChange}
                    */
                   initialChanges[scopeName] = {
                     currentValue: destination[scopeName],
@@ -7491,7 +7821,7 @@ class CompileProvider {
                             scope.$handler.watchers
                               .get(attrs[attrName])
                               ?.forEach((watchFn) => {
-                                watchFn.listenerFn(val);
+                                watchFn.listenerFn(val, scope.$target);
                               });
                           }
                         }
@@ -7518,7 +7848,7 @@ class CompileProvider {
                   parentGet = $parse(attrs[attrName]);
 
                   destination.$target[scopeName] = parentGet(scope.$target);
-                  /** @type {SimpleChange} */
+                  /** @type {import("./inteface.ts").SimpleChange} */
                   initialChanges[scopeName] = {
                     currentValue: destination.$target[scopeName],
                     firstChange: firstChange,
@@ -7904,8 +8234,14 @@ class FormController {
    * state (ng-dirty class). This method will also propagate to parent forms.
    */
   $setDirty() {
-    this.$$animate.removeClass(this.$$element, PRISTINE_CLASS);
-    this.$$animate.addClass(this.$$element, DIRTY_CLASS);
+    if (hasAnimate(this.$$element)) {
+      this.$$animate.removeClass(this.$$element, PRISTINE_CLASS);
+      this.$$animate.addClass(this.$$element, DIRTY_CLASS);
+    } else {
+      // Fallback for non-animated environments
+      this.$$element.classList.remove(PRISTINE_CLASS);
+      this.$$element.classList.add(DIRTY_CLASS);
+    }
     this.$dirty = true;
     this.$pristine = false;
     this.$$parentForm.$setDirty();
@@ -7924,11 +8260,18 @@ class FormController {
    * saving or resetting it.
    */
   $setPristine() {
-    this.$$animate.setClass(
-      this.$$element,
-      PRISTINE_CLASS,
-      `${DIRTY_CLASS} ${SUBMITTED_CLASS}`,
-    );
+    if (hasAnimate(this.$$element)) {
+      this.$$animate.setClass(
+        this.$$element,
+        PRISTINE_CLASS,
+        `${DIRTY_CLASS} ${SUBMITTED_CLASS}`,
+      );
+    } else {
+      // Fallback for non-animated environments
+      this.$$element.classList.remove(DIRTY_CLASS, SUBMITTED_CLASS);
+      this.$$element.classList.add(PRISTINE_CLASS);
+    }
+
     this.$dirty = false;
     this.$pristine = true;
     this.$submitted = false;
@@ -7966,7 +8309,11 @@ class FormController {
   }
 
   $$setSubmitted() {
-    this.$$animate.addClass(this.$$element, SUBMITTED_CLASS);
+    if (hasAnimate(this.$$element)) {
+      this.$$animate.addClass(this.$$element, SUBMITTED_CLASS);
+    } else {
+      this.$$element.classList.add(SUBMITTED_CLASS);
+    }
     this.$submitted = true;
     this.$$controls.forEach((control) => {
       if (control.$$setSubmitted) {
@@ -11486,7 +11833,7 @@ const ngClassOddDirective = classDirective("Odd", 0);
 const ngClassEvenDirective = classDirective("Even", 1);
 
 /**
- * @returns {import('../../interface.ts').Directive}
+ * @returns {ng.Directive}
  */
 function ngCloakDirective() {
   return {
@@ -11576,7 +11923,7 @@ function ngHideDirective($animate) {
 ngIfDirective.$inject = ["$animate"];
 /**
  * @param {*}  $animate
- * @returns {import("../../interface.ts").Directive}
+ * @returns {ng.Directive}
  */
 function ngIfDirective($animate) {
   return {
@@ -11586,10 +11933,10 @@ function ngIfDirective($animate) {
     restrict: "A",
     /**
      *
-     * @param {import("../../core/scope/scope.js").Scope} $scope
+     * @param {ng.Scope} $scope
      * @param {Element} $element
-     * @param {import("../../core/compile/attributes.js").Attributes} $attr
-     * @param {Object} _ctrl
+     * @param {ng.Attributes} $attr
+     * @param {*} _ctrl
      * @param {*} $transclude
      */
     link($scope, $element, $attr, _ctrl, $transclude) {
@@ -11601,7 +11948,7 @@ function ngIfDirective($animate) {
 
       let previousElements;
 
-      $scope.$watch($attr["ngIf"], (value) => {
+      $scope.$watch($attr.ngIf, (value) => {
         if (value) {
           if (!childScope) {
             $transclude((clone, newScope) => {
@@ -11656,7 +12003,7 @@ ngIncludeDirective.$inject = [
  * @param {import("../../services/anchor-scroll/anchor-scroll.js").AnchorScrollFunction} $anchorScroll
  * @param {*} $animate
  * @param {import('../../services/exception/interface.ts').ErrorHandler} $exceptionHandler
- * @returns {import('../../interface.js').Directive}
+ * @returns {import('../../interface.ts').Directive}
  */
 function ngIncludeDirective(
   $templateRequest,
@@ -11777,7 +12124,7 @@ function ngIncludeDirective(
 ngIncludeFillContentDirective.$inject = [$injectTokens.$compile];
 
 /**
- * @param {import("../../core/compile/compile.js").CompileFn} $compile
+ * @param {ng.CompileService} $compile
  * @returns {import("../../interface.ts").Directive}
  */
 function ngIncludeFillContentDirective($compile) {
@@ -12408,7 +12755,7 @@ const NG_OPTIONS_REGEXP =
 ngOptionsDirective.$inject = ["$compile", "$parse"];
 /**
  *
- * @param {import("../../core/compile/compile.js").CompileFn} $compile
+ * @param {ng.CompileService} $compile
  * @param {import("../../core/parse/interface.ts").ParseService} $parse
  * @returns {import("../../interface.ts").Directive}
  */
@@ -12935,8 +13282,8 @@ const ngTranscludeMinErr = minErr("ngTransclude");
 
 ngTranscludeDirective.$inject = ["$compile"];
 /**
- * @param {import("../../core/compile/compile.js").CompileFn} $compile
- * @returns {import("../../interface.ts").Directive}
+ * @param {ng.CompileService} $compile
+ * @returns {ng.Directive}
  */
 function ngTranscludeDirective($compile) {
   return {
@@ -12947,9 +13294,9 @@ function ngTranscludeDirective($compile) {
 
       /**
        *
-       * @param {import("../../core/scope/scope.js").Scope} $scope
+       * @param {ng.Scope} $scope
        * @param {Element} $element
-       * @param {import("../../core/compile/attributes.js").Attributes} $attrs
+       * @param {ng.Attributes} $attrs
        * @param {*} _controller
        * @param {*} $transclude
        */
@@ -13038,7 +13385,7 @@ function ngTranscludeDirective($compile) {
 const REGEX_STRING_REGEXP = /^\/(.+)\/([a-z]*)$/;
 
 /**
- * @type {Record<string, import("../../interface.js").DirectiveFactory>}
+ * @type {Record<string, import("../../interface.ts").DirectiveFactory>}
  */
 const ngAttributeAliasDirectives = {};
 
@@ -13611,364 +13958,6 @@ class AnchorScrollProvider {
   ];
 }
 
-/**
- * @readonly
- * @enum {number}
- */
-const ASTType = {
-  Program: 1,
-  ExpressionStatement: 2,
-  AssignmentExpression: 3,
-  ConditionalExpression: 4,
-  LogicalExpression: 5,
-  BinaryExpression: 6,
-  UnaryExpression: 7,
-  CallExpression: 8,
-  MemberExpression: 9,
-  Identifier: 10,
-  Literal: 11,
-  ArrayExpression: 12,
-  Property: 13,
-  ObjectExpression: 14,
-  ThisExpression: 15,
-  LocalsExpression: 16,
-  NGValueParameter: 17,
-};
-
-const ADD_CLASS_SUFFIX = "-add";
-const REMOVE_CLASS_SUFFIX = "-remove";
-const EVENT_CLASS_PREFIX = "ng-";
-const ACTIVE_CLASS_SUFFIX = "-active";
-const PREPARE_CLASS_SUFFIX = "-prepare";
-
-const NG_ANIMATE_CLASSNAME = "ng-animate";
-const NG_ANIMATE_CHILDREN_DATA = "$$ngAnimateChildren";
-let TRANSITION_PROP;
-let TRANSITIONEND_EVENT;
-let ANIMATION_PROP;
-let ANIMATIONEND_EVENT;
-
-// If unprefixed events are not supported but webkit-prefixed are, use the latter.
-// Otherwise, just use W3C names, browsers not supporting them at all will just ignore them.
-// Note: Chrome implements `window.onwebkitanimationend` and doesn't implement `window.onanimationend`
-// but at the same time dispatches the `animationend` event and not `webkitAnimationEnd`.
-// Register both events in case `window.onanimationend` is not supported because of that,
-// do the same for `transitionend` as Safari is likely to exhibit similar behavior.
-// Also, the only modern browser that uses vendor prefixes for transitions/keyframes is webkit
-// therefore there is no reason to test anymore for other vendor prefixes:
-// http://caniuse.com/#search=transition
-if (
-  window.ontransitionend === undefined &&
-  window.onwebkittransitionend !== undefined
-) {
-  TRANSITION_PROP = "WebkitTransition";
-  TRANSITIONEND_EVENT = "webkitTransitionEnd transitionend";
-} else {
-  TRANSITION_PROP = "transition";
-  TRANSITIONEND_EVENT = "transitionend";
-}
-
-if (
-  window.onanimationend === undefined &&
-  window.onwebkitanimationend !== undefined
-) {
-  ANIMATION_PROP = "WebkitAnimation";
-  ANIMATIONEND_EVENT = "webkitAnimationEnd animationend";
-} else {
-  ANIMATION_PROP = "animation";
-  ANIMATIONEND_EVENT = "animationend";
-}
-
-const DURATION_KEY = "Duration";
-const PROPERTY_KEY = ASTType.Property;
-const DELAY_KEY = "Delay";
-const TIMING_KEY = "TimingFunction";
-const ANIMATION_ITERATION_COUNT_KEY = "IterationCount";
-const ANIMATION_PLAYSTATE_KEY = "PlayState";
-const SAFE_FAST_FORWARD_DURATION_VALUE = 9999;
-
-const ANIMATION_DELAY_PROP = ANIMATION_PROP + DELAY_KEY;
-const ANIMATION_DURATION_PROP = ANIMATION_PROP + DURATION_KEY;
-const TRANSITION_DELAY_PROP = TRANSITION_PROP + DELAY_KEY;
-const TRANSITION_DURATION_PROP = TRANSITION_PROP + DURATION_KEY;
-
-const ngMinErr$1 = minErr("ng");
-function assertArg(arg, name, reason) {
-  if (!arg) {
-    throw ngMinErr$1(
-      "areq",
-      "Argument '{0}' is {1}",
-      name || "?",
-      reason,
-    );
-  }
-  return arg;
-}
-
-function packageStyles(options) {
-  const styles = {};
-  if (options && (options.to || options.from)) {
-    styles.to = options.to;
-    styles.from = options.from;
-  }
-  return styles;
-}
-
-function pendClasses(classes, fix, isPrefix) {
-  let className = "";
-
-  classes = Array.isArray(classes)
-    ? classes
-    : classes && isString(classes) && classes.length
-      ? classes.split(/\s+/)
-      : [];
-  classes.forEach((klass, i) => {
-    if (klass && klass.length > 0) {
-      className += i > 0 ? " " : "";
-      className += isPrefix ? fix + klass : klass + fix;
-    }
-  });
-  return className;
-}
-
-function removeFromArray(arr, val) {
-  const index = arr.indexOf(val);
-  if (val >= 0) {
-    arr.splice(index, 1);
-  }
-}
-
-/**
- *
- * @param {NodeList|Node} element
- * @returns {Node[]|Node|undefined}
- */
-function stripCommentsFromElement(element) {
-  if (element instanceof NodeList) {
-    return Array.from(element).filter((x) => x.nodeType == Node.ELEMENT_NODE);
-  } else if (element.nodeType === Node.ELEMENT_NODE) {
-    return /** @type {Node} */ (element);
-  } else {
-    return undefined;
-  }
-}
-
-/**
- * @param {NodeList|Node} element
- * @returns {Node}
- */
-function extractElementNode(element) {
-  if (!element) return /** @type {Node} */ (element);
-  for (let i = 0; i < /** @type {NodeList} */ (element).length; i++) {
-    const elm = element[i];
-    if (elm.nodeType === Node.ELEMENT_NODE) {
-      return elm;
-    }
-  }
-}
-
-function applyAnimationClassesFactory() {
-  return function (element, options) {
-    if (options.addClass) {
-      element.classList.add(...options.addClass.trim().split(" "));
-      options.addClass = null;
-    }
-    if (options.removeClass) {
-      element.classList.remove(...options.removeClass.trim().split(" "));
-      options.removeClass = null;
-    }
-  };
-}
-
-function prepareAnimationOptions(options) {
-  options = options || {};
-  if (!options.$$prepared) {
-    let domOperation = options.domOperation || (() => {});
-    options.domOperation = function () {
-      options.$$domOperationFired = true;
-      domOperation();
-      domOperation = () => {};
-    };
-    options.$$prepared = true;
-  }
-  return options;
-}
-
-function applyAnimationStyles(element, options) {
-  applyAnimationFromStyles(element, options);
-  applyAnimationToStyles(element, options);
-}
-
-function applyAnimationFromStyles(element, options) {
-  if (options.from) {
-    //element.css(options.from);
-    options.from = null;
-  }
-}
-
-function applyAnimationToStyles(element, options) {
-  if (options.to) {
-    //element.css(options.to);
-    options.to = null;
-  }
-}
-
-function mergeAnimationDetails(element, oldAnimation, newAnimation) {
-  const target = oldAnimation.options || {};
-  const newOptions = newAnimation.options || {};
-
-  const toAdd = `${target.addClass || ""} ${newOptions.addClass || ""}`;
-  const toRemove = `${target.removeClass || ""} ${newOptions.removeClass || ""}`;
-  const classes = resolveElementClasses(
-    element.getAttribute("class"),
-    toAdd,
-    toRemove,
-  );
-
-  if (newOptions.preparationClasses) {
-    target.preparationClasses = concatWithSpace(
-      newOptions.preparationClasses,
-      target.preparationClasses,
-    );
-    delete newOptions.preparationClasses;
-  }
-
-  extend(target, newOptions);
-
-  if (classes.addClass) {
-    target.addClass = classes.addClass;
-  } else {
-    target.addClass = null;
-  }
-
-  if (classes.removeClass) {
-    target.removeClass = classes.removeClass;
-  } else {
-    target.removeClass = null;
-  }
-
-  oldAnimation.addClass = target.addClass;
-  oldAnimation.removeClass = target.removeClass;
-
-  return target;
-}
-
-function resolveElementClasses(existing, toAdd, toRemove) {
-  const ADD_CLASS = 1;
-  const REMOVE_CLASS = -1;
-
-  const flags = {};
-  existing = splitClassesToLookup(existing);
-
-  toAdd = splitClassesToLookup(toAdd);
-  Object.keys(toAdd).forEach((key) => {
-    flags[key] = ADD_CLASS;
-  });
-
-  toRemove = splitClassesToLookup(toRemove);
-  Object.keys(toRemove).forEach((key) => {
-    flags[key] = flags[key] === ADD_CLASS ? null : REMOVE_CLASS;
-  });
-
-  const classes = {
-    addClass: "",
-    removeClass: "",
-  };
-
-  Object.entries(flags).forEach(([klass, val]) => {
-    let prop, allow;
-    if (val === ADD_CLASS) {
-      prop = "addClass";
-      allow = !existing[klass] || existing[klass + REMOVE_CLASS_SUFFIX];
-    } else if (val === REMOVE_CLASS) {
-      prop = "removeClass";
-      allow = existing[klass] || existing[klass + ADD_CLASS_SUFFIX];
-    }
-    if (allow) {
-      if (classes[prop].length) {
-        classes[prop] += " ";
-      }
-      classes[prop] += klass;
-    }
-  });
-
-  function splitClassesToLookup(classes) {
-    if (isString(classes)) {
-      classes = classes.trim().split(" ");
-    }
-
-    const obj = {};
-    if (classes) {
-      classes.forEach((klass) => {
-        // sometimes the split leaves empty string values
-        // incase extra spaces were applied to the options
-        if (klass.length) {
-          obj[klass] = true;
-        }
-      });
-    }
-    return obj;
-  }
-
-  return classes;
-}
-
-function applyGeneratedPreparationClasses(element, event, options) {
-  let classes = "";
-  if (event) {
-    classes = pendClasses(event, EVENT_CLASS_PREFIX, true);
-  }
-  if (options.addClass) {
-    classes = concatWithSpace(
-      classes,
-      pendClasses(options.addClass, ADD_CLASS_SUFFIX),
-    );
-  }
-  if (options.removeClass) {
-    classes = concatWithSpace(
-      classes,
-      pendClasses(options.removeClass, REMOVE_CLASS_SUFFIX),
-    );
-  }
-  if (classes.length) {
-    options.preparationClasses = classes;
-    element.className += ` ${classes}`;
-  }
-}
-
-function clearGeneratedClasses(element, options) {
-  if (options.preparationClasses) {
-    options.preparationClasses
-      .split(" ")
-      .forEach((cls) => element.classList.remove(cls));
-    options.preparationClasses = null;
-  }
-  if (options.activeClasses) {
-    options.activeClasses
-      .split(" ")
-      .forEach((cls) => element.classList.remove(cls));
-    options.activeClasses = null;
-  }
-}
-
-function blockKeyframeAnimations(node, applyBlock) {
-  const value = applyBlock ? "paused" : "";
-  const key = ANIMATION_PROP + ANIMATION_PLAYSTATE_KEY;
-  applyInlineStyle(node, [key, value]);
-  return [key, value];
-}
-
-function applyInlineStyle(node, styleTuple) {
-  const prop = styleTuple[0];
-  node.style[prop] = styleTuple[1];
-}
-
-function concatWithSpace(a, b) {
-  if (!a) return b;
-  if (!b) return a;
-  return `${a} ${b}`;
-}
-
 /** @typedef {"enter"|"leave"|"move"|"addClass"|"setClass"|"removeClass"} AnimationMethod */
 
 /**
@@ -14356,7 +14345,7 @@ function AnimateProvider($provide) {
          *
          * @param {Element} element - the element which will be inserted into the DOM
          * @param {Element} parent - the parent element which will append the element as a child (so long as the after element is not present)
-         * @param {Element} after - after the sibling element after which the element will be appended
+         * @param {Element} [after] - after the sibling element after which the element will be appended
          * @param {AnimationOptions} [options] - an optional collection of options/styles that will be applied to the element.
          * @returns {import('./animate-runner.js').AnimateRunner} the animation runner
          */
@@ -17834,7 +17823,7 @@ class InterpolateProvider {
             return concat.join("");
           };
 
-          return /**@type {import("./interface.js").InterpolationFunction}  */ extend(
+          return /**@type {import("./interface.ts").InterpolationFunction}  */ extend(
             (context, cb) => {
               let i = 0;
               const ii = expressions.length;
@@ -19502,7 +19491,7 @@ class LocationProvider {
   /**
    * Registers a callback to be called when the URL changes.
    *
-   * @param {import("./interface.js").UrlChangeListener} callback - The callback function to register.
+   * @param {import("./interface.ts").UrlChangeListener} callback - The callback function to register.
    * @returns void
    */
   #onUrlChange(callback) {
@@ -20095,16 +20084,9 @@ function nextId() {
  */
 let $parse;
 
-/**@type {import('../../services/exception/exception-handler.js').ErrorHandler} */
+/**@type {ng.ExceptionHandlerService} */
 let $exceptionHandler;
 
-/**
- * @typedef {Object} AsyncQueueTask
- * @property {Scope} handler
- * @property {Function} fn
- * @property {Object} locals
- */
-
 const $postUpdateQueue = [];
 
 class RootScopeProvider {
@@ -20113,11 +20095,11 @@ class RootScopeProvider {
   }
 
   $get = [
-    "$exceptionHandler",
-    "$parse",
+    $injectTokens.$exceptionHandler,
+    $injectTokens.$parse,
     /**
-     * @param {import('../../services/exception/exception-handler.js').ErrorHandler} exceptionHandler
-     * @param {import('../parse/interface.ts').ParseService} parse
+     * @param {ng.ExceptionHandlerService} exceptionHandler
+     * @param {ng.ParseService} parse
      */
     (exceptionHandler, parse) => {
       $exceptionHandler = exceptionHandler;
@@ -20174,27 +20156,6 @@ function createScope(target = {}, context) {
   }
 }
 
-/**
- * Listener function definition.
- * @typedef {Object} Listener
- * @property {Object} originalTarget - The original target object.
- * @property {ListenerFunction} listenerFn - The function invoked when changes are detected.
- * @property {import("../parse/interface.ts").CompiledExpression} watchFn
- * @property {number} id - Deregistration id
- * @property {number} scopeId - The scope that created the Listener
- * @property {string[]} property
- * @property {string} [watchProp] - The original property to watch if different from observed key
- * @property {Proxy} [foreignListener]
- *
- */
-
-/**
- * Listener function type.
- * @callback ListenerFunction
- * @param {*} newValue - The new value of the changed property.
- * @param {Object} originalTarget - The original target object.
- */
-
 /**
  * Decorator for excluding objects from scope observability
  */
@@ -20220,13 +20181,13 @@ class Scope {
         : context
       : undefined;
 
-    /** @type {Map<string, Array<Listener>>} Watch listeners */
+    /** @type {Map<string, Array<import('./interface.ts').Listener>>} Watch listeners */
     this.watchers = context ? context.watchers : new Map();
 
     /** @type {Map<String, Function[]>} Event listeners */
     this.$$listeners = new Map();
 
-    /** @type {Map<string, Array<Listener>>} Watch listeners from other proxies */
+    /** @type {Map<string, Array<import('./interface.ts').Listener>>} Watch listeners from other proxies */
     this.foreignListeners = context ? context.foreignListeners : new Map();
 
     /** @type {Set<ProxyConstructor>} */
@@ -20271,7 +20232,7 @@ class Scope {
         ? null
         : context;
 
-    /** @type {AsyncQueueTask[]} */
+    /** @type {import('./interface.ts').AsyncQueueTask[]} */
     this.$$asyncQueue = [];
 
     this.filters = [];
@@ -20280,257 +20241,18 @@ class Scope {
     this.$$destroyed = false;
 
     this.scheduled = [];
-  }
-
-  /**
-   * Intercepts and handles property assignments on the target object. If a new value is
-   * an object, it will be recursively proxied.
-   *
-   * @param {Object} target - The target object.
-   * @param {string} property - The name of the property being set.
-   * @param {*} value - The new value being assigned to the property.
-   * @param {Proxy} proxy - The proxy intercepting property access
-   * @returns {boolean} - Returns true to indicate success of the operation.
-   */
-  set(target, property, value, proxy) {
-    if (property === "undefined") {
-      throw new Error("Attempting to set undefined property");
-    }
-    if (
-      (target.constructor?.$nonscope &&
-        Array.isArray(target.constructor.$nonscope) &&
-        target.constructor.$nonscope.includes(property)) ||
-      (target.$nonscope &&
-        Array.isArray(target.$nonscope) &&
-        target.$nonscope.includes(property))
-    ) {
-      target[property] = value;
-      return true;
-    }
-
-    this.$proxy = proxy;
-    this.$target = target;
-    const oldValue = target[property];
-
-    // Handle NaNs
-    if (
-      oldValue !== undefined &&
-      Number.isNaN(oldValue) &&
-      Number.isNaN(value)
-    ) {
-      return true;
-    }
-    if (oldValue && oldValue[isProxySymbol]) {
-      if (Array.isArray(value)) {
-        if (oldValue !== value) {
-          const listeners = this.watchers.get(property);
-
-          if (listeners) {
-            this.#scheduleListener(listeners);
-          }
-
-          const foreignListeners = this.foreignListeners.get(property);
-
-          if (foreignListeners) {
-            this.#scheduleListener(foreignListeners);
-          }
-        }
-
-        if (this.objectListeners.get(target[property])) {
-          this.objectListeners.delete(target[property]);
-        }
-        target[property] = createScope(value, this);
-        this.objectListeners.set(target[property], [property]);
-        return true;
-      }
-
-      if (isObject(value)) {
-        if (hasOwn(target, property)) {
-          Object.keys(oldValue)
-            .filter((x) => !value[x])
-            .forEach((k) => {
-              delete oldValue[k];
-            });
-        }
-
-        if (oldValue !== value) {
-          const listeners = this.watchers.get(property);
-
-          if (listeners) {
-            this.#scheduleListener(listeners);
-          }
-
-          const foreignListeners = this.foreignListeners.get(property);
-
-          if (foreignListeners) {
-            this.#scheduleListener(foreignListeners);
-          }
-
-          this.#checkeListenersForAllKeys(value);
-        }
-        target[property] = createScope(value, this);
-        //setDeepValue(target[property], value);
-        return true;
-      }
-
-      if (isUndefined(value)) {
-        let called = false;
-        Object.keys(oldValue.$target).forEach((k) => {
-          if (oldValue.$target[k]?.[isProxySymbol]) {
-            called = true;
-          }
-          delete oldValue[k];
-        });
-
-        target[property] = undefined;
-        if (!called) {
-          let listeners = this.watchers.get(property);
-
-          if (listeners) {
-            this.#scheduleListener(listeners);
-          }
-        }
-
-        return true;
-      }
-
-      if (isDefined(value)) {
-        target[property] = value;
-        let listeners = this.watchers.get(property);
-
-        if (listeners) {
-          this.#scheduleListener(listeners);
-        }
-
-        if (Array.isArray(target)) {
-          if (this.objectListeners.has(proxy) && property !== "length") {
-            let keys = this.objectListeners.get(proxy);
-            keys.forEach((key) => {
-              const listeners = this.watchers.get(key);
-              if (listeners) {
-                this.#scheduleListener(listeners);
-              }
-            });
-          }
-        }
-
-        return true;
-      }
-      return true;
-    } else {
-      if (isUndefined(target[property]) && isProxy(value)) {
-        this.foreignProxies.add(value);
-        target[property] = value;
-        if (!this.watchers.has(property)) {
-          return true;
-        }
-      }
-      if (isUndefined(value)) {
-        target[property] = value;
-      } else {
-        target[property] = createScope(value, this);
-      }
-
-      if (oldValue !== value) {
-        let expectedTarget = this.$target;
-        let listeners = [];
-        // Handle the case where we need to start observing object after a watcher has been set
-        if (isUndefined(oldValue) && isObject(target[property])) {
-          if (!this.objectListeners.has(target[property])) {
-            this.objectListeners.set(target[property], [property]);
-          }
-          for (const k of Object.keys(value)) {
-            this.watchers.get(k)?.forEach((l) => listeners.push(l));
-            // overwhrite the context so we pass the owneship test in filter
-            expectedTarget = value;
-          }
-        }
-
-        if (Array.isArray(target)) {
-          this.watchers.get("length")?.forEach((l) => listeners.push(l));
-        }
-
-        this.watchers.get(property)?.forEach((l) => listeners.push(l));
-        if (listeners.length > 0) {
-          // check if the listener actually appllies to this target
-          this.#scheduleListener(listeners, (x) => {
-            return x.filter((x) => {
-              if (!x.watchProp) return true;
-              // Compute the expected target based on `watchProp`
-              const wrapperExpr = x.watchProp.split(".").slice(0, -1).join(".");
-              const expectedHandler = $parse(wrapperExpr)(
-                x.originalTarget,
-              )?.$handler;
-              return expectedTarget === expectedHandler?.$target;
-            });
-          });
-        }
-
-        let foreignListeners = this.foreignListeners.get(property);
-
-        if (!foreignListeners && this.$parent?.foreignListeners) {
-          foreignListeners = this.$parent.foreignListeners.get(property);
-        }
-        if (foreignListeners) {
-          // filter for repeaters
-          if (this.$target.$$hashKey) {
-            foreignListeners = foreignListeners.filter((x) =>
-              x.originalTarget.$$hashKey
-                ? x.originalTarget.$$hashKey == this.$target.$$hashKey
-                : false,
-            );
-          }
-
-          this.#scheduleListener(foreignListeners);
-        }
-      }
-
-      if (this.objectListeners.has(proxy) && property !== "length") {
-        let keys = this.objectListeners.get(proxy);
-        keys.forEach((key) => {
-          const listeners = this.watchers.get(key);
-          if (listeners) {
-            if (this.scheduled !== listeners) {
-              this.#scheduleListener(listeners);
-            }
-          }
-        });
-      }
-
-      return true;
-    }
-  }
-
-  /**
-   * Intercepts property access on the target object. It checks for specific
-   * properties (`watch` and `sync`) and binds their methods. For other properties,
-   * it returns the value directly.
-   *
-   * @param {Object} target - The target object.
-   * @param {string|number|symbol} property - The name of the property being accessed.
-   * @param {Proxy} proxy - The proxy object being invoked
-   * @returns {*} - The value of the property or a method if accessing `watch` or `sync`.
-   */
-  get(target, property, proxy) {
-    if (property === "$$watchersCount") return calculateWatcherCount(this);
-    if (property === isProxySymbol) return true;
-
-    if (target[property] && isProxy(target[property])) {
-      this.$proxy = target[property];
-    } else {
-      this.$proxy = proxy;
-    }
 
+    /** @private */
     this.propertyMap = {
       $watch: this.$watch.bind(this),
       $new: this.$new.bind(this),
       $newIsolate: this.$newIsolate.bind(this),
       $destroy: this.$destroy.bind(this),
+      $flushQueue: this.$flushQueue.bind(this),
       $eval: this.$eval.bind(this),
       $apply: this.$apply.bind(this),
       $postUpdate: this.$postUpdate.bind(this),
       $isRoot: this.#isRoot.bind(this),
-      $target: target,
       $proxy: this.$proxy,
       $on: this.$on.bind(this),
       $emit: this.$emit.bind(this),
@@ -20544,6 +20266,249 @@ class Scope {
       $merge: this.$merge.bind(this),
       $getById: this.$getById.bind(this),
     };
+  }
+
+  /**
+   * Intercepts and handles property assignments on the target object. If a new value is
+   * an object, it will be recursively proxied.
+   *
+   * @param {Object} target - The target object.
+   * @param {string} property - The name of the property being set.
+   * @param {*} value - The new value being assigned to the property.
+   * @param {Proxy} proxy - The proxy intercepting property access
+   * @returns {boolean} - Returns true to indicate success of the operation.
+   */
+  set(target, property, value, proxy) {
+    if (property === "undefined") {
+      throw new Error("Attempting to set undefined property");
+    }
+    if (
+      (target.constructor?.$nonscope &&
+        Array.isArray(target.constructor.$nonscope) &&
+        target.constructor.$nonscope.includes(property)) ||
+      (target.$nonscope &&
+        Array.isArray(target.$nonscope) &&
+        target.$nonscope.includes(property))
+    ) {
+      target[property] = value;
+      return true;
+    }
+
+    this.$proxy = proxy;
+    this.$target = target;
+    const oldValue = target[property];
+
+    // Handle NaNs
+    if (
+      oldValue !== undefined &&
+      Number.isNaN(oldValue) &&
+      Number.isNaN(value)
+    ) {
+      return true;
+    }
+    if (oldValue && oldValue[isProxySymbol]) {
+      if (Array.isArray(value)) {
+        if (oldValue !== value) {
+          const listeners = this.watchers.get(property);
+
+          if (listeners) {
+            this.#scheduleListener(listeners);
+          }
+
+          const foreignListeners = this.foreignListeners.get(property);
+
+          if (foreignListeners) {
+            this.#scheduleListener(foreignListeners);
+          }
+        }
+
+        if (this.objectListeners.get(target[property])) {
+          this.objectListeners.delete(target[property]);
+        }
+        target[property] = createScope(value, this);
+        this.objectListeners.set(target[property], [property]);
+        return true;
+      }
+
+      if (isObject(value)) {
+        if (hasOwn(target, property)) {
+          Object.keys(oldValue)
+            .filter((x) => !value[x])
+            .forEach((k) => {
+              delete oldValue[k];
+            });
+        }
+
+        if (oldValue !== value) {
+          const listeners = this.watchers.get(property);
+
+          if (listeners) {
+            this.#scheduleListener(listeners);
+          }
+
+          const foreignListeners = this.foreignListeners.get(property);
+
+          if (foreignListeners) {
+            this.#scheduleListener(foreignListeners);
+          }
+
+          this.#checkeListenersForAllKeys(value);
+        }
+        target[property] = createScope(value, this);
+        //setDeepValue(target[property], value);
+        return true;
+      }
+
+      if (isUndefined(value)) {
+        let called = false;
+        Object.keys(oldValue.$target).forEach((k) => {
+          if (oldValue.$target[k]?.[isProxySymbol]) {
+            called = true;
+          }
+          delete oldValue[k];
+        });
+
+        target[property] = undefined;
+        if (!called) {
+          let listeners = this.watchers.get(property);
+
+          if (listeners) {
+            this.#scheduleListener(listeners);
+          }
+        }
+
+        return true;
+      }
+
+      if (isDefined(value)) {
+        target[property] = value;
+        let listeners = this.watchers.get(property);
+
+        if (listeners) {
+          this.#scheduleListener(listeners);
+        }
+
+        if (Array.isArray(target)) {
+          if (this.objectListeners.has(proxy) && property !== "length") {
+            let keys = this.objectListeners.get(proxy);
+            keys.forEach((key) => {
+              const listeners = this.watchers.get(key);
+              if (listeners) {
+                this.#scheduleListener(listeners);
+              }
+            });
+          }
+        }
+
+        return true;
+      }
+      return true;
+    } else {
+      if (isUndefined(target[property]) && isProxy(value)) {
+        this.foreignProxies.add(value);
+        target[property] = value;
+        if (!this.watchers.has(property)) {
+          return true;
+        }
+      }
+      if (isUndefined(value)) {
+        target[property] = value;
+      } else {
+        target[property] = createScope(value, this);
+      }
+
+      if (oldValue !== value) {
+        let expectedTarget = this.$target;
+        let listeners = [];
+        // Handle the case where we need to start observing object after a watcher has been set
+        if (isUndefined(oldValue) && isObject(target[property])) {
+          if (!this.objectListeners.has(target[property])) {
+            this.objectListeners.set(target[property], [property]);
+          }
+          for (const k of Object.keys(value)) {
+            this.watchers.get(k)?.forEach((l) => listeners.push(l));
+            // overwhrite the context so we pass the owneship test in filter
+            expectedTarget = value;
+          }
+        }
+
+        if (Array.isArray(target)) {
+          this.watchers.get("length")?.forEach((l) => listeners.push(l));
+        }
+
+        this.watchers.get(property)?.forEach((l) => listeners.push(l));
+        if (listeners.length > 0) {
+          // check if the listener actually appllies to this target
+          this.#scheduleListener(listeners, (x) => {
+            return x.filter((x) => {
+              if (!x.watchProp) return true;
+              // Compute the expected target based on `watchProp`
+              const wrapperExpr = x.watchProp.split(".").slice(0, -1).join(".");
+              const expectedHandler = $parse(wrapperExpr)(
+                x.originalTarget,
+              )?.$handler;
+              return expectedTarget === expectedHandler?.$target;
+            });
+          });
+        }
+
+        let foreignListeners = this.foreignListeners.get(property);
+
+        if (!foreignListeners && this.$parent?.foreignListeners) {
+          foreignListeners = this.$parent.foreignListeners.get(property);
+        }
+        if (foreignListeners) {
+          // filter for repeaters
+          if (this.$target.$$hashKey) {
+            foreignListeners = foreignListeners.filter((x) =>
+              x.originalTarget["$$hashKey"]
+                ? x.originalTarget["$$hashKey"] === this.$target.$$hashKey
+                : false,
+            );
+          }
+
+          this.#scheduleListener(foreignListeners);
+        }
+      }
+
+      if (this.objectListeners.has(proxy) && property !== "length") {
+        let keys = this.objectListeners.get(proxy);
+        keys.forEach((key) => {
+          const listeners = this.watchers.get(key);
+          if (listeners) {
+            if (this.scheduled !== listeners) {
+              this.#scheduleListener(listeners);
+            }
+          }
+        });
+      }
+
+      return true;
+    }
+  }
+
+  /**
+   * Intercepts property access on the target object. It checks for specific
+   * properties (`watch` and `sync`) and binds their methods. For other properties,
+   * it returns the value directly.
+   *
+   * @param {Object} target - The target object.
+   * @param {string|number|symbol} property - The name of the property being accessed.
+   * @param {Proxy} proxy - The proxy object being invoked
+   * @returns {*} - The value of the property or a method if accessing `watch` or `sync`.
+   */
+  get(target, property, proxy) {
+    if (property === "$$watchersCount") return calculateWatcherCount(this);
+    if (property === isProxySymbol) return true;
+
+    if (target[property] && isProxy(target[property])) {
+      this.$proxy = target[property];
+    } else {
+      this.$proxy = proxy;
+    }
+
+    this.propertyMap.$target = target;
+    this.propertyMap.$proxy = proxy;
 
     if (
       Array.isArray(target) &&
@@ -20638,7 +20603,7 @@ class Scope {
   }
 
   /**
-   * @param {Listener[]} listeners
+   * @param {import('./interface.ts').Listener[]} listeners
    * @param {Function} filter
    */
   #scheduleListener(listeners, filter = (val) => val) {
@@ -20662,7 +20627,7 @@ class Scope {
    * function is invoked when changes to that property are detected.
    *
    * @param {string} watchProp - An expression to be watched in the context of this model.
-   * @param {ListenerFunction} [listenerFn] - A function to execute when changes are detected on watched context.
+   * @param {import('./interface.ts').ListenerFunction} [listenerFn] - A function to execute when changes are detected on watched context.
    * @param {boolean} [lazy] - A flag to indicate if the listener should be invoked immediately. Defaults to false.
    */
   $watch(watchProp, listenerFn, lazy = false) {
@@ -20684,7 +20649,7 @@ class Scope {
       return () => {};
     }
 
-    /** @type {Listener} */
+    /** @type {import('./interface.ts').Listener} */
     const listener = {
       originalTarget: this.$target,
       listenerFn: listenerFn,
@@ -20796,7 +20761,7 @@ class Scope {
 
           let potentialProxy = $parse(
             watchProp.split(".").slice(0, -1).join("."),
-          )(listener.originalTarget);
+          )(/** @type {Scope} */ (listener.originalTarget));
           if (potentialProxy && this.foreignProxies.has(potentialProxy)) {
             potentialProxy.$handler.#registerForeignKey(key, listener);
             potentialProxy.$handler.#scheduleListener([listener]);
@@ -20994,21 +20959,21 @@ class Scope {
     return true;
   }
 
-  // deregisterForeignKey(key, id) {
-  //   const listenerList = this.foreignListeners.get(key);
-  //   if (!listenerList) return false;
+  deregisterForeignKey(key, id) {
+    const listenerList = this.foreignListeners.get(key);
+    if (!listenerList) return false;
 
-  //   const index = listenerList.findIndex((x) => x.id === id);
-  //   if (index === -1) return false;
+    const index = listenerList.findIndex((x) => x.id === id);
+    if (index === -1) return false;
 
-  //   listenerList.splice(index, 1);
-  //   if (listenerList.length) {
-  //     this.foreignListeners.set(key, listenerList);
-  //   } else {
-  //     this.foreignListeners.delete(key);
-  //   }
-  //   return true;
-  // }
+    listenerList.splice(index, 1);
+    if (listenerList.length) {
+      this.foreignListeners.set(key, listenerList);
+    } else {
+      this.foreignListeners.delete(key);
+    }
+    return true;
+  }
 
   $eval(expr, locals) {
     const fn = $parse(expr);
@@ -21041,7 +21006,7 @@ class Scope {
   }
 
   /**
-   * @param {import('../../interface.js').Expression} expr
+   * @param {import('../../interface.ts').Expression} expr
    * @returns {any}
    */
   $apply(expr) {
@@ -21222,12 +21187,12 @@ class Scope {
 
   /**
    * @internal
-   * @param {Listener} listener - The property path that was changed.
+   * @param {import('./interface.ts').Listener} listener - The property path that was changed.
    */
   #notifyListener(listener, target) {
     const { originalTarget, listenerFn, watchFn } = listener;
     try {
-      let newVal = watchFn(originalTarget);
+      let newVal = watchFn(/** @type {Scope} */ (originalTarget));
       if (isUndefined(newVal)) {
         newVal = watchFn(target);
       }
@@ -21257,6 +21222,13 @@ class Scope {
     }
   }
 
+  /* @ignore */
+  $flushQueue() {
+    while ($postUpdateQueue.length) {
+      $postUpdateQueue.shift()();
+    }
+  }
+
   /**
    * Searches the scope instance
    *
@@ -21767,7 +21739,7 @@ const ngMessageDefaultDirective = ngMessageDirectiveFactory(true);
 
 /**
  * @param {boolean} isDefault
- * @returns {(any) => import("../../interface.js").Directive}
+ * @returns {(any) => import("../../interface.ts").Directive}
  */
 function ngMessageDirectiveFactory(isDefault) {
   ngMessageDirective.$inject = ["$animate"];
@@ -21974,6 +21946,9 @@ function ngShowAriaDirective($aria) {
   return $aria.$$watchExpr("ngShow", "aria-hidden", [], true);
 }
 
+/**
+ * @return {ng.Directive}
+ */
 function ngMessagesAriaDirective() {
   return {
     restrict: "A",
@@ -21989,18 +21964,21 @@ function ngMessagesAriaDirective() {
 }
 
 ngClickAriaDirective.$inject = [$injectTokens.$aria, $injectTokens.$parse];
+
+/**
+ * @param $aria
+ * @param {ng.ParseService} $parse
+ * @return {ng.Directive}
+ */
 function ngClickAriaDirective($aria, $parse) {
   return {
     restrict: "A",
     compile(_elem, attr) {
       if (hasOwn(attr, ARIA_DISABLE_ATTR)) return;
 
-      const fn = $parse(attr.ngClick);
+      const fn = $parse(attr["ngClick"]);
 
-      /**
-       * @param {Element} elem
-       */
-      return function (scope, elem, attr) {
+      return (scope, elem, attr) => {
         if (!isNodeOneOf(elem, nativeAriaNodeNames)) {
           if ($aria.config("bindRoleForClick") && !elem.hasAttribute("role")) {
             elem.setAttribute("role", "button");
@@ -22037,10 +22015,6 @@ function ngClickAriaDirective($aria, $parse) {
                     // See https://github.com/angular/angular.js/issues/16664
                     event.preventDefault();
                   }
-                  scope.$apply(callback);
-                }
-
-                function callback() {
                   fn(scope, { $event: event });
                 }
               },
@@ -22362,6 +22336,7 @@ function registerRestorableStyles(backup, node, properties) {
 }
 
 function AnimateCssProvider() {
+  let activeClasses;
   this.$get = [
     "$$AnimateRunner",
     "$$animateCache",
@@ -22705,10 +22680,7 @@ function AnimateCssProvider() {
           return closeAndReturnNoopAnimator();
         }
 
-        let activeClasses = pendClasses(
-          preparationClasses,
-          ACTIVE_CLASS_SUFFIX,
-        );
+        activeClasses = pendClasses(preparationClasses, ACTIVE_CLASS_SUFFIX);
 
         if (options.delay != null) {
           if (typeof options.delay !== "boolean") {
@@ -22845,7 +22817,9 @@ function AnimateCssProvider() {
 
           if (events && events.length) {
             // Remove the transitionend / animationend listener(s)
-            element.off(events.join(" "), onAnimationProgress);
+            events.forEach((i) =>
+              element.removeEventListener(i, onAnimationProgress),
+            );
           }
 
           // Cancel the fallback closing timeout and remove the timer data
@@ -23280,11 +23254,6 @@ function AnimateQueueProvider($animateProvider) {
     ) {
       const activeAnimationsLookup = new Map();
       const disabledElementsLookup = new Map();
-      let animationsEnabled = null;
-
-      function removeFromDisabledElementsLookup(evt) {
-        disabledElementsLookup.delete(evt.target);
-      }
 
       function postDigestTaskFactory() {
         let postDigestCalled = false;
@@ -23324,11 +23293,6 @@ function AnimateQueueProvider($animateProvider) {
             // any animations are triggered.
             $rootScope.$postUpdate(() => {
               $rootScope.$postUpdate(() => {
-                // we check for null directly in the event that the application already called
-                // .enabled() with whatever arguments that it provided it with
-                if (animationsEnabled === null) {
-                  animationsEnabled = true;
-                }
               });
             });
           }
@@ -23467,47 +23431,6 @@ function AnimateQueueProvider($animateProvider) {
           options.domOperation = domOperation;
           return queueAnimation(element, event, options);
         },
-
-        // this method has four signatures:
-        //  () - global getter
-        //  (bool) - global setter
-        //  (element) - element getter
-        //  (element, bool) - element setter<F37>
-        enabled(element, bool) {
-          const argCount = arguments.length;
-
-          if (argCount === 0) {
-            // () - Global getter
-            bool = !!animationsEnabled;
-          } else {
-            const hasElement = isElement(element);
-
-            if (!hasElement) {
-              // (bool) - Global setter
-              bool = animationsEnabled = !!element;
-            } else {
-              const node = element;
-
-              if (argCount === 1) {
-                // (element) - Element getter
-                bool = !disabledElementsLookup.get(node);
-              } else {
-                // (element, bool) - Element setter
-                if (!disabledElementsLookup.has(node)) {
-                  // The element is added to the map for the first time.
-                  // Create a listener to remove it on `$destroy` (to avoid memory leak).
-                  element.addEventListener(
-                    "$destroy",
-                    removeFromDisabledElementsLookup,
-                  );
-                }
-                disabledElementsLookup.set(node, !bool);
-              }
-            }
-          }
-
-          return bool;
-        },
       };
 
       return $animate;
@@ -23564,6 +23487,7 @@ function AnimateQueueProvider($animateProvider) {
         if (options.to && !isObject(options.to)) {
           options.to = null;
         }
+
         // If animations are hard-disabled for the whole application there is no need to continue.
         // There are also situations where a directive issues an animation for a JQLite wrapper that
         // contains only comment nodes. In this case, there is no way we can perform an animation.
@@ -23576,7 +23500,6 @@ function AnimateQueueProvider($animateProvider) {
           close();
           return runner;
         }
-
         const isStructural = ["enter", "move", "leave"].indexOf(event) >= 0;
 
         // This is a hard disable of all animations the element itself, therefore  there is no need to
@@ -23812,6 +23735,8 @@ function AnimateQueueProvider($animateProvider) {
           });
         });
 
+        // Since we don't have digest any more - trigger queue here
+        setTimeout($rootScope.$flushQueue, 0);
         return runner;
 
         function notifyProgress(runner, event, phase, data) {
@@ -23975,14 +23900,14 @@ function AnimateQueueProvider($animateProvider) {
 // TODO: use caching here to speed things up for detection
 // TODO: add documentation
 
-AnimateJsProvider.$inject = ["$animateProvider"];
+AnimateJsProvider.$inject = [$injectTokens.$animate + "Provider"];
 function AnimateJsProvider($animateProvider) {
   this.$get = [
     $injectTokens.$injector,
     "$$AnimateRunner",
     /**
      *
-     * @param {import("../core/di/internal-injector").InjectorService} $injector
+     * @param {ng.InjectorService} $injector
      * @param {*} $$AnimateRunner
      * @returns
      */
@@ -24841,8 +24766,8 @@ function AnimationProvider() {
 }
 
 /**
- * @typedef {import('./interface.js').RafScheduler} RafScheduler
- * @typedef {import('../interface.js').ServiceProvider} ServiceProvider
+ * @typedef {import('./interface.ts').RafScheduler} RafScheduler
+ * @typedef {import('../interface.ts').ServiceProvider} ServiceProvider
  */
 
 /**
@@ -25357,9 +25282,9 @@ function AnimateJsDriverProvider($$animationProvider) {
   ];
 }
 
-ngAnimateSwapDirective.$inject = ["$animate"];
+ngAnimateSwapDirective.$inject = [$injectTokens.$animate];
 /**
- * @returns {import('../interface.ts').Directive}
+ * @returns {ng.Directive}
  */
 function ngAnimateSwapDirective($animate) {
   return {
@@ -25368,10 +25293,10 @@ function ngAnimateSwapDirective($animate) {
     terminal: true,
     priority: 550, // We use 550 here to ensure that the directive is caught before others,
     // but after `ngIf` (at priority 600).
-    link(scope, $element, attrs, ctrl, $transclude) {
+    link(scope, $element, attrs, _ctrl, $transclude) {
       let previousElement;
       let previousScope;
-      scope.$watch(attrs["ngAnimateSwap"] || attrs["for"], (value) => {
+      scope.$watch(attrs.ngAnimateSwap || attrs.for, (value) => {
         if (previousElement) {
           $animate.leave(previousElement);
         }
@@ -27598,7 +27523,7 @@ class PathUtils {
    * @param {PathNode[]} fromPath
    * @param {PathNode[]} toPath
    * @param {boolean} [reloadState]
-   * @returns {import("../transition/interface.js").TreeChanges}
+   * @returns {import("../transition/interface.ts").TreeChanges}
    */
   static treeChanges(fromPath, toPath, reloadState) {
     const max = Math.min(fromPath.length, toPath.length);
@@ -28333,25 +28258,6 @@ ViewService.matches = (ngViewsByFqn, ngView) => (viewConfig) => {
   return vc.$ngViewContextAnchor === (ngViewContext && ngViewContext.name);
 };
 
-/**
- * An object for Transition Hook Phases
- * @enum {number}
- * @readonly
- */
-const TransitionHookPhase = {
-  CREATE: 0,
-  BEFORE: 1,
-  RUN: 2,
-  SUCCESS: 3,
-  ERROR: 4,
-};
-
-/** An object for Transition Hook Scopes */
-const TransitionHookScope = {
-  TRANSITION: 0,
-  STATE: 1,
-};
-
 /**
  * An object for Transition Rejection reasons.
  * @enum {number}
@@ -28471,7 +28377,7 @@ class Rejection {
   }
 }
 
-/** @typedef {import('../../interface.js').ServiceProvider} ServiceProvider
+/** @typedef {import('../../interface.ts').ServiceProvider} ServiceProvider
 
 /**
  * Configurable provider for an injectable event bus
@@ -28828,6 +28734,31 @@ const defaultOptions = {
   bind: null,
 };
 
+/**
+ * Enum representing the different phases of a transition hook.
+ *
+ * @readonly
+ * @enum {number}
+ */
+const TransitionHookPhase = Object.freeze({
+  CREATE: 0,
+  BEFORE: 1,
+  RUN: 2,
+  SUCCESS: 3,
+  ERROR: 4,
+});
+
+/**
+ * Enum representing the scope in which a transition hook operates.
+ *
+ * @readonly
+ * @enum {number}
+ */
+const TransitionHookScope = Object.freeze({
+  TRANSITION: 0,
+  STATE: 1,
+});
+
 class TransitionHook {
   /**
    * Chains together an array of TransitionHooks.
@@ -30646,7 +30577,6 @@ class TransitionProvider {
   }
 
   _defineCoreEvents() {
-    const Phase = TransitionHookPhase;
     const TH = TransitionHook;
     const paths = this._criteriaPaths;
     const NORMAL_SORT = false,
@@ -30654,7 +30584,7 @@ class TransitionProvider {
     const SYNCHRONOUS = true;
     this._defineEvent(
       "onCreate",
-      Phase.CREATE,
+      TransitionHookPhase.CREATE,
       0,
       paths.to,
       NORMAL_SORT,
@@ -30662,15 +30592,21 @@ class TransitionProvider {
       TH.THROW_ERROR,
       SYNCHRONOUS,
     );
-    this._defineEvent("onBefore", Phase.BEFORE, 0, paths.to);
-    this._defineEvent("onStart", Phase.RUN, 0, paths.to);
-    this._defineEvent("onExit", Phase.RUN, 100, paths.exiting, REVERSE_SORT);
-    this._defineEvent("onRetain", Phase.RUN, 200, paths.retained);
-    this._defineEvent("onEnter", Phase.RUN, 300, paths.entering);
-    this._defineEvent("onFinish", Phase.RUN, 400, paths.to);
+    this._defineEvent("onBefore", TransitionHookPhase.BEFORE, 0, paths.to);
+    this._defineEvent("onStart", TransitionHookPhase.RUN, 0, paths.to);
+    this._defineEvent(
+      "onExit",
+      TransitionHookPhase.RUN,
+      100,
+      paths.exiting,
+      REVERSE_SORT,
+    );
+    this._defineEvent("onRetain", TransitionHookPhase.RUN, 200, paths.retained);
+    this._defineEvent("onEnter", TransitionHookPhase.RUN, 300, paths.entering);
+    this._defineEvent("onFinish", TransitionHookPhase.RUN, 400, paths.to);
     this._defineEvent(
       "onSuccess",
-      Phase.SUCCESS,
+      TransitionHookPhase.SUCCESS,
       0,
       paths.to,
       NORMAL_SORT,
@@ -30680,7 +30616,7 @@ class TransitionProvider {
     );
     this._defineEvent(
       "onError",
-      Phase.ERROR,
+      TransitionHookPhase.ERROR,
       0,
       paths.to,
       NORMAL_SORT,
@@ -30946,7 +30882,7 @@ class StateProvider {
 
   /**
    *
-   * @param {import("./interface.js").StateDeclaration} definition
+   * @param {import("./interface.ts").StateDeclaration} definition
    */
   state(definition) {
     if (!definition.name) {
@@ -32246,7 +32182,7 @@ function encodeDashes(str) {
   );
 }
 
-/** @typedef {import('./interface.js').StateDeclaration} StateDeclaration */
+/** @typedef {import('./interface.ts').StateDeclaration} StateDeclaration */
 
 /**
  * Internal representation of a ng-router state.
@@ -32269,7 +32205,7 @@ class StateObject {
   includes = undefined;
 
   /**
-   * @param {import('./interface.js').StateDeclaration} config
+   * @param {import('./interface.ts').StateDeclaration} config
    */
   constructor(config) {
     Object.assign(this, config);
@@ -32277,7 +32213,7 @@ class StateObject {
       return this;
     };
     /**
-     * @type {import('./interface.js').StateDeclaration}
+     * @type {import('./interface.ts').StateDeclaration}
      */
     this.self = config;
     /**
@@ -34666,7 +34602,7 @@ function $StateRefActiveDirective(
  * ```
  */
 
-/** @type {import("../../interface.js").AnnotatedDirectiveFactory} */
+/** @type {import("../../interface.ts").AnnotatedDirectiveFactory} */
 let ngView = [
   "$view",
   "$animate",
@@ -34677,7 +34613,7 @@ let ngView = [
    * @param {*} $animate
    * @param {*} $viewScroll
    * @param {*} $interpolate
-   * @returns {import("../../interface.js").Directive}
+   * @returns {import("../../interface.ts").Directive}
    */
   function $ViewDirective($view, $animate, $viewScroll, $interpolate) {
     function getRenderer() {
@@ -35018,8 +34954,8 @@ function registerControllerCallbacks(
 
 ngChannelDirective.$inject = [$injectTokens.$eventBus];
 /**
- * @param {import("../../services/pubsub/pubsub.js").PubSub} $eventBus
- * @returns {import("../../interface.ts").Directive}
+ * @param {ng.PubSubService} $eventBus
+ * @returns {ng.Directive}
  */
 function ngChannelDirective($eventBus) {
   return {
@@ -35103,7 +35039,8 @@ function ngSetterDirective($parse, $log) {
 }
 
 /**
- * @param {"get" | "delete" | "post" | "put"} method
+ * @param {"get" | "delete" | "post" | "put"} method - HTTP method applied to request
+ * @param {string} [attrOverride] - Custom name to use for the attribute
  * @returns {ng.DirectiveFactory}
  */
 function defineDirective(method, attrOverride) {
@@ -35117,6 +35054,7 @@ function defineDirective(method, attrOverride) {
     $injectTokens.$parse,
     $injectTokens.$state,
     $injectTokens.$sse,
+    $injectTokens.$animate,
   ];
   return directive;
 }
@@ -35136,15 +35074,11 @@ const ngPutDirective = defineDirective("put");
 /** @type {ng.DirectiveFactory} */
 const ngSseDirective = defineDirective("get", "ngSse");
 
-/**
- * @typedef {"click" | "change" | "submit"} EventType
- */
-
 /**
  * Selects DOM event to listen for based on the element type.
  *
  * @param {Element} element - The DOM element to inspect.
- * @returns {EventType} The name of the event to listen for.
+ * @returns {"click" | "change" | "submit"} The name of the event to listen for.
  */
 function getEventNameForElement(element) {
   const tag = element.tagName.toLowerCase();
@@ -35156,89 +35090,6 @@ function getEventNameForElement(element) {
   return "click";
 }
 
-/**
- * Handles DOM manipulation based on a swap strategy and server-rendered HTML.
- *
- * @param {string} html - The HTML string returned from the server.
- * @param {import("./interface.ts").SwapModeType} swap
- * @param {Element} target - The target DOM element to apply the swap to.
- * @param {ng.Scope} scope
- * @param {ng.CompileService} $compile
- */
-function handleSwapResponse(html, swap, target, scope, $compile) {
-  let nodes = [];
-  if (!["textcontent", "delete", "none"].includes(swap)) {
-    if (!html) {
-      return;
-    }
-
-    if (isObject(html)) {
-      scope.$merge(html);
-      return;
-    }
-
-    const compiled = $compile(html)(scope);
-    nodes =
-      compiled instanceof DocumentFragment
-        ? Array.from(compiled.childNodes)
-        : [compiled];
-  }
-
-  switch (swap) {
-    case "innerHTML":
-      target.replaceChildren(...nodes);
-      break;
-
-    case "outerHTML": {
-      const parent = target.parentNode;
-      if (!parent) return;
-      const frag = document.createDocumentFragment();
-      nodes.forEach((n) => frag.appendChild(n));
-      parent.replaceChild(frag, target);
-      break;
-    }
-
-    case "textContent":
-      target.textContent = html;
-      break;
-
-    case "beforebegin":
-      nodes.forEach((node) => target.parentNode.insertBefore(node, target));
-      break;
-
-    case "afterbegin":
-      nodes
-        .slice()
-        .reverse()
-        .forEach((node) => target.insertBefore(node, target.firstChild));
-      break;
-
-    case "beforeend":
-      nodes.forEach((node) => target.appendChild(node));
-      break;
-
-    case "afterend":
-      nodes
-        .slice()
-        .reverse()
-        .forEach((node) =>
-          target.parentNode.insertBefore(node, target.nextSibling),
-        );
-      break;
-
-    case "delete":
-      target.remove();
-      break;
-
-    case "none":
-      break;
-
-    default:
-      target.replaceChildren(...nodes);
-      break;
-  }
-}
-
 /**
  * Creates an HTTP directive factory that supports GET, DELETE, POST, PUT.
  *
@@ -35247,16 +35098,136 @@ function handleSwapResponse(html, swap, target, scope, $compile) {
  * @returns {ng.DirectiveFactory}
  */
 function createHttpDirective(method, attrName) {
+  let content = undefined;
+
   /**
    * @param {ng.HttpService} $http
    * @param {ng.CompileService} $compile
    * @param {ng.LogService} $log
    * @param {ng.ParseService} $parse
    * @param {ng.StateService} $state
-   * @param {Function} $sse
+   * @param {ng.SseService} $sse
    * @returns {ng.Directive}
    */
-  return function ($http, $compile, $log, $parse, $state, $sse) {
+  return function ($http, $compile, $log, $parse, $state, $sse, $animate) {
+    /**
+     * Handles DOM manipulation based on a swap strategy and server-rendered HTML.
+     *
+     * @param {string | Object} html - The HTML string or object returned from the server.
+     * @param {import("./interface.ts").SwapModeType} swap
+     * @param {ng.Scope} scope
+     * @param {ng.Attributes} attrs
+     * @param {Element} element
+     */
+    function handleSwapResponse(html, swap, scope, attrs, element) {
+      let animationEnabled = false;
+      if (attrs.animate) {
+        animationEnabled = true;
+      }
+      let nodes = [];
+      if (!["textcontent", "delete", "none"].includes(swap)) {
+        if (!html) return;
+        const compiled = $compile(html)(scope);
+        nodes =
+          compiled instanceof DocumentFragment
+            ? Array.from(compiled.childNodes)
+            : [compiled];
+      }
+
+      const targetSelector = attrs["target"];
+      const target = targetSelector
+        ? document.querySelector(targetSelector)
+        : element;
+
+      if (!target) {
+        $log.warn(`${attrName}: target "${targetSelector}" not found`);
+        return;
+      }
+
+      switch (swap) {
+        case "innerHTML":
+          if (animationEnabled) {
+            if (content) {
+              $animate.leave(content).done(() => {
+                content = nodes[0];
+                $animate.enter(nodes[0], target);
+                scope.$flushQueue();
+              });
+              scope.$flushQueue();
+            } else {
+              content = nodes[0];
+              $animate.enter(nodes[0], target);
+              scope.$flushQueue();
+            }
+          } else {
+            target.replaceChildren(...nodes);
+          }
+          break;
+
+        case "outerHTML": {
+          const parent = target.parentNode;
+          if (!parent) return;
+          const frag = document.createDocumentFragment();
+          nodes.forEach((n) => frag.appendChild(n));
+          if (animationEnabled) {
+            const placeholder = document.createComment("placeholder");
+            target.parentNode.insertBefore(placeholder, target.nextSibling);
+            $animate.leave(target).done(() => {
+              const insertedNodes = Array.from(frag.childNodes);
+              insertedNodes.forEach((n) =>
+                $animate.enter(n, parent, placeholder),
+              );
+              content = insertedNodes;
+              scope.$flushQueue();
+            });
+            scope.$flushQueue();
+          } else {
+            parent.replaceChild(frag, target);
+          }
+          break;
+        }
+
+        case "textContent":
+          target.textContent = html;
+          break;
+
+        case "beforebegin":
+          nodes.forEach((node) => target.parentNode.insertBefore(node, target));
+          break;
+
+        case "afterbegin":
+          nodes
+            .slice()
+            .reverse()
+            .forEach((node) => target.insertBefore(node, target.firstChild));
+          break;
+
+        case "beforeend":
+          nodes.forEach((node) => target.appendChild(node));
+          break;
+
+        case "afterend":
+          nodes
+            .slice()
+            .reverse()
+            .forEach((node) =>
+              target.parentNode.insertBefore(node, target.nextSibling),
+            );
+          break;
+
+        case "delete":
+          target.remove();
+          break;
+
+        case "none":
+          break;
+
+        default:
+          target.replaceChildren(...nodes);
+          break;
+      }
+    }
+
     /**
      * Collects form data from the element or its associated form.
      *
@@ -35270,15 +35241,12 @@ function createHttpDirective(method, attrName) {
       const tag = element.tagName.toLowerCase();
 
       if (tag === "form") {
-        /** @type {HTMLFormElement} */
         form = /** @type {HTMLFormElement} */ (element);
       } else if ("form" in element && element.form) {
-        /** @type {HTMLFormElement} */
         form = /** @type {HTMLFormElement} */ (element.form);
       } else if (element.hasAttribute("form")) {
         const formId = element.getAttribute("form");
         if (formId) {
-          /** @type {HTMLElement | null} */
           const maybeForm = document.getElementById(formId);
           if (maybeForm && maybeForm.tagName.toLowerCase() === "form") {
             form = /** @type {HTMLFormElement} */ (maybeForm);
@@ -35316,13 +35284,10 @@ function createHttpDirective(method, attrName) {
     return {
       restrict: "A",
       link(scope, element, attrs) {
-        const eventName =
-          attrs["trigger"] ||
-          /** @type {EventType} */ getEventNameForElement(element);
-
+        const eventName = attrs.trigger || getEventNameForElement(element);
         const tag = element.tagName.toLowerCase();
 
-        if (isDefined(attrs["latch"])) {
+        if (isDefined(attrs.latch)) {
           attrs.$observe(
             "latch",
             callBackAfterFirst(() =>
@@ -35338,24 +35303,14 @@ function createHttpDirective(method, attrName) {
           element.dispatchEvent(new Event(eventName));
           intervalId = setInterval(
             () => element.dispatchEvent(new Event(eventName)),
-            parseInt(attrs["interval"]) || 1000,
+            parseInt(attrs.interval) || 1000,
           );
         }
 
         element.addEventListener(eventName, async (event) => {
           if (/** @type {HTMLButtonElement} */ (element).disabled) return;
           if (tag === "form") event.preventDefault();
-          const swap = attrs["swap"] || "innerHTML";
-          const targetSelector = attrs["target"];
-          const target = targetSelector
-            ? document.querySelector(targetSelector)
-            : element;
-
-          if (!target) {
-            $log.warn(`${attrName}: target "${targetSelector}" not found`);
-            return;
-          }
-
+          const swap = attrs.swap || "innerHTML";
           const url = attrs[attrName];
           if (!url) {
             $log.warn(`${attrName}: no URL specified`);
@@ -35363,56 +35318,57 @@ function createHttpDirective(method, attrName) {
           }
 
           const handler = (res) => {
-            if (isDefined(attrs["loading"])) {
+            if (isDefined(attrs.loading)) {
               attrs.$set("loading", false);
             }
 
-            if (isDefined(attrs["loadingClass"])) {
-              attrs.$removeClass(attrs["loadingClass"]);
+            if (isDefined(attrs.loadingClass)) {
+              attrs.$removeClass(attrs.loadingClass);
             }
 
             const html = res.data;
             if (200 <= res.status && res.status <= 299) {
-              if (isDefined(attrs["success"])) {
-                $parse(attrs["success"])(scope, { $res: html });
+              if (isDefined(attrs.success)) {
+                $parse(attrs.success)(scope, { $res: html });
               }
 
-              if (isDefined(attrs["stateSuccess"])) {
-                $state.go(attrs["stateSuccess"]);
+              if (isDefined(attrs.stateSuccess)) {
+                $state.go(attrs.stateSuccess);
               }
             } else if (400 <= res.status && res.status <= 599) {
-              if (isDefined(attrs["error"])) {
-                $parse(attrs["error"])(scope, { $res: html });
+              if (isDefined(attrs.error)) {
+                $parse(attrs.error)(scope, { $res: html });
               }
 
-              if (isDefined(attrs["stateError"])) {
-                $state.go(attrs["stateError"]);
+              if (isDefined(attrs.stateError)) {
+                $state.go(attrs.stateError);
               }
             }
 
-            handleSwapResponse(
-              html,
-              /** @type {import("./interface.ts").SwapModeType} */ (swap),
-              target,
-              scope,
-              $compile,
-            );
+            if (isObject(html)) {
+              if (attrs.target) {
+                scope.$eval(`${attrs.target} = ${JSON.stringify(html)}`);
+              } else {
+                scope.$merge(html);
+              }
+            } else if (isString(html)) {
+              handleSwapResponse(html, swap, scope, attrs, element);
+            }
           };
-          if (isDefined(attrs["delay"])) {
-            await wait(parseInt(attrs["delay"]) | 0);
-          }
 
-          if (throttled) {
-            return;
+          if (isDefined(attrs.delay)) {
+            await wait(parseInt(attrs.delay) | 0);
           }
 
-          if (isDefined(attrs["throttle"])) {
+          if (throttled) return;
+
+          if (isDefined(attrs.throttle)) {
             throttled = true;
             attrs.$set("throttled", true);
             setTimeout(() => {
               attrs.$set("throttled", false);
               throttled = false;
-            }, parseInt(attrs["throttle"]));
+            }, parseInt(attrs.throttle));
           }
 
           if (isDefined(attrs["loading"])) {
@@ -35420,13 +35376,13 @@ function createHttpDirective(method, attrName) {
           }
 
           if (isDefined(attrs["loadingClass"])) {
-            attrs.$addClass(attrs["loadingClass"]);
+            attrs.$addClass(attrs.loadingClass);
           }
 
           if (method === "post" || method === "put") {
             let data;
             const config = {};
-            if (attrs["enctype"]) {
+            if (attrs.enctype) {
               config.headers = {
                 "Content-Type": attrs["enctype"],
               };
@@ -35436,11 +35392,10 @@ function createHttpDirective(method, attrName) {
             }
             $http[method](url, data, config).then(handler).catch(handler);
           } else {
-            // If SSE mode is enabled
-            if (method === "get" && attrs["ngSse"]) {
+            if (method === "get" && attrs.ngSse) {
               const sseUrl = url;
               const config = {
-                withCredentials: attrs["withCredentials"] === "true",
+                withCredentials: attrs.withCredentials === "true",
                 transformMessage: (data) => {
                   try {
                     return JSON.parse(data);
@@ -35450,9 +35405,9 @@ function createHttpDirective(method, attrName) {
                 },
                 onOpen: () => {
                   $log.info(`${attrName}: SSE connection opened to ${sseUrl}`);
-                  if (isDefined(attrs["loading"])) attrs.$set("loading", false);
-                  if (isDefined(attrs["loadingClass"]))
-                    attrs.$removeClass(attrs["loadingClass"]);
+                  if (isDefined(attrs.loading)) attrs.$set("loading", false);
+                  if (isDefined(attrs.loadingClass))
+                    attrs.$removeClass(attrs.loadingClass);
                 },
                 onMessage: (data) => {
                   const res = { status: 200, data };
@@ -35463,12 +35418,15 @@ function createHttpDirective(method, attrName) {
                   const res = { status: 500, data: err };
                   handler(res);
                 },
+                onReconnect: (count) => {
+                  $log.info(`ngSse: reconnected ${count} time(s)`);
+                  if (attrs.onReconnect)
+                    $parse(attrs.onReconnect)(scope, { $count: count });
+                },
               };
 
-              // Open the SSE connection using the injected service
               const source = $sse(sseUrl, config);
 
-              // Cleanup on scope destroy
               scope.$on("$destroy", () => {
                 $log.info(`${attrName}: closing SSE connection`);
                 source.close();
@@ -35483,7 +35441,6 @@ function createHttpDirective(method, attrName) {
           scope.$on("$destroy", () => clearInterval(intervalId));
         }
 
-        // Eagerly execute for 'load' event
         if (eventName == "load") {
           element.dispatchEvent(new Event("load"));
         }
@@ -35564,38 +35521,54 @@ function ngElDirective() {
  *   const source = $sse('/events', {
  *     onMessage: (data) => console.log(data),
  *     onError: (err) => console.error(err),
- *     withCredentials: true
+ *     retryDelay: 2000,
+ *     heartbeatTimeout: 10000,
  *   });
  *
- *   // later:
  *   source.close();
  */
-
 class SseProvider {
   constructor() {
     /**
      * Optional provider-level defaults
      * @type {ng.SseConfig}
      */
-    this.defaults = {};
+    this.defaults = {
+      retryDelay: 1000,
+      maxRetries: Infinity,
+      heartbeatTimeout: 15000, // 15 seconds
+      transformMessage(data) {
+        try {
+          return JSON.parse(data);
+        } catch {
+          return data;
+        }
+      },
+    };
   }
 
   /**
    * Returns the $sse service function
    * @returns {ng.SseService}
    */
-  $get =
-    () =>
-    (url, config = {}) => {
-      const finalUrl = this.#buildUrl(url, config.params);
-      return this.#createEventSource(finalUrl, config);
-    };
+  $get = [
+    $injectTokens.$log,
+    /** @param {ng.LogService} log */
+    (log) => {
+      this.$log = log;
+      return (url, config = {}) => {
+        const mergedConfig = { ...this.defaults, ...config };
+        const finalUrl = this.#buildUrl(url, mergedConfig.params);
+        return this.#createConnection(finalUrl, mergedConfig);
+      };
+    },
+  ];
 
   /**
    * Build URL with query parameters
-   * @param {string} url - Base URL
-   * @param {Record<string, any>=} params - Query parameters
-   * @returns {string} URL with serialized query string
+   * @param {string} url
+   * @param {Record<string, any>=} params
+   * @returns {string}
    */
   #buildUrl(url, params) {
     if (!params) return url;
@@ -35606,37 +35579,376 @@ class SseProvider {
   }
 
   /**
-   * Create and manage an EventSource
-   * @param {string} url - URL for SSE connection
-   * @param {ng.SseConfig} config - Configuration object
-   * @returns {EventSource} The EventSource instance wrapped as SseService
+   * Creates a managed SSE connection with reconnect and heartbeat
+   * @param {string} url
+   * @param {ng.SseConfig} config
+   * @returns {import("./interface.ts").SseConnection}
    */
-  #createEventSource(url, config) {
-    const es = new EventSource(url, {
-      withCredentials: !!config.withCredentials,
-    });
+  #createConnection(url, config) {
+    let es;
+    let retryCount = 0;
+    let closed = false;
+    let heartbeatTimer;
 
-    if (config.onOpen) {
-      es.addEventListener("open", (e) => config.onOpen(e));
-    }
+    const connect = () => {
+      if (closed) return;
 
-    es.addEventListener("message", (e) => {
-      let data = e.data;
-      try {
-        data = config.transformMessage
-          ? config.transformMessage(data)
-          : JSON.parse(data);
-      } catch {
-        // leave as raw string if not JSON
+      es = new EventSource(url, {
+        withCredentials: !!config.withCredentials,
+      });
+
+      es.addEventListener("open", (e) => {
+        retryCount = 0;
+        config.onOpen?.(e);
+        if (config.heartbeatTimeout) resetHeartbeat();
+      });
+
+      es.addEventListener("message", (e) => {
+        let data = e.data;
+        try {
+          data = config.transformMessage ? config.transformMessage(data) : data;
+        } catch {
+          /* empty */
+        }
+        config.onMessage?.(data, e);
+        if (config.heartbeatTimeout) resetHeartbeat();
+      });
+
+      es.addEventListener("error", (err) => {
+        config.onError?.(err);
+        if (closed) return;
+        es.close();
+
+        if (retryCount < config.maxRetries) {
+          retryCount++;
+          config.onReconnect?.(retryCount);
+          setTimeout(connect, config.retryDelay);
+        } else {
+          this.$log.warn("SSE: Max retries reached");
+        }
+      });
+    };
+
+    const resetHeartbeat = () => {
+      clearTimeout(heartbeatTimer);
+      heartbeatTimer = setTimeout(() => {
+        this.$log.warn("SSE: heartbeat timeout, reconnecting...");
+        es.close();
+        config.onReconnect?.(++retryCount);
+        connect();
+      }, config.heartbeatTimeout);
+    };
+
+    connect();
+
+    return {
+      close() {
+        closed = true;
+        clearTimeout(heartbeatTimer);
+        es.close();
+      },
+      connect() {
+        if (closed == false) {
+          close();
+        }
+        connect();
+      },
+    };
+  }
+}
+
+/**
+ * @returns {ng.Directive}
+ */
+function ngViewportDirective() {
+  return {
+    restrict: "A",
+    link(scope, element, attrs) {
+      const enterExpr = attrs["onEnter"];
+      const leaveExpr = attrs["onLeave"];
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              if (enterExpr) scope.$eval(enterExpr);
+            } else {
+              if (leaveExpr) scope.$eval(leaveExpr);
+            }
+          });
+        },
+        {
+          root: null, // viewport
+          threshold: 0.1, // consider "in view" if 10% visible
+        },
+      );
+
+      observer.observe(element);
+
+      // Clean up when the element is removed from DOM
+      const parent = element.parentNode;
+      let mutationObserver;
+      if (parent) {
+        mutationObserver = new MutationObserver((mutations) => {
+          for (const mutation of mutations) {
+            Array.from(mutation.removedNodes).forEach((removedNode) => {
+              if (removedNode === element) {
+                observer.disconnect();
+                mutationObserver.disconnect();
+              }
+            });
+          }
+        });
+        mutationObserver.observe(parent, { childList: true });
       }
-      config.onMessage?.(data, e);
-    });
 
-    if (config.onError) {
-      es.addEventListener("error", (e) => config.onError(e));
+      scope.$on("$destroy", () => {
+        observer.disconnect();
+        if (mutationObserver) mutationObserver.disconnect();
+      });
+    },
+  };
+}
+
+ngWorkerDirective.$inject = ["$worker", $injectTokens.$parse, $injectTokens.$log];
+/**
+ * ngWorker directive factory
+ * Usage: <div ng-worker="workerName" data-params="{{ expression }}" data-on-result="callback($result)"></div>
+ */
+function ngWorkerDirective($worker, $parse, $log) {
+  return {
+    restrict: "A",
+    link(scope, element, attrs) {
+      const workerName = attrs.ngWorker;
+      if (!workerName) {
+        $log.warn("ngWorker: missing worker name");
+        return;
+      }
+
+      const eventName = attrs.trigger || getEventNameForElement(element);
+
+      let throttled = false;
+      let intervalId;
+
+      if (isDefined(attrs.latch)) {
+        attrs.$observe(
+          "latch",
+          callBackAfterFirst(() => element.dispatchEvent(new Event(eventName))),
+        );
+      }
+
+      if (isDefined(attrs.interval)) {
+        element.dispatchEvent(new Event(eventName));
+        intervalId = setInterval(
+          () => element.dispatchEvent(new Event(eventName)),
+          parseInt(attrs.interval) || 1000,
+        );
+      }
+
+      const worker = $worker(workerName, {
+        onMessage: (result) => {
+          if (isDefined(attrs.dataOnResult)) {
+            $parse(attrs.dataOnResult)(scope, { $result: result });
+          } else {
+            const swap = attrs.swap || "innerHTML";
+            handleSwap(result, swap, element);
+          }
+        },
+        onError: (err) => {
+          $log.error(`[ng-worker:${workerName}]`, err);
+          if (isDefined(attrs.dataOnError)) {
+            $parse(attrs.dataOnError)(scope, { $error: err });
+          } else {
+            element.textContent = "Error";
+          }
+        },
+      });
+
+      element.addEventListener(eventName, async () => {
+        if (element.disabled) return;
+
+        if (isDefined(attrs.delay)) {
+          await wait(parseInt(attrs.delay) || 0);
+        }
+
+        if (throttled) return;
+
+        if (isDefined(attrs.throttle)) {
+          throttled = true;
+          attrs.$set("throttled", true);
+          setTimeout(() => {
+            attrs.$set("throttled", false);
+            throttled = false;
+          }, parseInt(attrs.throttle));
+        }
+
+        let params;
+        try {
+          params = attrs.params ? scope.$eval(attrs.params) : undefined;
+        } catch (err) {
+          $log.error("ngWorker: failed to evaluate data-params", err);
+          params = undefined;
+        }
+
+        worker.post(params);
+      });
+
+      if (intervalId) {
+        scope.$on("$destroy", () => clearInterval(intervalId));
+      }
+
+      if (eventName === "load") {
+        element.dispatchEvent(new Event("load"));
+      }
+    },
+  };
+}
+
+/**
+ * Swap result into DOM based on strategy
+ */
+function handleSwap(result, swap, element) {
+  switch (swap) {
+    case "outerHTML": {
+      const parent = element.parentNode;
+      if (!parent) return;
+      const temp = document.createElement("div");
+      temp.innerHTML = result;
+      parent.replaceChild(temp.firstChild, element);
+      break;
     }
+    case "textContent":
+      element.textContent = result;
+      break;
+    case "beforebegin":
+      element.insertAdjacentHTML("beforebegin", result);
+      break;
+    case "afterbegin":
+      element.insertAdjacentHTML("afterbegin", result);
+      break;
+    case "beforeend":
+      element.insertAdjacentHTML("beforeend", result);
+      break;
+    case "afterend":
+      element.insertAdjacentHTML("afterend", result);
+      break;
+    case "innerHTML":
+    default:
+      element.innerHTML = result;
+      break;
+  }
+}
 
-    return es;
+/**
+ * Worker Provider
+ *
+ * Usage:
+ *   const worker = $worker('./math.worker.js', {
+ *     onMessage: (data) => console.log('Result:', data),
+ *     onError: (err) => console.error('Worker error:', err),
+ *     autoTerminate: false,
+ *     transformMessage: (d) => d,
+ *   });
+ *
+ *   worker.post({ action: 'fib', n: 20 });
+ *   worker.terminate();
+ */
+class WorkerProvider {
+  /**
+   * @type {ng.LogService}
+   */
+  $log;
+  constructor() {
+    /**
+     * Optional provider-level defaults
+     * @type {ng.WorkerConfig}
+     */
+    this.defaults = {
+      autoTerminate: false,
+      transformMessage(data) {
+        try {
+          return JSON.parse(data);
+        } catch {
+          return data;
+        }
+      },
+    };
+  }
+
+  /**
+   * Returns the $worker service function
+   * @returns {ng.WorkerService}
+   */
+  $get = [
+    $injectTokens.$log,
+    /** @param {ng.LogService} log */
+    (log) => {
+      this.$log = log;
+      return (scriptPath, config = {}) => {
+        const merged = { ...this.defaults, ...config };
+        return this.#createWorker(scriptPath, merged);
+      };
+    },
+  ];
+
+  /**
+   * Creates a managed Web Worker instance
+   * @param {string | URL} scriptPath
+   * @param {ng.WorkerConfig} config
+   * @returns {import("./interface.ts").WorkerConnection}
+   */
+  #createWorker(scriptPath, config) {
+    if (!scriptPath) throw new Error("Worker script path required");
+
+    let worker = new Worker(scriptPath, { type: "module" });
+    let terminated = false;
+
+    const reconnect = () => {
+      if (terminated) return;
+      this.$log.info("Worker: restarting...");
+      worker.terminate();
+      worker = new Worker(scriptPath, { type: "module" });
+      wire(worker);
+    };
+
+    const wire = (w) => {
+      w.onmessage = (e) => {
+        let data = e.data;
+        try {
+          data = config.transformMessage ? config.transformMessage(data) : data;
+        } catch {
+          /* no-op */
+        }
+        config.onMessage?.(data, e);
+      };
+
+      w.onerror = (err) => {
+        config.onError?.(err);
+        if (config.autoRestart) reconnect();
+      };
+    };
+
+    wire(worker);
+    let that = this;
+    return {
+      post(data) {
+        if (terminated) return that.$log.warn("Worker already terminated");
+        try {
+          worker.postMessage(data);
+        } catch (err) {
+          that.$log.error("Worker post failed", err);
+        }
+      },
+      terminate() {
+        terminated = true;
+        worker.terminate();
+      },
+      restart() {
+        if (terminated)
+          return that.$log.warn("Worker cannot restart after terminate");
+        reconnect();
+      },
+    };
   }
 }
 
@@ -35652,7 +35964,7 @@ function registerNgModule(angular) {
       [],
       [
         $injectTokens.$provide,
-        /** @param {import("./interface.js").Provider} $provide */
+        /** @param {import("./interface.ts").Provider} $provide */
         ($provide) => {
           // $$sanitizeUriProvider needs to be before $compileProvider as it is used by it.
           $provide.provider({
@@ -35717,6 +36029,8 @@ function registerNgModule(angular) {
               maxlength: maxlengthDirective,
               ngValue: ngValueDirective,
               ngModelOptions: ngModelOptionsDirective,
+              ngViewport: ngViewportDirective,
+              ngWorker: ngWorkerDirective,
             })
             .directive({
               input: hiddenInputBrowserCacheDirective,
@@ -35784,6 +36098,7 @@ function registerNgModule(angular) {
             $url: UrlService,
             $stateRegistry: StateRegistryProvider,
             $eventBus: PubSubProvider,
+            $worker: WorkerProvider,
           });
         },
       ],
@@ -35815,7 +36130,7 @@ class Angular {
     /**
      * @type {string} `version` from `package.json`
      */
-    this.version = "0.9.8"; //inserted via rollup plugin
+    this.version = "0.10.0"; //inserted via rollup plugin
 
     /** @type {!Array<string|any>} */
     this.bootsrappedModules = [];
@@ -35908,10 +36223,10 @@ class Angular {
       $injectTokens.$compile,
       $injectTokens.$injector,
       /**
-       * @param {import('./core/scope/scope.js').Scope} scope
+       * @param {ng.Scope} scope
        * @param {Element} el
-       * @param {import("./core/compile/compile.js").CompileFn} compile
-       * @param {import("./core/di/internal-injector.js").InjectorService} $injector
+       * @param {ng.CompileService} compile
+       * @param {ng.InjectorService} $injector
        */
       (scope, el, compile, $injector) => {
         // ng-route deps
@@ -36038,7 +36353,7 @@ class Angular {
    * @param {string} name The name of the module to create or retrieve.
    * @param {Array.<string>} [requires] If specified then new module is being created. If
    *        unspecified then the module is being retrieved for further configuration.
-   * @param {import("./interface.js").Injectable<any>} [configFn] Optional configuration function for the module that gets
+   * @param {import("./interface.ts").Injectable<any>} [configFn] Optional configuration function for the module that gets
    *        passed to {@link NgModule.config NgModule.config()}.
    * @returns {NgModule} A newly registered module.
    */