Merge pull request #803 from ghiscoding/feat/version-next-universal

BREAKING CHANGE: use Slickgrid-Universal monorepo next major 3.0

Author: ghiscoding

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}

angular.json

@@ -17,8 +17,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "allowedCommonJsDependencies": [
-              "angular-slickgrid",
-              "jquery-ui-dist/jquery-ui",
+              "assign-deep",
               "excel-builder-webpacker",
               "stream"
             ],
@@ -50,7 +49,7 @@
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/flatpickr/dist/flatpickr.min.css",
               "node_modules/font-awesome/css/font-awesome.css",
-              "src/assets/lib/multiple-select/multiple-select.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"
@@ -60,7 +59,7 @@
               "node_modules/jquery-ui-dist/jquery-ui.min.js",
               "node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
               "node_modules/bootstrap/dist/js/bootstrap.js",
-              "src/assets/lib/multiple-select/multiple-select.js"
+              "node_modules/multiple-select-modified/src/multiple-select.js"
             ],
             "vendorChunk": true,
             "extractLicenses": false,

ngcc.config.js

@@ -4,6 +4,7 @@ module.exports = {
       ignorableDeepImportMatchers: [
         /slickgrid\//,
         /flatpickr/,
+        /assign-deep/,
         /dequal/,
         /jquery-ui-dist\//,
       ]

package.json

@@ -16,7 +16,7 @@
     "postinstall": "ngcc",
     "prebuild": "npm-run-all delete:dist lint",
     "build": "npm run packagr",
-    "postbuild": "npm-run-all sass:build sass:copy copy:i18n copy:lib",
+    "postbuild": "npm-run-all copy:i18n copy:lib",
     "build:with-e2e": "npm-run-all build cypress:ci",
     "build:gh-demo": "npm run build",
     "postbuild:gh-demo": "npm-run-all del-demo:dist copy-demo:dist",
@@ -43,40 +43,17 @@
     "bump-version": "npm --no-git-tag-version version",
     "prepare-release": "cross-env npm run changelog && npm run build && npm run doc",
     "release": "standard-version",
-    "sass-build-task:scss-compile:bootstrap": "sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-bootstrap.scss dist/styles/css/slickgrid-theme-bootstrap.css --style=compressed",
-    "postsass-build-task:scss-compile:bootstrap": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-bootstrap.css dist/styles/css/slickgrid-theme-bootstrap.css --style=compressed",
-    "sass-build-task:scss-compile:material": "sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.scss dist/styles/css/slickgrid-theme-material.css --style=compressed",
-    "postsass-build-task:scss-compile:material": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.css dist/styles/css/slickgrid-theme-material.css --style=compressed",
-    "sass-build-task:scss-compile:material-bare": "sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.bare.scss dist/styles/css/slickgrid-theme-material.bare.css --style=compressed",
-    "postsass-build-task:scss-compile:material-bare": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.bare.css dist/styles/css/slickgrid-theme-material.bare.css --style=compressed",
-    "sass-build-task:scss-compile:material-lite": "sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss dist/styles/css/slickgrid-theme-material.lite.css --style=compressed",
-    "postsass-build-task:scss-compile:material-lite": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.lite.css dist/styles/css/slickgrid-theme-material.lite.css --style=compressed",
-    "sass-build-task:scss-compile:salesforce": "sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss dist/styles/css/slickgrid-theme-salesforce.css --style=compressed",
-    "postsass-build-task:scss-compile:salesforce": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.css dist/styles/css/slickgrid-theme-salesforce.css --style=compressed",
-    "sass-build-task:scss-compile:salesforce-bare": "sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.bare.scss dist/styles/css/slickgrid-theme-salesforce.bare.css --style=compressed",
-    "postsass-build-task:scss-compile:salesforce-bare": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.bare.css dist/styles/css/slickgrid-theme-salesforce.bare.css --style=compressed",
-    "sass-build-task:scss-compile:salesforce-lite": "sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.lite.scss dist/styles/css/slickgrid-theme-salesforce.lite.css --style=compressed",
-    "postsass-build-task:scss-compile:salesforce-lite": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.lite.css dist/styles/css/slickgrid-theme-salesforce.lite.css --style=compressed",
-    "sass:build": "run-p sass-build-task:scss-compile:*",
-    "presass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.png dist/styles/css",
-    "sass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.scss dist/styles/sass",
-    "postsass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.png dist/styles/sass",
-    "presass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap",
-    "sass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap -- --watch",
-    "presass:watch:material": "cross-env npm run sass-build-task:scss-compile:material",
-    "sass:watch:material": "cross-env npm run sass-build-task:scss-compile:material -- --watch",
-    "presass:watch:salesforce": "cross-env npm run sass-build-task:scss-compile:salesforce",
-    "sass:watch:salesforce": "cross-env npm run sass-build-task:scss-compile:salesforce -- --watch",
-    "sass:watch": "run-p sass:watch:bootstrap sass:watch:material sass:watch:salesforce sass:copy:watch",
-    "sass:copy:watch": "nodemon --ext scss --watch src/app/modules/angular-slickgrid/styles/*.scss --exec \"npm run sass:copy\"",
     "build:demo": "ng build --configuration=production"
   },
   "author": "Ghislain B.",
   "repository": {
     "type": "git",
     "url": "http://github.com/ghiscoding/angular-slickgrid"
   },
