Merge pull request #1150 from ghiscoding/next

feat!: drop jQuery requirement & use multiple-select-vanilla dependency

Author: ghiscoding

.github/renovate.json5

@@ -11,31 +11,23 @@
       depTypeList: ['peerDependencies'],
       enabled: false,
     },
-    {
-      packageNames: ['@ngx-translate/core'],
-      allowedVersions: '14.0.0',
-    },
-    // allow Node14/npm8 until its EOL June 2023
     {
       packageNames: ['node'],
-      allowedVersions: '14.17.0',
+      allowedVersions: '16.15.0',
     },
     {
       packageNames: ['npm'],
-      allowedVersions: '6.14.13',
-    },
-    {
-      packageNames: ['rxjs'],
-      allowedVersions: '7.5.0',
+      allowedVersions: '8.5.0',
     },
     {
+      // skip any Angular major version updates
       "updateTypes": ["major"],
       "enabled": false
     }
   ],
   schedule: ['on friday and tuesday'],
   ignoreDeps: [
-    // ignore TypeScript since it has to follow whatever version allows at the time
+    // ignore TypeScript since it has to follow Angular recommended version
     'typescript'
   ],
 }

.github/workflows/main.yml

@@ -5,6 +5,7 @@ on:
   push:
     branches:
       - master
+      - next
   pull_request:
     branches:
       - '**'
@@ -44,7 +45,7 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-            
+
       - name: Run yarn install dependencies
         run: yarn --frozen-lockfile
 

README.md

