chore(cellnav): add support for typescript

package.json

@@ -108,6 +108,8 @@
     "shelljs": "^0.8.2",
     "text-loader": "^0.0.1",
     "time-grunt": "^1.4.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.5",
     "validate-commit-message": "^3.0.1",
     "webdriver-manager": "^12.1.7",
     "webpack": "^5.74.0",

packages/cellnav/src/js/cellnav.js

@@ -33,8 +33,8 @@
   });
 
 
-  module.factory('uiGridCellNavFactory', ['gridUtil', 'uiGridConstants', 'uiGridCellNavConstants', 'GridRowColumn', '$q',
-    function (gridUtil, uiGridConstants, uiGridCellNavConstants, GridRowColumn, $q) {
+  module.factory('uiGridCellNavFactory', ['uiGridCellNavConstants', 'GridRowColumn',
+    function (uiGridCellNavConstants, GridRowColumn) {
       /**
        *  @ngdoc object
        *  @name ui.grid.cellNav.object:CellNav
@@ -262,8 +262,8 @@
    *  @description Services for cell navigation features. If you don't like the key maps we use,
    *  or the direction cells navigation, override with a service decorator (see angular docs)
    */
-  module.service('uiGridCellNavService', ['gridUtil', 'uiGridConstants', 'uiGridCellNavConstants', '$q', 'uiGridCellNavFactory', 'GridRowColumn', 'ScrollEvent',
-    function (gridUtil, uiGridConstants, uiGridCellNavConstants, $q, UiGridCellNav, GridRowColumn, ScrollEvent) {
+  module.service('uiGridCellNavService', ['uiGridConstants', 'uiGridCellNavConstants', '$q', 'uiGridCellNavFactory',
+    function (uiGridConstants, uiGridCellNavConstants, $q, UiGridCellNav) {
 
       var service = {
 
@@ -622,8 +622,8 @@
    </file>
    </example>
    */
-  module.directive('uiGridCellnav', ['gridUtil', 'uiGridCellNavService', 'uiGridCellNavConstants', 'uiGridConstants', 'GridRowColumn', '$timeout', '$compile', 'i18nService',
-    function (gridUtil, uiGridCellNavService, uiGridCellNavConstants, uiGridConstants, GridRowColumn, $timeout, $compile, i18nService) {
+  module.directive('uiGridCellnav', ['uiGridCellNavService', 'uiGridCellNavConstants', 'uiGridConstants', 'GridRowColumn', '$compile', 'i18nService',
+    function (uiGridCellNavService, uiGridCellNavConstants, uiGridConstants, GridRowColumn, $compile, i18nService) {
       return {
         replace: true,
         priority: -150,
@@ -781,7 +781,7 @@
                 // Because browsers take a lot of coercing to get them to read out live regions
                 // http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/
                 var ariaNotifierDomElt = '<div ' +
                                            'id="' + grid.id +'-aria-speakable" ' +
                                            'class="ui-grid-a11y-ariascreenreader-speakable ui-grid-offscreen" ' +
                                            'aria-live="assertive" ' +
                                            'role="alert" ' +
@@ -861,8 +861,8 @@
       };
     }]);
 
-  module.directive('uiGridRenderContainer', ['$timeout', '$document', 'gridUtil', 'uiGridConstants', 'uiGridCellNavService', '$compile','uiGridCellNavConstants',
-    function ($timeout, $document, gridUtil, uiGridConstants, uiGridCellNavService, $compile, uiGridCellNavConstants) {
+  module.directive('uiGridRenderContainer', ['$timeout', 'gridUtil', 'uiGridCellNavService', '$compile','uiGridCellNavConstants',
+    function ($timeout, gridUtil, uiGridCellNavService, $compile, uiGridCellNavConstants) {
       return {
         replace: true,
         priority: -99999, // this needs to run very last
@@ -898,7 +898,7 @@
               }
 
               // add an element with no dimensions that can be used to set focus and capture keystrokes
               var focuser = $compile('<div class="ui-grid-focuser" role="region" aria-live="assertive" aria-atomic="false" tabindex="0" aria-controls="' + grid.id +'-aria-speakable '+ grid.id + '-grid-container' +'" aria-owns="' + grid.id + '-grid-container' + '"></div>')($scope);
               $elm.append(focuser);
 
               focuser.on('focus', function (evt) {
@@ -1046,8 +1046,8 @@
    *  @restrict A
    *  @description Stacks on top of ui.grid.uiGridCell to provide cell navigation
    */
-  module.directive('uiGridCell', ['$timeout', '$document', 'uiGridCellNavService', 'gridUtil', 'uiGridCellNavConstants', 'uiGridConstants', 'GridRowColumn',
-    function ($timeout, $document, uiGridCellNavService, gridUtil, uiGridCellNavConstants, uiGridConstants, GridRowColumn) {
+  module.directive('uiGridCell', ['uiGridCellNavConstants', 'uiGridConstants', 'GridRowColumn',
+    function (uiGridCellNavConstants, uiGridConstants, GridRowColumn) {
       return {
         priority: -150, // run after default uiGridCell directive and ui.grid.edit uiGridCell
         restrict: 'A',

packages/cellnav/src/ts/cell-nav.constants.ts

@@ -0,0 +1,8 @@
+export const FEATURE_NAME = 'gridCellNav';
+export const CELL_NAV_EVENT = 'cellNav';
+export const direction = {LEFT: 0, RIGHT: 1, UP: 2, DOWN: 3, PG_UP: 4, PG_DOWN: 5};
+export const EVENT_TYPE = {
+    KEYDOWN: 0,
+    CLICK: 1,
+    CLEAR: 2
+};

packages/cellnav/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["./**/*.ts"]
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "noImplicitAny": true,
+        "module": "es6",
+        "target": "es5",
+        "allowJs": true,
+        "moduleResolution": "node"
+    },
+    "include": ["./packages/**/*.ts"]
+}

webpack.config.js

@@ -14,6 +14,11 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        test: /\.ts?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
       {
         test: /\.html$/i,
         include,