@angular-wave/angular.ts 0.7.7 → 0.8.0

package/src/directive/validators/validators.js

@@ -1,7 +1,6 @@
 import {
   isNumberNaN,
   isString,
-  toInt,
   minErr,
   isUndefined,
   isProxy,
@@ -9,6 +8,7 @@ import {
 } from "../../shared/utils.js";
 import { REGEX_STRING_REGEXP } from "./../attrs/attrs.js";
 import { startingTag } from "../../shared/dom.js";
+import { $injectTokens as $t } from "../../injection-tokens.js";
 
 /**
  *
@@ -34,7 +34,7 @@ import { startingTag } from "../../shared/dom.js";
  *
  */
 export const requiredDirective = [
-  "$parse",
+  $t.$parse,
   /**
    * @param {import("../../core/parse/interface.ts").ParseService} $parse
    * @returns {import("../../interface.ts").Directive}
@@ -116,75 +116,72 @@ export const requiredDirective = [
  * </div>
  */
 export const patternDirective = [
-  "$parse",
+  $t.$parse,
   /**
    * @param {import("../../core/parse/interface.ts").ParseService} $parse
    * @returns {import("../../interface.ts").Directive}
    */
-  ($parse) => {
-    return {
-      restrict: "A",
-      require: "?ngModel",
-      compile: (_Elm, tAttr) => {
-        let patternExp;
-        let parseFn;
+  ($parse) => ({
+    restrict: "A",
+    require: "?ngModel",
+    compile: (_Elm, tAttr) => {
+      let patternExp;
+      let parseFn;
 
-        if (tAttr["ngPattern"]) {
-          patternExp = tAttr["ngPattern"];
+      if (tAttr["ngPattern"]) {
+        patternExp = tAttr["ngPattern"];
 
-          // ngPattern might be a scope expression, or an inlined regex, which is not parsable.
-          // We get value of the attribute here, so we can compare the old and the new value
-          // in the observer to avoid unnecessary validations
-          if (
-            tAttr["ngPattern"].charAt(0) === "/" &&
-            REGEX_STRING_REGEXP.test(tAttr["ngPattern"])
-          ) {
-            parseFn = function () {
-              return tAttr["ngPattern"];
-            };
-          } else {
-            parseFn = $parse(tAttr["ngPattern"]);
-          }
+        // ngPattern might be a scope expression, or an inlined regex, which is not parsable.
+        // We get value of the attribute here, so we can compare the old and the new value
+        // in the observer to avoid unnecessary validations
+        if (
+          tAttr["ngPattern"].charAt(0) === "/" &&
+          REGEX_STRING_REGEXP.test(tAttr["ngPattern"])
+        ) {
+          parseFn = function () {
+            return tAttr["ngPattern"];
+          };
+        } else {
+          parseFn = $parse(tAttr["ngPattern"]);
         }
+      }
 
-        return function (scope, elm, attr, ctrl) {
-          if (!ctrl) return;
-
-          let attrVal = attr["pattern"];
+      return function (scope, elm, attr, ctrl) {
+        if (!ctrl) return;
+        let attrVal = attr["pattern"];
 
-          if (attr["ngPattern"]) {
-            attrVal = parseFn(scope);
-          } else {
-            patternExp = attr["pattern"];
-          }
+        if (attr["ngPattern"]) {
+          attrVal = parseFn(scope);
+        } else {
+          patternExp = attr["pattern"];
+        }
 
-          let regexp = parsePatternAttr(attrVal, patternExp, elm);
-          attr.$observe("pattern", function (newVal) {
-            const oldRegexp = regexp;
+        let regexp = parsePatternAttr(attrVal, patternExp, elm);
+        attr.$observe("pattern", (newVal) => {
+          const oldRegexp = regexp;
 
-            regexp = parsePatternAttr(newVal, patternExp, elm);
+          regexp = parsePatternAttr(newVal, patternExp, elm);
 
-            if (
-              (oldRegexp && oldRegexp.toString()) !==
-              (regexp && regexp.toString())
-            ) {
-              ctrl["$validate"]();
-            }
-          });
+          if (
+            (oldRegexp && oldRegexp.toString()) !==
+            (regexp && regexp.toString())
+          ) {
+            ctrl["$validate"]();
+          }
+        });
 
-          ctrl["$validators"]["pattern"] = function (modelValue, viewValue) {
-            // HTML5 pattern constraint validates the input value, so we validate the viewValue
-            return (
-              // @ts-ignore
-              ctrl.$isEmpty(viewValue) ||
-              isUndefined(regexp) ||
-              regexp.test(viewValue)
-            );
-          };
+        ctrl["$validators"]["pattern"] = (_modelValue, viewValue) => {
+          // HTML5 pattern constraint validates the input value, so we validate the viewValue
+          return (
+            // @ts-ignore
+            ctrl.$isEmpty(viewValue) ||
+            isUndefined(regexp) ||
+            regexp.test(viewValue)
+          );
         };
-      },
-    };
-  },
+      };
+    },
+  }),
 ];
 
 /**
@@ -218,7 +215,7 @@ export const patternDirective = [
  *
  */
 export const maxlengthDirective = [
-  "$parse",
+  $t.$parse,
   /**
    * @param {import("../../core/parse/interface.ts").ParseService} $parse
    * @returns {import("../../interface.ts").Directive}
@@ -290,32 +287,28 @@ export const maxlengthDirective = [
  *
  */
 export const minlengthDirective = [
-  "$parse",
-  function ($parse) {
-    return {
-      restrict: "A",
-      require: "?ngModel",
-      link(scope, elm, attr, ctrl) {
-        if (!ctrl) return;
+  $t.$parse,
+  ($parse) => ({
+    restrict: "A",
+    require: "?ngModel",
+    link(scope, elm, attr, ctrl) {
+      if (!ctrl) return;
 
-        let minlength = attr.minlength || $parse(attr.ngMinlength)(scope);
-        let minlengthParsed = parseLength(minlength) || -1;
+      let minlength = attr.minlength || $parse(attr.ngMinlength)(scope);
+      let minlengthParsed = parseLength(minlength) || -1;
 
-        attr.$observe("minlength", (value) => {
-          if (minlength !== value) {
-            minlengthParsed = parseLength(value) || -1;
-            minlength = value;
-            ctrl.$validate();
-          }
-        });
-        ctrl.$validators.minlength = function (modelValue, viewValue) {
-          return (
-            ctrl.$isEmpty(viewValue) || viewValue.length >= minlengthParsed
-          );
-        };
-      },
-    };
-  },
+      attr.$observe("minlength", (value) => {
+        if (minlength !== value) {
+          minlengthParsed = parseLength(value) || -1;
+          minlength = value;
+          ctrl.$validate();
+        }
+      });
+      ctrl.$validators.minlength = function (modelValue, viewValue) {
+        return ctrl.$isEmpty(viewValue) || viewValue.length >= minlengthParsed;
+      };
+    },
+  }),
 ];
 
 function parsePatternAttr(regex, patternExp, elm) {
@@ -326,7 +319,12 @@ function parsePatternAttr(regex, patternExp, elm) {
   }
 
   if (isString(regex)) {
-    regex = new RegExp(`^${regex}$`);
+    const match = regex.match(/^\/(.*)\/([gimsuy]*)$/);
+    if (match) {
+      regex = new RegExp(match[1], match[2]);
+    } else {
+      regex = new RegExp(`^${regex}$`);
+    }
   }
 
   if (!regex.test) {
@@ -343,6 +341,6 @@ function parsePatternAttr(regex, patternExp, elm) {
 }
 
 function parseLength(val) {
-  const intVal = toInt(val);
+  const intVal = parseInt(val, 10);
   return isNumberNaN(intVal) ? -1 : intVal;
 }

package/src/directive/validators/validators.spec.js

@@ -1,6 +1,6 @@
-import { Angular } from "../../loader.js";
+import { Angular } from "../../angular.js";
 import { wait } from "../../shared/test-utils.js";
-import { getController } from "../../shared/dom.js";
+import { dealoc, getController } from "../../shared/dom.js";
 
 describe("validators", () => {
   let $rootScope;
@@ -9,6 +9,7 @@ describe("validators", () => {
   let errors = [];
 
   beforeEach(() => {
+    dealoc(document.getElementById("app"));
     errors = [];
     window.angular = new Angular();
     window.angular
@@ -27,7 +28,7 @@ describe("validators", () => {
   });
 
   describe("pattern", () => {
-    it("should validate in-lined pattern", () => {
+    it("should validate in-lined pattern", async () => {
       inputElm = $compile(
         '<input type="text" ng-model="value" ng-pattern="/^\\d\\d\\d-\\d\\d-\\d\\d\\d\\d$/" />',
       )($rootScope);
@@ -246,7 +247,7 @@ describe("validators", () => {
       inputElm.dispatchEvent(new Event("change"));
       expect($rootScope.form.test.$error.pattern).toBe(true);
       expect(inputElm.classList.contains("ng-invalid")).toBeTrue();
-
+      //
       inputElm.setAttribute("value", "12345");
       inputElm.dispatchEvent(new Event("change"));
       expect($rootScope.form.test.$error.pattern).toBe(true);

package/src/directive/validators/validators.test.js

@@ -5,6 +5,7 @@ const TEST_URL = "src/directive/validators/validators.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);
   await page.content();
+  await page.waitForTimeout(3000);
   await expect(page.locator(".jasmine-overall-result")).toHaveText(
     /0 failures/,
   );

package/src/filters/filter.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../loader.js";
+import { Angular } from "../angular.js";
 import { createInjector } from "../core/di/injector.js";
 import { isString, includes } from "../shared/utils.js";
 import { createElementFromHTML } from "../shared/dom.js";

package/src/filters/filters.spec.js

@@ -1,4 +1,4 @@
-import { Angular } from "../loader.js";
+import { Angular } from "../angular.js";
 import { createInjector } from "../core/di/injector.js";
 import { toJson } from "../shared/utils.js";
 

package/src/filters/limit-to.js

@@ -4,7 +4,6 @@ import {
   isNumber,
   isNumberNaN,
   isString,
-  toInt,
 } from "../shared/utils.js";
 
 /**
@@ -23,7 +22,7 @@ export function limitToFilter() {
     if (Math.abs(Number(limit)) === Infinity) {
       limit = Number(limit);
     } else {
-      limit = toInt(/** @type {string} */ (limit));
+      limit = parseInt(/** @type {string} */ (limit), 10);
     }
     if (isNumberNaN(limit)) return input;
 
@@ -33,7 +32,7 @@ export function limitToFilter() {
     begin =
       !begin || isNaN(/** @type {any} */ (begin))
         ? 0
-        : toInt(/** @type {string} */ (begin));
+        : parseInt(/** @type {string} */ (begin), 10);
     begin =
       begin < 0 ? Math.max(0, /** @type {[]} */ (input).length + begin) : begin;
 

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

@@ -1,4 +1,4 @@
-import { Angular } from "../loader.js";
+import { Angular } from "../angular.js";
 import { createInjector } from "../core/di/injector.js";
 import { createElementFromHTML } from "../shared/dom.js";
 

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

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

package/src/index.js

@@ -1,4 +1,4 @@
-import { Angular } from "./loader.js";
+import { Angular } from "./angular.js";
 
 export const angular = new Angular();
 document.addEventListener("DOMContentLoaded", () => angular.init(document), {

package/src/injection-tokens.js

@@ -16,6 +16,9 @@
  * @type Readonly<Record<string, string>>
  */
 export const $injectTokens = Object.freeze({
+  $attrs: "$attrs",
+  $scope: "$scope",
+  $element: "$element",
   $$AnimateRunner: "$$AnimateRunner",
   $$animateAsyncRun: "$$animateAsyncRun",
   $$animateCache: "$$animateCache",
@@ -30,7 +33,7 @@ export const $injectTokens = Object.freeze({
   $animate: "$animate",
   $animateCss: "$animateCss",
   $aria: "$aria",
-  $browser: "$browser",
+  $compile: "$compile",
   $controller: "$controller",
   $eventBus: "$eventBus",
   $exceptionHandler: "$exceptionHandler",
@@ -44,6 +47,7 @@ export const $injectTokens = Object.freeze({
   $ngViewScroll: "$ngViewScroll",
   $parse: "$parse",
   $rootScope: "$rootScope",
+  $rootElement: "$rootElement",
   $routerGlobals: "$routerGlobals",
   $sce: "$sce",
   $sceDelegate: "$sceDelegate",
@@ -54,7 +58,7 @@ export const $injectTokens = Object.freeze({
   $templateRequest: "$templateRequest",
   $transitions: "$transitions",
   $urlConfig: "$urlConfig",
-  $urlService: "$urlService",
+  $url: "$url",
   $view: "$view",
   // provide literals
   $provide: "$provide",

package/src/interface.ts

@@ -1,8 +1,11 @@
 import { Attributes } from "./core/compile/attributes.js";
 import { Scope } from "./core/scope/scope.js";
+export * from "./core/di/ng-module.js";
 export * from "./services/http/interface.ts";
 export * from "./services/log/interface.ts";
 export * from "./services/log/log.js";
+export * from "./services/location/interface.ts";
+export * from "./services/location/location.js";
 export * from "./services/pubsub/pubsub.js";
 export * from "./services/template-cache/interface.ts";
 export * from "./services/template-cache/template-cache.js";
@@ -62,47 +65,66 @@ export interface ServiceProvider {
  * services, factories, constants, values, decorators, etc.
  */
 export interface Provider {
+  /**
+   * Register a directive
+   * @param name - The name of the directive.
+   * @param directive - An object with a `$get` property that defines how the service is created.
+   */
+  directive(name: string, directive: DirectiveFactory): Provider;
+
+  /**
+   * Register multiple directives
+   * @param obj
+   */
+  directive(obj: Record<string, DirectiveFactory>): Provider;
+
   /**
    * Register a service provider.
    * @param name - The name of the service.
    * @param provider - An object with a `$get` property that defines how the service is created.
    */
-  provider(name: string, provider: ServiceProvider): ServiceProvider;
+  provider(name: string, provider: Function): Provider;
+
+  /**
+   * Register multiple service providers
+   * @param obj
+   */
+  provider(obj: Record<string, Function>): Provider;
 
   /**
    * Register a factory function to create a service.
    * @param name - The name of the service.
    * @param factoryFn - A function (or annotated array) that returns the service instance.
    */
-  factory(name: string, factoryFn: Injectable): ServiceProvider;
+  factory(name: string, factoryFn: Injectable): Provider;
 
   /**
    * Register a constructor function to create a service.
    * @param name - The name of the service.
    * @param constructor - A class or function to instantiate.
    */
-  service(name: string, constructor: Injectable): ServiceProvider;
+  service(name: string, constructor: Injectable): Provider;
 
   /**
    * Register a fixed value as a service.
    * @param name - The name of the service.
    * @param val - The value to use.
    */
-  value(name: string, val: any): ServiceProvider;
+  value(name: string, val: any): Provider;
 
   /**
    * Register a constant value (available during config).
    * @param name - The name of the constant.
    * @param val - The constant value.
    */
-  constant(name: string, val: any): void;
+  constant(name: string, val: any): Provider;
 
   /**
    * Register a decorator function to modify or replace an existing service.
    * @param name - The name of the service to decorate.
    * @param fn - A function that takes `$delegate` and returns a decorated service.
    */
-  decorator(name: string, fn: Injectable): void;
+  decorator(name: string, fn: Function): Provider;
 }
 
 /**
@@ -247,15 +269,19 @@ export interface Directive {
   /** Template URL for loading from server */
   templateUrl?: string | ((element: Element, attrs: Attributes) => string);
   /** Enables transclusion or configures named slots */
-  transclude?: boolean | "element" | Record<string, string>;
+  transclude?: boolean | string | Record<string, string>;
   /** Internal hook for directive compilation state */
   $$addStateInfo?: (...args: any[]) => any;
+  count?: number;
 }
 
-/**
- * A factory function returning a directive definition.
- */
-export type DirectiveFactory = (...args: any[]) => Directive | DirectiveLinkFn;
+export type DirectiveFactoryFn = (
+  ...args: any[]
+) => Directive | DirectiveLinkFn;
+
+export type AnnotatedDirectiveFactory = Array<string | DirectiveFactoryFn>;
+
+export type DirectiveFactory = DirectiveFactoryFn | AnnotatedDirectiveFactory;
 
 /**
  * Represents advanced transclusion functions used in directives.
@@ -339,14 +365,39 @@ export interface NgModelController {
   /** Current value shown in the view */
   $viewValue: any;
 }
-
 /**
  * Possible values for `data-swap` attribute
  */
-export type SwapInsertPosition =
-  | InsertPosition
-  | "textContent"
-  | "innerHTML"
-  | "outerHTML"
-  | "delete"
-  | "none";
+export const SwapMode = {
+  /** (default) Replaces the contents inside the element */
+  innerHTML: "innerHTML",
+
+  /** Replaces the entire element, including the tag itself */
+  outerHTML: "outerHTML",
+
+  /** Inserts plain text (without parsing HTML) */
+  textContent: "textContent",
+
+  /** Inserts HTML immediately before the element itself */
+  beforebegin: "beforebegin",
+
+  /** Inserts HTML inside the element, before its first child */
+  afterbegin: "afterbegin",
+
+  /** Inserts HTML inside the element, after its last child */
+  beforeend: "beforeend",
+
+  /** Inserts HTML immediately after the element itself */
+  afterend: "afterend",
+
+  /** Removes the element entirely */
+  delete: "delete",
+
+  /** Performs no insertion (no-op) */
+  none: "none",
+} as const;
+
+/**
+ * Union type representing all possible DOM insertion modes.
+ */
+export type SwapModeType = keyof typeof SwapMode;