@@ -11,20 +11,20 @@
 [![codecov](https://codecov.io/gh/ghiscoding/Angular-Slickgrid/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/Angular-Slickgrid)
 
 ### Brief introduction
-One of the best javascript datagrid [SlickGrid](https://github.com/mleibman/SlickGrid) which was originally developed by @mleibman is now available to React. I have used a few datagrids and SlickGrid beats most of them in terms of functionalities and performance (it can easily deal with even a million row). We will be using the [6pac/SlickGrid](https://github.com/6pac/SlickGrid/) fork, it is the most active fork since the original @mleibman was retired some time ago by the original author for personal reasons. Also worth to know, that I also contributed a lot to the 6pac/SlickGrid fork for the benefit of all the SlickGrid libraries that I maintain like this one here.... also as a reminder, this is a wrapper of a jQuery lib (SlickGrid) and its core component is written in jQuery/JavaScript, so just keep that in mind and it also mean that jQuery is a dependency of Angular-Slickgrid.
+One of the best JavasSript datagrid [SlickGrid](https://github.com/mleibman/SlickGrid) which was originally developed by @mleibman is now available to Angular. SlickGrid beats most other datagrids in terms of functionalities and performance (it can easily deal with even a million row). Angular-Slickgrid is a wrapper on top of SlickGrid and we are using the [6pac/SlickGrid](https://github.com/6pac/SlickGrid/) fork which is the most active fork since the original was put on pause by its original author for personal reasons. Also worth to know, that I also contributed a lot to the 6pac/SlickGrid fork for the benefit of all the SlickGrid libraries that I maintain like this one here....
 
 ### License
 [MIT License](LICENSE)
 
 ## Installation
-Refer to the **[Wiki - HOWTO Step by Step](https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step)** and/or clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. Please consult all Wikis before opening new issues, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
+A good starting point is the **[Wiki - HOWTO Step by Step](https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step)** and/or simply clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. Please consult all Wikis and closed issues before opening new ones, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
 
 ```sh
 npm install angular-slickgrid
 ```
 
 ### Demo page
-`Angular-Slickgrid` works with all `Bootstrap` versions, you can see a demo of each one below. There are also 2 new styling Themes, Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Wiki - SVG Icons](https://github.com/ghiscoding/Angular-Slickgrid/wiki/SVG-Icons)
+`Angular-Slickgrid` works with all `Bootstrap` versions, you can see a demo of each one below. There are also extra styling themes for not just Bootstrap but also Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Wiki - SVG Icons](https://github.com/ghiscoding/Angular-Slickgrid/wiki/SVG-Icons)
 - [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-translate)
 - [Bootstrap 4 demo](https://ghiscoding.github.io/angular-slickgrid-demos) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap4-demo-with-translate)
 
@@ -38,42 +38,41 @@ npm start
 ```
 
 ### Like it? :star: it
-You like to use **Angular-Slickgrid**? Be sure to upvote :star:, maybe support me with cafeine :coffee: and feel free to contribute. 👷👷‍♀️
+You like to use **Angular-Slickgrid**? Be sure to upvote :star: and maybe support me with caffeine :coffee: and feel free to contribute. 👷👷‍♀️
 
 <a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='32' style='border:0px;height:32px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />
 
 ## Latest News & Releases
 Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/releases) section for all latest News & Releases.
 
 ## Angular Compatibility
-- version `1.x.x` for Angular 4-6
-- version `2.x.x` for Angular 7-11
-- version `3.x.x` for Angular 12+ and RxJS 7+ ([migration guide to 3.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-3.x))
-  - IE11 is EOL and **no longer supported**, if you still need to support it stay with version 2.x
-  - uses new [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo version 0.19.2
-- version `4.x.x` for Angular 13+, RxJS 7+ and **Ivy ONLY** ([migration guide to 4.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-4.x))
-  - for Ivy build only (no more UMD bundle & output >= ES2017), IE not supported.
-  - requires Slickgrid-Universal [1.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v1.1.1) version
-- version `5.x.x` for Angular 14+, RxJS >=7.5.0 and **Ivy ONLY** ([migration guide to 5.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-5.x))
-  - removal of jQueryUI dependency (replaced internally by SortableJS, a smaller and touch friendly lib).
-  - requires Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) version
-
-**Note** For a full compatibility table of Angular-Slickgrid with Slickgrid-Universal, you can consult the [Versions Compatibility Table - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table)
-
-For Angular 12+ see the instructions below - [Angular 12 with WebPack 5 - polyfill issue](https://github.com/ghiscoding/Angular-Slickgrid#angular-12-with-webpack-5---how-to-fix-polyfill-error)
+
+| Angular-Slickgrid | Angular version | Migration Guide | Notes |
+|-------------------|-----------------------|-----------------|------|
+| 1.x               | 4-6.x                 |                 |      |
+| 2.x               | 7-11.x           |                 |      |
+| 3.x               | >=12.0                | [Migration 3.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-3.x) | the lib now uses [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo version [v0.19.2](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v0.19.2). Also, IE11 is EOL and no longer supported. |
+| 4.x               | >=13.0               | [Migration 4.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-4.x)     | for Ivy build only, uses Slickgrid-Universal [1.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v1.1.1) version |
+| 5.x               | >=14.0               | [Migration 5.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-5.x)     | removal of jQueryUI, uses Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) version |
+| 6.x               | >=16.0               | [Migration 6.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-6.x)     | removal of jQuery (now uses browser native code), uses Slickgrid-Universal [3.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v3.0.0) version |
+
+**Note** For a full compatibility table of Angular-Slickgrid with Slickgrid-Universal, please take a look at the [Versions Compatibility Table - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table).
+
+For Angular 12+ see the instructions below - [Angular 12 with WebPack 5 - polyfill issue](https://github.com/ghiscoding/Angular-Slickgrid#angular-12-with-webpack-5---how-to-fix-polyfill-error).
 
 ### ngx-translate Compatibility
 
-If you are facing any issues with `ngx-translate` library while building your Angular Project. You need to make sure that `@ngx-translate/core` is part of your dependencies, that is also true even when using a single Locale, that is because it is a `peerDependency` of Angular-Slickgrid. The reason is because, we use `@Optional() TranslateService` in the lib and for that to work, we still need it to be installed, but don't worry it should still be removed by the tree shaking process after a running a production build. See their version compatibility table below
+Angular-Slickgrid uses `ngx-translate` library to support Locales, it is also required even when using a single Locale. The reason is because, we use `@Optional() TranslateService` in the lib and for that to work, it requires `ngx-translate` to installed. Once you run the build and if you are using a single Locale then the tree shaking process should remove these optional dependencies. See their version compatibility table below for more info
 
 | Angular Version | @ngx-translate/core |
 |-----------------|---------------------|
+|  16+            |        15.x+        |
 |  13+ (Ivy only) |        14.x+        |
 |  10-13          |        13.x+        |
 |  8-9            |        12.x+        |
 |  7              |        11.x+        |
 
-### Build Warnings (Angular 8+)
+### Build Warnings (Angular >=8.0 && <16.0)
 You might get warnings about SlickGrid while doing a production build, most of them are fine and the best way to fix them, is to simply remove/ignore the warnings, all you have to do is to add a file named `ngcc.config.js` in your project root (same location as the `angular.json` file) with the following content (you can also see this [commit](https://github.com/ghiscoding/angular-slickgrid-demos/commit/1fe8092bcd2e99ede5ab048f4a7ebe6254e4bee0) which fixes the Angular-Slickgrid-Demos prod build):
 ```js
 module.exports = {

angular.json

@@ -22,7 +22,6 @@
               "dompurify",
               "excel-builder-webpacker",
               "flatpickr",
-              "jquery",
               "moment-mini",
               "stream"
             ],
@@ -54,15 +53,12 @@
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "node_modules/flatpickr/dist/flatpickr.min.css",
               "node_modules/font-awesome/css/font-awesome.min.css",
-              "node_modules/multiple-select-modified/src/multiple-select.css",
               "node_modules/@ng-select/ng-select/themes/default.theme.css",
               "src/app/slickgrid-custom-variables.scss",
               "src/styles.scss"
             ],
             "scripts": [
-              "node_modules/jquery/dist/jquery.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js",
-              "node_modules/multiple-select-modified/src/multiple-select.js",
               "node_modules/sortablejs/Sortable.min.js"
             ],
             "vendorChunk": true,
@@ -151,4 +147,4 @@
     ],
     "analytics": false
   }
-}
+}

