Merge pull request #864 from ghiscoding/feat/slickgrid-universal-plugins

BREAKING CHANGE: upgrade to Slickgrid-Universal official 1.x major version

Author: ghiscoding

README.md

@@ -20,7 +20,7 @@ One of the best javascript datagrid [SlickGrid](https://github.com/mleibman/Slic
 [Angular-Slickgrid on NPM](https://www.npmjs.com/package/angular-slickgrid)
 
 ### Demo page
-`Angular-Slickgrid` works with `Bootstrap 4` and even latest `Bootstrap 5` version, you can see a demo of each one below. There are also 2 new styling Themes, Material & Salesforce are also available and you could also use SVG icons if so take a 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 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)
 - [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)
 
@@ -54,10 +54,12 @@ Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/release
 ## Angular Compatibility
 - version `1.x.x` for Angular 4 to 6 
 - version `2.x.x` for Angular 7+ 
-- version `3.x.x` for Angular 12+ and RxJS 7+
+- 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))
   - build `target` got bumped to `ES2018` for modern browser **only**
   - IE11 is reaching EOL by year end and is **no longer supported**, if you still need to support it then stick with version 2.x
   - uses [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo
+- version `4.x.x` for Angular 13+ and RxJS 7+ (**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), IE is definitely out of the picture
 
 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)
 
@@ -67,10 +69,10 @@ If you are facing any issues with `ngx-translate` library while building your An
 
 | Angular Version | @ngx-translate/core |
 |-----------------|---------------------|
-|        10+      |        13.x+        |
-|        9        |        12.x+        |
-|        8        |        12.x+        |
-|        7        |        11.x+        |
+|  13+ (Ivy only) |        14.x+        |
+|  10-13          |        13.x+        |
+|  8-9            |        12.x+        |
+|  7              |        11.x+        |
 
 ### Build Warnings (Angular 8+)
 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):
