@angular-wave/angular.ts 0.0.69 → 0.0.71

package/src/directive/aria/aria.js

@@ -0,0 +1,382 @@
+import { extend } from "../../shared/utils";
+
+const ARIA_DISABLE_ATTR = "ngAriaDisable";
+
+/**
+ * Internal Utilities
+ */
+const nativeAriaNodeNames = [
+  "BUTTON",
+  "A",
+  "INPUT",
+  "TEXTAREA",
+  "SELECT",
+  "DETAILS",
+  "SUMMARY",
+];
+
+const isNodeOneOf = function (elem, nodeTypeArray) {
+  if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
+    return true;
+  }
+};
+/**
+ * @ngdoc provider
+ * @name $ariaProvider
+ *
+ *
+ * @description
+ *
+ * Used for configuring the ARIA attributes injected and managed by ngAria.
+ *
+ * ```js
+ * angular.module('myApp', ['ngAria'], function config($ariaProvider) {
+ *   $ariaProvider.config({
+ *     ariaValue: true,
+ *     tabindex: false
+ *   });
+ * });
+ *```
+ *
+ * ## Dependencies
+ * Requires the {@link ngAria} module to be installed.
+ *
+ */
+export function AriaProvider() {
+  let config = {
+    ariaHidden: true,
+    ariaChecked: true,
+    ariaReadonly: true,
+    ariaDisabled: true,
+    ariaRequired: true,
+    ariaInvalid: true,
+    ariaValue: true,
+    tabindex: true,
+    bindKeydown: true,
+    bindRoleForClick: true,
+  };
+
+  this.config = function (newConfig) {
+    config = extend(config, newConfig);
+  };
+
+  function watchExpr(attrName, ariaAttr, nativeAriaNodeNames, negate) {
+    return function (scope, elem, attr) {
+      if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+
+      const ariaCamelName = attr.$normalize(ariaAttr);
+      if (
+        config[ariaCamelName] &&
+        !isNodeOneOf(elem, nativeAriaNodeNames) &&
+        !attr[ariaCamelName]
+      ) {
+        scope.$watch(attr[attrName], (boolVal) => {
+          // ensure boolean value
+          boolVal = negate ? !boolVal : !!boolVal;
+          elem.attr(ariaAttr, boolVal);
+        });
+      }
+    };
+  }
+
+  this.$get = function () {
+    return {
+      config(key) {
+        return config[key];
+      },
+      $$watchExpr: watchExpr,
+    };
+  };
+}
+
+ngDisabledAriaDirective.$inject = ["$aria"];
+export function ngDisabledAriaDirective($aria) {
+  return $aria.$$watchExpr(
+    "ngDisabled",
+    "aria-disabled",
+    nativeAriaNodeNames,
+    false,
+  );
+}
+
+ngShowAriaDirective.$inject = ["$aria"];
+export function ngShowAriaDirective($aria) {
+  return $aria.$$watchExpr("ngShow", "aria-hidden", [], true);
+}
+
+export function ngMessagesAriaDirective() {
+  return {
+    restrict: "A",
+    require: "?ngMessages",
+    link(_scope, elem, attr) {
+      if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+
+      if (!elem.attr("aria-live")) {
+        elem.attr("aria-live", "assertive");
+      }
+    },
+  };
+}
+
+ngClickAriaDirective.$inject = ["$aria", "$parse"];
+export function ngClickAriaDirective($aria, $parse) {
+  return {
+    restrict: "A",
+    compile(elem, attr) {
+      if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+
+      const fn = $parse(attr.ngClick);
+      return function (scope, elem, attr) {
+        if (!isNodeOneOf(elem, nativeAriaNodeNames)) {
+          if ($aria.config("bindRoleForClick") && !elem.attr("role")) {
+            elem.attr("role", "button");
+          }
+
+          if ($aria.config("tabindex") && !elem.attr("tabindex")) {
+            elem.attr("tabindex", 0);
+          }
+
+          if (
+            $aria.config("bindKeydown") &&
+            !attr.ngKeydown &&
+            !attr.ngKeypress &&
+            !attr.ngKeyup
+          ) {
+            elem.on("keydown", (event) => {
+              const keyCode = event.which || event.keyCode;
+
+              if (keyCode === 13 || keyCode === 32) {
+                // If the event is triggered on a non-interactive element ...
+                if (
+                  nativeAriaNodeNames.indexOf(event.target.nodeName) === -1 &&
+                  !event.target.isContentEditable
+                ) {
+                  // ... prevent the default browser behavior (e.g. scrolling when pressing spacebar)
+                  // See https://github.com/angular/angular.js/issues/16664
+                  event.preventDefault();
+                }
+                scope.$apply(callback);
+              }
+
+              function callback() {
+                fn(scope, { $event: event });
+              }
+            });
+          }
+        }
+      };
+    },
+  };
+}
+
+ngRequiredAriaDirective.$inject = ["$aria"];
+export function ngRequiredAriaDirective($aria) {
+  return $aria.$$watchExpr(
+    "ngRequired",
+    "aria-required",
+    nativeAriaNodeNames,
+    false,
+  );
+}
+
+ngCheckedAriaDirective.$inject = ["$aria"];
+export function ngCheckedAriaDirective($aria) {
+  return $aria.$$watchExpr(
+    "ngChecked",
+    "aria-checked",
+    nativeAriaNodeNames,
+    false,
+  );
+}
+
+ngValueAriaDirective.$inject = ["$aria"];
+export function ngValueAriaDirective($aria) {
+  return $aria.$$watchExpr(
+    "ngValue",
+    "aria-checked",
+    nativeAriaNodeNames,
+    false,
+  );
+}
+
+ngHideAriaDirective.$inject = ["$aria"];
+export function ngHideAriaDirective($aria) {
+  return $aria.$$watchExpr("ngHide", "aria-hidden", [], false);
+}
+
+ngReadonlyAriaDirective.$inject = ["$aria"];
+export function ngReadonlyAriaDirective($aria) {
+  return $aria.$$watchExpr(
+    "ngReadonly",
+    "aria-readonly",
+    nativeAriaNodeNames,
+    false,
+  );
+}
+
+ngModelAriaDirective.$inject = ["$aria"];
+export function ngModelAriaDirective($aria) {
+  function shouldAttachAttr(attr, normalizedAttr, elem, allowNonAriaNodes) {
+    return (
+      $aria.config(normalizedAttr) &&
+      !elem.attr(attr) &&
+      (allowNonAriaNodes || !isNodeOneOf(elem, nativeAriaNodeNames)) &&
+      (elem.attr("type") !== "hidden" || elem[0].nodeName !== "INPUT")
+    );
+  }
+
+  function shouldAttachRole(role, elem) {
+    // if element does not have role attribute
+    // AND element type is equal to role (if custom element has a type equaling shape) <-- remove?
+    // AND element is not in nativeAriaNodeNames
+    return (
+      !elem.attr("role") &&
+      elem.attr("type") === role &&
+      !isNodeOneOf(elem, nativeAriaNodeNames)
+    );
+  }
+
+  function getShape(attr) {
+    const { type } = attr;
+    const { role } = attr;
+
+    return (type || role) === "checkbox" || role === "menuitemcheckbox"
+      ? "checkbox"
+      : (type || role) === "radio" || role === "menuitemradio"
+        ? "radio"
+        : type === "range" || role === "progressbar" || role === "slider"
+          ? "range"
+          : "";
+  }
+
+  return {
+    restrict: "A",
+    require: "ngModel",
+    priority: 200, // Make sure watches are fired after any other directives that affect the ngModel value
+    compile(elem, attr) {
+      if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+
+      const shape = getShape(attr);
+
+      return {
+        post(scope, elem, attr, ngModel) {
+          const needsTabIndex = shouldAttachAttr(
+            "tabindex",
+            "tabindex",
+            elem,
+            false,
+          );
+
+          function ngAriaWatchModelValue() {
+            return ngModel.$modelValue;
+          }
+
+          function getRadioReaction() {
+            // Strict comparison would cause a BC
+            elem[0].setAttribute(
+              "aria-checked",
+              (attr.value == ngModel.$viewValue).toString(),
+            );
+          }
+
+          function getCheckboxReaction() {
+            elem.attr(
+              "aria-checked",
+              (!ngModel.$isEmpty(ngModel.$viewValue)).toString(),
+            );
+          }
+
+          switch (shape) {
+            case "radio":
+            case "checkbox":
+              if (shouldAttachRole(shape, elem)) {
+                elem.attr("role", shape);
+              }
+              if (
+                shouldAttachAttr("aria-checked", "ariaChecked", elem, false)
+              ) {
+                scope.$watch(
+                  ngAriaWatchModelValue,
+                  shape === "radio" ? getRadioReaction : getCheckboxReaction,
+                );
+              }
+              if (needsTabIndex) {
+                elem.attr("tabindex", 0);
+              }
+              break;
+            case "range":
+              if (shouldAttachRole(shape, elem)) {
+                elem.attr("role", "slider");
+              }
+              if ($aria.config("ariaValue")) {
+                const needsAriaValuemin =
+                  !elem.attr("aria-valuemin") &&
+                  (Object.prototype.hasOwnProperty.call(attr, "min") ||
+                    Object.prototype.hasOwnProperty.call(attr, "ngMin"));
+                const needsAriaValuemax =
+                  !elem.attr("aria-valuemax") &&
+                  (Object.prototype.hasOwnProperty.call(attr, "max") ||
+                    Object.prototype.hasOwnProperty.call(attr, "ngMax"));
+                const needsAriaValuenow = !elem.attr("aria-valuenow");
+
+                if (needsAriaValuemin) {
+                  attr.$observe("min", (newVal) => {
+                    elem.attr("aria-valuemin", newVal);
+                  });
+                }
+                if (needsAriaValuemax) {
+                  attr.$observe("max", (newVal) => {
+                    elem.attr("aria-valuemax", newVal);
+                  });
+                }
+                if (needsAriaValuenow) {
+                  scope.$watch(ngAriaWatchModelValue, (newVal) => {
+                    elem.attr("aria-valuenow", newVal);
+                  });
+                }
+              }
+              if (needsTabIndex) {
+                elem.attr("tabindex", 0);
+              }
+              break;
+          }
+
+          if (
+            !Object.prototype.hasOwnProperty.call(attr, "ngRequired") &&
+            ngModel.$validators.required &&
+            shouldAttachAttr("aria-required", "ariaRequired", elem, false)
+          ) {
+            // ngModel.$error.required is undefined on custom controls
+            attr.$observe("required", () => {
+              elem.attr("aria-required", (!!attr.required).toString());
+            });
+          }
+
+          if (shouldAttachAttr("aria-invalid", "ariaInvalid", elem, true)) {
+            scope.$watch(
+              () => ngModel.$invalid,
+              (newVal) => {
+                elem.attr("aria-invalid", (!!newVal).toString());
+              },
+            );
+          }
+        },
+      };
+    },
+  };
+}
+
+ngDblclickAriaDirective.$inject = ["$aria"];
+export function ngDblclickAriaDirective($aria) {
+  return function (scope, elem, attr) {
+    if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+
+    if (
+      $aria.config("tabindex") &&
+      !elem.attr("tabindex") &&
+      !isNodeOneOf(elem, nativeAriaNodeNames)
+    ) {
+      elem.attr("tabindex", 0);
+    }
+  };
+}