package.json

@@ -17,7 +17,6 @@
   },
   "scripts": {
     "start": "ng serve --port 4300",
-    "postinstall": "ngcc",
     "prebuild": "npm-run-all delete:dist lint",
     "build": "ng-packagr -p ng-package.json",
     "postbuild": "npm-run-all copy:i18n",
@@ -49,85 +48,84 @@
     "url": "https://ko-fi.com/ghiscoding"
   },
   "dependencies": {
-    "@ngx-translate/core": ">=14.0.0",
-    "@slickgrid-universal/common": "~2.6.4",
-    "@slickgrid-universal/custom-footer-component": "~2.6.4",
-    "@slickgrid-universal/empty-warning-component": "~2.6.4",
-    "@slickgrid-universal/event-pub-sub": "~2.6.4",
-    "@slickgrid-universal/pagination-component": "~2.6.4",
-    "@slickgrid-universal/row-detail-view-plugin": "~2.6.4",
-    "@slickgrid-universal/rxjs-observable": "~2.6.4",
-    "@types/jquery": "^3.5.16",
+    "@ngx-translate/core": ">=15.0.0 <16.0.0",
+    "@slickgrid-universal/common": "3.0.0",
+    "@slickgrid-universal/custom-footer-component": "3.0.0",
+    "@slickgrid-universal/empty-warning-component": "3.0.0",
+    "@slickgrid-universal/event-pub-sub": "3.0.0",
+    "@slickgrid-universal/pagination-component": "3.0.0",
+    "@slickgrid-universal/row-detail-view-plugin": "3.0.0",
+    "@slickgrid-universal/rxjs-observable": "3.0.0",
     "dequal": "^2.0.3",
     "dompurify": "^3.0.3",
-    "jquery": "^3.7.0",
-    "rxjs": ">=7.5.0",
+    "rxjs": "^7.8.1",
     "sortablejs": "^1.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.11",
-    "@angular-eslint/builder": "^14.4.0",
-    "@angular-eslint/eslint-plugin": "^14.4.0",
-    "@angular-eslint/eslint-plugin-template": "^14.4.0",
-    "@angular-eslint/schematics": "^14.4.0",
-    "@angular-eslint/template-parser": "^14.4.0",
-    "@angular/animations": "^14.3.0",
-    "@angular/cli": "^14.2.11",
-    "@angular/common": "^14.3.0",
-    "@angular/compiler": "^14.3.0",
-    "@angular/compiler-cli": "^14.3.0",
-    "@angular/core": "^14.3.0",
-    "@angular/forms": "^14.3.0",
-    "@angular/language-service": "^14.3.0",
-    "@angular/platform-browser": "^14.3.0",
-    "@angular/platform-browser-dynamic": "^14.3.0",
-    "@angular/router": "^14.3.0",
-    "@faker-js/faker": "^7.6.0",
+    "@angular-devkit/build-angular": "^16.0.2",
+    "@angular-eslint/builder": "^16.0.2",
+    "@angular-eslint/eslint-plugin": "^16.0.2",
+    "@angular-eslint/eslint-plugin-template": "^16.0.2",
+    "@angular-eslint/schematics": "^16.0.2",
+    "@angular-eslint/template-parser": "^16.0.2",
+    "@angular/animations": "^16.0.2",
+    "@angular/cli": "^16.0.2",
+    "@angular/common": "^16.0.2",
+    "@angular/compiler": "^16.0.2",
+    "@angular/compiler-cli": "^16.0.2",
+    "@angular/core": "^16.0.2",
+    "@angular/forms": "^16.0.2",
+    "@angular/language-service": "^16.0.2",
+    "@angular/platform-browser": "^16.0.2",
+    "@angular/platform-browser-dynamic": "^16.0.2",
+    "@angular/router": "^16.0.2",
+    "@faker-js/faker": "^8.0.1",
     "@fnando/sparkline": "^0.3.10",
-    "@ng-select/ng-select": "^9.1.0",
-    "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^7.0.0",
+    "@ng-select/ng-select": "^10.0.4",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@slickgrid-universal/composite-editor-component": "~2.6.4",
-    "@slickgrid-universal/custom-tooltip-plugin": "~2.6.4",
-    "@slickgrid-universal/excel-export": "~2.6.4",
-    "@slickgrid-universal/graphql": "~2.6.4",
-    "@slickgrid-universal/odata": "~2.6.4",
-    "@slickgrid-universal/text-export": "~2.6.4",
+    "@slickgrid-universal/composite-editor-component": "3.0.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "3.0.0",
+    "@slickgrid-universal/excel-export": "3.0.0",
+    "@slickgrid-universal/graphql": "3.0.0",
+    "@slickgrid-universal/odata": "3.0.0",
+    "@slickgrid-universal/text-export": "3.0.0",
     "@types/dompurify": "^3.0.2",
     "@types/flatpickr": "^3.1.2",
     "@types/fnando__sparkline": "^0.3.4",
     "@types/jest": "^29.5.1",
-    "@types/jquery": "^3.5.16",
     "@types/moment": "^2.13.0",
-    "@types/node": "^18.16.13",
+    "@types/node": "^20.2.3",
     "@types/sortablejs": "^1.15.1",
     "@types/text-encoding-utf-8": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
     "autoprefixer": "^10.4.14",
     "bootstrap": "^5.2.3",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "custom-event-polyfill": "^1.0.7",
     "eslint": "^8.41.0",
+    "fetch-jsonp": "^1.2.3",
     "font-awesome": "^4.7.0",
     "jest": "^29.5.0",
     "jest-extended": "^3.2.4",
     "jest-preset-angular": "^13.1.1",
     "moment-mini": "^2.29.4",
-    "ng-packagr": "^14.3.0",
-    "ngx-bootstrap": "^9.0.0",
+    "ng-packagr": "^16.0.1",
+    "ngx-bootstrap": "^10.2.0",
     "npm-run-all2": "^6.0.5",
     "postcss": "^8.4.23",
     "postcss-cli": "^10.1.0",
     "release-it": "^15.10.3",
-    "rimraf": "^4.4.1",
+    "rimraf": "^5.0.1",
+    "rxjs": "^7.8.1",
     "sass": "^1.62.1",
     "stream-browserify": "^3.0.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.2",
-    "typescript": "~4.7.4",
+    "typescript": "~5.0.4",
     "zone.js": "~0.13.0"
   },
   "engines": {
@@ -137,4 +135,4 @@
   "resolutions": {
     "caniuse-lite": "1.0.30001488"
   }
-}
+}

src/app/app-routing.module.ts

@@ -77,7 +77,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' }), TranslateModule],
+  imports: [RouterModule.forRoot(routes, { useHash: true }), TranslateModule],
   exports: [RouterModule, TranslateModule],
 })
 export class AppRoutingRoutingModule { }