-  "main": "src/app/modules/angular-slickgrid/index",
+  "main": "bundles/angular-slickgrid.umd.js",
+  "es2015": "fesm2015/angular-slickgrid.js",
+  "esm2015": "esm2015/angular-slickgrid.js",
+  "fesm2015": "fesm2015/angular-slickgrid.js",
   "private": false,
   "ngPackage": {
     "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
@@ -89,6 +66,7 @@
       "umdModuleIds": {
         "@ngx-translate/core": "ngx-translate-core",
         "@ngx-translate/core/index": "ngx-translate-core",
+        "assignDeep": "assign-deep",
         "dequal": "dequal",
         "dequal-lite": "dequal-lite",
         "dompurify": "dompurify",
@@ -101,53 +79,61 @@
     }
   },
   "dependencies": {
-    "@types/jquery": "^3.5.5",
+    "@slickgrid-universal/common": "^0.16.1",
+    "@slickgrid-universal/custom-footer-component": "^0.16.1",
+    "@slickgrid-universal/empty-warning-component": "^0.16.1",
+    "@slickgrid-universal/event-pub-sub": "^0.16.1",
+    "@slickgrid-universal/rxjs-observable": "^0.16.1",
+    "@types/jquery": "^3.5.6",
     "dequal": "^2.0.2",
-    "dompurify": "^2.2.9",
-    "excel-builder-webpacker": "^1.0.6",
-    "flatpickr": "^4.6.9",
+    "dompurify": "^2.3.0",
+    "font-awesome": "^4.7.0",
     "jquery": "~3.5.1",
     "jquery-ui-dist": "^1.12.1",
     "moment-mini": "^2.24.0",
-    "rxjs": "^6.3.3",
-    "slickgrid": "^2.4.38",
-    "text-encoding-utf-8": "^1.0.2",
-    "un-flatten-tree": "^2.0.12"
+    "rxjs": "^7.2.0"
   },
   "peerDependencies": {
-    "@ngx-translate/core": ">=11.0.1",
-    "@ngx-translate/http-loader": ">=4.0.0"
+    "@angular/core": ">=12.1.2",
+    "@ngx-translate/core": ">=13.0.0",
+    "@ngx-translate/http-loader": ">=6.0.0",
+    "typescript": ">=4.3.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.4",
-    "@angular-eslint/builder": "12.1.0",
-    "@angular-eslint/eslint-plugin": "12.1.0",
-    "@angular-eslint/eslint-plugin-template": "12.1.0",
-    "@angular-eslint/schematics": "12.1.0",
-    "@angular-eslint/template-parser": "12.1.0",
-    "@angular/animations": "^12.0.4",
-    "@angular/cli": "^12.0.4",
-    "@angular/common": "^12.0.4",
-    "@angular/compiler": "^12.0.4",
-    "@angular/compiler-cli": "^12.0.4",
-    "@angular/core": "^12.0.4",
-    "@angular/forms": "^12.0.4",
-    "@angular/language-service": "^12.0.4",
-    "@angular/platform-browser": "^12.0.4",
-    "@angular/platform-browser-dynamic": "^12.0.4",
-    "@angular/router": "^12.0.4",
-    "@ng-select/ng-select": "^7.0.1",
+    "@angular-devkit/build-angular": "~12.1.2",
+    "@angular-eslint/builder": "12.3.1",
+    "@angular-eslint/eslint-plugin": "12.3.1",
+    "@angular-eslint/eslint-plugin-template": "12.3.1",
+    "@angular-eslint/schematics": "12.3.1",
+    "@angular-eslint/template-parser": "12.3.1",
+    "@angular/animations": "^12.1.2",
+    "@angular/cli": "^12.1.2",
+    "@angular/common": "^12.1.2",
+    "@angular/compiler": "^12.1.2",
+    "@angular/compiler-cli": "^12.1.2",
+    "@angular/core": "^12.1.2",
+    "@angular/forms": "^12.1.2",
+    "@angular/language-service": "^12.1.2",
+    "@angular/platform-browser": "^12.1.2",
+    "@angular/platform-browser-dynamic": "^12.1.2",
+    "@angular/router": "^12.1.2",
+    "@ng-select/ng-select": "^7.2.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
-    "@types/dompurify": "^2.2.2",
+    "@slickgrid-universal/composite-editor-component": "^0.16.1",
+    "@slickgrid-universal/excel-export": "^0.16.1",
+    "@slickgrid-universal/graphql": "^0.16.1",
+    "@slickgrid-universal/odata": "^0.16.1",
+    "@slickgrid-universal/text-export": "^0.16.1",
+    "@types/dompurify": "^2.2.3",
     "@types/flatpickr": "^3.1.2",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^26.0.24",
     "@types/moment": "^2.13.0",
-    "@types/node": "^15.12.5",
-    "@types/text-encoding-utf-8": "^1.0.1",
-    "@typescript-eslint/eslint-plugin": "4.28.1",
-    "@typescript-eslint/parser": "4.28.1",
-    "autoprefixer": "^10.2.6",
+    "@types/node": "^16.3.3",
+    "@types/text-encoding-utf-8": "^1.0.2",
+    "@typescript-eslint/eslint-plugin": "4.28.3",
+    "@typescript-eslint/parser": "4.28.3",
+    "autoprefixer": "^10.3.1",
     "bootstrap": "^5.0.2",
     "codecov": "^3.8.2",
     "codelyzer": "^6.0.2",
@@ -156,27 +142,30 @@
     "cross-env": "^7.0.3",
     "custom-event-polyfill": "^1.0.7",
     "del": "^6.0.0",
-    "del-cli": "^3.0.1",
-    "eslint": "^7.29.0",
-    "font-awesome": "^4.7.0",
+    "del-cli": "^4.0.1",
+    "eslint": "^7.30.0",
     "jest": "^27.0.6",
     "jest-extended": "^0.11.5",
     "jest-preset-angular": "^9.0.4",
-    "ng-packagr": "^12.0.5",
+    "ng-packagr": "^12.1.2",
     "ngx-bootstrap": "^6.2.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.5",
     "postcss-cli": "^8.3.1",
     "require-dir": "^1.2.0",
     "rimraf": "^3.0.2",
     "run-sequence": "^2.2.1",
-    "sass": "^1.35.1",
-    "standard-version": "^9.3.0",
+    "sass": "^1.35.2",
+    "standard-version": "^9.3.1",
     "stream-browserify": "^3.0.0",
-    "ts-node": "^10.0.0",
+    "ts-node": "^10.1.0",
     "tslib": "^2.3.0",
-    "typescript": "~4.2.4",
+    "typescript": "~4.3.5",
     "yargs": "^17.0.1",
     "zone.js": "~0.11.4"
+  },
+  "engines": {
+    "node": ">=14.15.0",
+    "npm": ">=6.14.8"
   }
 }

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { GridAutoHeightComponent } from './examples/grid-autoheight.component';
 import { GridBasicComponent } from './examples/grid-basic.component';
 import { GridClientSideComponent } from './examples/grid-clientside.component';
 import { GridColspanComponent } from './examples/grid-colspan.component';