package/src/{exts → directive}/aria/aria.spec.js

@@ -9,7 +9,7 @@ describe("$aria", () => {
 
   beforeEach(() => {
     window.angular = new Angular();
-    window.angular.module("test", ["ngAria"]);
+    window.angular.module("test", ["ng"]);
     let injector = createInjector(["test"]);
     scope = injector.get("$rootScope");
     $compile = injector.get("$compile");
@@ -340,7 +340,7 @@ describe("$aria", () => {
   describe("aria-hidden when disabled", () => {
     beforeEach(() => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($ariaProvider) => {
           $ariaProvider.config({
             ariaHidden: false,
@@ -611,7 +611,7 @@ describe("$aria", () => {
   describe("aria-checked when disabled", () => {
     beforeEach(() => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($ariaProvider) => {
           $ariaProvider.config({
             ariaChecked: false,
@@ -701,7 +701,7 @@ describe("$aria", () => {
   describe("aria-disabled when disabled", () => {
     beforeEach(() => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($ariaProvider) => {
           $ariaProvider.config({
             ariaDisabled: false,
@@ -772,7 +772,7 @@ describe("$aria", () => {
   describe("aria-invalid when disabled", () => {
     beforeEach(() => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($ariaProvider) => {
           $ariaProvider.config({
             ariaInvalid: false,
@@ -843,7 +843,7 @@ describe("$aria", () => {
   describe("aria-readonly when disabled", () => {
     beforeEach(() => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($ariaProvider) => {
           $ariaProvider.config({
             ariaReadonly: false,
@@ -908,7 +908,7 @@ describe("$aria", () => {
   describe("aria-required when disabled", () => {
     beforeEach(() => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($ariaProvider) => {
           $ariaProvider.config({
             ariaRequired: false,
@@ -1019,7 +1019,7 @@ describe("$aria", () => {
   describe("aria-value when disabled", () => {
     beforeEach(() => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($ariaProvider) => {
           $ariaProvider.config({
             ariaValue: false,
@@ -1126,7 +1126,7 @@ describe("$aria", () => {
   describe("actions when bindRoleForClick is set to false", () => {
     beforeEach(() => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($ariaProvider) => {
           $ariaProvider.config({
             bindRoleForClick: false,
@@ -1149,7 +1149,7 @@ describe("$aria", () => {
   describe("actions when bindKeydown is set to false", () => {
     beforeEach(() => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($ariaProvider) => {
           $ariaProvider.config({
             bindKeydown: false,
@@ -1186,7 +1186,7 @@ describe("$aria", () => {
   describe("tabindex when disabled", () => {
     beforeEach(() => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($ariaProvider) => {
           $ariaProvider.config({
             tabindex: false,
@@ -1216,7 +1216,7 @@ describe("$aria", () => {
   describe("ngModel", () => {
     it("should not break when manually compiling", () => {
       window.angular.module("test", [
-        "ngAria",
+        "ng",
         ($compileProvider) => {
           $compileProvider.directive("foo", () => ({
             priority: 10,

package/src/{exts → directive}/aria/aria.test.js

@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 
-const TEST_URL = "src/exts/aria/aria.html";
+const TEST_URL = "src/directive/aria/aria.html";
 
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);

package/src/directive/form/form.js

@@ -109,6 +109,7 @@ export function FormController(
   this.$valid = true;
   this.$invalid = false;
   this.$submitted = false;
+  /** @type {FormController|Object} */
   this.$$parentForm = nullFormCtrl;
 
   this.$$element = $element;
@@ -326,6 +327,7 @@ FormController.prototype = {
    * parent forms of the form.
    */
   $setSubmitted() {
+     /** @type {FormController} */
     let rootForm = this;
     while (rootForm.$$parentForm && rootForm.$$parentForm !== nullFormCtrl) {
       rootForm = rootForm.$$parentForm;
@@ -589,7 +591,7 @@ const formDirectiveFactory = function (isNgForm) {
 };
 
 export const formDirective = formDirectiveFactory();
-export const ngFormDirective = formDirectiveFactory(true);
+export const ngFormDirective = formDirectiveFactory("ngForm");
 
 // helper methods
 export function setupValidity(instance) {