@@ -129,7 +131,7 @@ This is no longer the case. Verify if you need this module and configure a polyf
 ```
 
 ### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
-Angular-Slickgrid and Slickgrid-Universal both have **100%** Unit Test Coverage, we are talking about +13,000 lines of code (+3,000 unit tests) that are fully tested with [Jest](https://jestjs.io/). On the UI side, all Angular-Slickgrid Examples are tested with [Cypress](https://www.cypress.io/), there are over 500 Cypress E2E tests.
+Angular-Slickgrid and Slickgrid-Universal both have **100%** Unit Test Coverage, we are talking about +15,000 lines of code (+3,750 unit tests) that are fully tested with [Jest](https://jestjs.io/). On the UI side, all Angular-Slickgrid Examples are tested with [Cypress](https://www.cypress.io/), there are over +500 Cypress E2E tests.
 
 ## 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 don't open any issue unless you have followed these steps (from the Wiki), and if any of the steps are incorrect or confusing, then please let me know.

package.json

@@ -70,16 +70,17 @@
     }
   },
   "dependencies": {
-    "@slickgrid-universal/common": "^0.19.2",
-    "@slickgrid-universal/custom-footer-component": "^0.19.2",
-    "@slickgrid-universal/empty-warning-component": "^0.19.2",
-    "@slickgrid-universal/event-pub-sub": "^0.19.2",
-    "@slickgrid-universal/pagination-component": "^0.19.2",
-    "@slickgrid-universal/rxjs-observable": "^0.19.2",
-    "@types/dompurify": "^2.3.1",
-    "@types/jquery": "^3.5.8",
+    "@slickgrid-universal/common": "^1.1.0",
+    "@slickgrid-universal/custom-footer-component": "^1.1.1",
+    "@slickgrid-universal/empty-warning-component": "^1.1.1",
+    "@slickgrid-universal/event-pub-sub": "^1.1.1",
+    "@slickgrid-universal/pagination-component": "^1.1.1",
+    "@slickgrid-universal/row-detail-view-plugin": "^1.1.1",
+    "@slickgrid-universal/rxjs-observable": "^1.1.1",
+    "@types/dompurify": "^2.3.2",
+    "@types/jquery": "^3.5.10",
     "dequal": "^2.0.2",
-    "dompurify": "^2.3.3",
+    "dompurify": "^2.3.4",
     "font-awesome": "^4.7.0",
     "jquery": "~3.5.1",
     "jquery-ui-dist": "^1.12.1",
@@ -90,39 +91,39 @@
     "@ngx-translate/core": ">=14.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.0.3",
+    "@angular-devkit/build-angular": "~13.1.1",
     "@angular-eslint/builder": "13.0.1",
     "@angular-eslint/eslint-plugin": "13.0.1",
     "@angular-eslint/eslint-plugin-template": "13.0.1",
     "@angular-eslint/schematics": "13.0.1",
     "@angular-eslint/template-parser": "13.0.1",
-    "@angular/animations": "^13.0.2",
-    "@angular/cli": "^13.0.3",
-    "@angular/common": "^13.0.2",
-    "@angular/compiler": "^13.0.2",
-    "@angular/compiler-cli": "^13.0.2",
-    "@angular/core": "^13.0.2",
-    "@angular/forms": "^13.0.2",
-    "@angular/language-service": "^13.0.2",
-    "@angular/platform-browser": "^13.0.2",
-    "@angular/platform-browser-dynamic": "^13.0.2",
-    "@angular/router": "^13.0.2",
+    "@angular/animations": "^13.1.0",
+    "@angular/cli": "^13.1.1",
+    "@angular/common": "^13.1.0",
+    "@angular/compiler": "^13.1.0",
+    "@angular/compiler-cli": "^13.1.0",
+    "@angular/core": "^13.1.0",
+    "@angular/forms": "^13.1.0",
+    "@angular/language-service": "^13.1.0",
+    "@angular/platform-browser": "^13.1.0",
+    "@angular/platform-browser-dynamic": "^13.1.0",
+    "@angular/router": "^13.1.0",
     "@ng-select/ng-select": "^8.1.1",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
-    "@slickgrid-universal/composite-editor-component": "^0.19.2",
-    "@slickgrid-universal/custom-tooltip-plugin": "^0.19.2",
-    "@slickgrid-universal/excel-export": "^0.19.2",
-    "@slickgrid-universal/graphql": "^0.19.2",
-    "@slickgrid-universal/odata": "^0.19.2",
-    "@slickgrid-universal/text-export": "^0.19.2",
+    "@slickgrid-universal/composite-editor-component": "^1.1.1",
+    "@slickgrid-universal/custom-tooltip-plugin": "^1.1.1",
+    "@slickgrid-universal/excel-export": "^1.1.1",
+    "@slickgrid-universal/graphql": "^1.1.1",
+    "@slickgrid-universal/odata": "^1.1.1",
+    "@slickgrid-universal/text-export": "^1.1.1",
     "@types/flatpickr": "^3.1.2",
     "@types/jest": "^27.0.3",
     "@types/moment": "^2.13.0",
-    "@types/node": "^16.11.9",
+    "@types/node": "^16.11.12",
     "@types/text-encoding-utf-8": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
     "autoprefixer": "^10.4.0",
     "bootstrap": "^5.1.3",
     "codecov": "^3.8.3",
@@ -133,25 +134,25 @@
     "custom-event-polyfill": "^1.0.7",
     "del": "^6.0.0",
     "del-cli": "^4.0.1",
-    "eslint": "^8.2.0",
-    "jest": "^27.3.1",
-    "jest-extended": "^1.1.0",
-    "jest-preset-angular": "^11.0.0",
-    "ng-packagr": "^13.0.6",
+    "eslint": "^8.4.1",
+    "jest": "^27.4.3",
+    "jest-extended": "^1.2.0",
+    "jest-preset-angular": "^11.0.1",
+    "ng-packagr": "^13.1.1",
     "ngx-bootstrap": "^7.1.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.11",
-    "postcss-cli": "^9.0.2",
+    "postcss": "^8.4.4",
+    "postcss-cli": "^9.1.0",
     "require-dir": "^1.2.0",
     "rimraf": "^3.0.2",
     "run-sequence": "^2.2.1",
-    "sass": "^1.43.4",
+    "sass": "^1.45.0",
     "standard-version": "^9.3.2",
     "stream-browserify": "^3.0.0",
     "ts-node": "^10.4.0",
     "tslib": "^2.3.1",
     "typescript": "~4.4.4",
-    "yargs": "^17.2.1",
+    "yargs": "^17.3.0",
     "zone.js": "~0.11.4"
   },
   "engines": {

src/app/examples/grid-angular.component.ts

@@ -229,7 +229,6 @@ export class GridAngularComponent implements OnInit {
         field: 'id',
         formatter: () => `<div class="fake-hyperlink">Action <i class="fa fa-caret-down"></i></div>`,
         cellMenu: {
-          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             {
@@ -260,6 +259,7 @@ export class GridAngularComponent implements OnInit {
       headerRowHeight: 45,
       rowHeight: 45, // increase row height so that the ng-select fits in the cell
       editable: true,
+      enableCellMenu: true,
       enableCellNavigation: true,
       enableColumnPicker: true,
       enableExcelCopyBuffer: true,
@@ -270,7 +270,6 @@ export class GridAngularComponent implements OnInit {
         this._commandQueue.push(editCommand);
         editCommand.execute();
       },
-      enableCellMenu: true,
       i18n: this.translate,
       params: {
         angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)

src/app/examples/grid-clientside.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { TranslateService } from '@ngx-translate/core';
-import { CustomInputFilter } from './custom-inputFilter';
 import {
   AngularGridInstance,
   Column,
@@ -15,6 +15,7 @@ import {
   MultipleSelectOption,
   OperatorType,
 } from './../modules/angular-slickgrid';
+import { CustomInputFilter } from './custom-inputFilter';
 
 function randomBetween(min: number, max: number) {
   return Math.floor(Math.random() * (max - min + 1) + min);
@@ -195,6 +196,7 @@ export class GridClientSideComponent implements OnInit {
           { columnId: 'complete', direction: 'ASC' }
         ],
       },
+      registerExternalResources: [new ExcelExportService()],
     };
 
     // mock a dataset

src/app/examples/grid-composite-editor.component.scss

@@ -1,4 +1,4 @@
-$button-border-color: #ababab !default;
+$slick-button-border-color: #ababab !default;
 
 .editable-field {
   background-color: rgba(227, 240, 251, 0.569) !important;
@@ -9,11 +9,11 @@ $button-border-color: #ababab !default;
 .button-style {
   cursor: pointer;
   background-color: white;
-  border: 1px solid #{$button-border-color};
+  border: 1px solid #{$slick-button-border-color};
   border-radius: 2px;
   justify-content: center;
   text-align: center;
   &:hover {
-    border-color: darken($button-border-color, 10%);
+    border-color: darken($slick-button-border-color, 10%);
   }
 }

src/app/examples/grid-composite-editor.component.ts

@@ -321,7 +321,6 @@ export class GridCompositeEditorComponent implements OnInit {
         formatter: () => `<div class="button-style margin-auto" style="width: 35px;"><span class="fa fa-chevron-down text-primary"></span></div>`,
         cellMenu: {
           hideCloseButton: false,
-          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             {

src/app/examples/grid-contextmenu.component.ts

@@ -108,12 +108,12 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
     this.angularGrid = angularGrid;
   }
 
-  get cellMenuInstance(): any {
-    return this.angularGrid?.extensionService?.getSlickgridAddonInstance?.(ExtensionName.cellMenu) ?? {};
+  get cellMenuInstance() {
+    return this.angularGrid?.extensionService?.getExtensionInstanceByName(ExtensionName.cellMenu);
   }
 
-  get contextMenuInstance(): any {
-    return this.angularGrid?.extensionService?.getSlickgridAddonInstance?.(ExtensionName.contextMenu) ?? {};
+  get contextMenuInstance() {
+    return this.angularGrid?.extensionService?.getExtensionInstanceByName(ExtensionName.contextMenu);
   }
 
   ngOnInit() {
@@ -183,7 +183,6 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
         formatter: actionFormatter,
         cellMenu: {
           hideCloseButton: false,
-          width: 200,
           // you can override the logic of when the menu is usable
           // for example say that we want to show a menu only when then Priority is set to 'High'.
           // Note that this ONLY overrides the usability itself NOT the text displayed in the cell,
@@ -352,7 +351,6 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
   getContextMenuOptions(): ContextMenu {
     return {
       hideCloseButton: false,
-      width: 200,
       // optionally and conditionally define when the the menu is usable,
       // this should be used with a custom formatter to show/hide/disable the menu
       menuUsabilityOverride: (args) => {
@@ -434,7 +432,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
       onOptionSelected: ((e, args) => {
         // change Priority
         const dataContext = args && args.dataContext;
-        if (dataContext && dataContext.hasOwnProperty('priority')) {
+        if (dataContext?.hasOwnProperty('priority')) {
           dataContext.priority = args.item.option;
           this.angularGrid.gridService.updateItem(dataContext);
         }
@@ -446,15 +444,15 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
     // when showing both Commands/Options, we can just pass an empty array to show over all columns
     // else show on all columns except Priority
     const showOverColumnIds = showBothList ? [] : ['id', 'title', 'complete', 'start', 'finish', 'completed', 'action'];
-    this.contextMenuInstance.setOptions({
+    this.contextMenuInstance?.setOptions({
       commandShownOverColumnIds: showOverColumnIds,
       // hideCommandSection: !showBothList
     });
   }
 
   showCellMenuCommandsAndOptions(showBothList: boolean) {
     // change via the plugin setOptions
-    this.cellMenuInstance.setOptions({
+    this.cellMenuInstance?.setOptions({
       hideOptionSection: !showBothList
     });
 

src/app/examples/grid-custom-tooltip.component.scss

@@ -1,4 +1,4 @@
-$button-border-color: #ababab !default;
+$slick-button-border-color: #ababab !default;
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
 
 // --
@@ -24,12 +24,12 @@ $button-border-color: #ababab !default;
 .button-style {
   cursor: pointer;
   background-color: white;
-  border: 1px solid #{$button-border-color};
+  border: 1px solid #{$slick-button-border-color};
   border-radius: 2px;
   justify-content: center;
   text-align: center;
   &:hover {
-    border-color: darken($button-border-color, 10%);
+    border-color: darken($slick-button-border-color, 10%);
   }
 }
 

src/app/examples/grid-custom-tooltip.component.ts

@@ -270,7 +270,6 @@ export class GridCustomTooltipComponent implements OnInit {
         excludeFromExport: true,
         cellMenu: {
           hideCloseButton: false,
-          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             // array of command item objects, you can also use the "positionOrder" that will be used to sort the items in the list

src/app/examples/grid-draggrouping.component.ts

@@ -188,7 +188,7 @@ export class GridDraggableGroupingComponent implements OnInit {
         }
       },
       {
-        id: 'effortDriven', name: 'Effort Driven', field: 'effortDriven',
+        id: 'effortDriven', name: 'Effort-Driven', field: 'effortDriven',
         width: 80, minWidth: 20, maxWidth: 100,
         cssClass: 'cell-effort-driven',
         sortable: true,
@@ -218,6 +218,7 @@ export class GridDraggableGroupingComponent implements OnInit {
       createPreHeaderPanel: true,
       showPreHeaderPanel: true,
       preHeaderPanelHeight: 40,
+      showCustomFooter: true,
       enableFiltering: true,
       // you could debounce/throttle the input text filter if you have lots of data
       // filterTypingDebounce: 250,