+import { GridCompositeEditorComponent } from './examples/grid-composite-editor.component';
 import { GridContextMenuComponent } from './examples/grid-contextmenu.component';
 import { GridDraggableGroupingComponent } from './examples/grid-draggrouping.component';
 import { GridEditorComponent } from './examples/grid-editor.component';
@@ -41,6 +42,7 @@ const routes: Routes = [
   { path: 'autoheight', component: GridAutoHeightComponent },
   { path: 'basic', component: GridBasicComponent },
   { path: 'colspan', component: GridColspanComponent },
+  { path: 'composite-editor', component: GridCompositeEditorComponent },
   { path: 'context', component: GridContextMenuComponent },
   { path: 'editor', component: GridEditorComponent },
   { path: 'formatter', component: GridFormatterComponent },

src/app/app.component.html

@@ -128,9 +128,14 @@
             29- Tree Data (Hierarchical)
           </a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/composite-editor']">
+            30- Composite Editor Modal
+          </a>
+        </li>
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/resize-by-content']">
-            30- Resize by Cell Content
+            31- Resize by Cell Content
           </a>
         </li>
       </ul>

src/app/app.module.ts

@@ -10,7 +10,6 @@ import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-transla
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { AppComponent } from './app.component';
-import { CustomActionFormatterComponent } from './examples/custom-actionFormatter.component';
 import { CustomTitleFormatterComponent } from './examples/custom-titleFormatter.component';
 import { EditorNgSelectComponent } from './examples/editor-ng-select.component';
 import { FilterNgSelectComponent } from './examples/filter-ng-select.component';
@@ -20,6 +19,7 @@ import { GridBasicComponent } from './examples/grid-basic.component';
 import { GridClientSideComponent } from './examples/grid-clientside.component';
 import { GridColspanComponent } from './examples/grid-colspan.component';
 import { GridContextMenuComponent } from './examples/grid-contextmenu.component';
+import { GridCompositeEditorComponent } from './examples/grid-composite-editor.component';
 import { GridDraggableGroupingComponent } from './examples/grid-draggrouping.component';
 import { GridEditorComponent } from './examples/grid-editor.component';
 import { GridAngularComponent } from './examples/grid-angular.component';
@@ -71,12 +71,12 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     locationInitialized.then(() => {
       const langToSet = 'en';
       translate.setDefaultLang('en');
-      translate.use(langToSet).subscribe(() => {
-        // console.info(`Successfully initialized '${langToSet}' language.'`);
-      }, err => {
-        console.error(`Problem with '${langToSet}' language initialization.'`);
-      }, () => {
-        resolve(null);
+      translate.use(langToSet).subscribe({
+        next: () => {
+          // console.info(`Successfully initialized '${langToSet}' language.'`);
+        },
+        error: () => console.error(`Problem with '${langToSet}' language initialization.'`),
+        complete: () => resolve(null)
       });
     });
   });
@@ -86,7 +86,6 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
 @NgModule({
   declarations: [
     AppComponent,
-    CustomActionFormatterComponent,
     CustomTitleFormatterComponent,
     EditorNgSelectComponent,
     FilterNgSelectComponent,
@@ -96,6 +95,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     GridBasicComponent,
     GridClientSideComponent,
     GridColspanComponent,
+    GridCompositeEditorComponent,
     GridContextMenuComponent,
     GridDraggableGroupingComponent,
     GridEditorComponent,
@@ -145,14 +145,13 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
       // to avoid passing the same options over and over in each grids of your App
       enableAutoResize: true,
       autoResize: {
-        containerId: 'grid-container',
-        sidePadding: 10
+        container: '#grid-container',
+        rightPadding: 10
       }
     })
   ],
   entryComponents: [
     // dynamically created components
-    CustomActionFormatterComponent,
     CustomTitleFormatterComponent,
     EditorNgSelectComponent,
     FilterNgSelectComponent,