feat(components): extract Custom Footer to be an external component

- extract Custom Footer from the vanilla bundle and make a separate component as an external package so it could be use by Aurelia-Slickgrid/Angular-Slickgrid/...
- also extract the Binding Helper & Service into a seperate package as well to that we can use it within the Custom Footer package without the need to also require vanilla-grid-bundle
- this external component will still be a required dependency of the vanilla-grid-bundle, it just brings the flexibility of it being available to other framework

packages/binding/README.md

@@ -0,0 +1,21 @@
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+[![npm](https://img.shields.io/npm/v/@slickgrid-universal/binding.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/binding)
+[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/binding?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/binding)
+
+[![Actions Status](https://github.com/ghiscoding/slickgrid-universal/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/slickgrid-universal/actions)
+[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
+[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
+[![codecov](https://codecov.io/gh/ghiscoding/slickgrid-universal/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/slickgrid-universal)
+
+## Binding Enginer & Helper
+#### @slickgrid-universal/binding
+
+A very Simple Vanilla Implementation of a Binding Engine & Helper to add properties/events 2 way bindings. This binding engine is a very simple implementation and is used by simple components like the Custom Footer & Pagination. Again this is a very simple implementation and should not be used with large components but is good enough for small use cases like a footer, pagination and other small ones.
+
+### External Dependencies
+- [DOM Purify](https://github.com/cure53/DOMPurify) to sanitize HTML text
+
+### Installation
+Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)

packages/binding/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@slickgrid-universal/binding",
+  "version": "0.14.1",
+  "description": "Simple Vanilla Implementation of a Binding Engine & Helper to add properties/events 2 way bindings",
+  "main": "dist/commonjs/index.js",
+  "browser": "src/index.ts",
+  "module": "dist/esm/index.js",
+  "types": "dist/commonjs/index.d.ts",
+  "typings": "dist/commonjs/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "scripts": {
+    "build": "cross-env tsc --build",
+    "postbuild": "npm-run-all bundle:commonjs",
+    "build:watch": "cross-env tsc --incremental --watch",
+    "dev": "run-s build sass:build sass:copy",
+    "dev:watch": "run-p build:watch",
+    "bundle": "run-p bundle:commonjs bundle:esm",
+    "bundle:commonjs": "tsc --project tsconfig.bundle.json --outDir dist/commonjs --module commonjs",
+    "bundle:esm": "cross-env tsc --project tsconfig.bundle.json --outDir dist/esm --module esnext --target es2018",
+    "prebundle": "npm-run-all delete:dist",
+    "delete:dist": "cross-env rimraf --maxBusyTries=10 dist",
+    "package:add-browser-prop": "cross-env node ../change-package-browser.js --add-browser=true --folder-name=binding",
+    "package:remove-browser-prop": "cross-env node ../change-package-browser.js --remove-browser=true --folder-name=binding"
+  },
+  "author": "Ghislain B.",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.15.0",
+    "npm": ">=6.14.8"
+  },
+  "browserslist": [
+    "last 2 version",
+    "> 1%",
+    "not dead"
+  ],
+  "dependencies": {
+    "@slickgrid-universal/common": "^0.14.1",
+    "dompurify": "^2.2.9"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2"
+  }
+}

packages/binding/src/.npmignore

@@ -0,0 +1,2 @@
+index.ts
+**/*.*

packages/binding/src/__tests__/index.spec.ts

@@ -0,0 +1,7 @@
+import * as services from '../index';
+
+describe('Testing Services entry point', () => {
+  it('should have multiple service entries defined', () => {
+    expect(services).toBeTruthy();
+  });
+});

packages/binding/src/index.spec.ts

@@ -0,0 +1,12 @@
+import * as entry from './index';
+
+describe('Testing library entry point', () => {
+  it('should have an index entry point defined', () => {
+    expect(entry).toBeTruthy();
+  });
+
+  it('should have all exported object defined', () => {
+    expect(typeof entry.BindingHelper).toBe('function');
+    expect(typeof entry.BindingService).toBe('function');
+  });
+});

packages/binding/src/index.ts

@@ -0,0 +1,2 @@
+export * from './binding.helper';
+export * from './binding.service';

packages/binding/tsconfig.bundle.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.bundle.json",
+  "compilerOptions": {
+    "typeRoots": [
+      "../typings",
+      "../../node_modules/@types"
+    ],
+    "outDir": "dist/commonjs"
+  },
+  "include": [
+    "../typings",
+    "**/*"
+  ]
+}

packages/binding/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compileOnSave": false,
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist/esm",
+    "outDir": "dist/esm",
+    "typeRoots": [
+      "typings"
+    ]
+  },
+  "exclude": [
+    "dist",
+    "node_modules",
+    "**/*.spec.ts"
+  ],
+  "filesGlob": [
+    "./src/**/*.ts"
+  ],
+  "include": [
+    "src/**/*.ts",
+    "typings/**/*.ts"
+  ]
+}

packages/common/src/interfaces/slickDataView.interface.ts

@@ -74,6 +74,9 @@ export interface SlickDataView {
   /** Get only the DataView filtered items */
   getFilteredItems: <T = any>() => T[];
 
+  /** Get the array length (count) of only the DataView filtered items */
+  getFilteredItemCount(): number;
+
   /** Get current Grouping info */
   getGrouping(): Grouping[];
 

packages/composite-editor-component/README.md

@@ -19,5 +19,12 @@ Vanilla Bundle implementation of a Composite Editor Modal Window which can do th
 - Mass Update Changes
 - Mass Selection Changes (similar to Mass Update but only for the selected items/rows)
 
+### Internal Dependencies
+- [@slickgrid-universal/common](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/common)
+
+### External Dependencies
+- [assign-deep](https://github.com/jonschlinkert/assign-deep) to deeply assign Object properties/values
+- [DOM Purify](https://github.com/cure53/DOMPurify) to sanitize HTML text
+
 ### Installation
 Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation).

packages/custom-footer-component/README.md

@@ -0,0 +1,24 @@
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+[![npm](https://img.shields.io/npm/v/@slickgrid-universal/custom-footer-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/custom-footer-component)
+[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/custom-footer-component?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/custom-footer-component)
+
+[![Actions Status](https://github.com/ghiscoding/slickgrid-universal/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/slickgrid-universal/actions)
+[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
+[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
+[![codecov](https://codecov.io/gh/ghiscoding/slickgrid-universal/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/slickgrid-universal)
+
+## Custom Footer Component
+#### @slickgrid-universal/custom-footer-component
+
+Vanilla Implementation of a Custom Footer Component that can optionally be shown at the bottom of the grid. The default behavior is to show metrics on the right side of the footer while the left side could optionally show row selection count (when that feature is enabled). The default texts for metrics & row selection (when enabled) also have a set of locales that allows you to change the text with current locale. Lastly, you could also choose to provide your own custom text/html in both left and/or right side.
+
+### Internal Dependencies
+- [@slickgrid-universal/common](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/common)
+
+### External Dependencies
+- [DOM Purify](https://github.com/cure53/DOMPurify) to sanitize HTML text
+
+### Installation
+Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)

packages/custom-footer-component/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@slickgrid-universal/custom-footer-component",
+  "version": "0.14.1",
+  "description": "Slick Custom Footer Component - Vanilla Implementation of a Custom Footer Component",
+  "main": "dist/commonjs/index.js",
+  "browser": "src/index.ts",
+  "module": "dist/esm/index.js",
+  "types": "dist/commonjs/index.d.ts",
+  "typings": "dist/commonjs/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "scripts": {
+    "build": "cross-env tsc --build",
+    "postbuild": "npm-run-all bundle:commonjs",
+    "build:watch": "cross-env tsc --incremental --watch",
+    "dev": "run-s build sass:build sass:copy",
+    "dev:watch": "run-p build:watch",
+    "bundle": "run-p bundle:commonjs bundle:esm",
+    "bundle:commonjs": "tsc --project tsconfig.bundle.json --outDir dist/commonjs --module commonjs",
+    "bundle:esm": "cross-env tsc --project tsconfig.bundle.json --outDir dist/esm --module esnext --target es2018",
+    "prebundle": "npm-run-all delete:dist",
+    "delete:dist": "cross-env rimraf --maxBusyTries=10 dist",
+    "package:add-browser-prop": "cross-env node ../change-package-browser.js --add-browser=true --folder-name=custom-footer-component",
+    "package:remove-browser-prop": "cross-env node ../change-package-browser.js --remove-browser=true --folder-name=custom-footer-component"
+  },
+  "author": "Ghislain B.",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.15.0",
+    "npm": ">=6.14.8"
+  },
+  "browserslist": [
+    "last 2 version",
+    "> 1%",
+    "not dead"
+  ],
+  "dependencies": {
+    "@slickgrid-universal/binding": "^0.14.1",
+    "@slickgrid-universal/common": "^0.14.1",
+    "dompurify": "^2.2.9"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2"
+  }
+}

packages/custom-footer-component/src/.npmignore

@@ -0,0 +1,2 @@
+index.ts
+**/*.*

packages/custom-footer-component/src/index.spec.ts

@@ -0,0 +1,11 @@
+import * as entry from './index';
+
+describe('Testing library entry point', () => {
+  it('should have an index entry point defined', () => {
+    expect(entry).toBeTruthy();
+  });
+
+  it('should have all exported object defined', () => {
+    expect(typeof entry.SlickFooterComponent).toBe('function');
+  });
+});

packages/custom-footer-component/src/index.ts

@@ -0,0 +1 @@
+export * from './slick-footer.component';

packages/vanilla-bundle/src/components/slick-footer.component.ts → packages/custom-footer-component/src/slick-footer.component.ts

@@ -15,7 +15,7 @@ import {
   SlickNamespace,
   TranslaterService,
 } from '@slickgrid-universal/common';
-import { BindingHelper } from '../services/binding.helper';
+import { BindingHelper } from '@slickgrid-universal/binding';
 
 declare const Slick: SlickNamespace;
 export class SlickFooterComponent {

packages/vanilla-bundle/src/components/__tests__/slick-footer.spec.ts → packages/custom-footer-component/src/slick-footer.spec.ts

@@ -1,7 +1,7 @@
 import 'jest-extended';
 import { CustomFooterOption, GridOption, SlickGrid } from '@slickgrid-universal/common';
-import { SlickFooterComponent } from '../slick-footer.component';
-import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
+import { SlickFooterComponent } from './slick-footer.component';
+import { TranslateServiceStub } from '../../../test/translateServiceStub';
 
 function removeExtraSpaces(text: string) {
   return `${text}`.replace(/\s{2,}/g, '');

packages/custom-footer-component/tsconfig.bundle.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.bundle.json",
+  "compilerOptions": {
+    "typeRoots": [
+      "../typings",
+      "../../node_modules/@types"
+    ],
+    "outDir": "dist/commonjs"
+  },
+  "include": [
+    "../typings",
+    "**/*"
+  ]
+}

packages/custom-footer-component/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compileOnSave": false,
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist/esm",
+    "outDir": "dist/esm",
+    "typeRoots": [
+      "typings"
+    ]
+  },
+  "exclude": [
+    "dist",
+    "node_modules",
+    "**/*.spec.ts"
+  ],
+  "filesGlob": [
+    "./src/**/*.ts"
+  ],
+  "include": [
+    "src/**/*.ts",
+    "typings/**/*.ts"
+  ]
+}

packages/empty-warning-component/README.md

@@ -14,8 +14,11 @@
 
 Vanilla Implementation of an Empty Dataset Warning Component when there is no data available in the grid. This is in summary a very simplified `div` showing a warning message (that can be translated as well) when there are no data to show in the grid.
 
+### Internal Dependencies
+- [@slickgrid-universal/common](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/common)
+
 ### External Dependencies
-No external dependency
+- [DOM Purify](https://github.com/cure53/DOMPurify) to sanitize HTML text
 
 ### Installation
 Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)

packages/vanilla-bundle/README.md

@@ -14,6 +14,15 @@
 
 Vanilla Bundle implementation (no framework, plain TypeSript implementation). This package does what other framework would do, that is to make all the features usable in 1 bundle so that it could then be used by other Apps/Projects, for example we use this bundle in our SalesForce (with Lighning Web Component) App and it requires plain ES6 JavaScript which this bundle also produce (for that there's a `dist-grid-bundle-zip` folder which will zip the ES6 `dist` folder which we then import in SalesForce).
 
+### Internal Dependencies
+- [@slickgrid-universal/common](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/common)
+- [@slickgrid-universal/custom-footer-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/custom-footer-component)
+- [@slickgrid-universal/empty-warning-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/empty-warning-component)
+
+### External Dependencies
+- [DOM Purify](https://github.com/cure53/DOMPurify) to sanitize HTML text
+- [whatwg-fetch](https://github.com/whatwg/fetch) - Fetch Standard
+
 ### Installation
 This Vanilla Bundle is used in our SalesForce implementation (since it requires plain ES6) and is also used by the standalone `webpack-demo-vanilla-bundle` which serves for demo purposes.
 

packages/vanilla-bundle/package.json

@@ -48,6 +48,7 @@
   "dependencies": {
     "@slickgrid-universal/common": "^0.14.1",
     "@slickgrid-universal/composite-editor-component": "^0.14.1",
+    "@slickgrid-universal/custom-footer-component": "^0.14.1",
     "@slickgrid-universal/empty-warning-component": "^0.14.1",
     "@slickgrid-universal/excel-export": "^0.14.1",
     "@slickgrid-universal/text-export": "^0.14.1",

packages/vanilla-bundle/src/components/slick-pagination.component.ts

@@ -11,7 +11,7 @@ import {
   Subscription,
   PubSubService,
 } from '@slickgrid-universal/common';
-import { BindingHelper } from '../services/binding.helper';
+import { BindingHelper } from '@slickgrid-universal/binding';
 
 export class SlickPaginationComponent {
   private _bindingHelper: BindingHelper;

packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts

@@ -72,12 +72,12 @@ import {
 } from '@slickgrid-universal/common';
 import { SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
+import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 
 import { EventPubSubService } from '../services/eventPubSub.service';
 import { TextExportService } from '../services/textExport.service';
 import { ResizerService } from '../services/resizer.service';
 import { SalesforceGlobalGridOptions } from '../salesforce-global-grid-options';
-import { SlickFooterComponent } from './slick-footer.component';
 import { SlickPaginationComponent } from './slick-pagination.component';
 import { SlickerGridInstance } from '../interfaces/slickerGridInstance.interface';
 import { UniversalContainerService } from '../services/universalContainer.service';

packages/vanilla-bundle/src/index.ts

@@ -1,7 +1,7 @@
 import { Aggregators, Editors, Enums, Filters, Formatters, GroupTotalFormatters, SortComparers, Utilities } from '@slickgrid-universal/common';
+import { BindingService } from '@slickgrid-universal/binding';
 import { SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
-import { BindingService } from './services/index';
 import { SlickVanillaGridBundle } from './components/slick-vanilla-grid-bundle';
 
 const Slicker = {

packages/vanilla-bundle/src/services/index.ts

@@ -1,5 +1,3 @@
-export * from './binding.service';
-export * from './binding.helper';
 export * from './eventPubSub.service';
 export * from './resizer.service';
 export * from './textExport.service';